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/test/components/galleryRelatedStrip.spec.js

@@ -0,0 +1,73 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+
+import RelatedStrip from '../../src/components/modal/RelatedStrip.vue'
+import { useModalStore } from '../../src/stores/modal.js'
+import { freshPinia, mountComponent } from '../support/mountComponent.js'
+
+function stubFetch(handler) {
+  globalThis.fetch = vi.fn(async (url) => {
+    const { status, body } = handler(url)
+    return {
+      ok: status >= 200 && status < 300,
+      status, statusText: String(status),
+      text: async () => JSON.stringify(body),
+    }
+  })
+}
+
+describe('RelatedStrip (modal "more like this")', () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => { vi.useRealTimers(); vi.restoreAllMocks() })
+
+  it('stays hidden and never fetches when the image has no embedding', async () => {
+    const pinia = freshPinia()
+    useModalStore().current = { id: 1, has_embedding: false }
+    const fetchSpy = vi.fn()
+    globalThis.fetch = fetchSpy
+    const w = mountComponent(RelatedStrip, { pinia })
+    await vi.advanceTimersByTimeAsync(500)
+    expect(fetchSpy).not.toHaveBeenCalled()
+    expect(w.find('.fc-related').exists()).toBe(false)
+  })
+
+  it('deferred-fetches and renders similar thumbs for an embedded image', async () => {
+    const pinia = freshPinia()
+    useModalStore().current = { id: 1, has_embedding: true }
+    stubFetch(() => ({
+      status: 200,
+      body: { images: [{ id: 2, thumbnail_url: '/t2' }, { id: 3, thumbnail_url: '/t3' }] },
+    }))
+    const w = mountComponent(RelatedStrip, { pinia })
+    // Nothing before the defer elapses (modal image gets priority).
+    expect(globalThis.fetch).not.toHaveBeenCalled()
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    expect(globalThis.fetch).toHaveBeenCalledTimes(1)
+    expect(w.findAll('.fc-related__item').length).toBe(2)
+  })
+
+  it('collapses silently when the similar fetch returns nothing', async () => {
+    const pinia = freshPinia()
+    useModalStore().current = { id: 1, has_embedding: true }
+    stubFetch(() => ({ status: 200, body: { images: [] } }))
+    const w = mountComponent(RelatedStrip, { pinia })
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    expect(w.find('.fc-related').exists()).toBe(false)
+  })
+
+  it('clicking a thumb opens that image in the modal', async () => {
+    const pinia = freshPinia()
+    const modal = useModalStore()
+    modal.current = { id: 1, has_embedding: true }
+    const openSpy = vi.spyOn(modal, 'open').mockResolvedValue()
+    stubFetch(() => ({ status: 200, body: { images: [{ id: 7, thumbnail_url: '/t7' }] } }))
+    const w = mountComponent(RelatedStrip, { pinia })
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    await w.find('.fc-related__item').trigger('click')
+    expect(openSpy).toHaveBeenCalledWith(7)
+  })
+})

frontend/test/gallery.spec.js

@@ -122,6 +122,28 @@ describe('gallery store: composable filter', () => {
     expect(s.facets.total).toBe(4)
   })
 
+  it('similar_to routes applyFilterFromQuery to the /similar endpoint, not scroll', async () => {
+    const s = useGalleryStore()
+    const urls = []
+    stubFetch((url) => {
+      urls.push(url)
+      if (url.includes('/api/gallery/similar')) {
+        return { status: 200, body: { images: [{ id: 9 }], next_cursor: null, date_groups: [] } }
+      }
+      return { status: 200, body: EMPTY }
+    })
+    await s.applyFilterFromQuery({ similar_to: '5', tag_id: '3' })
+    expect(s.filter.similar_to).toBe(5)
+    const sim = decodeURIComponent(urls.find((u) => u.includes('/api/gallery/similar')))
+    expect(sim).toContain('similar_to=5')
+    expect(sim).toContain('limit=100')
+    expect(sim).toContain('tag_id=3')          // scope composes
+    expect(s.images.map((i) => i.id)).toEqual([9])
+    expect(s.hasMore).toBe(false)              // ranked + bounded → no pages
+    expect(urls.some((u) => u.includes('/api/gallery/scroll'))).toBe(false)
+    expect(urls.some((u) => u.includes('/api/gallery/timeline'))).toBe(false)
+  })
+
   it('loadInitial issues exactly one scroll request at the initial limit', async () => {
     const s = useGalleryStore()
     const urls = []
@@ -154,6 +176,11 @@ describe('filterToQuery / cloneFilter', () => {
     expect(q.sort).toBeUndefined()  // newest is the default → omitted
   })
 
+  it('serializes similar_to', () => {
+    expect(filterToQuery({ tag_ids: [], similar_to: 42 }).similar_to).toBe('42')
+    expect(filterToQuery({ tag_ids: [], similar_to: null }).similar_to).toBeUndefined()
+  })
+
   it('cloneFilter copies refine fields and detaches tag_ids', () => {
     const orig = {
       tag_ids: [1], artist_id: 2, media_type: 'image', sort: 'oldest',