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>

components/ImagePickerModal.vue

@@ -0,0 +1,207 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8" @click.self="emit('close')">
+      <div class="glass w-full max-w-3xl rounded-3xl p-5 sm:p-6">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <h2 class="font-display text-2xl font-bold">Choose an image</h2>
+            <p class="mt-1 text-sm text-zinc-400">Pick a still from this folder or upload a new one.</p>
+          </div>
+          <button type="button" class="rounded-full border border-white/10 px-3 py-1 text-sm text-zinc-400 hover:text-white" @click="emit('close')">Close</button>
+        </div>
+
+        <div class="mt-5 flex flex-wrap gap-2">
+          <button
+            v-for="folder in folders"
+            :key="folder.id"
+            type="button"
+            class="rounded-full border px-3 py-1 text-xs"
+            :class="activeFolderId === folder.id ? 'border-amber-300 bg-amber-400/10 text-amber-100' : 'border-white/10 text-zinc-400'"
+            @click="activeFolderId = folder.id"
+          >
+            {{ folder.name }}
+            <span v-if="folder.protected" class="ml-1">{{ folder.unlocked ? '· unlocked' : '· locked' }}</span>
+          </button>
+        </div>
+
+        <form v-if="current && current.protected && !current.unlocked" class="mt-6 space-y-3" @submit.prevent="unlock">
+          <p class="text-sm text-zinc-400">This folder is password protected.</p>
+          <input v-model="password" 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="rounded-xl bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950">Unlock folder</button>
+        </form>
+
+        <template v-else>
+          <div
+            class="mt-5 cursor-pointer rounded-2xl border border-dashed border-white/15 bg-zinc-950/40 p-6 text-center 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"
+            @click="fileInput?.click()"
+          >
+            <p class="font-medium">Upload a new still</p>
+            <p class="mt-1 text-sm text-zinc-500">PNG, JPG, or WEBP · saved into {{ current?.name || 'this folder' }}</p>
+            <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFile">
+          </div>
+
+          <p v-if="!visibleStills.length && !visibleClipThumbs.length" class="mt-6 text-sm text-zinc-500">No uploaded stills in this folder yet.</p>
+          <div v-if="visibleStills.length || visibleClipThumbs.length" class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+            <button
+              v-for="still in visibleStills"
+              :key="still.id"
+              type="button"
+              class="group overflow-hidden rounded-2xl border border-white/10 bg-zinc-950 text-left hover:border-amber-300/50"
+              @click="pickStill(still)"
+            >
+              <img :src="`/api/library/stills/${still.id}`" alt="" class="h-28 w-full object-cover">
+              <div class="flex items-center justify-between gap-2 px-3 py-2">
+                <span class="truncate text-xs text-zinc-400">{{ still.filename }}</span>
+                <span class="text-[10px] text-red-300 opacity-0 group-hover:opacity-100" @click.stop="removeStill(still)">Delete</span>
+              </div>
+            </button>
+            <button
+              v-for="clip in visibleClipThumbs"
+              :key="'clip-' + clip.id"
+              type="button"
+              class="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950 text-left hover:border-amber-300/50"
+              @click="pickClip(clip)"
+            >
+              <img :src="`/api/library/clips/${clip.id}/thumb`" alt="" class="h-28 w-full object-cover">
+              <div class="px-3 py-2">
+                <span class="truncate text-xs text-zinc-400">From a clip</span>
+              </div>
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+export interface PickerFolder {
+  id: string
+  name: string
+  protected: boolean
+  unlocked: boolean
+  thumbnailDefault: boolean
+}
+
+export interface PickerStill {
+  id: string
+  folderId: string
+  filename: string
+  width: number
+  height: number
+  createdAt: number
+}
+
+export interface PickerClip {
+  id: string
+  folderId: string
+  hideThumbnail: boolean
+  prompt: string
+}
+
+const props = defineProps<{
+  folders: PickerFolder[]
+  stills: PickerStill[]
+  clips: PickerClip[]
+  folderId: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  updated: [payload: unknown]
+  error: [message: string]
+  select: [file: File]
+}>()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const dragging = ref(false)
+const password = ref('')
+const activeFolderId = ref(props.folderId)
+
+function onKey(event: KeyboardEvent) {
+  if (event.key === 'Escape') emit('close')
+}
+
+onMounted(() => window.addEventListener('keydown', onKey))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
+
+watch(() => props.folderId, (id) => {
+  if (id && !props.folders.some(folder => folder.id === activeFolderId.value)) {
+    activeFolderId.value = id
+  }
+})
+
+const current = computed(() => props.folders.find(folder => folder.id === activeFolderId.value) || props.folders[0])
+const visibleStills = computed(() => props.stills.filter(still => still.folderId === (current.value?.id || activeFolderId.value)))
+const visibleClipThumbs = computed(() => props.clips.filter(clip => clip.folderId === (current.value?.id || activeFolderId.value) && !clip.hideThumbnail))
+
+async function unlock() {
+  try {
+    emit('updated', await $fetch('/api/library/unlock', {
+      method: 'POST',
+      body: { password: password.value, folderId: current.value?.id }
+    }))
+    password.value = ''
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Unlock failed')
+  }
+}
+
+async function ingest(file: File) {
+  const body = new FormData()
+  body.append('image', file)
+  body.append('folderId', current.value?.id || activeFolderId.value)
+  try {
+    emit('updated', await $fetch('/api/library/stills', { method: 'POST', body }))
+    emit('select', file)
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not save image')
+  }
+}
+
+function onFile(event: Event) {
+  const input = event.target as HTMLInputElement
+  const next = input.files?.[0]
+  if (next) void ingest(next)
+  input.value = ''
+}
+
+function onDrop(event: DragEvent) {
+  dragging.value = false
+  const next = event.dataTransfer?.files?.[0]
+  if (next) void ingest(next)
+}
+
+async function pickClip(clip: PickerClip) {
+  try {
+    const blob = await $fetch<Blob>(`/api/library/clips/${clip.id}/thumb`, { responseType: 'blob' })
+    const file = new File([blob], `${clip.id}.png`, { type: blob.type || 'image/png' })
+    emit('select', file)
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not load that still')
+  }
+}
+
+async function pickStill(still: PickerStill) {
+  try {
+    const blob = await $fetch<Blob>(`/api/library/stills/${still.id}`, { responseType: 'blob' })
+    const file = new File([blob], still.filename, { type: blob.type || 'image/png' })
+    emit('select', file)
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not load that still')
+  }
+}
+
+async function removeStill(still: PickerStill) {
+  if (!confirm(`Remove “${still.filename}” from this folder?`)) return
+  try {
+    emit('updated', await $fetch(`/api/library/stills/${still.id}`, { method: 'DELETE' }))
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not delete image')
+  }
+}
+</script>

components/SettingsModal.vue

@@ -0,0 +1,226 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8" @click.self="emit('close')">
+      <div class="glass w-full max-w-2xl rounded-3xl p-5 sm:p-6">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <h2 class="font-display text-2xl font-bold">Settings</h2>
+            <p class="mt-1 text-sm text-zinc-400">Library folders, passwords, and thumbnail defaults for this account.</p>
+          </div>
+          <button type="button" class="rounded-full border border-white/10 px-3 py-1 text-sm text-zinc-400 hover:text-white" @click="emit('close')">Close</button>
+        </div>
+
+        <section class="mt-6 space-y-3">
+          <div class="flex items-center justify-between gap-3">
+            <h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">Folders</h3>
+            <span class="text-xs text-zinc-500">{{ folders.length }} total</span>
+          </div>
+
+          <div
+            v-for="folder in folders"
+            :key="folder.id"
+            class="rounded-2xl border border-white/10 bg-zinc-950/50 p-4 space-y-3"
+          >
+            <template v-if="drafts[folder.id]">
+            <div class="flex flex-wrap items-center gap-2">
+              <input
+                v-model="drafts[folder.id].name"
+                class="min-w-[10rem] flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
+                @keydown.enter.prevent="rename(folder)"
+              >
+              <button type="button" class="rounded-xl border border-white/15 px-3 py-2 text-sm hover:border-amber-300/50" @click="rename(folder)">Rename</button>
+              <button type="button" class="rounded-xl border border-red-400/30 px-3 py-2 text-sm text-red-300 hover:border-red-300" @click="remove(folder)">Delete</button>
+            </div>
+
+            <div class="grid gap-2 sm:grid-cols-2">
+              <label class="flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-white/10 px-3 py-2 text-sm">
+                <span>Thumbnail default</span>
+                <input
+                  type="checkbox"
+                  class="peer sr-only"
+                  :checked="folder.thumbnailDefault"
+                  @change="setThumbnail(folder, ($event.target as HTMLInputElement).checked)"
+                >
+                <span class="relative inline-flex h-6 w-11 shrink-0 items-center">
+                  <span class="absolute inset-0 rounded-full bg-zinc-700 transition" :class="folder.thumbnailDefault ? 'bg-amber-400' : 'bg-zinc-700'" />
+                  <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition" :class="folder.thumbnailDefault ? 'translate-x-5' : ''" />
+                </span>
+              </label>
+
+              <label class="flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-white/10 px-3 py-2 text-sm">
+                <span>{{ drafts[folder.id].protect ? 'Password on' : 'Password off' }}</span>
+                <input
+                  type="checkbox"
+                  class="peer sr-only"
+                  :checked="drafts[folder.id].protect"
+                  @change="toggleProtect(folder, ($event.target as HTMLInputElement).checked)"
+                >
+                <span class="relative inline-flex h-6 w-11 shrink-0 items-center">
+                  <span class="absolute inset-0 rounded-full transition" :class="drafts[folder.id].protect ? 'bg-amber-400' : 'bg-zinc-700'" />
+                  <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition" :class="drafts[folder.id].protect ? 'translate-x-5' : ''" />
+                </span>
+              </label>
+            </div>
+
+            <form v-if="drafts[folder.id].protect || folder.protected" class="grid gap-2 sm:grid-cols-2" @submit.prevent="savePassword(folder)">
+              <p v-if="folder.protected && !drafts[folder.id].protect" class="sm:col-span-2 text-sm text-zinc-400">
+                Enter the current password to turn protection off.
+              </p>
+              <input
+                v-if="folder.protected"
+                v-model="drafts[folder.id].currentPassword"
+                type="password"
+                class="rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
+                placeholder="Current password"
+              >
+              <input
+                v-if="drafts[folder.id].protect"
+                v-model="drafts[folder.id].password"
+                type="password"
+                class="rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
+                :placeholder="folder.protected ? 'New password (blank to keep)' : 'Set a password'"
+              >
+              <button type="submit" class="rounded-xl border border-white/15 px-3 py-2 text-sm hover:border-amber-300/50 sm:col-span-2">
+                {{ folder.protected && !drafts[folder.id].protect ? 'Remove password' : folder.protected ? 'Update folder password' : 'Protect folder' }}
+              </button>
+            </form>
+            <p v-if="folder.protected && folder.unlocked" class="text-xs text-emerald-300">Unlocked in this session.</p>
+            <p v-else-if="folder.protected" class="text-xs text-amber-200">Locked · clips and stills stay hidden until you unlock it.</p>
+            </template>
+          </div>
+
+          <form class="flex flex-wrap gap-2" @submit.prevent="addFolder">
+            <input
+              v-model="newName"
+              class="min-w-[10rem] flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
+              placeholder="New folder name"
+            >
+            <button type="submit" class="rounded-xl bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950">Add folder</button>
+          </form>
+        </section>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+export interface SettingsFolder {
+  id: string
+  name: string
+  createdAt: number
+  thumbnailDefault: boolean
+  protected: boolean
+  unlocked: boolean
+}
+
+const props = defineProps<{
+  folders: SettingsFolder[]
+}>()
+
+const emit = defineEmits<{
+  close: []
+  updated: [payload: unknown]
+  error: [message: string]
+}>()
+
+const newName = ref('')
+const drafts = reactive<Record<string, { name: string; protect: boolean; password: string; currentPassword: string }>>({})
+
+function onKey(event: KeyboardEvent) {
+  if (event.key === 'Escape') emit('close')
+}
+
+onMounted(() => window.addEventListener('keydown', onKey))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
+
+watch(() => props.folders, (folders) => {
+  for (const folder of folders) {
+    if (!drafts[folder.id]) {
+      drafts[folder.id] = {
+        name: folder.name,
+        protect: folder.protected,
+        password: '',
+        currentPassword: ''
+      }
+    } else {
+      drafts[folder.id].name = folder.name
+    }
+  }
+}, { immediate: true, deep: true })
+
+async function addFolder() {
+  const name = newName.value.trim()
+  if (!name) return
+  try {
+    await $fetch('/api/library/folders', { method: 'POST', body: { name } })
+    newName.value = ''
+    emit('updated', await $fetch('/api/library'))
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || error?.statusMessage || 'Could not create folder')
+  }
+}
+
+async function rename(folder: SettingsFolder) {
+  const name = drafts[folder.id]?.name?.trim()
+  if (!name || name === folder.name) return
+  try {
+    emit('updated', await $fetch(`/api/library/folders/${folder.id}`, { method: 'PATCH', body: { name } }))
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not rename folder')
+  }
+}
+
+async function setThumbnail(folder: SettingsFolder, thumbnailDefault: boolean) {
+  try {
+    emit('updated', await $fetch(`/api/library/folders/${folder.id}`, {
+      method: 'PATCH',
+      body: { thumbnailDefault }
+    }))
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not update thumbnail default')
+  }
+}
+
+function toggleProtect(folder: SettingsFolder, on: boolean) {
+  drafts[folder.id].protect = on
+  if (!on && folder.protected) {
+    drafts[folder.id].password = ''
+  }
+}
+
+async function savePassword(folder: SettingsFolder) {
+  const draft = drafts[folder.id]
+  try {
+    if (!draft.protect && folder.protected) {
+      emit('updated', await $fetch(`/api/library/folders/${folder.id}`, {
+        method: 'PATCH',
+        body: { password: '', currentPassword: draft.currentPassword }
+      }))
+    } else if (draft.protect) {
+      if (!folder.protected && !draft.password.trim()) {
+        emit('error', 'Set a password with at least 4 characters.')
+        return
+      }
+      if (!folder.protected || draft.password.trim()) {
+        emit('updated', await $fetch(`/api/library/folders/${folder.id}`, {
+          method: 'PATCH',
+          body: { password: draft.password, currentPassword: draft.currentPassword }
+        }))
+      }
+    }
+    draft.password = ''
+    draft.currentPassword = ''
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not update folder password')
+  }
+}
+
+async function remove(folder: SettingsFolder) {
+  if (!confirm(`Delete “${folder.name}” and everything inside it?`)) return
+  try {
+    emit('updated', await $fetch(`/api/library/folders/${folder.id}`, { method: 'DELETE' }))
+  } catch (error: any) {
+    emit('error', error?.data?.statusMessage || 'Could not delete folder')
+  }
+}
+</script>

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>
         </div>
-        </label>
 
         <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>
+          <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>
-              <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>
+            <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

server/api/generate.post.ts

@@ -35,7 +35,7 @@ export default defineEventHandler(async (event) => {
     : Math.floor(Math.random() * 2_147_483_647)
   const length = frameLength(Number(fields.duration || 5))
   const hideThumbnail = fields.hideThumbnail === 'true'
-  assertLibraryAccess(event)
+  const ownerKey = libraryOwnerKey(event)
   const library = publicLibrary(event)
   const folderId = library.folders.some(folder => folder.id === fields.folderId)
     ? fields.folderId
@@ -43,11 +43,21 @@ export default defineEventHandler(async (event) => {
   if (!folderId) {
     throw createError({ statusCode: 400, statusMessage: 'Create a library folder before generating' })
   }
+  assertFolderAccess(event, folderId)
+  await saveStill({
+    ownerKey,
+    folderId,
+    filename: image.filename,
+    data: image.data,
+    width,
+    height
+  })
 
   const job = createJob()
   job.maxStep = steps
   job.hideThumbnail = hideThumbnail
   job.library = {
+    ownerKey,
     folderId,
     hideThumbnail,
     prompt,

server/api/library/clips/[id].delete.ts

@@ -1,6 +1,8 @@
 export default defineEventHandler(async (event) => {
-  assertLibraryAccess(event)
-  const id = getRouterParam(event, 'id')
-  await deleteClip(String(id))
+  const { owner } = assertLibraryOwner(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const clip = getClip(owner, id)
+  assertFolderAccess(event, clip.folderId)
+  await deleteClip(owner, id)
   return { ok: true }
 })

server/api/library/clips/[id]/thumb.get.ts

@@ -1,19 +1,19 @@
 import { existsSync, readFileSync } from 'node:fs'
 
 export default defineEventHandler((event) => {
-  assertLibraryAccess(event)
+  const { owner } = assertLibraryOwner(event)
   const id = String(getRouterParam(event, 'id') || '')
-  const clip = getClip(id)
+  const clip = getClip(owner, id)
+  assertFolderAccess(event, clip.folderId)
   if (clip.hideThumbnail) {
     throw createError({ statusCode: 404, statusMessage: 'Thumbnail hidden' })
   }
-  const path = clipThumbPath(clip.id)
+  const path = clipThumbPath(owner, clip.id)
   if (!existsSync(path)) {
     throw createError({ statusCode: 404, statusMessage: 'Thumbnail not found' })
   }
   const buf = readFileSync(path)
-  const png = buf[0] === 0x89 && buf[1] === 0x50
-  setHeader(event, 'Content-Type', png ? 'image/png' : 'image/jpeg')
+  setHeader(event, 'Content-Type', imageContentType(buf))
   setHeader(event, 'Cache-Control', 'private, max-age=3600')
   return buf
 })

server/api/library/clips/[id]/video.get.ts

@@ -1,10 +1,11 @@
 import { existsSync, readFileSync } from 'node:fs'
 
 export default defineEventHandler((event) => {
-  assertLibraryAccess(event)
+  const { owner } = assertLibraryOwner(event)
   const id = String(getRouterParam(event, 'id') || '')
-  const clip = getClip(id)
-  const path = clipVideoPath(clip.id)
+  const clip = getClip(owner, id)
+  assertFolderAccess(event, clip.folderId)
+  const path = clipVideoPath(owner, clip.id)
   if (!existsSync(path)) {
     throw createError({ statusCode: 404, statusMessage: 'Video file is missing' })
   }

server/api/library/folders.post.ts

@@ -1,6 +1,6 @@
 export default defineEventHandler(async (event) => {
-  assertLibraryAccess(event)
+  const { owner } = assertLibraryOwner(event)
   const body = await readBody<{ name?: string }>(event)
-  const folder = await createFolder(String(body?.name || ''))
-  return folder
+  const folder = await createFolder(owner, String(body?.name || ''))
+  return publicFolder(event, folder)
 })

server/api/library/folders/[id].delete.ts

@@ -1,5 +1,7 @@
 export default defineEventHandler(async (event) => {
-  assertLibraryAccess(event)
-  const id = getRouterParam(event, 'id')
-  return await deleteFolder(String(id))
+  const { owner } = assertLibraryOwner(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const result = await deleteFolder(owner, id)
+  clearFolderUnlock(event, id)
+  return { ...result, ...publicLibrary(event) }
 })

server/api/library/folders/[id].patch.ts

@@ -1,6 +1,22 @@
 export default defineEventHandler(async (event) => {
-  assertLibraryAccess(event)
-  const id = getRouterParam(event, 'id')
-  const body = await readBody<{ name?: string }>(event)
-  return await renameFolder(String(id), String(body?.name || ''))
+  const { owner } = assertLibraryOwner(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const body = await readBody<{
+    name?: string
+    thumbnailDefault?: boolean
+    password?: string | null
+    currentPassword?: string
+  }>(event)
+  const folder = await updateFolder(owner, id, {
+    name: body?.name,
+    thumbnailDefault: body?.thumbnailDefault,
+    password: body?.password,
+    currentPassword: body?.currentPassword
+  })
+  if (body?.password) {
+    setFolderUnlock(event, folder.id, passwordVersion(folder.passwordHash))
+  } else if (body?.password === '') {
+    clearFolderUnlock(event, folder.id)
+  }
+  return publicLibrary(event)
 })

server/api/library/lock.post.ts

@@ -1,4 +1,5 @@
-export default defineEventHandler((event) => {
-  clearLibraryUnlock(event)
+export default defineEventHandler(async (event) => {
+  const body = await readBody<{ folderId?: string }>(event).catch(() => ({} as { folderId?: string }))
+  clearFolderUnlock(event, body?.folderId)
   return publicLibrary(event)
 })

server/api/library/password.put.ts

@@ -1,14 +1,19 @@
 export default defineEventHandler(async (event) => {
-  const body = await readBody<{ password?: string; currentPassword?: string }>(event)
-  if (isLibraryLocked() && !(await verifyLibraryPassword(String(body?.currentPassword || '')))) {
-    throw createError({ statusCode: 401, statusMessage: 'Current library password is incorrect' })
+  const { owner } = assertLibraryOwner(event)
+  const body = await readBody<{ folderId?: string; password?: string; currentPassword?: string }>(event)
+  const folderId = String(body?.folderId || '')
+  if (!folderId) {
+    throw createError({ statusCode: 400, statusMessage: 'Choose a folder to protect' })
   }
-  const next = String(body?.password || '').trim()
-  if (next && next.length < 4) {
-    throw createError({ statusCode: 400, statusMessage: 'Use at least 4 characters, or leave blank to remove the password' })
+  await updateFolder(owner, folderId, {
+    password: body?.password ?? '',
+    currentPassword: body?.currentPassword
+  })
+  const folder = assertLibraryOwner(event).catalog.folders.find(item => item.id === folderId)
+  if (folder?.passwordHash) {
+    setFolderUnlock(event, folder.id, passwordVersion(folder.passwordHash))
+  } else {
+    clearFolderUnlock(event, folderId)
   }
-  const version = await setLibraryPassword(next || null)
-  if (next) setLibraryUnlock(event, version)
-  else clearLibraryUnlock(event)
   return publicLibrary(event)
 })

server/api/library/stills.post.ts

@@ -0,0 +1,36 @@
+export default defineEventHandler(async (event) => {
+  const form = await readMultipartFormData(event)
+  if (!form?.length) {
+    throw createError({ statusCode: 400, statusMessage: 'Expected an image upload' })
+  }
+  const fields: Record<string, string> = {}
+  let image: { filename: string; data: Buffer; type?: string } | null = null
+  for (const part of form) {
+    if (part.name === 'image' && part.filename && part.data?.length) {
+      image = { filename: part.filename, data: part.data, type: part.type }
+    } else if (part.name && part.data) {
+      fields[part.name] = part.data.toString('utf8')
+    }
+  }
+  if (!image) {
+    throw createError({ statusCode: 400, statusMessage: 'An image is required' })
+  }
+  const { owner } = assertLibraryOwner(event)
+  const library = publicLibrary(event)
+  const folderId = library.folders.some(folder => folder.id === fields.folderId)
+    ? fields.folderId
+    : library.folders[0]?.id
+  if (!folderId) {
+    throw createError({ statusCode: 400, statusMessage: 'Create a library folder first' })
+  }
+  assertFolderAccess(event, folderId)
+  const still = await saveStill({
+    ownerKey: owner,
+    folderId,
+    filename: image.filename,
+    data: image.data,
+    width: Number(fields.width || 0),
+    height: Number(fields.height || 0)
+  })
+  return { still, ...publicLibrary(event) }
+})

server/api/library/stills/[id].delete.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const { owner } = assertLibraryOwner(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const still = getStill(owner, id)
+  assertFolderAccess(event, still.folderId)
+  await deleteStill(owner, id)
+  return publicLibrary(event)
+})

server/api/library/stills/[id].get.ts

@@ -0,0 +1,16 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+export default defineEventHandler((event) => {
+  const { owner } = assertLibraryOwner(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const still = getStill(owner, id)
+  assertFolderAccess(event, still.folderId)
+  const path = stillPath(owner, still.id)
+  if (!existsSync(path)) {
+    throw createError({ statusCode: 404, statusMessage: 'Image file is missing' })
+  }
+  const buf = readFileSync(path)
+  setHeader(event, 'Content-Type', imageContentType(buf))
+  setHeader(event, 'Cache-Control', 'private, max-age=3600')
+  return buf
+})

server/api/library/unlock.post.ts

@@ -1,12 +1,11 @@
 export default defineEventHandler(async (event) => {
-  const body = await readBody<{ password?: string }>(event)
+  const { owner } = assertLibraryOwner(event)
+  const body = await readBody<{ password?: string; folderId?: string }>(event)
   const password = String(body?.password || '')
   if (!password) {
     throw createError({ statusCode: 400, statusMessage: 'Password is required' })
   }
-  if (!(await verifyLibraryPassword(password))) {
-    throw createError({ statusCode: 401, statusMessage: 'Incorrect library password' })
-  }
-  setLibraryUnlock(event, currentPasswordVersion())
+  const unlocked = await unlockMatchingFolders(owner, password, body?.folderId)
+  setFolderUnlocks(event, Object.fromEntries(unlocked.map(folder => [folder.id, passwordVersion(folder.passwordHash)])))
   return publicLibrary(event)
 })

server/utils/jobs.ts

@@ -30,6 +30,7 @@ export interface Job {
   clipId?: string
   hideThumbnail?: boolean
   library?: {
+    ownerKey: string
     folderId: string
     hideThumbnail: boolean
     prompt: string

server/utils/library.ts

@@ -1,3 +1,4 @@
+import { createHash } from 'node:crypto'
 import { existsSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { randomBytes, scrypt, timingSafeEqual } from 'node:crypto'
@@ -10,6 +11,8 @@ export interface LibraryFolder {
   id: string
   name: string
   createdAt: number
+  thumbnailDefault: boolean
+  passwordHash: string | null
 }
 
 export interface LibraryClip {
@@ -26,72 +29,150 @@ export interface LibraryClip {
   createdAt: number
 }
 
+export interface LibraryStill {
+  id: string
+  folderId: string
+  filename: string
+  width: number
+  height: number
+  hash: string
+  createdAt: number
+}
+
+export interface PublicFolder {
+  id: string
+  name: string
+  createdAt: number
+  thumbnailDefault: boolean
+  protected: boolean
+  unlocked: boolean
+}
+
 interface Catalog {
-  passwordHash: string | null
   folders: LibraryFolder[]
   clips: LibraryClip[]
+  stills: LibraryStill[]
 }
 
+const writeChains = new Map<string, Promise<unknown>>()
+
 function libraryRoot() {
   const config = useRuntimeConfig()
   return (config.libraryDir || process.env.LIBRARY_DIR || '/data/library').replace(/\/$/, '')
 }
 
-function catalogPath() {
-  return join(libraryRoot(), 'catalog.json')
+export function libraryOwnerKey(event: H3Event) {
+  const user = getSessionUser(event)
+  const raw = user?.sub || user?.email || (!authEnabled() ? 'local' : '')
+  if (!raw) {
+    throw createError({ statusCode: 401, statusMessage: 'Authentication required' })
+  }
+  return createHash('sha256').update(raw).digest('hex').slice(0, 24)
 }
 
-function ensureRoot() {
-  const root = libraryRoot()
-  mkdirSync(join(root, 'files'), { recursive: true })
-  return root
+function ownerRoot(owner: string) {
+  return join(libraryRoot(), 'users', owner)
+}
+
+function catalogPath(owner: string) {
+  return join(ownerRoot(owner), 'catalog.json')
 }
 
 function emptyCatalog(): Catalog {
   return {
-    passwordHash: null,
-    folders: [{ id: 'inbox', name: 'Inbox', createdAt: Date.now() }],
-    clips: []
+    folders: [{
+      id: 'inbox',
+      name: 'Inbox',
+      createdAt: Date.now(),
+      thumbnailDefault: true,
+      passwordHash: null
+    }],
+    clips: [],
+    stills: []
   }
 }
 
-let writeChain = Promise.resolve()
+function normalizeFolder(folder: LibraryFolder): LibraryFolder {
+  return {
+    id: folder.id,
+    name: folder.name,
+    createdAt: folder.createdAt || Date.now(),
+    thumbnailDefault: folder.thumbnailDefault !== false,
+    passwordHash: folder.passwordHash || null
+  }
+}
 
-function readCatalog(): Catalog {
-  ensureRoot()
-  if (!existsSync(catalogPath())) {
-    const created = emptyCatalog()
-    writeFileSync(catalogPath(), JSON.stringify(created, null, 2))
-    return created
+function normalizeCatalog(parsed: Partial<Catalog> & { passwordHash?: string | null }): Catalog {
+  const folders = Array.isArray(parsed.folders) && parsed.folders.length
+    ? parsed.folders.map(normalizeFolder)
+    : emptyCatalog().folders
+  if (parsed.passwordHash) {
+    for (const folder of folders) {
+      if (!folder.passwordHash) folder.passwordHash = parsed.passwordHash
+    }
+  }
+  return {
+    folders,
+    clips: Array.isArray(parsed.clips) ? parsed.clips : [],
+    stills: Array.isArray(parsed.stills) ? parsed.stills : []
+  }
+}
+
+function migrateLegacy(owner: string) {
+  const dest = catalogPath(owner)
+  if (existsSync(dest)) return
+  mkdirSync(ownerRoot(owner), { recursive: true })
+  const legacyCatalog = join(libraryRoot(), 'catalog.json')
+  const legacyFiles = join(libraryRoot(), 'files')
+  if (!existsSync(legacyCatalog)) {
+    writeFileSync(dest, JSON.stringify(emptyCatalog(), null, 2))
+    return
   }
   try {
-    const parsed = JSON.parse(readFileSync(catalogPath(), 'utf8')) as Catalog
-    if (!Array.isArray(parsed.folders) || !parsed.folders.length) {
-      parsed.folders = emptyCatalog().folders
+    const catalog = normalizeCatalog(JSON.parse(readFileSync(legacyCatalog, 'utf8')))
+    writeFileSync(dest, JSON.stringify(catalog, null, 2))
+    if (existsSync(legacyFiles) && !existsSync(join(ownerRoot(owner), 'files'))) {
+      renameSync(legacyFiles, join(ownerRoot(owner), 'files'))
     }
-    parsed.clips = Array.isArray(parsed.clips) ? parsed.clips : []
-    parsed.passwordHash = parsed.passwordHash || null
-    return parsed
+    renameSync(legacyCatalog, `${legacyCatalog}.migrated`)
   } catch {
-    return emptyCatalog()
+    writeFileSync(dest, JSON.stringify(emptyCatalog(), null, 2))
   }
 }
 
-function writeCatalog(catalog: Catalog) {
-  ensureRoot()
-  const tmp = catalogPath() + '.tmp'
-  writeFileSync(tmp, JSON.stringify(catalog, null, 2))
-  renameSync(tmp, catalogPath())
+function ensureOwner(owner: string) {
+  mkdirSync(join(ownerRoot(owner), 'files'), { recursive: true })
+  mkdirSync(join(ownerRoot(owner), 'stills'), { recursive: true })
+  migrateLegacy(owner)
 }
 
-function mutate<T>(fn: (catalog: Catalog) => T): Promise<T> {
-  const run = writeChain.then(() => {
-    const catalog = readCatalog()
+function readCatalog(owner: string): Catalog {
+  ensureOwner(owner)
+  try {
+    return normalizeCatalog(JSON.parse(readFileSync(catalogPath(owner), 'utf8')))
+  } catch {
+    const created = emptyCatalog()
+    writeFileSync(catalogPath(owner), JSON.stringify(created, null, 2))
+    return created
+  }
+}
+
+function writeCatalog(owner: string, catalog: Catalog) {
+  ensureOwner(owner)
+  const tmp = catalogPath(owner) + '.tmp'
+  writeFileSync(tmp, JSON.stringify(catalog, null, 2))
+  renameSync(tmp, catalogPath(owner))
+}
+
+function mutate<T>(owner: string, fn: (catalog: Catalog) => T): Promise<T> {
+  const prev = writeChains.get(owner) || Promise.resolve()
+  const run = prev.then(() => {
+    const catalog = readCatalog(owner)
     const result = fn(catalog)
-    writeCatalog(catalog)
+    writeCatalog(owner, catalog)
     return result
   })
-  writeChain = run.then(() => undefined, () => undefined)
+  writeChains.set(owner, run.then(() => undefined, () => undefined))
   return run
 }
 
@@ -99,33 +180,13 @@ export function passwordVersion(hash: string | null) {
   return hash ? hash.slice(-24) : 'open'
 }
 
-export function currentPasswordVersion() {
-  return passwordVersion(readCatalog().passwordHash)
-}
-
-export function isLibraryLocked() {
-  return Boolean(readCatalog().passwordHash)
-}
-
-export function libraryUnlocked(event: H3Event) {
-  const catalog = readCatalog()
-  if (!catalog.passwordHash) return true
-  return getLibraryUnlockVersion(event) === passwordVersion(catalog.passwordHash)
-}
-
-export function assertLibraryAccess(event: H3Event) {
-  if (libraryUnlocked(event)) return readCatalog()
-  throw createError({ statusCode: 403, statusMessage: 'Library is locked' })
-}
-
 export async function hashLibraryPassword(password: string) {
   const salt = randomBytes(16)
   const hash = await scryptAsync(password, salt, 64) as Buffer
   return `scrypt:${salt.toString('hex')}:${hash.toString('hex')}`
 }
 
-export async function verifyLibraryPassword(password: string) {
-  const stored = readCatalog().passwordHash
+async function verifyStoredPassword(stored: string | null, password: string) {
   if (!stored) return true
   const parts = stored.split(':')
   if (parts.length !== 3 || parts[0] !== 'scrypt') return false
@@ -135,84 +196,259 @@ export async function verifyLibraryPassword(password: string) {
   return actual.length === expected.length && timingSafeEqual(actual, expected)
 }
 
-export function publicLibrary(event: H3Event) {
-  const catalog = readCatalog()
-  const locked = Boolean(catalog.passwordHash)
-  const unlocked = libraryUnlocked(event)
-  if (locked && !unlocked) {
-    return { locked: true, unlocked: false, folders: [] as LibraryFolder[], clips: [] as LibraryClip[] }
-  }
+function folderUnlocks(event: H3Event) {
+  return getFolderUnlocks(event)
+}
+
+export function folderUnlocked(event: H3Event, folder: LibraryFolder) {
+  if (!folder.passwordHash) return true
+  return folderUnlocks(event)[folder.id] === passwordVersion(folder.passwordHash)
+}
+
+export function publicFolder(event: H3Event, folder: LibraryFolder): PublicFolder {
   return {
-    locked,
-    unlocked: true,
-    folders: catalog.folders,
-    clips: catalog.clips
+    id: folder.id,
+    name: folder.name,
+    createdAt: folder.createdAt,
+    thumbnailDefault: folder.thumbnailDefault,
+    protected: Boolean(folder.passwordHash),
+    unlocked: folderUnlocked(event, folder)
   }
 }
 
-export function createFolder(name: string) {
+export function publicLibrary(event: H3Event) {
+  const owner = libraryOwnerKey(event)
+  const catalog = readCatalog(owner)
+  const folders = catalog.folders.map(folder => publicFolder(event, folder))
+  const unlockedIds = new Set(folders.filter(folder => folder.unlocked).map(folder => folder.id))
+  return {
+    folders,
+    clips: catalog.clips.filter(clip => unlockedIds.has(clip.folderId)),
+    stills: catalog.stills.filter(still => unlockedIds.has(still.folderId))
+  }
+}
+
+export function assertLibraryOwner(event: H3Event) {
+  const owner = libraryOwnerKey(event)
+  return { owner, catalog: readCatalog(owner) }
+}
+
+export function assertFolderAccess(event: H3Event, folderId: string) {
+  const { owner, catalog } = assertLibraryOwner(event)
+  const folder = catalog.folders.find(item => item.id === folderId)
+  if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+  if (!folderUnlocked(event, folder)) {
+    throw createError({ statusCode: 403, statusMessage: 'Folder is locked' })
+  }
+  return { owner, catalog, folder }
+}
+
+export function assertLibraryAccess(event: H3Event) {
+  return assertLibraryOwner(event).catalog
+}
+
+export function createFolder(owner: string, name: string) {
   const trimmed = name.trim().slice(0, 80)
   if (!trimmed) throw createError({ statusCode: 400, statusMessage: 'Folder name is required' })
-  return mutate((catalog) => {
+  return mutate(owner, (catalog) => {
     if (catalog.folders.some(folder => folder.name.toLowerCase() === trimmed.toLowerCase())) {
       throw createError({ statusCode: 409, statusMessage: 'A folder with that name already exists' })
     }
-    const folder: LibraryFolder = { id: crypto.randomUUID(), name: trimmed, createdAt: Date.now() }
+    const folder: LibraryFolder = {
+      id: crypto.randomUUID(),
+      name: trimmed,
+      createdAt: Date.now(),
+      thumbnailDefault: true,
+      passwordHash: null
+    }
     catalog.folders.push(folder)
     return folder
   })
 }
 
-export function renameFolder(id: string, name: string) {
+export function renameFolder(owner: string, id: string, name: string) {
   const trimmed = name.trim().slice(0, 80)
   if (!trimmed) throw createError({ statusCode: 400, statusMessage: 'Folder name is required' })
-  return mutate((catalog) => {
+  return mutate(owner, (catalog) => {
     const folder = catalog.folders.find(item => item.id === id)
     if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+    if (catalog.folders.some(item => item.id !== id && item.name.toLowerCase() === trimmed.toLowerCase())) {
+      throw createError({ statusCode: 409, statusMessage: 'A folder with that name already exists' })
+    }
     folder.name = trimmed
     return folder
   })
 }
 
-export function deleteFolder(id: string) {
-  return mutate((catalog) => {
+export function deleteFolder(owner: string, id: string) {
+  return mutate(owner, (catalog) => {
     if (catalog.folders.length <= 1) {
       throw createError({ statusCode: 400, statusMessage: 'Keep at least one library folder' })
     }
     const folder = catalog.folders.find(item => item.id === id)
     if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
     const clips = catalog.clips.filter(clip => clip.folderId === id)
+    const stills = catalog.stills.filter(still => still.folderId === id)
     catalog.folders = catalog.folders.filter(item => item.id !== id)
     catalog.clips = catalog.clips.filter(clip => clip.folderId !== id)
-    const fallback = catalog.folders[0].id
+    catalog.stills = catalog.stills.filter(still => still.folderId !== id)
     for (const clip of clips) {
-      rmSync(clipDir(clip.id), { recursive: true, force: true })
+      rmSync(clipDir(owner, clip.id), { recursive: true, force: true })
     }
-    return { fallbackFolderId: fallback }
+    for (const still of stills) {
+      rmSync(stillPath(owner, still.id), { force: true })
+    }
+    return { fallbackFolderId: catalog.folders[0].id }
   })
 }
 
-export async function setLibraryPassword(password: string | null) {
-  const hash = password && password.length ? await hashLibraryPassword(password) : null
-  return mutate((catalog) => {
-    catalog.passwordHash = hash
-    return passwordVersion(hash)
+export async function updateFolder(owner: string, id: string, patch: {
+  name?: string
+  thumbnailDefault?: boolean
+  password?: string | null
+  currentPassword?: string
+}) {
+  const catalog = readCatalog(owner)
+  const folder = catalog.folders.find(item => item.id === id)
+  if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+
+  let nextName = folder.name
+  if (patch.name !== undefined) {
+    nextName = patch.name.trim().slice(0, 80)
+    if (!nextName) throw createError({ statusCode: 400, statusMessage: 'Folder name is required' })
+    if (catalog.folders.some(item => item.id !== id && item.name.toLowerCase() === nextName.toLowerCase())) {
+      throw createError({ statusCode: 409, statusMessage: 'A folder with that name already exists' })
+    }
+  }
+
+  let nextHash: string | null | undefined
+  if (patch.password !== undefined) {
+    const next = String(patch.password || '').trim()
+    if (folder.passwordHash && !(await verifyStoredPassword(folder.passwordHash, String(patch.currentPassword || '')))) {
+      throw createError({ statusCode: 401, statusMessage: 'Current folder password is incorrect' })
+    }
+    if (next && next.length < 4) {
+      throw createError({ statusCode: 400, statusMessage: 'Use at least 4 characters, or leave blank to remove the password' })
+    }
+    nextHash = next ? await hashLibraryPassword(next) : null
+  }
+
+  return mutate(owner, (nextCatalog) => {
+    const item = nextCatalog.folders.find(entry => entry.id === id)
+    if (!item) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+    item.name = nextName
+    if (typeof patch.thumbnailDefault === 'boolean') item.thumbnailDefault = patch.thumbnailDefault
+    if (nextHash !== undefined) item.passwordHash = nextHash
+    return item
   })
 }
 
-function clipDir(id: string) {
-  return join(libraryRoot(), 'files', id)
+export async function verifyFolderPassword(owner: string, folderId: string, password: string) {
+  const folder = readCatalog(owner).folders.find(item => item.id === folderId)
+  if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+  if (!folder.passwordHash) return folder
+  if (!(await verifyStoredPassword(folder.passwordHash, password))) {
+    throw createError({ statusCode: 401, statusMessage: 'Incorrect folder password' })
+  }
+  return folder
 }
 
-export function clipVideoPath(id: string) {
-  return join(clipDir(id), 'video.mp4')
+export async function unlockMatchingFolders(owner: string, password: string, folderId?: string) {
+  const catalog = readCatalog(owner)
+  const targets = folderId
+    ? catalog.folders.filter(folder => folder.id === folderId)
+    : catalog.folders.filter(folder => folder.passwordHash)
+  if (folderId && !targets.length) {
+    throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+  }
+  const unlocked: LibraryFolder[] = []
+  for (const folder of targets) {
+    if (!folder.passwordHash || await verifyStoredPassword(folder.passwordHash, password)) {
+      unlocked.push(folder)
+    }
+  }
+  if (!unlocked.length) {
+    throw createError({ statusCode: 401, statusMessage: 'Incorrect folder password' })
+  }
+  return unlocked
 }
 
-export function clipThumbPath(id: string) {
-  return join(clipDir(id), 'thumb')
+function clipDir(owner: string, id: string) {
+  return join(ownerRoot(owner), 'files', id)
+}
+
+export function clipVideoPath(owner: string, id: string) {
+  return join(clipDir(owner, id), 'video.mp4')
+}
+
+export function clipThumbPath(owner: string, id: string) {
+  return join(clipDir(owner, id), 'thumb')
+}
+
+export function stillPath(owner: string, id: string) {
+  return join(ownerRoot(owner), 'stills', id)
+}
+
+function bytesHash(data: Buffer) {
+  return createHash('sha256').update(data).digest('hex')
+}
+
+export async function saveStill(params: {
+  ownerKey: string
+  folderId: string
+  filename: string
+  data: Buffer
+  width?: number
+  height?: number
+}) {
+  const catalog = readCatalog(params.ownerKey)
+  const folder = catalog.folders.find(item => item.id === params.folderId) || catalog.folders[0]
+  if (!folder) throw createError({ statusCode: 400, statusMessage: 'No library folder available' })
+  const hash = bytesHash(params.data)
+  const existing = catalog.stills.find(item => item.folderId === folder.id && item.hash === hash)
+  if (existing) return existing
+  const still: LibraryStill = {
+    id: crypto.randomUUID(),
+    folderId: folder.id,
+    filename: params.filename.slice(0, 120) || 'still.png',
+    width: params.width || 0,
+    height: params.height || 0,
+    hash,
+    createdAt: Date.now()
+  }
+  mkdirSync(join(ownerRoot(params.ownerKey), 'stills'), { recursive: true })
+  writeFileSync(stillPath(params.ownerKey, still.id), params.data)
+  await mutate(params.ownerKey, (next) => {
+    next.stills.unshift(still)
+  })
+  return still
+}
+
+export function getStill(owner: string, id: string) {
+  const still = readCatalog(owner).stills.find(item => item.id === id)
+  if (!still) throw createError({ statusCode: 404, statusMessage: 'Image not found' })
+  return still
+}
+
+export function deleteStill(owner: string, id: string) {
+  return mutate(owner, (catalog) => {
+    const still = catalog.stills.find(item => item.id === id)
+    if (!still) throw createError({ statusCode: 404, statusMessage: 'Image not found' })
+    catalog.stills = catalog.stills.filter(item => item.id !== id)
+    rmSync(stillPath(owner, id), { force: true })
+    return still
+  })
+}
+
+export function imageContentType(buf: Buffer) {
+  if (buf[0] === 0x89 && buf[1] === 0x50) return 'image/png'
+  if (buf[0] === 0xff && buf[1] === 0xd8) return 'image/jpeg'
+  if (buf[0] === 0x52 && buf[1] === 0x49) return 'image/webp'
+  return 'application/octet-stream'
 }
 
 export async function saveClip(params: {
+  ownerKey: string
   folderId: string
   prompt: string
   aspect: string
@@ -225,7 +461,7 @@ export async function saveClip(params: {
   video: Buffer
   thumb?: Buffer | null
 }) {
-  const catalog = readCatalog()
+  const catalog = readCatalog(params.ownerKey)
   const folder = catalog.folders.find(item => item.id === params.folderId) || catalog.folders[0]
   if (!folder) throw createError({ statusCode: 400, statusMessage: 'No library folder available' })
   const clip: LibraryClip = {
@@ -241,29 +477,39 @@ export async function saveClip(params: {
     hideThumbnail: params.hideThumbnail,
     createdAt: Date.now()
   }
-  mkdirSync(clipDir(clip.id), { recursive: true })
-  writeFileSync(clipVideoPath(clip.id), params.video)
+  mkdirSync(clipDir(params.ownerKey, clip.id), { recursive: true })
+  writeFileSync(clipVideoPath(params.ownerKey, clip.id), params.video)
   if (!params.hideThumbnail && params.thumb?.length) {
-    writeFileSync(clipThumbPath(clip.id), params.thumb)
+    writeFileSync(clipThumbPath(params.ownerKey, clip.id), params.thumb)
   }
-  await mutate((next) => {
+  if (params.thumb?.length) {
+    await saveStill({
+      ownerKey: params.ownerKey,
+      folderId: folder.id,
+      filename: `${clip.id}.png`,
+      data: params.thumb,
+      width: params.width,
+      height: params.height
+    })
+  }
+  await mutate(params.ownerKey, (next) => {
     next.clips.unshift(clip)
   })
   return clip
 }
 
-export function getClip(id: string) {
-  const clip = readCatalog().clips.find(item => item.id === id)
+export function getClip(owner: string, id: string) {
+  const clip = readCatalog(owner).clips.find(item => item.id === id)
   if (!clip) throw createError({ statusCode: 404, statusMessage: 'Clip not found' })
   return clip
 }
 
-export function deleteClip(id: string) {
-  return mutate((catalog) => {
+export function deleteClip(owner: string, id: string) {
+  return mutate(owner, (catalog) => {
     const clip = catalog.clips.find(item => item.id === id)
     if (!clip) throw createError({ statusCode: 404, statusMessage: 'Clip not found' })
     catalog.clips = catalog.clips.filter(item => item.id !== id)
-    rmSync(clipDir(id), { recursive: true, force: true })
+    rmSync(clipDir(owner, id), { recursive: true, force: true })
     return clip
   })
 }

server/utils/session.ts

@@ -79,16 +79,50 @@ export function authEnabled() {
   return Boolean(config.public.authEnabled && config.oidcClientId && config.oidcClientSecret)
 }
 
+interface LibraryUnlock {
+  version?: string
+  folders?: Record<string, string>
+}
+
+function readUnlock(event: H3Event): LibraryUnlock {
+  return unseal<LibraryUnlock>(getCookie(event, LIBRARY_COOKIE)) || {}
+}
+
+export function getFolderUnlocks(event: H3Event) {
+  return { ...(readUnlock(event).folders || {}) }
+}
+
+export function setFolderUnlock(event: H3Event, folderId: string, version: string) {
+  const folders = getFolderUnlocks(event)
+  folders[folderId] = version
+  setCookie(event, LIBRARY_COOKIE, seal({ folders }), cookieOpts(event))
+}
+
+export function setFolderUnlocks(event: H3Event, entries: Record<string, string>) {
+  const folders = { ...getFolderUnlocks(event), ...entries }
+  setCookie(event, LIBRARY_COOKIE, seal({ folders }), cookieOpts(event))
+}
+
+export function clearFolderUnlock(event: H3Event, folderId?: string) {
+  if (!folderId) {
+    deleteCookie(event, LIBRARY_COOKIE, { path: '/' })
+    return
+  }
+  const folders = getFolderUnlocks(event)
+  delete folders[folderId]
+  setCookie(event, LIBRARY_COOKIE, seal({ folders }), cookieOpts(event))
+}
+
 export function setLibraryUnlock(event: H3Event, version: string) {
-  setCookie(event, LIBRARY_COOKIE, seal({ version }), cookieOpts(event))
+  setFolderUnlock(event, '*', version)
 }
 
 export function getLibraryUnlockVersion(event: H3Event) {
-  return unseal<{ version?: string }>(getCookie(event, LIBRARY_COOKIE))?.version || null
+  return getFolderUnlocks(event)['*'] || readUnlock(event).version || null
 }
 
 export function clearLibraryUnlock(event: H3Event) {
-  deleteCookie(event, LIBRARY_COOKIE, { path: '/' })
+  clearFolderUnlock(event)
 }
 
 export function publicBaseUrl(event: H3Event) {

server/utils/watch.ts

@@ -60,6 +60,7 @@ export function watchComfyJob(job: Job): Promise<void> {
           try {
             const buffer = await downloadComfyVideo(video)
             const clip = await saveClip({
+              ownerKey: job.library.ownerKey,
               folderId: job.library.folderId,
               prompt: job.library.prompt,
               aspect: job.library.aspect,