LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: glassmorphism sidebar toggle (P5-3)

Browse Source 
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>
This commit is contained in:
Jared Vititoe
2026-06-04 22:02:18 -04:00
parent 517e992dec
commit c6932b45fb
6 changed files with 41 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
LOTUS_TODO.md
+3 -1
View File
@@ -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)