From a5cb684d3411a3ee9df5514237956b8de0b7f7a3 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 26 May 2026 20:49:20 -0400
Subject: [PATCH] =?UTF-8?q?feat(post-modal):=20PostImageGrid=20=E2=80=94?=
 =?UTF-8?q?=20fixed-cell=20grid=20(auto-fill=20220px+,=204:3=20aspect-cove?=
 =?UTF-8?q?r)=20inside=20PostModal;=20click=20opens=20ImageViewer=20scoped?=
 =?UTF-8?q?=20to=20the=20post's=20images=20via=20modalStore.open(id,=20{?=
 =?UTF-8?q?=20postImageIds=20})?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/posts/PostImageGrid.vue    | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 frontend/src/components/posts/PostImageGrid.vue

diff --git a/frontend/src/components/posts/PostImageGrid.vue b/frontend/src/components/posts/PostImageGrid.vue
new file mode 100644
index 0000000..c77620f
--- /dev/null
+++ b/frontend/src/components/posts/PostImageGrid.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="fc-post-grid">
+    <button
+      v-for="(t, idx) in thumbnails"
+      :key="t.image_id"
+      type="button"
+      class="fc-post-grid__cell"
+      :aria-label="`Open image ${idx + 1} of ${thumbnails.length}`"
+      @click="openImage(t.image_id, idx)"
+    >
+      <img
+        :src="t.thumbnail_url"
+        :alt="`thumbnail ${idx + 1}`"
+        loading="lazy"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useModalStore } from '../../stores/modal.js'
+
+const props = defineProps({
+  thumbnails: { type: Array, required: true },  // [{ image_id, thumbnail_url, ... }]
+})
+
+const modal = useModalStore()
+
+const imageIds = computed(() => props.thumbnails.map(t => t.image_id))
+
+function openImage (id, idx) {
+  modal.open(id, { postImageIds: imageIds.value, initialIndex: idx })
+}
+</script>
+
+<style scoped>
+.fc-post-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 6px;
+}
+.fc-post-grid__cell {
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  background: rgb(var(--v-theme-background));
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.fc-post-grid__cell:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 0 2px rgb(var(--v-theme-accent));
+}
+.fc-post-grid__cell img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+</style>