🤖 fix: match sidebar colors exactly to main branch

- ProjectSidebar: bg-separator + bg-hover for selected/hover
- RightSidebar: bg-separator + border-border-light
- LeftSidebar: bg-separator + border-border
- Added semantic colors: --color-separator (15%), --color-hover (16.5%)
- These match original theme exactly instead of using neutral-800/900

Author: kylecarbs

src/components/LeftSidebar.tsx

@@ -46,10 +46,10 @@ export function LeftSidebar(props: LeftSidebarProps) {
           aria-label="Open sidebar menu"
           className={cn(
             "hidden max-md:flex fixed top-3 left-3 z-[998]",
-            "w-10 h-10 bg-neutral-800 border border-neutral-800 rounded-md cursor-pointer",
+            "w-10 h-10 bg-separator border border-border-light rounded-md cursor-pointer",
             "items-center justify-center text-neutral-300 text-xl transition-all duration-200",
             "shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
-            "hover:bg-neutral-800 hover:border-neutral-800",
+            "hover:bg-hover hover:border-border-light",
             "active:scale-95"
           )}
         >
@@ -69,7 +69,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
       {/* Sidebar */}
       <div
         className={cn(
-          "h-screen bg-neutral-800 border-r border-neutral-950 flex flex-col shrink-0",
+          "h-screen bg-separator border-r border-border flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-[100]",
           collapsed ? "w-8" : "w-72",
           "max-md:fixed max-md:left-0 max-md:top-0 max-md:w-72 max-md:z-[1000]",

src/components/ProjectSidebar.tsx

@@ -78,11 +78,11 @@ const DraggableProjectItemBase: React.FC<DraggableProjectItemProps> = ({
     <div
       ref={(node) => drag(drop(node))}
       className={cn(
-        "py-1 px-3 flex items-center border-l-transparent transition-all duration-150 bg-neutral-900",
+        "py-1 px-3 flex items-center border-l-transparent transition-all duration-150 bg-separator",
         isDragging ? "cursor-grabbing opacity-40 [&_*]:!cursor-grabbing" : "cursor-grab",
         isOver && "bg-sky-600/[0.08]",
-        selected && "bg-neutral-800 border-l-accent",
-        "hover:bg-neutral-800 hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
+        selected && "bg-hover border-l-accent",
+        "hover:bg-hover hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
       )}
       {...rest}
     >

src/components/RightSidebar.tsx

@@ -49,10 +49,10 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   return (
     <div
       className={cn(
-        "bg-neutral-800 border-l border-neutral-800 flex flex-col overflow-hidden flex-shrink-0",
+        "bg-separator border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
         customWidth ? "" : "transition-[width] duration-200",
         collapsed && "sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]",
-        "max-md:border-l-0 max-md:border-t max-md:border-neutral-800",
+        "max-md:border-l-0 max-md:border-t max-md:border-border-light",
         collapsed && "max-md:w-0 max-md:absolute max-md:bottom-0",
         !collapsed && "max-md:w-full max-md:relative max-md:max-h-[50vh]"
       )}

src/styles/globals.css

@@ -31,6 +31,14 @@
   --color-git-dirty: hsl(38 92% 50%);
   --color-code-bg: hsl(0 6.43% 8.04%);
 
+  /* Sidebar Colors */
+  --color-separator: hsl(0 0% 15%);          /* #252526 - base sidebar bg */
+  --color-hover: hsl(0 0% 16.5%);            /* #2a2a2b - hover/selected states */
+  
+  /* Borders */
+  --color-border: hsl(0 0% 25%);             /* #404040 - base borders */
+  --color-border-light: hsl(0 0% 27%);       /* #464647 - lighter borders */
+  
   /* Message Borders */
   --color-user-border: hsl(0 0% 38%);
   --color-assistant-border: hsl(207 45% 40%);