221 lines
7.8 KiB
Vue
221 lines
7.8 KiB
Vue
<template>
|
|
<v-container fluid class="py-6">
|
|
<div v-if="store.loading && !store.overview" class="fc-artist__loading">
|
|
<v-progress-circular indeterminate color="accent" size="36" />
|
|
</div>
|
|
|
|
<v-alert v-else-if="store.notFound" type="warning" variant="tonal">
|
|
Artist not found.
|
|
</v-alert>
|
|
|
|
<v-alert v-else-if="store.error" type="error" variant="tonal" closable>
|
|
{{ store.error }}
|
|
</v-alert>
|
|
|
|
<template v-else-if="store.overview">
|
|
<header class="fc-artist__head">
|
|
<h1 class="fc-h1">{{ store.overview.name }}</h1>
|
|
<div class="fc-artist__stats">
|
|
<span>{{ store.overview.image_count }} images</span>
|
|
<span v-if="dateRange">· {{ dateRange }}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="fc-artist__fc4">
|
|
<v-chip
|
|
size="small"
|
|
:variant="store.overview.is_subscription ? 'flat' : 'outlined'"
|
|
:color="store.overview.is_subscription ? 'accent' : undefined"
|
|
prepend-icon="mdi-rss"
|
|
>{{ store.overview.is_subscription ? 'Subscription' : 'One-off' }}</v-chip>
|
|
|
|
<v-chip
|
|
size="small" variant="outlined" prepend-icon="mdi-link-variant"
|
|
:to="`/subscriptions?artist_id=${store.overview.id}`"
|
|
>{{ store.overview.sources.length }} source{{ store.overview.sources.length === 1 ? '' : 's' }}</v-chip>
|
|
|
|
<v-chip
|
|
size="small" variant="outlined" prepend-icon="mdi-rss"
|
|
:to="`/posts?artist_id=${store.overview.id}`"
|
|
>View posts</v-chip>
|
|
|
|
<v-chip
|
|
size="small" variant="outlined" disabled
|
|
prepend-icon="mdi-clock-outline"
|
|
>Credential health · FC-3b</v-chip>
|
|
</div>
|
|
|
|
<!-- Tabs split (2026-05-25): Settings was previously slotted at the
|
|
bottom of the page after the infinite-scroll image grid, which
|
|
made it effectively unreachable for any artist with more than
|
|
a couple of pages of content. The Settings tab now hosts
|
|
destructive admin actions (artist+content cascade-delete) and
|
|
any future per-artist management UI. v-tabs is `position:
|
|
sticky; top: 64px` (under the 64px AppShell TopNav) so it
|
|
stays parked while the gallery scrolls. -->
|
|
<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>
|
|
|
|
<v-window v-model="tab">
|
|
<v-window-item value="overview">
|
|
<section v-if="store.overview.cooccurring_tags.length" class="fc-artist__sec">
|
|
<h2 class="fc-h2">Frequent tags</h2>
|
|
<div class="fc-artist__tags">
|
|
<v-chip
|
|
v-for="t in store.overview.cooccurring_tags" :key="t.id"
|
|
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.activity.length" class="fc-artist__sec">
|
|
<h2 class="fc-h2">Activity</h2>
|
|
<svg class="fc-artist__spark" :viewBox="`0 0 ${sparkW} ${sparkH}`"
|
|
preserveAspectRatio="none" role="img" aria-label="posts over time">
|
|
<polyline :points="sparkPoints" fill="none"
|
|
stroke="rgb(var(--v-theme-accent))" stroke-width="2" />
|
|
</svg>
|
|
</section>
|
|
|
|
<section v-if="store.overview.sources.length" class="fc-artist__sec">
|
|
<div class="fc-artist__sec-head">
|
|
<h2 class="fc-h2">Sources</h2>
|
|
<RouterLink
|
|
:to="`/subscriptions?artist_id=${store.overview.id}`"
|
|
class="fc-artist__manage"
|
|
>Manage subscriptions →</RouterLink>
|
|
</div>
|
|
<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">
|
|
<h2 class="fc-h2">Images</h2>
|
|
<MasonryGrid
|
|
: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>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useRoute, useRouter, RouterLink } from 'vue-router'
|
|
import { useArtistStore } from '../stores/artist.js'
|
|
import { useModalStore } from '../stores/modal.js'
|
|
import MasonryGrid from '../components/discovery/MasonryGrid.vue'
|
|
import ArtistDangerZone from '../components/artist/ArtistDangerZone.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const store = useArtistStore()
|
|
const modal = useModalStore()
|
|
|
|
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)
|
|
tab.value = 'overview'
|
|
}
|
|
}, { immediate: true })
|
|
|
|
const dateRange = computed(() => {
|
|
const r = store.overview?.date_range
|
|
if (!r || !r.min) return null
|
|
const fmt = (iso) => iso.slice(0, 10)
|
|
return r.min === r.max ? fmt(r.min) : `${fmt(r.min)} → ${fmt(r.max)}`
|
|
})
|
|
|
|
const sparkW = 600
|
|
const sparkH = 80
|
|
const sparkPoints = computed(() => {
|
|
const a = store.overview?.activity ?? []
|
|
if (a.length === 0) return ''
|
|
const max = Math.max(...a.map(p => p.count), 1)
|
|
const stepX = a.length > 1 ? sparkW / (a.length - 1) : 0
|
|
return a.map((p, i) => {
|
|
const x = i * stepX
|
|
const y = sparkH - (p.count / max) * (sparkH - 4) - 2
|
|
return `${x.toFixed(1)},${y.toFixed(1)}`
|
|
}).join(' ')
|
|
})
|
|
|
|
function openImage(id) {
|
|
modal.open(id)
|
|
}
|
|
function openTag(tagId) {
|
|
router.push({ name: 'gallery', query: { tag_id: tagId } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-h1 {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-size: 32px; font-weight: 500;
|
|
color: rgb(var(--v-theme-on-surface));
|
|
}
|
|
.fc-h2 {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-size: 20px; font-weight: 500; margin-bottom: 8px;
|
|
}
|
|
.fc-artist__loading { display: flex; justify-content: center; padding: 64px 0; }
|
|
.fc-artist__head { margin-bottom: 12px; }
|
|
.fc-artist__stats { opacity: 0.75; margin-top: 4px; }
|
|
.fc-artist__fc4 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
|
|
.fc-artist__sec { margin-bottom: 28px; }
|
|
.fc-artist__tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.fc-artist__tagc { opacity: 0.6; margin-left: 4px; font-variant-numeric: tabular-nums; }
|
|
.fc-artist__spark { width: 100%; height: 80px; }
|
|
.fc-artist__url {
|
|
max-width: 380px; overflow: hidden; text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.fc-artist__sec-head {
|
|
display: flex; align-items: baseline; justify-content: space-between;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.fc-artist__manage {
|
|
font-size: 0.85rem;
|
|
color: rgb(var(--v-theme-accent));
|
|
text-decoration: none;
|
|
}
|
|
.fc-artist__manage:hover { text-decoration: underline; }
|
|
</style>
|