refactor: shared CustomFormatBadge and Score components to be used in library/testing views

src/lib/client/ui/arr/CustomFormatBadge.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let name: string;
+	export let score: number;
+
+	$: scoreClass =
+		score > 0
+			? 'text-emerald-600 dark:text-emerald-400'
+			: score < 0
+				? 'text-red-600 dark:text-red-400'
+				: 'text-neutral-500';
+
+	$: displayScore = score > 0 ? `+${score.toLocaleString()}` : score.toLocaleString();
+</script>
+
+<span
+	class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 py-1 text-xs dark:border-neutral-700 dark:bg-neutral-800"
+>
+	<span class="text-neutral-500 dark:text-neutral-400">{name}</span>
+	<span class="font-mono font-medium {scoreClass}">{displayScore}</span>
+</span>

src/lib/client/ui/arr/Score.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	/**
+	 * Displays a numeric score with optional color coding.
+	 * - Positive: green with + prefix (when colored=true)
+	 * - Negative: red (when colored=true)
+	 * - Zero/neutral: neutral gray
+	 */
+	export let score: number | null = null;
+	export let showSign: boolean = true;
+	export let size: 'sm' | 'md' = 'md';
+	export let colored: boolean = true;
+
+	$: colorClass =
+		score === null
+			? 'text-neutral-400'
+			: !colored
+				? 'text-neutral-900 dark:text-neutral-100'
+				: score > 0
+					? 'text-emerald-600 dark:text-emerald-400'
+					: score < 0
+						? 'text-red-600 dark:text-red-400'
+						: 'text-neutral-500';
+
+	$: sizeClass = size === 'sm' ? 'text-xs' : 'text-sm';
+
+	$: displayValue =
+		score === null
+			? null
+			: showSign && score > 0
+				? `+${score.toLocaleString()}`
+				: score.toLocaleString();
+</script>
+
+{#if score !== null}
+	<span class="font-mono font-medium {colorClass} {sizeClass}">
+		{displayValue}
+	</span>
+{:else}
+	<span class="text-neutral-400 {sizeClass}">—</span>
+{/if}