feat(web): TrackMenu overflow + FlagPopover for the quarantine flow
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<script lang="ts">
|
||||
import { Flag } from 'lucide-svelte';
|
||||
import { useQueryClient } from '@tanstack/svelte-query';
|
||||
import { flagTrack } from '$lib/api/quarantine';
|
||||
import { qk } from '$lib/api/queries';
|
||||
import type { TrackRef, LidarrQuarantineReason } from '$lib/api/types';
|
||||
|
||||
let {
|
||||
track,
|
||||
onClose,
|
||||
initialReason,
|
||||
initialNotes
|
||||
}: {
|
||||
track: TrackRef;
|
||||
onClose: () => void;
|
||||
initialReason?: LidarrQuarantineReason;
|
||||
initialNotes?: string;
|
||||
} = $props();
|
||||
|
||||
let reason: LidarrQuarantineReason = $state(initialReason ?? 'bad_rip');
|
||||
let notes = $state(initialNotes ?? '');
|
||||
let submitting = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
const isUpdate = !!initialReason;
|
||||
const client = useQueryClient();
|
||||
|
||||
async function submit() {
|
||||
submitting = true;
|
||||
error = null;
|
||||
try {
|
||||
await flagTrack({ track_id: track.id, reason, notes: notes.trim() || undefined });
|
||||
await client.invalidateQueries({ queryKey: qk.myQuarantine() });
|
||||
onClose();
|
||||
} catch (e) {
|
||||
error = (e as { code?: string }).code ?? 'flag_failed';
|
||||
} finally {
|
||||
submitting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="false"
|
||||
aria-labelledby="flag-popover-title"
|
||||
class="absolute right-0 z-30 mt-1 w-72 rounded-lg border border-border bg-surface p-3 shadow-xl"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h4 id="flag-popover-title" class="text-sm font-medium text-text-primary">
|
||||
Flag this track as broken
|
||||
</h4>
|
||||
<label class="mt-2 block">
|
||||
<span class="block text-xs text-text-secondary">Reason</span>
|
||||
<select
|
||||
bind:value={reason}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
>
|
||||
<option value="bad_rip">Bad rip</option>
|
||||
<option value="wrong_file">Wrong file</option>
|
||||
<option value="wrong_tags">Wrong tags</option>
|
||||
<option value="duplicate">Duplicate</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="mt-2 block">
|
||||
<span class="block text-xs text-text-secondary">Notes (optional)</span>
|
||||
<textarea
|
||||
bind:value={notes}
|
||||
maxlength="200"
|
||||
placeholder="What's wrong with it?"
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
rows="2"
|
||||
></textarea>
|
||||
</label>
|
||||
{#if error}
|
||||
<p class="mt-2 text-xs text-error">Couldn't save flag — {error}</p>
|
||||
{/if}
|
||||
<div class="mt-3 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-border px-2.5 py-1 text-sm text-text-secondary hover:text-text-primary"
|
||||
onclick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={submit}
|
||||
disabled={submitting}
|
||||
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-2.5 py-1 text-sm text-text-primary disabled:opacity-50"
|
||||
>
|
||||
<Flag size={14} strokeWidth={1} />
|
||||
{isUpdate ? 'Update flag' : 'Flag'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,96 @@
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import FlagPopover from './FlagPopover.svelte';
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
|
||||
const invalidateMock = vi.fn();
|
||||
vi.mock('@tanstack/svelte-query', async (orig) => {
|
||||
const actual = (await orig()) as Record<string, unknown>;
|
||||
return {
|
||||
...actual,
|
||||
useQueryClient: () => ({ invalidateQueries: invalidateMock })
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock('$lib/api/quarantine', () => ({
|
||||
flagTrack: vi.fn().mockResolvedValue({ track_id: 't1', reason: 'bad_rip' })
|
||||
}));
|
||||
|
||||
import { flagTrack } from '$lib/api/quarantine';
|
||||
|
||||
const track: TrackRef = {
|
||||
id: 't1',
|
||||
title: 'Roygbiv',
|
||||
album_id: 'a1',
|
||||
album_title: 'Geogaddi',
|
||||
artist_id: 'ar1',
|
||||
artist_name: 'Boards of Canada',
|
||||
duration_sec: 240,
|
||||
stream_url: '/api/tracks/t1/stream'
|
||||
};
|
||||
|
||||
afterEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('FlagPopover', () => {
|
||||
test('default reason is bad_rip; button reads "Flag" when not initialReason', () => {
|
||||
render(FlagPopover, { props: { track, onClose: vi.fn() } });
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.value).toBe('bad_rip');
|
||||
expect(screen.getByRole('button', { name: /^flag$/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('pre-fills reason and notes when initial values are provided; button reads "Update flag"', () => {
|
||||
render(FlagPopover, {
|
||||
props: {
|
||||
track,
|
||||
onClose: vi.fn(),
|
||||
initialReason: 'wrong_tags',
|
||||
initialNotes: 'wrong artist'
|
||||
}
|
||||
});
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.value).toBe('wrong_tags');
|
||||
const textarea = screen.getByPlaceholderText(/what's wrong/i) as HTMLTextAreaElement;
|
||||
expect(textarea.value).toBe('wrong artist');
|
||||
expect(screen.getByRole('button', { name: /update flag/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('submits with reason and notes; calls invalidateQueries on success', async () => {
|
||||
const onClose = vi.fn();
|
||||
render(FlagPopover, { props: { track, onClose } });
|
||||
const select = screen.getByRole('combobox');
|
||||
await fireEvent.change(select, { target: { value: 'duplicate' } });
|
||||
const textarea = screen.getByPlaceholderText(/what's wrong/i);
|
||||
await fireEvent.input(textarea, { target: { value: 'same recording' } });
|
||||
await fireEvent.click(screen.getByRole('button', { name: /^flag$/i }));
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
expect(flagTrack).toHaveBeenCalledWith({
|
||||
track_id: 't1',
|
||||
reason: 'duplicate',
|
||||
notes: 'same recording'
|
||||
});
|
||||
expect(invalidateMock).toHaveBeenCalled();
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('empty notes are not sent', async () => {
|
||||
render(FlagPopover, { props: { track, onClose: vi.fn() } });
|
||||
await fireEvent.click(screen.getByRole('button', { name: /^flag$/i }));
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
expect(flagTrack).toHaveBeenCalledWith({
|
||||
track_id: 't1',
|
||||
reason: 'bad_rip',
|
||||
notes: undefined
|
||||
});
|
||||
});
|
||||
|
||||
test('cancel button calls onClose without firing flagTrack', async () => {
|
||||
const onClose = vi.fn();
|
||||
render(FlagPopover, { props: { track, onClose } });
|
||||
await fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
|
||||
expect(flagTrack).not.toHaveBeenCalled();
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import { MoreVertical, Flag } from 'lucide-svelte';
|
||||
import FlagPopover from './FlagPopover.svelte';
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
|
||||
let { track }: { track: TrackRef } = $props();
|
||||
|
||||
let menuOpen = $state(false);
|
||||
let popoverOpen = $state(false);
|
||||
|
||||
function toggleMenu(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
menuOpen = !menuOpen;
|
||||
}
|
||||
|
||||
function openFlag() {
|
||||
menuOpen = false;
|
||||
popoverOpen = true;
|
||||
}
|
||||
|
||||
function closeAll() {
|
||||
menuOpen = false;
|
||||
popoverOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
onclick={() => (menuOpen = false)}
|
||||
onkeydown={(e) => e.key === 'Escape' && closeAll()}
|
||||
/>
|
||||
|
||||
<div class="relative inline-block">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Track actions for ${track.title}`}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menuOpen}
|
||||
onclick={toggleMenu}
|
||||
class="rounded p-1 text-text-muted hover:text-text-primary"
|
||||
>
|
||||
<MoreVertical size={16} strokeWidth={1} />
|
||||
</button>
|
||||
|
||||
{#if menuOpen}
|
||||
<div
|
||||
role="menu"
|
||||
class="absolute right-0 z-20 mt-1 w-48 rounded-md border border-border bg-surface p-1 shadow-lg"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onclick={openFlag}
|
||||
class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-text-primary hover:bg-surface-hover"
|
||||
>
|
||||
<Flag size={14} strokeWidth={1} />
|
||||
Flag this track…
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if popoverOpen}
|
||||
<FlagPopover {track} onClose={closeAll} />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,52 @@
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import TrackMenu from './TrackMenu.svelte';
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
|
||||
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', () => ({
|
||||
flagTrack: vi.fn().mockResolvedValue({})
|
||||
}));
|
||||
|
||||
const track: TrackRef = {
|
||||
id: 't1',
|
||||
title: 'Roygbiv',
|
||||
album_id: 'a1',
|
||||
album_title: 'Geogaddi',
|
||||
artist_id: 'ar1',
|
||||
artist_name: 'Boards of Canada',
|
||||
duration_sec: 240,
|
||||
stream_url: '/api/tracks/t1/stream'
|
||||
};
|
||||
|
||||
afterEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('TrackMenu', () => {
|
||||
test('opens menu on kebab click', async () => {
|
||||
render(TrackMenu, { props: { track } });
|
||||
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
|
||||
await fireEvent.click(screen.getByRole('button', { name: /track actions for roygbiv/i }));
|
||||
expect(screen.getByRole('menu')).toBeInTheDocument();
|
||||
expect(screen.getByRole('menuitem', { name: /flag this track/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Escape key closes menu', async () => {
|
||||
render(TrackMenu, { props: { track } });
|
||||
await fireEvent.click(screen.getByRole('button', { name: /track actions/i }));
|
||||
expect(screen.getByRole('menu')).toBeInTheDocument();
|
||||
await fireEvent.keyDown(window, { key: 'Escape' });
|
||||
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('clicking "Flag this track…" opens FlagPopover and closes menu', async () => {
|
||||
render(TrackMenu, { props: { track } });
|
||||
await fireEvent.click(screen.getByRole('button', { name: /track actions/i }));
|
||||
await fireEvent.click(screen.getByRole('menuitem', { name: /flag this track/i }));
|
||||
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
|
||||
expect(screen.getByRole('dialog', { name: /flag this track as broken/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user