init

src/components/browser.ts

@@ -0,0 +1,89 @@
+export function renderHeader(currentHandle: string, isLoggedIn: boolean, userHandle?: string): string {
+  const loginBtn = isLoggedIn
+    ? `<button type="button" class="header-btn user-btn" id="user-btn" title="${userHandle}">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
+        </svg>
+      </button>`
+    : `<button type="button" class="header-btn login-btn" id="login-btn" title="Login">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
+          <polyline points="10 17 15 12 10 7"/>
+          <line x1="15" y1="12" x2="3" y2="12"/>
+        </svg>
+      </button>`
+
+  return `
+    <div class="header">
+      <form class="header-form" id="header-form">
+        <input
+          type="text"
+          class="header-input"
+          id="header-input"
+          placeholder="handle (e.g., syui.ai)"
+          value="${currentHandle}"
+        >
+        <button type="submit" class="header-btn at-btn" title="Browse">@</button>
+        ${loginBtn}
+      </form>
+    </div>
+  `
+}
+
+export interface HeaderCallbacks {
+  onBrowse: (handle: string) => void
+  onLogin: () => void
+  onLogout: () => void
+}
+
+export function mountHeader(
+  container: HTMLElement,
+  currentHandle: string,
+  isLoggedIn: boolean,
+  userHandle: string | undefined,
+  callbacks: HeaderCallbacks
+): void {
+  container.innerHTML = renderHeader(currentHandle, isLoggedIn, userHandle)
+
+  const form = document.getElementById('header-form') as HTMLFormElement
+  const input = document.getElementById('header-input') as HTMLInputElement
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault()
+    const handle = input.value.trim()
+    if (handle) {
+      callbacks.onBrowse(handle)
+    }
+  })
+
+  if (isLoggedIn) {
+    const userBtn = document.getElementById('user-btn')
+    userBtn?.addEventListener('click', async (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (confirm('Logout?')) {
+        await callbacks.onLogout()
+      }
+    })
+  } else {
+    const loginBtn = document.getElementById('login-btn')
+    loginBtn?.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      callbacks.onLogin()
+    })
+  }
+}
+
+// Keep old function for compatibility
+export function mountBrowser(
+  container: HTMLElement,
+  currentHandle: string,
+  onSubmit: (handle: string) => void
+): void {
+  mountHeader(container, currentHandle, false, undefined, {
+    onBrowse: onSubmit,
+    onLogin: () => {},
+    onLogout: () => {}
+  })
+}