feat: real worker status, covers on Recently Pressed, library counter

- Worker stamps a throttled worker.heartbeat; GET /api/worker reports online
  from its updatedAt recency (DB-time); masthead shows a live listening/offline
  dot instead of a static decoration.
- /api/requests enriched with rgMbid; Recently Pressed shows cover thumbs.
- Library album count moved from the filter row into a section header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan
2026-07-12 17:58:23 +02:00
parent e624d12089
commit 606ea82b70
10 changed files with 103 additions and 15 deletions
+2 -4
View File
@@ -1,4 +1,5 @@
import { ThemeToggle } from "./theme-toggle";
import { WorkerStatus } from "./worker-status";
export function Masthead() {
return (
@@ -10,10 +11,7 @@ export function Masthead() {
<div className="tagline">A record label for an audience of one</div>
</div>
<div className="press-status">
<div>
<span className="live-dot" />
Worker · listening
</div>
<WorkerStatus />
<ThemeToggle />
</div>
</header>
+4 -2
View File
@@ -1,11 +1,13 @@
export type PressedItem = { id: string; artist: string; album: string; matrix: string };
import { CoverArt } from "./cover-art";
export type PressedItem = { id: string; artist: string; album: string; matrix: string; rgMbid: string | null };
export function PressedList({ items }: { items: PressedItem[] }) {
return (
<ul className="pressed">
{items.map((it) => (
<li key={it.id}>
<span className="mark"></span>
<CoverArt rgMbid={it.rgMbid} alt={it.album} className="pressed-thumb" />
<span className="name">
{it.album} <span className="artist">· {it.artist}</span>
</span>
+34
View File
@@ -0,0 +1,34 @@
"use client";
import { useEffect, useState } from "react";
/** Live worker liveness in the masthead — polls /api/worker (heartbeat recency). */
export function WorkerStatus() {
const [online, setOnline] = useState<boolean | null>(null);
useEffect(() => {
let alive = true;
async function check() {
try {
const d = await (await fetch("/api/worker")).json();
if (alive) setOnline(!!d.online);
} catch {
if (alive) setOnline(false);
}
}
check();
const id = setInterval(check, 10000);
return () => {
alive = false;
clearInterval(id);
};
}, []);
const label = online === null ? "…" : online ? "listening" : "offline";
return (
<div className={`worker-status${online === false ? " off" : ""}`}>
<span className="live-dot" />
Worker · {label}
</div>
);
}