Move settings out of a modal and onto its own page.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/AppHeader.vue

@@ -73,14 +73,14 @@
             role="menuitem"
             @click="sleepGpu"
           >{{ gpuSleeping ? 'Sleeping…' : 'Sleep' }}</button>
-          <div v-if="authEnabled || showSettings" class="my-1 border-t border-white/10" />
-          <button
-            v-if="showSettings"
-            type="button"
-            class="block w-full rounded-xl px-3 py-2 text-left text-sm text-zinc-200 hover:bg-white/5 hover:text-white"
+          <div class="my-1 border-t border-white/10" />
+          <NuxtLink
+            to="/settings"
+            class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
+            :class="current === 'settings' ? 'text-amber-100' : 'text-zinc-200'"
             role="menuitem"
-            @click="openSettings"
-          >Settings</button>
+            @click="menuOpen = false"
+          >Settings</NuxtLink>
           <a
             v-if="authEnabled"
             href="/api/auth/logout"
@@ -116,19 +116,16 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
   subtitle: string
-  current?: 'studio' | 'library' | 'director' | 'queue'
+  current?: 'studio' | 'library' | 'director' | 'queue' | 'settings'
   wide?: boolean
-  showSettings?: boolean
   queueCount?: number
 }>(), {
   current: 'studio',
   wide: false,
-  showSettings: false,
   queueCount: 0
 })
 
 const emit = defineEmits<{
-  settings: []
   gpu: []
 }>()
 
@@ -198,11 +195,6 @@ function closeMenu() {
   menuOpen.value = false
 }
 
-function openSettings() {
-  menuOpen.value = false
-  emit('settings')
-}
-
 function applyHealth(health: {
   comfy?: { ok?: boolean; busy?: boolean; asleep?: boolean }
   imageComfy?: { ok?: boolean; busy?: boolean }