);
}
// Sub-tab toggle button. Looks like the header tab chips but smaller
// because it lives inside the page instead of in the global nav.
function SubTab({ active, onClick, icon, children }) {
return (
);
}
// Verlauf — "letzte 25 hochgeladene Tracks". Quick "what's new"
// snapshot for admins, not a deep history archive. No pagination
// (just the latest 25), no filters; if you want to dig deeper, the
// home library has full sort + filter + 50-per-page paging for
// accepted tracks.
//
// Includes pending tracks too — useful for admins to see what just
// came in even before the AudD copyright worker has had a chance to
// process them. Status is sorted by upload time descending.
const VERLAUF_LIMIT = 25;
function VerlaufList({ me, refresh: refreshApp }) {
const audio = useAudioStatus();
const isAdmin = canForceAccept(me);
const [items, setItems] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const load = React.useCallback(async () => {
setLoading(true);
try {
// No status filter — we want the most recent uploads regardless
// of decision state. The catalog endpoint defaults to sort=newest
// by submitted_at when no other sort is set.
const out = await Api.catalog({ sort: 'newest', limit: VERLAUF_LIMIT });
setItems(out.items);
} catch (e) {
toast.error('Verlauf laden fehlgeschlagen: ' + e.message);
} finally {
setLoading(false);
}
}, []);
React.useEffect(() => { load(); }, [load]);
// Wrap the app-level refresh so admin actions on a row also re-
// pull this list (e.g. status override flips the pill).
const refreshAll = async () => {
if (refreshApp) await refreshApp();
await load();
};
if (loading && items.length === 0) {
return (
Lade Verlauf…
);
}
if (items.length === 0) {
return (
);
}
return (
{items.map((s, i) => {
const t = tally(s);
const submitter = playerByIdent(s.identifier);
return (
·
von ·
{timeAgo(s.submittedAt)}
}
trailing={
<>
{t.accepts} /{' '}
{t.rejects}
}/>
);
})}
);
}
// Reusable pagination footer. Page number set + prev/next, plus the
// "X-Y von Z" position readout in the centre. Disabled-styling on
// the edge buttons so the user gets visual feedback that they're at
// the first or last page.
function Pagination({ page, totalPages, total, pageSize, onPage }) {
const from = page * pageSize + 1;
const to = Math.min(total, (page + 1) * pageSize);
return (
{from}-{to}
{' '}von{' '}
{numDE(total)}
Seite {page + 1} / {totalPages}
);
}
// Overview body — extracted from the old StatsScreen so we can render
// it conditionally inside the sub-tab toggle. Pure presentational.
function OverviewBody({ stats, me }) {
if (!stats) {
return (
Lade Statistiken…
);
}
const acceptRatio = stats.counts.total > 0
? Math.round((stats.counts.accepted / stats.counts.total) * 100)
: 0;
return (
<>
{/* Submission counts */}
);
}
// Track-flavoured leaderboard. Shows the cover + title + artist
// instead of an avatar + player name. Used for "Meist gehört".
function TrackLeaderboard({ title, metric, empty, rows }) {
return (
{title}{metric}
{rows.length === 0
?
{empty}
: rows.map((t, i) => (
{t.title}
{t.artist}
{numDE(t.streams)}
))}
);
}
// Creator/voter leaderboard. Shows ONLY the artist display name —
// never the underlying char/ESX name. The server resolves the name
// via `st_music_artists.name` with a fallback to the most-recent
// track's `artist` string, and ships it as `r.artist`. If even that
// is missing (rare: a voter who never uploaded and has no profile)
// we render the bare identifier as a last resort.
//
// Count comes back as `r.n` (matches the SQL `COUNT(*) AS n` alias);
// we were reading `r.count` here previously and always showed 0.
function Leaderboard({ title, metric, empty, rows }) {
return (
{title}{metric}
{rows.length === 0
?
{empty}
: rows.map((r, i) => (
{r.artist
?
:
{r.identifier}
}
{numDE(r.n)}
))}
);
}
// Single big-number stat card. Used 11× on this screen.
function BigStat({ label, value, accent, icon }) {
return (