chore(web): context menu improvements (#10475)

- ability to add custom hover colors
- migrate activity menu to ButtonContextMenu component
- onClick callbacks rather than events for menu options
- remove slots
- configurable menu option colors
- improve menu option layout

web/src/lib/components/album-page/albums-list.svelte

@@ -424,13 +424,13 @@
     <MenuOption
       icon={mdiRenameOutline}
       text={$t('edit_album')}
-      on:click={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}
+      onClick={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}
     />
-    <MenuOption icon={mdiShareVariantOutline} text={$t('share')} on:click={() => openShareModal()} />
+    <MenuOption icon={mdiShareVariantOutline} text={$t('share')} onClick={() => openShareModal()} />
   {/if}
-  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} on:click={() => handleDownloadAlbum()} />
+  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={() => handleDownloadAlbum()} />
   {#if showFullContextMenu}
-    <MenuOption icon={mdiDeleteOutline} text={$t('delete')} on:click={() => setAlbumToDelete()} />
+    <MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => setAlbumToDelete()} />
   {/if}
 </RightClickContextMenu>
 

web/src/lib/components/album-page/share-info-modal.svelte

@@ -109,14 +109,14 @@
             {#if isOwned}
               <ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
                 {#if role === AlbumUserRole.Viewer}
-                  <MenuOption on:click={() => handleSetReadonly(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
+                  <MenuOption onClick={() => handleSetReadonly(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
                 {:else}
                   <MenuOption
-                    on:click={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
+                    onClick={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
                     text={$t('disallow_edits')}
                   />
                 {/if}
-                <MenuOption on:click={() => handleMenuRemove(user)} text={$t('remove')} />
+                <MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
               </ButtonContextMenu>
             {:else if user.id == currentUser?.id}
               <button

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -4,7 +4,6 @@
   import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getAssetType } from '$lib/utils/asset-utils';
   import { autoGrowHeight } from '$lib/actions/autogrow';
-  import { clickOutside } from '$lib/actions/click-outside';
   import { handleError } from '$lib/utils/handle-error';
   import { isTenMinutesApart } from '$lib/utils/timesince';
   import {
@@ -16,7 +15,7 @@
     type AssetTypeEnum,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { mdiClose, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
+  import { mdiClose, mdiDotsVertical, mdiHeart, mdiSend, mdiDeleteOutline } from '@mdi/js';
   import * as luxon from 'luxon';
   import { createEventDispatcher, onMount } from 'svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@@ -26,6 +25,8 @@
   import { locale } from '$lib/stores/preferences.store';
   import { shortcut } from '$lib/actions/shortcut';
   import { t } from 'svelte-i18n';
+  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';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
 
@@ -71,7 +72,6 @@
     close: void;
   }>();
 
-  $: showDeleteReaction = Array.from({ length: reactions.length }).fill(false);
   $: {
     if (innerHeight && activityHeight) {
       divHeight = innerHeight - activityHeight;
@@ -109,7 +109,6 @@
     try {
       await deleteActivity({ id: reaction.id });
       reactions.splice(index, 1);
-      showDeleteReaction.splice(index, 1);
       reactions = reactions;
       if (isLiked && reaction.type === 'like' && reaction.id == isLiked.id) {
         dispatch('deleteLike');
@@ -147,10 +146,6 @@
     }
     isSendingMessage = false;
   };
-
-  const showOptionsMenu = (index: number) => {
-    showDeleteReaction[index] = !showDeleteReaction[index];
-  };
 </script>
 
 <div class="overflow-y-hidden relative h-full" bind:offsetHeight={innerHeight}>
@@ -188,27 +183,23 @@
                 </a>
               {/if}
               {#if reaction.user.id === user.id || albumOwnerId === user.id}
-                <div class="flex items-start w-fit pt-[5px]">
-                  <CircleIconButton
+                <div class="mr-4">
+                  <ButtonContextMenu
                     icon={mdiDotsVertical}
                     title={$t('comment_options')}
+                    align="top-right"
+                    direction="left"
                     size="16"
-                    on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
-                  />
+                  >
+                    <MenuOption
+                      activeColor="bg-red-200"
+                      icon={mdiDeleteOutline}
+                      text={$t('remove')}
+                      onClick={() => handleDeleteReaction(reaction, index)}
+                    />
+                  </ButtonContextMenu>
                 </div>
               {/if}
-              <div>
-                {#if showDeleteReaction[index]}
-                  <button
-                    type="button"
-                    class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
-                    use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
-                    on:click={() => handleDeleteReaction(reaction, index)}
-                  >
-                    Remove
-                  </button>
-                {/if}
-              </div>
             </div>
 
             {#if (index != reactions.length - 1 && !shouldGroup(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
@@ -240,27 +231,23 @@
                   </a>
                 {/if}
                 {#if reaction.user.id === user.id || albumOwnerId === user.id}
-                  <div class="flex items-start w-fit">
-                    <CircleIconButton
+                  <div class="mr-4">
+                    <ButtonContextMenu
                       icon={mdiDotsVertical}
                       title={$t('reaction_options')}
+                      align="top-right"
+                      direction="left"
                       size="16"
-                      on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
-                    />
+                    >
+                      <MenuOption
+                        activeColor="bg-red-200"
+                        icon={mdiDeleteOutline}
+                        text={$t('remove')}
+                        onClick={() => handleDeleteReaction(reaction, index)}
+                      />
+                    </ButtonContextMenu>
                   </div>
                 {/if}
-                <div>
-                  {#if showDeleteReaction[index]}
-                    <button
-                      type="button"
-                      class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
-                      use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
-                      on:click={() => handleDeleteReaction(reaction, index)}
-                    >
-                      Remove
-                    </button>
-                  {/if}
-                </div>
               </div>
               {#if (index != reactions.length - 1 && isTenMinutesApart(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
                 <div

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -177,65 +177,65 @@
       />
       <ButtonContextMenu direction="left" align="top-right" color="opaque" title={$t('more')} icon={mdiDotsVertical}>
         {#if showSlideshow}
-          <MenuOption icon={mdiPresentationPlay} on:click={() => onMenuClick('playSlideShow')} text={$t('slideshow')} />
+          <MenuOption icon={mdiPresentationPlay} onClick={() => onMenuClick('playSlideShow')} text={$t('slideshow')} />
         {/if}
         {#if showDownloadButton}
-          <MenuOption icon={mdiFolderDownloadOutline} on:click={() => onMenuClick('download')} text={$t('download')} />
+          <MenuOption icon={mdiFolderDownloadOutline} onClick={() => onMenuClick('download')} text={$t('download')} />
         {/if}
         {#if asset.isTrashed}
-          <MenuOption icon={mdiHistory} on:click={() => onMenuClick('restoreAsset')} text={$t('restore')} />
+          <MenuOption icon={mdiHistory} onClick={() => onMenuClick('restoreAsset')} text={$t('restore')} />
         {:else}
-          <MenuOption icon={mdiImageAlbum} on:click={() => onMenuClick('addToAlbum')} text={$t('add_to_album')} />
+          <MenuOption icon={mdiImageAlbum} onClick={() => onMenuClick('addToAlbum')} text={$t('add_to_album')} />
           <MenuOption
             icon={mdiShareVariantOutline}
-            on:click={() => onMenuClick('addToSharedAlbum')}
+            onClick={() => onMenuClick('addToSharedAlbum')}
             text={$t('add_to_shared_album')}
           />
         {/if}
 
         {#if isOwner}
           {#if hasStackChildren}
-            <MenuOption icon={mdiImageMinusOutline} on:click={() => onMenuClick('unstack')} text={$t('unstack')} />
+            <MenuOption icon={mdiImageMinusOutline} onClick={() => onMenuClick('unstack')} text={$t('unstack')} />
           {/if}
           {#if album}
             <MenuOption
               text={$t('set_as_album_cover')}
               icon={mdiImageOutline}
-              on:click={() => onMenuClick('setAsAlbumCover')}
+              onClick={() => onMenuClick('setAsAlbumCover')}
             />
           {/if}
           {#if asset.type === AssetTypeEnum.Image}
             <MenuOption
               icon={mdiAccountCircleOutline}
-              on:click={() => onMenuClick('asProfileImage')}
+              onClick={() => onMenuClick('asProfileImage')}
               text={$t('set_as_profile_picture')}
             />
           {/if}
           <MenuOption
-            on:click={() => onMenuClick('toggleArchive')}
+            onClick={() => onMenuClick('toggleArchive')}
             icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
             text={asset.isArchived ? $t('unarchive') : $t('to_archive')}
           />
           <MenuOption
             icon={mdiUpload}
-            on:click={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
+            onClick={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
             text={$t('replace_with_upload')}
           />
           <hr />
           <MenuOption
             icon={mdiDatabaseRefreshOutline}
-            on:click={() => onJobClick(AssetJobName.RefreshMetadata)}
+            onClick={() => onJobClick(AssetJobName.RefreshMetadata)}
             text={getAssetJobName(AssetJobName.RefreshMetadata)}
           />
           <MenuOption
             icon={mdiImageRefreshOutline}
-            on:click={() => onJobClick(AssetJobName.RegenerateThumbnail)}
+            onClick={() => onJobClick(AssetJobName.RegenerateThumbnail)}
             text={getAssetJobName(AssetJobName.RegenerateThumbnail)}
           />
           {#if asset.type === AssetTypeEnum.Video}
             <MenuOption
               icon={mdiCogRefreshOutline}
-              on:click={() => onJobClick(AssetJobName.TranscodeVideo)}
+              onClick={() => onJobClick(AssetJobName.TranscodeVideo)}
               text={getAssetJobName(AssetJobName.TranscodeVideo)}
             />
           {/if}

web/src/lib/components/faces-page/people-card.svelte

@@ -75,15 +75,15 @@
       icon={mdiDotsVertical}
       title={$t('show_person_options')}
     >
-      <MenuOption on:click={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text={$t('hide_person')} />
-      <MenuOption on:click={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text={$t('change_name')} />
+      <MenuOption onClick={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text={$t('hide_person')} />
+      <MenuOption onClick={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text={$t('change_name')} />
       <MenuOption
-        on:click={() => onMenuClick('set-birth-date')}
+        onClick={() => onMenuClick('set-birth-date')}
         icon={mdiCalendarEditOutline}
         text={$t('set_date_of_birth')}
       />
       <MenuOption
-        on:click={() => onMenuClick('merge-people')}
+        onClick={() => onMenuClick('merge-people')}
         icon={mdiAccountMultipleCheckOutline}
         text={$t('merge_people')}
       />

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <MenuOption
-  on:click={() => (showAlbumPicker = true)}
+  onClick={() => (showAlbumPicker = true)}
   text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
   icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
 />

web/src/lib/components/photos-page/actions/archive-action.svelte

@@ -33,7 +33,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption {text} {icon} on:click={handleArchive} />
+  <MenuOption {text} {icon} onClick={handleArchive} />
 {/if}
 
 {#if !menuItem}

web/src/lib/components/photos-page/actions/asset-job-actions.svelte

@@ -34,6 +34,6 @@
 
 {#each jobs as job}
   {#if isAllVideos || job !== AssetJobName.TranscodeVideo}
-    <MenuOption text={getAssetJobName(job)} icon={getAssetJobIcon(job)} on:click={() => handleRunJob(job)} />
+    <MenuOption text={getAssetJobName(job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
   {/if}
 {/each}

web/src/lib/components/photos-page/actions/change-date-action.svelte

@@ -28,7 +28,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text={$t('change_date')} icon={mdiCalendarEditOutline} on:click={() => (isShowChangeDate = true)} />
+  <MenuOption text={$t('change_date')} icon={mdiCalendarEditOutline} onClick={() => (isShowChangeDate = true)} />
 {/if}
 {#if isShowChangeDate}
   <ChangeDate

web/src/lib/components/photos-page/actions/change-location-action.svelte

@@ -31,7 +31,7 @@
   <MenuOption
     text={$t('change_location')}
     icon={mdiMapMarkerMultipleOutline}
-    on:click={() => (isShowChangeLocation = true)}
+    onClick={() => (isShowChangeLocation = true)}
   />
 {/if}
 {#if isShowChangeLocation}

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -39,7 +39,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text={label} icon={mdiDeleteOutline} on:click={handleTrash} />
+  <MenuOption text={label} icon={mdiDeleteOutline} onClick={handleTrash} />
 {:else if loading}
   <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
 {:else}

web/src/lib/components/photos-page/actions/download-action.svelte

@@ -27,7 +27,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text={$t('download')} icon={menuItemIcon} on:click={handleDownloadFiles} />
+  <MenuOption text={$t('download')} icon={menuItemIcon} onClick={handleDownloadFiles} />
 {:else}
   <CircleIconButton title={$t('download')} icon={mdiCloudDownloadOutline} on:click={handleDownloadFiles} />
 {/if}

web/src/lib/components/photos-page/actions/favorite-action.svelte

@@ -58,7 +58,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption {text} {icon} on:click={handleFavorite} />
+  <MenuOption {text} {icon} onClick={handleFavorite} />
 {/if}
 
 {#if !menuItem}

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -57,7 +57,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} on:click={removeFromAlbum} />
+  <MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} onClick={removeFromAlbum} />
 {:else}
   <CircleIconButton title={$t('remove_from_album')} icon={mdiDeleteOutline} on:click={removeFromAlbum} />
 {/if}

web/src/lib/components/photos-page/actions/stack-action.svelte

@@ -40,7 +40,7 @@
 </script>
 
 {#if unstack}
-  <MenuOption text={$t('unstack')} icon={mdiImageMinusOutline} on:click={handleUnstack} />
+  <MenuOption text={$t('unstack')} icon={mdiImageMinusOutline} onClick={handleUnstack} />
 {:else}
-  <MenuOption text={$t('stack')} icon={mdiImageMultipleOutline} on:click={handleStack} />
+  <MenuOption text={$t('stack')} icon={mdiImageMultipleOutline} onClick={handleStack} />
 {/if}

web/src/lib/components/shared-components/context-menu/menu-option.svelte

@@ -1,24 +1,22 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { generateId } from '$lib/utils/generate-id';
-  import { createEventDispatcher } from 'svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
 
-  export let text = '';
+  export let text: string;
   export let subtitle = '';
   export let icon = '';
+  export let activeColor = 'bg-slate-300';
+  export let textColor = 'text-immich-fg dark:text-immich-dark-bg';
+  export let onClick: () => void;
 
   let id: string = generateId();
 
   $: isActive = $selectedIdStore === id;
 
-  const dispatch = createEventDispatcher<{
-    click: void;
-  }>();
-
   const handleClick = () => {
     $optionClickCallbackStore?.();
-    dispatch('click');
+    onClick();
   };
 </script>
 
@@ -29,27 +27,20 @@
   on:click={handleClick}
   on:mouseover={() => ($selectedIdStore = id)}
   on:mouseleave={() => ($selectedIdStore = undefined)}
-  class="w-full p-4 text-left text-sm font-medium text-immich-fg focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
-  class:bg-slate-300={isActive}
-  class:bg-slate-100={!isActive}
+  class="w-full p-4 text-left text-sm font-medium {textColor} focus:outline-none focus:ring-2 focus:ring-inset cursor-pointer border-gray-200 flex gap-2 items-center {isActive
+    ? activeColor
+    : 'bg-slate-100'}"
   role="menuitem"
 >
-  {#if text}
-    {#if icon}
-      <p class="flex gap-2">
-        <Icon path={icon} ariaHidden={true} size="18" />
-        {text}
-      </p>
-    {:else}
-      {text}
-    {/if}
-  {:else}
-    <slot />
+  {#if icon}
+    <Icon path={icon} ariaHidden={true} size="18" />
   {/if}
-
-  <slot name="subtitle">
-    <p class="text-xs text-gray-500">
-      {subtitle}
-    </p>
-  </slot>
+  <div>
+    {text}
+    {#if subtitle}
+      <p class="text-xs text-gray-500">
+        {subtitle}
+      </p>
+    {/if}
+  </div>
 </li>

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

@@ -426,7 +426,7 @@
               <MenuOption
                 text={$t('set_as_album_cover')}
                 icon={mdiImageOutline}
-                on:click={() => updateThumbnailUsingCurrentSelection()}
+                onClick={() => updateThumbnailUsingCurrentSelection()}
               />
             {/if}
             <ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
@@ -468,14 +468,10 @@
                   <MenuOption
                     icon={mdiImageOutline}
                     text={$t('select_album_cover')}
-                    on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
+                    onClick={() => (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()} />
+                  <MenuOption icon={mdiCogOutline} text={$t('options')} onClick={() => (viewMode = ViewMode.OPTIONS)} />
+                  <MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} onClick={() => handleRemoveAlbum()} />
                 </ButtonContextMenu>
               {/if}
             {/if}

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

@@ -390,7 +390,7 @@
         <MenuOption
           icon={mdiAccountMultipleCheckOutline}
           text={$t('fix_incorrect_match')}
-          on:click={handleReassignAssets}
+          onClick={handleReassignAssets}
         />
         <ChangeDate menuItem />
         <ChangeLocation menuItem />
@@ -406,22 +406,22 @@
             <MenuOption
               text={$t('select_featured_photo')}
               icon={mdiAccountBoxOutline}
-              on:click={() => (viewMode = ViewMode.SELECT_PERSON)}
+              onClick={() => (viewMode = ViewMode.SELECT_PERSON)}
             />
             <MenuOption
               text={data.person.isHidden ? $t('unhide_person') : $t('hide_person')}
               icon={data.person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
-              on:click={() => toggleHidePerson()}
+              onClick={() => toggleHidePerson()}
             />
             <MenuOption
               text={$t('set_date_of_birth')}
               icon={mdiCalendarEditOutline}
-              on:click={() => (viewMode = ViewMode.BIRTH_DATE)}
+              onClick={() => (viewMode = ViewMode.BIRTH_DATE)}
             />
             <MenuOption
               text={$t('merge_people')}
               icon={mdiAccountMultipleCheckOutline}
-              on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)}
+              onClick={() => (viewMode = ViewMode.MERGE_PEOPLE)}
             />
           </ButtonContextMenu>
         </svelte:fragment>

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

@@ -380,29 +380,32 @@
                     icon={mdiDotsVertical}
                     title={$t('library_options')}
                   >
-                    <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')} />
+                    <MenuOption onClick={() => onRenameClicked(index)} text={$t('rename')} />
+                    <MenuOption onClick={() => onEditImportPathClicked(index)} text={$t('edit_import_paths')} />
+                    <MenuOption onClick={() => onScanSettingClicked(index)} text={$t('scan_settings')} />
                     <hr />
-                    <MenuOption on:click={() => onScanNewLibraryClicked(library)} text={$t('scan_new_library_files')} />
+                    <MenuOption onClick={() => onScanNewLibraryClicked(library)} text={$t('scan_new_library_files')} />
                     <MenuOption
-                      on:click={() => onScanAllLibraryFilesClicked(library)}
+                      onClick={() => onScanAllLibraryFilesClicked(library)}
                       text={$t('scan_all_library_files')}
                       subtitle={$t('only_refreshes_modified_files')}
                     />
                     <MenuOption
-                      on:click={() => onForceScanAllLibraryFilesClicked(library)}
+                      onClick={() => onForceScanAllLibraryFilesClicked(library)}
                       text={$t('force_re-scan_library_files')}
                       subtitle={$t('refreshes_every_file')}
                     />
                     <hr />
                     <MenuOption
-                      on:click={() => onRemoveOfflineFilesClicked(library)}
+                      onClick={() => onRemoveOfflineFilesClicked(library)}
                       text={$t('remove_offline_files')}
                     />
-                    <MenuOption on:click={() => onDeleteLibraryClicked(library, index)}>
-                      <p class="text-red-600">{$t('delete_library')}</p>
-                    </MenuOption>
+                    <MenuOption
+                      text={$t('delete_library')}
+                      activeColor="bg-red-200"
+                      textColor="text-red-600"
+                      onClick={() => onDeleteLibraryClicked(library, index)}
+                    />
                   </ButtonContextMenu>
                 </td>
               </tr>