feat: Custom Theme Editor + UI Layout Overhaul#62
Merged
Conversation
TopBar now only renders project tabs and "Add project" button. ScreenshotButton, HealthIndicator, HubStatus, and CommandBar removed (utilities move to TitleBar; AssistantWidget replaces CommandBar). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove all 12 [data-theme='...'] CSS blocks (6 themes x light/dark): dusk, lime, ocean, retro, neo, forest. Keep only :root (light defaults) and .dark (dark defaults) as the base fallback. Custom themes will override these at runtime via style.setProperty(). File reduced from 1422 to 899 lines (-523 lines). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…s and token defaults
- Add ThemeTokens interface (33 CSS variable token fields) and new
CustomTheme type with light/dark palettes + timestamps
- Add ThemeTokensSchema and CustomThemeSchema Zod validation
- Add customThemes field to AppSettingsSchema
- Add THEME_TOKEN_KEYS, DEFAULT_LIGHT_TOKENS, DEFAULT_DARK_TOKENS
constants extracted from globals.css :root and .dark blocks
- Add ROUTES.THEMES ('/settings/themes') route constant
- Reduce COLOR_THEMES/COLOR_THEME_LABELS to backward-compat stubs
(to be removed by Task #4 when ColorThemeSection.tsx is updated)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ect cards - Add search bar that filters projects by name or path (live, case-insensitive) - Add metrics row showing real data: total projects, active tasks, active agents - Replace raw HTML buttons with Button from @ui design system - Replace Loader2 with Spinner from @ui - Wrap project rows in Card components with Badge for repo structure - Add per-project task counts derived from useAllTasks() - Add search no-results empty state - All metrics use real data from useProjects() and useAllTasks() hooks Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add utility button group between drag area and window controls in the TitleBar. Includes TitleBarScreenshot (camera icon, captures primary screen to clipboard with 1.5s checkmark feedback), HealthIndicator, and HubStatus, separated from window controls by a vertical Separator. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…le sections Replace flat nav list with two collapsible accordion sections using Collapsible/CollapsibleTrigger/CollapsibleContent from @ui. Personal section contains Dashboard through Comms. Development section contains project-scoped items (Tasks through Insights). Add "Add Project" button between sections navigating to /projects. Collapsed sidebar mode preserves icon-only rendering without section headers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ts for custom themes
…blocks from globals.css
When colorTheme is set to a custom theme ID, injects all theme tokens as CSS custom properties via style.setProperty(). Switching to 'default' clears all custom properties. Mode changes re-apply the correct light/dark palette. Settings loading flow now calls setCustomThemes(). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…tton ColorThemeSection now shows active theme name and a "Customize Theme" button that navigates to /settings/themes (Theme Editor page). Removed references to COLOR_THEMES, COLOR_THEME_LABELS, and THEME_SWATCH_COLORS. Simplified SettingsPage by removing handleColorThemeChange callback. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Build the ThemeEditorPage as a new feature module within settings. Includes: - ThemeEditorPage: split layout with controls (left) and live preview (right) - ColorControl: single token editor with native color picker + hex input - ColorSection: grouped token controls with 7 semantic sections - ThemePreview: isolated live preview with sample UI elements (cards, buttons, badges, alerts) - SavedThemesBar: horizontal scrollable list of saved themes with apply/delete - CssImportDialog: modal for pasting CSS (supports hex, HSL, OKLCH formats) - css-parser: parses shadcn/tweakcn CSS into ThemeTokens (3 format support) - css-exporter: generates CSS + clipboard copy from ThemeTokens - token-sections: section definitions grouping 33 tokens by semantic purpose Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…olor controls, preview, CSS import/export
Add themesRoute as sibling of settingsRoute in createSettingsRoutes, pointing to ThemeEditorPage via lazy import from settings barrel. Export ThemeEditorPage from the settings feature index. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…e + barrel export
… update docs E2E Tests (settings-theme.spec.ts): - Remove 4 tests that click nonexistent named theme buttons (Ocean, Forest, etc.) - Keep 6 working tests (mode selector, dark/light toggle, hub settings, profiles) - Add 3 new tests: navigate to theme editor, verify color controls load, no console errors Orphan Cleanup: - Delete CommandBar.tsx (replaced by AssistantWidget) - Delete command-bar-store.ts (only used by CommandBar) - Delete ag-grid-theme.css (AG-Grid theming migrated to Theming API) - Remove imports from globals.css and stores/index.ts - Clean up CommandBar references in TopBar.tsx comment Documentation: - FEATURES-INDEX.md: Add Theme Editor entry, update settings/tasks/assistant rows, remove CommandBar - PATTERNS.md: Add custom theme token injection pattern, update AG-Grid theming section - user-interface-flow.md: Add Theme Editor page (section 23.0), update Color Theme row, fix references Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Resolve merge conflicts from comprehensive-e2e-suite branch: - ai-docs: merge feature descriptions with master's details - Sidebar.tsx: use master's bg-sidebar classes - ag-grid-theme.css: accept our deletion (JS Theming API) - settings-theme.spec.ts: accept master's deletion (numbered specs) Update master's new E2E tests for theme editor changes: - 12-settings-full: replace Ocean/Oscura with Customize Theme nav - 13-global-overlays: remove CommandBar tests (component deleted) - 14-theme-visual: remove named theme tests, keep mode switching - 15-smoke-flow: replace theme switching with mode toggle, remove Ctrl+K Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces 7 hardcoded color themes with a runtime custom theme editor and restructures key layout components.
Theme Editor (core deliverable)
/settings/themeswith 33 color token controls organized in 7 sectionsUI Layout Restructure
Technical Changes
ThemeTokens(33 fields),CustomTheme(light/dark palettes + metadata)setProperty()/removeProperty()ondocumentElement[data-theme]blocks from globals.cssCommandBar.tsx,command-bar-store.ts,ag-grid-theme.cssFiles Changed
Verification
npm run lintnpm run typechecknpm run testnpm run buildTest plan
/settings/themesnpm run test:e2eto verify E2E tests pass🤖 Generated with Claude Code