New theme preview icons

[ItsEeleeya]

Updated the look of the theme icons and added new ones to reflect the new recording flow.

Summary by CodeRabbit

• New Features

  • Added legacy theme preview options (auto, dark, light) to appearance settings.

• Improvements

  • Theme preview selection now adapts when the new recording flow is enabled.
  • Centralized preview mapping for system/light/dark makes previews more consistent.
  • UI rendering updated to use the centralized previews for more reactive, reliable visualization.

[coderabbitai]

Walkthrough

The general settings component was updated to support conditional theme preview rendering: three legacy preview assets were added; AppearanceSection gained a newRecordingFlow prop; a previews memo centralizes mapping of system/light/dark previews and the UI now renders previews from that memo.

Changes

Cohort / File(s)	Change Summary
Theme Preview Conditional Logic apps/desktop/src/routes/(window-chrome)/settings/general.tsx	Added legacy theme preview imports (legacy-auto, legacy-dark, legacy-light); AppearanceSection now accepts newRecordingFlow prop; introduced a previews memo that maps theme IDs to current or legacy previews based on newRecordingFlow; updated rendering to use Show with previews()[theme.id]; parent passes newRecordingFlow={settings.enableNewRecordingFlow}.

Sequence Diagram(s)

sequenceDiagram
    participant Settings as Settings page
    participant Appearance as AppearanceSection
    participant Memo as previews() memo
    participant UI as Theme preview UI

    Settings->>Appearance: render(newRecordingFlow = settings.enableNewRecordingFlow)
    Appearance->>Memo: compute previews(newRecordingFlow)
    Memo-->>Appearance: previews map (auto/light/dark)
    Appearance->>UI: render preview using previews()[theme.id]
    Note right of UI `#D6EAF8`: UI shows legacy or current preview\nbased on previews() mapping

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Areas to focus on:
  • Correctness of the previews memo mapping for auto, light, and dark
  • Proper imports and usage of legacy preview assets
  • Reactive re-render behavior when settings.enableNewRecordingFlow toggles
  • Any type/prop updates to AppearanceSection

Poem

🐰 With twitching nose and whiskers bright,

I swap the previews left and right.
Old shadows waltz with new design,
A hopping tweak — how neat, how fine! 🥕

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'New theme preview icons' aligns with the PR description which states the changes updated the look of theme icons and added new ones. The changes confirm additions of legacy theme preview assets and updated preview selection logic.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ef4a54f and bab0348.

📒 Files selected for processing (1)

• apps/desktop/src/routes/(window-chrome)/settings/general.tsx (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/desktop/src/routes/(window-chrome)/settings/general.tsx

---

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: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 563e238 and ef4a54f.

⛔ Files ignored due to path filters (6)

• apps/desktop/src/assets/theme-previews/auto.jpg is excluded by !**/*.jpg
• apps/desktop/src/assets/theme-previews/dark.jpg is excluded by !**/*.jpg
• apps/desktop/src/assets/theme-previews/legacy-auto.jpg is excluded by !**/*.jpg
• apps/desktop/src/assets/theme-previews/legacy-dark.jpg is excluded by !**/*.jpg
• apps/desktop/src/assets/theme-previews/legacy-light.jpg is excluded by !**/*.jpg
• apps/desktop/src/assets/theme-previews/light.jpg is excluded by !**/*.jpg

📒 Files selected for processing (1)

• apps/desktop/src/routes/(window-chrome)/settings/general.tsx (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/desktop/src/routes/(window-chrome)/settings/general.tsx (1)

apps/desktop/src/utils/tauri.ts (1)

• AppTheme (352-352)

🔇 Additional comments (3)

apps/desktop/src/routes/(window-chrome)/settings/general.tsx (3)

23-25: LGTM! Legacy theme preview imports added correctly.

The new imports follow the existing naming convention and file structure pattern.

---

117-117: LGTM! New prop added to control theme preview rendering.

The newRecordingFlow prop is correctly typed and clearly named.

---

418-418: LGTM! Prop correctly wired from settings.

The newRecordingFlow prop is properly passed from the settings store.