From 0496cb1436cb4f88ca96f270f21de6eb6a826b8f Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Tue, 16 Jun 2026 08:14:14 +0330
Subject: [PATCH] Colorful sidebar: per-group icon chips, vivid gradient,
 gradient logo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The nav was too monochrome. Each item now has a color-coded rounded icon chip (group
palette: amber start, sky Work, emerald Organization, violet AI & libraries, teal
Insights, pink Help), the sidebar uses a richer multi-hue indigo→violet→magenta glass
gradient, and the logo is a gradient.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 client/src/components/AppShell.tsx | 51 +++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/client/src/components/AppShell.tsx b/client/src/components/AppShell.tsx
index c2d8782..0ebf3d8 100644
--- a/client/src/components/AppShell.tsx
+++ b/client/src/components/AppShell.tsx
@@ -32,10 +32,16 @@ export function AppShell({ children }: { children: ReactNode }) {
     <div className="flex min-h-screen text-foreground">
       <aside
         className="flex w-60 shrink-0 flex-col border-r border-white/15 text-sidebar-foreground backdrop-blur-2xl"
-        style={{ background: 'linear-gradient(180deg, oklch(0.27 0.1 287 / 0.78) 0%, oklch(0.2 0.085 298 / 0.78) 100%)' }}
+        style={{
+          background:
+            'linear-gradient(168deg, oklch(0.32 0.14 268 / 0.82) 0%, oklch(0.28 0.15 292 / 0.82) 42%, oklch(0.26 0.15 318 / 0.82) 72%, oklch(0.24 0.13 340 / 0.82) 100%)',
+        }}
       >
         <div className="flex items-center gap-3 px-5 py-4">
-          <span className="grid size-8 place-items-center rounded-md bg-sidebar-primary font-bold text-sidebar-primary-foreground">
+          <span
+            className="grid size-8 place-items-center rounded-md font-bold text-white shadow-sm"
+            style={{ background: 'linear-gradient(135deg, #6366f1, #d946ef)' }}
+          >
             T
           </span>
           <div className="leading-tight">
@@ -47,31 +53,31 @@ export function AppShell({ children }: { children: ReactNode }) {
         <Separator className="bg-sidebar-border" />
 
         <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
-          <NavItem icon={Rocket} label="Get started" to="/start" />
+          <NavItem icon={Rocket} label="Get started" to="/start" color="#fbbf24" />
 
           <NavSection label="Work" />
-          <NavItem icon={LayoutDashboard} label="Board" to="/" />
-          <NavItem icon={Sparkles} label="Team" to="/team" />
-          <NavItem icon={Inbox} label="Cartable" to="/cartable" />
-          <NavItem icon={ShieldCheck} label="Review inbox" to="/reviews" />
+          <NavItem icon={LayoutDashboard} label="Board" to="/" color="#38bdf8" />
+          <NavItem icon={Sparkles} label="Team" to="/team" color="#38bdf8" />
+          <NavItem icon={Inbox} label="Cartable" to="/cartable" color="#38bdf8" />
+          <NavItem icon={ShieldCheck} label="Review inbox" to="/reviews" color="#38bdf8" />
 
           <NavSection label="Organization" />
-          <NavItem icon={Boxes} label="Structure" to="/structure" />
-          <NavItem icon={Network} label="Org chart" to="/org" />
-          <NavItem icon={Users} label="Members" to="/members" />
+          <NavItem icon={Boxes} label="Structure" to="/structure" color="#34d399" />
+          <NavItem icon={Network} label="Org chart" to="/org" color="#34d399" />
+          <NavItem icon={Users} label="Members" to="/members" color="#34d399" />
 
           <NavSection label="AI & libraries" />
-          <NavItem icon={Bot} label="AI seats" to="/seats" />
-          <NavItem icon={BookMarked} label="Skills" to="/skills" />
-          <NavItem icon={BookUser} label="Agent profiles" to="/agent-profiles" />
-          <NavItem icon={Package} label="Product profiles" to="/product-profiles" />
+          <NavItem icon={Bot} label="AI seats" to="/seats" color="#a78bfa" />
+          <NavItem icon={BookMarked} label="Skills" to="/skills" color="#a78bfa" />
+          <NavItem icon={BookUser} label="Agent profiles" to="/agent-profiles" color="#a78bfa" />
+          <NavItem icon={Package} label="Product profiles" to="/product-profiles" color="#a78bfa" />
 
           <NavSection label="Insights" />
-          <NavItem icon={Gauge} label="Performance" to="/performance" />
-          <NavItem icon={ChartColumn} label="Analytics" to="/analytics" />
+          <NavItem icon={Gauge} label="Performance" to="/performance" color="#2dd4bf" />
+          <NavItem icon={ChartColumn} label="Analytics" to="/analytics" color="#2dd4bf" />
 
           <NavSection label="Help" />
-          <NavItem icon={BookOpen} label="Knowledge base" to="/help" />
+          <NavItem icon={BookOpen} label="Knowledge base" to="/help" color="#f472b6" />
         </nav>
 
         <Separator className="bg-sidebar-border" />
@@ -108,17 +114,19 @@ function NavItem({
   label,
   to,
   muted,
+  color,
 }: {
   icon: LucideIcon
   label: string
   to?: string
   muted?: boolean
+  color?: string
 }) {
   const location = useLocation()
   const active = to ? location.pathname === to : false
 
   const className = cn(
-    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
+    'group/nav flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
     active
       ? 'bg-white/15 font-medium text-white shadow-sm ring-1 ring-white/15 backdrop-blur-sm'
       : 'text-sidebar-foreground/80',
@@ -127,7 +135,12 @@ function NavItem({
 
   const content = (
     <>
-      <Icon className="size-4" />
+      <span
+        className="grid size-6 shrink-0 place-items-center rounded-md transition-colors"
+        style={{ backgroundColor: color ? `${color}26` : undefined, color }}
+      >
+        <Icon className="size-3.5" />
+      </span>
       {label}
       {muted && <span className="ml-auto text-[10px] uppercase tracking-wide opacity-70">soon</span>}
     </>