feat(gallery): visual 'more like this' UI (Phase 3 frontend)

Modal 'Related' strip (RelatedStrip.vue) — top-12 similar thumbs, fetched on
its own DEFERRED, single-flighted path (200ms after the modal is up) so it
never blocks or slows the modal; collapses silently on empty/slow/error and is
hidden when the image has no embedding (has_embedding flag). 'See all similar'
closes the modal and navigates the gallery to ?similar_to=<id>.

Gallery store: similar_to filter field + loadSimilar() (ranked, hasMore=false,
no timeline); applyFilterFromQuery routes similar-mode to /similar with the
scope filters composed; cloneFilter/filterToQuery carry similar_to. Filter bar:
clearable 'Similar to #id' chip, sort hidden in similar-mode; timeline sidebar
hidden too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/gallery/GalleryFilterBar.vue

@@ -38,6 +38,12 @@
         prepend-icon="mdi-account"
         @click:close="clearArtist"
       >{{ store.artistLabel || `Artist #${store.filter.artist_id}` }}</v-chip>
+      <v-chip
+        v-if="store.filter.similar_to"
+        size="small" closable color="accent" variant="tonal"
+        prepend-icon="mdi-image-multiple"
+        @click:close="clearSimilar"
+      >Similar to #{{ store.filter.similar_to }}</v-chip>
     </div>
 
     <v-spacer />
@@ -52,7 +58,9 @@
       <v-btn value="video" size="small">Videos</v-btn>
     </v-btn-toggle>
 
+    <!-- Sort is meaningless in similar-mode (results are distance-ranked). -->
     <v-select
+      v-if="!store.filter.similar_to"
       :model-value="store.filter.sort"
       :items="SORTS"
       density="compact" hide-details variant="outlined"
@@ -114,6 +122,7 @@ const hasActiveFilters = computed(() =>
   store.filter.artist_id != null ||
   store.filter.media_type != null ||
   store.filter.sort !== 'newest' ||
+  store.filter.similar_to != null ||
   hasRefineFilters.value
 )
 
@@ -190,6 +199,7 @@ function clearArtist() {
   store.noteArtistLabel(null)
   pushFilter((n) => { n.artist_id = null })
 }
+function clearSimilar() { pushFilter((n) => { n.similar_to = null }) }
 function setMedia(m) { pushFilter((n) => { n.media_type = m }) }
 function setSort(s) { pushFilter((n) => { n.sort = s }) }
 function clearAll() { router.push({ name: 'gallery', query: {} }) }

frontend/src/components/modal/ImageViewer.vue

@@ -51,6 +51,9 @@
         <aside v-if="modal.current" class="fc-viewer__side">
           <ProvenancePanel />
           <TagPanel />
+          <!-- Non-blocking: fetches its own similar set after the modal is up;
+               collapses silently if empty/slow/failed (see RelatedStrip). -->
+          <RelatedStrip />
         </aside>
       </div>
     </div>
@@ -65,6 +68,7 @@ import ImageCanvas from './ImageCanvas.vue'
 import VideoCanvas from './VideoCanvas.vue'
 import TagPanel from './TagPanel.vue'
 import ProvenancePanel from './ProvenancePanel.vue'
+import RelatedStrip from './RelatedStrip.vue'
 
 const emit = defineEmits(['close'])
 

frontend/src/components/modal/RelatedStrip.vue

@@ -0,0 +1,133 @@
+<template>
+  <!-- Collapses entirely unless the source has an embedding AND we're loading
+       or have results — so a slow/empty/failed fetch leaves no trace and never
+       affects the modal. -->
+  <div v-if="show" class="fc-related">
+    <div class="fc-related__head">
+      <span class="fc-related__title">Related</span>
+      <v-btn
+        size="x-small" variant="text" color="accent"
+        :disabled="loading || !results.length"
+        @click="seeAll"
+      >See all similar</v-btn>
+    </div>
+    <div class="fc-related__row">
+      <template v-if="loading">
+        <div v-for="n in 6" :key="n" class="fc-related__skel" />
+      </template>
+      <button
+        v-for="img in results" :key="img.id"
+        class="fc-related__item" type="button"
+        @click="openImage(img.id)"
+      >
+        <img :src="img.thumbnail_url" :alt="`image ${img.id}`" loading="lazy" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useApi } from '../../composables/useApi.js'
+import { useModalStore } from '../../stores/modal.js'
+
+// Deferred so the modal's main image gets network/decode priority — the strip
+// is a nice-to-have and must never block or slow the modal load.
+const DEFER_MS = 200
+const STRIP_LIMIT = 12
+
+const api = useApi()
+const router = useRouter()
+const modal = useModalStore()
+
+const results = ref([])
+const loading = ref(false)
+
+const hasEmbedding = computed(() => modal.current?.has_embedding === true)
+const show = computed(() => hasEmbedding.value && (loading.value || results.value.length > 0))
+
+let seq = 0
+let timer = null
+
+async function fetchSimilar(id) {
+  const mine = ++seq
+  loading.value = true
+  results.value = []
+  try {
+    const body = await api.get('/api/gallery/similar', {
+      params: { similar_to: id, limit: STRIP_LIMIT },
+    })
+    if (mine !== seq) return
+    results.value = body.images || []
+  } catch {
+    if (mine === seq) results.value = []  // quietly collapse on error
+  } finally {
+    if (mine === seq) loading.value = false
+  }
+}
+
+// Re-fetch whenever the modal lands on a new embedded image. modal.current is
+// null while the next image loads, so this also clears the strip during
+// prev/next nav and repopulates once the new payload arrives.
+watch(
+  () => (hasEmbedding.value ? modal.current?.id : null),
+  (id) => {
+    if (timer) { clearTimeout(timer); timer = null }
+    seq++              // cancel any in-flight fetch
+    results.value = []
+    loading.value = false
+    if (!id) return
+    timer = setTimeout(() => fetchSimilar(id), DEFER_MS)
+  },
+  { immediate: true },
+)
+onBeforeUnmount(() => { if (timer) clearTimeout(timer) })
+
+function openImage(id) {
+  modal.open(id)
+}
+
+function seeAll() {
+  const id = modal.current?.id
+  if (!id) return
+  modal.close()
+  router.push({ name: 'gallery', query: { similar_to: String(id) } })
+}
+</script>
+
+<style scoped>
+.fc-related {
+  padding: 12px;
+  border-top: 1px solid rgb(var(--v-theme-surface-light));
+}
+.fc-related__head {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 8px;
+}
+.fc-related__title {
+  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.fc-related__row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+.fc-related__item {
+  display: block; padding: 0; border: 0; background: none;
+  cursor: pointer; border-radius: 4px; overflow: hidden;
+  aspect-ratio: 1; width: 100%;
+}
+.fc-related__item img {
+  width: 100%; height: 100%; object-fit: cover; display: block;
+  background: rgb(var(--v-theme-surface-light));
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+.fc-related__item:hover img { transform: scale(1.05); filter: brightness(1.1); }
+.fc-related__skel {
+  aspect-ratio: 1; border-radius: 4px;
+  background: rgb(var(--v-theme-surface-light));
+  opacity: 0.5;
+}
+</style>