Show small stitch-frame thumbs when a video collection is expanded.

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

pages/index.vue

@@ -1145,15 +1145,17 @@
                 </div>
                 <ul v-if="expandedFamilies[entry.group.key] && entry.group.parts.length > 1" class="mt-3 space-y-2 border-t border-white/5 pt-3">
                   <li
-                    v-for="item in chronologicalParts(entry.group.parts)"
+                    v-for="(item, partIndex) in chronologicalParts(entry.group.parts)"
                     :key="item.id"
                     class="flex gap-3 rounded-xl border border-white/5 bg-black/20 p-2"
                   >
-                    <button type="button" class="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg bg-zinc-900" @click="openClip(item)">
-                      <span v-if="item.hideThumbnail" class="sensitive-glow block h-full w-full" />
-                      <img v-else-if="item.hasThumbnail" :src="`/api/library/clips/${item.id}/thumb`" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover">
-                      <span v-else class="block h-full w-full bg-zinc-800" />
-                    </button>
+                    <ClipFrameThumbs
+                      :hidden="item.hideThumbnail"
+                      :still-id="item.hideThumbnail || partIndex !== 0 ? undefined : item.stillId"
+                      :from-clip-id="item.hideThumbnail ? undefined : previousChronoClipId(entry.group.parts, partIndex)"
+                      :clip-id="item.id"
+                      :show-first-frame="!item.hideThumbnail && partIndex > 0"
+                    />
                     <div class="min-w-0 flex-1">
                       <div class="flex items-start gap-2">
                         <input
@@ -2093,6 +2095,11 @@ function chronologicalParts(parts: LibraryClip[]) {
   })
 }
 
+function previousChronoClipId(parts: LibraryClip[], index: number) {
+  if (index <= 0) return undefined
+  return chronologicalParts(parts)[index - 1]?.id
+}
+
 function collectionTitle(group: { head: LibraryClip; parts: LibraryClip[] }) {
   const named = group.parts.map(part => familyBaseName(part.name || '')).find(name => name)
   return named || group.head.name || group.head.prompt