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

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

pages/index.vue

@@ -3,9 +3,7 @@
     <AppHeader
       :subtitle="ltxEnabled ? 'MiniMax H3 · LTX-2.3 · Flux.2 Klein' : 'MiniMax H3 · Flux.2 Klein'"
       current="studio"
-      show-settings
       :queue-count="queueBadgeCount"
-      @settings="settingsOpen = true"
       @gpu="pollComfyHealth"
     />
 
@@ -1976,16 +1974,6 @@
       </section>
     </main>
 
-    <SettingsModal
-      v-if="settingsOpen"
-      :folders="folders"
-      :auth-mode="authMode"
-      :username="userName"
-      @close="settingsOpen = false"
-      @updated="applyLibrary"
-      @error="toast"
-      @renamed="userName = $event"
-    />
     <PromptDrawer
       :open="promptDrawerOpen"
       v-model:text="prompt"
@@ -2548,8 +2536,6 @@ const comfyBusy = ref(false)
 const comfyAsleep = ref(false)
 const gpuWaking = ref(false)
 const gpuWakeError = ref('')
-const userName = ref('')
-const authMode = ref('')
 const instanceName = ref(String(runtimeConfig.public.instanceName || 'AIGen'))
 const ltxEnabled = computed(() => ltxWorkflowEnabled({
   studio: runtimeConfig.public.studio,
@@ -2606,7 +2592,6 @@ const renamingFamily = ref(false)
 const renameDraft = ref('')
 const renameInput = ref<HTMLInputElement | null>(null)
 const unlockPassword = ref('')
-const settingsOpen = ref(false)
 const queueAutoRun = ref(false)
 const queuePendingCount = ref(0)
 const activeQueueId = ref('')
@@ -3761,8 +3746,6 @@ onMounted(async () => {
   loraPollAt = Date.now()
   void loadGenerationPresets()
   await loadDirectorScripts().catch(() => null)
-  userName.value = me.user?.name || me.user?.email || ''
-  authMode.value = me.authMode || ''
   instanceName.value = me.instanceName || instanceName.value || 'AIGen'
   applyInstancePrivacy()
   setTimeout(() => { void loadLibrary(true).catch(() => null) }, 6000)
@@ -3794,10 +3777,6 @@ watch(folderId, () => {
   applyThumbnailDefault()
 })
 
-watch(settingsOpen, (open) => {
-  if (!open) void loadPromptPresets()
-})
-
 watch(recommendPresetId, (id) => {
   try { localStorage.setItem('aigen-prompt-preset', id) } catch { /* ignore */ }
 })

pages/library.vue

@@ -4,8 +4,6 @@
       subtitle="Library"
       current="library"
       wide
-      show-settings
-      @settings="settingsOpen = true"
     />
 
     <main class="mx-auto flex min-h-0 w-full max-w-[90rem] flex-1 flex-col gap-4 px-4 py-4 sm:px-6 lg:flex-row">
@@ -282,17 +280,6 @@
       </aside>
     </main>
 
-    <SettingsModal
-      v-if="settingsOpen"
-      :folders="folders"
-      :auth-mode="authMode"
-      :username="userName"
-      @close="settingsOpen = false"
-      @updated="applyLibrary"
-      @error="toast"
-      @renamed="userName = $event"
-    />
-
     <Teleport to="body">
       <div
         v-if="pendingDelete"
@@ -366,9 +353,6 @@ const showPrivacyToggles = computed(() => isXaigenStudio({
   studio: runtimeConfig.public.studio,
   instanceName: runtimeConfig.public.instanceName || instanceName.value
 }))
-const authMode = ref('')
-const userName = ref('')
-const settingsOpen = ref(false)
 const folders = ref<LibraryFolder[]>([])
 const clips = ref<LibraryClip[]>([])
 const stills = ref<LibraryStill[]>([])
@@ -892,8 +876,6 @@ onMounted(async () => {
     $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean; authMode?: string; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null })),
     loadLibrary().catch(() => applyLibrary({ folders: [], clips: [], stills: [] }))
   ])
-  userName.value = me.user?.name || me.user?.email || ''
-  authMode.value = me.authMode || ''
   instanceName.value = me.instanceName || instanceName.value
   await nextTick()
   measure()

pages/settings.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="min-h-dvh min-w-0">
+    <AppHeader subtitle="Settings" current="settings" />
+
+    <main class="mx-auto min-w-0 max-w-6xl px-4 py-6 sm:px-6">
+      <div class="mb-8">
+        <h1 class="font-display text-2xl font-bold">Settings</h1>
+        <p class="mt-1 max-w-2xl text-sm text-zinc-400">
+          GPU, storage, folders, LoRA keys, keep-prompt snippets, and prompt-helper instruction sets for this account.
+        </p>
+      </div>
+      <SettingsForm />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({ title: 'Settings' })
+</script>