FabledCurator/frontend/src/components/artist/ArtistHeader.vue

<template>
  <header class="fc-artist-header">
    <div class="fc-artist-header__left">
      <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"
      color="accent"
      density="compact"
      class="fc-artist-header__tabs"
      @update:model-value="$emit('update:modelValue', $event)"
    >
      <v-tab value="posts">
        Posts
        <span v-if="postCount != null" class="fc-artist-header__tab-count">
          ({{ postCount }})
        </span>
      </v-tab>
      <v-tab value="gallery">
        Gallery
        <span v-if="imageCount != null" class="fc-artist-header__tab-count">
          ({{ imageCount }})
        </span>
      </v-tab>
      <v-tab value="management">Management</v-tab>
    </v-tabs>

    <!-- Right-side spacer: balances the left cell's flex weight so the
         centered tabs stay geometrically centered regardless of the
         artist-name length. Mirrors TopNav's 1fr | auto | 1fr layout. -->
    <div class="fc-artist-header__right" />
  </header>
</template>

<script setup>
import { computed, ref } from 'vue'
import { formatLocalDate } from '../../utils/date.js'

const props = defineProps({
  name:        { type: String, required: true },
  imageCount:  { type: Number, default: null },
  postCount:   { type: Number, default: null },
  lastAdded:   { type: String, default: null },
  modelValue:  { type: String, required: true },
})

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 = []
  if (props.imageCount != null) {
    parts.push(`${props.imageCount} image${props.imageCount === 1 ? '' : 's'}`)
  }
  if (props.lastAdded) {
    parts.push(`last added ${formatLocalDate(props.lastAdded)}`)
  }
  return parts.join(' · ')
})
</script>

<style scoped>
/* Matches TopNav.vue's frosted recipe exactly. top:48px parks it flush
   against TopNav's bottom edge (TopNav is 0.75rem padding + ~24px content
   = ~48px tall; operator-flagged 2026-05-26 that top:64px left a visible
   gap). The two bars now read as one continuous frosted strip. */
.fc-artist-header {
  position: sticky;
  top: 48px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(
    to bottom,
    rgba(var(--fc-chrome-rgb), 0.92) 0%,
    rgba(var(--fc-chrome-rgb), 0.65) 60%,
    rgba(var(--fc-chrome-rgb), 0) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.fc-artist-header__left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  overflow: hidden;
}

.fc-artist-header__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  color: rgb(var(--v-theme-on-surface));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-artist-header__stats {
  font-size: 13px;
  color: rgb(var(--v-theme-on-surface-variant));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  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;
}

.fc-artist-header__right {
  flex: 1 1 0;
  min-width: 0;
}

.fc-artist-header__tab-count {
  margin-left: 4px;
  font-size: 12px;
  color: rgb(var(--v-theme-on-surface-variant));
  font-variant-numeric: tabular-nums;
}
</style>