feat(layout): unified Inbox + UserMenu extraction

Replaces the topbar's separate AlertBell + NotificationBell with a
single Inbox popover that tabs between alerts and notifications.
NotificationBell keeps a popover-gate so it doesn't fire its list
fetch when Inbox is mounted alongside it.

Extracts the user dropdown into <UserMenu> and moves the port
switcher + role label + theme toggle into the sidebar footer so
the topbar can reclaim space for breadcrumbs and command search.

Adds dedicated Insights / Receipts nav sections in the sidebar
(scaffolds the website-analytics + upload-receipts entry points).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/layout/topbar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Plus, Moon, Sun, LogOut, User, Settings, Bell } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 
 import { useUIStore } from '@/stores/ui-store';
@@ -15,11 +15,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { PortSwitcher } from '@/components/layout/port-switcher';
 import { Breadcrumbs } from '@/components/layout/breadcrumbs';
 import { CommandSearch } from '@/components/search/command-search';
-import { NotificationBell } from '@/components/notifications/notification-bell';
-import { AlertBell } from '@/components/alerts/alert-bell';
+import { Inbox } from '@/components/layout/inbox';
+import { UserMenu } from '@/components/layout/user-menu';
 import type { Port } from '@/lib/db/schema/ports';
 
 interface TopbarProps {
@@ -30,31 +29,29 @@ interface TopbarProps {
 export function Topbar({ ports, user }: TopbarProps) {
   const router = useRouter();
   const currentPortSlug = useUIStore((s) => s.currentPortSlug);
-  const darkMode = useUIStore((s) => s.darkMode);
-  const toggleDarkMode = useUIStore((s) => s.toggleDarkMode);
-
   const base = currentPortSlug ? `/${currentPortSlug}` : '';
 
-  function handleToggleDarkMode() {
-    toggleDarkMode();
-    document.documentElement.classList.toggle('dark');
-  }
-
   return (
-    <header className="h-14 border-b border-border bg-background flex items-center gap-3 px-4 shrink-0">
-      {/* Breadcrumbs / page title */}
-      <div className="flex-1 min-w-0">
+    // Three-column grid: breadcrumbs left, search center, actions right.
+    // The brand logo lives in the sidebar header (per design feedback) so the
+    // topbar center is dedicated to the global search bar.
+    <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(360px,640px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
+      {/* LEFT: breadcrumbs / page title */}
+      <div className="min-w-0">
         <Breadcrumbs />
       </div>
 
-      {/* Actions row */}
-      <div className="flex items-center gap-2 shrink-0">
-        {/* Global search — inline with dropdown results */}
-        <CommandSearch />
-
-        {/* Port switcher — hidden for single port */}
-        <PortSwitcher ports={ports} />
+      {/* CENTER: global search - capped width and horizontally centered
+          inside its grid slot so it sits visually in the middle of the
+          topbar regardless of breadcrumb / action-row width. */}
+      <div className="flex items-center justify-center min-w-0">
+        <div className="w-full max-w-md mx-auto min-w-0">
+          <CommandSearch />
+        </div>
+      </div>
 
+      {/* RIGHT: action row */}
+      <div className="flex items-center gap-2 shrink-0 justify-end">
         {/* + New dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -88,17 +85,21 @@ export function Topbar({ ports, user }: TopbarProps) {
           </DropdownMenuContent>
         </DropdownMenu>
 
-        {/* Phase B operational alerts — distinct from user notifications */}
-        <AlertBell />
-
-        {/* Notification bell — real-time via socket */}
-        <NotificationBell />
+        {/* Unified inbox - combines system alerts (operational) and personal
+            notifications (user-targeted) into a single bell with two tabs.
+            Replaces the previous AlertBell + NotificationBell pair. */}
+        <Inbox />
 
         <Separator orientation="vertical" className="h-6" />
 
-        {/* User menu */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
+        {/* User menu - single source of truth for the profile dropdown.
+            Same component is mounted in the sidebar footer so the menu
+            items (incl. port switcher) stay consistent across triggers. */}
+        <UserMenu
+          align="end"
+          user={user}
+          ports={ports}
+          trigger={
             <Button variant="ghost" size="icon" className="rounded-full">
               <Avatar className="w-7 h-7 shadow-sm ring-2 ring-background">
                 <AvatarImage src={undefined} />
@@ -107,56 +108,8 @@ export function Topbar({ ports, user }: TopbarProps) {
                 </AvatarFallback>
               </Avatar>
             </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel>
-              <div className="font-medium">{user?.name ?? 'My Account'}</div>
-              {user?.email && (
-                <div className="text-xs text-muted-foreground font-normal">{user.email}</div>
-              )}
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-            <DropdownMenuItem onClick={() => router.push(`${base}/settings/profile` as any)}>
-              <User className="w-4 h-4 mr-2" />
-              Profile
-            </DropdownMenuItem>
-            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-            <DropdownMenuItem onClick={() => router.push(`${base}/settings` as any)}>
-              <Settings className="w-4 h-4 mr-2" />
-              Settings
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              onClick={() => router.push(`${base}/notifications/preferences` as any)}
-            >
-              <Bell className="w-4 h-4 mr-2" />
-              Notification preferences
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={handleToggleDarkMode}>
-              {darkMode ? (
-                <>
-                  <Sun className="w-4 h-4 mr-2" />
-                  Light Mode
-                </>
-              ) : (
-                <>
-                  <Moon className="w-4 h-4 mr-2" />
-                  Dark Mode
-                </>
-              )}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              className="text-destructive focus:text-destructive"
-              onClick={() => router.push('/api/auth/sign-out')}
-            >
-              <LogOut className="w-4 h-4 mr-2" />
-              Sign Out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+          }
+        />
       </div>
     </header>
   );