From 5589110925907f6f7bfee234f3e004c0485239c2 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Sun, 19 Apr 2026 14:42:59 -0400
Subject: [PATCH] feat(ui): redesign top bar as chrome-glass masthead (#696)

Extract the app header into a dedicated TopBar component and apply the
same translucent chrome language used by the sidebar: bg-sidebar +
backdrop-blur-md + inset top highlight. A new --chrome-top-highlight
token drives the highlight in both themes via the shadow-chrome-top
utility alias.

Restore the pulsing-dot unread indicator on the notification bell
(replaces the temporary count pill) and keep its aria-label dynamic so
screen readers still hear the unread count. Tighten nav a11y with
aria-current on the active item, aria-label on icon-only buttons, and a
proper <nav> landmark around the desktop Highlight group.
---
 frontend/src/components/EditorLayout.tsx      | 107 ++-------------
 frontend/src/components/NotificationPanel.tsx |  10 +-
 frontend/src/components/TopBar.tsx            | 128 ++++++++++++++++++
 frontend/src/index.css                        |   3 +
 4 files changed, 149 insertions(+), 99 deletions(-)
 create mode 100644 frontend/src/components/TopBar.tsx

diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx
index 9f5579d0..7a5266d1 100644
--- a/frontend/src/components/EditorLayout.tsx
+++ b/frontend/src/components/EditorLayout.tsx
@@ -17,10 +17,9 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from './ui/alert-dialog';
 import { Tabs, TabsList, TabsTrigger, TabsHighlight, TabsHighlightItem } from './ui/tabs';
 import { springs } from '@/lib/motion';
-import { Highlight, HighlightItem } from './animate-ui/primitives/effects/highlight';
 import { CursorProvider, Cursor, CursorContainer, CursorFollow } from '@/components/animate-ui/primitives/animate/cursor';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
-import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, ExternalLink, MoreVertical, BellRing, Rocket, HardDrive, ScrollText, Activity, Radar, Undo2, RefreshCw, Download, Clock, Menu, FolderSearch, Loader2, Tag, Check, ChevronDown, GitBranch, FileCode2, ShieldCheck, ArrowUpRight, Copy } from 'lucide-react';
+import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, ExternalLink, MoreVertical, BellRing, Rocket, HardDrive, ScrollText, Activity, Radar, Undo2, RefreshCw, Download, Clock, FolderSearch, Loader2, Tag, Check, ChevronDown, GitBranch, FileCode2, ShieldCheck, ArrowUpRight, Copy } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { LabelPill, LabelDot } from './LabelPill';
 import { type Label as StackLabel } from './label-types';
@@ -39,7 +38,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/t
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from './ui/dropdown-menu';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from './ui/context-menu';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
+import { TopBar } from './TopBar';
 import { cn } from '@/lib/utils';
 import { SettingsModal } from './SettingsModal';
 import { StackAlertSheet } from './StackAlertSheet';
@@ -2482,60 +2481,14 @@ export default function EditorLayout() {
 
       {/* Main Content Area */}
       <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Top Header Bar — Three-zone layout: Node Pill | Navigation | Utilities */}
-        <div className="h-14 flex items-center px-4 border-b border-border gap-3">
-          {/* LEFT ZONE: Node Context Pill */}
-          <div className="flex-shrink-0">
-            {activeNode?.type === 'remote' ? (
-              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-info-muted border border-info/20 text-info text-sm font-medium">
-                <span className="w-2 h-2 rounded-full bg-info animate-pulse shrink-0" />
-                {activeNode.name}
-              </div>
-            ) : (
-              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted/50 border border-border text-muted-foreground text-sm">
-                <span className="w-2 h-2 rounded-full bg-success animate-pulse shrink-0" />
-                {activeNode?.name ?? 'Local'}
-              </div>
-            )}
-          </div>
-
-          {/* CENTER ZONE: Navigation Group (hidden on mobile) */}
-          <div className="flex-1 hidden md:flex justify-center">
-            <Highlight
-              className="inset-0 rounded-md bg-accent"
-              value={navTabValue}
-              controlledItems
-              mode="children"
-              click={false}
-              transition={springs.snappy}
-            >
-              <div className="inline-flex items-center rounded-lg p-1 gap-0.5">
-                {navItems.map(({ value, label, icon: Icon }) => (
-                  <HighlightItem key={value} value={value}>
-                    <button
-                      onClick={() => handleNavigate(value)}
-                      className={cn(
-                        'relative inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
-                        activeView === value
-                          ? 'text-foreground after:absolute after:bottom-0 after:left-1/4 after:right-1/4 after:h-[2px] after:rounded-full after:bg-brand after:blur-[2px]'
-                          : 'text-muted-foreground hover:text-foreground'
-                      )}
-                    >
-                      <Icon className="w-4 h-4 shrink-0" />
-                      <span className="hidden xl:inline">{label}</span>
-                    </button>
-                  </HighlightItem>
-                ))}
-              </div>
-            </Highlight>
-          </div>
-
-          {/* Spacer for mobile (when center nav is hidden) */}
-          <div className="flex-1 md:hidden" />
-
-          {/* RIGHT ZONE: Utilities */}
-          <div className="flex-shrink-0 flex items-center gap-2">
-            {/* Notifications */}
+        <TopBar
+          activeView={activeView}
+          navItems={navItems}
+          navTabValue={navTabValue}
+          onNavigate={handleNavigate}
+          mobileNavOpen={mobileNavOpen}
+          onMobileNavOpenChange={setMobileNavOpen}
+          notifications={
             <NotificationPanel
               notifications={notifications}
               nodes={nodes}
@@ -2544,47 +2497,15 @@ export default function EditorLayout() {
               onDelete={deleteNotification}
               onNavigate={navigateToNotification}
             />
-
-
-            {/* User Profile Dropdown */}
+          }
+          userMenu={
             <UserProfileDropdown
               theme={theme}
               setTheme={setTheme}
               onOpenSettings={() => setSettingsModalOpen(true)}
             />
-
-            {/* Mobile Navigation Trigger */}
-            <Sheet open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-lg md:hidden">
-                  <Menu className="w-4 h-4" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right" className="w-64 p-0">
-                <div className="p-4 border-b">
-                  <p className="text-sm font-medium">Navigation</p>
-                </div>
-                <nav className="flex flex-col p-2 gap-1">
-                  {navItems.map(({ value, label, icon: Icon }) => (
-                    <button
-                      key={value}
-                      onClick={() => { handleNavigate(value); setMobileNavOpen(false); }}
-                      className={cn(
-                        'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors',
-                        activeView === value
-                          ? 'bg-glass-highlight font-medium text-foreground'
-                          : 'text-muted-foreground hover:bg-glass-highlight hover:text-foreground'
-                      )}
-                    >
-                      <Icon className="w-4 h-4" />
-                      {label}
-                    </button>
-                  ))}
-                </nav>
-              </SheetContent>
-            </Sheet>
-          </div>
-        </div>
+          }
+        />
 
         {/* Main Workspace */}
         <div key={activeView} className="flex-1 overflow-y-auto p-6 animate-fade-up">
diff --git a/frontend/src/components/NotificationPanel.tsx b/frontend/src/components/NotificationPanel.tsx
index 7a36ce28..b12da6e7 100644
--- a/frontend/src/components/NotificationPanel.tsx
+++ b/frontend/src/components/NotificationPanel.tsx
@@ -132,11 +132,9 @@ export function NotificationPanel({
 
     const bellBadge =
         unreadCount > 0 ? (
-            <span
-                aria-hidden="true"
-                className="absolute -right-1 -top-1 flex min-h-[16px] min-w-[16px] items-center justify-center rounded-full bg-destructive px-1 font-mono text-[9px] font-semibold tabular-nums leading-none text-destructive-foreground"
-            >
-                {unreadCount > 99 ? '99+' : unreadCount}
+            <span aria-hidden="true" className="absolute -right-1 -top-1 flex h-2.5 w-2.5">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-75" />
+                <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-destructive" />
             </span>
         ) : null;
 
@@ -154,7 +152,7 @@ export function NotificationPanel({
                     size="icon"
                     className="relative h-8 w-8 rounded-lg"
                     title="Notifications"
-                    aria-label="Notifications"
+                    aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}
                 >
                     <Bell className="h-4 w-4" strokeWidth={1.5} />
                     {bellBadge}
diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
new file mode 100644
index 00000000..ccc71a81
--- /dev/null
+++ b/frontend/src/components/TopBar.tsx
@@ -0,0 +1,128 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Menu } from 'lucide-react';
+import { Button } from './ui/button';
+import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
+import { Highlight, HighlightItem } from './animate-ui/primitives/effects/highlight';
+import { springs } from '@/lib/motion';
+import { cn } from '@/lib/utils';
+
+export interface TopBarNavItem {
+    value: string;
+    label: string;
+    icon: LucideIcon;
+}
+
+interface TopBarProps {
+    activeView: string;
+    navItems: TopBarNavItem[];
+    navTabValue: string | undefined;
+    onNavigate: (value: string) => void;
+    mobileNavOpen: boolean;
+    onMobileNavOpenChange: (open: boolean) => void;
+    notifications: ReactNode;
+    userMenu: ReactNode;
+}
+
+export function TopBar({
+    activeView,
+    navItems,
+    navTabValue,
+    onNavigate,
+    mobileNavOpen,
+    onMobileNavOpenChange,
+    notifications,
+    userMenu,
+}: TopBarProps) {
+    return (
+        <div
+            className={cn(
+                'relative flex h-14 items-center gap-3 px-4',
+                'border-b border-glass-border bg-sidebar backdrop-blur-md',
+                'shadow-chrome-top',
+            )}
+        >
+            {/* LEFT ZONE: reserved spacer (keeps nav visually centered) */}
+            <div className="flex-1 min-w-0" />
+
+            {/* CENTER ZONE: Navigation (hidden on mobile) */}
+            <nav aria-label="Primary" className="hidden md:flex justify-center">
+                <Highlight
+                    className="inset-0 rounded-md bg-accent"
+                    value={navTabValue}
+                    controlledItems
+                    mode="children"
+                    click={false}
+                    transition={springs.snappy}
+                >
+                    <div className="inline-flex items-center rounded-lg p-1 gap-0.5">
+                        {navItems.map(({ value, label, icon: Icon }) => (
+                            <HighlightItem key={value} value={value}>
+                                <button
+                                    onClick={() => onNavigate(value)}
+                                    aria-label={label}
+                                    aria-current={activeView === value ? 'page' : undefined}
+                                    className={cn(
+                                        'relative inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
+                                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50',
+                                        activeView === value
+                                            ? 'text-foreground after:absolute after:bottom-0 after:left-1/4 after:right-1/4 after:h-[2px] after:rounded-full after:bg-brand after:blur-[2px]'
+                                            : 'text-muted-foreground hover:text-foreground',
+                                    )}
+                                >
+                                    <Icon className="w-4 h-4 shrink-0" strokeWidth={1.5} />
+                                    <span className="hidden xl:inline">{label}</span>
+                                </button>
+                            </HighlightItem>
+                        ))}
+                    </div>
+                </Highlight>
+            </nav>
+
+            {/* RIGHT ZONE: Utilities + identity pin */}
+            <div className="flex flex-1 min-w-0 items-center justify-end gap-2">
+                {notifications}
+                {userMenu}
+
+                {/* Mobile nav trigger */}
+                <Sheet open={mobileNavOpen} onOpenChange={onMobileNavOpenChange}>
+                    <SheetTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            aria-label="Open navigation menu"
+                            className="h-8 w-8 rounded-lg md:hidden"
+                        >
+                            <Menu className="w-4 h-4" strokeWidth={1.5} />
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent side="right" className="w-64 p-0">
+                        <div className="p-4 border-b">
+                            <p className="text-sm font-medium">Navigation</p>
+                        </div>
+                        <nav className="flex flex-col p-2 gap-1">
+                            {navItems.map(({ value, label, icon: Icon }) => (
+                                <button
+                                    key={value}
+                                    onClick={() => {
+                                        onNavigate(value);
+                                        onMobileNavOpenChange(false);
+                                    }}
+                                    className={cn(
+                                        'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors',
+                                        activeView === value
+                                            ? 'bg-glass-highlight font-medium text-foreground'
+                                            : 'text-muted-foreground hover:bg-glass-highlight hover:text-foreground',
+                                    )}
+                                >
+                                    <Icon className="w-4 h-4" strokeWidth={1.5} />
+                                    {label}
+                                </button>
+                            ))}
+                        </nav>
+                    </SheetContent>
+                </Sheet>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0f81af3a..318191c5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -148,6 +148,7 @@
   /* Material simulation — inherent depth */
   --card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.04), 0 1px 2px 0 oklch(0 0 0 / 0.05);
   --button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
+  --chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.45);
 
   /* Motion timing */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -304,6 +305,7 @@
   /* Material simulation — inherent depth */
   --card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.05);
   --button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.06);
+  --chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.08);
 
   /* Shadows — near-zero, depth comes from surface tone */
   --shadow-x: 0px;
@@ -413,6 +415,7 @@
   --shadow-2xl: var(--shadow-2xl);
   --shadow-card-bevel: var(--card-bevel);
   --shadow-btn-glow: var(--button-inner-glow);
+  --shadow-chrome-top: var(--chrome-top-highlight);
 }
 
 /* ─────────────────────────────────────────────────────────────