Update README quick-start and adjust tests

Add a Quick Start docker-compose snippet and simplify the Manual Setup instruction in README; also replace three screenshot assets. Update multiple audiobook component tests to match recent UI changes: adjust expected button/notification text (e.g. 'Sign in to Request', 'Request created!'), change selectors for close/interactive controls, add PreferencesContext mock, reflect processing overlay and pending/denied status behavior, and update skeleton loader count (8 -> 10). These edits keep tests aligned with the current UI and improve getting-started docs.

tests/components/audiobooks/AudiobookCard.test.tsx

@@ -55,7 +55,7 @@ describe('AudiobookCard', () => {
 
     render(<AudiobookCard audiobook={baseAudiobook} />);
 
-    const requestButton = screen.getByRole('button', { name: 'Login to Request' });
+    const requestButton = screen.getByRole('button', { name: 'Sign in to Request' });
     expect(requestButton).toBeDisabled();
     expect(createRequestMock).not.toHaveBeenCalled();
   });
@@ -79,12 +79,12 @@ describe('AudiobookCard', () => {
     expect(createRequestMock).toHaveBeenCalledWith(baseAudiobook);
     expect(onRequestSuccess).toHaveBeenCalled();
 
-    expect(screen.getByText(/Request created successfully/)).toBeInTheDocument();
+    expect(screen.getByText(/Request created!/)).toBeInTheDocument();
 
     await act(async () => {
       vi.advanceTimersByTime(3000);
     });
-    expect(screen.queryByText(/Request created successfully/)).toBeNull();
+    expect(screen.queryByText(/Request created!/)).toBeNull();
   });
 
   it('shows in-library state when available', async () => {
@@ -116,11 +116,11 @@ describe('AudiobookCard', () => {
       />
     );
 
-    const button = screen.getByRole('button', { name: 'Processing...' });
-    expect(button).toBeDisabled();
+    // Processing status is shown as a div overlay, not a button
+    expect(screen.getByText('Processing')).toBeInTheDocument();
   });
 
-  it('shows pending approval status with requester name', async () => {
+  it('shows pending status for awaiting_approval requests', async () => {
     const { AudiobookCard } = await import('@/components/audiobooks/AudiobookCard');
 
     render(
@@ -134,10 +134,12 @@ describe('AudiobookCard', () => {
       />
     );
 
-    expect(screen.getByRole('button', { name: /Pending Approval \(alice\)/ })).toBeDisabled();
+    // Card shows "Requested" for all pending statuses
+    expect(screen.getByText('Requested')).toBeInTheDocument();
   });
 
-  it('shows a denied request state', async () => {
+  it('allows re-requesting for denied status', async () => {
+    authState.user = { id: 'user-1', username: 'user' };
     const { AudiobookCard } = await import('@/components/audiobooks/AudiobookCard');
 
     render(
@@ -146,7 +148,8 @@ describe('AudiobookCard', () => {
       />
     );
 
-    expect(screen.getByRole('button', { name: 'Request Denied' })).toBeDisabled();
+    // Denied status allows re-requesting, so Request button is shown
+    expect(screen.getByRole('button', { name: 'Request' })).toBeInTheDocument();
   });
 
   it('shows an error when a request fails', async () => {

tests/components/audiobooks/AudiobookDetailsModal.test.tsx

@@ -19,6 +19,10 @@ vi.mock('@/contexts/AuthContext', () => ({
   useAuth: () => useAuthMock(),
 }));
 
+vi.mock('@/contexts/PreferencesContext', () => ({
+  usePreferences: () => ({ squareCovers: false, setSquareCovers: vi.fn(), cardSize: 5, setCardSize: vi.fn() }),
+}));
+
 vi.mock('@/lib/hooks/useAudiobooks', () => ({
   useAudiobookDetails: (asin: string | null) => useAudiobookDetailsMock(asin),
 }));
@@ -90,7 +94,9 @@ describe('AudiobookDetailsModal', () => {
     expect(screen.getByText('Detail Book')).toBeInTheDocument();
     expect(document.body.style.overflow).toBe('hidden');
 
-    fireEvent.click(screen.getByRole('button', { name: 'Close modal' }));
+    // Both mobile and desktop close buttons exist, click the first one
+    const closeButtons = screen.getAllByRole('button', { name: 'Close' });
+    fireEvent.click(closeButtons[0]);
     expect(onClose).toHaveBeenCalled();
   });
 
@@ -120,7 +126,7 @@ describe('AudiobookDetailsModal', () => {
     });
 
     expect(onRequestSuccess).toHaveBeenCalled();
-    expect(screen.getByText(/Request created successfully/)).toBeInTheDocument();
+    expect(screen.getByText(/Request created!/)).toBeInTheDocument();
 
     await act(async () => {
       vi.advanceTimersByTime(2000);
@@ -167,7 +173,7 @@ describe('AudiobookDetailsModal', () => {
     );
 
     await act(async () => {});
-    expect(screen.getByText('Failed to load audiobook details')).toBeInTheDocument();
+    expect(screen.getByText('Failed to load details')).toBeInTheDocument();
   });
 
   it('shows availability state and hides interactive search when available', async () => {
@@ -183,8 +189,9 @@ describe('AudiobookDetailsModal', () => {
     );
 
     await act(async () => {});
-    expect(screen.getByText('Available in Your Library')).toBeInTheDocument();
-    expect(screen.queryByLabelText('Interactive Search')).toBeNull();
+    // Status badge and button both show "In Your Library"
+    expect(screen.getAllByText('In Your Library').length).toBeGreaterThan(0);
+    expect(screen.queryByTitle('Interactive Search')).toBeNull();
   });
 
   it('shows pending approval status with requester name', async () => {
@@ -205,7 +212,7 @@ describe('AudiobookDetailsModal', () => {
     expect(screen.getByRole('button', { name: /Pending Approval \(alice\)/ })).toBeDisabled();
   });
 
-  it('shows a denied request state', async () => {
+  it('shows request button for denied status (allows re-request)', async () => {
     const { AudiobookDetailsModal } = await import('@/components/audiobooks/AudiobookDetailsModal');
 
     render(
@@ -219,10 +226,11 @@ describe('AudiobookDetailsModal', () => {
     );
 
     await act(async () => {});
-    expect(screen.getByRole('button', { name: 'Request Denied' })).toBeDisabled();
+    // Denied status allows re-requesting, shows Request Audiobook button
+    expect(screen.getByRole('button', { name: 'Request Audiobook' })).toBeInTheDocument();
   });
 
-  it('shows Not Found when rating is missing', async () => {
+  it('does not show rating badge when rating is zero', async () => {
     useAudiobookDetailsMock.mockReturnValue({
       audiobook: { ...audiobookDetails, rating: 0 },
       isLoading: false,
@@ -239,7 +247,8 @@ describe('AudiobookDetailsModal', () => {
     );
 
     await act(async () => {});
-    expect(screen.getByText('Not Found')).toBeInTheDocument();
+    // Rating badge is not shown when rating is 0
+    expect(screen.queryByText('0.0')).toBeNull();
   });
 
   it('opens interactive search when requested', async () => {
@@ -257,7 +266,7 @@ describe('AudiobookDetailsModal', () => {
 
     expect(screen.queryByTestId('interactive-modal')).toBeNull();
 
-    fireEvent.click(screen.getByLabelText('Interactive Search'));
+    fireEvent.click(screen.getByTitle('Interactive Search'));
 
     expect(screen.getByTestId('interactive-modal')).toHaveAttribute('data-open', 'true');
   });

tests/components/audiobooks/AudiobookGrid.test.tsx

@@ -29,7 +29,7 @@ describe('AudiobookGrid', () => {
 
     const { container } = render(<AudiobookGrid audiobooks={[]} isLoading={true} />);
 
-    expect(container.querySelectorAll('.animate-pulse')).toHaveLength(8);
+    expect(container.querySelectorAll('.animate-pulse')).toHaveLength(10);
   });
 
   it('shows the empty message when there are no results', async () => {