fix(ui): move UI scale + theme picker from footer to Settings → Appearance - #108
Merged
Conversation
…rance
The LogsFooter bar carried two always-visible appearance controls in the
left edge — \`S M L\` UI-scale toggle and 6 color theme dots. Both
duplicated the "Settings" affordance: rarely-used display preferences
shouldn't live in always-on chrome competing with logs / error counts.
Moved both into a new \`AppearancePanel\` rendered as a Settings section:
- New: frontend/src/components/settings/AppearancePanel.{jsx,css}
- Wired into Settings.jsx alongside ApiKeysPanel + PerformancePanel
- Footer no longer renders UiScaleToggle / ThemePicker / their dividers
Store state (uiScale, theme, setUiScale, setTheme) is unchanged — they
still persist via the same Zustand persist whitelist, just rendered in
the new location. Users who toggled to L-scale or Catppuccin keep their
prefs across the move.
User-visible effect: footer left edge now starts with the collapse
chevron + "Logs" title, then the source pills. No S/M/L. No color dots.
A user who wants to change either opens Settings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
📝 WalkthroughWalkthroughThis PR consolidates appearance customization by moving the theme picker and UI scale toggle from an inline LogsFooter to a dedicated AppearancePanel in the Settings menu. The footer is simplified to focus on log content, while appearance controls are now grouped with other preferences. ChangesAppearance Settings Relocation
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/LogsFooter.jsx`:
- Around line 68-72: The module is missing the useAppStore import which causes
ReferenceError when the hooks at useAppStore (used in the footer component
around the user action handlers) are referenced; restore the import by adding
useAppStore to the existing import block at the top of the file (where other
hooks/stores are imported) so that the component can call useAppStore in the
handlers that currently reference it; ensure the imported symbol name exactly
matches useAppStore and remove any duplicate imports if present.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2d8642e1-a6ee-4feb-96d4-ce61a7a39f6f
📒 Files selected for processing (4)
frontend/src/components/LogsFooter.jsxfrontend/src/components/settings/AppearancePanel.cssfrontend/src/components/settings/AppearancePanel.jsxfrontend/src/pages/Settings.jsx
Comment on lines
+68
to
+72
| // UiScaleToggle and ThemePicker used to live here as always-visible | ||
| // controls in the footer chrome. Moved to Settings → Appearance (see | ||
| // AppearancePanel) so the footer can stay focused on logs. The store | ||
| // fields (uiScale, theme, setUiScale, setTheme) are unchanged; only the | ||
| // rendering moved. |
Contributor
There was a problem hiding this comment.
Re-add useAppStore import to prevent runtime failures.
useAppStore is still used at Line 400 and Line 442, but it is no longer imported in this module. Those user actions will throw ReferenceError: useAppStore is not defined.
🔧 Proposed fix
import { useSystemLogs, useTauriLogs, useClearLogs, useClearTauriLogs } from '../api/hooks';
import { getFrontendLogs, clearFrontendLogs } from '../utils/consoleBuffer';
+import { useAppStore } from '../store';
import './LogsFooter.css';Also applies to: 344-346
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/LogsFooter.jsx` around lines 68 - 72, The module is
missing the useAppStore import which causes ReferenceError when the hooks at
useAppStore (used in the footer component around the user action handlers) are
referenced; restore the import by adding useAppStore to the existing import
block at the top of the file (where other hooks/stores are imported) so that the
component can call useAppStore in the handlers that currently reference it;
ensure the imported symbol name exactly matches useAppStore and remove any
duplicate imports if present.
This was referenced Jun 24, 2026
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
1 participant
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.
Final piece of the "calm chrome" pass (#105, #106, #107, this one).
What moved
The LogsFooter bar carried two always-visible appearance controls in its left edge:
Both belong in Settings — rarely-used display preferences shouldn't live in always-visible chrome competing with logs / error counts. Moved into a new `AppearancePanel` rendered as a Settings section, alongside the existing `ApiKeysPanel` and `PerformancePanel`.
State preservation
Store fields (`uiScale`, `theme`, `setUiScale`, `setTheme`) are unchanged. They still persist via the same Zustand persist whitelist; only the rendering location moved. Users who toggled to L-scale or Catppuccin keep their prefs across the move.
User-visible effect
Footer left edge now starts with the collapse chevron + "Logs" title + source pills. No S/M/L. No color dots. A user who wants to change either opens Settings.
Files
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit