From 23f79c31e089d7e99c77fc9bc68e08888ec34be4 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Mon, 6 Jul 2026 12:28:25 -0500
Subject: [PATCH] =?UTF-8?q?feat(ui):=20layout=20refinements=20=E2=80=94=20?=
 =?UTF-8?q?sidebar,=20nav=20pill,=20command=20palette,=20brand=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/CommandPalette.tsx    | 74 +++++++++++++++----------
 client/components/layout/BrandBlock.tsx | 12 +++-
 client/components/layout/Layout.tsx     | 16 ++++--
 client/components/layout/NavPill.tsx    |  6 +-
 client/components/layout/Sidebar.tsx    | 65 ++++++++++++++++------
 5 files changed, 118 insertions(+), 55 deletions(-)

diff --git a/client/components/CommandPalette.tsx b/client/components/CommandPalette.tsx
index 9dc09e6..9337af1 100644
--- a/client/components/CommandPalette.tsx
+++ b/client/components/CommandPalette.tsx
@@ -12,6 +12,7 @@ import { scheduleLabel, scheduleValue } from '@/lib/billingSchedule';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
+import { BrandGlyph } from '@/components/brand/Brand';
 import type { Bill } from '@/types';
 
 // ─── Navigation commands ──────────────────────────────────────────────────────
@@ -281,38 +282,47 @@ export default function CommandPalette() {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-2xl">
+      <DialogContent className="gap-0 overflow-hidden border-border/70 bg-card/95 p-0 shadow-2xl shadow-black/20 backdrop-blur-xl sm:max-w-2xl">
         <DialogHeader className="sr-only">
           <DialogTitle>Command palette</DialogTitle>
         </DialogHeader>
 
-        <div className="flex items-center gap-2 border-b border-border/70 px-4 py-3">
-          <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <Input
-            ref={inputRef}
-            value={query}
-            onChange={event => setQuery(event.target.value)}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                if (billResults[0]) openBills(billResults[0]);
-                else if (commandResults[0]) runCommand(commandResults[0]);
-              }
-            }}
-            placeholder="Search bills or type a command…"
-            className="h-9 border-0 bg-transparent px-0 text-base shadow-none focus-visible:ring-0"
-          />
-          {query && (
-            <Button
-              type="button"
-              size="icon"
-              variant="ghost"
-              className="h-7 w-7 shrink-0"
-              onClick={() => setQuery('')}
-              aria-label="Clear search"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          )}
+        <div className="border-b border-border/70 bg-muted/25 px-4 py-3">
+          <div className="mb-3 flex items-center gap-3">
+            <BrandGlyph name="tracker" className="h-10 w-10 rounded-2xl" />
+            <div className="min-w-0">
+              <p className="text-sm font-semibold text-foreground">Find your next move</p>
+              <p className="mt-0.5 text-xs text-muted-foreground">Search bills, jump to a month, or open a workspace.</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 rounded-xl border border-border/70 bg-card/75 px-3 py-1.5 shadow-sm shadow-black/5">
+            <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <Input
+              ref={inputRef}
+              value={query}
+              onChange={event => setQuery(event.target.value)}
+              onKeyDown={event => {
+                if (event.key === 'Enter') {
+                  if (billResults[0]) openBills(billResults[0]);
+                  else if (commandResults[0]) runCommand(commandResults[0]);
+                }
+              }}
+              placeholder="Search bills, months, pages..."
+              className="h-9 border-0 bg-transparent px-0 text-base shadow-none focus-visible:ring-0"
+            />
+            {query && (
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                className="h-7 w-7 shrink-0 rounded-full"
+                onClick={() => setQuery('')}
+                aria-label="Clear search"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
         </div>
 
         <div className="max-h-[min(32rem,75svh)] overflow-y-auto p-2 space-y-1">
@@ -322,8 +332,12 @@ export default function CommandPalette() {
               Loading…
             </div>
           ) : !hasResults ? (
-            <div className="px-4 py-12 text-center text-sm text-muted-foreground">
-              No results.
+            <div className="px-4 py-12 text-center">
+              <div className="mx-auto grid h-11 w-11 place-items-center rounded-2xl border border-border/70 bg-muted/45 text-muted-foreground">
+                <Search className="h-5 w-5" aria-hidden="true" />
+              </div>
+              <p className="mt-3 text-sm font-medium text-foreground">Nothing matched that search.</p>
+              <p className="mt-1 text-xs text-muted-foreground">Try a bill name, amount, category, or month.</p>
             </div>
           ) : (
             <>
diff --git a/client/components/layout/BrandBlock.tsx b/client/components/layout/BrandBlock.tsx
index 17d6eef..962d9f7 100644
--- a/client/components/layout/BrandBlock.tsx
+++ b/client/components/layout/BrandBlock.tsx
@@ -8,12 +8,20 @@ export const BrandBlock = React.memo(function BrandBlock({ adminMode = false }:
     <NavLink
       to={adminMode ? '/admin' : '/'}
       aria-label={BRAND.name}
-      className="group flex items-center gap-2 rounded-xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      className="group flex min-w-0 items-center gap-3 rounded-2xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
     >
       <BrandMark className="h-12 w-auto max-w-[6.75rem] drop-shadow-[0_1px_2px_rgba(0,0,0,0.24)] transition-transform duration-200 group-hover:scale-[1.015]" />
       <BrandWordmark className="sr-only" />
+      <span className="hidden min-w-0 flex-col leading-none xl:flex">
+        <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary/80">
+          {adminMode ? 'Admin workspace' : 'Home workspace'}
+        </span>
+        <span className="mt-1 max-w-[12rem] truncate text-xs text-muted-foreground">
+          {adminMode ? 'System care and access' : 'Bills, timing, and clarity'}
+        </span>
+      </span>
       {adminMode && (
-        <span className="hidden sm:inline-flex rounded-full border border-destructive/25 bg-destructive/10 px-2 py-0.5 text-[10px] font-semibold uppercase text-destructive">
+        <span className="hidden rounded-full border border-destructive/25 bg-destructive/10 px-2 py-0.5 text-[10px] font-semibold uppercase text-destructive sm:inline-flex xl:hidden">
           Admin
         </span>
       )}
diff --git a/client/components/layout/Layout.tsx b/client/components/layout/Layout.tsx
index 09052f6..471ee4f 100644
--- a/client/components/layout/Layout.tsx
+++ b/client/components/layout/Layout.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import AppNavigation from './Sidebar';
 import { api } from '@/api';
+import { APP_VERSION } from '@/lib/version';
+import { BRAND } from '@/lib/brand';
 import PageTransition from '@/components/PageTransition';
 import { FormatSync } from '@/components/FormatSync';
 
@@ -45,12 +47,18 @@ export default function Layout({ mainContentId }: { mainContentId?: string }) {
           </PageTransition>
         </div>
       </main>
-      <footer className="mx-auto flex w-full max-w-[1500px] flex-wrap items-center justify-center gap-x-4 gap-y-2 px-4 pb-6 text-xs text-muted-foreground sm:px-6 lg:px-8"
+      <footer className="mx-auto flex w-full max-w-[1500px] flex-wrap items-center justify-between gap-x-4 gap-y-3 px-4 pb-6 text-xs text-muted-foreground sm:px-6 lg:px-8"
         aria-label="Footer"
       >
-        <Link to="/about" className="underline-offset-4 hover:text-foreground hover:underline">About</Link>
-        <Link to="/release-notes" className="underline-offset-4 hover:text-foreground hover:underline">Release Notes</Link>
-        <SimplefinBadge />
+        <span className="inline-flex items-center gap-2">
+          <span className="h-1.5 w-1.5 rounded-full bg-primary" aria-hidden="true" />
+          <span>{BRAND.name} v{APP_VERSION}</span>
+        </span>
+        <span className="flex flex-wrap items-center gap-x-4 gap-y-2">
+          <Link to="/about" className="underline-offset-4 hover:text-foreground hover:underline">About</Link>
+          <Link to="/release-notes" className="underline-offset-4 hover:text-foreground hover:underline">Release Notes</Link>
+          <SimplefinBadge />
+        </span>
       </footer>
     </div>
   );
diff --git a/client/components/layout/NavPill.tsx b/client/components/layout/NavPill.tsx
index b2843cb..2898a80 100644
--- a/client/components/layout/NavPill.tsx
+++ b/client/components/layout/NavPill.tsx
@@ -30,11 +30,11 @@ export const NavPill = React.memo(function NavPill({ item, onNavigate, badge = 0
       end={end}
       onClick={onNavigate}
       className={({ isActive }) => cn(
-        'inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition-all',
+        'inline-flex items-center gap-2 rounded-full border px-3 py-2 text-sm font-medium transition-all',
         'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
         isActive
-          ? 'bg-primary text-primary-foreground shadow-sm shadow-primary/20'
-          : 'text-muted-foreground hover:bg-accent/85 hover:text-accent-foreground hover:shadow-sm'
+          ? 'border-primary/25 bg-primary text-primary-foreground shadow-sm shadow-primary/20'
+          : 'border-transparent text-muted-foreground hover:border-border/60 hover:bg-accent/85 hover:text-accent-foreground hover:shadow-sm'
       )}
     >
       <Icon className="h-4 w-4" />
diff --git a/client/components/layout/Sidebar.tsx b/client/components/layout/Sidebar.tsx
index ad993d3..541ce55 100644
--- a/client/components/layout/Sidebar.tsx
+++ b/client/components/layout/Sidebar.tsx
@@ -7,6 +7,7 @@ import {
 } from 'lucide-react';
 import { api } from '@/api';
 import { cn } from '@/lib/utils';
+import { BRAND } from '@/lib/brand';
 import { useAuth } from '@/hooks/useAuth';
 import { useOverdueCount } from '@/hooks/useQueries';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
@@ -77,11 +78,11 @@ function TrackerMenu({ onNavigate, badge = 0, badgeNames = [], items = trackerIt
       <DropdownMenuTrigger asChild>
         <button
           className={cn(
-            'inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition-all',
+            'inline-flex items-center gap-2 rounded-full border px-3 py-2 text-sm font-medium transition-all',
             'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
             isTrackerActive
-              ? 'bg-primary text-primary-foreground shadow-sm shadow-primary/20'
-              : 'text-muted-foreground hover:bg-accent/85 hover:text-accent-foreground hover:shadow-sm',
+              ? 'border-primary/25 bg-primary text-primary-foreground shadow-sm shadow-primary/20'
+              : 'border-transparent text-muted-foreground hover:border-border/60 hover:bg-accent/85 hover:text-accent-foreground hover:shadow-sm',
           )}
           aria-expanded={isTrackerActive}
           aria-haspopup="menu"
@@ -135,6 +136,10 @@ function UserMenu({ adminMode = false }: { adminMode?: boolean }) {
   );
   const accountToolsAllowed = useMemo(() => !user?.is_default_admin, [user]);
   const userRole = useMemo(() => user?.role, [user]);
+  const initials = useMemo(() => {
+    const source = name.trim() || (adminMode ? 'Admin' : 'User');
+    return source.split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join('');
+  }, [adminMode, name]);
 
   const handleLogout = async () => {
     try { await logout(); } catch { /* ignore */ }
@@ -145,18 +150,23 @@ function UserMenu({ adminMode = false }: { adminMode?: boolean }) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button
-          className="inline-flex h-9 items-center gap-2 rounded-full border border-border/80 bg-muted px-2.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-accent hover:text-accent-foreground hover:shadow focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          className="inline-flex h-9 items-center gap-2 rounded-full border border-border/75 bg-card/75 px-2.5 text-sm font-medium text-foreground shadow-sm shadow-black/5 transition-all hover:bg-accent hover:text-accent-foreground hover:shadow focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
           aria-label="Open user menu"
         >
-          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-primary">
-            <User className="h-3.5 w-3.5" />
+          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-[10px] font-bold text-primary">
+            {initials || <User className="h-3.5 w-3.5" />}
           </span>
           <span className="hidden max-w-[140px] truncate sm:inline">{name}</span>
           <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-52">
-        <DropdownMenuLabel className="truncate">{name}</DropdownMenuLabel>
+      <DropdownMenuContent align="end" className="w-60">
+        <DropdownMenuLabel>
+          <span className="block truncate text-sm font-semibold">{name}</span>
+          <span className="mt-0.5 block text-xs font-normal text-muted-foreground">
+            {adminMode ? 'Admin workspace' : 'Welcome back'}
+          </span>
+        </DropdownMenuLabel>
         <DropdownMenuSeparator />
         {userRole === 'admin' && !adminMode && (
           <>
@@ -237,11 +247,11 @@ export default function Sidebar({ adminMode = false }: { adminMode?: boolean; ma
   }, [adminMode]);
 
   return (
-    <header className="sticky top-0 z-40 border-b border-border/70 bg-card/95 shadow-sm shadow-black/10 backdrop-blur-xl supports-[backdrop-filter]:bg-card/90">
-      <div className="mx-auto flex h-16 w-full max-w-[1500px] items-center gap-4 px-4 sm:px-6 lg:px-8">
+    <header className="sticky top-0 z-40 border-b border-border/65 bg-card/90 shadow-sm shadow-black/10 backdrop-blur-xl supports-[backdrop-filter]:bg-card/82">
+      <div className="mx-auto flex h-[4.5rem] w-full max-w-[1500px] items-center gap-4 px-4 sm:px-6 lg:px-8">
         <BrandBlock adminMode={adminMode} />
 
-        <nav className="hidden items-center gap-1 lg:flex">
+        <nav className="hidden items-center gap-1.5 lg:flex" aria-label={adminMode ? 'Admin navigation' : 'Primary navigation'}>
           {!adminMode && <TrackerMenu badge={overdueCount} badgeNames={overdueNames} items={trackerMenuItems} />}
           {items.map(item => (
             <NavPill key={item.to} item={item} />
@@ -253,18 +263,18 @@ export default function Sidebar({ adminMode = false }: { adminMode?: boolean; ma
             <Button
               type="button"
               variant="outline"
-              className="hidden h-9 gap-2 rounded-full bg-card/70 px-3 text-muted-foreground shadow-sm shadow-black/5 md:inline-flex"
+              className="hidden h-9 gap-2 rounded-full border-border/75 bg-card/75 px-3 text-muted-foreground shadow-sm shadow-black/5 md:inline-flex"
               onClick={() => window.dispatchEvent(new Event('command-palette:open'))}
               title="Find a bill"
             >
               <Search className="h-4 w-4" />
-              <span className="text-sm">Find</span>
+              <span className="text-sm">Search bills</span>
               <kbd className="rounded border border-border bg-background px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
                 Ctrl K
               </kbd>
             </Button>
           )}
-          <ThemeToggle className="rounded-full border border-border/75 bg-card/70 shadow-sm shadow-black/5" />
+          <ThemeToggle className="rounded-full border border-border/75 bg-card/75 shadow-sm shadow-black/5" />
           <UserMenu adminMode={adminMode} />
           <Button
             type="button"
@@ -281,8 +291,31 @@ export default function Sidebar({ adminMode = false }: { adminMode?: boolean; ma
       </div>
 
       {mobileOpen && (
-        <div className="max-h-[70vh] overflow-y-auto border-t border-border/70 bg-card/95 px-4 py-3 shadow-lg shadow-black/15 lg:hidden">
-          <nav className="mx-auto grid max-w-[1500px] gap-1">
+        <div className="max-h-[76vh] overflow-y-auto border-t border-border/70 bg-card/95 px-4 py-3 shadow-lg shadow-black/15 lg:hidden">
+          <div className="mx-auto mb-3 flex max-w-[1500px] items-center justify-between gap-3 rounded-2xl border border-border/65 bg-muted/35 px-3 py-3">
+            <div className="min-w-0">
+              <p className="text-sm font-semibold text-foreground">{adminMode ? 'Admin workspace' : BRAND.name}</p>
+              <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                {adminMode ? 'System care and access' : 'Choose where you want to go next'}
+              </p>
+            </div>
+            {!adminMode && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="shrink-0 rounded-full bg-card/80"
+                onClick={() => {
+                  setMobileOpen(false);
+                  window.dispatchEvent(new Event('command-palette:open'));
+                }}
+              >
+                <Search className="h-4 w-4" />
+                Search
+              </Button>
+            )}
+          </div>
+          <nav className="mx-auto grid max-w-[1500px] gap-1" aria-label={adminMode ? 'Admin mobile navigation' : 'Mobile navigation'}>
             {!adminMode && trackerMenuItems.map(item => (
               <NavPill
                 key={item.to}