feat: use paste.hep.gg:

src/routes/home/+page.svelte

@@ -837,13 +837,22 @@
 	<!-- Create a Little bar that animates up when a sync is running -->
 	{#if syncState.show}
 		<div
-			class={`fixed bottom-0 left-0 right-0  text-white p-4
-			${syncState.syncing ? 'bg-blue-500' : syncState.success ? 'bg-green-500' : 'bg-red-500'}
-		
-		`}
+			class="fixed bottom-0 left-0 right-0 h-16 overflow-hidden"
 			transition:slide={{ duration: 500 }}
 		>
-			<div class="flex items-center">
+			<div class="absolute inset-0 bg-blue-900"></div>
+
+			<div
+				class={`absolute inset-y-0 left-0 transition-all duration-500 ease-in-out
+        ${syncState.syncing   ? 'bg-blue-500'
+        : syncState.success   ? 'bg-green-500'
+                              : 'bg-red-500'}`}
+				style="width: {syncState.syncing
+        ? `${syncProgress.percentage}%`
+        : '100%'};"
+			></div>
+
+			<div class="relative z-10 flex items-center h-full  text-white">
 				{#if !syncState.success && !syncState.error}
 					<!-- Add loading spinner -->
 					<svg
@@ -871,11 +880,10 @@
 					</div>
 				{:else if syncState.success}
 					<!-- Add Success title and status subtitle below it -->
-					<div class="flex flex-col">
+					<div class="flex flex-col px-2">
 						<h1 class="text-lg font-bold">Sync Successful!</h1>
 						<p class="text-sm">
-							Data synced successfully. Please run the import with the following link {syncState.url}
-							to import the data.
+							Data synced successfully. Use the copy button to copy the sync URL to your clipboard.
 						</p>
 					</div>
 
@@ -900,7 +908,7 @@
 					</div>
 				{:else}
 					<!-- Add Error title and status subtitle below it -->
-					<div class="flex flex-col">
+					<div class="flex flex-col px-2">
 						<h1 class="text-lg font-bold">Sync Failed!</h1>
 						<p class="text-sm">
 							An error occurred while syncing your data. Details: {syncState.message}