From 6eae23499166225d5680fe71f8f227c545234834 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 22 Mar 2026 05:12:41 -0400
Subject: [PATCH] fix: stat card left borders, tab shadow on toggle, larger
 rail icons

- Stat cards get 3px colored left border matching their icon color
- Guided/Chat toggle uses tab-active-shadow on selected state
- Rail icons increased to 24px with 1.6 stroke width
- Rail labels increased to 10px with font-sans (not mono)
- More vertical spacing between rail items

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/dashboard/PerformanceCards.tsx  |  5 ++++-
 .../components/dashboard/StartSessionInput.tsx | 10 +++++-----
 frontend/src/components/layout/Sidebar.tsx     | 18 +++++++++---------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/dashboard/PerformanceCards.tsx b/frontend/src/components/dashboard/PerformanceCards.tsx
index fdd82b84..c7e2438d 100644
--- a/frontend/src/components/dashboard/PerformanceCards.tsx
+++ b/frontend/src/components/dashboard/PerformanceCards.tsx
@@ -71,7 +71,10 @@ export function PerformanceCards() {
           key={card.label}
           onClick={() => navigate(card.href)}
           className="card-interactive p-4 text-left fade-in"
-          style={{ animationDelay: `${400 + i * 60}ms` }}
+          style={{
+            animationDelay: `${400 + i * 60}ms`,
+            borderLeft: `3px solid ${card.iconColor}`,
+          }}
         >
           <div className="flex items-center justify-between mb-2">
             <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
diff --git a/frontend/src/components/dashboard/StartSessionInput.tsx b/frontend/src/components/dashboard/StartSessionInput.tsx
index fcb0bca8..62d8e8f9 100644
--- a/frontend/src/components/dashboard/StartSessionInput.tsx
+++ b/frontend/src/components/dashboard/StartSessionInput.tsx
@@ -50,14 +50,14 @@ export function StartSessionInput() {
           />
         </div>
         <div className="mt-3 flex items-center justify-between">
-          <div className="flex items-center gap-1 rounded-lg bg-[rgba(255,255,255,0.04)] p-0.5">
+          <div className="flex items-center gap-1 rounded-lg bg-secondary p-0.5">
             <button
               type="button"
               onClick={() => setMode('guided')}
               className={cn(
-                'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all duration-150',
                 mode === 'guided'
-                  ? 'bg-accent-dim text-foreground'
+                  ? 'bg-accent-dim text-foreground tab-active-shadow'
                   : 'text-muted-foreground hover:text-foreground'
               )}
             >
@@ -68,9 +68,9 @@ export function StartSessionInput() {
               type="button"
               onClick={() => setMode('chat')}
               className={cn(
-                'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all duration-150',
                 mode === 'chat'
-                  ? 'bg-accent-dim text-foreground'
+                  ? 'bg-accent-dim text-foreground tab-active-shadow'
                   : 'text-muted-foreground hover:text-foreground'
               )}
             >
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 29dd078f..2369cb39 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -252,7 +252,7 @@ export function Sidebar() {
           onMouseEnter={() => prefetchForRoute(item.href)}
           onFocus={() => hasChildren && !sidebarPinned ? openFlyout(key) : undefined}
           className={cn(
-            'group relative flex flex-col items-center justify-center rounded-lg px-1 py-2 transition-all duration-150',
+            'group relative flex flex-col items-center justify-center rounded-lg px-2 py-3 transition-all duration-150',
             active
               ? 'bg-accent-dim text-accent-text'
               : 'text-text-rail-label hover:text-muted-foreground'
@@ -260,14 +260,14 @@ export function Sidebar() {
           title={item.label}
         >
           <span className="relative">
-            <Icon size={20} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
+            <Icon size={24} strokeWidth={1.6} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
             {item.badge !== undefined && item.badge > 0 && (
-              <span className="absolute -right-1.5 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[0.5rem] font-bold text-[#0c0d10]">
+              <span className="absolute -right-2 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[0.5rem] font-bold text-[#0c0d10]">
                 {item.badge > 99 ? '99+' : item.badge}
               </span>
             )}
           </span>
-          <span className="mt-1 text-[0.5625rem] font-mono leading-tight truncate max-w-[60px]">
+          <span className="mt-1.5 text-[0.625rem] font-sans font-medium leading-tight truncate max-w-[64px]">
             {item.shortLabel}
           </span>
         </Link>
@@ -415,23 +415,23 @@ export function Sidebar() {
         onWheel={handleWheel}
       >
         {/* Grouped nav items */}
-        <div className="flex flex-col items-center w-full px-1.5 pt-3 space-y-1">
+        <div className="flex flex-col items-center w-full px-1 pt-4 space-y-1.5">
           {railGroups.map((item, i) => renderRailItem(item, `rail-${i}`))}
         </div>
 
         <div className="flex-1" />
 
         {/* Footer: Account + Pin */}
-        <div className="flex flex-col items-center w-full px-1.5 pb-5 pt-2 space-y-1" style={{ borderTop: '1px solid #1e2130' }}>
+        <div className="flex flex-col items-center w-full px-1 pb-5 pt-3 space-y-1.5" style={{ borderTop: '1px solid #1e2130' }}>
           {footerItems.map((item, i) => renderRailItem(item, `footer-${i}`))}
           <button
             type="button"
             onClick={toggleSidebarPinned}
-            className="flex flex-col items-center justify-center rounded-lg px-1 py-2 text-text-rail-label hover:text-muted-foreground transition-colors"
+            className="flex flex-col items-center justify-center rounded-lg px-2 py-3 text-text-rail-label hover:text-muted-foreground transition-colors"
             title="Pin sidebar"
           >
-            <Pin size={18} className="opacity-60 hover:opacity-85" />
-            <span className="mt-1 text-[0.5625rem] font-mono leading-tight">Pin</span>
+            <Pin size={22} strokeWidth={1.6} className="opacity-60 hover:opacity-85" />
+            <span className="mt-1.5 text-[0.625rem] font-sans font-medium leading-tight">Pin</span>
           </button>
         </div>
       </nav>