From cce014be3ad839da33181f19041cd16ea79558a8 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 26 May 2026 16:00:14 -0400
Subject: [PATCH] =?UTF-8?q?feat(artist-view):=20ArtistGalleryTab=20?=
 =?UTF-8?q?=E2=80=94=20MasonryGrid=20wired=20to=20the=20artist=20store's?=
 =?UTF-8?q?=20existing=20loadMoreImages;=20modal-open=20preserves=20=3Ftab?=
 =?UTF-8?q?=3D.=20No=20global=20gallery-store=20coupling=20(avoids=20cross?=
 =?UTF-8?q?-pollution=20into=20/gallery)?=
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>
---
 .../components/artist/ArtistGalleryTab.vue    | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 frontend/src/components/artist/ArtistGalleryTab.vue

diff --git a/frontend/src/components/artist/ArtistGalleryTab.vue b/frontend/src/components/artist/ArtistGalleryTab.vue
new file mode 100644
index 0000000..0cc6b7c
--- /dev/null
+++ b/frontend/src/components/artist/ArtistGalleryTab.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="fc-artist-gallery">
+    <MasonryGrid
+      :items="store.images"
+      :loading="store.imagesLoading"
+      :has-more="store.hasMoreImages"
+      @load-more="store.loadMoreImages(props.slug)"
+      @open="openImage"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useArtistStore } from '../../stores/artist.js'
+import { useModalStore } from '../../stores/modal.js'
+import MasonryGrid from '../discovery/MasonryGrid.vue'
+
+const props = defineProps({
+  slug: { type: String, required: true },
+})
+
+const store = useArtistStore()
+const modal = useModalStore()
+const route = useRoute()
+const router = useRouter()
+
+onMounted(() => {
+  const initial = parseInt(route.query.image, 10)
+  if (!isNaN(initial)) modal.open(initial)
+})
+
+watch(() => route.query.image, (q) => {
+  const id = parseInt(q, 10)
+  if (!isNaN(id) && id !== modal.currentImageId) modal.open(id)
+  else if (isNaN(id) && modal.currentImageId !== null) modal.close()
+})
+
+function openImage (id) {
+  router.push({ query: { ...route.query, image: id } })
+}
+</script>
+
+<style scoped>
+.fc-artist-gallery { min-width: 0; }
+</style>