diff --git a/web/src/lib/services/library.service.ts b/web/src/lib/services/library.service.ts index b21d6ea050..81a140a924 100644 --- a/web/src/lib/services/library.service.ts +++ b/web/src/lib/services/library.service.ts @@ -20,7 +20,7 @@ import { type UpdateLibraryDto, } from '@immich/sdk'; import { modalManager, toastManager, type ActionItem } from '@immich/ui'; -import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js'; +import { mdiInformationOutline, mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js'; import type { MessageFormatter } from 'svelte-i18n'; export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResponseDto[]) => { @@ -45,6 +45,13 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp }; export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => { + const Detail: ActionItem = { + icon: mdiInformationOutline, + type: $t('command'), + title: $t('details'), + onAction: () => goto(Route.viewLibrary(library)), + }; + const Edit: ActionItem = { icon: mdiPencilOutline, type: $t('command'), @@ -84,7 +91,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse shortcuts: { shift: true, key: 'r' }, }; - return { Edit, Delete, AddFolder, AddExclusionPattern, Scan }; + return { Detail, Edit, Delete, AddFolder, AddExclusionPattern, Scan }; }; export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => { diff --git a/web/src/routes/admin/library-management/(list)/+layout.svelte b/web/src/routes/admin/library-management/(list)/+layout.svelte index 17a91b2a13..5002b92de4 100644 --- a/web/src/routes/admin/library-management/(list)/+layout.svelte +++ b/web/src/routes/admin/library-management/(list)/+layout.svelte @@ -4,14 +4,16 @@ import OnEvents from '$lib/components/OnEvents.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import { Route } from '$lib/route'; - import { getLibrariesActions } from '$lib/services/library.service'; + import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service'; 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, Container, + ContextMenuButton, + Link, + MenuItemType, Table, TableBody, TableCell, @@ -58,13 +60,18 @@ const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries)); + const getActionsForLibrary = (library: LibraryResponseDto) => { + const { Detail, Scan, Edit, Delete } = getLibraryActions($t, library); + return [Detail, Scan, Edit, MenuItemType.Divider, Delete]; + }; + 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', + column3: 'w-1/12', + column4: 'w-1/12', + column5: 'w-1/12', + column6: 'w-1/12 flex justify-end', }; @@ -89,14 +96,19 @@ {#each libraries as library (library.id + library.name)} {@const { photos, usage, videos } = statistics[library.id]} {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)} + {@const owner = owners[library.id]} - {library.name} - {owners[library.id].name} + + {library.name} + + + {owner.name} + {photos.toLocaleString($locale)} {videos.toLocaleString($locale)} {diskUsage} {diskUsageUnit} - + {/each}