feat(web/m7-365): HistoryRow component with click-to-play

2026-05-04 06:19:59 -04:00
parent 4dee5922d9
commit da39ff847b
2 changed files with 117 additions and 0 deletions
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { HistoryEvent } from '$lib/api/history';
+  import { playQueue } from '$lib/player/store.svelte';
+  import { coverUrl } from '$lib/media/covers';
+
+  let { event } = $props<{ event: HistoryEvent }>();
+
+  function handleClick() {
+    playQueue([event.track], 0);
+  }
+
+  // Format played_at as a human-readable timestamp.
+  // Bands: <1h "23m ago" / <24h "3h ago" / <7d "Tue 14:32" /
+  // older same-year "May 1" / older diff-year "May 1, 2025".
+  function relativeTime(playedAtIso: string): string {
+    const playedAt = new Date(playedAtIso);
+    const now = new Date();
+    const ms = now.getTime() - playedAt.getTime();
+    const minutes = Math.floor(ms / 60000);
+    if (minutes < 60) return `${Math.max(1, minutes)}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7) {
+      const dayOfWeek = playedAt.toLocaleDateString(undefined, { weekday: 'short' });
+      const time = playedAt.toLocaleTimeString(undefined, {
+        hour: '2-digit', minute: '2-digit', hour12: false
+      });
+      return `${dayOfWeek} ${time}`;
+    }
+    if (playedAt.getFullYear() === now.getFullYear()) {
+      return playedAt.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+    }
+    return playedAt.toLocaleDateString(undefined, {
+      month: 'short', day: 'numeric', year: 'numeric'
+    });
+  }
+
+  const timestamp = $derived(relativeTime(event.played_at));
+  const tooltip = $derived(new Date(event.played_at).toISOString());
+</script>
+
+<button
+  type="button"
+  onclick={handleClick}
+  aria-label={`Play ${event.track.title}`}
+  class="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-hover"
+>
+  <img
+    src={coverUrl(event.track.album_id)}
+    alt=""
+    class="h-11 w-11 flex-shrink-0 rounded object-cover"
+    loading="lazy"
+  />
+  <div class="min-w-0 flex-1">
+    <div class="truncate text-sm font-medium text-text-primary">{event.track.title}</div>
+    <div class="truncate text-xs text-text-secondary">
+      {event.track.artist_name} · {event.track.album_title}
+    </div>
+  </div>
+  <span title={tooltip} class="flex-shrink-0 text-xs text-text-secondary">
+    {timestamp}
+  </span>
+</button>