frontend/src/routes/admin/system/+page.svelte

@@ -2,19 +2,13 @@
 import { onDestroy } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import ImportStatusCard from './ImportStatusCard.svelte';
+import type { ImportStatus } from './types.js';
 
 let backfillResult: number | null = $state(null);
 let backfillLoading = $state(false);
 let backfillHashesResult: number | null = $state(null);
 let backfillHashesLoading = $state(false);
 
-type ImportStatus = {
-	state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
-	statusCode: string;
-	processed: number;
-	startedAt: string | null;
-};
-
 type ThumbnailStatus = {
 	state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
 	message: string;

frontend/src/routes/admin/system/ImportStatusCard.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-
+import type { ImportStatus } from './types.js';
-type ImportStatus = {
-	state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
-	statusCode: string;
-	processed: number;
-	startedAt: string | null;
-};
 
 let {
 	importStatus,
@@ -24,7 +18,9 @@ const failureMessage = $derived(
 </script>
 
 <div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-	<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_import_heading()}</h2>
+	<h2 class="mb-5 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.admin_system_import_heading()}
+	</h2>
 	<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_description()}</p>
 
 	{#if importStatus?.state === 'RUNNING'}
@@ -36,16 +32,18 @@ const failureMessage = $derived(
 				class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-ink-3 border-t-brand-mint motion-reduce:animate-none"
 			></span>
 			<div>
-				<p class="text-base font-bold text-ink">{importStatus.processed}</p>
+				<p data-testid="processed-count" class="text-base font-bold text-ink">
-				<p class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{importStatus.processed}
+				</p>
+				<p class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.admin_system_import_status_running()}
 				</p>
 			</div>
 		</div>
 	{:else if importStatus?.state === 'DONE'}
 		<div class="mb-4 rounded-sm border border-green-200 bg-green-50 p-4 text-green-700">
-			<p class="text-base font-bold">{importStatus.processed}</p>
+			<p data-testid="processed-count" class="text-base font-bold">{importStatus.processed}</p>
-			<p class="text-xs font-bold tracking-widest text-green-800 uppercase">
+			<p class="font-sans text-xs font-bold tracking-widest text-green-800 uppercase">
 				{m.admin_system_import_status_done_label()}
 			</p>
 			<p class="mt-1 text-xs text-green-800">{m.admin_system_import_status_done()}</p>

frontend/src/routes/admin/system/ImportStatusCard.svelte.test.ts

@@ -2,13 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { m } from '$lib/paraglide/messages.js';
 import ImportStatusCard from './ImportStatusCard.svelte';
-
+import type { ImportStatus } from './types.js';
-type ImportStatus = {
-	state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
-	statusCode: string;
-	processed: number;
-	startedAt: string | null;
-};
 
 const makeStatus = (overrides: Partial<ImportStatus> = {}): ImportStatus => ({
 	state: 'IDLE',
@@ -20,25 +14,25 @@ const makeStatus = (overrides: Partial<ImportStatus> = {}): ImportStatus => ({
 
 describe('ImportStatusCard', () => {
 	it('shows spinner while state is RUNNING', async () => {
-		render(ImportStatusCard, {
+		const { getByTestId } = render(ImportStatusCard, {
 			props: {
 				importStatus: makeStatus({ state: 'RUNNING', statusCode: 'IMPORT_RUNNING', processed: 3 }),
 				ontrigger: () => {}
 			}
 		});
 
-		expect(document.querySelector('[data-testid="spinner"]')).not.toBeNull();
+		await expect.element(getByTestId('spinner')).toBeInTheDocument();
 	});
 
 	it('shows processed count at text-base while RUNNING', async () => {
-		const { getByText } = render(ImportStatusCard, {
+		const { getByTestId } = render(ImportStatusCard, {
 			props: {
 				importStatus: makeStatus({ state: 'RUNNING', statusCode: 'IMPORT_RUNNING', processed: 7 }),
 				ontrigger: () => {}
 			}
 		});
 
-		await expect.element(getByText('7')).toBeVisible();
+		await expect.element(getByTestId('processed-count')).toHaveTextContent('7');
 	});
 
 	it('shows processed count while DONE', async () => {
@@ -89,11 +83,11 @@ describe('ImportStatusCard', () => {
 	});
 
 	it('shows no spinner when importStatus is null', async () => {
-		render(ImportStatusCard, {
+		const { getByTestId } = render(ImportStatusCard, {
 			props: { importStatus: null, ontrigger: () => {} }
 		});
 
-		expect(document.querySelector('[data-testid="spinner"]')).toBeNull();
+		await expect.element(getByTestId('spinner')).not.toBeInTheDocument();
 	});
 
 	it('calls ontrigger when retry button is clicked in DONE state', async () => {

frontend/src/routes/admin/system/types.ts

@@ -0,0 +1,6 @@
+export type ImportStatus = {
+	state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
+	statusCode: string;
+	processed: number;
+	startedAt: string | null;
+};