first ui rework commit

resources/js/components/UserMenuContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
-import { LogOut, Settings } from 'lucide-vue-next';
+import { LogOut, Monitor, Moon, Settings, Sun } from 'lucide-vue-next';
 import {
     DropdownMenuGroup,
     DropdownMenuItem,
@@ -8,6 +8,7 @@ import {
     DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
 import UserInfo from '@/components/UserInfo.vue';
+import { useAppearance } from '@/composables/useAppearance';
 import { logout } from '@/routes/index';
 import { edit } from '@/routes/profile/index';
 import type { User } from '@/types';
@@ -21,6 +22,8 @@ const handleLogout = () => {
 };
 
 defineProps<Props>();
+
+const { appearance, updateAppearance } = useAppearance();
 </script>
 
 <template>
@@ -39,6 +42,36 @@ defineProps<Props>();
         </DropdownMenuItem>
     </DropdownMenuGroup>
     <DropdownMenuSeparator />
+    <DropdownMenuGroup>
+        <DropdownMenuLabel class="text-xs font-medium text-muted-foreground">
+            Appearance
+        </DropdownMenuLabel>
+        <DropdownMenuItem
+            class="cursor-pointer"
+            :class="{ 'bg-accent': appearance === 'light' }"
+            @click="updateAppearance('light')"
+        >
+            <Sun class="mr-2 h-4 w-4" />
+            Light
+        </DropdownMenuItem>
+        <DropdownMenuItem
+            class="cursor-pointer"
+            :class="{ 'bg-accent': appearance === 'dark' }"
+            @click="updateAppearance('dark')"
+        >
+            <Moon class="mr-2 h-4 w-4" />
+            Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem
+            class="cursor-pointer"
+            :class="{ 'bg-accent': appearance === 'system' }"
+            @click="updateAppearance('system')"
+        >
+            <Monitor class="mr-2 h-4 w-4" />
+            System
+        </DropdownMenuItem>
+    </DropdownMenuGroup>
+    <DropdownMenuSeparator />
     <DropdownMenuItem :as-child="true">
         <Link
             class="block w-full cursor-pointer"