refactor: enhance theme toggle component with dynamic selection and visual feedback

Author: tikazyq

packages/web/app/api/projects/[id]/devlogs/route.ts

@@ -119,8 +119,15 @@ export async function POST(request: NextRequest, { params }: { params: { id: str
 
     await devlogService.save(devlogEntry);
 
-    // Transform and return created devlog
-    const transformedDevlog = ResponseTransformer.transformDevlog(devlogEntry);
+    // Retrieve the actual saved entry to ensure we have the correct ID
+    const savedEntry = await devlogService.get(nextId, false); // Don't include notes for performance
+
+    if (!savedEntry) {
+      throw new Error('Failed to retrieve saved devlog entry');
+    }
+
+    // Transform and return the actual saved devlog
+    const transformedDevlog = ResponseTransformer.transformDevlog(savedEntry);
     return createSuccessResponse(transformedDevlog, { status: 201 });
   } catch (error) {
     console.error('Error creating devlog:', error);

packages/web/app/components/ui/theme-toggle.tsx

@@ -9,11 +9,17 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Moon, Sun, Monitor } from 'lucide-react';
+import { Check, Monitor, Moon, Sun } from 'lucide-react';
 
 export function ThemeToggle() {
   const { setTheme, theme } = useTheme();
 
+  const themes = [
+    { name: 'light', label: 'Light', icon: <Sun className="mr-2 h-4 w-4" /> },
+    { name: 'dark', label: 'Dark', icon: <Moon className="mr-2 h-4 w-4" /> },
+    { name: 'system', label: 'System', icon: <Monitor className="mr-2 h-4 w-4" /> },
+  ];
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -24,18 +30,35 @@ export function ThemeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          <Sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          <Moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          <Monitor className="mr-2 h-4 w-4" />
-          <span>System</span>
-        </DropdownMenuItem>
+        {themes.map(({ name, label, icon }) => (
+          <DropdownMenuItem
+            key={name}
+            className="cursor-pointer justify-between"
+            onClick={() => setTheme(name)}
+          >
+            <div className="flex items-center">
+              {icon}
+              <span>{label}</span>
+            </div>
+            <div>{theme === name && <Check className="h-4 w-4" />}</div>
+          </DropdownMenuItem>
+        ))}
+        {/* Uncomment the following lines if you want to allow users to select themes manually */}
+        {/*<DropdownMenuItem className="cursor-pointer" onClick={() => setTheme('light')}>*/}
+        {/*  <Sun className="mr-2 h-4 w-4" />*/}
+        {/*  <span>Light</span>*/}
+        {/*  {theme === 'light' && <Check />}*/}
+        {/*</DropdownMenuItem>*/}
+        {/*<DropdownMenuItem className="cursor-pointer" onClick={() => setTheme('dark')}>*/}
+        {/*  <Moon className="mr-2 h-4 w-4" />*/}
+        {/*  <span>Dark</span>*/}
+        {/*  {theme === 'dark' && <Check />}*/}
+        {/*</DropdownMenuItem>*/}
+        {/*<DropdownMenuItem className="cursor-pointer" onClick={() => setTheme('system')}>*/}
+        {/*  <Monitor className="mr-2 h-4 w-4" />*/}
+        {/*  <span>System</span>*/}
+        {/*  {theme === 'system' && <Check />}*/}
+        {/*</DropdownMenuItem>*/}
       </DropdownMenuContent>
     </DropdownMenu>
   );