feat: redesign settings pages with improved UI

[reneaaron]

Summary

• Settings nav: icons for each item, grouped into Security / Data / Account / Advanced sections
• General page: visual theme picker with live previews of each theme, segmented light/dark/system toggle replacing the dropdowns; flat section layout matching other settings pages
• Theme gating: locked Pro themes open the UpgradeDialog on click; render gates on albyMe loading so Pro users don't see a flash of locked state
• Accessibility: theme grid and dark-mode toggle use role="radiogroup" / role="radio" semantics; ThemePreview marked aria-hidden
• Sidebar: isPathActive helper keeps top-level items highlighted when on sub-pages

Test plan

• Settings nav renders with icons and group labels
• Navigate through each settings sub-page; active item stays highlighted
• Theme picker: select free themes, verify selection indicator and instant preview
• Light/dark/system segmented toggle updates appearance
• As non-Pro user: locked themes show lock overlay; clicking opens UpgradeDialog
• Keyboard: Tab through theme cards and toggle; Space/Enter activates (including locked cards)
• As Pro user: no flash of locked state on page load
• Responsive layout on mobile

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Visual theme selection with previews and icon-based dark mode options
  • Organized settings into labeled sections (Security, Data, Account, Advanced)

• Style

  • Enhanced settings navigation with icons
  • Improved active state handling for nested routes
  • Restructured settings and backup layouts for better visual hierarchy

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Adds a shared route-active helper, refactors settings sidebar into labeled NavGroup sections with icon-capable MenuItem, replaces theme/dark-mode selects with visual tile/tabs and subscription gating, introduces ThemePreview component, adjusts default theme CSS selector, and restructures Backup screen layout.

Changes

Cohort / File(s)	Summary
Active Route Detection frontend/src/components/AppSidebar.tsx	Adds shared isPathActive helper and updates main/secondary nav buttons to mark nested routes active using pathname.startsWith(...).
Settings Navigation & MenuItem frontend/src/components/layouts/SettingsLayout.tsx	Reworks sidebar into labeled NavGroups (Security, Data, Account, Advanced); MenuItem now accepts optional icon?: LucideIcon; updates active/inactive class rendering and nav container scrolling behavior.
Theme & Appearance UI frontend/src/screens/settings/Settings.tsx, frontend/src/components/ThemePreview.tsx, frontend/src/themes/default.css	Replaces dropdowns with tile/grid theme selection and tabbed dark-mode options; adds ThemePreview component; shows pro badge and lock overlay for paid themes when unsubscribed; applies theme variables to .theme-default selector as well.
Backup Screen Layout frontend/src/screens/settings/Backup.tsx	Restructures Recovery Phrase section into a new wrapper, moves Separator into mnemonic branch, flattens a VSS block wrapper, and adjusts spacing and message placement.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: align Pro badge styling with theme #2198: Related to Pro badge usage and styling in theme selection (affects ThemePreview / Settings.tsx).
• chore: migrate to eslint v10 #2091: Modifies MenuItem/SettingsLayout types and UI—strong overlap with Sidebar/MenuItem changes.
• fix: remove custom text styles from checbox and radio labels #2180: Changes Backup screen UI elements in Backup.tsx, overlapping layout edits.

Suggested reviewers

• rolznz

Poem

🐰
I hopped through routes to mark the active trail,
Grouped the settings so no section would fail.
I painted themes in tiles, some locked with a key,
A fluttering badge says "pro" — but not for me! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: redesign settings pages with improved UI' is clear and descriptive, accurately reflecting the main changes across multiple settings pages including navigation reorganization, visual theme picker, and layout improvements.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/settings-page-redesign

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

frontend/src/components/layouts/SettingsLayout.tsx (1)

188-238: Align new navigation UI wrappers with the shadcn-only UI guideline.

NavGroup and the custom-rendered MenuItem are UI primitives under frontend/src/components. Please migrate to shadcn/ui primitives (or explicitly document why no shadcn equivalent exists for this case).

As per coding guidelines, frontend/src/components/**/*.{ts,tsx}: Use shadcn/ui components for all UI — do not create custom components unless no shadcn equivalent exists.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/components/AppSidebar.tsx`:
- Line 145: The active-state check in AppSidebar is using
location.pathname.startsWith(item.url) which treats routes like /appstore/... as
active for /apps; update the isActive logic in the AppSidebar component so it
only matches exact path or a proper path boundary: use location.pathname ===
item.url || location.pathname.startsWith(item.url + "/") (or equivalent
boundary-aware matching) when computing the isActive prop for each item
(reference: isActive, location.pathname, item.url in AppSidebar.tsx).

In `@frontend/src/screens/settings/AlbyAccount.tsx`:
- Around line 42-53: The profile card currently uses {albyMe.name ||
albyMe.email} so accounts with a display name hide the email; update the JSX
around the albyMe rendering (the element containing the span with truncate and
the subsequent secondary block that currently only shows
albyMe.lightning_address) to always render the email as the secondary line and
render albyMe.lightning_address as an additional line below it when present;
locate the relevant components/JSX by the albyMe identifier, the ProBadge usage
and the ZapIcon element, adjust the conditional rendering so primary shows
albyMe.name (or email if name missing) and a separate secondary block always
shows albyMe.email and, if albyMe.lightning_address exists, an extra line with
ZapIcon plus the lightning_address.

In `@frontend/src/screens/settings/Settings.tsx`:
- Around line 243-265: The appearance option buttons only communicate selection
visually—update the mapped button elements (the ones iterating darkModeOptions
and calling setDarkMode) to expose state to assistive tech by adding
aria-pressed={darkMode === option.value} and a clear accessible name (e.g.,
aria-label={option.label}) so screen readers announce the current mode;
alternatively you may convert the wrapper to role="radiogroup" and each option
to role="radio" with aria-checked={darkMode === option.value}, but the minimal
fix is adding aria-pressed and aria-label to the existing buttons.
- Around line 150-238: The theme card is rendered as a plain div for locked
themes, removing it from keyboard focus; change the card wrapper to always be a
<button> element (use the same key prop) so UpgradeDialog receives a button
trigger and keyboard users can tab to it, and add accessibility props:
aria-pressed={isSelected} and aria-disabled={isDisabled}. For the enabled case
keep the onClick handler that calls setTheme(t) and toast("Theme updated."), and
for the disabled case let UpgradeDialog wrap the same button but remove the
onClick (or keep it inert) and rely on aria-disabled to indicate state; update
references to themeCard, isDisabled, isSelected, UpgradeDialog, setTheme, and
toast accordingly.

🪄 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

Run ID: a97ad155-17cd-4ec0-8c5c-fe8fbb391963

📥 Commits

Reviewing files that changed from the base of the PR and between e221469 and ba05b06.

📒 Files selected for processing (5)

• frontend/src/components/AppSidebar.tsx
• frontend/src/components/SettingsHeader.tsx
• frontend/src/components/layouts/SettingsLayout.tsx
• frontend/src/screens/settings/AlbyAccount.tsx
• frontend/src/screens/settings/Settings.tsx

[reneaaron]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[im-adithya]

tACK