chore: Refactor external library modals (#18655)

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
   import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
   import { validate, type LibraryResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
@@ -9,7 +11,6 @@
   import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import LibraryImportPathForm from './library-import-path-form.svelte';
 
   interface Props {
     library: LibraryResponseDto;
@@ -19,12 +20,6 @@
 
   let { library = $bindable(), onCancel, onSubmit }: Props = $props();
 
-  let addImportPath = $state(false);
-  let editImportPath: number | null = $state(null);
-
-  let importPathToAdd: string | null = $state(null);
-  let editedImportPath: string = $state('');
-
   let validatedPaths: ValidateLibraryImportPathResponseDto[] = $state([]);
 
   let importPaths = $derived(validatedPaths.map((validatedPath) => validatedPath.importPath));
@@ -71,8 +66,8 @@
     }
   };
 
-  const handleAddImportPath = async () => {
+  const handleAddImportPath = async (importPathToAdd: string | null) => {
-    if (!addImportPath || !importPathToAdd) {
+    if (!importPathToAdd) {
       return;
     }
 
@@ -88,14 +83,11 @@
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_import_path'));
-    } finally {
-      addImportPath = false;
-      importPathToAdd = null;
     }
   };
 
-  const handleEditImportPath = async () => {
+  const handleEditImportPath = async (editedImportPath: string | null, pathIndexToEdit: number) => {
-    if (editImportPath === null) {
+    if (editedImportPath === null) {
       return;
     }
 
@@ -105,22 +97,18 @@
 
     try {
       // Check so that import path isn't duplicated
-
       if (!library.importPaths.includes(editedImportPath)) {
         // Update import path
-        library.importPaths[editImportPath] = editedImportPath;
+        library.importPaths[pathIndexToEdit] = editedImportPath;
         await revalidate(false);
       }
     } catch (error) {
-      editImportPath = null;
       handleError(error, $t('errors.unable_to_edit_import_path'));
-    } finally {
-      editImportPath = null;
     }
   };
 
-  const handleDeleteImportPath = async () => {
+  const handleDeleteImportPath = async (pathIndexToDelete?: number) => {
-    if (editImportPath === null) {
+    if (pathIndexToDelete === undefined) {
       return;
     }
 
@@ -129,13 +117,41 @@
         library.importPaths = [];
       }
 
-      const pathToDelete = library.importPaths[editImportPath];
+      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'));
-    } finally {
+    }
-      editImportPath = null;
+  };
+
+  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;
+      }
     }
   };
 
@@ -145,33 +161,6 @@
   };
 </script>
 
-{#if addImportPath}
-  <LibraryImportPathForm
-    title={$t('add_import_path')}
-    submitText={$t('add')}
-    bind:importPath={importPathToAdd}
-    {importPaths}
-    onSubmit={handleAddImportPath}
-    onCancel={() => {
-      addImportPath = false;
-      importPathToAdd = null;
-    }}
-  />
-{/if}
-
-{#if editImportPath != undefined}
-  <LibraryImportPathForm
-    title={$t('edit_import_path')}
-    submitText={$t('save')}
-    isEditing={true}
-    bind:importPath={editedImportPath}
-    {importPaths}
-    onSubmit={handleEditImportPath}
-    onDelete={handleDeleteImportPath}
-    onCancel={() => (editImportPath = null)}
-  />
-{/if}
-
 <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">
@@ -204,10 +193,7 @@
               icon={mdiPencilOutline}
               title={$t('edit_import_path')}
               size="16"
-              onclick={() => {
+              onclick={() => onEditImportPath(listIndex)}
-                editImportPath = listIndex;
-                editedImportPath = validatedPath.importPath;
-              }}
             />
           </td>
         </tr>
@@ -221,7 +207,7 @@
           {/if}</td
         >
         <td class="w-1/5 text-ellipsis px-4 text-sm">
-          <Button shape="round" size="small" onclick={() => (addImportPath = true)}>{$t('add_path')}</Button>
+          <Button shape="round" size="small" onclick={() => onEditImportPath()}>{$t('add_path')}</Button>
         </td>
       </tr>
     </tbody>

web/src/lib/modals/LibraryImportPathModal.svelte

@@ -11,9 +11,7 @@
     cancelText?: string;
     submitText?: string;
     isEditing?: boolean;
-    onCancel: () => void;
+    onClose: (data?: { action: 'delete' } | { action: 'submit'; importPath: string | null }) => void;
-    onSubmit: (importPath: string | null) => void;
-    onDelete?: () => void;
   }
 
   let {
@@ -23,9 +21,7 @@
     cancelText = $t('cancel'),
     submitText = $t('save'),
     isEditing = false,
-    onCancel,
+    onClose,
-    onSubmit,
-    onDelete,
   }: Props = $props();
 
   onMount(() => {
@@ -40,12 +36,12 @@
   const onsubmit = (event: Event) => {
     event.preventDefault();
     if (canSubmit) {
-      onSubmit(importPath);
+      onClose({ action: 'submit', importPath });
     }
   };
 </script>
 
-<Modal {title} icon={mdiFolderSync} onClose={onCancel} size="small">
+<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>
@@ -65,13 +61,15 @@
 
   <ModalFooter>
     <div class="flex gap-2 w-full">
-      <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
       {#if isEditing}
-        <Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
+        <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"
+      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
-        >{submitText}</Button
+        {submitText}
-      >
+      </Button>
     </div>
   </ModalFooter>
 </Modal>

web/src/lib/modals/LibraryRenameModal.svelte

@@ -6,21 +6,20 @@
 
   interface Props {
     library: Partial<LibraryResponseDto>;
-    onCancel: () => void;
+    onClose: (library?: Partial<LibraryResponseDto>) => void;
-    onSubmit: (library: Partial<LibraryResponseDto>) => void;
   }
 
-  let { library, onCancel, onSubmit }: Props = $props();
+  let { library, onClose }: Props = $props();
 
   let newName = $state(library.name);
 
   const onsubmit = (event: Event) => {
     event.preventDefault();
-    onSubmit({ ...library, name: newName });
+    onClose({ ...library, name: newName });
   };
 </script>
 
-<Modal icon={mdiRenameOutline} title={$t('rename')} onClose={onCancel} size="small">
+<Modal icon={mdiRenameOutline} title={$t('rename')} {onClose} size="small">
   <ModalBody>
     <form {onsubmit} autocomplete="off" id="rename-library-form">
       <Field label={$t('name')}>
@@ -31,7 +30,7 @@
 
   <ModalFooter>
     <div class="flex gap-2 w-full">
-      <Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
+      <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
     </div>
   </ModalFooter>

web/src/lib/modals/LibraryUserPickerModal.svelte

@@ -8,11 +8,10 @@
   import { t } from 'svelte-i18n';
 
   interface Props {
-    onCancel: () => void;
+    onClose: (ownerId?: string) => void;
-    onSubmit: (ownerId: string) => void;
   }
 
-  let { onCancel, onSubmit }: Props = $props();
+  let { onClose }: Props = $props();
 
   let ownerId: string = $state($user.id);
 
@@ -25,11 +24,11 @@
 
   const onsubmit = (event: Event) => {
     event.preventDefault();
-    onSubmit(ownerId);
+    onClose(ownerId);
   };
 </script>
 
-<Modal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={onCancel} size="small">
+<Modal title={$t('select_library_owner')} icon={mdiFolderSync} {onClose} size="small">
   <ModalBody>
     <form {onsubmit} autocomplete="off" id="select-library-owner-form">
       <p class="p-5 text-sm">{$t('admin.note_cannot_be_changed_later')}</p>
@@ -40,7 +39,7 @@
 
   <ModalFooter>
     <div class="flex gap-2 w-full">
-      <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
     </div>
   </ModalFooter>

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

@@ -1,9 +1,6 @@
 <script lang="ts">
-  import LibraryImportPathForm from '$lib/components/forms/library-import-path-form.svelte';
   import LibraryImportPathsForm from '$lib/components/forms/library-import-paths-form.svelte';
-  import LibraryRenameForm from '$lib/components/forms/library-rename-form.svelte';
   import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
-  import LibraryUserPickerForm from '$lib/components/forms/library-user-picker-form.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';
@@ -14,6 +11,9 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
+  import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
+  import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { ByteUnit, getBytesWithUnit } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
@@ -56,12 +56,7 @@
   let diskUsageUnit: ByteUnit[] = $state([]);
   let editImportPaths: number | undefined = $state();
   let editScanSettings: number | undefined = $state();
-  let renameLibrary: number | undefined = $state();
-  let updateLibraryIndex: number | null;
   let dropdownOpen: boolean[] = [];
-  let toCreateLibrary = $state(false);
-  let toAddImportPath = $state(false);
-  let importPathToAdd: string | null = $state(null);
 
   onMount(async () => {
     await readLibraryList();
@@ -70,9 +65,6 @@
   const closeAll = () => {
     editImportPaths = undefined;
     editScanSettings = undefined;
-    renameLibrary = undefined;
-    updateLibraryIndex = null;
-    toAddImportPath = false;
 
     for (let index = 0; index < dropdownOpen.length; index++) {
       dropdownOpen[index] = false;
@@ -109,41 +101,55 @@
     } catch (error) {
       handleError(error, $t('errors.unable_to_create_library'));
     } finally {
-      toCreateLibrary = false;
       await readLibraryList();
     }
 
     if (createdLibrary) {
       // Open the import paths form for the newly created library
-      updateLibraryIndex = libraries.findIndex((library) => library.id === createdLibrary.id);
+      const createdLibraryIndex = libraries.findIndex((library) => library.id === createdLibrary.id);
-      toAddImportPath = true;
+      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 = () => {
+  const handleAddImportPath = (newImportPath: string | null, libraryIndex: number) => {
-    if ((updateLibraryIndex !== 0 && !updateLibraryIndex) || !importPathToAdd) {
+    if ((libraryIndex !== 0 && !libraryIndex) || !newImportPath) {
       return;
     }
 
     try {
-      onEditImportPathClicked(updateLibraryIndex);
+      onEditImportPathClicked(libraryIndex);
 
-      libraries[updateLibraryIndex].importPaths.push(importPathToAdd);
+      libraries[libraryIndex].importPaths.push(newImportPath);
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_import_path'));
-    } finally {
-      importPathToAdd = null;
-      toAddImportPath = false;
     }
   };
 
-  const handleUpdate = async (library: Partial<LibraryResponseDto>) => {
+  const handleUpdate = async (library: Partial<LibraryResponseDto>, libraryIndex: number) => {
-    if (updateLibraryIndex === null) {
-      return;
-    }
-
     try {
-      const libraryId = libraries[updateLibraryIndex].id;
+      const libraryId = libraries[libraryIndex].id;
       await updateLibrary({ id: libraryId, updateLibraryDto: library });
       closeAll();
       await readLibraryList();
@@ -177,16 +183,19 @@
     }
   };
 
-  const onRenameClicked = (index: number) => {
+  const onRenameClicked = async (index: number) => {
     closeAll();
-    renameLibrary = index;
+    const result = await modalManager.show(LibraryRenameModal, {
-    updateLibraryIndex = index;
+      library: libraries[index],
+    });
+    if (result) {
+      await handleUpdate(result, index);
+    }
   };
 
   const onEditImportPathClicked = (index: number) => {
     closeAll();
     editImportPaths = index;
-    updateLibraryIndex = index;
   };
 
   const onScanClicked = async (library: LibraryResponseDto) => {
@@ -197,10 +206,16 @@
     }
   };
 
+  const onCreateNewLibraryClicked = async () => {
+    const result = await modalManager.show(LibraryUserPickerModal, {});
+    if (result) {
+      await handleCreate(result);
+    }
+  };
+
   const onScanSettingClicked = (index: number) => {
     closeAll();
     editScanSettings = index;
-    updateLibraryIndex = index;
   };
 
   const handleDelete = async (library: LibraryResponseDto, index: number) => {
@@ -250,7 +265,7 @@
       {/if}
       <Button
         leadingIcon={mdiPlusBoxOutline}
-        onclick={() => (toCreateLibrary = true)}
+        onclick={onCreateNewLibraryClicked}
         size="small"
         variant="ghost"
         color="secondary"
@@ -338,7 +353,7 @@
                 <div transition:slide={{ duration: 250 }}>
                   <LibraryImportPathsForm
                     {library}
-                    onSubmit={handleUpdate}
+                    onSubmit={(lib) => handleUpdate(lib, index)}
                     onCancel={() => (editImportPaths = undefined)}
                   />
                 </div>
@@ -348,7 +363,7 @@
                 <div transition:slide={{ duration: 250 }} class="mb-4 ms-4 me-4">
                   <LibraryScanSettingsForm
                     {library}
-                    onSubmit={handleUpdate}
+                    onSubmit={(lib) => handleUpdate(lib, index)}
                     onCancel={() => (editScanSettings = undefined)}
                   />
                 </div>
@@ -359,35 +374,8 @@
 
         <!-- Empty message -->
       {:else}
-        <EmptyPlaceholder text={$t('no_libraries_message')} onClick={() => (toCreateLibrary = true)} />
+        <EmptyPlaceholder text={$t('no_libraries_message')} onClick={onCreateNewLibraryClicked} />
       {/if}
     </div>
   </section>
 </AdminPageLayout>
-
-{#if renameLibrary !== undefined}
-  <LibraryRenameForm
-    library={libraries[renameLibrary]}
-    onSubmit={handleUpdate}
-    onCancel={() => (renameLibrary = undefined)}
-  />
-{/if}
-
-{#if toCreateLibrary}
-  <LibraryUserPickerForm onSubmit={handleCreate} onCancel={() => (toCreateLibrary = false)} />
-{/if}
-
-{#if toAddImportPath}
-  <LibraryImportPathForm
-    title={$t('add_import_path')}
-    submitText={$t('add')}
-    bind:importPath={importPathToAdd}
-    onSubmit={handleAddImportPath}
-    onCancel={() => {
-      toAddImportPath = false;
-      if (updateLibraryIndex) {
-        onEditImportPathClicked(updateLibraryIndex);
-      }
-    }}
-  />
-{/if}