FabledCurator/frontend/src/components/subscriptions/SourceCard.vue

<template>
  <div class="fc-source-card">
    <div class="fc-source-card__top">
      <SourceHealthDot :source="source" :warning-threshold="warningThreshold" />
      <v-chip size="x-small" variant="tonal" label>{{ source.platform }}</v-chip>
      <v-spacer />
      <v-switch
        :model-value="source.enabled"
        density="compact" hide-details color="accent"
        @click.stop
        @update:model-value="onToggleEnabled"
      />
    </div>

    <a
      :href="source.url" target="_blank" rel="noopener"
      class="fc-source-card__url" @click.stop
    >{{ source.url }}</a>

    <div class="fc-source-card__meta">
      <span>Last {{ formatRelative(source.last_checked_at) }}</span>
      <span>Next {{ formatRelative(source.next_check_at, { future: true }) }}</span>
      <v-chip
        v-if="(source.consecutive_failures || 0) > 0"
        size="x-small" color="error" variant="tonal" label
      >{{ source.consecutive_failures }} err</v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'running'"
        size="x-small" color="info" variant="tonal" label
      >{{ source.backfill_bypass_seen ? 'Recovering' : 'Backfilling'
        }}{{ source.backfill_posts
              ? ` · ${source.backfill_posts} posts`
              : (source.backfill_chunks ? ` (${source.backfill_chunks})` : '') }}</v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'complete'"
        size="x-small" color="success" variant="tonal" label
      >Backfilled</v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'stalled'"
        size="x-small" color="warning" variant="tonal" label
      >Stalled</v-chip>
    </div>

    <div class="fc-source-card__actions">
      <v-btn
        size="x-small" variant="text" :loading="checking"
        @click.stop="$emit('check', source)"
      >
        <v-icon>mdi-play</v-icon>
        <v-tooltip activator="parent" location="top">Check now</v-tooltip>
      </v-btn>
      <v-btn
        size="x-small" variant="text"
        :color="source.backfill_state === 'running' ? 'warning' : undefined"
        @click.stop="$emit('backfill', source)"
      >
        <v-icon>{{ source.backfill_state === 'running' ? 'mdi-stop' : 'mdi-magnify-scan' }}</v-icon>
        <v-tooltip activator="parent" location="top">
          {{ source.backfill_state === 'running'
            ? (source.backfill_bypass_seen ? 'Stop recovery' : 'Stop backfill')
            : 'Backfill full history' }}
        </v-tooltip>
      </v-btn>
      <v-btn
        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
        size="x-small" variant="text"
        @click.stop="$emit('preview', source)"
      >
        <v-icon>mdi-eye-outline</v-icon>
        <v-tooltip activator="parent" location="top">
          Preview — count what a backfill would download (no download)
        </v-tooltip>
      </v-btn>
      <v-btn
        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
        size="x-small" variant="text"
        @click.stop="$emit('recover', source)"
      >
        <v-icon>mdi-backup-restore</v-icon>
        <v-tooltip activator="parent" location="top">
          Recover — re-fetch dropped near-dups &amp; re-evaluate under the current threshold
        </v-tooltip>
      </v-btn>
      <v-btn size="x-small" variant="text" @click.stop="$emit('edit', source)">
        <v-icon>mdi-pencil</v-icon>
        <v-tooltip activator="parent" location="top">Edit</v-tooltip>
      </v-btn>
      <v-btn
        size="x-small" variant="text" color="error"
        @click.stop="$emit('remove', source)"
      >
        <v-icon>mdi-close</v-icon>
        <v-tooltip activator="parent" location="top">Remove</v-tooltip>
      </v-btn>
    </div>
  </div>
</template>

<script setup>
import SourceHealthDot from './SourceHealthDot.vue'
import { formatRelative } from '../../utils/date.js'

// Mobile-stacked equivalent of SourceRow (the desktop <tr>) — same data and
// emits, but laid out vertically so the wide source columns never force the
// lateral scroll the operator flagged on phones.
const props = defineProps({
  source: { type: Object, required: true },
  checking: { type: Boolean, default: false },
  warningThreshold: { type: Number, default: 5 },
})
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover', 'preview'])

function onToggleEnabled(value) {
  emit('toggle', { source: props.source, enabled: value })
}
</script>

<style scoped>
.fc-source-card {
  padding: 8px 10px;
  border: 1px solid rgb(var(--v-theme-surface-light));
  border-radius: 6px;
  background: rgb(var(--v-theme-surface));
  display: flex; flex-direction: column; gap: 6px;
}
.fc-source-card__top { display: flex; align-items: center; gap: 8px; }
.fc-source-card__url {
  color: rgb(var(--v-theme-on-surface-variant));
  text-decoration: none;
  font-size: 0.8rem;
  word-break: break-all;
}
.fc-source-card__url:hover { color: rgb(var(--v-theme-accent)); }
.fc-source-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 0.78rem; color: rgb(var(--v-theme-on-surface-variant));
  font-variant-numeric: tabular-nums;
}
.fc-source-card__actions {
  display: flex; gap: 2px; justify-content: flex-end;
}
</style>