Add per-user library settings, folder passwords, and a still picker.

Settings manages folders, thumbnail defaults, and passwords for the signed-in account, and choosing an image now browses saved stills instead of only the desktop file dialog.

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

pages/index.vue

@@ -18,6 +18,9 @@
             {{ comfyOk ? 'ComfyUI online' : 'ComfyUI offline' }}
           </span>
           <span class="hidden md:block text-zinc-400">{{ userName }}</span>
+          <button type="button" class="rounded-full border border-white/10 px-3 py-1 text-zinc-300 hover:border-amber-300/50 hover:text-white" @click="settingsOpen = true">
+            Settings
+          </button>
           <a v-if="authEnabled" href="/api/auth/logout" class="text-zinc-400 hover:text-white">Sign out</a>
         </div>
       </div>
@@ -30,23 +33,23 @@
           <p class="text-sm text-zinc-400">Drop a still, describe the motion, then relay the job to the local desktop.</p>
         </div>
 
-        <label
-          class="relative block cursor-pointer rounded-2xl border border-dashed border-white/15 bg-zinc-950/50 p-4 transition hover:border-amber-300/50"
+        <div
+          class="relative cursor-pointer rounded-2xl border border-dashed border-white/15 bg-zinc-950/50 p-4 transition hover:border-amber-300/50"
+          :class="{ 'border-amber-300/70 bg-amber-400/5': dragging }"
           @dragover.prevent="dragging = true"
           @dragleave.prevent="dragging = false"
           @drop.prevent="onDrop"
-          :class="{ 'border-amber-300/70 bg-amber-400/5': dragging }"
+          @click="pickerOpen = true"
         >
-          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFile">
           <div v-if="preview" class="relative">
             <img :src="preview" alt="Source still" class="max-h-72 w-full rounded-xl object-contain bg-black/40">
-            <button type="button" class="absolute right-3 top-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.prevent="resetImage">Reset</button>
+            <button type="button" class="absolute right-3 top-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
           </div>
           <div v-else class="flex min-h-44 flex-col items-center justify-center text-center">
-            <p class="font-medium">Drag & drop an image</p>
-            <p class="mt-1 text-sm text-zinc-500">PNG, JPG, or WEBP · used as MiniMax H3 first frame</p>
+            <p class="font-medium">Choose an image</p>
+            <p class="mt-1 text-sm text-zinc-500">Browse the library or upload a new PNG, JPG, or WEBP</p>
           </div>
-        </label>
+        </div>
 
         <div>
           <label class="mb-2 block text-sm font-medium text-zinc-300">Motion & scene prompt</label>
@@ -78,22 +81,19 @@
 
         <div>
           <p class="mb-2 text-sm font-medium text-zinc-300">Save to library</p>
-          <div v-if="libraryLocked && !libraryUnlocked" class="rounded-2xl border border-amber-300/20 bg-zinc-950/50 px-4 py-3 text-sm text-zinc-400">
-            Unlock the library to choose a folder.
-          </div>
-          <div v-else class="space-y-3">
-            <div class="flex flex-wrap gap-2">
-              <select v-model="folderId" class="min-w-[12rem] flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm">
-                <option v-for="folder in folders" :key="folder.id" :value="folder.id">{{ folder.name }}</option>
-              </select>
-              <input
-                v-model="newFolderName"
-                class="w-40 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
-                placeholder="New folder"
-                @keydown.enter.prevent="addFolder"
-              >
-              <button type="button" class="rounded-xl border border-white/15 px-3 py-2 text-sm hover:border-amber-300/50" @click="addFolder">Add</button>
-            </div>
+          <div class="space-y-3">
+            <select v-model="folderId" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm">
+              <option v-for="folder in folders" :key="folder.id" :value="folder.id">
+                {{ folder.name }}{{ folder.protected ? (folder.unlocked ? ' · unlocked' : ' · locked') : '' }}
+              </option>
+            </select>
+            <form v-if="currentFolder?.protected && !currentFolder.unlocked" class="space-y-2" @submit.prevent="unlockFolder(folderId)">
+              <p class="text-sm text-zinc-400">Unlock this folder to generate into it.</p>
+              <div class="flex gap-2">
+                <input v-model="unlockPassword" type="password" class="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Folder password">
+                <button type="submit" class="rounded-xl bg-amber-400 px-3 py-2 text-sm font-semibold text-zinc-950">Unlock</button>
+              </div>
+            </form>
             <label class="flex cursor-pointer items-center justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
               <span class="font-medium text-zinc-200">Thumbnail</span>
               <span class="relative inline-flex h-6 w-11 shrink-0 items-center">
@@ -102,6 +102,7 @@
                 <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
               </span>
             </label>
+            <p class="text-xs text-zinc-500">Defaults to this folder’s thumbnail setting whenever you pick a new still. You can override it for this job.</p>
           </div>
         </div>
 
@@ -135,7 +136,7 @@
           <button
             type="button"
             class="flex-1 rounded-2xl bg-amber-400 px-5 py-3 font-semibold text-zinc-950 transition hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
-            :disabled="busy || !file || !prompt.trim() || (libraryLocked && !libraryUnlocked)"
+            :disabled="busy || !file || !prompt.trim() || !currentFolder?.unlocked"
             @click="generate"
           >
             {{ busy ? 'Generating…' : 'Generate Video' }}
@@ -210,18 +211,18 @@
           <div class="flex items-center justify-between gap-3">
             <h2 class="font-display text-xl font-bold">Library</h2>
             <button
-              v-if="libraryUnlocked && libraryLocked"
+              v-if="browseFolder?.protected && browseFolder.unlocked"
               type="button"
               class="text-xs text-zinc-400 hover:text-white"
-              @click="lockLibrary"
+              @click="lockFolder(browseFolderId)"
             >
-              Lock
+              Lock folder
             </button>
           </div>
 
-          <form v-if="libraryLocked && !libraryUnlocked" class="mt-4 space-y-3" @submit.prevent="unlockLibrary">
-            <p class="text-sm text-zinc-400">This library is password protected.</p>
-            <input v-model="unlockPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Library password">
+          <form v-if="browseFolder?.protected && !browseFolder.unlocked" class="mt-4 space-y-3" @submit.prevent="unlockFolder(browseFolderId)">
+            <p class="text-sm text-zinc-400">This folder is password protected.</p>
+            <input v-model="unlockPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Folder password">
             <button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2 font-semibold text-zinc-950">Unlock</button>
           </form>
 
@@ -237,6 +238,7 @@
               >
                 {{ folder.name }}
                 <span class="text-zinc-500">({{ clipsIn(folder.id).length }})</span>
+                <span v-if="folder.protected">{{ folder.unlocked ? '' : ' · lock' }}</span>
               </button>
             </div>
 
@@ -258,22 +260,30 @@
                 </div>
               </li>
             </ul>
-
-            <details class="mt-5 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3">
-              <summary class="cursor-pointer text-sm font-medium">Library password</summary>
-              <form class="mt-4 space-y-3" @submit.prevent="savePassword">
-                <input v-if="libraryLocked" v-model="currentPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Current password">
-                <input v-model="nextPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" :placeholder="libraryLocked ? 'New password (blank to remove)' : 'Set a password'">
-                <button type="submit" class="rounded-xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50">
-                  {{ libraryLocked ? 'Update password' : 'Protect library' }}
-                </button>
-              </form>
-            </details>
           </template>
         </div>
       </section>
     </main>
 
+    <SettingsModal
+      v-if="settingsOpen"
+      :folders="folders"
+      @close="settingsOpen = false"
+      @updated="applyLibrary"
+      @error="toast"
+    />
+    <ImagePickerModal
+      v-if="pickerOpen"
+      :folders="folders"
+      :stills="stills"
+      :clips="clips"
+      :folder-id="folderId"
+      @close="pickerOpen = false"
+      @updated="applyLibrary"
+      @error="toast"
+      @select="onPickedImage"
+    />
+
     <div class="pointer-events-none fixed bottom-4 right-4 z-50 space-y-2">
       <div
         v-for="toast in toasts"
@@ -293,6 +303,18 @@ interface LibraryFolder {
   id: string
   name: string
   createdAt: number
+  thumbnailDefault: boolean
+  protected: boolean
+  unlocked: boolean
+}
+
+interface LibraryStill {
+  id: string
+  folderId: string
+  filename: string
+  width: number
+  height: number
+  createdAt: number
 }
 
 interface LibraryClip {
@@ -322,7 +344,6 @@ const aspects = [
   { id: '1:1' as const, label: '1:1 Square', hint: '1024 × 1024' }
 ]
 
-const fileInput = ref<HTMLInputElement | null>(null)
 const player = ref<HTMLVideoElement | null>(null)
 const file = ref<File | null>(null)
 const preview = ref('')
@@ -353,16 +374,14 @@ const toasts = ref<{ id: string; message: string }[]>([])
 const comfyOk = ref(false)
 const userName = ref('')
 const authEnabled = ref(false)
-const libraryLocked = ref(false)
-const libraryUnlocked = ref(true)
 const folders = ref<LibraryFolder[]>([])
 const clips = ref<LibraryClip[]>([])
+const stills = ref<LibraryStill[]>([])
 const folderId = ref('')
 const browseFolderId = ref('')
-const newFolderName = ref('')
 const unlockPassword = ref('')
-const currentPassword = ref('')
-const nextPassword = ref('')
+const settingsOpen = ref(false)
+const pickerOpen = ref(false)
 let timer: ReturnType<typeof setInterval> | null = null
 let source: EventSource | null = null
 let pollTimer: ReturnType<typeof setInterval> | null = null
@@ -406,16 +425,22 @@ const autoHint = computed(() => {
 })
 
 const visibleClips = computed(() => clips.value.filter(clip => clip.folderId === browseFolderId.value))
+const currentFolder = computed(() => folders.value.find(folder => folder.id === folderId.value))
+const browseFolder = computed(() => folders.value.find(folder => folder.id === browseFolderId.value))
 
 function clipsIn(id: string) {
   return clips.value.filter(clip => clip.folderId === id)
 }
 
-function applyLibrary(data: { locked?: boolean; unlocked?: boolean; folders?: LibraryFolder[]; clips?: LibraryClip[] }) {
-  libraryLocked.value = Boolean(data.locked)
-  libraryUnlocked.value = data.unlocked !== false
-  folders.value = data.folders || []
-  clips.value = data.clips || []
+function applyThumbnailDefault() {
+  hideThumbnail.value = currentFolder.value ? !currentFolder.value.thumbnailDefault : false
+}
+
+function applyLibrary(data: { folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[] } | unknown) {
+  const payload = (data || {}) as { folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[] }
+  folders.value = payload.folders || []
+  clips.value = payload.clips || []
+  stills.value = payload.stills || []
   if (!folderId.value || !folders.value.some(folder => folder.id === folderId.value)) {
     folderId.value = folders.value[0]?.id || ''
   }
@@ -425,7 +450,7 @@ function applyLibrary(data: { locked?: boolean; unlocked?: boolean; folders?: Li
 }
 
 async function loadLibrary() {
-  const data = await $fetch<{ locked?: boolean; unlocked?: boolean; folders?: LibraryFolder[]; clips?: LibraryClip[] }>('/api/library')
+  const data = await $fetch<{ folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[] }>('/api/library')
   applyLibrary(data)
 }
 
@@ -433,7 +458,7 @@ onMounted(async () => {
   const [health, me] = await Promise.all([
     $fetch<{ comfy?: { ok?: boolean } }>('/api/health').catch(() => ({ comfy: { ok: false } })),
     $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean }>('/api/auth/me').catch(() => ({ user: null })),
-    loadLibrary().catch(() => applyLibrary({ locked: false, unlocked: true, folders: [], clips: [] }))
+    loadLibrary().catch(() => applyLibrary({ folders: [], clips: [], stills: [] }))
   ])
   comfyOk.value = Boolean(health.comfy?.ok)
   userName.value = me.user?.name || me.user?.email || ''
@@ -442,7 +467,11 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   stopTimer()
-  source?.close()
+  stopListen()
+})
+
+watch(folderId, () => {
+  applyThumbnailDefault()
 })
 
 function toast(message: string) {
@@ -458,12 +487,12 @@ function resetImage() {
   preview.value = ''
   imageWidth.value = 0
   imageHeight.value = 0
-  if (fileInput.value) fileInput.value.value = ''
 }
 
 function readFile(next: File) {
   file.value = next
   preview.value = URL.createObjectURL(next)
+  applyThumbnailDefault()
   const img = new Image()
   img.onload = () => {
     imageWidth.value = img.naturalWidth
@@ -472,16 +501,32 @@ function readFile(next: File) {
   img.src = preview.value
 }
 
-function onFile(event: Event) {
-  const input = event.target as HTMLInputElement
-  const next = input.files?.[0]
-  if (next) readFile(next)
+function onPickedImage(next: File) {
+  readFile(next)
+  pickerOpen.value = false
+}
+
+async function persistDroppedStill(next: File) {
+  if (!currentFolder.value?.unlocked) {
+    toast('Unlock this folder before adding stills.')
+    return
+  }
+  const body = new FormData()
+  body.append('image', next)
+  body.append('folderId', folderId.value)
+  try {
+    applyLibrary(await $fetch('/api/library/stills', { method: 'POST', body }))
+  } catch (error: any) {
+    toast(error?.data?.statusMessage || 'Could not save still to the library')
+  }
 }
 
 function onDrop(event: DragEvent) {
   dragging.value = false
   const next = event.dataTransfer?.files?.[0]
-  if (next) readFile(next)
+  if (!next) return
+  readFile(next)
+  void persistDroppedStill(next)
 }
 
 function startTimer() {
@@ -505,26 +550,12 @@ function rerun(item: LibraryClip) {
   aspect.value = (item.aspect as AspectId) || 'auto'
   hideThumbnail.value = item.hideThumbnail
   folderId.value = item.folderId
-  toast('Settings restored. Drop the same still if it is not already loaded.')
+  toast('Settings restored. Choose the same still if it is not already loaded.')
 }
 
-async function addFolder() {
-  const name = newFolderName.value.trim()
-  if (!name) return
+async function unlockFolder(id: string) {
   try {
-    const folder = await $fetch<LibraryFolder>('/api/library/folders', { method: 'POST', body: { name } })
-    newFolderName.value = ''
-    await loadLibrary()
-    folderId.value = folder.id
-    browseFolderId.value = folder.id
-  } catch (error: any) {
-    toast(error?.data?.statusMessage || error?.statusMessage || 'Could not create folder')
-  }
-}
-
-async function unlockLibrary() {
-  try {
-    const data = await $fetch('/api/library/unlock', { method: 'POST', body: { password: unlockPassword.value } })
+    const data = await $fetch('/api/library/unlock', { method: 'POST', body: { password: unlockPassword.value, folderId: id } })
     unlockPassword.value = ''
     applyLibrary(data)
   } catch (error: any) {
@@ -532,29 +563,14 @@ async function unlockLibrary() {
   }
 }
 
-async function lockLibrary() {
+async function lockFolder(id: string) {
   try {
-    applyLibrary(await $fetch('/api/library/lock', { method: 'POST' }))
+    applyLibrary(await $fetch('/api/library/lock', { method: 'POST', body: { folderId: id } }))
   } catch {
     await loadLibrary()
   }
 }
 
-async function savePassword() {
-  try {
-    const data = await $fetch('/api/library/password', {
-      method: 'PUT',
-      body: { password: nextPassword.value, currentPassword: currentPassword.value }
-    })
-    currentPassword.value = ''
-    nextPassword.value = ''
-    applyLibrary(data)
-    toast(libraryLocked.value ? 'Library password updated.' : 'Library password saved.')
-  } catch (error: any) {
-    toast(error?.data?.statusMessage || error?.statusMessage || 'Could not update password')
-  }
-}
-
 function openClip(item: LibraryClip) {
   videoUrl.value = `/api/library/clips/${item.id}/video`
   awaitingReveal.value = item.hideThumbnail
@@ -590,8 +606,8 @@ function revealAndPlay() {
 
 async function generate() {
   if (!file.value || !prompt.value.trim()) return
-  if (libraryLocked.value && !libraryUnlocked.value) {
-    toast('Unlock the library before generating.')
+  if (!currentFolder.value?.unlocked) {
+    toast('Unlock the selected folder before generating.')
     return
   }
   busy.value = true