feat(web): add TrackRow component

Non-interactive album track row with number, title, duration.
Player plan will add click-to-play.
This commit is contained in:
2026-04-23 18:40:40 -04:00
parent e9b482da0c
commit 12d1cb739b
2 changed files with 45 additions and 0 deletions
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
import type { TrackRef } from '$lib/api/types';
import { formatDuration } from '$lib/media/duration';
let { track }: { track: TrackRef } = $props();
</script>
<div class="grid grid-cols-[32px_1fr_auto] items-center gap-4 px-3 py-2 text-sm odd:bg-surface/50">
<span class="text-right tabular-nums text-text-secondary">
{track.track_number ?? '—'}
</span>
<span class="truncate">{track.title}</span>
<span class="tabular-nums text-text-secondary">{formatDuration(track.duration_sec)}</span>
</div>
+31
View File
@@ -0,0 +1,31 @@
import { describe, expect, test } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import TrackRow from './TrackRow.svelte';
import type { TrackRef } from '$lib/api/types';
const track: TrackRef = {
id: 't1',
title: 'So What',
album_id: 'xyz',
album_title: 'Kind of Blue',
artist_id: 'm-davis',
artist_name: 'Miles Davis',
track_number: 1,
disc_number: 1,
duration_sec: 545,
stream_url: '/api/tracks/t1/stream',
};
describe('TrackRow', () => {
test('renders track number, title, formatted duration', () => {
render(TrackRow, { props: { track } });
expect(screen.getByText('1')).toBeInTheDocument();
expect(screen.getByText('So What')).toBeInTheDocument();
expect(screen.getByText('9:05')).toBeInTheDocument();
});
test('track number falls back to dash when missing', () => {
render(TrackRow, { props: { track: { ...track, track_number: undefined } } });
expect(screen.getByText('—')).toBeInTheDocument();
});
});