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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user