Make the library details eye hide only that pane's preview.

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

pages/library.vue

@@ -198,8 +198,9 @@
       <aside class="glass w-full shrink-0 overflow-y-auto rounded-3xl p-4 sm:p-5 lg:h-full lg:w-[22rem]">
         <template v-if="focused">
           <div class="relative overflow-hidden rounded-2xl bg-zinc-900">
+            <span v-if="detailsHidden" class="sensitive-glow block aspect-video w-full" />
             <video
-              v-if="focused.kind === 'clip' && previewVideo"
+              v-else-if="focused.kind === 'clip' && previewVideo"
               :src="previewVideo"
               class="aspect-video w-full bg-black object-contain"
               controls
@@ -220,12 +221,12 @@
             <button
               v-if="showPrivacyToggles"
               type="button"
-              class="absolute right-2 top-2 z-10 flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-black/60 text-zinc-100 hover:border-amber-300/50 hover:text-amber-100 disabled:opacity-50"
+              class="absolute right-2 top-2 z-10 flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-black/60 text-zinc-100 hover:border-amber-300/50 hover:text-amber-100"
-              :title="previewHidden ? 'Show in library' : 'Hide in library'"
+              :title="detailsHidden ? 'Show preview' : 'Hide preview'"
-              :aria-label="previewHidden ? 'Show in library' : 'Hide in library'"
+              :aria-label="detailsHidden ? 'Show preview' : 'Hide preview'"
-              @click="togglePreviewHidden"
+              @click.stop="detailsHidden = !detailsHidden"
             >
-              <svg v-if="previewHidden" class="h-4 w-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <svg v-if="detailsHidden" class="h-4 w-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                 <path d="M3 3l18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                 <path d="M10.6 10.7a2.5 2.5 0 0 0 3.7 3.6M9.9 5.2A11 11 0 0 1 12 5c6.5 0 10 7 10 7a18 18 0 0 1-4.1 4.8M6.7 6.8A18 18 0 0 0 2 12s3.5 7 10 7c1.3 0 2.5-.3 3.6-.7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
@@ -391,7 +392,7 @@ const renaming = ref(false)
 const renameDraft = ref('')
 const renameInput = ref<HTMLInputElement | null>(null)
 const deleteBusy = ref(false)
-const hideBusy = ref(false)
+const detailsHidden = ref(false)
 const pendingDelete = ref<{ title: string; name: string; detail?: string; consequence: string; keys: string[] } | null>(null)
 const toasts = ref<Array<{ id: number; message: string }>>([])
 let toastId = 0
@@ -466,11 +467,6 @@ const previewStillSrc = computed(() => {
   const id = focusedPartId.value || focused.value.stillGroup.head.id
   return `/api/library/stills/${id}`
 })
-const previewHidden = computed(() => {
-  const entry = focused.value
-  if (!entry) return false
-  return thumbHidden(entry)
-})
 const focusedParts = computed(() => {
   if (focused.value?.kind === 'clip') return focused.value.group?.parts || []
   return focused.value?.stillGroup?.parts || []
@@ -625,8 +621,10 @@ function onCardClick(entry: LibraryEntry, event: MouseEvent) {
     onSelectClick(entry.key, event)
     return
   }
+  const sameCard = focusedKey.value === entry.key
   focusedKey.value = entry.key
   focusedPartId.value = entry.kind === 'clip' ? (entry.group?.head.id || '') : (entry.stillGroup?.head.id || '')
+  if (!sameCard) detailsHidden.value = thumbHidden(entry)
   cancelRename()
 }
 
@@ -755,45 +753,6 @@ async function saveRename() {
   }
 }
 
-async function togglePreviewHidden() {
-  const entry = focused.value
-  if (!entry || hideBusy.value) return
-  const next = !thumbHidden(entry)
-  applyLocalHide(entry, next)
-  hideBusy.value = true
-  try {
-    if (entry.kind === 'clip' && entry.group) {
-      await $fetch(`/api/library/clips/${entry.group.head.id}`, {
-        method: 'PATCH',
-        body: { hideThumbnail: next, family: true }
-      })
-    } else if (entry.stillGroup) {
-      await $fetch(`/api/library/stills/${entry.stillGroup.head.id}`, {
-        method: 'PATCH',
-        body: { hideInput: next, family: true }
-      })
-    }
-  } catch (error: any) {
-    applyLocalHide(entry, !next)
-    toast(error?.data?.statusMessage || 'Could not update visibility')
-  } finally {
-    hideBusy.value = false
-  }
-}
-
-function applyLocalHide(entry: LibraryEntry, hide: boolean) {
-  if (entry.kind === 'clip' && entry.group) {
-    for (const part of entry.group.parts) {
-      part.hideThumbnail = hide
-      part.hasThumbnail = !hide
-    }
-    return
-  }
-  if (entry.stillGroup) {
-    for (const part of entry.stillGroup.parts) part.hideInput = hide
-  }
-}
-
 function askRemoveFocused() {
   if (!focused.value) return
   askRemoveKeys([focused.value.key])
@@ -885,6 +844,9 @@ watch([folderId, filter], () => {
 watch(search, () => {
   if (scroller.value) scroller.value.scrollTop = 0
 })
+watch(focusedKey, (key) => {
+  if (!key) detailsHidden.value = false
+})
 watch(entries, async () => {
   if (focusedKey.value && !entries.value.some(entry => entry.key === focusedKey.value)) {
     focusedKey.value = ''