feat: Move theme toggle to profile dropdown with icon-only SegmentedControl

Changes:
- Moved theme toggle from separate DesktopSidebar component into UserMenu dropdown
- Replaced simple light/dark toggle with SegmentedControl offering three options:
  - Light (sun icon)
  - Dark (moon icon)
  - System/Auto (desktop icon)
- Uses icon-only labels for compact display in dropdown menu
- Defaults to 'auto' mode (respects system preference) as configured in layout.tsx
- Removed standalone ThemeToggle component from DesktopSidebar

Benefits:
- Cleaner navigation UI with one less separate control
- Better UX with system preference option
- More compact dropdown menu layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-10 01:26:33 +00:00
parent e91886a1ce
commit 57d5405c41
2 changed files with 46 additions and 6 deletions

View File

@@ -13,7 +13,6 @@ import { IconMessageCircle, IconEdit, IconChartBubbleFilled } from '@tabler/icon
import { useSelector } from '@xstate/react';
import { useAppMachine } from '@/hooks/useAppMachine';
import { UserMenu } from '@/components/UserMenu';
import { ThemeToggle } from '@/components/ThemeToggle';
import styles from './DesktopSidebar.module.css';
export function DesktopSidebar() {
@@ -106,10 +105,7 @@ export function DesktopSidebar() {
<Divider my="md" />
{/* Theme Toggle */}
<ThemeToggle />
{/* User Menu - styled like other nav items */}
{/* User Menu - styled like other nav items, now includes theme toggle */}
<UserMenu showLabel={true} />
{/* Development state panel */}