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

<template>
  <v-card v-if="active.length" variant="tonal" color="info" class="fc-active mb-4">
    <div class="fc-active__head">
      <span class="fc-active__pulse" />
      <span class="fc-active__title">
        <template v-if="running.length">
          {{ running.length }} downloading
        </template>
        <template v-if="running.length && queued.length"> · </template>
        <template v-if="queued.length">
          {{ queued.length }} queued
        </template>
      </span>
      <v-spacer />
      <span class="fc-active__live">live</span>
    </div>

    <div class="fc-active__body">
      <div
        v-for="e in running" :key="e.id"
        class="fc-active__row fc-active__row--running"
      >
        <span class="fc-active__dot" />
        <PlatformChip :platform="e.platform" size="x-small" />
        <span class="fc-active__artist">{{ e.artist_name || '—' }}</span>
        <v-spacer />
        <span class="fc-active__timer" :title="`started ${e.started_at}`">
          {{ elapsed(e.started_at) }}
        </span>
      </div>

      <div
        v-for="e in queued" :key="e.id"
        class="fc-active__row fc-active__row--queued"
      >
        <v-icon size="x-small" class="fc-active__queue-icon">mdi-clock-outline</v-icon>
        <PlatformChip :platform="e.platform" size="x-small" />
        <span class="fc-active__artist">{{ e.artist_name || '—' }}</span>
        <v-spacer />
        <span class="fc-active__queued">queued</span>
      </div>
    </div>
  </v-card>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'

import { useDownloadsStore } from '../../stores/downloads.js'
import PlatformChip from './PlatformChip.vue'

const store = useDownloadsStore()

const running = computed(() => store.activeEvents.filter((e) => e.status === 'running'))
const queued = computed(() => store.activeEvents.filter((e) => e.status === 'pending'))
const active = computed(() => [...running.value, ...queued.value])

// Ticking clock so the running timers update every second. started_at is
// tz-aware UTC; Date parses the instant, so (now - start) is correct in
// any viewer timezone.
const now = ref(Date.now())
let timer = null
onMounted(() => { timer = setInterval(() => { now.value = Date.now() }, 1000) })
onUnmounted(() => { if (timer) clearInterval(timer) })

function elapsed (startedIso) {
  if (!startedIso) return '—'
  const start = new Date(startedIso).getTime()
  if (isNaN(start)) return '—'
  const secs = Math.max(0, Math.floor((now.value - start) / 1000))
  const h = Math.floor(secs / 3600)
  const m = Math.floor((secs % 3600) / 60)
  const s = secs % 60
  const mm = String(m).padStart(2, '0')
  const ss = String(s).padStart(2, '0')
  return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`
}
</script>

<style scoped>
.fc-active { border-radius: 8px; }
.fc-active__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.fc-active__title {
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem;
}
.fc-active__pulse {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: rgb(var(--v-theme-info));
  animation: fc-active-pulse 1.4s ease-in-out infinite;
}
.fc-active__live {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgb(var(--v-theme-info));
}
.fc-active__body {
  padding: 0 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.fc-active__row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgb(var(--v-theme-surface) / 0.5);
}
.fc-active__row--queued { opacity: 0.75; }
.fc-active__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: rgb(var(--v-theme-info));
  animation: fc-active-pulse 1.4s ease-in-out infinite;
}
.fc-active__queue-icon { color: rgb(var(--v-theme-on-surface-variant)); }
.fc-active__artist { font-weight: 600; }
.fc-active__timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: rgb(var(--v-theme-info));
}
.fc-active__queued {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgb(var(--v-theme-on-surface-variant));
}
@keyframes fc-active-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .fc-active__pulse, .fc-active__dot { animation: none; }
}
</style>