feat(web): library import path onboarding (#16229)

docs/docs/features/libraries.md

@@ -111,11 +111,10 @@ These actions must be performed by the Immich administrator.
 - Click on Administration -> Libraries
 - Click on Create External Library
 - Select which user owns the library, this can not be changed later
+- Enter `/mnt/media/christmas-trip` then click Add
+- Click on Save
 - Click the drop-down menu on the newly created library
 - Click on Rename Library and rename it to "Christmas Trip"
-- Click Edit Import Paths
-- Click on Add Path
-- Enter `/mnt/media/christmas-trip` then click Add
 
 NOTE: We have to use the `/mnt/media/christmas-trip` path and not the `/mnt/nas/christmas-trip` path since all paths have to be what the Docker containers see.
 

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

@@ -35,6 +35,7 @@
   import { t } from 'svelte-i18n';
   import { fade, slide } from 'svelte/transition';
   import type { PageData } from './$types';
+  import LibraryImportPathForm from '$lib/components/forms/library-import-path-form.svelte';
 
   interface Props {
     data: PageData;
@@ -57,6 +58,8 @@
   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();
@@ -67,6 +70,7 @@
     editScanSettings = undefined;
     renameLibrary = undefined;
     updateLibraryIndex = null;
+    toAddImportPath = false;
 
     for (let index = 0; index < dropdownOpen.length; index++) {
       dropdownOpen[index] = false;
@@ -93,8 +97,9 @@
   }
 
   const handleCreate = async (ownerId: string) => {
+    let createdLibrary: LibraryResponseDto | undefined;
     try {
-      const createdLibrary = await createLibrary({ createLibraryDto: { ownerId } });
+      createdLibrary = await createLibrary({ createLibraryDto: { ownerId } });
       notificationController.show({
         message: $t('admin.library_created', { values: { library: createdLibrary.name } }),
         type: NotificationType.Info,
@@ -105,6 +110,29 @@
       toCreateLibrary = false;
       await readLibraryList();
     }
+
+    if (createdLibrary) {
+      // Open the import paths form for the newly created library
+      updateLibraryIndex = libraries.findIndex((library) => library.id === createdLibrary.id);
+      toAddImportPath = true;
+    }
+  };
+
+  const handleAddImportPath = () => {
+    if (!updateLibraryIndex || !importPathToAdd) {
+      return;
+    }
+
+    try {
+      onEditImportPathClicked(updateLibraryIndex);
+
+      libraries[updateLibraryIndex].importPaths.push(importPathToAdd);
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_add_import_path'));
+    } finally {
+      importPathToAdd = null;
+      toAddImportPath = false;
+    }
   };
 
   const handleUpdate = async (library: Partial<LibraryResponseDto>) => {
@@ -216,6 +244,21 @@
   <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}
+
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
     <div class="flex justify-end gap-2">