Files
FabledCurator/frontend/src/views/ArtistView.vue
T
bvandeusenandClaude Opus 4.8 87d53db0cb
CI / lint (push) Successful in 3s
CI / frontend-build (push) Successful in 21s
CI / backend-lint-and-test (push) Successful in 32s
CI / integration (push) Successful in 3m35s
feat(artist): editable display name + rename surface; drop name-uniqueness (#130 step 1)
First step of decoupling artist identity/storage/display. migration 0077 drops
uq_artist_name so the display name is free text (two genuinely different creators
can share a name); the slug stays the immutable, unique storage/identity key (the
on-disk path component — untouched, so nothing moves). ArtistService.rename +
PATCH /api/artists/<id> change the name ONLY. Frontend: inline pencil-edit on the
artist header (mirrors TagCard), slug/route unaffected so no navigation. Fixes the
operator's 'no surface to rename an artist' + the name-collision fragility.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CDgx8bQS5YrGRK76v8HUnM
2026-07-04 22:04:20 -04:00

115 lines
3.7 KiB
Vue

<template>
<div v-if="store.loading && !store.overview" class="fc-artist__loading">
<v-progress-circular indeterminate color="accent" size="36" />
</div>
<v-container v-else-if="store.notFound" class="pt-2 pb-6">
<v-alert type="warning" variant="tonal">Artist not found.</v-alert>
</v-container>
<v-container v-else-if="store.error && !store.overview" class="pt-2 pb-6">
<v-alert type="error" variant="tonal" closable>{{ store.error }}</v-alert>
</v-container>
<template v-else-if="store.overview">
<ArtistHeader
v-model="tab"
:name="store.overview.name"
:image-count="store.imageCount"
:post-count="store.postCount"
:last-added="store.lastAdded"
@rename="onRename"
/>
<v-container fluid class="pt-2 pb-4">
<!-- "N new since last visit" banner. Visible only on the initial
load that triggered the visit-mark; dismissable via close
button or by switching tabs. Re-entry only re-shows if more
content has arrived (overview returns 0 immediately after a
previous visit). -->
<v-alert
v-if="unseenBanner"
type="info" variant="tonal" density="compact"
class="mb-3" closable
@click:close="unseenBanner = false"
>
<span class="fc-artist__unseen-msg">
<strong>{{ store.overview.unseen_count_at_visit }}</strong>
new since last visit
</span>
</v-alert>
<v-window v-model="tab">
<v-window-item value="posts">
<ArtistPostsTab
:artist-id="store.overview.id"
@switch-tab="(t) => tab = t"
/>
</v-window-item>
<v-window-item value="gallery">
<ArtistGalleryTab :slug="slug" />
</v-window-item>
<v-window-item value="management">
<ArtistManagementTab :overview="store.overview" />
</v-window-item>
</v-window>
</v-container>
</template>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useArtistStore } from '../stores/artist.js'
import { toast } from '../utils/toast.js'
import ArtistHeader from '../components/artist/ArtistHeader.vue'
import ArtistPostsTab from '../components/artist/ArtistPostsTab.vue'
import ArtistGalleryTab from '../components/artist/ArtistGalleryTab.vue'
import ArtistManagementTab from '../components/artist/ArtistManagementTab.vue'
import { useTabQuery } from '../composables/useTabQuery.js'
const VALID_TABS = ['posts', 'gallery', 'management']
const route = useRoute()
const store = useArtistStore()
const slug = computed(() => route.params.slug)
const { tab, resolve } = useTabQuery(
VALID_TABS,
() => ((store.postCount ?? 0) > 0 ? 'posts' : 'gallery'),
)
// Rename the artist's display name (#130). Slug/route unchanged, so no
// navigation — the header just reflects the new name; also refresh the tab title.
async function onRename (name) {
try {
await store.rename(name)
document.title = `${store.overview.name} — FabledCurator`
} catch (e) {
toast({ text: `Rename failed: ${e.message}`, type: 'error' })
}
}
// One-shot banner — reset on each new artist-slug load so it re-appears
// when navigating between artists that each have unseen content.
const unseenBanner = ref(false)
watch(slug, async (s) => {
if (!s) return
await store.load(s)
document.title = store.overview
? `${store.overview.name} — FabledCurator`
: 'FabledCurator'
tab.value = resolve()
unseenBanner.value = (store.overview?.unseen_count_at_visit || 0) > 0
}, { immediate: true })
</script>
<style scoped>
.fc-artist__loading {
display: flex; justify-content: center; padding: 64px 0;
}
.fc-artist__unseen-msg {
font-size: 14px;
}
</style>