From c7ca7c1f96e25bd47f93a22e668dc300a75f2fd4 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Tue, 28 Apr 2026 12:10:11 +0200
Subject: [PATCH] style(layout): sidebar stripe + topbar gradient + bell spring
 + search ring

Sidebar active items: 4px brand left-edge stripe (rounded-r-full) replacing the
border-l-2 + bg shift; section header smaller-caps + brand-200 colour; user-footer
avatar gets shadow-sm + ring-2 ring-white/30.

Topbar '+ New' uses bg-gradient-brand with shadow-sm + scale-1.02 hover. User
avatar trigger gets shadow-sm + ring-2 ring-white. Notification badge gets
gradient-brand fill + ring-2 ring-background + animate-badge-pop spring keyframe
(retriggers on count change via key={unreadCount}). Command search gets shadow-xs
inset + brand focus ring (ring-4 ring-brand/15).

Adds badge-pop keyframes to tailwind config.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layout/sidebar.tsx                  | 14 ++++++++++----
 src/components/layout/topbar.tsx                   |  7 +++++--
 src/components/notifications/notification-bell.tsx |  5 ++++-
 src/components/search/command-search.tsx           |  6 ++++--
 tailwind.config.ts                                 |  6 ++++++
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index cd08190..279eaec 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -141,12 +141,18 @@ function NavItemLink({
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       href={item.href as any}
       className={cn(
-        'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150',
+        'relative flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all duration-150',
         'text-[#cdcfd6] hover:bg-[#171f35] hover:text-white',
-        active && 'border-l-2 border-[#3a7bc8] bg-[#3a7bc810] text-white pl-[10px]',
+        active && 'text-white pl-[14px]',
         collapsed && 'justify-center px-2',
       )}
     >
+      {active && !collapsed && (
+        <span
+          aria-hidden
+          className="absolute left-0 top-1 bottom-1 w-1 rounded-r-full bg-[#3a7bc8]"
+        />
+      )}
       <item.icon
         className={cn(
           'shrink-0',
@@ -231,7 +237,7 @@ function SidebarContent({
                 <div key={section.title}>
                   {!collapsed && (
                     <div className="flex items-center justify-between px-1 mb-1">
-                      <span className="text-[#71768a] text-xs font-medium uppercase tracking-wider">
+                      <span className="text-[#83aab1] text-[10px] font-semibold uppercase tracking-[0.12em]">
                         {section.title}
                       </span>
                       {section.adminRequired && (
@@ -284,7 +290,7 @@ function SidebarContent({
             </Tooltip>
           ) : (
             <div className="flex items-center gap-3">
-              <Avatar className="w-8 h-8 shrink-0">
+              <Avatar className="w-8 h-8 shrink-0 shadow-sm ring-2 ring-white/30">
                 <AvatarImage src={undefined} />
                 <AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
                   {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 3658b05..fefae42 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -57,7 +57,10 @@ export function Topbar({ ports, user }: TopbarProps) {
         {/* + New dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button size="sm" className="bg-brand hover:bg-brand-500 text-white gap-1.5">
+            <Button
+              size="sm"
+              className="bg-gradient-brand hover:opacity-90 text-white gap-1.5 shadow-sm transition-all duration-base ease-smooth hover:scale-[1.02]"
+            >
               <Plus className="w-4 h-4" />
               <span className="hidden sm:inline">New</span>
             </Button>
@@ -93,7 +96,7 @@ export function Topbar({ ports, user }: TopbarProps) {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="icon" className="rounded-full">
-              <Avatar className="w-7 h-7">
+              <Avatar className="w-7 h-7 shadow-sm ring-2 ring-white">
                 <AvatarImage src={undefined} />
                 <AvatarFallback className="bg-brand text-white text-xs font-semibold">
                   {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
diff --git a/src/components/notifications/notification-bell.tsx b/src/components/notifications/notification-bell.tsx
index 7d4b29d..776c907 100644
--- a/src/components/notifications/notification-bell.tsx
+++ b/src/components/notifications/notification-bell.tsx
@@ -57,7 +57,10 @@ export function NotificationBell() {
         <Button variant="ghost" size="icon" className="relative">
           <Bell className="h-5 w-5" />
           {unreadCount > 0 && (
-            <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-[10px] font-bold text-white">
+            <span
+              key={unreadCount}
+              className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-gradient-brand text-[10px] font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop"
+            >
               {unreadCount > 99 ? '99+' : unreadCount}
             </span>
           )}
diff --git a/src/components/search/command-search.tsx b/src/components/search/command-search.tsx
index 0128f0b..6e62a23 100644
--- a/src/components/search/command-search.tsx
+++ b/src/components/search/command-search.tsx
@@ -84,8 +84,10 @@ export function CommandSearch() {
       {/* ── Single persistent search bar ── */}
       <div
         className={cn(
-          'flex items-center gap-2 rounded-md border bg-background px-2.5 transition-all duration-150',
-          focused ? 'border-muted-foreground/40 w-64 lg:w-80' : 'w-44 lg:w-60',
+          'flex items-center gap-2 rounded-md border bg-background px-2.5 shadow-xs transition-all duration-base ease-smooth',
+          focused
+            ? 'border-brand/60 ring-4 ring-brand/15 w-64 lg:w-80'
+            : 'border-input w-44 lg:w-60',
         )}
       >
         <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6f1a89e..aa6532e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -163,10 +163,16 @@ export default {
             height: '0',
           },
         },
+        'badge-pop': {
+          '0%': { transform: 'scale(0.5)', opacity: '0' },
+          '60%': { transform: 'scale(1.18)', opacity: '1' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'badge-pop': 'badge-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)',
       },
     },
   },