-
+
{$t('language_setting_description')}
diff --git a/web/src/lib/components/user-settings-page/user-api-key-list.svelte b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
index ec21ab9872..b3620355ef 100644
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/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,39 @@
-
+
{#if keys.length > 0}
-
-
-
- | {$t('name')} |
- {$t('permission')} |
- {$t('created')} |
- {$t('action')} |
-
-
-
+
+
+ {$t('name')}
+ {$t('permission')}
+ {$t('created')}
+ {$t('action')}
+
+
+
{#each keys as key (key.id)}
{@const { Update, Delete } = getApiKeyActions($t, key)}
-
- | {key.name} |
- {key.permissions} |
- {new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
- |
-
+
+ {key.name}
+
+ {key.permissions}
+
+ {new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
+
- |
-
+
+
{/each}
-
-
+
+
{/if}
diff --git a/web/src/lib/components/user-settings-page/user-usage-statistic.svelte b/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
index e2848f09fb..7582bd04a2 100644
--- a/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
+++ b/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
@@ -7,6 +7,7 @@
type AlbumStatisticsResponseDto,
type AssetStatsResponseDto,
} from '@immich/sdk';
+ import { Heading, Stack, Table, TableBody, TableCell, TableHeader, TableHeading, TableRow } from '@immich/ui';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@@ -56,56 +57,73 @@
{#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')}
-
-
-
-
- | {$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)}
-
-
-
+
+ {viewName}
+
+
+
+ {$t('photos')}
+ {stats.images.toLocaleString($locale)}
+
+
+ {$t('videos')}
+ {stats.videos.toLocaleString($locale)}
+
+
+ {$t('total')}
+ {stats.total.toLocaleString($locale)}
+
+
+
+{/snippet}
-
-
-
-
-
- | {$t('owned')} |
- {$t('shared')} |
-
-
-
-
- | {albumStats.owned.toLocaleString($locale)} |
- {albumStats.shared.toLocaleString($locale)} |
-
-
-
-
+
+ {$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)}
+
+
+
diff --git a/web/src/routes/admin/library-management/(list)/+layout.svelte b/web/src/routes/admin/library-management/(list)/+layout.svelte
index 3f9374283f..698b563113 100644
--- a/web/src/routes/admin/library-management/(list)/+layout.svelte
+++ b/web/src/routes/admin/library-management/(list)/+layout.svelte
@@ -8,7 +8,20 @@
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,
+ Card,
+ CardHeader,
+ CommandPaletteDefaultProvider,
+ Container,
+ Heading,
+ 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 +60,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 +76,71 @@
-
+
{#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)}
-
- | {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}
+
- |
-
+
+
{/each}
-
-
+
+
+
+
+ {#each libraries as library (library.id + library.name)}
+ {@const { photos, usage, videos } = statistics[library.id]}
+ {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)}
+
+
+
+
+ {library.name}
+
+
+
+
+
+
+ {$t('owner')}
+ {owners[library.id].name}
+
+
+ {$t('photos')}
+ {photos.toLocaleString($locale)}
+
+
+ {$t('videos')}
+ {videos.toLocaleString($locale)}
+
+
+ {$t('total')}
+ {diskUsage} {diskUsageUnit}
+
+
+
+
+ {/each}
+
{:else}
-
+
diff --git a/web/src/routes/admin/users/(list)/+layout.svelte b/web/src/routes/admin/users/(list)/+layout.svelte
index 1979054014..abf9a63c11 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('name')} |
- {$t('has_quota')} |
-
-
-
+
+
+ {$t('email')}
+ {$t('name')}
+ {$t('has_quota')}
+
+
+
{#each users as user (user.id)}
-
- |
- {user.email}
- |
- {user.name} |
-
+
+ {user.email}
+ {user.name}
+
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
{getByteUnitString(user.quotaSizeInBytes, $locale)}
@@ -77,16 +86,14 @@
{/if}
- |
-
+
+
- |
-
+
+
{/each}
-
-
+
+
{@render children?.()}