feat: library details page (#23908)

* feat: library details page * chore: clean up --------- Co-authored-by: Jason Rasmussen <jason@rasm.me>
2026-05-18 03:10:24 +03:00 · 2025-11-18 21:27:41 +01:00
parent c086a65fa8
commit d310c6f3cd
29 changed files with 814 additions and 863 deletions
@@ -0,0 +1 @@
+<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path d="M718.697 359.789c2.347 69.208-149.828 213.346-331.607 165.169-84.544-22.409-76.298-62.83-139.698-114.488-37.789-30.789-92.638-53.5-106.885-99.138-12.309-39.393-3.044-82.222 20.77-110.466 53.556-63.52 159.542-108.522 260.374-12.465 100.832 96.056 290.968-7.105 297.046 171.388z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M629.602 207.307v-51.154c0-28.251-22.902-51.153-51.154-51.153H322.681c-28.251 0-51.153 22.902-51.153 51.153v127.884" fill="#fff"/><path d="M629.602 207.307v-51.154c0-28.251-22.902-51.153-51.154-51.153H322.681c-28.251 0-51.153 22.902-51.153 51.153v127.884" stroke="#E1E4E5" stroke-width="4.13"/><path fill-rule="evenodd" clip-rule="evenodd" d="M271.528 216.252h165.353a25.578 25.578 0 0 0 21.28-11.382l35.884-53.941a25.575 25.575 0 0 1 21.357-11.407h114.2c28.251 0 51.154 22.902 51.154 51.153v255.767c0 28.252-22.903 51.154-51.154 51.154H271.528c-28.251 0-51.154-22.902-51.154-51.154V267.405c0-28.251 22.903-51.153 51.154-51.153z" fill="#fff" stroke="#E1E4E5" stroke-width="4.13"/><path fill-rule="evenodd" clip-rule="evenodd" d="M320.022 432.016v3.968h3.964A3.028 3.028 0 0 1 327 439a3.028 3.028 0 0 1-3.014 3.016h-3.964v3.968a3.028 3.028 0 0 1-3.014 3.016 3.029 3.029 0 0 1-3.014-3.016v-3.951h-3.98a3.029 3.029 0 0 1-3.014-3.017 3.029 3.029 0 0 1 3.014-3.016h3.964v-3.984a3.031 3.031 0 0 1 3.03-3.016 3.028 3.028 0 0 1 3.014 3.016zm-33.14-27.793v5.554h5.748c2.399 0 4.37 1.905 4.37 4.223 0 2.318-1.971 4.223-4.37 4.223h-5.748v5.554c0 2.318-1.971 4.223-4.37 4.223s-4.37-1.905-4.37-4.223v-5.531h-5.772c-2.399 0-4.37-1.905-4.37-4.223 0-2.318 1.971-4.223 4.37-4.223h5.748v-5.577c0-2.318 1.971-4.223 4.394-4.223 2.399 0 4.37 1.905 4.37 4.223z" fill="#E1E4E5"/><circle cx="451.101" cy="358.294" r="98.899" fill="#aaa"/><rect x="444.142" y="322.427" width="13.918" height="71.734" rx="6.959" fill="#fff"/><rect x="486.968" y="351.335" width="13.918" height="71.734" rx="6.959" transform="rotate(90 486.968 351.335)" fill="#fff"/><ellipse rx="13.917" ry="13.254" transform="matrix(-1 0 0 1 718.227 479.149)" fill="#E1E4E5"/><circle r="4.639" transform="matrix(-1 0 0 1 292.465 519.783)" fill="#E1E4E5"/><circle r="6.627" transform="matrix(-1 0 0 1 566.399 205.929)" fill="#E1E4E5"/><circle r="6.476" transform="scale(1 -1) rotate(-75 -180.786 -314.12)" fill="#E1E4E5"/><circle r="8.615" transform="matrix(-1 0 0 1 217.158 114.719)" fill="#E1E4E5"/><ellipse rx="6.627" ry="5.302" transform="matrix(-1 0 0 1 704.513 233.511)" fill="#E1E4E5"/><path d="M186.177 456.259h.174c1.026 14.545 11.844 14.769 11.844 14.769s-11.929.233-11.929 17.04c0-16.807-11.929-17.04-11.929-17.04s10.814-.224 11.84-14.769zm574.334-165.951h.18c1.067 15.36 12.309 15.596 12.309 15.596s-12.397.246-12.397 17.994c0-17.748-12.396-17.994-12.396-17.994s11.237-.236 12.304-15.596z" fill="#E1E4E5"/><defs><linearGradient id="a" x1="530.485" y1="779.032" x2="277.414" y2="-357.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient></defs></svg>
@@ -1,207 +0,0 @@
-<script lang="ts">
-  import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
-  import { validate, type LibraryResponseDto } from '@immich/sdk';
-  import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
-  import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    library: LibraryResponseDto;
-    onCancel: () => void;
-    onSubmit: (library: LibraryResponseDto) => void;
-  }
-
-  let { library = $bindable(), onCancel, onSubmit }: Props = $props();
-
-  let validatedPaths: ValidateLibraryImportPathResponseDto[] = $state([]);
-
-  let importPaths = $derived(validatedPaths.map((validatedPath) => validatedPath.importPath));
-
-  onMount(async () => {
-    if (library.importPaths) {
-      await handleValidation();
-    } else {
-      library.importPaths = [];
-    }
-  });
-
-  const handleValidation = async () => {
-    if (library.importPaths) {
-      const validation = await validate({
-        id: library.id,
-        validateLibraryDto: { importPaths: library.importPaths },
-      });
-
-      validatedPaths = validation.importPaths ?? [];
-    }
-  };
-
-  const revalidate = async (notifyIfSuccessful = true) => {
-    await handleValidation();
-    let failedPaths = 0;
-    for (const validatedPath of validatedPaths) {
-      if (!validatedPath.isValid) {
-        failedPaths++;
-      }
-    }
-    if (failedPaths === 0) {
-      if (notifyIfSuccessful) {
-        toastManager.success($t('admin.paths_validated_successfully'));
-      }
-    } else {
-      toastManager.warning($t('errors.paths_validation_failed', { values: { paths: failedPaths } }));
-    }
-  };
-
-  const handleAddImportPath = async (importPathToAdd: string | null) => {
-    if (!importPathToAdd) {
-      return;
-    }
-
-    if (!library.importPaths) {
-      library.importPaths = [];
-    }
-
-    try {
-      // Check so that import path isn't duplicated
-      if (!library.importPaths.includes(importPathToAdd)) {
-        library.importPaths.push(importPathToAdd);
-        await revalidate(false);
-      }
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_add_import_path'));
-    }
-  };
-
-  const handleEditImportPath = async (editedImportPath: string | null, pathIndexToEdit: number) => {
-    if (editedImportPath === null) {
-      return;
-    }
-
-    if (!library.importPaths) {
-      library.importPaths = [];
-    }
-
-    try {
-      // Check so that import path isn't duplicated
-      if (!library.importPaths.includes(editedImportPath)) {
-        // Update import path
-        library.importPaths[pathIndexToEdit] = editedImportPath;
-        await revalidate(false);
-      }
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_edit_import_path'));
-    }
-  };
-
-  const handleDeleteImportPath = async (pathIndexToDelete?: number) => {
-    if (pathIndexToDelete === undefined) {
-      return;
-    }
-
-    try {
-      if (!library.importPaths) {
-        library.importPaths = [];
-      }
-
-      const pathToDelete = library.importPaths[pathIndexToDelete];
-      library.importPaths = library.importPaths.filter((path) => path != pathToDelete);
-      await handleValidation();
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_import_path'));
-    }
-  };
-
-  const onEditImportPath = async (pathIndexToEdit?: number) => {
-    const result = await modalManager.show(LibraryImportPathModal, {
-      title: pathIndexToEdit === undefined ? $t('add_import_path') : $t('edit_import_path'),
-      submitText: pathIndexToEdit === undefined ? $t('add') : $t('save'),
-      isEditing: pathIndexToEdit !== undefined,
-      importPath: pathIndexToEdit === undefined ? null : library.importPaths[pathIndexToEdit],
-      importPaths: library.importPaths,
-    });
-
-    if (!result) {
-      return;
-    }
-
-    switch (result.action) {
-      case 'submit': {
-        // eslint-disable-next-line unicorn/prefer-ternary
-        if (pathIndexToEdit === undefined) {
-          await handleAddImportPath(result.importPath);
-        } else {
-          await handleEditImportPath(result.importPath, pathIndexToEdit);
-        }
-        break;
-      }
-      case 'delete': {
-        await handleDeleteImportPath(pathIndexToEdit);
-        break;
-      }
-    }
-  };
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    onSubmit({ ...library });
-  };
-</script>
-
-<form {onsubmit} autocomplete="off" class="m-4 flex flex-col gap-4">
-  <table class="text-start">
-    <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-      {#each validatedPaths as validatedPath, listIndex (validatedPath.importPath)}
-        <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/8 text-ellipsis ps-8 text-sm">
-            {#if validatedPath.isValid}
-              <Icon icon={mdiCheckCircleOutline} size="24" title={validatedPath.message} class="text-success" />
-            {:else}
-              <Icon icon={mdiAlertOutline} size="24" title={validatedPath.message} class="text-warning" />
-            {/if}
-          </td>
-
-          <td class="w-4/5 text-ellipsis px-4 text-sm">{validatedPath.importPath}</td>
-          <td class="w-1/5 text-ellipsis flex justify-center">
-            <IconButton
-              shape="round"
-              color="primary"
-              icon={mdiPencilOutline}
-              aria-label={$t('edit_import_path')}
-              onclick={() => onEditImportPath(listIndex)}
-              size="small"
-            />
-          </td>
-        </tr>
-      {/each}
-      <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-4/5 text-ellipsis px-4 text-sm">
-          {#if importPaths.length === 0}
-            {$t('admin.no_paths_added')}
-          {/if}</td
-        >
-        <td class="w-1/5 text-ellipsis px-4 text-sm">
-          <Button shape="round" size="small" onclick={() => onEditImportPath()}>{$t('add_path')}</Button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="flex justify-between w-full">
-    <div class="justify-end gap-2">
-      <Button shape="round" leadingIcon={mdiRefresh} size="small" color="secondary" onclick={() => revalidate()}
-        >{$t('validate')}</Button
-      >
-    </div>
-    <div class="flex justify-end gap-2">
-      <Button shape="round" size="small" color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
-      <Button shape="round" size="small" type="submit">{$t('save')}</Button>
-    </div>
-  </div>
-</form>
@@ -1,151 +0,0 @@
-<script lang="ts">
-  import LibraryExclusionPatternModal from '$lib/modals/LibraryExclusionPatternModal.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { type LibraryResponseDto } from '@immich/sdk';
-  import { Button, IconButton, modalManager } from '@immich/ui';
-  import { mdiPencilOutline } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    library: Partial<LibraryResponseDto>;
-    onCancel: () => void;
-    onSubmit: (library: Partial<LibraryResponseDto>) => void;
-  }
-
-  let { library = $bindable(), onCancel, onSubmit }: Props = $props();
-
-  let exclusionPatterns: string[] = $state([]);
-
-  onMount(() => {
-    if (library.exclusionPatterns) {
-      exclusionPatterns = library.exclusionPatterns;
-    } else {
-      library.exclusionPatterns = [];
-    }
-  });
-
-  const handleAddExclusionPattern = (exclusionPatternToAdd: string) => {
-    if (!library.exclusionPatterns) {
-      library.exclusionPatterns = [];
-    }
-
-    try {
-      // Check so that exclusion pattern isn't duplicated
-      if (!library.exclusionPatterns.includes(exclusionPatternToAdd)) {
-        library.exclusionPatterns.push(exclusionPatternToAdd);
-        exclusionPatterns = library.exclusionPatterns;
-      }
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_add_exclusion_pattern'));
-    }
-  };
-
-  const handleEditExclusionPattern = (editedExclusionPattern: string, patternIndex: number) => {
-    if (!library.exclusionPatterns) {
-      library.exclusionPatterns = [];
-    }
-
-    try {
-      library.exclusionPatterns[patternIndex] = editedExclusionPattern;
-      exclusionPatterns = library.exclusionPatterns;
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_edit_exclusion_pattern'));
-    }
-  };
-
-  const handleDeleteExclusionPattern = (patternIndexToDelete?: number) => {
-    if (patternIndexToDelete === undefined) {
-      return;
-    }
-
-    try {
-      if (!library.exclusionPatterns) {
-        library.exclusionPatterns = [];
-      }
-
-      const patternToDelete = library.exclusionPatterns[patternIndexToDelete];
-      library.exclusionPatterns = library.exclusionPatterns.filter((path) => path != patternToDelete);
-      exclusionPatterns = library.exclusionPatterns;
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_exclusion_pattern'));
-    }
-  };
-
-  const onEditExclusionPattern = async (patternIndexToEdit?: number) => {
-    const result = await modalManager.show(LibraryExclusionPatternModal, {
-      submitText: patternIndexToEdit === undefined ? $t('add') : $t('save'),
-      isEditing: patternIndexToEdit !== undefined,
-      exclusionPattern: patternIndexToEdit === undefined ? '' : exclusionPatterns[patternIndexToEdit],
-      exclusionPatterns,
-    });
-
-    if (!result) {
-      return;
-    }
-
-    switch (result.action) {
-      case 'submit': {
-        if (patternIndexToEdit === undefined) {
-          handleAddExclusionPattern(result.exclusionPattern);
-        } else {
-          handleEditExclusionPattern(result.exclusionPattern, patternIndexToEdit);
-        }
-        break;
-      }
-      case 'delete': {
-        handleDeleteExclusionPattern(patternIndexToEdit);
-        break;
-      }
-    }
-  };
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    onSubmit(library);
-  };
-</script>
-
-<form {onsubmit} autocomplete="off" class="m-4 flex flex-col gap-4">
-  <table class="w-full text-start">
-    <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-      {#each exclusionPatterns as exclusionPattern, listIndex (exclusionPattern)}
-        <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-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
-          <td class="w-1/4 text-ellipsis flex justify-center">
-            <IconButton
-              shape="round"
-              color="primary"
-              icon={mdiPencilOutline}
-              title={$t('edit_exclusion_pattern')}
-              onclick={() => onEditExclusionPattern(listIndex)}
-              aria-label={$t('edit_exclusion_pattern')}
-              size="small"
-            />
-          </td>
-        </tr>
-      {/each}
-      <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-3/4 text-ellipsis px-4 text-sm">
-          {#if exclusionPatterns.length === 0}
-            {$t('admin.no_pattern_added')}
-          {/if}
-        </td>
-        <td class="w-1/4 text-ellipsis px-4 text-sm flex justify-center">
-          <Button size="small" shape="round" onclick={() => onEditExclusionPattern()}>
-            {$t('add_exclusion_pattern')}
-          </Button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-  <div class="flex w-full justify-end gap-2">
-    <Button size="small" shape="round" color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
-    <Button size="small" shape="round" type="submit">{$t('save')}</Button>
-  </div>
-</form>
@@ -7,9 +7,10 @@
    fullWidth?: boolean;
    src?: string;
    title?: string;
+    class?: string;
  }

-  let { onClick = undefined, text, fullWidth = false, src = empty1Url, title }: Props = $props();
+  let { onClick = undefined, text, fullWidth = false, src = empty1Url, title, class: className }: Props = $props();

  let width = $derived(fullWidth ? 'w-full' : 'w-1/2');

@@ -22,7 +23,7 @@
 <svelte:element
  this={onClick ? 'button' : 'div'}
  onclick={onClick}
-  class="{width} m-auto mt-10 flex flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray {hoverClasses}"
+  class="{width} {className} flex flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray {hoverClasses}"
 >
  <img {src} alt="" width="500" draggable="false" />

@@ -1,6 +1,7 @@
 import type { ThemeSetting } from '$lib/managers/theme-manager.svelte';
 import type {
  AlbumResponseDto,
+  LibraryResponseDto,
  LoginResponseDto,
  SharedLinkResponseDto,
  SystemConfigDto,
@@ -27,6 +28,10 @@ export type Events = {
  UserAdminRestore: [UserAdminResponseDto];

  SystemConfigUpdate: [SystemConfigDto];
+
+  LibraryCreate: [LibraryResponseDto];
+  LibraryUpdate: [LibraryResponseDto];
+  LibraryDelete: [{ id: string }];
 };

 type Listener<EventMap extends Record<string, unknown[]>, K extends keyof EventMap> = (...params: EventMap[K]) => void;
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { handleAddLibraryExclusionPattern } from '$lib/services/library.service';
+  import type { LibraryResponseDto } from '@immich/sdk';
+  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    library: LibraryResponseDto;
+    onClose: () => void;
+  };
+
+  const { library, onClose }: Props = $props();
+  let exclusionPattern = $state('');
+
+  const onsubmit = async () => {
+    const success = await handleAddLibraryExclusionPattern(library, exclusionPattern);
+    if (success) {
+      onClose();
+    }
+  };
+</script>
+
+<Modal title={$t('add_exclusion_pattern')} icon={mdiFolderSync} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form">
+      <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
+
+      <Field label={$t('pattern')}>
+        <Input bind:value={exclusionPattern} />
+      </Field>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button shape="round" type="submit" fullWidth form="library-exclusion-pattern-form">
+        {$t('add')}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { handleEditExclusionPattern } from '$lib/services/library.service';
+  import type { LibraryResponseDto } from '@immich/sdk';
+  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    library: LibraryResponseDto;
+    exclusionPattern: string;
+    onClose: () => void;
+  };
+
+  const { library, exclusionPattern, onClose }: Props = $props();
+
+  let newExclusionPattern = $state(exclusionPattern);
+
+  const onsubmit = async () => {
+    const success = await handleEditExclusionPattern(library, exclusionPattern, newExclusionPattern);
+    if (success) {
+      onClose();
+    }
+  };
+</script>
+
+<Modal title={$t('edit_exclusion_pattern')} icon={mdiFolderSync} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form">
+      <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
+
+      <Field label={$t('pattern')}>
+        <Input bind:value={newExclusionPattern} />
+      </Field>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button shape="round" type="submit" fullWidth form="library-exclusion-pattern-form">
+        {$t('save')}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>
@@ -1,78 +0,0 @@
-<script lang="ts">
-  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiFolderRemove } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    exclusionPattern: string;
-    exclusionPatterns?: string[];
-    isEditing?: boolean;
-    submitText?: string;
-    onClose: (data?: { action: 'delete' } | { action: 'submit'; exclusionPattern: string }) => void;
-  }
-
-  let {
-    exclusionPattern = $bindable(),
-    exclusionPatterns = $bindable([]),
-    isEditing = false,
-    submitText = $t('submit'),
-    onClose,
-  }: Props = $props();
-
-  onMount(() => {
-    if (isEditing) {
-      exclusionPatterns = exclusionPatterns.filter((pattern) => pattern !== exclusionPattern);
-    }
-  });
-
-  let isDuplicate = $derived(exclusionPattern !== null && exclusionPatterns.includes(exclusionPattern));
-  let canSubmit = $derived(exclusionPattern && !exclusionPatterns.includes(exclusionPattern));
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    if (canSubmit) {
-      onClose({ action: 'submit', exclusionPattern });
-    }
-  };
-</script>
-
-<Modal size="small" title={$t('add_exclusion_pattern')} icon={mdiFolderRemove} {onClose}>
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="add-exclusion-pattern-form">
-      <p class="py-5 text-sm">
-        {$t('admin.exclusion_pattern_description')}
-        <br /><br />
-        {$t('admin.add_exclusion_pattern_description')}
-      </p>
-      <div class="my-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="exclusionPattern">{$t('pattern')}</label>
-        <input
-          class="immich-form-input"
-          id="exclusionPattern"
-          name="exclusionPattern"
-          type="text"
-          bind:value={exclusionPattern}
-        />
-      </div>
-      <div class="mt-8 flex w-full gap-4">
-        {#if isDuplicate}
-          <p class="text-red-500 text-sm">{$t('errors.exclusion_pattern_already_exists')}</p>
-        {/if}
-      </div>
-    </form>
-  </ModalBody>
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      {#if isEditing}
-        <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}
-          >{$t('delete')}</Button
-        >
-      {/if}
-      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form">
-        {submitText}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { handleAddLibraryFolder } from '$lib/services/library.service';
+  import type { LibraryResponseDto } from '@immich/sdk';
+  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    library: LibraryResponseDto;
+    onClose: () => void;
+  };
+
+  const { library, onClose }: Props = $props();
+  let folder = $state('');
+
+  const onsubmit = async () => {
+    const success = await handleAddLibraryFolder(library, folder);
+
+    if (success) {
+      onClose();
+    }
+  };
+</script>
+
+<Modal title={$t('library_add_folder')} icon={mdiFolderSync} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="library-import-path-form">
+      <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
+
+      <Field label={$t('path')}>
+        <Input bind:value={folder} />
+      </Field>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button shape="round" type="submit" fullWidth form="library-import-path-form">
+        {$t('add')}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { handleEditLibraryFolder } from '$lib/services/library.service';
+  import type { LibraryResponseDto } from '@immich/sdk';
+  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    library: LibraryResponseDto;
+    folder: string;
+    onClose: () => void;
+  };
+
+  const { library, folder, onClose }: Props = $props();
+
+  let newFolder = $state(folder);
+
+  const onsubmit = async () => {
+    const success = await handleEditLibraryFolder(library, folder, newFolder);
+    if (success) {
+      onClose();
+    }
+  };
+</script>
+
+<Modal title={$t('library_edit_folder')} icon={mdiFolderSync} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="library-import-path-form">
+      <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
+
+      <Field label={$t('path')}>
+        <Input bind:value={newFolder} />
+      </Field>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button shape="round" type="submit" fullWidth form="library-import-path-form">
+        {$t('save')}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>
@@ -1,75 +0,0 @@
-<script lang="ts">
-  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiFolderSync } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    importPath: string | null;
-    importPaths?: string[];
-    title?: string;
-    cancelText?: string;
-    submitText?: string;
-    isEditing?: boolean;
-    onClose: (data?: { action: 'delete' } | { action: 'submit'; importPath: string | null }) => void;
-  }
-
-  let {
-    importPath = $bindable(),
-    importPaths = $bindable([]),
-    title = $t('import_path'),
-    cancelText = $t('cancel'),
-    submitText = $t('save'),
-    isEditing = false,
-    onClose,
-  }: Props = $props();
-
-  onMount(() => {
-    if (isEditing) {
-      importPaths = importPaths.filter((path) => path !== importPath);
-    }
-  });
-
-  let isDuplicate = $derived(importPath !== null && importPaths.includes(importPath));
-  let canSubmit = $derived(importPath !== '' && importPath !== null && !importPaths.includes(importPath));
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    if (canSubmit) {
-      onClose({ action: 'submit', importPath });
-    }
-  };
-</script>
-
-<Modal {title} icon={mdiFolderSync} {onClose} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="library-import-path-form">
-      <p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
-
-      <div class="my-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="path">{$t('path')}</label>
-        <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
-      </div>
-
-      <div class="mt-8 flex w-full gap-4">
-        {#if isDuplicate}
-          <p class="text-red-500 text-sm">{$t('errors.import_path_already_exists')}</p>
-        {/if}
-      </div>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
-      {#if isEditing}
-        <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}>
-          {$t('delete')}
-        </Button>
-      {/if}
-      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
-        {submitText}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
@@ -1,21 +1,25 @@
 <script lang="ts">
+  import { handleRenameLibrary } from '$lib/services/library.service';
  import type { LibraryResponseDto } from '@immich/sdk';
  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
  import { mdiRenameOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  interface Props {
-    library: Partial<LibraryResponseDto>;
-    onClose: (library?: Partial<LibraryResponseDto>) => void;
-  }
+  type Props = {
+    library: LibraryResponseDto;
+    onClose: () => void;
+  };

  let { library, onClose }: Props = $props();

  let newName = $state(library.name);

-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    onClose({ ...library, name: newName });
+  const onsubmit = async () => {
+    const success = await handleRenameLibrary(library, newName);
+
+    if (success) {
+      onClose();
+    }
  };
 </script>

@@ -0,0 +1,352 @@
+import { goto } from '$app/navigation';
+import { AppRoute } from '$lib/constants';
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import LibraryExclusionPatternAddModal from '$lib/modals/LibraryExclusionPatternAddModal.svelte';
+import LibraryExclusionPatternEditModal from '$lib/modals/LibraryExclusionPatternEditModal.svelte';
+import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
+import LibraryFolderEditModal from '$lib/modals/LibraryFolderEditModal.svelte';
+import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
+import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
+import type { ActionItem } from '$lib/types';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import {
+  createLibrary,
+  deleteLibrary,
+  QueueCommand,
+  QueueName,
+  runQueueCommandLegacy,
+  scanLibrary,
+  updateLibrary,
+  type LibraryResponseDto,
+} from '@immich/sdk';
+import { modalManager, toastManager } from '@immich/ui';
+import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getLibrariesActions = ($t: MessageFormatter) => {
+  const ScanAll: ActionItem = {
+    title: $t('scan_all_libraries'),
+    icon: mdiSync,
+    onSelect: () => void handleScanAllLibraries(),
+  };
+
+  const Create: ActionItem = {
+    title: $t('create_library'),
+    icon: mdiPlusBoxOutline,
+    onSelect: () => void handleCreateLibrary(),
+  };
+
+  return { ScanAll, Create };
+};
+
+export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => {
+  const Rename: ActionItem = {
+    icon: mdiPencilOutline,
+    title: $t('rename'),
+    onSelect: () => void modalManager.show(LibraryRenameModal, { library }),
+  };
+
+  const Delete: ActionItem = {
+    icon: mdiTrashCanOutline,
+    title: $t('delete'),
+    color: 'danger',
+    onSelect: () => void handleDeleteLibrary(library),
+  };
+
+  const AddFolder: ActionItem = {
+    icon: mdiPlusBoxOutline,
+    title: $t('add'),
+    onSelect: () => void modalManager.show(LibraryFolderAddModal, { library }),
+  };
+
+  const AddExclusionPattern: ActionItem = {
+    icon: mdiPlusBoxOutline,
+    title: $t('add'),
+    onSelect: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
+  };
+
+  const Scan: ActionItem = {
+    icon: mdiSync,
+    title: $t('scan_library'),
+    onSelect: () => void handleScanLibrary(library),
+  };
+
+  return { Rename, Delete, AddFolder, AddExclusionPattern, Scan };
+};
+
+export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => {
+  const Edit: ActionItem = {
+    icon: mdiPencilOutline,
+    title: $t('edit'),
+    onSelect: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
+  };
+
+  const Delete: ActionItem = {
+    icon: mdiTrashCanOutline,
+    title: $t('delete'),
+    onSelect: () => void handleDeleteLibraryFolder(library, folder),
+  };
+
+  return { Edit, Delete };
+};
+
+export const getLibraryExclusionPatternActions = (
+  $t: MessageFormatter,
+  library: LibraryResponseDto,
+  exclusionPattern: string,
+) => {
+  const Edit: ActionItem = {
+    icon: mdiPencilOutline,
+    title: $t('edit'),
+    onSelect: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
+  };
+
+  const Delete: ActionItem = {
+    icon: mdiTrashCanOutline,
+    title: $t('delete'),
+    onSelect: () => void handleDeleteExclusionPattern(library, exclusionPattern),
+  };
+
+  return { Edit, Delete };
+};
+
+const handleScanAllLibraries = async () => {
+  const $t = await getFormatter();
+
+  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 handleScanLibrary = async (library: LibraryResponseDto) => {
+  const $t = await getFormatter();
+  try {
+    await scanLibrary({ id: library.id });
+    toastManager.info($t('admin.scanning_library'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_scan_library'));
+  }
+};
+
+export const handleViewLibrary = async (library: LibraryResponseDto) => {
+  await goto(`${AppRoute.ADMIN_LIBRARY_MANAGEMENT}/${library.id}`);
+};
+
+export const handleCreateLibrary = async () => {
+  const $t = await getFormatter();
+
+  const ownerId = await modalManager.show(LibraryUserPickerModal, {});
+  if (!ownerId) {
+    return;
+  }
+
+  try {
+    const createdLibrary = await createLibrary({ createLibraryDto: { ownerId } });
+    eventManager.emit('LibraryCreate', createdLibrary);
+    toastManager.success($t('admin.library_created', { values: { library: createdLibrary.name } }));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_create_library'));
+  }
+};
+
+export const handleRenameLibrary = async (library: { id: string }, name?: string) => {
+  const $t = await getFormatter();
+
+  if (!name) {
+    return false;
+  }
+
+  try {
+    const updatedLibrary = await updateLibrary({
+      id: library.id,
+      updateLibraryDto: { name },
+    });
+    eventManager.emit('LibraryUpdate', updatedLibrary);
+    toastManager.success($t('admin.library_updated'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_library'));
+    return false;
+  }
+
+  return true;
+};
+
+const handleDeleteLibrary = async (library: LibraryResponseDto) => {
+  const $t = await getFormatter();
+
+  const confirmed = await modalManager.showDialog({
+    prompt: $t('admin.confirm_delete_library', { values: { library: library.name } }),
+  });
+
+  if (!confirmed) {
+    return;
+  }
+
+  if (library.assetCount > 0) {
+    const isConfirmed = await modalManager.showDialog({
+      prompt: $t('admin.confirm_delete_library_assets', { values: { count: library.assetCount } }),
+    });
+    if (!isConfirmed) {
+      return;
+    }
+  }
+
+  try {
+    await deleteLibrary({ id: library.id });
+    eventManager.emit('LibraryDelete', { id: library.id });
+    toastManager.success($t('admin.library_deleted'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_remove_library'));
+  }
+};
+
+export const handleAddLibraryFolder = async (library: LibraryResponseDto, folder: string) => {
+  const $t = await getFormatter();
+
+  if (library.importPaths.includes(folder)) {
+    toastManager.danger($t('errors.library_folder_already_exists'));
+    return false;
+  }
+
+  try {
+    const updatedLibrary = await updateLibrary({
+      id: library.id,
+      updateLibraryDto: { importPaths: [...library.importPaths, folder] },
+    });
+    eventManager.emit('LibraryUpdate', updatedLibrary);
+    toastManager.success($t('admin.library_updated'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_library'));
+    return false;
+  }
+
+  return true;
+};
+
+export const handleEditLibraryFolder = async (library: LibraryResponseDto, oldFolder: string, newFolder: string) => {
+  const $t = await getFormatter();
+
+  if (oldFolder === newFolder) {
+    return true;
+  }
+
+  const importPaths = library.importPaths.map((path) => (path === oldFolder ? newFolder : path));
+
+  try {
+    const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { importPaths } });
+    eventManager.emit('LibraryUpdate', updatedLibrary);
+    toastManager.success($t('admin.library_updated'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_library'));
+    return false;
+  }
+
+  return true;
+};
+
+const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: string) => {
+  const $t = await getFormatter();
+
+  const confirmed = await modalManager.showDialog({
+    prompt: $t('admin.library_remove_folder_prompt'),
+    confirmText: $t('remove'),
+  });
+
+  if (!confirmed) {
+    return false;
+  }
+
+  try {
+    const updatedLibrary = await updateLibrary({
+      id: library.id,
+      updateLibraryDto: { importPaths: library.importPaths.filter((path) => path !== folder) },
+    });
+    eventManager.emit('LibraryUpdate', updatedLibrary);
+    toastManager.success($t('admin.library_updated'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_library'));
+    return false;
+  }
+
+  return true;
+};
+
+export const handleAddLibraryExclusionPattern = async (library: LibraryResponseDto, exclusionPattern: string) => {
+  const $t = await getFormatter();
+
+  if (library.exclusionPatterns.includes(exclusionPattern)) {
+    toastManager.danger($t('errors.exclusion_pattern_already_exists'));
+    return false;
+  }
+
+  try {
+    const updatedLibrary = await updateLibrary({
+      id: library.id,
+      updateLibraryDto: { exclusionPatterns: [...library.exclusionPatterns, exclusionPattern] },
+    });
+    eventManager.emit('LibraryUpdate', updatedLibrary);
+    toastManager.success($t('admin.library_updated'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_library'));
+    return false;
+  }
+
+  return true;
+};
+
+export const handleEditExclusionPattern = async (
+  library: LibraryResponseDto,
+  oldExclusionPattern: string,
+  newExclusionPattern: string,
+) => {
+  const $t = await getFormatter();
+
+  if (oldExclusionPattern === newExclusionPattern) {
+    return true;
+  }
+
+  const exclusionPatterns = library.exclusionPatterns.map((pattern) =>
+    pattern === oldExclusionPattern ? newExclusionPattern : pattern,
+  );
+
+  try {
+    const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { exclusionPatterns } });
+    eventManager.emit('LibraryUpdate', updatedLibrary);
+    toastManager.success($t('admin.library_updated'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_library'));
+    return false;
+  }
+
+  return true;
+};
+
+const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusionPattern: string) => {
+  const $t = await getFormatter();
+
+  const confirmed = await modalManager.showDialog({ prompt: $t('admin.library_remove_exclusion_pattern_prompt') });
+
+  if (!confirmed) {
+    return false;
+  }
+
+  try {
+    const updatedLibrary = await updateLibrary({
+      id: library.id,
+      updateLibraryDto: {
+        exclusionPatterns: library.exclusionPatterns.filter((pattern) => pattern !== exclusionPattern),
+      },
+    });
+    eventManager.emit('LibraryUpdate', updatedLibrary);
+    toastManager.success($t('admin.library_updated'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_library'));
+    return false;
+  }
+
+  return true;
+};
				`@@ -0,0 +1 @@`
				<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path d="M718.697 359.789c2.347 69.208-149.828 213.346-331.607 165.169-84.544-22.409-76.298-62.83-139.698-114.488-37.789-30.789-92.638-53.5-106.885-99.138-12.309-39.393-3.044-82.222 20.77-110.466 53.556-63.52 159.542-108.522 260.374-12.465 100.832 96.056 290.968-7.105 297.046 171.388z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M629.602 207.307v-51.154c0-28.251-22.902-51.153-51.154-51.153H322.681c-28.251 0-51.153 22.902-51.153 51.153v127.884" fill="#fff"/><path d="M629.602 207.307v-51.154c0-28.251-22.902-51.153-51.154-51.153H322.681c-28.251 0-51.153 22.902-51.153 51.153v127.884" stroke="#E1E4E5" stroke-width="4.13"/><path fill-rule="evenodd" clip-rule="evenodd" d="M271.528 216.252h165.353a25.578 25.578 0 0 0 21.28-11.382l35.884-53.941a25.575 25.575 0 0 1 21.357-11.407h114.2c28.251 0 51.154 22.902 51.154 51.153v255.767c0 28.252-22.903 51.154-51.154 51.154H271.528c-28.251 0-51.154-22.902-51.154-51.154V267.405c0-28.251 22.903-51.153 51.154-51.153z" fill="#fff" stroke="#E1E4E5" stroke-width="4.13"/><path fill-rule="evenodd" clip-rule="evenodd" d="M320.022 432.016v3.968h3.964A3.028 3.028 0 0 1 327 439a3.028 3.028 0 0 1-3.014 3.016h-3.964v3.968a3.028 3.028 0 0 1-3.014 3.016 3.029 3.029 0 0 1-3.014-3.016v-3.951h-3.98a3.029 3.029 0 0 1-3.014-3.017 3.029 3.029 0 0 1 3.014-3.016h3.964v-3.984a3.031 3.031 0 0 1 3.03-3.016 3.028 3.028 0 0 1 3.014 3.016zm-33.14-27.793v5.554h5.748c2.399 0 4.37 1.905 4.37 4.223 0 2.318-1.971 4.223-4.37 4.223h-5.748v5.554c0 2.318-1.971 4.223-4.37 4.223s-4.37-1.905-4.37-4.223v-5.531h-5.772c-2.399 0-4.37-1.905-4.37-4.223 0-2.318 1.971-4.223 4.37-4.223h5.748v-5.577c0-2.318 1.971-4.223 4.394-4.223 2.399 0 4.37 1.905 4.37 4.223z" fill="#E1E4E5"/><circle cx="451.101" cy="358.294" r="98.899" fill="#aaa"/><rect x="444.142" y="322.427" width="13.918" height="71.734" rx="6.959" fill="#fff"/><rect x="486.968" y="351.335" width="13.918" height="71.734" rx="6.959" transform="rotate(90 486.968 351.335)" fill="#fff"/><ellipse rx="13.917" ry="13.254" transform="matrix(-1 0 0 1 718.227 479.149)" fill="#E1E4E5"/><circle r="4.639" transform="matrix(-1 0 0 1 292.465 519.783)" fill="#E1E4E5"/><circle r="6.627" transform="matrix(-1 0 0 1 566.399 205.929)" fill="#E1E4E5"/><circle r="6.476" transform="scale(1 -1) rotate(-75 -180.786 -314.12)" fill="#E1E4E5"/><circle r="8.615" transform="matrix(-1 0 0 1 217.158 114.719)" fill="#E1E4E5"/><ellipse rx="6.627" ry="5.302" transform="matrix(-1 0 0 1 704.513 233.511)" fill="#E1E4E5"/><path d="M186.177 456.259h.174c1.026 14.545 11.844 14.769 11.844 14.769s-11.929.233-11.929 17.04c0-16.807-11.929-17.04-11.929-17.04s10.814-.224 11.84-14.769zm574.334-165.951h.18c1.067 15.36 12.309 15.596 12.309 15.596s-12.397.246-12.397 17.994c0-17.748-12.396-17.994-12.396-17.994s11.237-.236 12.304-15.596z" fill="#E1E4E5"/><defs><linearGradient id="a" x1="530.485" y1="779.032" x2="277.414" y2="-357.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient></defs></svg>