feat: library details page (#23908)

* feat: library details page

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

web/src/routes/(user)/albums/+page.svelte

@@ -52,7 +52,7 @@
     bind:albumGroupIds={albumGroups}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_albums_message')} onClick={() => createAlbumAndRedirect()} />
+      <EmptyPlaceholder text={$t('no_albums_message')} onClick={() => createAlbumAndRedirect()} class="mt-10 mx-auto" />
     {/snippet}
   </Albums>
 </UserPageLayout>

web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -54,7 +54,7 @@
     onEscape={handleEscape}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_archived_assets_message')} />
+      <EmptyPlaceholder text={$t('no_archived_assets_message')} class="mt-10 mx-auto" />
     {/snippet}
   </Timeline>
 </UserPageLayout>

web/src/routes/(user)/explore/+page.svelte

@@ -114,6 +114,6 @@
   {/if}
 
   {#if !hasPeople && places.length === 0}
-    <EmptyPlaceholder text={$t('no_explore_results_message')} />
+    <EmptyPlaceholder text={$t('no_explore_results_message')} class="mt-10 mx-auto" />
   {/if}
 </UserPageLayout>

web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -59,7 +59,7 @@
     onEscape={handleEscape}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_favorites_message')} />
+      <EmptyPlaceholder text={$t('no_favorites_message')} class="mt-10 mx-auto" />
     {/snippet}
   </Timeline>
 </UserPageLayout>

web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -65,7 +65,7 @@
     removeAction={AssetAction.SET_VISIBILITY_TIMELINE}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
+      <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} class="mt-10 mx-auto" />
     {/snippet}
   </Timeline>
 </UserPageLayout>

web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte

@@ -101,7 +101,7 @@
       <MemoryLane />
     {/if}
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} />
+      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} class="mt-10 mx-auto" />
     {/snippet}
   </Timeline>
 </UserPageLayout>

web/src/routes/(user)/sharing/+page.svelte

@@ -94,7 +94,7 @@
         <Albums sharedAlbums={data.sharedAlbums} userSettings={settings} showOwner>
           <!-- Empty List -->
           {#snippet empty()}
-            <EmptyPlaceholder text={$t('no_shared_albums_message')} src={empty2Url} />
+            <EmptyPlaceholder text={$t('no_shared_albums_message')} src={empty2Url} class="mt-10 mx-auto" />
           {/snippet}
         </Albums>
       </div>

web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -104,7 +104,7 @@
         })}
       </p>
       {#snippet empty()}
-        <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} />
+        <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} class="mt-10 mx-auto" />
       {/snippet}
     </Timeline>
   </UserPageLayout>

web/src/routes/(user)/utilities/geolocation/+page.svelte

@@ -208,7 +208,7 @@
       {/if}
     {/snippet}
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} />
+      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} class="mt-10 mx-auto" />
     {/snippet}
   </Timeline>
 </UserPageLayout>

web/src/routes/admin/library-management/+page.svelte

@@ -1,36 +1,17 @@
 <script lang="ts">
-  import LibraryImportPathsForm from '$lib/components/forms/library-import-paths-form.svelte';
-  import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
+  import { goto } from '$app/navigation';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
-  import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
-  import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { getLibrariesActions, handleCreateLibrary, handleViewLibrary } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
-  import { ByteUnit, getBytesWithUnit } from '$lib/utils/byte-units';
-  import { handleError } from '$lib/utils/handle-error';
-  import {
-    createLibrary,
-    deleteLibrary,
-    getAllLibraries,
-    getLibraryStatistics,
-    getUserAdmin,
-    QueueCommand,
-    QueueName,
-    runQueueCommandLegacy,
-    scanLibrary,
-    updateLibrary,
-    type LibraryResponseDto,
-    type LibraryStatsResponseDto,
-    type UserResponseDto,
-  } from '@immich/sdk';
-  import { Button, LoadingSpinner, modalManager, Text, toastManager } from '@immich/ui';
-  import { mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
-  import { onMount } from 'svelte';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  import { getLibrary, getLibraryStatistics, getUserAdmin, type LibraryResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade, slide } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
   import type { PageData } from './$types';
 
   interface Props {
@@ -39,230 +20,57 @@
 
   let { data }: Props = $props();
 
-  let libraries: LibraryResponseDto[] = $state([]);
+  let libraries = $state(data.libraries);
+  let statistics = $state(data.statistics);
+  let owners = $state(data.owners);
 
-  let stats: LibraryStatsResponseDto[] = [];
-  let owner: UserResponseDto[] = $state([]);
-  let photos: number[] = $state([]);
-  let videos: number[] = $state([]);
-  let totalCount: number[] = $state([]);
-  let diskUsage: number[] = $state([]);
-  let diskUsageUnit: ByteUnit[] = $state([]);
-  let editImportPaths: number | undefined = $state();
-  let editScanSettings: number | undefined = $state();
-  let dropdownOpen: boolean[] = [];
+  const handleLibraryAdd = async (library: LibraryResponseDto) => {
+    statistics[library.id] = await getLibraryStatistics({ id: library.id });
+    owners[library.id] = await getUserAdmin({ id: library.ownerId });
+    libraries.push(library);
 
-  onMount(async () => {
-    await readLibraryList();
-  });
-
-  const closeAll = () => {
-    editImportPaths = undefined;
-    editScanSettings = undefined;
-
-    for (let index = 0; index < dropdownOpen.length; index++) {
-      dropdownOpen[index] = false;
-    }
+    await goto(`${AppRoute.ADMIN_LIBRARY_MANAGEMENT}/${library.id}`);
   };
 
-  const refreshStats = async (listIndex: number) => {
-    stats[listIndex] = await getLibraryStatistics({ id: libraries[listIndex].id });
-    owner[listIndex] = await getUserAdmin({ id: libraries[listIndex].ownerId });
-    photos[listIndex] = stats[listIndex].photos;
-    videos[listIndex] = stats[listIndex].videos;
-    totalCount[listIndex] = stats[listIndex].total;
-    [diskUsage[listIndex], diskUsageUnit[listIndex]] = getBytesWithUnit(stats[listIndex].usage, 0);
-  };
+  const handleLibraryUpdate = async (library: LibraryResponseDto) => {
+    const index = libraries.findIndex(({ id }) => id === library.id);
 
-  async function readLibraryList() {
-    libraries = await getAllLibraries();
-    dropdownOpen.length = libraries.length;
-
-    for (let index = 0; index < libraries.length; index++) {
-      await refreshStats(index);
-      dropdownOpen[index] = false;
-    }
-  }
-
-  const handleCreate = async (ownerId: string) => {
-    let createdLibrary: LibraryResponseDto | undefined;
-    try {
-      createdLibrary = await createLibrary({ createLibraryDto: { ownerId } });
-      toastManager.success($t('admin.library_created', { values: { library: createdLibrary.name } }));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_create_library'));
-    } finally {
-      await readLibraryList();
-    }
-
-    if (createdLibrary) {
-      // Open the import paths form for the newly created library
-      const createdLibraryIndex = libraries.findIndex((library) => library.id === createdLibrary.id);
-      const result = await modalManager.show(LibraryImportPathModal, {
-        title: $t('add_import_path'),
-        submitText: $t('add'),
-        importPath: null,
-      });
-
-      if (!result) {
-        if (createdLibraryIndex !== null) {
-          onEditImportPathClicked(createdLibraryIndex);
-        }
-        return;
-      }
-
-      switch (result.action) {
-        case 'submit': {
-          handleAddImportPath(result.importPath, createdLibraryIndex);
-          break;
-        }
-        case 'delete': {
-          await handleDelete(libraries[createdLibraryIndex], createdLibraryIndex);
-          break;
-        }
-      }
-    }
-  };
-
-  const handleAddImportPath = (newImportPath: string | null, libraryIndex: number) => {
-    if ((libraryIndex !== 0 && !libraryIndex) || !newImportPath) {
+    if (index === -1) {
       return;
     }
 
-    try {
-      onEditImportPathClicked(libraryIndex);
-
-      libraries[libraryIndex].importPaths.push(newImportPath);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_add_import_path'));
-    }
+    libraries[index] = await getLibrary({ id: library.id });
+    statistics[library.id] = await getLibraryStatistics({ id: library.id });
   };
 
-  const handleUpdate = async (library: Partial<LibraryResponseDto>, libraryIndex: number) => {
-    try {
-      const libraryId = libraries[libraryIndex].id;
-      await updateLibrary({ id: libraryId, updateLibraryDto: library });
-      closeAll();
-      await readLibraryList();
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_update_library'));
-    }
+  const handleDeleteLibrary = ({ id }: { id: string }) => {
+    libraries = libraries.filter((library) => library.id !== id);
+    delete statistics[id];
+    delete owners[id];
   };
 
-  const handleScanAll = async () => {
-    try {
-      await runQueueCommandLegacy({ name: QueueName.Library, queueCommandDto: { command: QueueCommand.Start } });
-
-      toastManager.info($t('admin.refreshing_all_libraries'));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_scan_libraries'));
-    }
-  };
-
-  const handleScan = async (libraryId: string) => {
-    try {
-      await scanLibrary({ id: libraryId });
-      toastManager.info($t('admin.scanning_library'));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_scan_library'));
-    }
-  };
-
-  const onRenameClicked = async (index: number) => {
-    closeAll();
-    const result = await modalManager.show(LibraryRenameModal, {
-      library: libraries[index],
-    });
-    if (result) {
-      await handleUpdate(result, index);
-    }
-  };
-
-  const onEditImportPathClicked = (index: number) => {
-    closeAll();
-    editImportPaths = index;
-  };
-
-  const onScanClicked = async (library: LibraryResponseDto) => {
-    closeAll();
-
-    if (library) {
-      await handleScan(library.id);
-    }
-  };
-
-  const onCreateNewLibraryClicked = async () => {
-    const result = await modalManager.show(LibraryUserPickerModal);
-    if (result) {
-      await handleCreate(result);
-    }
-  };
-
-  const onScanSettingClicked = (index: number) => {
-    closeAll();
-    editScanSettings = index;
-  };
-
-  const handleDelete = async (library: LibraryResponseDto, index: number) => {
-    closeAll();
-
-    if (!library) {
-      return;
-    }
-
-    const isConfirmed = await modalManager.showDialog({
-      prompt: $t('admin.confirm_delete_library', { values: { library: library.name } }),
-    });
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    await refreshStats(index);
-    const assetCount = totalCount[index];
-    if (assetCount > 0) {
-      const isConfirmed = await modalManager.showDialog({
-        prompt: $t('admin.confirm_delete_library_assets', { values: { count: assetCount } }),
-      });
-      if (!isConfirmed) {
-        return;
-      }
-    }
-
-    try {
-      await deleteLibrary({ id: library.id });
-      toastManager.success($t('admin.library_deleted'));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_remove_library'));
-    } finally {
-      await readLibraryList();
-    }
-  };
+  const { Create, ScanAll } = $derived(getLibrariesActions($t));
 </script>
 
+<OnEvents
+  onLibraryCreate={handleLibraryAdd}
+  onLibraryUpdate={handleLibraryUpdate}
+  onLibraryDelete={handleDeleteLibrary}
+/>
+
 <AdminPageLayout title={data.meta.title}>
   {#snippet buttons()}
     <div class="flex justify-end gap-2">
       {#if libraries.length > 0}
-        <Button leadingIcon={mdiSync} onclick={handleScanAll} size="small" variant="ghost" color="secondary">
-          <Text class="hidden md:block">{$t('scan_all_libraries')}</Text>
-        </Button>
+        <HeaderButton action={ScanAll} />
       {/if}
-      <Button
-        leadingIcon={mdiPlusBoxOutline}
-        onclick={onCreateNewLibraryClicked}
-        size="small"
-        variant="ghost"
-        color="secondary"
-      >
-        <Text class="hidden md:block">{$t('create_library')}</Text>
-      </Button>
+      <HeaderButton action={Create} />
     </div>
   {/snippet}
   <section class="my-4">
-    <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
+    <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
       {#if libraries.length > 0}
-        <table class="w-full text-start">
+        <table class="w-3/4 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"
           >
@@ -276,91 +84,36 @@
             </tr>
           </thead>
           <tbody class="block overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-            {#each libraries as library, index (library.id)}
+            {#each libraries as library (library.id + library.name)}
+              {@const { photos, usage, videos } = statistics[library.id]}
+              {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)}
               <tr
                 class="grid grid-cols-6 h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
               >
                 <td class="text-ellipsis px-4 text-sm">{library.name}</td>
                 <td class="text-ellipsis px-4 text-sm">
-                  {#if owner[index] == undefined}
-                    <LoadingSpinner size="large" />
-                  {:else}{owner[index].name}{/if}
+                  {owners[library.id].name}
                 </td>
                 <td class="text-ellipsis px-4 text-sm">
-                  {#if photos[index] == undefined}
-                    <LoadingSpinner size="large" />
-                  {:else}
-                    {photos[index].toLocaleString($locale)}
-                  {/if}
+                  {photos.toLocaleString($locale)}
                 </td>
                 <td class="text-ellipsis px-4 text-sm">
-                  {#if videos[index] == undefined}
-                    <LoadingSpinner size="large" />
-                  {:else}
-                    {videos[index].toLocaleString($locale)}
-                  {/if}
+                  {videos.toLocaleString($locale)}
                 </td>
                 <td class="text-ellipsis px-4 text-sm">
-                  {#if diskUsage[index] == undefined}
-                    <LoadingSpinner size="large" />
-                  {:else}
-                    {diskUsage[index]}
-                    {diskUsageUnit[index]}
-                  {/if}
+                  {diskUsage}
+                  {diskUsageUnit}
                 </td>
 
-                <td class="text-ellipsis px-4 text-sm">
-                  <ButtonContextMenu
-                    align="top-right"
-                    direction="left"
-                    color="primary"
-                    size="medium"
-                    icon={mdiDotsVertical}
-                    title={$t('library_options')}
-                    variant="filled"
-                  >
-                    <MenuOption onClick={() => onScanClicked(library)} text={$t('scan_library')} />
-                    <hr />
-                    <MenuOption onClick={() => onRenameClicked(index)} text={$t('rename')} />
-                    <MenuOption onClick={() => onEditImportPathClicked(index)} text={$t('edit_import_paths')} />
-                    <MenuOption onClick={() => onScanSettingClicked(index)} text={$t('scan_settings')} />
-                    <hr />
-                    <MenuOption
-                      onClick={() => handleDelete(library, index)}
-                      activeColor="bg-red-200"
-                      textColor="text-red-600"
-                      text={$t('delete_library')}
-                    />
-                  </ButtonContextMenu>
+                <td class="flex gap-2 text-ellipsis px-4 text-sm">
+                  <Button size="small" onclick={() => handleViewLibrary(library)}>{$t('view')}</Button>
                 </td>
               </tr>
-              {#if editImportPaths === index}
-                <!-- svelte-ignore node_invalid_placement_ssr -->
-                <div transition:slide={{ duration: 250 }}>
-                  <LibraryImportPathsForm
-                    {library}
-                    onSubmit={(lib) => handleUpdate(lib, index)}
-                    onCancel={() => (editImportPaths = undefined)}
-                  />
-                </div>
-              {/if}
-              {#if editScanSettings === index}
-                <!-- svelte-ignore node_invalid_placement_ssr -->
-                <div transition:slide={{ duration: 250 }} class="mb-4 ms-4 me-4">
-                  <LibraryScanSettingsForm
-                    {library}
-                    onSubmit={(lib) => handleUpdate(lib, index)}
-                    onCancel={() => (editScanSettings = undefined)}
-                  />
-                </div>
-              {/if}
             {/each}
           </tbody>
         </table>
-
-        <!-- Empty message -->
       {:else}
-        <EmptyPlaceholder text={$t('no_libraries_message')} onClick={onCreateNewLibraryClicked} />
+        <EmptyPlaceholder text={$t('no_libraries_message')} onClick={handleCreateLibrary} class="mt-10 mx-auto" />
       {/if}
     </div>
   </section>

web/src/routes/admin/library-management/+page.ts

@@ -1,6 +1,6 @@
 import { authenticate, requestServerInfo } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { searchUsersAdmin } from '@immich/sdk';
+import { getAllLibraries, getLibraryStatistics, getUserAdmin, searchUsersAdmin } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
@@ -9,8 +9,19 @@ export const load = (async ({ url }) => {
   const allUsers = await searchUsersAdmin({ withDeleted: false });
   const $t = await getFormatter();
 
+  const libraries = await getAllLibraries();
+  const statistics = await Promise.all(
+    libraries.map(async ({ id }) => [id, await getLibraryStatistics({ id })] as const),
+  );
+  const owners = await Promise.all(
+    libraries.map(async ({ id, ownerId }) => [id, await getUserAdmin({ id: ownerId })] as const),
+  );
+
   return {
     allUsers,
+    libraries,
+    statistics: Object.fromEntries(statistics),
+    owners: Object.fromEntries(owners),
     meta: {
       title: $t('admin.external_library_management'),
     },

web/src/routes/admin/library-management/[id]/+page.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import TableButton from '$lib/components/TableButton.svelte';
+  import { AppRoute } from '$lib/constants';
+  import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
+  import {
+    getLibraryActions,
+    getLibraryExclusionPatternActions,
+    getLibraryFolderActions,
+  } from '$lib/services/library.service';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  import { Card, CardBody, CardHeader, CardTitle, Code, Container, Heading, Icon, modalManager } from '@immich/ui';
+  import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  const statistics = data.statistics;
+  const [storageUsage, unit] = getBytesWithUnit(statistics.usage);
+
+  let library = $derived(data.library);
+
+  const { Rename, Delete, AddFolder, AddExclusionPattern, Scan } = $derived(getLibraryActions($t, library));
+</script>
+
+<OnEvents
+  onLibraryUpdate={(newLibrary) => (library = newLibrary)}
+  onLibraryDelete={({ id }) => id === library.id && goto(AppRoute.ADMIN_LIBRARY_MANAGEMENT)}
+/>
+
+<AdminPageLayout title={data.meta.title}>
+  {#snippet buttons()}
+    <div class="flex justify-end gap-2">
+      <HeaderButton action={Scan} />
+      <HeaderButton action={Rename} />
+      <HeaderButton action={Delete} />
+    </div>
+  {/snippet}
+  <Container size="large" center>
+    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
+      <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
+      <div class="flex flex-col lg:flex-row gap-4 col-span-full">
+        <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={statistics.photos} />
+        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics.videos} />
+        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
+      </div>
+      <Card color="secondary">
+        <CardHeader>
+          <div class="flex w-full justify-between items-center px-4 py-2">
+            <div class="flex gap-2 text-primary">
+              <Icon icon={mdiFolderOutline} size="1.5rem" />
+              <CardTitle>{$t('folders')}</CardTitle>
+            </div>
+            <HeaderButton action={AddFolder} />
+          </div>
+        </CardHeader>
+        <CardBody>
+          <div class="px-4 pb-7">
+            {#if library.importPaths.length === 0}
+              <EmptyPlaceholder
+                src={emptyFoldersUrl}
+                text={$t('admin.library_folder_description')}
+                fullWidth
+                onClick={() => modalManager.show(LibraryFolderAddModal, { library })}
+              />
+            {:else}
+              <table class="w-full">
+                <tbody>
+                  {#each library.importPaths as folder (folder)}
+                    {@const { Edit, Delete } = getLibraryFolderActions($t, library, folder)}
+                    <tr class="h-12">
+                      <td>
+                        <Code>{folder}</Code>
+                      </td>
+                      <td class="flex gap-2 justify-end">
+                        <TableButton action={Edit} />
+                        <TableButton action={Delete} />
+                      </td>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            {/if}
+          </div>
+        </CardBody>
+      </Card>
+      <Card color="secondary">
+        <CardHeader>
+          <div class="flex w-full justify-between items-center px-4 py-2">
+            <div class="flex gap-2 text-primary">
+              <Icon icon={mdiFilterMinusOutline} size="1.5rem" />
+              <CardTitle>{$t('exclusion_pattern')}</CardTitle>
+            </div>
+            <HeaderButton action={AddExclusionPattern} />
+          </div>
+        </CardHeader>
+        <CardBody>
+          <div class="px-4 pb-7">
+            <table class="w-full">
+              <tbody>
+                {#each library.exclusionPatterns as exclusionPattern (exclusionPattern)}
+                  {@const { Edit, Delete } = getLibraryExclusionPatternActions($t, library, exclusionPattern)}
+                  <tr class="h-12">
+                    <td>
+                      <Code>{exclusionPattern}</Code>
+                    </td>
+                    <td class="flex gap-2 justify-end">
+                      <TableButton action={Edit} />
+                      <TableButton action={Delete} />
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  </Container>
+</AdminPageLayout>

web/src/routes/admin/library-management/[id]/+page.ts

@@ -0,0 +1,28 @@
+import { AppRoute } from '$lib/constants';
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params: { id }, url }) => {
+  await authenticate(url, { admin: true });
+  let library: LibraryResponseDto;
+
+  try {
+    library = await getLibrary({ id });
+  } catch {
+    redirect(302, AppRoute.ADMIN_LIBRARY_MANAGEMENT);
+  }
+
+  const statistics = await getLibraryStatistics({ id });
+  const $t = await getFormatter();
+
+  return {
+    library,
+    statistics,
+    meta: {
+      title: $t('admin.library_details'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/admin/users/+page.svelte

@@ -77,36 +77,34 @@
           </tr>
         </thead>
         <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-          {#if allUsers}
-            {#each allUsers as user (user.id)}
-              {@const UserAdminActions = getUserAdminActions($t, user)}
-              <tr
-                class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {user.deletedAt
-                  ? 'bg-red-300 dark:bg-red-900'
-                  : 'even:bg-subtle/20 odd:bg-subtle/80'}"
+          {#each allUsers as user (user.id)}
+            {@const UserAdminActions = getUserAdminActions($t, user)}
+            <tr
+              class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {user.deletedAt
+                ? 'bg-red-300 dark:bg-red-900'
+                : 'even:bg-subtle/20 odd:bg-subtle/80'}"
+            >
+              <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm">
+                {user.email}
+              </td>
+              <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
+              <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">
+                <div class="container mx-auto flex flex-wrap justify-center">
+                  {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+                    {getByteUnitString(user.quotaSizeInBytes, $locale)}
+                  {:else}
+                    <Icon icon={mdiInfinity} size="16" />
+                  {/if}
+                </div>
+              </td>
+              <td
+                class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-4/12 lg:w-3/12 xl:w-2/12 text-ellipsis break-all text-sm"
               >
-                <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm">
-                  {user.email}
-                </td>
-                <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
-                <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">
-                  <div class="container mx-auto flex flex-wrap justify-center">
-                    {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
-                      {getByteUnitString(user.quotaSizeInBytes, $locale)}
-                    {:else}
-                      <Icon icon={mdiInfinity} size="16" />
-                    {/if}
-                  </div>
-                </td>
-                <td
-                  class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-4/12 lg:w-3/12 xl:w-2/12 text-ellipsis break-all text-sm"
-                >
-                  <TableButton action={UserAdminActions.View} />
-                  <TableButton action={UserAdminActions.ContextMenu} />
-                </td>
-              </tr>
-            {/each}
-          {/if}
+                <TableButton action={UserAdminActions.View} />
+                <TableButton action={UserAdminActions.ContextMenu} />
+              </td>
+            </tr>
+          {/each}
         </tbody>
       </table>
     </section>

web/src/routes/admin/users/[id]/+page.svelte

@@ -102,7 +102,7 @@
         <Alert color="danger" class="my-4" title={$t('user_has_been_deleted')} icon={mdiTrashCanOutline} />
       {/if}
 
-      <div class="grid gap-4 grod-cols-1 lg:grid-cols-2 w-full">
+      <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
         <div class="col-span-full flex gap-4 items-center my-4">
           <UserAvatar {user} size="md" />
           <Heading tag="h1" size="large">{user.name}</Heading>