feat(web): admin page for files the library has lost — #2527
test-web / test (push) Failing after 32s
test-web / test (push) Failing after 32s
Renders GET /api/admin/library/missing under Admin -> Missing files. Folder-grouped, because that is the unit an operator decides about: the case behind #2523 was three reorganised albums, and forty individual rows hides that it is really three decisions. Each row leads with the fact that settles whether a missing file is worth chasing -- "last played 2d ago" against "never played". The group header carries how many tracks and how long they have been gone. Read-only. No remove button anywhere: the row, its play history and its likes survive a file going missing, and the scanner clears the mark by itself when the file returns (or adopts the row if it returns renamed, #2528). The page says so in its own copy rather than leaving the operator to infer it. Empty state explains the feature instead of the emptiness -- what puts a row here (moved outside Minstrel, deleted, a drive that didn't mount) and that rows leave on their own. Someone who has never seen this page should not have to guess. Paging follows the house pattern -- plain offset into the factory, wrapped in $derived so a page change re-creates the query with a new key. Passing a getter instead would capture the key once and paging would silently not refetch. The pager only renders when it can do something.
This commit is contained in:
@@ -0,0 +1,164 @@
|
||||
<script lang="ts">
|
||||
import { pageTitle } from '$lib/branding';
|
||||
import { FolderX, Music2 } from 'lucide-svelte';
|
||||
import { createMissingFilesQuery } from '$lib/api/admin';
|
||||
import { relativeTime } from '$lib/utils/relativeTime';
|
||||
import { coverUrl } from '$lib/media/covers';
|
||||
import type { AdminMissingGroup } from '$lib/api/types';
|
||||
|
||||
// Files the scan looked for and could not find. Read-only on purpose:
|
||||
// a missing file keeps its track row, its play history and its likes,
|
||||
// because the file may come back — the scanner clears the mark by
|
||||
// itself, and adopts the row if it returns under a new name (#2528).
|
||||
// Nothing on this page deletes anything.
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
let offset = $state(0);
|
||||
|
||||
// $derived so paging re-creates the query with a new key — same shape the
|
||||
// playback-errors page uses for its tab state.
|
||||
const queryStore = $derived(createMissingFilesQuery(offset, PAGE_SIZE));
|
||||
const query = $derived($queryStore);
|
||||
const groups = $derived((query.data?.groups ?? []) as AdminMissingGroup[]);
|
||||
const total = $derived(query.data?.total ?? 0);
|
||||
const shown = $derived(groups.reduce((n, g) => n + g.tracks.length, 0));
|
||||
const hasMore = $derived(offset + shown < total);
|
||||
|
||||
function trackCountLabel(n: number): string {
|
||||
return n === 1 ? '1 track' : `${n} tracks`;
|
||||
}
|
||||
|
||||
function durationLabel(sec: number): string {
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = sec % 60;
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>{pageTitle('Admin · Missing files')}</title></svelte:head>
|
||||
|
||||
<div class="space-y-6">
|
||||
<header class="space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="font-display text-2xl font-medium text-text-primary">Missing files</h2>
|
||||
{#if total > 0}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
|
||||
data-testid="missing-count-pill"
|
||||
>
|
||||
{total}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-text-secondary">
|
||||
Tracks whose audio file the last scan couldn't find. They keep their play
|
||||
history and likes, and stop being offered anywhere until the file returns.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{#if query.isPending}
|
||||
<p class="text-text-secondary">Checking what's missing…</p>
|
||||
{:else if query.isError}
|
||||
<p class="text-error">Couldn't load the missing-files list.</p>
|
||||
{:else if groups.length === 0}
|
||||
<!-- Empty state explains the feature, not just the emptiness: an operator
|
||||
who has never seen this page shouldn't have to guess what would put a
|
||||
row here or when it would appear. -->
|
||||
<div class="rounded-lg border border-border bg-surface p-6 text-center">
|
||||
<FolderX size={28} strokeWidth={1} class="mx-auto text-text-muted" />
|
||||
<p class="mt-3 text-text-primary">Every track's file is where it should be.</p>
|
||||
<p class="mt-1 text-sm text-text-secondary">
|
||||
A track lands here when a library scan can't find its file — moved outside
|
||||
Minstrel, deleted, or on a drive that didn't mount. It leaves on its own
|
||||
when the file comes back.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="space-y-4">
|
||||
{#each groups as group (group.directory)}
|
||||
<li class="overflow-hidden rounded-lg border border-border bg-surface">
|
||||
<!-- The folder is the unit of decision. Three reorganised albums are
|
||||
three things to think about, not forty. -->
|
||||
<div class="flex items-baseline justify-between gap-4 border-b border-border px-4 py-3">
|
||||
<h3 class="truncate font-mono text-sm text-text-primary" title={group.directory}>
|
||||
{group.directory}
|
||||
</h3>
|
||||
<span class="shrink-0 text-xs text-text-secondary">
|
||||
{trackCountLabel(group.tracks.length)} · gone {relativeTime(group.missing_since)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="divide-y divide-border">
|
||||
{#each group.tracks as t (t.track_id)}
|
||||
<li class="flex items-center gap-3 px-4 py-2" data-testid="missing-track-row">
|
||||
<div
|
||||
class="flex h-10 w-10 shrink-0 items-center justify-center rounded bg-surface-hover"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{#if t.album_id}
|
||||
<img
|
||||
src={coverUrl(t.album_id)}
|
||||
alt=""
|
||||
class="h-full w-full rounded object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<Music2 size={18} strokeWidth={1} class="text-text-muted" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm text-text-primary">{t.title}</div>
|
||||
<div class="truncate text-xs text-text-secondary">
|
||||
{t.artist_name} · {t.album_title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last played is the deciding fact: a file gone six months
|
||||
that nobody ever played is not the same problem as one
|
||||
played two hundred times last week. -->
|
||||
<span class="shrink-0 text-xs text-text-muted">
|
||||
{#if t.last_played_at}
|
||||
last played {relativeTime(t.last_played_at)}
|
||||
{:else}
|
||||
never played
|
||||
{/if}
|
||||
</span>
|
||||
<span class="shrink-0 text-xs text-text-muted">{durationLabel(t.duration_sec)}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
{#if hasMore || offset > 0}
|
||||
<nav class="flex items-center justify-between" aria-label="Missing files pages">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-border px-3 py-1.5 text-sm text-text-primary
|
||||
hover:bg-surface-hover focus-visible:outline focus-visible:outline-2
|
||||
focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-40"
|
||||
disabled={offset === 0}
|
||||
onclick={() => (offset = Math.max(0, offset - PAGE_SIZE))}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span class="text-xs text-text-secondary">
|
||||
{offset + 1}–{offset + shown} of {total}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-border px-3 py-1.5 text-sm text-text-primary
|
||||
hover:bg-surface-hover focus-visible:outline focus-visible:outline-2
|
||||
focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-40"
|
||||
disabled={!hasMore}
|
||||
onclick={() => (offset += PAGE_SIZE)}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</nav>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user