feat(fc2a): add GalleryGrid with infinite scroll and date headers

Grid uses CSS grid auto-fill with 160px minimums so it adapts naturally from phone to large displays. Date headers render once per (year, month) group; the API's date_groups payload tells us where to slot them without client-side grouping. IntersectionObserver with rootMargin: 600px loads the next page well before the sentinel reaches the viewport. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-14 12:32:11 -04:00
parent da89fe6be2
commit 708c033627
1 changed files with 99 additions and 0 deletions
@@ -0,0 +1,99 @@
+<template>
+  <div class="fc-gallery-grid">
+    <template v-for="group in store.dateGroups" :key="`${group.year}-${group.month}`">
+      <h2 class="fc-gallery-grid__date-header" :id="dateHeaderId(group)">
+        {{ monthLabel(group.year, group.month) }}
+      </h2>
+      <div class="fc-gallery-grid__items">
+        <GalleryItem
+          v-for="img in imagesForGroup(group)"
+          :key="img.id" :image="img" @open="$emit('open', img.id)"
+        />
+      </div>
+    </template>
+
+    <div v-if="store.loading" class="fc-gallery-grid__sentinel">
+      <v-progress-circular indeterminate color="accent" size="28" />
+    </div>
+    <div v-else-if="store.hasMore" ref="sentinelEl" class="fc-gallery-grid__sentinel" />
+    <div v-else-if="store.images.length" class="fc-gallery-grid__end text-caption">
+      End of gallery.
+    </div>
+
+    <v-alert
+      v-if="store.error" type="error" variant="tonal" closable class="my-4"
+    >
+      Failed to load: {{ store.error }}
+    </v-alert>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useGalleryStore } from '../../stores/gallery.js'
+import GalleryItem from './GalleryItem.vue'
+
+defineEmits(['open'])
+
+const store = useGalleryStore()
+const sentinelEl = ref(null)
+
+let observer = null
+
+function attachObserver() {
+  if (observer) observer.disconnect()
+  if (!sentinelEl.value) return
+  observer = new IntersectionObserver(([entry]) => {
+    if (entry.isIntersecting && store.hasMore && !store.loading) {
+      store.loadMore()
+    }
+  }, { rootMargin: '600px' })
+  observer.observe(sentinelEl.value)
+}
+
+watch(sentinelEl, attachObserver)
+onMounted(() => attachObserver())
+onUnmounted(() => observer && observer.disconnect())
+
+function dateHeaderId(group) { return `fc-month-${group.year}-${group.month}` }
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+function monthLabel(y, m) { return `${MONTHS[m - 1]} ${y}` }
+
+function imagesForGroup(group) {
+  const ids = new Set(group.image_ids)
+  return store.images.filter(i => ids.has(i.id))
+}
+</script>
+
+<style scoped>
+.fc-gallery-grid {
+  display: flex;
+  flex-direction: column;
+}
+.fc-gallery-grid__date-header {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 20px;
+  font-weight: 500;
+  margin: 24px 0 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgb(var(--v-theme-surface-light));
+  color: rgb(var(--v-theme-on-surface));
+}
+.fc-gallery-grid__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 8px;
+}
+.fc-gallery-grid__sentinel {
+  display: flex; justify-content: center; align-items: center;
+  padding: 32px 0;
+  min-height: 60px;
+}
+.fc-gallery-grid__end {
+  text-align: center;
+  padding: 32px 0;
+  color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface)));
+}
+</style>