From c07effb59331c4808e29ce6e4b672d7a14947299 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 26 May 2026 16:00:02 -0400
Subject: [PATCH] =?UTF-8?q?feat(artist-view):=20ArtistPostsTab=20=E2=80=94?=
 =?UTF-8?q?=20PostCard=20infinite-scroll=20list,=20artist=5Fid=20pinned,?=
 =?UTF-8?q?=20no=20filter=20bar;=20mirrors=20PostsView=20mechanics?=
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/artist/ArtistPostsTab.vue  | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 frontend/src/components/artist/ArtistPostsTab.vue

diff --git a/frontend/src/components/artist/ArtistPostsTab.vue b/frontend/src/components/artist/ArtistPostsTab.vue
new file mode 100644
index 0000000..b575531
--- /dev/null
+++ b/frontend/src/components/artist/ArtistPostsTab.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="fc-artist-posts">
+    <v-alert v-if="store.error" type="error" variant="tonal" closable class="mb-3">
+      {{ String(store.error) }}
+    </v-alert>
+
+    <div v-if="store.loading && store.items.length === 0" class="fc-artist-posts__loading">
+      <v-progress-circular indeterminate color="accent" size="36" />
+    </div>
+
+    <div v-else-if="store.items.length === 0 && store.done" class="fc-artist-posts__empty">
+      <p>No posts for this artist yet. Switch to
+        <a href="#" @click.prevent="$emit('switch-tab', 'gallery')">Gallery</a>
+        to see imported images, or visit
+        <RouterLink to="/subscriptions">Subscriptions</RouterLink>
+        to start capturing posts.
+      </p>
+    </div>
+
+    <div v-else>
+      <PostCard v-for="p in store.items" :key="p.id" :post="p" />
+      <div ref="sentinel" class="fc-artist-posts__sentinel">
+        <v-progress-circular v-if="store.loading" indeterminate color="accent" size="24" />
+        <span v-else-if="store.done" class="fc-artist-posts__end">End of stream</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import { usePostsStore } from '../../stores/posts.js'
+import PostCard from '../posts/PostCard.vue'
+
+const props = defineProps({
+  artistId: { type: Number, required: true },
+})
+
+defineEmits(['switch-tab'])
+
+const store = usePostsStore()
+const sentinel = ref(null)
+let observer = null
+
+async function reload () {
+  await store.loadInitial({ artist_id: props.artistId, platform: null })
+}
+
+watch(() => props.artistId, reload)
+
+onMounted(async () => {
+  await reload()
+  observer = new IntersectionObserver((entries) => {
+    if (entries.some(e => e.isIntersecting)) {
+      store.loadMore()
+    }
+  }, { rootMargin: '400px 0px' })
+  if (sentinel.value) observer.observe(sentinel.value)
+})
+
+onUnmounted(() => {
+  if (observer) observer.disconnect()
+})
+</script>
+
+<style scoped>
+.fc-artist-posts {
+  max-width: 900px;
+  margin: 0 auto;
+}
+.fc-artist-posts__loading,
+.fc-artist-posts__empty {
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.fc-artist-posts__sentinel {
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem 0;
+  min-height: 2rem;
+}
+.fc-artist-posts__end {
+  color: rgb(var(--v-theme-on-surface-variant));
+  font-size: 0.85rem;
+}
+</style>