bvandeusen/FabledCurator
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 35 Wiki Activity

feat(artist): tab split (Overview/Settings) so DangerZone is reachable without exhausting the infinite-scroll image grid — Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Browse Source
This commit is contained in:
Bryan Van Deusen
2026-05-25 22:32:07 -04:00
parent 52d7905c43
commit 770bcf3aa6
1 changed files with 88 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ArtistView.vue
+88 -55
View File
@@ -45,69 +45,92 @@
>Credential health · FC-3b</v-chip> >Credential health · FC-3b</v-chip>
</div> </div>
<section v-if="store.overview.cooccurring_tags.length" class="fc-artist__sec"> <!-- Tabs split (2026-05-25): Settings was previously slotted at the
<h2 class="fc-h2">Frequent tags</h2> bottom of the page after the infinite-scroll image grid, which
<div class="fc-artist__tags"> made it effectively unreachable for any artist with more than
<v-chip a couple of pages of content. The Settings tab now hosts
v-for="t in store.overview.cooccurring_tags" :key="t.id" destructive admin actions (artist+content cascade-delete) and
size="small" @click="openTag(t.id)" any future per-artist management UI. v-tabs is `position:
>{{ t.name }} <span class="fc-artist__tagc">{{ t.count }}</span></v-chip> sticky; top: 64px` (under the 64px AppShell TopNav) so it
</div> stays parked while the gallery scrolls. -->
</section> <v-tabs
v-model="tab" color="accent" class="mb-4"
style="position: sticky; top: 64px; z-index: 4;
background: rgb(var(--v-theme-surface));"
>
<v-tab value="overview">Overview</v-tab>
<v-tab value="settings">Settings</v-tab>
</v-tabs>
<section v-if="store.overview.activity.length" class="fc-artist__sec"> <v-window v-model="tab">
<h2 class="fc-h2">Activity</h2> <v-window-item value="overview">
<svg class="fc-artist__spark" :viewBox="`0 0 ${sparkW} ${sparkH}`" <section v-if="store.overview.cooccurring_tags.length" class="fc-artist__sec">
preserveAspectRatio="none" role="img" aria-label="posts over time"> <h2 class="fc-h2">Frequent tags</h2>
<polyline :points="sparkPoints" fill="none" <div class="fc-artist__tags">
stroke="rgb(var(--v-theme-accent))" stroke-width="2" /> <v-chip
</svg> v-for="t in store.overview.cooccurring_tags" :key="t.id"
</section> size="small" @click="openTag(t.id)"
>{{ t.name }} <span class="fc-artist__tagc">{{ t.count }}</span></v-chip>
</div>
</section>
<section v-if="store.overview.sources.length" class="fc-artist__sec"> <section v-if="store.overview.activity.length" class="fc-artist__sec">
<div class="fc-artist__sec-head"> <h2 class="fc-h2">Activity</h2>
<h2 class="fc-h2">Sources</h2> <svg class="fc-artist__spark" :viewBox="`0 0 ${sparkW} ${sparkH}`"
<RouterLink preserveAspectRatio="none" role="img" aria-label="posts over time">
:to="`/subscriptions?artist_id=${store.overview.id}`" <polyline :points="sparkPoints" fill="none"
class="fc-artist__manage" stroke="rgb(var(--v-theme-accent))" stroke-width="2" />
>Manage subscriptions →</RouterLink> </svg>
</div> </section>
<v-table density="compact">
<thead>
<tr><th>Platform</th><th>URL</th><th class="text-right">Images</th></tr>
</thead>
<tbody>
<tr v-for="s in store.overview.sources" :key="s.id">
<td>{{ s.platform }}</td>
<td class="fc-artist__url">{{ s.url }}</td>
<td class="text-right">{{ s.image_count }}</td>
</tr>
</tbody>
</v-table>
</section>
<section class="fc-artist__sec"> <section v-if="store.overview.sources.length" class="fc-artist__sec">
<h2 class="fc-h2">Images</h2> <div class="fc-artist__sec-head">
<MasonryGrid <h2 class="fc-h2">Sources</h2>
:items="store.images" <RouterLink
:loading="store.imagesLoading" :to="`/subscriptions?artist_id=${store.overview.id}`"
:has-more="store.hasMoreImages" class="fc-artist__manage"
@load-more="store.loadMoreImages(slug)" >Manage subscriptions →</RouterLink>
@open="openImage" </div>
/> <v-table density="compact">
</section> <thead>
<tr><th>Platform</th><th>URL</th><th class="text-right">Images</th></tr>
</thead>
<tbody>
<tr v-for="s in store.overview.sources" :key="s.id">
<td>{{ s.platform }}</td>
<td class="fc-artist__url">{{ s.url }}</td>
<td class="text-right">{{ s.image_count }}</td>
</tr>
</tbody>
</v-table>
</section>
<ArtistDangerZone <section class="fc-artist__sec">
:slug="slug" <h2 class="fc-h2">Images</h2>
:artist-id="store.overview.id" <MasonryGrid
:artist-name="store.overview.name" :items="store.images"
/> :loading="store.imagesLoading"
:has-more="store.hasMoreImages"
@load-more="store.loadMoreImages(slug)"
@open="openImage"
/>
</section>
</v-window-item>
<v-window-item value="settings">
<ArtistDangerZone
:slug="slug"
:artist-id="store.overview.id"
:artist-name="store.overview.name"
/>
</v-window-item>
</v-window>
</template> </template>
</v-container> </v-container>
</template> </template>
<script setup> <script setup>
import { computed, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { useRoute, useRouter, RouterLink } from 'vue-router' import { useRoute, useRouter, RouterLink } from 'vue-router'
import { useArtistStore } from '../stores/artist.js' import { useArtistStore } from '../stores/artist.js'
import { useModalStore } from '../stores/modal.js' import { useModalStore } from '../stores/modal.js'
@@ -120,8 +143,18 @@ const store = useArtistStore()
const modal = useModalStore() const modal = useModalStore()
const slug = computed(() => route.params.slug) const slug = computed(() => route.params.slug)
// Per-artist tab — defaults to Overview. Settings tab hosts destructive
// admin actions (DangerZone). Switching artists resets to Overview so the
// destructive surface isn't re-shown by accident when navigating between
// artists.
const tab = ref('overview')
watch(slug, (s) => { if (s) store.load(s) }, { immediate: true }) watch(slug, (s) => {
if (s) {
store.load(s)
tab.value = 'overview'
}
}, { immediate: true })
const dateRange = computed(() => { const dateRange = computed(() => {
const r = store.overview?.date_range const r = store.overview?.date_range