From 57d5405c41ceeb670973c3aded2b02659872438d Mon Sep 17 00:00:00 2001
From: Albert <albert@noreply.git.vaporware.studio>
Date: Mon, 10 Nov 2025 01:26:33 +0000
Subject: [PATCH] feat: Move theme toggle to profile dropdown with icon-only
 SegmentedControl
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  6 +---
 components/UserMenu.tsx                  | 46 +++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/components/Navigation/DesktopSidebar.tsx b/components/Navigation/DesktopSidebar.tsx
index 1328a64..6742333 100644
--- a/components/Navigation/DesktopSidebar.tsx
+++ b/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 */}
-        <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 */}
diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx
index ae23231..c8900ab 100644
--- a/components/UserMenu.tsx
+++ b/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