feat(web): extract appearance settings to a separate tab

[akarabach]

Summary

• Extract Theme and Time format settings from the General tab into a new dedicated Appearance tab
• Add PaletteIcon sidebar nav item between General and Connections
• General tab retains all behavioral settings (diff wrapping, streaming, thread mode, confirmations, model, providers, etc.)
• "Restore defaults" button continues to work across all tabs

Note: This is the first PR extracting appearance settings. I'm planning to move (and add) additional appearance-related settings in a follow-up PR.

Test plan

• Verified Theme switching (system / light / dark) works from the new Appearance tab
• Verified Time format switching (system default / 12-hour / 24-hour) works from the new Appearance tab
• Verified "Restore defaults" button in the header correctly resets appearance settings across tabs
• Verified General tab no longer shows Theme / Time format rows
• Verified sidebar navigation highlights the active Appearance tab

Demo

---

Note

Low Risk
Low risk UI/routing refactor that moves existing settings controls; main risk is navigation/regression in settings routes or sidebar highlighting.

Overview
Adds a new Appearance settings tab at /settings/appearance and wires it into the TanStack Router tree.

Moves the existing Theme and Time format controls (including reset-to-default actions) out of the General panel into the new AppearanceSettingsPanel, and updates the settings sidebar to include an Appearance entry with PaletteIcon.

^{Reviewed by Cursor Bugbot for commit 557990f. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. 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: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: e5e684f1-1da8-499a-ac15-51f94f1297ef

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

---

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.}

[macroscopeapp]

Approvability

Verdict: Approved

This is a mechanical code extraction that moves existing appearance settings (theme and timestamp format) from the General settings panel to a new dedicated Appearance tab. The extracted code is unchanged - same constants, same hooks, same component structure. Only routing and navigation entries were added.

^{You can customize Macroscope's approvability policy. Learn more.}