From 8a52f1db9d2441b1e668ecf3478e98aae4fbe200 Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Sun, 28 Dec 2025 19:14:36 +1030
Subject: [PATCH] feat(jobs): enhance job name formatting in JobCard and
 JobHistory components

---
 src/routes/settings/jobs/+page.svelte                |  4 ++--
 src/routes/settings/jobs/components/JobCard.svelte   | 12 ++++++++++--
 .../settings/jobs/components/JobHistory.svelte       | 10 +++++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/routes/settings/jobs/+page.svelte b/src/routes/settings/jobs/+page.svelte
index be53fb2..ed0dfd3 100644
--- a/src/routes/settings/jobs/+page.svelte
+++ b/src/routes/settings/jobs/+page.svelte
@@ -16,12 +16,12 @@
 	</div>
 
 	<!-- Jobs List -->
-	<div class="mb-8 space-y-4">
+	<div class="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2">
 		{#each data.jobs as job (job.id)}
 			<JobCard {job} />
 		{:else}
 			<div
-				class="rounded-lg border border-neutral-200 bg-white p-8 text-center dark:border-neutral-800 dark:bg-neutral-900"
+				class="col-span-full rounded-lg border border-neutral-200 bg-white p-8 text-center dark:border-neutral-800 dark:bg-neutral-900"
 			>
 				<p class="text-neutral-600 dark:text-neutral-400">No background jobs configured</p>
 			</div>
diff --git a/src/routes/settings/jobs/components/JobCard.svelte b/src/routes/settings/jobs/components/JobCard.svelte
index ab903bb..beb28f5 100644
--- a/src/routes/settings/jobs/components/JobCard.svelte
+++ b/src/routes/settings/jobs/components/JobCard.svelte
@@ -31,6 +31,14 @@
 		return new Date(dateStr).toLocaleString();
 	}
 
+	// Format job name: sync_databases -> Sync Databases
+	function formatJobName(name: string): string {
+		return name
+			.split('_')
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(' ');
+	}
+
 	// Get relative time (e.g., "in 5 minutes", "2 hours ago")
 	function getRelativeTime(dateStr: string | null): string {
 		if (!dateStr) return 'Not scheduled';
@@ -69,7 +77,7 @@
 			<div class="flex-1">
 				<div class="flex items-center gap-3">
 					<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-50">
-						{job.name}
+						{formatJobName(job.name)}
 					</h3>
 
 					<!-- Enabled/Disabled Badge -->
@@ -112,7 +120,7 @@
 									(result.data as { error?: string }).error || 'Failed to trigger job'
 								);
 							} else if (result.type === 'success') {
-								alertStore.add('success', `Job "${job.name}" triggered successfully`);
+								alertStore.add('success', `Job "${formatJobName(job.name)}" triggered successfully`);
 							}
 							await update();
 						};
diff --git a/src/routes/settings/jobs/components/JobHistory.svelte b/src/routes/settings/jobs/components/JobHistory.svelte
index 0d447d1..6a5dc84 100644
--- a/src/routes/settings/jobs/components/JobHistory.svelte
+++ b/src/routes/settings/jobs/components/JobHistory.svelte
@@ -25,6 +25,14 @@
 		return new Date(dateStr).toLocaleString();
 	}
 
+	// Format job name: sync_databases -> Sync Databases
+	function formatJobName(name: string): string {
+		return name
+			.split('_')
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(' ');
+	}
+
 	// Get relative time (e.g., "5m ago", "2h ago")
 	function getRelativeTime(dateStr: string): string {
 		const date = new Date(dateStr);
@@ -93,7 +101,7 @@
 						<td
 							class="border-b border-neutral-200 px-4 py-2 text-neutral-900 dark:border-neutral-800 dark:text-neutral-50"
 						>
-							{run.job_name}
+							{formatJobName(run.job_name)}
 						</td>
 
 						<!-- Status -->