From 8f2eae425cb47cbfb07a84665c4e70b3a211e0ad Mon Sep 17 00:00:00 2001
From: AJ Isaacs <ajisaacs27@gmail.com>
Date: Fri, 27 Feb 2026 00:02:43 -0500
Subject: [PATCH] feat(ui): replace sidebar with slim top navigation bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 TaskTracker.Web/src/components/Layout.tsx | 111 +++++++++++++++-------
 1 file changed, 75 insertions(+), 36 deletions(-)

diff --git a/TaskTracker.Web/src/components/Layout.tsx b/TaskTracker.Web/src/components/Layout.tsx
index 0aef1e5..7b9a3f5 100644
--- a/TaskTracker.Web/src/components/Layout.tsx
+++ b/TaskTracker.Web/src/components/Layout.tsx
@@ -1,7 +1,7 @@
-import { useState } from 'react'
 import { NavLink, Outlet, useNavigate } from 'react-router-dom'
-import { LayoutGrid, BarChart3, Link, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
-import SearchBar from './SearchBar.tsx'
+import { LayoutGrid, BarChart3, Link, Plus, Search } from 'lucide-react'
+import { useState, useEffect, useCallback } from 'react'
+import SearchModal from './SearchModal.tsx'
 
 const navItems = [
   { to: '/board', label: 'Board', icon: LayoutGrid },
@@ -10,60 +10,99 @@ const navItems = [
 ]
 
 export default function Layout() {
-  const [collapsed, setCollapsed] = useState(false)
   const navigate = useNavigate()
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [showCreateHint, setShowCreateHint] = useState(false)
+
+  // Global Cmd+K handler
+  const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault()
+      setSearchOpen(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleGlobalKeyDown)
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown)
+  }, [handleGlobalKeyDown])
 
   return (
-    <div className="flex h-screen bg-[#0f1117] text-white overflow-hidden">
-      {/* Sidebar */}
-      <aside
-        className="flex flex-col justify-between shrink-0 transition-all duration-200"
-        style={{
-          width: collapsed ? 60 : 200,
-          background: 'linear-gradient(180deg, #0f1117 0%, #161922 100%)',
-        }}
-      >
-        <nav className="flex flex-col gap-1 mt-4 px-2">
+    <div className="flex flex-col h-screen bg-[var(--color-page)] text-[var(--color-text-primary)] overflow-hidden">
+      {/* Top navigation bar */}
+      <header className="flex items-center h-12 px-4 border-b border-[var(--color-border)] shrink-0 bg-[var(--color-page)]">
+        {/* Logo */}
+        <div className="flex items-center gap-2 mr-8">
+          <div className="w-5 h-5 rounded bg-gradient-to-br from-[var(--color-accent)] to-[var(--color-accent-end)] flex items-center justify-center">
+            <span className="text-[10px] font-bold text-white">T</span>
+          </div>
+          <span className="text-sm font-semibold tracking-tight">TaskTracker</span>
+        </div>
+
+        {/* Nav tabs */}
+        <nav className="flex items-center gap-1">
           {navItems.map(({ to, label, icon: Icon }) => (
             <NavLink
               key={to}
               to={to}
               className={({ isActive }) =>
-                `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-medium transition-colors ${
                   isActive
-                    ? 'bg-[#6366f1] text-white'
-                    : 'text-[#94a3b8] hover:text-white hover:bg-white/5'
+                    ? 'text-white bg-white/[0.08]'
+                    : 'text-[var(--color-text-secondary)] hover:text-white hover:bg-white/[0.04]'
                 }`
               }
             >
-              <Icon size={20} className="shrink-0" />
-              {!collapsed && <span>{label}</span>}
+              <Icon size={15} />
+              {label}
             </NavLink>
           ))}
         </nav>
 
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Search trigger */}
         <button
-          onClick={() => setCollapsed(!collapsed)}
-          className="flex items-center justify-center p-3 mb-2 mx-2 rounded-lg text-[#94a3b8] hover:text-white hover:bg-white/5 transition-all duration-200"
-          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          onClick={() => setSearchOpen(true)}
+          className="flex items-center gap-2 h-7 px-2.5 rounded-md text-[12px] text-[var(--color-text-secondary)] bg-white/[0.04] border border-[var(--color-border)] hover:border-[var(--color-border-hover)] hover:text-[var(--color-text-primary)] transition-colors mr-2"
         >
-          {collapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={20} />}
+          <Search size={13} />
+          <span className="hidden sm:inline">Search</span>
+          <kbd className="hidden sm:inline text-[10px] font-mono text-[var(--color-text-tertiary)] bg-white/[0.06] px-1 py-0.5 rounded">
+            Ctrl K
+          </kbd>
         </button>
-      </aside>
 
-      {/* Main area */}
-      <div className="flex flex-col flex-1 min-w-0">
-        {/* Top bar */}
-        <header className="flex items-center justify-between h-14 px-6 border-b border-white/5 shrink-0">
-          <h1 className="text-lg font-semibold tracking-tight">TaskTracker</h1>
-          <SearchBar onSelect={(taskId) => navigate(`/board?task=${taskId}`)} />
-        </header>
+        {/* New task button */}
+        <button
+          onClick={() => {
+            navigate('/board')
+            setShowCreateHint(true)
+            setTimeout(() => setShowCreateHint(false), 100)
+          }}
+          className="flex items-center gap-1 h-7 px-2.5 rounded-md text-[12px] font-medium text-white bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-end)] hover:brightness-110 transition-all"
+        >
+          <Plus size={14} />
+          <span className="hidden sm:inline">New Task</span>
+        </button>
+      </header>
 
-        {/* Content */}
-        <main className="flex-1 overflow-auto p-6">
-          <Outlet />
-        </main>
-      </div>
+      {/* Content */}
+      <main className="flex-1 overflow-auto p-5">
+        <Outlet context={{ showCreateHint }} />
+      </main>
+
+      {/* Search modal */}
+      {searchOpen && (
+        <SearchModal
+          onSelect={(taskId) => {
+            setSearchOpen(false)
+            navigate(`/board?task=${taskId}`)
+          }}
+          onClose={() => setSearchOpen(false)}
+        />
+      )}
     </div>
   )
 }