refactor: use new ui Table component

pnpm-lock.yaml

@@ -738,8 +738,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.56.1
+        specifier: ^0.57.3
-        version: 0.56.1(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)
+        version: 0.57.3(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -3087,8 +3087,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.56.1':
+  '@immich/ui@0.57.3':
-    resolution: {integrity: sha512-W4uEQn9pxVKRvIV7sl9p6dU2r7xlVsMFxBeClxtXzSsiJEoE10uZwBIm0L9q17c4TQ/+lk9e/w1e4jNSvFqFwQ==}
+    resolution: {integrity: sha512-5Y0KmyHRojem1gvX4hbr01GZ35oq22AkYE3CImvg3+jmZQhP0newTiqyVYJsfnEupLZKu5bFIlWykIe8uwMqDQ==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -15104,7 +15104,7 @@ snapshots:
     dependencies:
       svelte: 5.46.1
 
-  '@immich/ui@0.56.1(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)':
+  '@immich/ui@0.57.3(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)':
     dependencies:
       '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.46.1)
       '@internationalized/date': 3.10.0

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.56.1",
+    "@immich/ui": "^0.57.3",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",

web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte

@@ -14,10 +14,15 @@
   } from '@immich/sdk';
   import {
     Button,
-    HStack,
     IconButton,
     menuManager,
     modalManager,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeading,
+    TableRow,
     toastManager,
     type ContextMenuBaseProps,
     type MenuItems,
@@ -184,42 +189,36 @@
 >
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
-      <table class="mt-5 w-full text-start">
+      <Table striped spacing="tiny">
-        <thead
+        <TableHeader>
-          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
+          <TableHeading class="w-7/8 text-left">{$t('filename')}</TableHeading>
-        >
+          <TableHeading class="w-1/8" />
-          <tr class="flex w-full place-items-center">
+        </TableHeader>
-            <th class="w-7/8 text-left px-2 text-sm font-medium">{$t('filename')}</th>
+
-            <th class="w-1/8"></th>
+        <TableBody>
-          </tr>
-        </thead>
-        <tbody class="block w-full rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg">
           {#each integrityReport.items as { id, path } (id)}
-            <tr
+            <TableRow>
-              class={`flex py-1 w-full place-items-center even:bg-subtle/20 odd:bg-subtle/80 ${deleting.has(id) || deleting.has('all') ? 'text-gray-500' : ''}`}
+              <TableCell class="w-7/8 text-left px-4">{path}</TableCell>
-            >
+              <TableCell class="w-1/8 flex justify-end"
-              <td class="w-7/8 text-ellipsis text-left px-2 text-sm select-all">{path}</td>
+                ><IconButton
-              <td class="w-1/8 text-ellipsis text-right flex justify-end px-2">
-                <IconButton
                   color="secondary"
                   icon={mdiDotsVertical}
                   variant="ghost"
                   onclick={(event: Event) => handleOpen(event, { position: 'top-right' }, id)}
                   aria-label={$t('open')}
                   disabled={deleting.has(id) || deleting.has('all')}
-                /></td
+                /></TableCell
               >
-            </tr>
+            </TableRow>
           {/each}
-        </tbody>
+        </TableBody>
+
         {#if integrityReport.nextCursor}
-          <tfoot>
+          <tfoot class="flex justify-center mt-4">
-            <HStack class="mt-4 items-center justify-center">
+            <Button size="medium" color="secondary" onclick={() => loadMore()}>{$t('load_more')}</Button>
-              <Button color="primary" onclick={() => loadMore()}>{$t('load_more')}</Button>
-            </HStack>
           </tfoot>
         {/if}
-      </table>
+      </Table>
     </section>
   </section>
 </AdminPageLayout>