feat(import): badge auto-import status

webui/src/routes/import/-import.helpers.ts

@@ -160,13 +160,14 @@ export function getAutoImportStatusText(status: ImportAutoImportStatusPayload |
   return 'Watching';
 }
 
-export function getAutoImportStatusClass(
+export type AutoImportStatusTone = 'neutral' | 'info' | 'success';
+
+export function getAutoImportStatusTone(
   status: ImportAutoImportStatusPayload | undefined,
-): string {
-  if (!status?.running) return 'disabled';
-  if (status.current_status === 'scanning') return 'scanning';
-  if (status.current_status === 'processing') return 'processing';
-  return 'active';
+): AutoImportStatusTone {
+  if (!status?.running || status.paused) return 'neutral';
+  if (status.current_status === 'scanning' || status.current_status === 'processing') return 'info';
+  return 'success';
 }
 
 export function getActiveImportLines(status: ImportAutoImportStatusPayload | undefined): string[] {

webui/src/routes/import/-route.test.tsx

@@ -303,6 +303,7 @@ describe('import route', () => {
 
     expect(await screen.findByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
     expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
+    expect(screen.getByText('Watching')).toHaveAttribute('data-tone', 'success');
     const intervalSelect = document.getElementById('auto-import-interval');
     if (!(intervalSelect instanceof HTMLElement)) {
       throw new Error('auto-import interval select missing');

webui/src/routes/import/-ui/auto-import-tab.tsx

@@ -34,9 +34,9 @@ import {
   filterAutoImportResults,
   getActiveImportLines,
   getAutoImportCounts,
-  getAutoImportStatusClass,
   getAutoImportStatusMeta,
   getAutoImportStatusText,
+  getAutoImportStatusTone,
   getAutoImportTimeAgo,
   getConfidenceClass,
   parseAutoImportMatchData,
@@ -149,7 +149,7 @@ export function AutoImportPanel({
   const results = filterAutoImportResults(allResults, autoFilter);
   const counts = getAutoImportCounts(allResults);
   const activeLines = getActiveImportLines(statusQuery.data);
-  const statusClassName = getAutoImportStatusClass(statusQuery.data);
+  const statusTone = getAutoImportStatusTone(statusQuery.data);
 
   if (statusQuery.error) {
     return (
@@ -173,12 +173,9 @@ export function AutoImportPanel({
             />
             <span id="auto-import-toggle-label">Auto-Import</span>
           </div>
-          <span
-            className={`${styles.autoImportStatus} ${styles[statusClassName]}`}
-            id="auto-import-status-text"
-          >
+          <Badge id="auto-import-status-text" tone={statusTone}>
             {getAutoImportStatusText(statusQuery.data)}
-          </span>
+          </Badge>
           <div className={styles.importPageFlexSpacer} />
           {statusQuery.data?.running ? (
             <Button

webui/src/routes/import/-ui/import-page.module.css

@@ -908,24 +908,6 @@
   color: rgba(255, 255, 255, 0.7);
 }
 
-.autoImportStatus {
-  font-size: 12px;
-  font-weight: 500;
-  padding: 2px 10px;
-  border-radius: 6px;
-}
-.autoImportStatus.active {
-  color: #4ade80;
-  background: rgba(74, 222, 128, 0.1);
-}
-.autoImportStatus.scanning {
-  color: rgb(var(--accent-light-rgb));
-  background: rgba(var(--accent-rgb), 0.1);
-}
-.autoImportStatus.disabled {
-  color: rgba(255, 255, 255, 0.3);
-}
-
 .autoImportSettingsRow {
   display: flex;
   align-items: center;