fix(server): library control doesn't apply to new library from the third row (#4331)

web/src/lib/components/user-settings-page/library-list.svelte

@@ -43,7 +43,8 @@
   let dropdownOpen: boolean[] = [];
   let showContextMenu = false;
   let contextMenuPosition = { x: 0, y: 0 };
-  let libraryType: LibraryType;
+  let selectedLibraryIndex = 0;
+  let selectedLibrary: LibraryResponseDto | null = null;
 
   onMount(() => {
     readLibraryList();
@@ -61,10 +62,12 @@
     }
   };
 
-  const showMenu = (event: MouseEvent, type: LibraryType) => {
+  const showMenu = (event: MouseEvent, library: LibraryResponseDto, index: number) => {
     contextMenuPosition = getContextMenuPosition(event);
     showContextMenu = !showContextMenu;
-    libraryType = type;
+
+    selectedLibraryIndex = index;
+    selectedLibrary = library;
   };
 
   const onMenuExit = () => {
@@ -216,54 +219,63 @@
     }
   };
 
-  const onRenameClicked = (index: number) => {
+  const onRenameClicked = () => {
     closeAll();
-    renameLibrary = index;
-    updateLibraryIndex = index;
+    renameLibrary = selectedLibraryIndex;
+    updateLibraryIndex = selectedLibraryIndex;
   };
 
-  const onEditImportPathClicked = (index: number) => {
+  const onEditImportPathClicked = () => {
     closeAll();
-    editImportPaths = index;
-    updateLibraryIndex = index;
+    editImportPaths = selectedLibraryIndex;
+    updateLibraryIndex = selectedLibraryIndex;
   };
 
-  const onScanNewLibraryClicked = (libraryId: string) => {
+  const onScanNewLibraryClicked = () => {
     closeAll();
-    handleScan(libraryId);
+
+    if (selectedLibrary) {
+      handleScan(selectedLibrary.id);
+    }
   };
 
-  const onScanSettingClicked = (index: number) => {
+  const onScanSettingClicked = () => {
     closeAll();
-    editScanSettings = index;
-    updateLibraryIndex = index;
+    editScanSettings = selectedLibraryIndex;
+    updateLibraryIndex = selectedLibraryIndex;
   };
 
-  const onScanAllLibraryFilesClicked = (libraryId: string) => {
+  const onScanAllLibraryFilesClicked = () => {
     closeAll();
-    handleScanChanges(libraryId);
+    if (selectedLibrary) {
+      handleScanChanges(selectedLibrary.id);
+    }
   };
 
-  const onForceScanAllLibraryFilesClicked = (libraryId: string) => {
+  const onForceScanAllLibraryFilesClicked = () => {
     closeAll();
-    handleForceScan(libraryId);
+    if (selectedLibrary) {
+      handleForceScan(selectedLibrary.id);
+    }
   };
 
-  const onRemoveOfflineFilesClicked = (libraryId: string) => {
+  const onRemoveOfflineFilesClicked = () => {
     closeAll();
-    handleRemoveOffline(libraryId);
+    if (selectedLibrary) {
+      handleRemoveOffline(selectedLibrary.id);
+    }
   };
 
-  const onDeleteLibraryClicked = (index: number, library: LibraryResponseDto) => {
+  const onDeleteLibraryClicked = () => {
     closeAll();
 
-    if (confirm(`Are you sure you want to delete ${library.name} library?`) == true) {
-      refreshStats(index);
-      if (totalCount[index] > 0) {
-        deleteAssetCount = totalCount[index];
-        confirmDeleteLibrary = library;
+    if (selectedLibrary && confirm(`Are you sure you want to delete ${selectedLibrary.name} library?`) == true) {
+      refreshStats(selectedLibraryIndex);
+      if (totalCount[selectedLibraryIndex] > 0) {
+        deleteAssetCount = totalCount[selectedLibraryIndex];
+        confirmDeleteLibrary = selectedLibrary;
       } else {
-        deleteLibrary = library;
+        deleteLibrary = selectedLibrary;
         handleDelete();
       }
     }
@@ -295,8 +307,7 @@
           </tr>
         </thead>
         <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-          {#each libraries as library, index}
-            {#key library.id}
+          {#each libraries as library, index (library.id)}
             <tr
               class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
                 index % 2 == 0
@@ -321,13 +332,13 @@
                 <td class="w-1/6 text-ellipsis px-4 text-sm">
                   {totalCount[index]}
                 </td>
-                  <td class="w-1/6 text-ellipsis px-4 text-sm">{diskUsage[index]} {diskUsageUnit[index]} </td>
+                <td class="w-1/6 text-ellipsis px-4 text-sm">{diskUsage[index]} {diskUsageUnit[index]}</td>
               {/if}
 
               <td class="w-1/6 text-ellipsis px-4 text-sm">
                 <button
                   class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-                    on:click|stopPropagation|preventDefault={(e) => showMenu(e, library.type)}
+                  on:click|stopPropagation|preventDefault={(e) => showMenu(e, library, index)}
                 >
                   <DotsVertical size="16" />
                 </button>
@@ -335,32 +346,26 @@
                 {#if showContextMenu}
                   <Portal target="body">
                     <ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
-                        <MenuOption on:click={() => onRenameClicked(index)} text="Rename" />
+                      <MenuOption on:click={() => onRenameClicked()} text={`Rename`} />
 
-                        {#if libraryType === LibraryType.External}
-                          <MenuOption on:click={() => onEditImportPathClicked(index)} text="Edit Import Paths" />
-                          <MenuOption on:click={() => onScanSettingClicked(index)} text="Scan Settings" />
+                      {#if selectedLibrary && selectedLibrary.type === LibraryType.External}
+                        <MenuOption on:click={() => onEditImportPathClicked()} text="Edit Import Paths" />
+                        <MenuOption on:click={() => onScanSettingClicked()} text="Scan Settings" />
                         <hr />
+                        <MenuOption on:click={() => onScanNewLibraryClicked()} text="Scan New Library Files" />
                         <MenuOption
-                            on:click={() => onScanNewLibraryClicked(library.id)}
-                            text="Scan New Library Files"
-                          />
-                          <MenuOption
-                            on:click={() => onScanAllLibraryFilesClicked(library.id)}
+                          on:click={() => onScanAllLibraryFilesClicked()}
                           text="Re-scan All Library Files"
                           subtitle={'Only refreshes modified files'}
                         />
                         <MenuOption
-                            on:click={() => onForceScanAllLibraryFilesClicked(library.id)}
+                          on:click={() => onForceScanAllLibraryFilesClicked()}
                           text="Force Re-scan All Library Files"
                           subtitle={'Refreshes every file'}
                         />
                         <hr />
-                          <MenuOption
-                            on:click={() => onRemoveOfflineFilesClicked(library.id)}
-                            text="Remove Offline Files"
-                          />
-                          <MenuOption on:click={() => onDeleteLibraryClicked(index, library)}>
+                        <MenuOption on:click={() => onRemoveOfflineFilesClicked()} text="Remove Offline Files" />
+                        <MenuOption on:click={() => onDeleteLibraryClicked()}>
                           <p class="text-red-600">Delete library</p>
                         </MenuOption>
                       {/if}
@@ -376,11 +381,7 @@
             {/if}
             {#if editImportPaths === index}
               <div transition:slide={{ duration: 250 }}>
-                  <LibraryImportPathsForm
-                    {library}
-                    on:submit={handleUpdate}
-                    on:cancel={() => (editImportPaths = null)}
-                  />
+                <LibraryImportPathsForm {library} on:submit={handleUpdate} on:cancel={() => (editImportPaths = null)} />
               </div>
             {/if}
             {#if editScanSettings === index}
@@ -392,7 +393,6 @@
                 />
               </div>
             {/if}
-            {/key}
           {/each}
         </tbody>
       </table>