feat(web): keyboard accessible context menus (#10017)

* feat(web,a11y): context menu keyboard navigation

* wip: all context menus visible

* wip: more migrations to the ButtonContextMenu, usability improvements

* wip: migrate Administration, PeopleCard

* wip: refocus the button on click, docs

* fix: more intuitive RightClickContextMenu

- configurable title
- focus management: tab keys, clicks, closing the menu
- automatically closing when an option is selected

* fix: refining the little details

- adjust the aria attributes
- intuitive escape key propagation
- extract context into its own file

* fix: dropdown options not clickable in a <Portal>

* wip: small fixes

- export selectedColor to prevent unexpected styling
- better context function naming

* chore: revert changes to list navigation, to reduce scope of the PR

* fix: remove topBorder prop

* feat: automatically select the first option on enter or space keypress

* fix: use Svelte store instead to handle selecting menu options

- better prop naming for ButtonContextMenu

* feat: hovering the mouse can change the active element

* fix: remove Portal, more predictable open/close behavior

* feat: make selected item visible using a scroll

- also: minor cleanup of the context-menu-navigation Svelte action

* feat: maintain context menu position on resize

* fix: use the whole padding class as better tailwind convention

* fix: options not announcing with screen reader for ButtonContextMenu

* fix: screen reader announcing right click context menu options

* fix: handle focus out scenario

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -22,9 +22,8 @@
   import RemoveFromAlbum from '$lib/components/photos-page/actions/remove-from-album.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
@@ -43,8 +42,6 @@
   import { user } from '$lib/stores/user.store';
   import { handlePromiseError, s } from '$lib/utils';
   import { downloadAlbum } from '$lib/utils/asset-utils';
-  import { clickOutside } from '$lib/actions/click-outside';
-  import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
   import { isAlbumsRoute, isPeopleRoute, isSearchRoute } from '$lib/utils/navigation';
@@ -103,7 +100,6 @@
     SELECT_USERS = 'select-users',
     SELECT_THUMBNAIL = 'select-thumbnail',
     SELECT_ASSETS = 'select-assets',
-    ALBUM_OPTIONS = 'album-options',
     VIEW_USERS = 'view-users',
     VIEW = 'view',
     OPTIONS = 'options',
@@ -112,7 +108,6 @@
   let backUrl: string = AppRoute.ALBUMS;
   let viewMode = ViewMode.VIEW;
   let isCreatingSharedAlbum = false;
-  let contextMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
   let isShowActivity = false;
   let isLiked: ActivityResponseDto | null = null;
   let reactions: ActivityResponseDto[] = [];
@@ -305,11 +300,6 @@
     timelineInteractionStore.clearMultiselect();
   };
 
-  const handleOpenAlbumOptions = (event: MouseEvent) => {
-    contextMenuPosition = getContextMenuPosition(event, 'top-left');
-    viewMode = viewMode === ViewMode.VIEW ? ViewMode.ALBUM_OPTIONS : ViewMode.VIEW;
-  };
-
   const handleSelectFromComputer = async () => {
     await openFileUploadDialog({ albumId: album.id });
     timelineInteractionStore.clearMultiselect();
@@ -420,14 +410,14 @@
       <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
         <CreateSharedLink />
         <SelectAllAssets {assetStore} {assetInteractionStore} />
-        <AssetSelectContextMenu icon={mdiPlus} title={$t('add_to')}>
+        <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
           <AddToAlbum />
           <AddToAlbum shared />
-        </AssetSelectContextMenu>
+        </ButtonContextMenu>
         {#if isAllUserOwned}
           <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
         {/if}
-        <AssetSelectContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+        <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
           <DownloadAction menuItem filename="{album.albumName}.zip" />
           {#if isAllUserOwned}
             <ChangeDate menuItem />
@@ -447,10 +437,10 @@
           {#if isAllUserOwned}
             <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
           {/if}
-        </AssetSelectContextMenu>
+        </ButtonContextMenu>
       </AssetSelectControlBar>
     {:else}
-      {#if viewMode === ViewMode.VIEW || viewMode === ViewMode.ALBUM_OPTIONS}
+      {#if viewMode === ViewMode.VIEW}
         <ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close={() => goto(backUrl)}>
           <svelte:fragment slot="trailing">
             {#if isEditor}
@@ -474,32 +464,19 @@
               <CircleIconButton title={$t('download')} on:click={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
 
               {#if isOwned}
-                <div use:clickOutside={{ onOutclick: () => (viewMode = ViewMode.VIEW) }}>
-                  <CircleIconButton
-                    title={$t('album_options')}
-                    on:click={handleOpenAlbumOptions}
-                    icon={mdiDotsVertical}
+                <ButtonContextMenu icon={mdiDotsVertical} title={$t('album_options')}>
+                  <MenuOption
+                    icon={mdiImageOutline}
+                    text={$t('select_album_cover')}
+                    on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
                   />
-                  {#if viewMode === ViewMode.ALBUM_OPTIONS}
-                    <ContextMenu {...contextMenuPosition}>
-                      <MenuOption
-                        icon={mdiImageOutline}
-                        text={$t('select_album_cover')}
-                        on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
-                      />
-                      <MenuOption
-                        icon={mdiCogOutline}
-                        text={$t('options')}
-                        on:click={() => (viewMode = ViewMode.OPTIONS)}
-                      />
-                      <MenuOption
-                        icon={mdiDeleteOutline}
-                        text={$t('delete_album')}
-                        on:click={() => handleRemoveAlbum()}
-                      />
-                    </ContextMenu>
-                  {/if}
-                </div>
+                  <MenuOption
+                    icon={mdiCogOutline}
+                    text={$t('options')}
+                    on:click={() => (viewMode = ViewMode.OPTIONS)}
+                  />
+                  <MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} on:click={() => handleRemoveAlbum()} />
+                </ButtonContextMenu>
               {/if}
             {/if}
 

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

@@ -8,7 +8,7 @@
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { AssetAction } from '$lib/constants';
@@ -32,15 +32,15 @@
     <ArchiveAction unarchive onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
-    <AssetSelectContextMenu icon={mdiPlus} title={$t('add_to')}>
+    <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
       <AddToAlbum />
       <AddToAlbum shared />
-    </AssetSelectContextMenu>
+    </ButtonContextMenu>
     <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
-    <AssetSelectContextMenu icon={mdiDotsVertical} title={$t('add')}>
+    <ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
       <DownloadAction menuItem />
       <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
-    </AssetSelectContextMenu>
+    </ButtonContextMenu>
   </AssetSelectControlBar>
 {/if}
 

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

@@ -10,7 +10,7 @@
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { AssetAction } from '$lib/constants';
@@ -35,17 +35,17 @@
     <FavoriteAction removeFavorite onFavorite={(assetIds) => assetStore.removeAssets(assetIds)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
-    <AssetSelectContextMenu icon={mdiPlus} title={$t('add_to')}>
+    <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
       <AddToAlbum />
       <AddToAlbum shared />
-    </AssetSelectContextMenu>
-    <AssetSelectContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+    </ButtonContextMenu>
+    <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
       <ChangeDate menuItem />
       <ChangeLocation menuItem />
       <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
       <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
-    </AssetSelectContextMenu>
+    </ButtonContextMenu>
   </AssetSelectControlBar>
 {/if}
 

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

@@ -4,7 +4,7 @@
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import { AppRoute } from '$lib/constants';
@@ -30,10 +30,10 @@
   {#if $isMultiSelectState}
     <AssetSelectControlBar assets={$selectedAssets} clearSelect={clearMultiselect}>
       <CreateSharedLink />
-      <AssetSelectContextMenu icon={mdiPlus} title={$t('add')}>
+      <ButtonContextMenu icon={mdiPlus} title={$t('add')}>
         <AddToAlbum />
         <AddToAlbum shared />
-      </AssetSelectContextMenu>
+      </ButtonContextMenu>
       <DownloadAction />
     </AssetSelectControlBar>
   {:else}

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

@@ -17,7 +17,6 @@
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -57,6 +56,7 @@
   import type { PageData } from './$types';
   import { listNavigation } from '$lib/actions/list-navigation';
   import { t } from 'svelte-i18n';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
 
   export let data: PageData;
 
@@ -380,12 +380,12 @@
     <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
       <CreateSharedLink />
       <SelectAllAssets {assetStore} {assetInteractionStore} />
-      <AssetSelectContextMenu icon={mdiPlus} title={$t('add_to')}>
+      <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
         <AddToAlbum />
         <AddToAlbum shared />
-      </AssetSelectContextMenu>
+      </ButtonContextMenu>
       <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
-      <AssetSelectContextMenu icon={mdiDotsVertical} title={$t('add')}>
+      <ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
         <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
         <MenuOption
           icon={mdiAccountMultipleCheckOutline}
@@ -396,13 +396,13 @@
         <ChangeLocation menuItem />
         <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => $assetStore.removeAssets(assetIds)} />
         <DeleteAssets menuItem onAssetDelete={(assetIds) => $assetStore.removeAssets(assetIds)} />
-      </AssetSelectContextMenu>
+      </ButtonContextMenu>
     </AssetSelectControlBar>
   {:else}
     {#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
       <ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close={() => goto(previousRoute)}>
         <svelte:fragment slot="trailing">
-          <AssetSelectContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+          <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
             <MenuOption
               text={$t('select_featured_photo')}
               icon={mdiAccountBoxOutline}
@@ -423,7 +423,7 @@
               icon={mdiAccountMultipleCheckOutline}
               on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)}
             />
-          </AssetSelectContextMenu>
+          </ButtonContextMenu>
         </svelte:fragment>
       </ControlAppBar>
     {/if}

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

@@ -12,7 +12,7 @@
   import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -58,12 +58,12 @@
   >
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
-    <AssetSelectContextMenu icon={mdiPlus} title={$t('add_to')}>
+    <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
       <AddToAlbum />
       <AddToAlbum shared />
-    </AssetSelectContextMenu>
+    </ButtonContextMenu>
     <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
-    <AssetSelectContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+    <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
       {#if $selectedAssets.size > 1 || isAssetStackSelected}
         <StackAction
@@ -78,7 +78,7 @@
       <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
       <hr />
       <AssetJobActions />
-    </AssetSelectContextMenu>
+    </ButtonContextMenu>
   </AssetSelectControlBar>
 {/if}
 

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

@@ -11,7 +11,7 @@
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
@@ -211,19 +211,19 @@
       <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
         <CreateSharedLink />
         <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} on:click={handleSelectAll} />
-        <AssetSelectContextMenu icon={mdiPlus} title={$t('add_to')}>
+        <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
           <AddToAlbum />
           <AddToAlbum shared />
-        </AssetSelectContextMenu>
+        </ButtonContextMenu>
         <FavoriteAction removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
 
-        <AssetSelectContextMenu icon={mdiDotsVertical} title={$t('add')}>
+        <ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
           <DownloadAction menuItem />
           <ChangeDate menuItem />
           <ChangeLocation menuItem />
           <ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
           <DeleteAssets menuItem {onAssetDelete} />
-        </AssetSelectContextMenu>
+        </ButtonContextMenu>
       </AssetSelectControlBar>
     </div>
   {:else}

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

@@ -6,16 +6,13 @@
   import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
   import LibraryUserPickerForm from '$lib/components/forms/library-user-picker-form.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { ByteUnit, getBytesWithUnit } from '$lib/utils/byte-units';
-  import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { handleError } from '$lib/utils/handle-error';
   import {
     createLibrary,
@@ -35,9 +32,9 @@
   import { fade, slide } from 'svelte/transition';
   import LinkButton from '../../../lib/components/elements/buttons/link-button.svelte';
   import type { PageData } from './$types';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
 
   export let data: PageData;
 
@@ -63,10 +60,6 @@
   let deleteAssetCount = 0;
 
   let dropdownOpen: boolean[] = [];
-  let showContextMenu = false;
-  let contextMenuPosition = { x: 0, y: 0 };
-  let selectedLibraryIndex = 0;
-  let selectedLibrary: LibraryResponseDto | null = null;
 
   let toCreateLibrary = false;
 
@@ -79,25 +72,12 @@
     editScanSettings = null;
     renameLibrary = null;
     updateLibraryIndex = null;
-    showContextMenu = false;
 
     for (let index = 0; index < dropdownOpen.length; index++) {
       dropdownOpen[index] = false;
     }
   };
 
-  const showMenu = (event: MouseEvent, library: LibraryResponseDto, index: number) => {
-    contextMenuPosition = getContextMenuPosition(event);
-    showContextMenu = !showContextMenu;
-
-    selectedLibraryIndex = index;
-    selectedLibrary = library;
-  };
-
-  const onMenuExit = () => {
-    showContextMenu = false;
-  };
-
   const refreshStats = async (listIndex: number) => {
     stats[listIndex] = await getLibraryStatistics({ id: libraries[listIndex].id });
     owner[listIndex] = await getUserAdmin({ id: libraries[listIndex].ownerId });
@@ -233,72 +213,72 @@
     }
   };
 
-  const onRenameClicked = () => {
+  const onRenameClicked = (index: number) => {
     closeAll();
-    renameLibrary = selectedLibraryIndex;
-    updateLibraryIndex = selectedLibraryIndex;
+    renameLibrary = index;
+    updateLibraryIndex = index;
   };
 
-  const onEditImportPathClicked = () => {
+  const onEditImportPathClicked = (index: number) => {
     closeAll();
-    editImportPaths = selectedLibraryIndex;
-    updateLibraryIndex = selectedLibraryIndex;
+    editImportPaths = index;
+    updateLibraryIndex = index;
   };
 
-  const onScanNewLibraryClicked = async () => {
+  const onScanNewLibraryClicked = async (library: LibraryResponseDto) => {
     closeAll();
 
-    if (selectedLibrary) {
-      await handleScan(selectedLibrary.id);
+    if (library) {
+      await handleScan(library.id);
     }
   };
 
-  const onScanSettingClicked = () => {
+  const onScanSettingClicked = (index: number) => {
     closeAll();
-    editScanSettings = selectedLibraryIndex;
-    updateLibraryIndex = selectedLibraryIndex;
+    editScanSettings = index;
+    updateLibraryIndex = index;
   };
 
-  const onScanAllLibraryFilesClicked = async () => {
+  const onScanAllLibraryFilesClicked = async (library: LibraryResponseDto) => {
     closeAll();
-    if (selectedLibrary) {
-      await handleScanChanges(selectedLibrary.id);
+    if (library) {
+      await handleScanChanges(library.id);
     }
   };
 
-  const onForceScanAllLibraryFilesClicked = async () => {
+  const onForceScanAllLibraryFilesClicked = async (library: LibraryResponseDto) => {
     closeAll();
-    if (selectedLibrary) {
-      await handleForceScan(selectedLibrary.id);
+    if (library) {
+      await handleForceScan(library.id);
     }
   };
 
-  const onRemoveOfflineFilesClicked = async () => {
+  const onRemoveOfflineFilesClicked = async (library: LibraryResponseDto) => {
     closeAll();
-    if (selectedLibrary) {
-      await handleRemoveOffline(selectedLibrary.id);
+    if (library) {
+      await handleRemoveOffline(library.id);
     }
   };
 
-  const onDeleteLibraryClicked = async () => {
+  const onDeleteLibraryClicked = async (library: LibraryResponseDto, index: number) => {
     closeAll();
 
-    if (!selectedLibrary) {
+    if (!library) {
       return;
     }
 
     const isConfirmedLibrary = await dialogController.show({
       id: 'delete-library',
-      prompt: $t('admin.confirm_delete_library', { values: { library: selectedLibrary.name } }),
+      prompt: $t('admin.confirm_delete_library', { values: { library: library.name } }),
     });
 
     if (!isConfirmedLibrary) {
       return;
     }
 
-    await refreshStats(selectedLibraryIndex);
-    if (totalCount[selectedLibraryIndex] > 0) {
-      deleteAssetCount = totalCount[selectedLibraryIndex];
+    await refreshStats(index);
+    if (totalCount[index] > 0) {
+      deleteAssetCount = totalCount[index];
 
       const isConfirmedLibraryAssetCount = await dialogController.show({
         id: 'delete-library-assets',
@@ -310,7 +290,7 @@
       }
       await handleDelete();
     } else {
-      deletedLibrary = selectedLibrary;
+      deletedLibrary = library;
       await handleDelete();
     }
   };
@@ -392,46 +372,38 @@
                 {/if}
 
                 <td class=" text-ellipsis px-4 text-sm">
-                  <CircleIconButton
+                  <ButtonContextMenu
+                    align="top-right"
+                    direction="left"
                     color="primary"
+                    size="16"
                     icon={mdiDotsVertical}
                     title={$t('library_options')}
-                    size="16"
-                    on:click={(e) => showMenu(e, library, index)}
-                  />
-
-                  {#if showContextMenu}
-                    <Portal target="body">
-                      <ContextMenu {...contextMenuPosition} onClose={() => onMenuExit()}>
-                        <MenuOption on:click={() => onRenameClicked()} text={$t('rename')} />
-
-                        {#if selectedLibrary}
-                          <MenuOption on:click={() => onEditImportPathClicked()} text={$t('edit_import_paths')} />
-                          <MenuOption on:click={() => onScanSettingClicked()} text={$t('scan_settings')} />
-                          <hr />
-                          <MenuOption on:click={() => onScanNewLibraryClicked()} text={$t('scan_new_library_files')} />
-                          <MenuOption
-                            on:click={() => onScanAllLibraryFilesClicked()}
-                            text={$t('scan_all_library_files')}
-                            subtitle={$t('only_refreshes_modified_files')}
-                          />
-                          <MenuOption
-                            on:click={() => onForceScanAllLibraryFilesClicked()}
-                            text={$t('force_re-scan_library_files')}
-                            subtitle={$t('refreshes_every_file')}
-                          />
-                          <hr />
-                          <MenuOption
-                            on:click={() => onRemoveOfflineFilesClicked()}
-                            text={$t('remove_offline_files')}
-                          />
-                          <MenuOption on:click={() => onDeleteLibraryClicked()}>
-                            <p class="text-red-600">{$t('delete_library')}</p>
-                          </MenuOption>
-                        {/if}
-                      </ContextMenu>
-                    </Portal>
-                  {/if}
+                  >
+                    <MenuOption on:click={() => onRenameClicked(index)} text={$t('rename')} />
+                    <MenuOption on:click={() => onEditImportPathClicked(index)} text={$t('edit_import_paths')} />
+                    <MenuOption on:click={() => onScanSettingClicked(index)} text={$t('scan_settings')} />
+                    <hr />
+                    <MenuOption on:click={() => onScanNewLibraryClicked(library)} text={$t('scan_new_library_files')} />
+                    <MenuOption
+                      on:click={() => onScanAllLibraryFilesClicked(library)}
+                      text={$t('scan_all_library_files')}
+                      subtitle={$t('only_refreshes_modified_files')}
+                    />
+                    <MenuOption
+                      on:click={() => onForceScanAllLibraryFilesClicked(library)}
+                      text={$t('force_re-scan_library_files')}
+                      subtitle={$t('refreshes_every_file')}
+                    />
+                    <hr />
+                    <MenuOption
+                      on:click={() => onRemoveOfflineFilesClicked(library)}
+                      text={$t('remove_offline_files')}
+                    />
+                    <MenuOption on:click={() => onDeleteLibraryClicked(library, index)}>
+                      <p class="text-red-600">{$t('delete_library')}</p>
+                    </MenuOption>
+                  </ButtonContextMenu>
                 </td>
               </tr>
               {#if renameLibrary === index}