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 color previews replacing the dropdown, segmented light/dark/system toggle, card-based layout
• Alby Account page: profile card showing avatar, name, ProBadge, and lightning address; consolidated change/unlink actions in a single card
• Theme gating: locked pro themes now open the UpgradeDialog on click instead of being unclickable
• SettingsHeader: conditionally hides empty descriptions
• Sidebar: startsWith matching so Settings stays highlighted on sub-pages

Screenshots

Test plan

• Verify settings nav renders with icons and group labels
• Click through each settings sub-page, confirm active state highlighting
• Test theme picker: select free themes, verify locked themes show lock overlay
• Test light/dark/system segmented toggle
• Verify Alby Account page shows profile info and manage link
• Test Change/Unlink account actions still work
• Test as non-pro user: locked themes should open UpgradeDialog
• Check responsive layout on mobile

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Alby account profile now displays avatar, name, email, subscription status, and lightning address.
  • Settings sidebar navigation organized into labeled groups with icons for better organization.
  • Theme selection redesigned with visual preview cards; dark mode now uses inline toggle buttons.

• Bug Fixes

  • Active navigation state now correctly highlights nested routes (e.g., settings subpages).
  • Settings header description now properly hidden when empty.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 54283cb1-44b8-4f5b-b495-091a110c05bb

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 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