feat: glassmorphism sidebar toggle (P5-3)

Settings → Appearance: "Glassmorphism Sidebar" toggle (off by default).
When enabled, applies backdrop-filter: blur(12px) and a semi-transparent
background to the left sidebar so chat background patterns show through.
SidebarGlass vanilla-extract class in Sidebar.css.ts; wired in
SidebarNav.tsx via classNames conditional.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LOTUS_TODO.md

@@ -968,12 +968,14 @@ Themes:
 
 ---
 
-### [ ] P5-3 · Glassmorphism Sidebar Toggle
+### [x] P5-3 · Glassmorphism Sidebar Toggle
 
 **What:** Semi-transparent sidebar + panels with `backdrop-filter: blur(12px)`. Toggled in Settings → Appearance. Off by default. Best combined with animated wallpapers.  
 **[AUDIT REQUIRED]** Check whether `backdrop-filter` works on sidebar elements given the current z-index stack and CSS transforms. Some browsers require `will-change` or specific stacking context to allow blur through.  
 **Complexity:** Low-Medium.
 
+**COMPLETED June 2026.** `glassmorphismSidebar: boolean` (default `false`) added to `settingsAtom`. `SidebarGlass` vanilla-extract class added to `Sidebar.css.ts` — `background: rgba(3,5,8,0.55)`, `backdropFilter: blur(12px)`, `WebkitBackdropFilter: blur(12px)`, `borderRight: 1px solid rgba(255,255,255,0.06)`. Applied via `classNames` to the `<Sidebar>` container in `SidebarNav.tsx` (the full-height 66px-wide nav strip). CSS specificity: `SidebarGlass` is defined after `Sidebar` in the same file so it wins without `!important`. Toggle added to Settings → Appearance ("Glassmorphism Sidebar") immediately before the Lotus Terminal Mode card.
+
 ---
 
 ### [ ] P5-4 · Animated Chat Backgrounds (CSS-animated wallpapers)

README.md

@@ -175,6 +175,9 @@ Emoji reaction buttons styled for terminal mode via `button[data-reaction-key]`
 
 ### Settings (Appearance)
 
+- **Glassmorphism Sidebar**: Settings → Appearance toggle (off by default). When enabled, the left sidebar becomes semi-transparent (`background: rgba(3,5,8,0.55)`) with `backdrop-filter: blur(12px)` so chat background patterns show through as a frosted glass effect. Implemented as a vanilla-extract `SidebarGlass` class applied to the `<Sidebar>` container in `SidebarNav.tsx`.
+
+
 - **Night Light / Blue Light Filter**: Warm orange overlay (`rgba(255,140,0,N%)`) across the entire UI. Toggle + intensity slider (5–80%) in Settings → Appearance. `position:fixed; pointer-events:none; z-index:9998`. Persists across sessions.
 
 ### Notification Enhancements

src/app/components/sidebar/Sidebar.css.ts

@@ -16,6 +16,13 @@ export const Sidebar = style([
   },
 ]);
 
+export const SidebarGlass = style({
+  backgroundColor: 'rgba(3, 5, 8, 0.55)',
+  backdropFilter: 'blur(12px)',
+  WebkitBackdropFilter: 'blur(12px)',
+  borderRight: '1px solid rgba(255,255,255,0.06)',
+});
+
 export const SidebarStack = style([
   DefaultReset,
   {

src/app/features/settings/general/General.tsx

@@ -327,6 +327,10 @@ function Appearance() {
   const [lotusTerminal, setLotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
   const [nightLightEnabled, setNightLightEnabled] = useSetting(settingsAtom, 'nightLightEnabled');
   const [nightLightOpacity, setNightLightOpacity] = useSetting(settingsAtom, 'nightLightOpacity');
+  const [glassmorphismSidebar, setGlassmorphismSidebar] = useSetting(
+    settingsAtom,
+    'glassmorphismSidebar',
+  );
 
   return (
     <Box direction="Column" gap="100">
@@ -431,6 +435,20 @@ function Appearance() {
         )}
       </SequenceCard>
 
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Glassmorphism Sidebar"
+          description="Semi-transparent sidebar with frosted glass effect. Works best with custom chat backgrounds."
+          after={
+            <Switch
+              variant="Primary"
+              value={glassmorphismSidebar}
+              onChange={setGlassmorphismSidebar}
+            />
+          }
+        />
+      </SequenceCard>
+
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Lotus Terminal Mode"

src/app/pages/client/SidebarNav.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { Scroll } from 'folds';
+import classNames from 'classnames';
 
 import {
   Sidebar,
@@ -7,6 +8,7 @@ import {
   SidebarStackSeparator,
   SidebarStack,
 } from '../../components/sidebar';
+import { SidebarGlass } from '../../components/sidebar/Sidebar.css';
 import {
   DirectTab,
   HomeTab,
@@ -19,12 +21,15 @@ import {
   BookmarksTab,
 } from './sidebar';
 import { CreateTab } from './sidebar/CreateTab';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 export function SidebarNav() {
   const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const [glassmorphismSidebar] = useSetting(settingsAtom, 'glassmorphismSidebar');
 
   return (
-    <Sidebar>
+    <Sidebar className={classNames(glassmorphismSidebar && SidebarGlass)}>
       <SidebarContent
         scrollable={
           <Scroll ref={scrollRef} variant="Background" size="0">

src/app/state/settings.ts

@@ -89,6 +89,8 @@ export interface Settings {
   nightLightEnabled: boolean;
   nightLightOpacity: number;
 
+  glassmorphismSidebar: boolean;
+
   deafenKey: string;
 
   warnOnUnverifiedDevices: boolean;
@@ -150,6 +152,8 @@ const defaultSettings: Settings = {
   nightLightEnabled: false,
   nightLightOpacity: 30,
 
+  glassmorphismSidebar: false,
+
   deafenKey: 'KeyM',
 
   warnOnUnverifiedDevices: false,