From 87f34ba505a14df2a48d132676568a7aacd8880b Mon Sep 17 00:00:00 2001
From: izzy <me@insrt.uk>
Date: Tue, 25 Nov 2025 10:17:10 +0000
Subject: [PATCH] refactor: use <ProgressBar /> from ui library

---
 pnpm-lock.yaml                          | 25 ++++++++++++-------------
 web/package.json                        |  2 +-
 web/src/routes/maintenance/+page.svelte |  9 ++-------
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acdc2045d0..fbea4c01ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -717,8 +717,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.43.0
-        version: 0.43.0(@internationalized/date@3.8.2)(svelte@5.43.0)
+        specifier: ^0.47.0
+        version: 0.47.0(svelte@5.43.0)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -2823,8 +2823,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.43.0':
-    resolution: {integrity: sha512-dwWIURsGghsbeFnqxCqUyWslyRU2vQjih7uewNr0nsW68bJ5/esl+V/Kiw2opiNiwI4Q3HEcuTRY57k4Hq+X3Q==}
+  '@immich/ui@0.47.0':
+    resolution: {integrity: sha512-cKydhXtgBLaJNlCX9JsDN5xYi9X9dosg2g6tcrID1L33fmBDBVQMf73TpAYUG9NJx0XtAvjlTkB81L/61O1huw==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -2967,8 +2967,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@internationalized/date@3.8.2':
-    resolution: {integrity: sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==}
+  '@internationalized/date@3.10.0':
+    resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==}
 
   '@ioredis/commands@1.4.0':
     resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
@@ -14450,11 +14450,12 @@ snapshots:
     dependencies:
       svelte: 5.43.0
 
-  '@immich/ui@0.43.0(@internationalized/date@3.8.2)(svelte@5.43.0)':
+  '@immich/ui@0.47.0(svelte@5.43.0)':
     dependencies:
       '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.43.0)
+      '@internationalized/date': 3.10.0
       '@mdi/js': 7.4.47
-      bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.43.0)
+      bits-ui: 2.9.8(@internationalized/date@3.10.0)(svelte@5.43.0)
       luxon: 3.7.2
       simple-icons: 15.18.0
       svelte: 5.43.0
@@ -14462,8 +14463,6 @@ snapshots:
       tailwind-merge: 3.3.1
       tailwind-variants: 3.1.1(tailwind-merge@3.3.1)(tailwindcss@4.1.16)
       tailwindcss: 4.1.16
-    transitivePeerDependencies:
-      - '@internationalized/date'
 
   '@inquirer/checkbox@4.2.1(@types/node@22.19.1)':
     dependencies:
@@ -14603,7 +14602,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.1
 
-  '@internationalized/date@3.8.2':
+  '@internationalized/date@3.10.0':
     dependencies:
       '@swc/helpers': 0.5.17
 
@@ -17396,11 +17395,11 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@2.9.8(@internationalized/date@3.8.2)(svelte@5.43.0):
+  bits-ui@2.9.8(@internationalized/date@3.10.0)(svelte@5.43.0):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.4
-      '@internationalized/date': 3.8.2
+      '@internationalized/date': 3.10.0
       esm-env: 1.2.2
       runed: 0.29.2(svelte@5.43.0)
       svelte: 5.43.0
diff --git a/web/package.json b/web/package.json
index d157c9fde0..958b298bf6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -28,7 +28,7 @@
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.43.0",
+    "@immich/ui": "^0.47.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
diff --git a/web/src/routes/maintenance/+page.svelte b/web/src/routes/maintenance/+page.svelte
index 16a397c61c..61862650b8 100644
--- a/web/src/routes/maintenance/+page.svelte
+++ b/web/src/routes/maintenance/+page.svelte
@@ -5,7 +5,7 @@
   import { maintenanceStore } from '$lib/stores/maintenance.store';
   import { handleError } from '$lib/utils/handle-error';
   import { MaintenanceAction, setMaintenanceMode } from '@immich/sdk';
-  import { Button, Heading, Link, Scrollable, Text } from '@immich/ui';
+  import { Button, Heading, Link, ProgressBar, Scrollable, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   const { auth, status } = maintenanceStore;
@@ -49,12 +49,7 @@
           <pre class="text-left"><code>{error}</code></pre>
         </Scrollable>
       {:else}
-        <div class="w-60 h-2.5 bg-gray-300 rounded-full overflow-hidden">
-          <div
-            class="h-full bg-blue-600 transition-all duration-700"
-            style="width: {($status.progress || 0) * 100}%"
-          ></div>
-        </div>
+        <ProgressBar progress={$status.progress || 0} />
         {#if $status.task !== 'ready'}
           <Text>{$t(`maintenance_task_${$status.task as 'backup' | 'restore'}`)}</Text>
         {/if}