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
This commit is contained in:
@@ -1,8 +1,21 @@
|
||||
<template>
|
||||
<header class="fc-artist-header">
|
||||
<div class="fc-artist-header__left">
|
||||
<h1 class="fc-artist-header__name">{{ name }}</h1>
|
||||
<span v-if="stats" class="fc-artist-header__stats">{{ stats }}</span>
|
||||
<template v-if="!editing">
|
||||
<h1 class="fc-artist-header__name">{{ name }}</h1>
|
||||
<v-icon
|
||||
class="fc-artist-header__edit" size="16" icon="mdi-pencil"
|
||||
title="Rename artist (display name only)" @click="startEdit"
|
||||
/>
|
||||
</template>
|
||||
<v-text-field
|
||||
v-else
|
||||
v-model="draft"
|
||||
density="compact" variant="outlined" hide-details autofocus
|
||||
class="fc-artist-header__edit-field"
|
||||
@keydown.enter="submit" @keydown.esc="cancel" @blur="cancel"
|
||||
/>
|
||||
<span v-if="stats && !editing" class="fc-artist-header__stats">{{ stats }}</span>
|
||||
</div>
|
||||
<v-tabs
|
||||
:model-value="modelValue"
|
||||
@@ -34,7 +47,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { formatLocalDate } from '../../utils/date.js'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -45,7 +58,23 @@ const props = defineProps({
|
||||
modelValue: { type: String, required: true },
|
||||
})
|
||||
|
||||
defineEmits(['update:modelValue'])
|
||||
const emit = defineEmits(['update:modelValue', 'rename'])
|
||||
|
||||
// Inline rename (display name only — #130). Mirrors TagCard's pencil-edit.
|
||||
const editing = ref(false)
|
||||
const draft = ref('')
|
||||
function startEdit () {
|
||||
draft.value = props.name
|
||||
editing.value = true
|
||||
}
|
||||
function cancel () {
|
||||
editing.value = false
|
||||
}
|
||||
function submit () {
|
||||
const next = draft.value.trim()
|
||||
editing.value = false
|
||||
if (next && next !== props.name) emit('rename', next)
|
||||
}
|
||||
|
||||
const stats = computed(() => {
|
||||
const parts = []
|
||||
@@ -111,6 +140,20 @@ const stats = computed(() => {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fc-artist-header__edit {
|
||||
flex: 0 0 auto;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
transition: opacity .15s ease;
|
||||
}
|
||||
.fc-artist-header__left:hover .fc-artist-header__edit { opacity: .7; }
|
||||
.fc-artist-header__edit:hover { opacity: 1; }
|
||||
.fc-artist-header__edit-field {
|
||||
max-width: 340px;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
}
|
||||
|
||||
.fc-artist-header__tabs {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user