feat(web): tabbed On-the-Press view + kebab menu for press actions
The press page interleaved active downloads, queued items, and errors in one long list — hard to see what's actually pressing. Split the non-imported rows into three tabs (Active / In queue / Errors) with live counts; the default tab follows the work (Active if anything's running, else Queue, else Errors) until the user picks one. Move the press-level actions (Pause/Resume, Clear queue, Stop now) off the toolbar into a vertical "⋮" kebab menu on the right of the header — Clear queue disables when the queue is empty, Stop now only shows while downloading. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
|
||||
/** A vertical "⋮" trigger that opens a small popup menu. Closes on outside click, Escape, or any
|
||||
* click inside the popup (so menu items don't each need to manage it). Children are the items —
|
||||
* use <button className="menu-item">…</button>. */
|
||||
export function KebabMenu({ label = "Actions", children }: { label?: string; children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onDoc(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", onDoc);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onDoc);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className="menu" ref={ref}>
|
||||
<button
|
||||
type="button"
|
||||
className="menu-trigger"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
aria-label={label}
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
>
|
||||
⋮
|
||||
</button>
|
||||
{open ? (
|
||||
<div className="menu-pop" role="menu" onClick={() => setOpen(false)}>
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -386,6 +386,32 @@ nav.contents .sep { flex: 1; }
|
||||
.tab:hover { color: var(--ink); }
|
||||
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
|
||||
.tab .n { color: var(--rule-2); margin-left: 6px; }
|
||||
.tab.has-errors .n { color: var(--alert); }
|
||||
|
||||
/* ── Kebab menu (⋮ popup for press actions) ───────────── */
|
||||
.dept.has-actions { align-items: center; }
|
||||
.dept.has-actions .fill { transform: none; }
|
||||
.menu { position: relative; display: inline-flex; }
|
||||
.menu-trigger {
|
||||
font-size: 1.15rem; line-height: 1; color: var(--graphite); background: transparent;
|
||||
border: 1px solid var(--rule); border-radius: 6px; width: 32px; height: 30px; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.menu-trigger:hover { color: var(--ink); border-color: var(--rule-2); }
|
||||
.menu-pop {
|
||||
position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 190px;
|
||||
background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 9px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); padding: 5px;
|
||||
display: flex; flex-direction: column; gap: 1px;
|
||||
}
|
||||
.menu-item {
|
||||
font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
|
||||
text-align: left; background: transparent; border: 0; color: var(--ink);
|
||||
padding: 10px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.menu-item:hover { background: var(--rule); }
|
||||
.menu-item:disabled { color: var(--rule-2); cursor: default; background: transparent; }
|
||||
.menu-item.danger { color: var(--alert); }
|
||||
|
||||
/* ── Discography row (cover thumb + click-to-modal) ───── */
|
||||
.disco-open {
|
||||
|
||||
+115
-64
@@ -7,8 +7,28 @@ import { SectionHeader } from "./_ui/section-header";
|
||||
import { JobRow } from "./_ui/job-row";
|
||||
import { ProgressBar } from "./_ui/progress-bar";
|
||||
import { PressedList } from "./_ui/pressed-list";
|
||||
import { KebabMenu } from "./_ui/kebab-menu";
|
||||
import { toast } from "./_ui/toast";
|
||||
|
||||
type Tab = "active" | "queue" | "errors";
|
||||
|
||||
// Split the on-the-press rows into three honest buckets so active presses aren't buried between
|
||||
// queued items and errors. Active = being worked (searching/downloading/finishing), Queue =
|
||||
// waiting to be claimed, Errors = needs attention.
|
||||
function categoryOf(state: string, stage: string): Tab {
|
||||
const kind = describeJob(state, stage).kind;
|
||||
if (kind === "attention") return "errors";
|
||||
if (state === "requested") return "queue";
|
||||
return "active";
|
||||
}
|
||||
|
||||
const TAB_LABEL: Record<Tab, string> = { active: "Active", queue: "In queue", errors: "Errors" };
|
||||
const TAB_EMPTY: Record<Tab, string> = {
|
||||
active: "Nothing pressing right now.",
|
||||
queue: "The queue is empty.",
|
||||
errors: "No errors — everything's flowing.",
|
||||
};
|
||||
|
||||
type Row = {
|
||||
id: string;
|
||||
artist: string;
|
||||
@@ -60,6 +80,9 @@ export function Queue() {
|
||||
const [artist, setArtist] = useState("");
|
||||
const [album, setAlbum] = useState("");
|
||||
const [paused, setPaused] = useState(false);
|
||||
// null = follow the smart default (Active if anything's active, else Queue, else Errors); once
|
||||
// the user picks a tab, their choice sticks.
|
||||
const [tab, setTab] = useState<Tab | null>(null);
|
||||
|
||||
async function refresh() {
|
||||
const [reqRes, wantRes, artRes, floorRes] = await Promise.all([
|
||||
@@ -159,10 +182,18 @@ export function Queue() {
|
||||
}
|
||||
|
||||
const active = rows.filter((r) => jobOf(r).state !== "imported");
|
||||
const downloading = rows.some((r) => {
|
||||
const s = jobOf(r).state;
|
||||
return s === "matching" || s === "matched" || s === "downloading" || s === "tagging";
|
||||
});
|
||||
const buckets: Record<Tab, Row[]> = { active: [], queue: [], errors: [] };
|
||||
for (const r of active) {
|
||||
const j = jobOf(r);
|
||||
buckets[categoryOf(j.state, j.currentStage)].push(r);
|
||||
}
|
||||
const queuedCount = buckets.queue.length;
|
||||
const downloading = buckets.active.length > 0;
|
||||
// Smart default: land on the tab that has something worth looking at.
|
||||
const defaultTab: Tab = buckets.active.length ? "active" : queuedCount ? "queue" : "errors";
|
||||
const activeTab: Tab = tab ?? defaultTab;
|
||||
const shown = buckets[activeTab];
|
||||
|
||||
// Dedupe by artist+album — re-requesting/re-downloading the same album leaves several
|
||||
// completed Requests; show each album once (rows arrive newest-first, so keep the first).
|
||||
const seenPressed = new Set<string>();
|
||||
@@ -174,61 +205,8 @@ export function Queue() {
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<StatTiles
|
||||
items={[
|
||||
{ k: "On the press", v: active.length },
|
||||
{ k: "Pressed", v: pressed.length, accent: true },
|
||||
{ k: "Wanted", v: wanted },
|
||||
{ k: "Watching", v: watching, unit: "artists" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<SectionHeader title="On the Press" note={`${active.length} running`} />
|
||||
|
||||
<div className="press-controls">
|
||||
{paused ? (
|
||||
<button className="btn sm accent" onClick={() => floorAction("resume", "Press resumed")}>
|
||||
Resume the press
|
||||
</button>
|
||||
) : (
|
||||
<button className="btn sm ghost" onClick={() => floorAction("pause", "Press paused")}>
|
||||
Pause the press
|
||||
</button>
|
||||
)}
|
||||
<button className="btn sm ghost" onClick={clearPress}>
|
||||
Clear queue
|
||||
</button>
|
||||
{downloading ? (
|
||||
<button className="btn sm" onClick={stopPress}>
|
||||
Stop now
|
||||
</button>
|
||||
) : null}
|
||||
{paused ? <span className="chip">Press paused</span> : null}
|
||||
</div>
|
||||
|
||||
<form className="request-form" onSubmit={submit}>
|
||||
<label className="field">
|
||||
<span>Artist</span>
|
||||
<input aria-label="artist" placeholder="Artist" value={artist} onChange={(e) => setArtist(e.target.value)} />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>Album</span>
|
||||
<input aria-label="album" placeholder="Album" value={album} onChange={(e) => setAlbum(e.target.value)} />
|
||||
</label>
|
||||
<button type="submit" className="btn accent">
|
||||
Request
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{active.length === 0 ? (
|
||||
<p className="empty">The press is quiet. Queue a release above, or send one over from Wanted or Discover.</p>
|
||||
) : (
|
||||
<section className="floor">
|
||||
{(() => {
|
||||
const now = Date.now();
|
||||
return active.map((r) => {
|
||||
function renderRow(r: Row) {
|
||||
const j = jobOf(r);
|
||||
const d = describeJob(j.state, j.currentStage);
|
||||
const attention = d.kind === "attention";
|
||||
@@ -285,9 +263,9 @@ export function Queue() {
|
||||
} else if (j.state === "downloading") {
|
||||
const pct = Math.round((j.downloadProgress || 0) * 100);
|
||||
if (pct <= 0) {
|
||||
// Bytes haven't started flowing yet — Qobuz login/metadata/artwork, a
|
||||
// Soulseek peer queue, or a YouTube info-fetch. Show an indeterminate bar
|
||||
// instead of a stuck-looking 0% (it flips to the % bar on the first byte).
|
||||
// Bytes haven't started flowing yet — Qobuz login/metadata/artwork, a Soulseek peer
|
||||
// queue, or a YouTube info-fetch. Show an indeterminate bar instead of a stuck-looking
|
||||
// 0% (it flips to the % bar on the first byte).
|
||||
bar = <ProgressBar kind="working" indeterminate caption="preparing…" />;
|
||||
} else {
|
||||
const total = j.chosen?.trackCount ?? 0;
|
||||
@@ -318,9 +296,82 @@ export function Queue() {
|
||||
bar={bar}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</section>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<StatTiles
|
||||
items={[
|
||||
{ k: "On the press", v: active.length },
|
||||
{ k: "Pressed", v: pressed.length, accent: true },
|
||||
{ k: "Wanted", v: wanted },
|
||||
{ k: "Watching", v: watching, unit: "artists" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="dept has-actions">
|
||||
<h2>On the Press</h2>
|
||||
<span className="fill" />
|
||||
{paused ? <span className="count">paused</span> : null}
|
||||
<KebabMenu label="Press actions">
|
||||
{paused ? (
|
||||
<button className="menu-item" onClick={() => floorAction("resume", "Press resumed")}>
|
||||
Resume the press
|
||||
</button>
|
||||
) : (
|
||||
<button className="menu-item" onClick={() => floorAction("pause", "Press paused")}>
|
||||
Pause the press
|
||||
</button>
|
||||
)}
|
||||
<button className="menu-item" onClick={clearPress} disabled={queuedCount === 0}>
|
||||
Clear queue
|
||||
</button>
|
||||
{downloading ? (
|
||||
<button className="menu-item danger" onClick={stopPress}>
|
||||
Stop now
|
||||
</button>
|
||||
) : null}
|
||||
</KebabMenu>
|
||||
</div>
|
||||
|
||||
<form className="request-form" onSubmit={submit}>
|
||||
<label className="field">
|
||||
<span>Artist</span>
|
||||
<input aria-label="artist" placeholder="Artist" value={artist} onChange={(e) => setArtist(e.target.value)} />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>Album</span>
|
||||
<input aria-label="album" placeholder="Album" value={album} onChange={(e) => setAlbum(e.target.value)} />
|
||||
</label>
|
||||
<button type="submit" className="btn accent">
|
||||
Request
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{active.length === 0 ? (
|
||||
<p className="empty">The press is quiet. Queue a release above, or send one over from Wanted or Discover.</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="tabs" role="tablist">
|
||||
{(["active", "queue", "errors"] as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
role="tab"
|
||||
aria-selected={activeTab === t}
|
||||
className={`tab${activeTab === t ? " active" : ""}${t === "errors" && buckets.errors.length ? " has-errors" : ""}`}
|
||||
onClick={() => setTab(t)}
|
||||
>
|
||||
{TAB_LABEL[t]}
|
||||
<span className="n">{buckets[t].length}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{shown.length === 0 ? (
|
||||
<p className="empty">{TAB_EMPTY[activeTab]}</p>
|
||||
) : (
|
||||
<section className="floor">{shown.map(renderRow)}</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{pressed.length > 0 ? (
|
||||
|
||||
Reference in New Issue
Block a user