bvandeusen/minstrel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 38 Wiki Activity

feat(web): /library/hidden user-facing quarantine view

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-04-30 20:35:11 -04:00
parent 88ff997af7
commit 0d7a65cffb
4 changed files with 198 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/Shell.svelte
+8 -7
View File
@@ -22,13 +22,14 @@
}
const navItems = [
{ href: '/', label: 'Library' },
{ href: '/library/liked', label: 'Liked' },
{ href: '/search', label: 'Search' },
{ href: '/discover', label: 'Discover' },
{ href: '/requests', label: 'Requests' },
{ href: '/playlists', label: 'Playlists' },
{ href: '/settings', label: 'Settings' }
{ href: '/', label: 'Library' },
{ href: '/library/liked', label: 'Liked' },
{ href: '/library/hidden', label: 'Hidden' },
{ href: '/search', label: 'Search' },
{ href: '/discover', label: 'Discover' },
{ href: '/requests', label: 'Requests' },
{ href: '/playlists', label: 'Playlists' },
{ href: '/settings', label: 'Settings' }
];
// Admin link sits between Playlists and Settings, only visible to admins.
web/src/lib/components/Shell.test.ts
+15
View File
@@ -48,6 +48,21 @@ describe('Shell', () => {
expect(screen.getByRole('link', { name: 'Playlists' })).toHaveAttribute('href', '/playlists');
});
test('Hidden nav link sits between Liked and Search', () => {
render(Shell);
const hidden = screen.getByRole('link', { name: 'Hidden' });
expect(hidden).toHaveAttribute('href', '/library/hidden');
const labels = screen
.getAllByRole('link')
.map((el) => el.textContent?.trim())
.filter(Boolean);
const idxLiked = labels.indexOf('Liked');
const idxHidden = labels.indexOf('Hidden');
const idxSearch = labels.indexOf('Search');
expect(idxLiked).toBeLessThan(idxHidden);
expect(idxHidden).toBeLessThan(idxSearch);
});
test('non-admin users do not see the Admin nav link', () => {
userState.current = { id: '1', username: 'alice', is_admin: false };
render(Shell);
web/src/routes/library/hidden/+page.svelte
+111
View File
@@ -0,0 +1,111 @@
<script lang="ts">
import { Music2, RotateCcw } from 'lucide-svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import { createMyQuarantineQuery, unflagTrack } from '$lib/api/quarantine';
import { qk } from '$lib/api/queries';
import type { LidarrQuarantineMineRow, LidarrQuarantineReason } from '$lib/api/types';
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
const client = useQueryClient();
const queryStore = createMyQuarantineQuery();
const query = $derived($queryStore);
const rows = $derived((query.data ?? []) as LidarrQuarantineMineRow[]);
const REASON_LABELS: Record<LidarrQuarantineReason, string> = {
bad_rip: 'Bad rip',
wrong_file: 'Wrong file',
wrong_tags: 'Wrong tags',
duplicate: 'Duplicate',
other: 'Other'
};
function relativeTime(iso: string): string {
const ms = Date.now() - new Date(iso).getTime();
const days = Math.floor(ms / (24 * 3_600_000));
if (days >= 1) return `${days}d ago`;
const hours = Math.floor(ms / 3_600_000);
if (hours >= 1) return `${hours}h ago`;
const minutes = Math.floor(ms / 60_000);
if (minutes >= 1) return `${minutes}m ago`;
return 'just now';
}
async function onUnhide(trackID: string) {
try {
await unflagTrack(trackID);
await client.invalidateQueries({ queryKey: qk.myQuarantine() });
} catch {
// Silent in v1; the SPA will refetch on next mount.
}
}
</script>
<div class="space-y-6">
<header class="space-y-1">
<h2 class="font-display text-2xl font-medium text-text-primary">Hidden</h2>
<p class="text-text-secondary">Tracks you've flagged as broken.</p>
</header>
{#if query.isError}
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
{:else if !query.isPending && rows.length === 0}
<p class="text-text-secondary">Nothing hidden yet.</p>
{:else if rows.length > 0}
<ul class="space-y-2">
{#each rows as row (row.track_id)}
<li class="flex items-start gap-3 rounded-md border border-border bg-surface p-3">
<!-- Album art / fallback -->
<div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-md bg-surface-hover">
{#if row.album_cover_art_path}
<img
src={`/api/albums/${row.album_id}/cover`}
alt=""
class="h-full w-full rounded-md object-cover"
loading="lazy"
/>
{:else}
<Music2 size={24} strokeWidth={1} class="text-text-muted" />
{/if}
</div>
<!-- Body -->
<div class="flex flex-1 flex-col gap-1">
<div class="flex items-center gap-2">
<span class="kind-pill">Track</span>
<span class="kind-pill">{REASON_LABELS[row.reason]}</span>
</div>
<div class="text-sm text-text-primary">{row.track_title}</div>
<div class="text-xs text-text-secondary">
by {row.artist_name} · {row.album_title} · flagged {relativeTime(row.created_at)}
</div>
{#if row.notes}
<div class="text-xs italic text-text-secondary">{row.notes}</div>
{/if}
</div>
<!-- Action -->
<button
type="button"
aria-label={`Un-hide ${row.track_title}`}
onclick={() => onUnhide(row.track_id)}
class="inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-sm text-text-secondary hover:text-text-primary"
>
<RotateCcw size={14} strokeWidth={1} />
Un-hide
</button>
</li>
{/each}
</ul>
{/if}
</div>
<style>
.kind-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
line-height: 14px;
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
}
</style>
web/src/routes/library/hidden/hidden.test.ts
+64
View File
@@ -0,0 +1,64 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import { mockQuery } from '../../../test-utils/query';
vi.mock('@tanstack/svelte-query', async (orig) => {
const actual = (await orig()) as Record<string, unknown>;
return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) };
});
vi.mock('$lib/api/quarantine', () => ({
createMyQuarantineQuery: vi.fn(),
unflagTrack: vi.fn().mockResolvedValue(undefined)
}));
import HiddenPage from './+page.svelte';
import { createMyQuarantineQuery, unflagTrack } from '$lib/api/quarantine';
import type { LidarrQuarantineMineRow } from '$lib/api/types';
const baseRow: LidarrQuarantineMineRow = {
track_id: 't1',
reason: 'bad_rip',
notes: 'crackles',
created_at: new Date(Date.now() - 2 * 24 * 3_600_000).toISOString(), // 2 days ago
track_title: 'Roygbiv',
track_duration_ms: 200000,
album_id: 'a1',
album_title: 'Geogaddi',
album_cover_art_path: null,
artist_id: 'ar1',
artist_name: 'Boards of Canada'
};
afterEach(() => vi.clearAllMocks());
describe('/library/hidden', () => {
test('renders one row per quarantine with title + meta + reason pill + notes', () => {
(createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [baseRow] }));
render(HiddenPage);
expect(screen.getByText('Roygbiv')).toBeInTheDocument();
expect(screen.getByText(/by boards of canada · geogaddi/i)).toBeInTheDocument();
expect(screen.getByText('Bad rip')).toBeInTheDocument();
expect(screen.getByText('crackles')).toBeInTheDocument();
});
test('un-hide button calls unflagTrack', async () => {
(createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [baseRow] }));
render(HiddenPage);
await fireEvent.click(screen.getByRole('button', { name: /un-hide roygbiv/i }));
expect(unflagTrack).toHaveBeenCalledWith('t1');
});
test('empty state shows "Nothing hidden yet."', () => {
(createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [] }));
render(HiddenPage);
expect(screen.getByText(/nothing hidden yet/i)).toBeInTheDocument();
});
test('notes are absent when row.notes is null', () => {
const row = { ...baseRow, notes: null };
(createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [row] }));
render(HiddenPage);
expect(screen.queryByText('crackles')).not.toBeInTheDocument();
});
});