From 32e0b57e6b2a5fcc93307c1515e122765b1784da Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 3 Mar 2026 08:08:06 -0500
Subject: [PATCH] feat: update Sidebar with glassmorphism backdrop

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/Sidebar.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 79a34b55..19be3f91 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -63,7 +63,13 @@ export function Sidebar() {
 
   return (
     <nav
-      className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]"
+      className="sidebar flex flex-col border-r"
+      style={{
+        background: 'rgba(16, 17, 20, 0.5)',
+        backdropFilter: 'var(--glass-blur-light)',
+        WebkitBackdropFilter: 'var(--glass-blur-light)',
+        borderColor: 'var(--glass-border)',
+      }}
       onWheel={handleSidebarWheel}
     >
       {sidebarCollapsed ? (
@@ -86,7 +92,7 @@ export function Sidebar() {
           {/* Pinned Flows */}
           <PinnedFlowsSection flows={pinnedItems} onUnpin={unpinFlow} />
 
-          <div className="border-b border-[hsl(var(--border-subtle))]" />
+          <div style={{ borderBottom: '1px solid var(--glass-border)' }} />
 
           {/* Primary Navigation */}
           <div className="px-3 py-2 space-y-0.5">
@@ -117,10 +123,13 @@ export function Sidebar() {
       <div className="flex-1" />
 
       {/* Footer */}
-      <div className={cn(
-        "border-t border-[hsl(var(--border-subtle))]",
-        sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
-      )}>
+      <div
+        className={cn(
+          "border-t",
+          sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
+        )}
+        style={{ borderColor: 'var(--glass-border)' }}
+      >
         {!sidebarCollapsed && (
           <>
             <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" />