From 262ba3a9858edbce24960fad10b96621053e8fd2 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Thu, 4 Jun 2026 22:02:18 -0400 Subject: [PATCH] feat: glassmorphism sidebar toggle (P5-3) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- LOTUS_TODO.md | 4 +++- README.md | 3 +++ src/app/components/sidebar/Sidebar.css.ts | 7 +++++++ src/app/features/settings/general/General.tsx | 18 ++++++++++++++++++ src/app/pages/client/SidebarNav.tsx | 7 ++++++- src/app/state/settings.ts | 4 ++++ 6 files changed, 41 insertions(+), 2 deletions(-) diff --git a/LOTUS_TODO.md b/LOTUS_TODO.md index 86853910c..9df7c16d2 100644 --- a/LOTUS_TODO.md +++ b/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 `` 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) diff --git a/README.md b/README.md index abba8b41b..7ad5e71b4 100644 --- a/README.md +++ b/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 `` 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 diff --git a/src/app/components/sidebar/Sidebar.css.ts b/src/app/components/sidebar/Sidebar.css.ts index c36862232..83f1e244b 100644 --- a/src/app/components/sidebar/Sidebar.css.ts +++ b/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, { diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx index a71ae3c30..c406cb2df 100644 --- a/src/app/features/settings/general/General.tsx +++ b/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 ( @@ -431,6 +435,20 @@ function Appearance() { )} + + + } + /> + + (null) as React.RefObject; + const [glassmorphismSidebar] = useSetting(settingsAtom, 'glassmorphismSidebar'); return ( - + diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 0017f525b..74e8609fe 100644 --- a/src/app/state/settings.ts +++ b/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,