feat (client-demo): add theme toggle menu

[paanSinghCoder]

Summary

feat (client-demo): add theme toggle menu in the root page

Changes

Technical Details

Test Plan

• Manual testing completed
• Build and type checking passes

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	Apr 17, 2026 2:28am

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Theme Switcher: Added a dropdown menu in the navigation bar allowing users to switch between light, dark, and system theme preferences. The currently active theme is highlighted and disabled from being selected again. This enhancement preserves all existing navigation features.

Walkthrough

This PR adds theme switching functionality to the Home component by importing the useTheme hook and Radix theme icons, deriving the current theme with a default fallback, and rendering a new dropdown menu in the navbar that allows users to switch between light, dark, and system theme options.

Changes

Cohort / File(s)	Summary
Theme Switching UI web/apps/client-demo/src/pages/Home.tsx	Introduced useTheme hook import and Radix theme icons; added activeTheme state derived from theme; created themeOptions list with light/dark/system choices; rendered new DropdownMenu in navbar with theme selection capability and disabled state for active theme.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat(client-demo): org invitations list with accept flow #1492 — Modifies the same Home.tsx file to add navbar UI changes and uses @radix-ui/react-icons library.

Suggested reviewers

• rohanchkrabrty

---

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

[coveralls]

Coverage Report for CI Build 24544570158

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage remained the same at 41.816%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	36895
Covered Lines:	15428
Line Coverage:	41.82%
Coverage Strength:	11.81 hits per line

---

💛 - Coveralls

[coderabbitai]

🧹 Nitpick comments (2)

web/apps/client-demo/src/pages/Home.tsx (2)

297-316: Move themeOptions out of the component body.

Since this list is static and doesn't depend on any props/state, defining it at module scope avoids recreating the array (and re-rendering the inline icon elements) on every render.

♻️ Proposed refactor

+const THEME_OPTIONS = [
+  { key: 'light',  label: 'Light',  icon: <SunIcon />,     testId: 'theme-light-option' },
+  { key: 'dark',   label: 'Dark',   icon: <MoonIcon />,    testId: 'theme-dark-option' },
+  { key: 'system', label: 'System', icon: <DesktopIcon />, testId: 'theme-system-option' },
+] as const;
+
 export default function Home() {
   ...
-  const themeOptions = [
-    { key: 'light',  label: 'Light',  icon: <SunIcon />,     testId: 'theme-light-option' },
-    { key: 'dark',   label: 'Dark',   icon: <MoonIcon />,    testId: 'theme-dark-option' },
-    { key: 'system', label: 'System', icon: <DesktopIcon />, testId: 'theme-system-option' },
-  ] as const;

---

369-378: Consider a radio/checkmark pattern instead of disabled to indicate the active theme.

Using disabled on the currently active theme makes it unclear whether the item is unavailable or simply selected, and it also prevents re-triggering setTheme (a minor UX quirk). A DropdownMenu.RadioGroup / RadioItem (or a trailing checkmark) communicates selection state more clearly and is more accessible. Keep the current approach if it's an intentional constraint of the apsara DropdownMenu API.

Does `@raystack/apsara` DropdownMenu support RadioGroup/RadioItem or a selected/checked state?

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ba463a45-f103-4e16-9c49-c6d8ff48e2ba

📥 Commits

Reviewing files that changed from the base of the PR and between 41bfcd7 and 474c1b9.

📒 Files selected for processing (1)

• web/apps/client-demo/src/pages/Home.tsx