From 0f31e846357c728cd71432624e2310d8355c9acd Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 21 May 2026 22:15:28 -0400
Subject: [PATCH] =?UTF-8?q?fc3f:=20ArtistsView=20+=20/artists=20route=20?=
 =?UTF-8?q?=E2=80=94=20search=20+=20platform=20filter=20+=20infinite=20scr?=
 =?UTF-8?q?oll=20grid?=
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>
---
 frontend/src/router.js             |  2 +
 frontend/src/views/ArtistsView.vue | 93 ++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 frontend/src/views/ArtistsView.vue

diff --git a/frontend/src/router.js b/frontend/src/router.js
index 72623bb..b51f37f 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -10,6 +10,7 @@ import SubscriptionsView from './views/SubscriptionsView.vue'
 import CredentialsView from './views/CredentialsView.vue'
 import DownloadsView from './views/DownloadsView.vue'
 import PostsView from './views/PostsView.vue'
+import ArtistsView from './views/ArtistsView.vue'
 
 // The application's front door. `/` redirects here. Changing the front door
 // is a one-line edit (e.g. '/gallery' or '/tags').
@@ -22,6 +23,7 @@ const routes = [
   // FC-2: image backbone
   { path: '/showcase', name: 'showcase', component: ShowcaseView, meta: { title: 'Showcase' } },
   { path: '/gallery',  name: 'gallery',  component: GalleryView,  meta: { title: 'Gallery'  } },
+  { path: '/artists',  name: 'artists',  component: ArtistsView,  meta: { title: 'Artists'  } },
   { path: '/tags',     name: 'tags',     component: TagsView,     meta: { title: 'Tags'     } },
   // Artist detail — no meta.title (reached by clicking an artist, not nav).
   { path: '/artist/:slug', name: 'artist', component: ArtistView },
diff --git a/frontend/src/views/ArtistsView.vue b/frontend/src/views/ArtistsView.vue
new file mode 100644
index 0000000..dc32f82
--- /dev/null
+++ b/frontend/src/views/ArtistsView.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-container fluid class="py-6">
+
+    <div class="fc-artists__controls">
+      <v-text-field
+        v-model="search" density="compact" variant="outlined"
+        prepend-inner-icon="mdi-magnify" hide-details
+        placeholder="Search artists" clearable style="max-width: 320px;"
+      />
+      <v-select
+        v-model="platformModel"
+        :items="platformItems"
+        density="compact" variant="outlined" hide-details
+        placeholder="Platform" clearable style="max-width: 220px;"
+      />
+    </div>
+
+    <v-alert v-if="store.error" type="error" variant="tonal" closable class="my-4">
+      Failed to load: {{ store.error }}
+    </v-alert>
+    <v-alert v-else-if="store.isEmpty" type="info" variant="tonal" class="my-4">
+      No artists match.
+    </v-alert>
+
+    <div class="fc-artists__grid">
+      <ArtistCard v-for="c in store.cards" :key="c.id" :card="c" />
+    </div>
+
+    <div v-if="store.loading" class="fc-artists__sentinel">
+      <v-progress-circular indeterminate color="accent" size="28" />
+    </div>
+    <div v-else-if="store.hasMore" ref="sentinelEl" class="fc-artists__sentinel" />
+  </v-container>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { useArtistDirectoryStore } from '../stores/artistDirectory.js'
+import { usePlatformsStore } from '../stores/platforms.js'
+import ArtistCard from '../components/discovery/ArtistCard.vue'
+
+const store = useArtistDirectoryStore()
+const platformsStore = usePlatformsStore()
+
+const search = ref('')
+const platformModel = ref(null)
+const sentinelEl = ref(null)
+
+const platformItems = ref([])
+
+let debounce = null
+watch(search, (v) => {
+  if (debounce) clearTimeout(debounce)
+  debounce = setTimeout(() => store.setQuery(v || ''), 300)
+})
+watch(platformModel, (v) => store.setPlatform(v || null))
+
+let observer = null
+function attachObserver() {
+  if (observer) observer.disconnect()
+  if (!sentinelEl.value) return
+  observer = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting && store.hasMore && !store.loading) store.loadMore()
+  }, { rootMargin: '600px' })
+  observer.observe(sentinelEl.value)
+}
+watch(sentinelEl, attachObserver)
+
+onMounted(async () => {
+  await platformsStore.loadAll()
+  platformItems.value = (platformsStore.platforms || []).map(p => ({
+    title: p.key, value: p.key,
+  }))
+  store.reset()
+  attachObserver()
+})
+onUnmounted(() => observer && observer.disconnect())
+</script>
+
+<style scoped>
+.fc-artists__controls {
+  display: flex; align-items: center; gap: 16px;
+  flex-wrap: wrap; margin-bottom: 16px;
+}
+.fc-artists__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+.fc-artists__sentinel {
+  display: flex; justify-content: center; padding: 32px 0; min-height: 60px;
+}
+</style>