- Theme grid has max-h-[430px] with internal scroll (~3 rows visible)
- Accent color picker moved back below the theme grid
- Page scrolls normally (no split scroll regions)
- Mode selector stays above the theme grid
- Only the theme grid scrolls — header, accent picker, and mode
selector are pinned at the top (shrink-0 + min-h-0 flex layout)
- Move accent color picker above the mode selector so it's the
first choice
- Update theme name text to text-xs font-medium (matches profile
name style used elsewhere in settings)
- Align traffic light positions in SystemPreferencePreviewSvg to match
ThemePreviewSvg (x=3.5, 8, 12.5 instead of 4.5, 9, 13.5)
- Use current app muted color (CSS var) for system preference frame
background instead of the light theme's muted color
- Move accent color picker between mode selector and theme grid
so it doesn't get lost below the fold
- Add accent color elements (border, title, primary squares) to
the system preference SVG light half
- Position SVG at bottom-right (90% size, offset -1) showing the
theme's muted background behind it — matches the original style
- Add accent color elements (border line, title bar, primary squares)
to SystemPreferencePreviewSvg light half
- Use light theme's muted color as SystemPreferencePreviewFrame background
- Increase grid gap from gap-3 to gap-4 for more breathing room
- Fix accent color row clipping with padding on container
- Replace preview thumbnails in mode selector with Lucide icons
(SunMoon for System, Sun for Light, Moon for Dark)
- Switch from horizontal scroll to wrapping grid for theme list
(since mode selector already filters the themes)
- Remove HorizontalScrollWithFade component (no longer needed)
- Remove section subtitles — just the mode buttons
- Swap SystemPreferencePreviewSvg: light on top, dark on bottom
- Remove unused expanded state and Show all toggle
Redesigns the appearance settings with a two-level approach:
1. Top-level mode selector: System / Light / Dark
- Each shows a mini preview thumbnail
- System shows the split dark/light preview
- Light/Dark show a single theme preview
2. Theme list below changes based on selected mode:
- System → paired themes (with split preview tiles)
- Light → all light-capable themes (paired light + light-only)
- Dark → all dark-capable themes (paired dark + dark-only)
Selecting a theme in System mode auto-enables follow-system.
Selecting in Light/Dark mode disables follow-system.
- Use preserveAspectRatio='xMinYMin slice' so SVG covers the frame
- Position SVG with inset-0 instead of bottom-0 right-0
- Applies to both ThemePreviewSvg and SystemPreferencePreviewSvg
- Increase tile size to 168x112px for larger previews
- Use rounded-2xl (matching modal radius) on all preview frames
- Remove section subtitles — just title + Show all
- Add right-edge fade gradient on horizontal scroll sections
- Add p-1 padding to scroll container so ring states aren't clipped
- Make ThemePreviewSvg fill its container (h-full w-full)
- Extract HorizontalScrollWithFade component for consistent scroll UX
- Remove card containers from theme tiles (just image + name below)
- Switch all sections to horizontal scroll by default
- Add 'Show all' / 'Collapse' toggle to section headers (shows when
section has >4 items) — expands to a wrapping grid layout
- Reduce tile size to 140px for a more compact horizontal row
Replaces the two separate ThemePreviewFrame images with a single
SystemPreferencePreviewFrame that shows dark on top and light on bottom,
matching the System Preference SVG design. Each paired theme tile now
uses this combined preview to visually communicate that it adapts to
the system color scheme.
Replaces the flat searchable theme list with three visual sections:
1. **Adapts to system** — Paired themes (light+dark) shown side by side
with preview images. Selecting one auto-enables follow-system behavior.
2. **Light** — Light-only themes (no dark counterpart) with single preview.
3. **Dark** — Dark-only themes (no light counterpart) with single preview.
Uses the same ThemePreviewFrame SVG from onboarding to show a visual
representation of each theme. Removes the separate "Use system setting"
toggle since paired themes now implicitly enable it.
Refactors shared theme preview components out of ThemeStep into:
- shared/theme/ThemePreviewFrame.tsx — SVG preview component
- shared/theme/useThemePreviewVars.ts — preview vars loading hook
The accent color picker remains below the theme sections.
Re-introduce the section icon feature that was accidentally removed in
PR #1428 (workspace rail unread observer refactor). This restores the
functionality originally added in PR #1424.
Changes:
- Add icon?: string field to ChannelSection type
- Parse and persist icon in channelSectionsStorage
- Add emoji picker to Create/Rename section dialogs
- Render section icon in sidebar header and Move-to-section submenu
- Wire icon through useChannelSections create/rename methods
- Add unit tests for icon field parsing
Fixes regression where section icons were stripped during the #1428
refactor.
Co-authored-by: klopez4212 <klopez4212@gmail.com>
Signed-off-by: klopez4212 <klopez4212@gmail.com>
