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>

components/Navigation/DesktopSidebar.tsx

@@ -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 */}
+        {/* User Menu - styled like other nav items, now includes theme toggle */}
-        <ThemeToggle />
-
-        {/* User Menu - styled like other nav items */}
         <UserMenu showLabel={true} />
 
         {/* Development state panel */}

components/UserMenu.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Menu, Avatar, NavLink, ActionIcon } from '@mantine/core';
+import { Menu, Avatar, NavLink, ActionIcon, SegmentedControl, Text } from '@mantine/core';
+import { useMantineColorScheme } from '@mantine/core';
+import { IconSun, IconMoon, IconDeviceDesktop } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
 interface UserProfile {
@@ -13,6 +15,7 @@ interface UserProfile {
 
 export function UserMenu({ showLabel = false }: { showLabel?: boolean } = {}) {
   const router = useRouter();
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -129,6 +132,47 @@ export function UserMenu({ showLabel = false }: { showLabel?: boolean } = {}) {
             @{profile.handle}
           </span>
         </Menu.Label>
+        <Menu.Divider />
+
+        {/* Theme Selection */}
+        <div style={{ padding: '8px 12px' }}>
+          <Text size="xs" fw={500} c="dimmed" mb={8}>
+            Theme
+          </Text>
+          <SegmentedControl
+            value={colorScheme}
+            onChange={(value) => setColorScheme(value as 'light' | 'dark' | 'auto')}
+            data={[
+              {
+                value: 'light',
+                label: (
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <IconSun size={16} />
+                  </div>
+                ),
+              },
+              {
+                value: 'dark',
+                label: (
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <IconMoon size={16} />
+                  </div>
+                ),
+              },
+              {
+                value: 'auto',
+                label: (
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <IconDeviceDesktop size={16} />
+                  </div>
+                ),
+              },
+            ]}
+            fullWidth
+            size="xs"
+          />
+        </div>
+
         <Menu.Divider />
         <Menu.Item onClick={handleLogout} c="red">
           Log out