FabledCurator/frontend/src/views/SeriesView.vue

<template>
  <v-container fluid class="pt-2 pb-6">
    <v-tabs v-model="tab" density="compact" class="mb-3">
      <v-tab value="browse">Browse</v-tab>
      <v-tab value="suggestions">
        Suggestions
        <v-badge
          v-if="sug.suggestions.length" :content="sug.suggestions.length"
          inline color="accent"
        />
      </v-tab>
    </v-tabs>

    <v-window v-model="tab">
      <!-- ---- Browse ---- -->
      <v-window-item value="browse">
        <div class="fc-series-browse__controls">
          <v-select
            :model-value="store.sort"
            :items="sortItems"
            density="compact" variant="outlined" hide-details
            label="Sort" style="max-width: 220px;"
            @update:model-value="store.setSort($event)"
          />
        </div>

        <v-alert v-if="store.error" type="error" variant="tonal" closable class="my-4">
          Failed to load: {{ store.error }}
        </v-alert>
        <div
          v-else-if="!store.loading && store.series.length === 0"
          class="fc-series-browse__empty"
        >
          No series yet. Make one from a post's “Series ▾ → New series from this
          post”, or create a <code>series:</code> tag and add images.
        </div>

        <div class="fc-series-browse__grid">
          <article
            v-for="s in store.series" :key="s.id" class="fc-sbcard"
            @click="manage(s.id)"
          >
            <div class="fc-sbcard__cover">
              <img v-if="s.cover_thumbnail_url" :src="s.cover_thumbnail_url" alt="" loading="lazy" />
              <div v-else class="fc-sbcard__cover--empty">
                <v-icon size="large">mdi-book-open-page-variant</v-icon>
              </div>
              <span v-if="s.has_gap" class="fc-sbcard__gap" title="Has a missing-page gap">
                <v-icon size="x-small">mdi-alert-outline</v-icon> gap
              </span>
            </div>
            <div class="fc-sbcard__body">
              <h3 class="fc-sbcard__name">{{ s.name }}</h3>
              <div class="fc-sbcard__meta">
                <span v-if="s.artist_name" class="fc-sbcard__artist">{{ s.artist_name }}</span>
                <span class="fc-sbcard__counts">
                  {{ s.chapter_count }} ch · {{ s.page_count }} pg
                </span>
              </div>
              <div class="fc-sbcard__actions">
                <v-btn
                  size="x-small" variant="tonal" color="accent"
                  prepend-icon="mdi-book-open"
                  :disabled="s.page_count === 0"
                  @click.stop="read(s.id)"
                >Read</v-btn>
                <v-btn
                  size="x-small" variant="text"
                  prepend-icon="mdi-pencil" @click.stop="manage(s.id)"
                >Manage</v-btn>
              </div>
            </div>
          </article>
        </div>

        <div v-if="store.loading" class="fc-series-browse__sentinel">
          <v-progress-circular indeterminate color="accent" size="28" />
        </div>
      </v-window-item>

      <!-- ---- Suggestions ---- -->
      <v-window-item value="suggestions">
        <div class="fc-sug__controls">
          <v-switch
            :model-value="sug.enabled" color="accent" density="compact"
            hide-details label="Matching on"
            @update:model-value="sug.setEnabled($event)"
          />
          <v-text-field
            :model-value="sug.threshold"
            type="number" min="0" max="1" step="0.05"
            density="compact" variant="outlined" hide-details
            label="Threshold" style="max-width: 130px;"
            @change="sug.setThreshold(Number($event.target.value))"
          />
          <v-spacer />
          <v-btn
            variant="tonal" prepend-icon="mdi-radar" @click="sug.rescan()"
          >Rescan</v-btn>
        </div>

        <v-alert v-if="sug.error" type="error" variant="tonal" closable class="my-4">
          {{ sug.error }}
        </v-alert>
        <div
          v-else-if="!sug.loading && sug.suggestions.length === 0"
          class="fc-series-browse__empty"
        >
          No pending suggestions. Click <strong>Rescan</strong> to look for posts
          that continue an existing series.
        </div>

        <div class="fc-sug__list">
          <div v-for="s in sug.suggestions" :key="s.id" class="fc-sug__row">
            <div class="fc-sug__main">
              <div class="fc-sug__title">
                {{ s.post_title }}
                <v-icon size="x-small">mdi-arrow-right</v-icon>
                <span class="fc-sug__series">{{ s.series_name }}</span>
              </div>
              <div class="fc-sug__signals">
                <span class="fc-sug__score">{{ pct(s.score) }}</span>
                <span
                  v-for="k in signalKeys(s)" :key="k" class="fc-sug__chip"
                >{{ k }} {{ pct(s.signals[k]) }}</span>
              </div>
            </div>
            <div class="fc-sug__actions">
              <v-btn
                size="small" color="accent" variant="flat"
                @click="sug.accept(s.id)"
              >Add</v-btn>
              <v-btn size="small" variant="text" @click="sug.dismiss(s.id)">Skip</v-btn>
            </div>
          </div>
        </div>
      </v-window-item>
    </v-window>
  </v-container>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useSeriesBrowseStore } from '../stores/seriesBrowse.js'
import { useSeriesSuggestionsStore } from '../stores/seriesSuggestions.js'

const router = useRouter()
const store = useSeriesBrowseStore()
const sug = useSeriesSuggestionsStore()
const tab = ref('browse')

const sortItems = [
  { title: 'Recently updated', value: 'recent' },
  { title: 'Name', value: 'name' },
  { title: 'Size', value: 'size' }
]

function manage(id) {
  router.push({ name: 'series-manage', params: { tagId: id } })
}
function read(id) {
  router.push({ name: 'series-read', params: { tagId: id } })
}

function pct(v) { return `${Math.round((v || 0) * 100)}%` }
// Only the signals that actually fired (strength > 0), in a stable order.
function signalKeys(s) {
  return ['title', 'artist', 'pages', 'tags'].filter(k => (s.signals?.[k] || 0) > 0)
}

onMounted(() => {
  store.load()
  sug.loadSettings()
  sug.load()
})
</script>

<style scoped>
.fc-series-browse__controls {
  display: flex; gap: 12px; margin-bottom: 16px;
}
.fc-series-browse__empty {
  padding: 48px; text-align: center;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-series-browse__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.fc-sbcard {
  border: 1px solid rgb(var(--v-theme-surface-light));
  border-radius: 8px; overflow: hidden; cursor: pointer;
  background: rgb(var(--v-theme-surface));
  transition: border-color 120ms ease, transform 120ms ease;
}
.fc-sbcard:hover {
  border-color: rgb(var(--v-theme-accent), 0.6);
  transform: translateY(-2px);
}
.fc-sbcard__cover {
  position: relative; aspect-ratio: 3 / 2; background: rgb(var(--v-theme-surface-light));
}
.fc-sbcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-sbcard__cover--empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-sbcard__gap {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px; border-radius: 999px; font-size: 11px;
  background: rgba(20, 23, 26, 0.75);
  color: rgb(var(--v-theme-warning, var(--v-theme-accent)));
}
.fc-sbcard__body { padding: 8px 10px; }
.fc-sbcard__name {
  font-family: 'Fraunces', Georgia, serif; font-size: 15px; font-weight: 600;
  margin: 0 0 4px; color: rgb(var(--v-theme-on-surface));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-sbcard__meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: rgb(var(--v-theme-on-surface-variant));
  margin-bottom: 8px;
}
.fc-sbcard__artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-sbcard__counts { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.fc-sbcard__actions { display: flex; gap: 6px; }

/* Suggestions tab */
.fc-sug__controls {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
}
.fc-sug__list { display: flex; flex-direction: column; gap: 8px; }
.fc-sug__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgb(var(--v-theme-surface-light));
  background: rgb(var(--v-theme-surface));
}
.fc-sug__main { flex: 1; min-width: 0; }
.fc-sug__title {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: rgb(var(--v-theme-on-surface));
  overflow: hidden;
}
.fc-sug__series { color: rgb(var(--v-theme-accent)); font-weight: 600; }
.fc-sug__signals {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px;
}
.fc-sug__score {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: rgb(var(--v-theme-accent));
}
.fc-sug__chip {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgb(var(--v-theme-surface-light));
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-sug__actions { flex: 0 0 auto; display: flex; gap: 6px; }
</style>