From 91d4cd6824963e4b354cf5ce6ec5021882a5db5b Mon Sep 17 00:00:00 2001 From: Jason Rasmussen Date: Wed, 14 Jan 2026 07:56:09 -0500 Subject: [PATCH 01/16] refactor: tables (#25226) --- .../ServerStatisticsPanel.svelte | 66 +++++++------- .../settings/setting-checkboxes.svelte | 2 +- .../settings/setting-combobox.svelte | 2 +- .../user-api-key-list.svelte | 68 +++++++-------- .../user-usage-statistic.svelte | 85 ++++++++----------- .../library-management/(list)/+layout.svelte | 83 +++++++++--------- .../routes/admin/users/(list)/+layout.svelte | 67 ++++++++------- 7 files changed, 184 insertions(+), 189 deletions(-) diff --git a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte index 6c188d3fea..4d66142e44 100644 --- a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte +++ b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte @@ -1,9 +1,21 @@ {#snippet row(viewName: string, stats: AssetStatsResponseDto)} - - {viewName} - {stats.images.toLocaleString($locale)} - {stats.videos.toLocaleString($locale)} - {stats.total.toLocaleString($locale)} - + + {viewName} + {stats.images.toLocaleString($locale)} + {stats.videos.toLocaleString($locale)} + {stats.total.toLocaleString($locale)} + {/snippet} -
-

{$t('photos_and_videos')}

-
- - - - - - - - - - - {@render row($t('timeline'), timelineStats)} - {@render row($t('favorites'), favoriteStats)} - {@render row($t('archive'), archiveStats)} - {@render row($t('trash'), trashStats)} - -
{$t('view_name')}{$t('photos')}{$t('videos')}{$t('total')}
-
+
+ {$t('photos_and_videos')} + + + {$t('view_name')} + {$t('photos')} + {$t('videos')} + {$t('total')} + + + {@render row($t('timeline'), timelineStats)} + {@render row($t('favorites'), favoriteStats)} + {@render row($t('archive'), archiveStats)} + {@render row($t('trash'), trashStats)} + +
-
-

{$t('albums')}

-
-
- - - - - - - - - - - - - -
{$t('owned')}{$t('shared')}
{albumStats.owned.toLocaleString($locale)}{albumStats.shared.toLocaleString($locale)}
-
+ {$t('albums')} + + + {$t('owned')} + {$t('shared')} + + + + {albumStats.owned.toLocaleString($locale)} + {albumStats.shared.toLocaleString($locale)} + + +
diff --git a/web/src/routes/admin/library-management/(list)/+layout.svelte b/web/src/routes/admin/library-management/(list)/+layout.svelte index 3f9374283f..a8fa49c38d 100644 --- a/web/src/routes/admin/library-management/(list)/+layout.svelte +++ b/web/src/routes/admin/library-management/(list)/+layout.svelte @@ -8,7 +8,17 @@ import { locale } from '$lib/stores/preferences.store'; import { getBytesWithUnit } from '$lib/utils/byte-units'; import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk'; - import { Button, CommandPaletteDefaultProvider } from '@immich/ui'; + import { + Button, + CommandPaletteDefaultProvider, + Container, + Table, + TableBody, + TableCell, + TableHeader, + TableHeading, + TableRow, + } from '@immich/ui'; import type { Snippet } from 'svelte'; import { t } from 'svelte-i18n'; import { fade } from 'svelte/transition'; @@ -47,6 +57,15 @@ }; const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries)); + + const classes = { + column1: 'w-4/12', + column2: 'w-4/12', + column3: 'w-2/12', + column4: 'w-2/12', + column5: 'w-2/12', + column6: 'w-2/12', + }; @@ -54,51 +73,35 @@ -
+
{#if libraries.length > 0} - - - - - - - - - - - - +
{$t('name')}{$t('owner')}{$t('photos')}{$t('videos')}{$t('size')}
+ + {$t('name')} + {$t('owner')} + {$t('photos')} + {$t('videos')} + {$t('size')} + + + {#each libraries as library (library.id + library.name)} {@const { photos, usage, videos } = statistics[library.id]} {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)} - - - - - - - - - + + {/each} - -
{library.name} - {owners[library.id].name} - - {photos.toLocaleString($locale)} - - {videos.toLocaleString($locale)} - - {diskUsage} - {diskUsageUnit} - + + {library.name} + {owners[library.id].name} + {photos.toLocaleString($locale)} + {videos.toLocaleString($locale)} + {diskUsage} {diskUsageUnit} + -
+ + {:else} -
+ diff --git a/web/src/routes/admin/users/(list)/+layout.svelte b/web/src/routes/admin/users/(list)/+layout.svelte index 1979054014..206265acba 100644 --- a/web/src/routes/admin/users/(list)/+layout.svelte +++ b/web/src/routes/admin/users/(list)/+layout.svelte @@ -5,7 +5,18 @@ import { locale } from '$lib/stores/preferences.store'; import { getByteUnitString } from '$lib/utils/byte-units'; import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk'; - import { Button, CommandPaletteDefaultProvider, Container, Icon } from '@immich/ui'; + import { + Button, + CommandPaletteDefaultProvider, + Container, + Icon, + Table, + TableBody, + TableCell, + TableHeader, + TableHeading, + TableRow, + } from '@immich/ui'; import { mdiInfinity } from '@mdi/js'; import type { Snippet } from 'svelte'; import { t } from 'svelte-i18n'; @@ -34,6 +45,13 @@ }; const { Create } = $derived(getUserAdminsActions($t)); + + const classes = { + column1: 'w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12', + column2: 'hidden sm:block w-3/12', + column3: 'hidden xl:block w-3/12 2xl:w-2/12', + column4: 'w-4/12 lg:w-3/12 xl:w-2/12', + }; - - - - - - - - - +
{$t('email')}
+ + {$t('email')} + {$t('name')} + {$t('has_quota')} + + + {#each users as user (user.id)} - - - - - - + + {/each} - -
- {user.email} - + + -
+ + {@render children?.()} From 6fdd1ce41a3dcf5347484edbdcdc43ae6e3bc917 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 14 Jan 2026 10:21:48 -0600 Subject: [PATCH 02/16] chore: use font-mono (#25250) * chore: use font-mono * chore: override variable --- web/src/app.css | 2 +- .../server-statistics/ServerStatisticsCard.svelte | 4 ++-- .../server-statistics/ServerStatisticsPanel.svelte | 10 +++++----- .../gallery-viewer/gallery-viewer.svelte | 2 +- .../lib/components/shared-components/map/map.svelte | 2 +- .../shared-components/tree/breadcrumbs.svelte | 4 ++-- .../lib/components/shared-components/tree/tree.svelte | 4 +--- web/src/lib/components/timeline/Scrubber.svelte | 2 +- .../components/user-settings-page/PinCodeInput.svelte | 2 +- .../components/user-settings-page/app-settings.svelte | 2 +- .../user-settings-page/user-api-key-grid.svelte | 4 ++-- web/src/lib/modals/ApiKeySecretModal.svelte | 2 +- .../routes/(user)/utilities/geolocation/+page.svelte | 4 ++-- .../utilities/workflows/[workflowId]/+page.svelte | 2 +- 14 files changed, 22 insertions(+), 24 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index ca4634cfd9..67e943de4f 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -49,7 +49,7 @@ } @theme { - --font-immich-mono: GoogleSansCode, monospace; + --font-mono: 'GoogleSansCode', monospace; --spacing-18: 4.5rem; diff --git a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte index 373dd88741..5d76f79e91 100644 --- a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte +++ b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte @@ -26,10 +26,10 @@ {title} -
+
{zeros()}{value} {#if unit} - {unit} + {unit} {/if}
diff --git a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte index 4d66142e44..38374b86f2 100644 --- a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte +++ b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte @@ -54,7 +54,7 @@ {$t('photos')} -
+
{zeros(stats.photos)}{stats.photos}
@@ -64,7 +64,7 @@ {$t('videos')} -
+
{zeros(stats.videos)}{stats.videos}
@@ -74,11 +74,11 @@ {$t('storage')} -
+
{zeros(statsUsage)}{statsUsage} -
- {statsUsageUnit} +
+ {statsUsageUnit}
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte index eda9d822b4..f80edb20ba 100644 --- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte +++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte @@ -467,7 +467,7 @@ /> {#if showAssetName && !isTimelineAsset(asset)}
{asset.originalFileName}
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte index 22b35dba20..e3a926f9b6 100644 --- a/web/src/lib/components/shared-components/map/map.svelte +++ b/web/src/lib/components/shared-components/map/map.svelte @@ -361,7 +361,7 @@ > {#snippet children({ feature })}
{feature.properties?.point_count?.toLocaleString()}
diff --git a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte b/web/src/lib/components/shared-components/tree/breadcrumbs.svelte index b8e46b8925..20380f60ef 100644 --- a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte +++ b/web/src/lib/components/shared-components/tree/breadcrumbs.svelte @@ -51,7 +51,7 @@ /> {#each parents as parent (parent)} -
  • +
  • {parent.value} @@ -59,7 +59,7 @@
    • {/each} -
  • +

  • {node.value}

    • diff --git a/web/src/lib/components/shared-components/tree/tree.svelte b/web/src/lib/components/shared-components/tree/tree.svelte index dce7c89cd4..ac87371bf9 100644 --- a/web/src/lib/components/shared-components/tree/tree.svelte +++ b/web/src/lib/components/shared-components/tree/tree.svelte @@ -42,9 +42,7 @@ size="20" />
    - {node.value} + {node.value} {#if isOpen} diff --git a/web/src/lib/components/timeline/Scrubber.svelte b/web/src/lib/components/timeline/Scrubber.svelte index a3bec7581d..8aafbd80a1 100644 --- a/web/src/lib/components/timeline/Scrubber.svelte +++ b/web/src/lib/components/timeline/Scrubber.svelte @@ -588,7 +588,7 @@ > {#if !usingMobileDevice} {#if segment.hasLabel} -
    +
    {segment.year}
    {/if} diff --git a/web/src/lib/components/user-settings-page/PinCodeInput.svelte b/web/src/lib/components/user-settings-page/PinCodeInput.svelte index 69081c0b0b..c438d8f0b1 100644 --- a/web/src/lib/components/user-settings-page/PinCodeInput.svelte +++ b/web/src/lib/components/user-settings-page/PinCodeInput.svelte @@ -128,7 +128,7 @@ maxlength="1" bind:this={pinCodeInputElements[index]} id="pin-code-{index}" - class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-immich-mono bg-white dark:bg-light" + class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light" bind:value={pinValues[index]} onkeydown={handleKeydown} oninput={(event) => handleInput(event, index)} diff --git a/web/src/lib/components/user-settings-page/app-settings.svelte b/web/src/lib/components/user-settings-page/app-settings.svelte index bf31893b31..5c3b59fafe 100644 --- a/web/src/lib/components/user-settings-page/app-settings.svelte +++ b/web/src/lib/components/user-settings-page/app-settings.svelte @@ -68,7 +68,7 @@ - {selectedDate} + {selectedDate} {#if $locale !== 'default'} diff --git a/web/src/lib/components/user-settings-page/user-api-key-grid.svelte b/web/src/lib/components/user-settings-page/user-api-key-grid.svelte index 523705485f..fb10b53b34 100644 --- a/web/src/lib/components/user-settings-page/user-api-key-grid.svelte +++ b/web/src/lib/components/user-settings-page/user-api-key-grid.svelte @@ -39,7 +39,7 @@ checked={selectAllSubItems} onCheckedChange={handleSelectAllSubItems} /> -
    {#each subItems as item (item)} @@ -50,7 +50,7 @@ checked={selectedItems.includes(item)} onCheckedChange={() => handleToggleItem(item)} /> -
    {/each} diff --git a/web/src/lib/modals/ApiKeySecretModal.svelte b/web/src/lib/modals/ApiKeySecretModal.svelte index f7405d68c5..fba988aa58 100644 --- a/web/src/lib/modals/ApiKeySecretModal.svelte +++ b/web/src/lib/modals/ApiKeySecretModal.svelte @@ -15,7 +15,7 @@ {$t('api_key_description')} -