add @user

src/main.ts

@@ -94,6 +94,40 @@ function renderFooter(handle: string): string {
   `
 }
 
+// Detect network from handle domain
+// e.g., syui.ai → bsky.social, syui.syui.ai → syu.is
+function detectNetworkFromHandle(handle: string): string {
+  const parts = handle.split('.')
+  if (parts.length >= 2) {
+    // Get domain part (last 2 parts for most cases)
+    const domain = parts.slice(-2).join('.')
+    // Check if domain matches any network key
+    if (networks[domain]) {
+      return domain
+    }
+    // Check if it's a subdomain of a known network
+    for (const networkKey of Object.keys(networks)) {
+      if (handle.endsWith(`.${networkKey}`) || handle.endsWith(networkKey)) {
+        return networkKey
+      }
+    }
+  }
+  // Default to bsky.social
+  return 'bsky.social'
+}
+
+function switchNetwork(newNetwork: string): void {
+  if (newNetwork === browserNetwork) return
+  browserNetwork = newNetwork
+  localStorage.setItem('browserNetwork', newNetwork)
+  const networkConfig = networks[newNetwork]
+  if (networkConfig) {
+    setNetworkConfig(networkConfig)
+    setAuthNetworkConfig(networkConfig)
+  }
+  updatePdsSelector()
+}
+
 function renderPdsSelector(): string {
   const networkKeys = Object.keys(networks)
   const options = networkKeys.map(key => {
@@ -220,10 +254,11 @@ function applyTitleTranslations(): void {
   }
 }
 
-function renderTabs(activeTab: 'blog' | 'browser' | 'new', isLoggedIn: boolean): string {
+function renderTabs(activeTab: 'blog' | 'browser' | 'new', isLoggedIn: boolean, handle?: string): string {
+  const browserHandle = handle || config.handle
   let tabs = `
     <a href="/" class="tab ${activeTab === 'blog' ? 'active' : ''}" id="blog-tab">Blog</a>
-    <button type="button" class="tab ${activeTab === 'browser' ? 'active' : ''}" id="browser-tab" data-handle="${config.handle}">Browser</button>
+    <button type="button" class="tab ${activeTab === 'browser' ? 'active' : ''}" id="browser-tab" data-handle="${browserHandle}">Browser</button>
   `
 
   if (isLoggedIn) {
@@ -242,6 +277,10 @@ function openBrowser(handle: string, service: string | null = null, collection:
 
   if (!contentEl || !tabsEl) return
 
+  // Auto-detect and switch network based on handle
+  const detectedNetwork = detectNetworkFromHandle(handle)
+  switchNetwork(detectedNetwork)
+
   // Save current content if not already in browser mode
   if (!browserMode) {
     savedContent = {
@@ -678,8 +717,10 @@ async function render(): Promise<void> {
   const handle = route.handle || config.handle
 
   // Skip re-rendering for static blog/post pages (but still mount header for login)
+  // Exception: if logged in on blog page, re-render to show user's blog
   const isStaticRoute = route.type === 'blog' || route.type === 'post'
-  if (isStatic && isStaticRoute) {
+  const shouldUseStatic = isStatic && isStaticRoute && !(isLoggedIn && route.type === 'blog')
+  if (shouldUseStatic) {
     // Only mount header for login functionality (pass isStatic=true to skip unnecessary re-render)
     mountHeader(headerEl, handle, isLoggedIn, authSession?.handle, {
       onBrowse: (newHandle) => {
@@ -826,21 +867,83 @@ async function render(): Promise<void> {
       }
       break
 
-    case 'blog':
-    default:
+    case 'user-blog':
+      // /@{handle} - Any user's blog
       try {
-        const profile = await getProfile(config.handle)
-        const webUrl = networks[config.network]?.web
-        profileEl.innerHTML = renderTabs('blog', isLoggedIn)
+        const userHandle = route.handle!
+        // Auto-detect and switch network based on handle
+        const detectedNetwork = detectNetworkFromHandle(userHandle)
+        switchNetwork(detectedNetwork)
+        const profile = await getProfile(userHandle)
+        const webUrl = networks[browserNetwork]?.web
+        profileEl.innerHTML = renderTabs('blog', isLoggedIn, userHandle)
         const profileContentEl = document.createElement('div')
         profileEl.appendChild(profileContentEl)
         mountProfile(profileContentEl, profile, webUrl)
 
-        const servicesHtml = await renderServices(config.handle)
+        const servicesHtml = await renderServices(userHandle)
         profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
 
         const posts = await listRecords(profile.did, config.collection)
-        mountPostList(contentEl, posts)
+        mountPostList(contentEl, posts, userHandle)
+      } catch (err) {
+        console.error(err)
+        contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`
+      }
+      break
+
+    case 'user-post':
+      // /@{handle}/post/{rkey} - Any user's post detail
+      try {
+        const userHandle = route.handle!
+        // Auto-detect and switch network based on handle
+        const detectedNetwork = detectNetworkFromHandle(userHandle)
+        switchNetwork(detectedNetwork)
+        const profile = await getProfile(userHandle)
+        const webUrl = networks[browserNetwork]?.web
+        profileEl.innerHTML = renderTabs('blog', isLoggedIn, userHandle)
+        const profileContentEl = document.createElement('div')
+        profileEl.appendChild(profileContentEl)
+        mountProfile(profileContentEl, profile, webUrl)
+
+        const servicesHtml = await renderServices(userHandle)
+        profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
+
+        const post = await getRecord(profile.did, config.collection, route.rkey!)
+        if (post) {
+          const canEdit = isLoggedIn && authSession?.did === profile.did
+          mountPostDetail(contentEl, post, userHandle, config.collection, canEdit, undefined, browserNetwork)
+        } else {
+          contentEl.innerHTML = '<p>Post not found</p>'
+        }
+      } catch (err) {
+        console.error(err)
+        contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`
+      }
+      break
+
+    case 'blog':
+    default:
+      try {
+        // If logged in, show logged-in user's blog instead of site owner's
+        const blogHandle = isLoggedIn ? authSession!.handle : config.handle
+        const detectedNetwork = isLoggedIn ? detectNetworkFromHandle(blogHandle) : config.network
+        if (isLoggedIn) {
+          switchNetwork(detectedNetwork)
+        }
+        const profile = await getProfile(blogHandle)
+        const webUrl = networks[detectedNetwork]?.web
+        profileEl.innerHTML = renderTabs('blog', isLoggedIn, blogHandle)
+        const profileContentEl = document.createElement('div')
+        profileEl.appendChild(profileContentEl)
+        mountProfile(profileContentEl, profile, webUrl)
+
+        const servicesHtml = await renderServices(blogHandle)
+        profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
+
+        const posts = await listRecords(profile.did, config.collection)
+        // Use handle for post links if logged in user
+        mountPostList(contentEl, posts, isLoggedIn ? blogHandle : undefined)
       } catch (err) {
         console.error(err)
         contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`