fix(import): keep count badge visible

- add a contrast override for badges inside primary buttons
- keep the singles process action aligned with the select/deselect row
- update import route tests for the new button label shape
This commit is contained in:
Antti Kettunen 2026-05-18 20:27:52 +03:00
parent 9f2c5c685b
commit 0721a859a9
No known key found for this signature in database
GPG key ID: C6B2A3D250359BD7
3 changed files with 14 additions and 8 deletions

View file

@ -554,6 +554,12 @@
color: rgba(0, 0, 0, 0.55); color: rgba(0, 0, 0, 0.55);
} }
.buttonPrimary .badge {
color: #fff;
background: rgba(0, 0, 0, 0.18);
border-color: rgba(0, 0, 0, 0.22);
}
.buttonSecondary { .buttonSecondary {
border-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);

View file

@ -240,7 +240,7 @@ describe('import route', () => {
fireEvent.click(await screen.findByRole('link', { name: 'Singles' })); fireEvent.click(await screen.findByRole('link', { name: 'Singles' }));
await waitFor(() => expect(history.location.pathname).toBe('/import/singles')); await waitFor(() => expect(history.location.pathname).toBe('/import/singles'));
expect(screen.getByText('Process Selected (0)')).toBeInTheDocument(); expect(screen.getByRole('button', { name: /Process Selected\s*0/ })).toBeInTheDocument();
}); });
it('keeps client workflow drafts across page remounts', async () => { it('keeps client workflow drafts across page remounts', async () => {
@ -280,7 +280,7 @@ describe('import route', () => {
expect(screen.getByRole('checkbox', { name: 'Select 02-track.flac' })).toBeChecked(), expect(screen.getByRole('checkbox', { name: 'Select 02-track.flac' })).toBeChecked(),
); );
expect(screen.getByRole('checkbox', { name: 'Select 01-track.flac' })).not.toBeChecked(); expect(screen.getByRole('checkbox', { name: 'Select 01-track.flac' })).not.toBeChecked();
expect(screen.getByText('Process Selected (1)')).toBeInTheDocument(); expect(screen.getByRole('button', { name: /Process Selected\s*1/ })).toBeInTheDocument();
}); });
it('preserves album source details when matching an album', async () => { it('preserves album source details when matching an album', async () => {

View file

@ -1,15 +1,15 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Button, Checkbox, TextInput } from '@/components/form/form'; import { Badge, Button, Checkbox, TextInput } from '@/components/form/form';
import type { SingleSearchState } from '../-import.store'; import type { SingleSearchState } from '../-import.store';
import type { ImportTrackResult } from '../-import.types'; import type { ImportTrackResult } from '../-import.types';
import type { ImportStagingFile } from '../-import.types'; import type { ImportStagingFile } from '../-import.types';
import styles from './import-page.module.css';
import { searchImportTracks } from '../-import.api'; import { searchImportTracks } from '../-import.api';
import { formatDuration, getStagingFileKey } from '../-import.helpers'; import { formatDuration, getStagingFileKey } from '../-import.helpers';
import { useSinglesImportWorkflow } from '../-import.store'; import { useSinglesImportWorkflow } from '../-import.store';
import styles from './import-page.module.css';
import { import {
fallbackImage, fallbackImage,
getErrorMessage, getErrorMessage,
@ -185,9 +185,11 @@ export function SinglesImportPanel({
variant={processVariant} variant={processVariant}
id="import-page-singles-process-btn" id="import-page-singles-process-btn"
disabled={selectedCount === 0} disabled={selectedCount === 0}
size="sm"
onClick={onProcessSingles} onClick={onProcessSingles}
> >
Process Selected ({selectedCount}) <span>Process Selected</span>
<Badge>{selectedCount}</Badge>
</Button> </Button>
</div> </div>
</div> </div>
@ -203,9 +205,7 @@ export function SinglesImportPanel({
return ( return (
<div <div
key={fileKey} key={fileKey}
className={`${styles.importPageSingleItem} ${ className={`${styles.importPageSingleItem} ${manualMatch ? styles.matched : ''}`}
manualMatch ? styles.matched : ''
}`}
data-single-key={fileKey} data-single-key={fileKey}
> >
<label className={styles.importPageSingleCheckboxWrap}> <label className={styles.importPageSingleCheckboxWrap}>