From 26e47a86cb2b3b21a69f82faf906a2161806f7f5 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 4 Jun 2026 16:24:52 -0400
Subject: [PATCH] fix(gallery): render similar-mode results (flat list when no
 date groups)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 'See all similar' takeover fetched /api/gallery/similar fine (200, ~100
results) but the grid showed nothing: GalleryGrid renders ONLY by iterating
store.dateGroups, and similar-mode returns date_groups=[] (results are ranked
by cosine distance, not chronological). Zero groups → zero tiles despite
store.images being full. Add a flat fallback: when there are no date groups
but images exist, render them as one ungrouped list in ranked order (no date
headers). The modal Related strip was unaffected (it renders its images
directly). Test locks both the flat and grouped paths.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/gallery/GalleryGrid.vue    | 13 +++++
 frontend/test/components/galleryGrid.spec.js  | 47 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 frontend/test/components/galleryGrid.spec.js

diff --git a/frontend/src/components/gallery/GalleryGrid.vue b/frontend/src/components/gallery/GalleryGrid.vue
index 29db64f..27ac70c 100644
--- a/frontend/src/components/gallery/GalleryGrid.vue
+++ b/frontend/src/components/gallery/GalleryGrid.vue
@@ -15,6 +15,19 @@
       </div>
     </template>
 
+    <!-- Similar-mode (and any non-date-grouped result set) returns no date
+         groups — the results are ranked, not chronological. Render them as a
+         single flat list in their given order rather than nothing. -->
+    <div
+      v-if="!store.dateGroups.length && store.images.length"
+      class="fc-gallery-grid__items"
+    >
+      <GalleryItem
+        v-for="img in store.images"
+        :key="img.id" :image="img" @open="$emit('open', img.id)"
+      />
+    </div>
+
     <div v-if="store.loading" class="fc-gallery-grid__sentinel">
       <v-progress-circular indeterminate color="accent" size="28" />
     </div>
diff --git a/frontend/test/components/galleryGrid.spec.js b/frontend/test/components/galleryGrid.spec.js
new file mode 100644
index 0000000..5710a7a
--- /dev/null
+++ b/frontend/test/components/galleryGrid.spec.js
@@ -0,0 +1,47 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import GalleryGrid from '../../src/components/gallery/GalleryGrid.vue'
+import { useGalleryStore } from '../../src/stores/gallery.js'
+import { freshPinia } from '../support/mountComponent.js'
+
+const GIStub = { name: 'GalleryItem', props: ['image'], template: '<div class="gi" />' }
+
+function mountGrid(pinia) {
+  return mount(GalleryGrid, {
+    global: {
+      plugins: [pinia],
+      stubs: { GalleryItem: GIStub, RouterLink: { template: '<a><slot /></a>' } },
+    },
+  })
+}
+
+describe('GalleryGrid', () => {
+  it('renders a flat ranked list when there are no date groups (similar mode)', () => {
+    const pinia = freshPinia()
+    const store = useGalleryStore()
+    // similar-mode shape: images present, date_groups empty, no cursor.
+    store.images = [
+      { id: 1, thumbnail_url: '/a' },
+      { id: 2, thumbnail_url: '/b' },
+      { id: 3, thumbnail_url: '/c' },
+    ]
+    store.dateGroups = []
+    const w = mountGrid(pinia)
+    expect(w.findAll('.gi').length).toBe(3)
+  })
+
+  it('renders grouped by date when date groups are present', () => {
+    const pinia = freshPinia()
+    const store = useGalleryStore()
+    store.images = [
+      { id: 1, thumbnail_url: '/a' },
+      { id: 2, thumbnail_url: '/b' },
+    ]
+    store.dateGroups = [{ year: 2026, month: 6, image_ids: [1, 2] }]
+    const w = mountGrid(pinia)
+    expect(w.find('.fc-gallery-grid__date-header').exists()).toBe(true)
+    expect(w.findAll('.gi').length).toBe(2)
+  })
+})