add auth

src/components/HeaderNav.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import NavLink from './NavLink'
+
+interface Props {
+  username: string
+  isAdmin: boolean
+}
+
+export default function HeaderNav({ username, isAdmin }: Props) {
+  const router = useRouter()
+
+  async function handleLogout() {
+    await fetch('/api/auth/logout', { method: 'POST' })
+    router.push('/login')
+    router.refresh()
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      {isAdmin && <NavLink href="/manage">Manage</NavLink>}
+      <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+        {username}
+      </span>
+      <button
+        onClick={handleLogout}
+        className="text-sm px-3 py-1.5 rounded-lg transition-colors"
+        style={{ color: 'var(--text-secondary)' }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
+          ;(e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
+        }}
+        onMouseLeave={(e) => {
+          ;(e.currentTarget as HTMLElement).style.backgroundColor = 'transparent'
+          ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+        }}
+      >
+        Sign Out
+      </button>
+    </div>
+  )
+}

src/components/ManageSubNav.tsx

@@ -6,6 +6,7 @@ import { usePathname } from 'next/navigation'
 const TABS = [
   { href: '/manage', label: 'Libraries' },
   { href: '/manage/tags', label: 'Tags' },
+  { href: '/manage/users', label: 'Users' },
 ]
 
 export default function ManageSubNav() {