feat: mini player bar with expandable track list

web/test/minibar.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { PlayerProvider, usePlayer } from '../src/player/PlayerContext.js'
+import MiniBar from '../src/player/MiniBar.js'
+import type { Track } from '../src/types.js'
+
+vi.mock('../src/api.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../src/api.js')>()
+  return { ...actual, api: { ...actual.api, getAlbumTracks: vi.fn(), markPlayed: vi.fn() } }
+})
+import { api } from '../src/api.js'
+
+const tracks: Track[] = [
+  { id: 's1', title: 'Overture', duration: 200, track: 1 },
+  { id: 's2', title: 'Theme de Yoyo', duration: 300, track: 2 },
+]
+
+function Loader() {
+  const { load } = usePlayer()
+  return (
+    <button type="button" onClick={() => void load({ id: 'a1', title: 'Motion', artist: 'TCO' })}>
+      load
+    </button>
+  )
+}
+
+beforeEach(() => {
+  vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue()
+  vi.spyOn(HTMLMediaElement.prototype, 'pause').mockReturnValue(undefined)
+  vi.mocked(api.getAlbumTracks).mockResolvedValue({ id: 'a1', title: 'Motion', artist: 'TCO', tracks } as never)
+  vi.mocked(api.markPlayed).mockResolvedValue({ ok: true } as never)
+})
+
+function renderBar() {
+  return render(
+    <PlayerProvider>
+      <Loader />
+      <MiniBar />
+    </PlayerProvider>
+  )
+}
+
+describe('MiniBar', () => {
+  it('hidden when nothing is loaded, shows controls when playing', async () => {
+    renderBar()
+    expect(screen.queryByRole('button', { name: /play or pause/i })).toBeNull()
+    await userEvent.click(screen.getByRole('button', { name: 'load' }))
+    await waitFor(() => expect(screen.getByText('Motion')).toBeTruthy())
+    expect(screen.getByRole('button', { name: /pause/i })).toBeTruthy()
+  })
+
+  it('pause/resume works from the bar', async () => {
+    renderBar()
+    await userEvent.click(screen.getByRole('button', { name: 'load' }))
+    const pauseBtn = await screen.findByRole('button', { name: /pause/i })
+    await userEvent.click(pauseBtn)
+    expect(screen.getByRole('button', { name: 'play' })).toBeTruthy()
+  })
+
+  it('expands to the track list and closes', async () => {
+    renderBar()
+    await userEvent.click(screen.getByRole('button', { name: 'load' }))
+    await userEvent.click(await screen.findByRole('button', { name: /expand/i }))
+    expect(screen.getByText(/Theme de Yoyo/)).toBeTruthy()
+    expect(screen.getByText(/Overture/)).toBeTruthy()
+    await userEvent.click(screen.getByRole('button', { name: /collapse/i }))
+    expect(screen.queryByText(/Theme de Yoyo/)).toBeNull()
+    await userEvent.click(screen.getByRole('button', { name: /close player/i }))
+    await waitFor(() => expect(screen.queryByText('Motion')).toBeNull())
+  })
+})