refactor: tables (#25226)

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -5,7 +5,7 @@
   import { getApiKeyActions, getApiKeysActions } from '$lib/services/api-key.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getApiKeys, type ApiKeyResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Table, TableBody, TableCell, TableHeader, TableHeading, TableRow, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -20,15 +20,11 @@
   };
 
   const onApiKeyUpdate = (update: ApiKeyResponseDto) => {
-    for (const key of keys) {
-      if (key.id === update.id) {
-        Object.assign(key, update);
-      }
-    }
+    keys = keys.map((key) => (key.id === update.id ? update : key));
   };
 
   const onApiKeyDelete = ({ id }: ApiKeyResponseDto) => {
-    keys = keys.filter((apiKey) => apiKey.id !== id);
+    keys = keys.filter((key) => key.id !== id);
   };
 
   const { Create } = $derived(getApiKeysActions($t));
@@ -39,45 +35,41 @@
 <section class="my-4">
   <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
     <div class="mb-2 flex justify-end">
-      <Button leadingIcon={Create.icon} shape="round" size="small" onclick={() => Create.onAction(Create)}
-        >{Create.title}</Button
-      >
+      <Button leadingIcon={Create.icon} shape="round" size="small" onclick={() => Create.onAction(Create)}>
+        {Create.title}
+      </Button>
     </div>
 
     {#if keys.length > 0}
-      <table class="w-full text-start">
-        <thead
-          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"
-        >
-          <tr class="flex w-full place-items-center">
-            <th class="w-1/4 text-center text-sm font-medium">{$t('name')}</th>
-            <th class="w-1/4 text-center text-sm font-medium">{$t('permission')}</th>
-            <th class="w-1/4 text-center text-sm font-medium">{$t('created')}</th>
-            <th class="w-1/4 text-center text-sm font-medium">{$t('action')}</th>
-          </tr>
-        </thead>
-        <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+      <Table class="mt-4" striped spacing="small">
+        <TableHeader>
+          <TableHeading>{$t('name')}</TableHeading>
+          <TableHeading>{$t('permission')}</TableHeading>
+          <TableHeading>{$t('created')}</TableHeading>
+          <TableHeading>{$t('action')}</TableHeading>
+        </TableHeader>
+
+        <TableBody>
           {#each keys as key (key.id)}
             {@const { Update, Delete } = getApiKeyActions($t, key)}
-            <tr
-              class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
-            >
-              <td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden">{key.name}</td>
-              <td
-                class="w-1/4 text-ellipsis px-4 text-xs overflow-hidden line-clamp-3 break-all font-immich-mono"
-                title={JSON.stringify(key.permissions, undefined, 2)}>{key.permissions}</td
-              >
-              <td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden"
-                >{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
-              </td>
-              <td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/4">
+            <TableRow>
+              <TableCell>{key.name}</TableCell>
+              <TableCell>
+                <Text
+                  class="font-mono overflow-hidden line-clamp-3"
+                  size="small"
+                  title={JSON.stringify(key.permissions, null, 2)}>{key.permissions}</Text
+                >
+              </TableCell>
+              <TableCell>{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}</TableCell>
+              <TableCell class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1">
                 <TableButton action={Update} size="small" />
                 <TableButton action={Delete} size="small" />
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
           {/each}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     {/if}
   </div>
 </section>

web/src/lib/components/user-settings-page/user-usage-statistic.svelte

@@ -7,6 +7,7 @@
     type AlbumStatisticsResponseDto,
     type AssetStatsResponseDto,
   } from '@immich/sdk';
+  import { Heading, Table, TableBody, TableCell, TableHeader, TableHeading, TableRow } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -56,56 +57,42 @@
 </script>
 
 {#snippet row(viewName: string, stats: AssetStatsResponseDto)}
-  <tr
-    class="flex h-14 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
-  >
-    <td class="w-1/4 px-4 text-sm">{viewName}</td>
-    <td class="w-1/4 px-4 text-sm">{stats.images.toLocaleString($locale)}</td>
-    <td class="w-1/4 px-4 text-sm">{stats.videos.toLocaleString($locale)}</td>
-    <td class="w-1/4 px-4">{stats.total.toLocaleString($locale)}</td>
-  </tr>
+  <TableRow>
+    <TableCell class="w-1/4">{viewName}</TableCell>
+    <TableCell class="w-1/4">{stats.images.toLocaleString($locale)}</TableCell>
+    <TableCell class="w-1/4">{stats.videos.toLocaleString($locale)}</TableCell>
+    <TableCell class="w-1/4">{stats.total.toLocaleString($locale)}</TableCell>
+  </TableRow>
 {/snippet}
 
-<section class="my-6">
-  <p class="text-xs dark:text-white uppercase">{$t('photos_and_videos')}</p>
-  <div class="overflow-x-auto">
-    <table class="w-full text-start mt-4">
-      <thead
-        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"
-      >
-        <tr class="flex w-full place-items-center text-sm font-medium text-center">
-          <th class="w-1/4">{$t('view_name')}</th>
-          <th class="w-1/4">{$t('photos')}</th>
-          <th class="w-1/4">{$t('videos')}</th>
-          <th class="w-1/4">{$t('total')}</th>
-        </tr>
-      </thead>
-      <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-        {@render row($t('timeline'), timelineStats)}
-        {@render row($t('favorites'), favoriteStats)}
-        {@render row($t('archive'), archiveStats)}
-        {@render row($t('trash'), trashStats)}
-      </tbody>
-    </table>
-  </div>
+<section class="my-6 w-full">
+  <Heading size="tiny">{$t('photos_and_videos')}</Heading>
+  <Table striped spacing="medium" class="mt-4">
+    <TableHeader>
+      <TableHeading class="w-1/4">{$t('view_name')}</TableHeading>
+      <TableHeading class="w-1/4">{$t('photos')}</TableHeading>
+      <TableHeading class="w-1/4">{$t('videos')}</TableHeading>
+      <TableHeading class="w-1/4">{$t('total')}</TableHeading>
+    </TableHeader>
+    <TableBody>
+      {@render row($t('timeline'), timelineStats)}
+      {@render row($t('favorites'), favoriteStats)}
+      {@render row($t('archive'), archiveStats)}
+      {@render row($t('trash'), trashStats)}
+    </TableBody>
+  </Table>
 
-  <div class="mt-6">
-    <p class="text-xs dark:text-white uppercase">{$t('albums')}</p>
-  </div>
-  <div class="overflow-x-auto">
-    <table class="w-full text-start mt-4">
-      <thead class="mb-4 flex h-12 w-full rounded-md border text-primary dark:border-immich-dark-gray bg-subtle">
-        <tr class="flex w-full place-items-center text-sm font-medium text-center">
-          <th class="w-1/2">{$t('owned')}</th>
-          <th class="w-1/2">{$t('shared')}</th>
-        </tr>
-      </thead>
-      <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-        <tr class="flex h-14 w-full place-items-center text-center dark:text-immich-dark-fg bg-subtle/20">
-          <td class="w-1/2 px-4 text-sm">{albumStats.owned.toLocaleString($locale)}</td>
-          <td class="w-1/2 px-4 text-sm">{albumStats.shared.toLocaleString($locale)}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <Heading size="tiny" class="mt-8">{$t('albums')}</Heading>
+  <Table striped spacing="medium" class="mt-4">
+    <TableHeader>
+      <TableHeading class="w-1/2">{$t('owned')}</TableHeading>
+      <TableHeading class="w-1/2">{$t('shared')}</TableHeading>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell class="w-1/2">{albumStats.owned.toLocaleString($locale)}</TableCell>
+        <TableCell class="w-1/2">{albumStats.shared.toLocaleString($locale)}</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
 </section>