From 0721a859a9154c9c515f4332a00256a9860c323f Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 20:27:52 +0300
Subject: [PATCH] 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
---
 webui/src/components/form/form.module.css          |  6 ++++++
 webui/src/routes/import/-route.test.tsx            |  4 ++--
 webui/src/routes/import/-ui/singles-import-tab.tsx | 12 ++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 30e6a60c..8f340d35 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -554,6 +554,12 @@
   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 {
   border-color: rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.08);
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 79d686c9..e9e01466 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -240,7 +240,7 @@ describe('import route', () => {
     fireEvent.click(await screen.findByRole('link', { name: '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 () => {
@@ -280,7 +280,7 @@ describe('import route', () => {
       expect(screen.getByRole('checkbox', { name: 'Select 02-track.flac' })).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 () => {
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index d474dff8..e6d2014b 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -1,15 +1,15 @@
 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 { ImportTrackResult } from '../-import.types';
 import type { ImportStagingFile } from '../-import.types';
 
-import styles from './import-page.module.css';
 import { searchImportTracks } from '../-import.api';
 import { formatDuration, getStagingFileKey } from '../-import.helpers';
 import { useSinglesImportWorkflow } from '../-import.store';
+import styles from './import-page.module.css';
 import {
   fallbackImage,
   getErrorMessage,
@@ -185,9 +185,11 @@ export function SinglesImportPanel({
             variant={processVariant}
             id="import-page-singles-process-btn"
             disabled={selectedCount === 0}
+            size="sm"
             onClick={onProcessSingles}
           >
-            Process Selected ({selectedCount})
+            <span>Process Selected</span>
+            <Badge>{selectedCount}</Badge>
           </Button>
         </div>
       </div>
@@ -203,9 +205,7 @@ export function SinglesImportPanel({
             return (
               <div
                 key={fileKey}
-                className={`${styles.importPageSingleItem} ${
-                  manualMatch ? styles.matched : ''
-                }`}
+                className={`${styles.importPageSingleItem} ${manualMatch ? styles.matched : ''}`}
                 data-single-key={fileKey}
               >
                 <label className={styles.importPageSingleCheckboxWrap}>