initial commit on Federted servers

2026-10-19 16:23:55 -05:00
commit b9721ff13f
217 changed files with 31534 additions and 0 deletions
@@ -0,0 +1,183 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { signOut } from 'next-auth/react'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { Search, Bell, Plus, Menu, LogOut, Sun, Moon } from 'lucide-react'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { useTheme } from 'next-themes'
+import { useMounted } from '@/components/client-only'
+import { ACTIVE_PAGE_CHANGED } from '@/lib/pages'
+
+// Notion keeps the top bar minimal: a breadcrumb path on the left, a subtle
+// Quick Find pill, and ghost icon buttons on the right.
+const SECTION_LABELS: Record<string, string> = {
+  '/bookmarks': 'All Bookmarks',
+  '/calendar': 'Calendar',
+  '/tags': 'Tags',
+  '/kanban': 'Kanban',
+  '/contacts': 'Contacts',
+  '/settings': 'Settings',
+  '/admin': 'Admin',
+  '/pages': 'Pages',
+}
+
+interface TopBarProps {
+  user: { id: string; name?: string | null; email?: string | null; image?: string | null }
+  alerts: any[]
+  onDismissAlert: (id: string) => void
+  onAddBookmark: () => void
+  onToggleSidebar: () => void
+  onQuickFind: () => void
+}
+
+export function TopBar({ user, alerts, onDismissAlert, onAddBookmark, onToggleSidebar, onQuickFind }: TopBarProps) {
+  const [showAlerts, setShowAlerts] = useState(false)
+  const pathname = usePathname()
+  const mounted = useMounted()
+  const { theme, setTheme } = useTheme()
+  const [activePageTitle, setActivePageTitle] = useState<string | null>(null)
+
+  // The pages workspace announces the open page so breadcrumbs can show it.
+  // The title only renders on /pages, so route changes need no reset effect.
+  useEffect(() => {
+    const handler = (e: Event) => setActivePageTitle((e as CustomEvent<string | null>).detail)
+    window.addEventListener(ACTIVE_PAGE_CHANGED, handler)
+    return () => window.removeEventListener(ACTIVE_PAGE_CHANGED, handler)
+  }, [])
+  const pageTitle = pathname === '/pages' ? activePageTitle : null
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const el = document.getElementById('topbar-alerts')
+      if (el && !el.contains(e.target as Node)) setShowAlerts(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  const section = SECTION_LABELS[pathname] ?? 'computer'
+  const isMac = mounted && typeof navigator !== 'undefined' && /mac|iphone|ipad/i.test(navigator.userAgent)
+  const quickFindHint = !mounted ? '⌘K' : isMac ? '⌘K' : 'Ctrl K'
+
+  // Review CR-02: local sign-out is always available, but it is NOT the same
+  // claim as confirmed global revocation. Ask the trusted server to revoke
+  // (Go tokenVersion bump) first and report honestly when that fails — other
+  // devices and already-issued assertions then survive until the backend
+  // recovers, and the user is told so instead of being silently logged out.
+  const [signingOut, setSigningOut] = useState(false)
+  const doSignOut = async () => {
+    if (signingOut) return
+    setSigningOut(true)
+    let revoked = false
+    try {
+      const res = await fetch('/api/session/revoke', { method: 'POST' })
+      const data = await res.json().catch(() => null)
+      revoked = res.ok && data?.revoked === true
+    } catch { /* unreachable Next route — treated as a revocation failure below */ }
+    if (!revoked) {
+      toast.error('Signed out on this device, but global revocation failed — other sessions may remain signed in until the backend recovers.')
+    }
+    void signOut({ redirectTo: '/login' })
+  }
+
+  return (
+    <header className="flex items-center gap-2 border-b bg-card px-3 py-2">
+      <Button variant="ghost" size="icon-sm" onClick={onToggleSidebar} className="lg:hidden">
+        <Menu className="h-4 w-4" />
+      </Button>
+
+      <Breadcrumb className="min-w-0 flex-1">
+        <BreadcrumbList className="flex-nowrap">
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild className="font-medium">
+              <Link href="/pages">computer</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem className="min-w-0">
+            {pageTitle ? (
+              <>
+                <BreadcrumbLink asChild>
+                  <Link href="/pages">Pages</Link>
+                </BreadcrumbLink>
+                <BreadcrumbSeparator />
+                <BreadcrumbPage className="truncate font-normal text-foreground">{pageTitle}</BreadcrumbPage>
+              </>
+            ) : (
+              <BreadcrumbPage className="truncate font-normal text-foreground">{section}</BreadcrumbPage>
+            )}
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <button
+        onClick={onQuickFind}
+        aria-label="Quick find"
+        className="flex shrink-0 items-center gap-2 rounded-md border border-border/60 bg-muted/40 px-2.5 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+      >
+        <Search className="h-3.5 w-3.5" />
+        <span className="hidden md:inline">Quick find</span>
+        <kbd className="pointer-events-none hidden select-none rounded border bg-background px-1.5 text-[10px] font-medium md:inline-flex">{quickFindHint}</kbd>
+      </button>
+
+      <Button variant="ghost" size="sm" onClick={onAddBookmark} className="shrink-0 gap-1.5">
+        <Plus className="h-4 w-4" />
+        <span className="hidden sm:inline">New</span>
+      </Button>
+
+      <Button variant="ghost" size="icon-sm" className="shrink-0" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+        <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+        <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      </Button>
+
+      <div className="relative shrink-0" id="topbar-alerts">
+        <Button variant="ghost" size="icon-sm" onClick={() => setShowAlerts(!showAlerts)}>
+          <Bell className="h-4 w-4" />
+          {(alerts?.length ?? 0) > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-[10px] text-destructive-foreground">
+              {alerts?.length ?? 0}
+            </span>
+          )}
+        </Button>
+        {showAlerts && (
+          <div className="absolute right-0 top-full mt-2 w-80 rounded-lg border bg-card p-2 shadow-lg z-50">
+            <p className="px-2 py-1 text-xs font-medium text-muted-foreground">Alerts</p>
+            {(alerts?.length ?? 0) === 0 && (
+              <p className="px-2 py-4 text-sm text-center text-muted-foreground">No pending alerts</p>
+            )}
+            {(alerts ?? []).map((a: any) => (
+              <div key={a?.id} className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{a?.title ?? 'Untitled'}</p>
+                  <p className="text-xs text-muted-foreground">Alert due</p>
+                </div>
+                <Button variant="ghost" size="xs" onClick={() => onDismissAlert(a?.id)}>Dismiss</Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2 pl-1">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold">
+          {(user?.name ?? user?.email ?? '?')[0]?.toUpperCase()}
+        </div>
+        <span className="hidden sm:inline text-sm font-medium">{user?.name ?? user?.email ?? 'User'}</span>
+        <Button variant="ghost" size="icon-sm" onClick={doSignOut} disabled={signingOut} aria-label="Sign out">
+          <LogOut className="h-4 w-4" />
+        </Button>
+      </div>
+    </header>
+  )
+}