refactor: centralize number formatting with locale-aware utility

web/src/lib/components/CourseDetail.svelte

@@ -13,7 +13,7 @@ import {
 } from "$lib/course";
 import { themeStore } from "$lib/stores/theme.svelte";
 import { useClipboard } from "$lib/composables/useClipboard.svelte";
-import { cn, tooltipContentClass } from "$lib/utils";
+import { cn, tooltipContentClass, formatNumber } from "$lib/utils";
 import { Tooltip } from "bits-ui";
 import SimpleTooltip from "./SimpleTooltip.svelte";
 import { Info, Copy, Check, Star, Triangle, ExternalLink } from "@lucide/svelte";
@@ -275,7 +275,7 @@ const clipboard = useClipboard();
                             </span>
                             {#if course.crossListCount != null && course.crossListCapacity != null}
                                 <span class="text-muted-foreground text-xs">
-                                    {course.crossListCount}/{course.crossListCapacity}
+                                    {formatNumber(course.crossListCount)}/{formatNumber(course.crossListCapacity)}
                                 </span>
                             {/if}
                         </span>
@@ -285,7 +285,7 @@ const clipboard = useClipboard();
                             >{course.crossList}</span
                         >
                         {#if course.crossListCount != null && course.crossListCapacity != null}
-                            — {course.crossListCount} enrolled across {course.crossListCapacity}
+                            — {formatNumber(course.crossListCount)} enrolled across {formatNumber(course.crossListCapacity)}
                             shared seats
                         {/if}
                     </Tooltip.Content>
@@ -298,7 +298,7 @@ const clipboard = useClipboard();
             <div>
                 <h4 class="text-sm text-foreground mb-2">Waitlist</h4>
                 <span class="text-2foreground"
-                    >{course.waitCount} / {course.waitCapacity}</span
+                    >{formatNumber(course.waitCount)} / {formatNumber(course.waitCapacity)}</span
                 >
             </div>
         {/if}

web/src/lib/components/CourseTable.svelte

@@ -46,7 +46,7 @@ import {
   ExternalLink,
 } from "@lucide/svelte";
 import { DropdownMenu, ContextMenu, Tooltip } from "bits-ui";
-import { cn, tooltipContentClass } from "$lib/utils";
+import { cn, tooltipContentClass, formatNumber } from "$lib/utils";
 import SimpleTooltip from "./SimpleTooltip.svelte";
 
 let {
@@ -577,7 +577,7 @@ const table = createSvelteTable({
                                                         >
                                                             {ratingData.rating.toFixed(
                                                                 1,
-                                                            )}/5 · {ratingData.count}
+                                                            )}/5 · {formatNumber(ratingData.count)}
                                                             ratings
                                                             {#if (ratingData.count ?? 0) < RMP_CONFIDENCE_THRESHOLD}
                                                                 (low)
@@ -701,11 +701,11 @@ const table = createSvelteTable({
                                             class="py-2 px-2 text-right whitespace-nowrap"
                                         >
                                             <SimpleTooltip
-                                                text="{openSeats(
+                                                text="{formatNumber(openSeats(
                                                     course,
-                                                )} of {course.maxEnrollment} seats open, {course.enrollment} enrolled{course.waitCount >
+                                                ))} of {formatNumber(course.maxEnrollment)} seats open, {formatNumber(course.enrollment)} enrolled{course.waitCount >
                                                 0
-                                                    ? `, ${course.waitCount} waitlisted`
+                                                    ? `, ${formatNumber(course.waitCount)} waitlisted`
                                                     : ''}"
                                                 delay={200}
                                                 side="left"
@@ -729,8 +729,8 @@ const table = createSvelteTable({
                                                     >
                                                     <span
                                                         class="text-muted-foreground/60 tabular-nums"
-                                                        >{course.enrollment}/{course.maxEnrollment}{#if course.waitCount > 0}
-                                                            · WL {course.waitCount}/{course.waitCapacity}{/if}</span
+                                                        >{formatNumber(course.enrollment)}/{formatNumber(course.maxEnrollment)}{#if course.waitCount > 0}
+                                                            · WL {formatNumber(course.waitCount)}/{formatNumber(course.waitCapacity)}{/if}</span
                                                     >
                                                 </span>
                                             </SimpleTooltip>

web/src/lib/components/Pagination.svelte

@@ -2,6 +2,7 @@
 import { Select } from "bits-ui";
 import { ChevronUp, ChevronDown } from "@lucide/svelte";
 import type { Action } from "svelte/action";
+import { formatNumber } from "$lib/utils";
 
 const slideIn: Action<HTMLElement, number> = (node, direction) => {
   if (direction !== 0) {
@@ -59,11 +60,11 @@ const selectValue = $derived(String(currentPage));
 </script>
 
 {#if totalCount > 0 && totalPages > 1}
-  <div class="flex items-center text-sm">
+  <div class="flex items-start text-xs -mt-3 pl-2">
     <!-- Left zone: result count -->
     <div class="flex-1">
       <span class="text-muted-foreground">
-        Showing {start}&ndash;{end} of {totalCount} courses
+        Showing {formatNumber(start)}&ndash;{formatNumber(end)} of {formatNumber(totalCount)} courses
       </span>
     </div>
 
@@ -158,9 +159,9 @@ const selectValue = $derived(String(currentPage));
   </div>
 {:else if totalCount > 0}
   <!-- Single page: just show the count, no pagination controls -->
-  <div class="flex items-center text-sm">
+  <div class="flex items-start text-xs -mt-3 pl-2">
     <span class="text-muted-foreground">
-      Showing {start}&ndash;{end} of {totalCount} courses
+      Showing {formatNumber(start)}&ndash;{formatNumber(end)} of {formatNumber(totalCount)} courses
     </span>
   </div>
 {/if}

web/src/lib/components/SearchStatus.svelte

@@ -2,6 +2,7 @@
 import { onMount } from "svelte";
 import SimpleTooltip from "$lib/components/SimpleTooltip.svelte";
 import { relativeTime } from "$lib/time";
+import { formatNumber } from "$lib/utils";
 
 export interface SearchMeta {
   totalCount: number;
@@ -26,7 +27,7 @@ let formattedTime = $derived(
 let relativeTimeResult = $derived(meta ? relativeTime(meta.timestamp, now) : null);
 let relativeTimeText = $derived(relativeTimeResult?.text ?? "");
 
-let countLabel = $derived(meta ? meta.totalCount.toLocaleString() : "");
+let countLabel = $derived(meta ? formatNumber(meta.totalCount) : "");
 let resultNoun = $derived(meta ? (meta.totalCount !== 1 ? "results" : "result") : "");
 let durationLabel = $derived(meta ? `${Math.round(meta.durationMs)}ms` : "");
 

web/src/lib/components/SubjectCombobox.svelte

@@ -3,6 +3,7 @@ import { Combobox } from "bits-ui";
 import { Check, ChevronsUpDown } from "@lucide/svelte";
 import { fly } from "svelte/transition";
 import type { Subject } from "$lib/api";
+import { formatNumber } from "$lib/utils";
 
 let {
   subjects,
@@ -92,7 +93,7 @@ $effect(() => {
         </span>
       {/each}
       {#if !open && overflowCount > 0}
-        <span class="text-xs text-muted-foreground shrink-0">+{overflowCount}</span>
+        <span class="text-xs text-muted-foreground shrink-0">+{formatNumber(overflowCount)}</span>
       {/if}
     {/if}
     <Combobox.Input

web/src/lib/utils.ts

@@ -8,3 +8,26 @@ export function cn(...inputs: ClassValue[]) {
 /** Shared tooltip content styling for bits-ui Tooltip.Content */
 export const tooltipContentClass =
   "z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md max-w-72";
+
+export interface FormatNumberOptions {
+  /** Include sign for positive numbers (default: false) */
+  sign?: boolean;
+  /** Maximum fraction digits (default: 0 for integers) */
+  maximumFractionDigits?: number;
+}
+
+/**
+ * Format a number with locale-aware thousands separators.
+ * Uses browser locale via Intl.NumberFormat.
+ */
+export function formatNumber(num: number, options: FormatNumberOptions = {}): string {
+  const { sign = false, maximumFractionDigits = 0 } = options;
+  const formatted = new Intl.NumberFormat(undefined, {
+    maximumFractionDigits,
+  }).format(num);
+
+  if (sign && num >= 0) {
+    return `+${formatted}`;
+  }
+  return formatted;
+}

web/src/routes/(app)/admin/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { onMount } from "svelte";
 import { client, type AdminStatus } from "$lib/api";
+import { formatNumber } from "$lib/utils";
 
 let status = $state<AdminStatus | null>(null);
 let error = $state<string | null>(null);
@@ -24,19 +25,19 @@ onMount(async () => {
   <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
     <div class="bg-card border-border rounded-lg border p-4">
       <p class="text-muted-foreground text-sm">Users</p>
-      <p class="text-3xl font-bold">{status.userCount}</p>
+      <p class="text-3xl font-bold">{formatNumber(status.userCount)}</p>
     </div>
     <div class="bg-card border-border rounded-lg border p-4">
       <p class="text-muted-foreground text-sm">Active Sessions</p>
-      <p class="text-3xl font-bold">{status.sessionCount}</p>
+      <p class="text-3xl font-bold">{formatNumber(status.sessionCount)}</p>
     </div>
     <div class="bg-card border-border rounded-lg border p-4">
       <p class="text-muted-foreground text-sm">Courses</p>
-      <p class="text-3xl font-bold">{status.courseCount}</p>
+      <p class="text-3xl font-bold">{formatNumber(status.courseCount)}</p>
     </div>
     <div class="bg-card border-border rounded-lg border p-4">
       <p class="text-muted-foreground text-sm">Scrape Jobs</p>
-      <p class="text-3xl font-bold">{status.scrapeJobCount}</p>
+      <p class="text-3xl font-bold">{formatNumber(status.scrapeJobCount)}</p>
     </div>
   </div>
 

web/src/routes/(app)/admin/audit/+page.svelte

@@ -5,6 +5,7 @@ import { FlexRender, createSvelteTable } from "$lib/components/ui/data-table/ind
 import { formatAbsoluteDate } from "$lib/date";
 import { type DiffEntry, formatDiffPath, jsonDiff, tryParseJson } from "$lib/diff";
 import { relativeTime } from "$lib/time";
+import { formatNumber } from "$lib/utils";
 import {
   AlertCircle,
   ArrowDown,
@@ -139,9 +140,7 @@ function analyzeChange(entry: AuditLogEntry): ChangeAnalysis {
   return { kind: "scalar", oldRaw: entry.oldValue, newRaw: entry.newValue, diffs: [], delta };
 }
 
-function formatDelta(delta: number): string {
-  return delta >= 0 ? `+${delta}` : `${delta}`;
-}
+
 
 function stringify(val: unknown): string {
   if (val === undefined) return "∅";
@@ -351,7 +350,7 @@ const columnCount = columns.length;
                     {#if change.kind === "scalar"}
                       <span class="inline-flex items-center gap-1.5 text-sm">
                         {#if change.delta !== null}
-                          <span class="text-foreground">{formatDelta(change.delta)}<span class="text-muted-foreground/60">,</span></span>
+                          <span class="text-foreground">{formatNumber(change.delta, { sign: true })}<span class="text-muted-foreground/60">,</span></span>
                         {/if}
                         <span class="text-red-400">{change.oldRaw}</span>
                         <span class="text-muted-foreground/60">→</span>
@@ -378,7 +377,7 @@ const columnCount = columns.length;
                           <ChevronRight class="size-3.5 shrink-0" />
                         {/if}
                         <span class="underline decoration-dotted underline-offset-2">
-                          {change.diffs.length} fields changed
+                          {formatNumber(change.diffs.length)} fields changed
                         </span>
                       </span>
                     {/if}

web/src/routes/health/+page.svelte

@@ -16,6 +16,7 @@ import SimpleTooltip from "$lib/components/SimpleTooltip.svelte";
 import Footer from "$lib/components/Footer.svelte";
 import { type ServiceStatus, type ServiceInfo, type StatusResponse, client } from "$lib/api";
 import { relativeTime } from "$lib/time";
+import { formatNumber } from "$lib/utils";
 
 const REFRESH_INTERVAL = import.meta.env.DEV ? 3000 : 30000;
 const REQUEST_TIMEOUT = 10000;
@@ -105,10 +106,6 @@ const lastFetch = $derived(
 const relativeLastFetchResult = $derived(lastFetch ? relativeTime(lastFetch, now) : null);
 const relativeLastFetch = $derived(relativeLastFetchResult?.text ?? "");
 
-function formatNumber(num: number): string {
-  return num.toLocaleString();
-}
-
 onMount(() => {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let requestTimeoutId: ReturnType<typeof setTimeout> | null = null;