From 8ed6ed4d2b840c28a4af6a65b1d6fe06d8c53ce5 Mon Sep 17 00:00:00 2001
From: Ethan Margaillan <ethan.margaillan@gmail.com>
Date: Thu, 21 Mar 2024 19:39:33 +0100
Subject: [PATCH] feat(web): rework context menus: add icons and reorder items
 (#8090)

---
 .../asset-viewer/asset-viewer-nav-bar.svelte  | 58 ++++++++++++++-----
 .../components/faces-page/people-card.svelte  | 24 ++++++--
 .../photos-page/actions/add-to-album.svelte   |  7 ++-
 .../photos-page/actions/archive-action.svelte |  2 +-
 .../actions/asset-job-actions.svelte          |  4 +-
 .../actions/change-date-action.svelte         |  3 +-
 .../actions/change-location-action.svelte     |  7 ++-
 .../photos-page/actions/delete-assets.svelte  |  6 +-
 .../actions/download-action.svelte            |  6 +-
 .../actions/favorite-action.svelte            |  4 +-
 .../actions/remove-from-album.svelte          |  4 +-
 .../photos-page/actions/stack-action.svelte   |  3 +-
 .../asset-select-context-menu.svelte          |  4 +-
 .../context-menu/context-menu.svelte          |  6 +-
 .../context-menu/menu-option.svelte           | 12 +++-
 web/src/lib/utils.ts                          | 11 ++++
 .../(user)/albums/[albumId]/+page.svelte      | 45 +++++++++-----
 web/src/routes/(user)/archive/+page.svelte    |  6 +-
 web/src/routes/(user)/favorites/+page.svelte  |  6 +-
 .../(user)/people/[personId]/+page.svelte     | 42 ++++++++++----
 web/src/routes/(user)/photos/+page.svelte     | 16 ++---
 web/src/routes/(user)/search/+page.svelte     |  8 +--
 web/src/routes/(user)/trash/+page.svelte      |  4 +-
 23 files changed, 204 insertions(+), 84 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index 4d09e17050..3a51056298 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -5,20 +5,31 @@
   import { getAssetJobName } from '$lib/utils';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
-  import { AssetJobName, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
+  import { AssetJobName, AssetTypeEnum, type AssetResponseDto, type AlbumResponseDto } from '@immich/sdk';
   import {
+    mdiAccountCircleOutline,
     mdiAlertOutline,
+    mdiArchiveArrowDownOutline,
+    mdiArchiveArrowUpOutline,
     mdiArrowLeft,
+    mdiCogRefreshOutline,
     mdiContentCopy,
+    mdiDatabaseRefreshOutline,
     mdiDeleteOutline,
     mdiDotsVertical,
+    mdiFolderDownloadOutline,
     mdiHeart,
     mdiHeartOutline,
+    mdiImageAlbum,
+    mdiImageMinusOutline,
+    mdiImageOutline,
+    mdiImageRefreshOutline,
     mdiInformationOutline,
     mdiMagnifyMinusOutline,
     mdiMagnifyPlusOutline,
     mdiMotionPauseOutline,
     mdiPlaySpeed,
+    mdiPresentationPlay,
     mdiShareVariantOutline,
   } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
@@ -26,6 +37,7 @@
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
 
   export let asset: AssetResponseDto;
+  export let album: AlbumResponseDto | null = null;
   export let showCopyButton: boolean;
   export let showZoomButton: boolean;
   export let showMotionPlayButton: boolean;
@@ -42,6 +54,7 @@
     | 'addToAlbum'
     | 'addToSharedAlbum'
     | 'asProfileImage'
+    | 'setAsAlbumCover'
     | 'download'
     | 'playSlideShow'
     | 'runJob'
@@ -59,6 +72,7 @@
     addToAlbum: void;
     addToSharedAlbum: void;
     asProfileImage: void;
+    setAsAlbumCover: void;
     runJob: AssetJobName;
     playSlideShow: void;
     unstack: void;
@@ -173,37 +187,55 @@
         {#if isShowAssetOptions}
           <ContextMenu {...contextMenuPosition} direction="left">
             {#if showSlideshow}
-              <MenuOption on:click={() => onMenuClick('playSlideShow')} text="Slideshow" />
+              <MenuOption icon={mdiPresentationPlay} on:click={() => onMenuClick('playSlideShow')} text="Slideshow" />
             {/if}
             {#if showDownloadButton}
-              <MenuOption on:click={() => onMenuClick('download')} text="Download" />
+              <MenuOption icon={mdiFolderDownloadOutline} on:click={() => onMenuClick('download')} text="Download" />
             {/if}
-            <MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
-            <MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />
+            <MenuOption icon={mdiImageAlbum} on:click={() => onMenuClick('addToAlbum')} text="Add to album" />
+            <MenuOption
+              icon={mdiShareVariantOutline}
+              on:click={() => onMenuClick('addToSharedAlbum')}
+              text="Add to shared album"
+            />
 
             {#if isOwner}
+              {#if hasStackChildren}
+                <MenuOption icon={mdiImageMinusOutline} on:click={() => onMenuClick('unstack')} text="Un-stack" />
+              {/if}
+              {#if album}
+                <MenuOption
+                  text="Set as album cover"
+                  icon={mdiImageOutline}
+                  on:click={() => onMenuClick('setAsAlbumCover')}
+                />
+              {/if}
+              {#if asset.type === AssetTypeEnum.Image}
+                <MenuOption
+                  icon={mdiAccountCircleOutline}
+                  on:click={() => onMenuClick('asProfileImage')}
+                  text="Set as profile picture"
+                />
+              {/if}
               <MenuOption
                 on:click={() => dispatch('toggleArchive')}
+                icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
                 text={asset.isArchived ? 'Unarchive' : 'Archive'}
               />
-              {#if asset.type === AssetTypeEnum.Image}
-                <MenuOption on:click={() => onMenuClick('asProfileImage')} text="As profile picture" />
-              {/if}
-
-              {#if hasStackChildren}
-                <MenuOption on:click={() => onMenuClick('unstack')} text="Un-Stack" />
-              {/if}
-
+              <hr />
               <MenuOption
+                icon={mdiDatabaseRefreshOutline}
                 on:click={() => onJobClick(AssetJobName.RefreshMetadata)}
                 text={getAssetJobName(AssetJobName.RefreshMetadata)}
               />
               <MenuOption
+                icon={mdiImageRefreshOutline}
                 on:click={() => onJobClick(AssetJobName.RegenerateThumbnail)}
                 text={getAssetJobName(AssetJobName.RegenerateThumbnail)}
               />
               {#if asset.type === AssetTypeEnum.Video}
                 <MenuOption
+                  icon={mdiCogRefreshOutline}
                   on:click={() => onJobClick(AssetJobName.TranscodeVideo)}
                   text={getAssetJobName(AssetJobName.TranscodeVideo)}
                 />
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index 4bb4947127..e8287991bb 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -4,7 +4,13 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { type PersonResponseDto } from '@immich/sdk';
-  import { mdiDotsVertical } from '@mdi/js';
+  import {
+    mdiAccountEditOutline,
+    mdiAccountMultipleCheckOutline,
+    mdiCalendarEditOutline,
+    mdiDotsVertical,
+    mdiEyeOffOutline,
+  } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import IconButton from '../elements/buttons/icon-button.svelte';
@@ -83,10 +89,18 @@
 {#if showContextMenu}
   <Portal target="body">
     <ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
-      <MenuOption on:click={() => onMenuClick('hide-person')} text="Hide Person" />
-      <MenuOption on:click={() => onMenuClick('change-name')} text="Change name" />
-      <MenuOption on:click={() => onMenuClick('set-birth-date')} text="Set date of birth" />
-      <MenuOption on:click={() => onMenuClick('merge-people')} text="Merge People" />
+      <MenuOption on:click={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text="Hide person" />
+      <MenuOption on:click={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text="Change name" />
+      <MenuOption
+        on:click={() => onMenuClick('set-birth-date')}
+        icon={mdiCalendarEditOutline}
+        text="Set date of birth"
+      />
+      <MenuOption
+        on:click={() => onMenuClick('merge-people')}
+        icon={mdiAccountMultipleCheckOutline}
+        text="Merge people"
+      />
     </ContextMenu>
   </Portal>
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/add-to-album.svelte b/web/src/lib/components/photos-page/actions/add-to-album.svelte
index cb059947bb..063d3bdb81 100644
--- a/web/src/lib/components/photos-page/actions/add-to-album.svelte
+++ b/web/src/lib/components/photos-page/actions/add-to-album.svelte
@@ -11,6 +11,7 @@
   import { createAlbum, type AlbumResponseDto } from '@immich/sdk';
   import { getMenuContext } from '../asset-select-context-menu.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
 
   export let shared = false;
   let showAlbumPicker = false;
@@ -53,7 +54,11 @@
   };
 </script>
 
-<MenuOption on:click={() => (showAlbumPicker = true)} text={shared ? 'Add to Shared Album' : 'Add to Album'} />
+<MenuOption
+  on:click={() => (showAlbumPicker = true)}
+  text={shared ? 'Add to shared album' : 'Add to album'}
+  icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
+/>
 
 {#if showAlbumPicker}
   <AlbumSelectionModal
diff --git a/web/src/lib/components/photos-page/actions/archive-action.svelte b/web/src/lib/components/photos-page/actions/archive-action.svelte
index 1dc9cc0a51..f111db8036 100644
--- a/web/src/lib/components/photos-page/actions/archive-action.svelte
+++ b/web/src/lib/components/photos-page/actions/archive-action.svelte
@@ -56,7 +56,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption {text} on:click={handleArchive} />
+  <MenuOption {text} {icon} on:click={handleArchive} />
 {/if}
 
 {#if !menuItem}
diff --git a/web/src/lib/components/photos-page/actions/asset-job-actions.svelte b/web/src/lib/components/photos-page/actions/asset-job-actions.svelte
index 7b79cb36c0..0dddaf7938 100644
--- a/web/src/lib/components/photos-page/actions/asset-job-actions.svelte
+++ b/web/src/lib/components/photos-page/actions/asset-job-actions.svelte
@@ -4,7 +4,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { getAssetJobMessage, getAssetJobName } from '$lib/utils';
+  import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetJobName, AssetTypeEnum, runAssetJobs } from '@immich/sdk';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
@@ -33,6 +33,6 @@
 
 {#each jobs as job}
   {#if isAllVideos || job !== AssetJobName.TranscodeVideo}
-    <MenuOption text={getAssetJobName(job)} on:click={() => handleRunJob(job)} />
+    <MenuOption text={getAssetJobName(job)} icon={getAssetJobIcon(job)} on:click={() => handleRunJob(job)} />
   {/if}
 {/each}
diff --git a/web/src/lib/components/photos-page/actions/change-date-action.svelte b/web/src/lib/components/photos-page/actions/change-date-action.svelte
index 42e4aad68d..412a2f2ca7 100644
--- a/web/src/lib/components/photos-page/actions/change-date-action.svelte
+++ b/web/src/lib/components/photos-page/actions/change-date-action.svelte
@@ -7,6 +7,7 @@
   import { DateTime } from 'luxon';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { mdiCalendarEditOutline } from '@mdi/js';
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
@@ -26,7 +27,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text="Change date" on:click={() => (isShowChangeDate = true)} />
+  <MenuOption text="Change date" icon={mdiCalendarEditOutline} on:click={() => (isShowChangeDate = true)} />
 {/if}
 {#if isShowChangeDate}
   <ChangeDate
diff --git a/web/src/lib/components/photos-page/actions/change-location-action.svelte b/web/src/lib/components/photos-page/actions/change-location-action.svelte
index 953dcb491b..6e3a24a575 100644
--- a/web/src/lib/components/photos-page/actions/change-location-action.svelte
+++ b/web/src/lib/components/photos-page/actions/change-location-action.svelte
@@ -6,6 +6,7 @@
   import { updateAssets } from '@immich/sdk';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { mdiMapMarkerMultipleOutline } from '@mdi/js';
 
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
@@ -26,7 +27,11 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text="Change location" on:click={() => (isShowChangeLocation = true)} />
+  <MenuOption
+    text="Change location"
+    icon={mdiMapMarkerMultipleOutline}
+    on:click={() => (isShowChangeLocation = true)}
+  />
 {/if}
 {#if isShowChangeLocation}
   <ChangeLocation
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index 667de9682a..b18403d5c4 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -21,6 +21,8 @@
   let isShowConfirmation = false;
   let loading = false;
 
+  $: label = force ? 'Permanently delete' : 'Delete';
+
   const handleTrash = async () => {
     if (force) {
       isShowConfirmation = true;
@@ -46,11 +48,11 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text={force ? 'Permanently Delete' : 'Delete'} on:click={handleTrash} />
+  <MenuOption text={label} icon={mdiDeleteOutline} on:click={handleTrash} />
 {:else if loading}
   <CircleIconButton title="Loading" icon={mdiTimerSand} />
 {:else}
-  <CircleIconButton title="Delete" icon={mdiDeleteOutline} on:click={handleTrash} />
+  <CircleIconButton title={label} icon={mdiDeleteOutline} on:click={handleTrash} />
 {/if}
 
 {#if isShowConfirmation}
diff --git a/web/src/lib/components/photos-page/actions/download-action.svelte b/web/src/lib/components/photos-page/actions/download-action.svelte
index 3619db950e..fbdf4ae53d 100644
--- a/web/src/lib/components/photos-page/actions/download-action.svelte
+++ b/web/src/lib/components/photos-page/actions/download-action.svelte
@@ -3,7 +3,7 @@
   import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { mdiCloudDownloadOutline } from '@mdi/js';
+  import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
 
   export let filename = 'immich.zip';
   export let menuItem = false;
@@ -21,10 +21,12 @@
     clearSelect();
     await downloadArchive(filename, { assetIds: assets.map((asset) => asset.id) });
   };
+
+  $: menuItemIcon = getAssets().size === 1 ? mdiFileDownloadOutline : mdiFolderDownloadOutline;
 </script>
 
 {#if menuItem}
-  <MenuOption text="Download" on:click={handleDownloadFiles} />
+  <MenuOption text="Download" icon={menuItemIcon} on:click={handleDownloadFiles} />
 {:else}
   <CircleIconButton title="Download" icon={mdiCloudDownloadOutline} on:click={handleDownloadFiles} />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/favorite-action.svelte b/web/src/lib/components/photos-page/actions/favorite-action.svelte
index ea573ffd7f..520dd46564 100644
--- a/web/src/lib/components/photos-page/actions/favorite-action.svelte
+++ b/web/src/lib/components/photos-page/actions/favorite-action.svelte
@@ -16,7 +16,7 @@
   export let menuItem = false;
   export let removeFavorite: boolean;
 
-  $: text = removeFavorite ? 'Remove from Favorites' : 'Favorite';
+  $: text = removeFavorite ? 'Remove from favorites' : 'Favorite';
   $: icon = removeFavorite ? mdiHeartMinusOutline : mdiHeartOutline;
 
   let loading = false;
@@ -57,7 +57,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption {text} on:click={handleFavorite} />
+  <MenuOption {text} {icon} on:click={handleFavorite} />
 {/if}
 
 {#if !menuItem}
diff --git a/web/src/lib/components/photos-page/actions/remove-from-album.svelte b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
index 8fbc5e6ad0..5d59fcf1c4 100644
--- a/web/src/lib/components/photos-page/actions/remove-from-album.svelte
+++ b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
@@ -6,7 +6,7 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
-  import { mdiDeleteOutline } from '@mdi/js';
+  import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
@@ -50,7 +50,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text="Remove from album" on:click={() => (isShowConfirmation = true)} />
+  <MenuOption text="Remove from album" icon={mdiImageRemoveOutline} on:click={() => (isShowConfirmation = true)} />
 {:else}
   <CircleIconButton title="Remove from album" icon={mdiDeleteOutline} on:click={() => (isShowConfirmation = true)} />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/stack-action.svelte b/web/src/lib/components/photos-page/actions/stack-action.svelte
index 9e0bb2dc53..1df6cce30a 100644
--- a/web/src/lib/components/photos-page/actions/stack-action.svelte
+++ b/web/src/lib/components/photos-page/actions/stack-action.svelte
@@ -8,6 +8,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { mdiImageMultipleOutline } from '@mdi/js';
 
   export let onStack: OnStack | undefined;
 
@@ -55,4 +56,4 @@
   };
 </script>
 
-<MenuOption text="Stack" on:click={handleStack} />
+<MenuOption text="Stack" icon={mdiImageMultipleOutline} on:click={handleStack} />
diff --git a/web/src/lib/components/photos-page/asset-select-context-menu.svelte b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
index 9af4ff9319..d2d9ea399b 100644
--- a/web/src/lib/components/photos-page/asset-select-context-menu.svelte
+++ b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
@@ -29,9 +29,7 @@
   <CircleIconButton {title} {icon} on:click={handleShowMenu} />
   {#if showContextMenu}
     <ContextMenu {...contextMenuPosition}>
-      <div class="flex flex-col rounded-lg">
-        <slot />
-      </div>
+      <slot />
     </ContextMenu>
   {/if}
 </div>
diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
index c10371d830..aabf8c25c2 100644
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
@@ -23,12 +23,14 @@
 <div
   transition:slide={{ duration: 200, easing: quintOut }}
   bind:this={menuElement}
-  class="absolute z-10 w-[200px] overflow-hidden rounded-lg shadow-lg"
+  class="absolute z-10 min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg"
   style="left: {left}px; top: {top}px;"
   role="menu"
   use:clickOutside
   on:outclick
   on:escape
 >
-  <slot />
+  <div class="flex flex-col rounded-lg">
+    <slot />
+  </div>
 </div>
diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
index d2e2eb69b7..6d5adc4197 100644
--- a/web/src/lib/components/shared-components/context-menu/menu-option.svelte
+++ b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
@@ -1,6 +1,9 @@
 <script>
+  import Icon from '$lib/components/elements/icon.svelte';
+
   export let text = '';
   export let subtitle = '';
+  export let icon = '';
 </script>
 
 <button
@@ -9,7 +12,14 @@
   role="menuitem"
 >
   {#if text}
-    {text}
+    {#if icon}
+      <p class="flex gap-2">
+        <Icon path={icon} size="18" />
+        {text}
+      </p>
+    {:else}
+      {text}
+    {/if}
   {:else}
     <slot />
   {/if}
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 2cebba6301..8f224e93ba 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -12,6 +12,7 @@ import {
   unlinkOAuthAccount,
   type UserResponseDto,
 } from '@immich/sdk';
+import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiImageRefreshOutline } from '@mdi/js';
 
 interface DownloadRequestOptions<T = unknown> {
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
@@ -196,6 +197,16 @@ export const getAssetJobMessage = (job: AssetJobName) => {
   return messages[job];
 };
 
+export const getAssetJobIcon = (job: AssetJobName) => {
+  const names: Record<AssetJobName, string> = {
+    [AssetJobName.RefreshMetadata]: mdiDatabaseRefreshOutline,
+    [AssetJobName.RegenerateThumbnail]: mdiImageRefreshOutline,
+    [AssetJobName.TranscodeVideo]: mdiCogRefreshOutline,
+  };
+
+  return names[job];
+};
+
 export const copyToClipboard = async (secret: string) => {
   try {
     await navigator.clipboard.writeText(secret);
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index 2f74a7872b..23e6a1b2ee 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -64,11 +64,14 @@
     mdiArrowLeft,
     mdiDeleteOutline,
     mdiDotsVertical,
-    mdiFileImagePlusOutline,
     mdiFolderDownloadOutline,
     mdiLink,
     mdiPlus,
     mdiShareVariantOutline,
+    mdiPresentationPlay,
+    mdiCogOutline,
+    mdiImageOutline,
+    mdiImagePlusOutline,
   } from '@mdi/js';
   import { fly } from 'svelte/transition';
   import type { PageData } from './$types';
@@ -385,23 +388,25 @@
       <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
         <CreateSharedLink />
         <SelectAllAssets {assetStore} {assetInteractionStore} />
-        <AssetSelectContextMenu icon={mdiPlus} title="Add">
+        <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
           <AddToAlbum />
           <AddToAlbum shared />
         </AssetSelectContextMenu>
+        {#if isAllUserOwned}
+          <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
+        {/if}
         <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
+          <DownloadAction menuItem filename="{album.albumName}.zip" />
           {#if isAllUserOwned}
-            <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
+            <ChangeDate menuItem />
+            <ChangeLocation menuItem />
             <ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
           {/if}
-          <DownloadAction menuItem filename="{album.albumName}.zip" />
           {#if isOwned || isAllUserOwned}
             <RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
           {/if}
           {#if isAllUserOwned}
             <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
-            <ChangeDate menuItem />
-            <ChangeLocation menuItem />
           {/if}
         </AssetSelectContextMenu>
       </AssetSelectControlBar>
@@ -410,9 +415,9 @@
         <ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close={() => goto(backUrl)}>
           <svelte:fragment slot="trailing">
             <CircleIconButton
-              title="Add Photos"
+              title="Add photos"
               on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
-              icon={mdiFileImagePlusOutline}
+              icon={mdiImagePlusOutline}
             />
 
             {#if isOwned}
@@ -421,11 +426,6 @@
                 on:click={() => (viewMode = ViewMode.SELECT_USERS)}
                 icon={mdiShareVariantOutline}
               />
-              <CircleIconButton
-                title="Delete album"
-                on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
-                icon={mdiDeleteOutline}
-              />
             {/if}
 
             {#if album.assetCount > 0}
@@ -436,9 +436,22 @@
                   <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} icon={mdiDotsVertical}>
                     {#if viewMode === ViewMode.ALBUM_OPTIONS}
                       <ContextMenu {...contextMenuPosition}>
-                        <MenuOption on:click={handleStartSlideshow} text="Slideshow" />
-                        <MenuOption on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" />
-                        <MenuOption on:click={() => (viewMode = ViewMode.OPTIONS)} text="Options" />
+                        <MenuOption icon={mdiPresentationPlay} text="Slideshow" on:click={handleStartSlideshow} />
+                        <MenuOption
+                          icon={mdiImageOutline}
+                          text="Select album cover"
+                          on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
+                        />
+                        <MenuOption
+                          icon={mdiCogOutline}
+                          text="Options"
+                          on:click={() => (viewMode = ViewMode.OPTIONS)}
+                        />
+                        <MenuOption
+                          icon={mdiDeleteOutline}
+                          text="Delete album"
+                          on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
+                        />
                       </ContextMenu>
                     {/if}
                   </CircleIconButton>
diff --git a/web/src/routes/(user)/archive/+page.svelte b/web/src/routes/(user)/archive/+page.svelte
index 93dc09a508..2f943a4ffd 100644
--- a/web/src/routes/(user)/archive/+page.svelte
+++ b/web/src/routes/(user)/archive/+page.svelte
@@ -31,14 +31,14 @@
     <ArchiveAction unarchive onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
-    <AssetSelectContextMenu icon={mdiPlus} title="Add">
+    <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
       <AddToAlbum />
       <AddToAlbum shared />
     </AssetSelectContextMenu>
-    <DeleteAssets onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+    <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
       <DownloadAction menuItem />
-      <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
+      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
     </AssetSelectContextMenu>
   </AssetSelectControlBar>
 {/if}
diff --git a/web/src/routes/(user)/favorites/+page.svelte b/web/src/routes/(user)/favorites/+page.svelte
index 067859b690..1d080d1003 100644
--- a/web/src/routes/(user)/favorites/+page.svelte
+++ b/web/src/routes/(user)/favorites/+page.svelte
@@ -34,16 +34,16 @@
     <FavoriteAction removeFavorite onFavorite={(assetIds) => assetStore.removeAssets(assetIds)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
-    <AssetSelectContextMenu icon={mdiPlus} title="Add">
+    <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
       <AddToAlbum />
       <AddToAlbum shared />
     </AssetSelectContextMenu>
-    <DeleteAssets onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
       <DownloadAction menuItem />
-      <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
       <ChangeDate menuItem />
       <ChangeLocation menuItem />
+      <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
+      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
     </AssetSelectContextMenu>
   </AssetSelectControlBar>
 {/if}
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 889e025f9c..3c5c199444 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -44,7 +44,16 @@
     type AssetResponseDto,
     type PersonResponseDto,
   } from '@immich/sdk';
-  import { mdiArrowLeft, mdiDotsVertical, mdiPlus } from '@mdi/js';
+  import {
+    mdiAccountBoxOutline,
+    mdiAccountMultipleCheckOutline,
+    mdiArrowLeft,
+    mdiCalendarEditOutline,
+    mdiDotsVertical,
+    mdiEyeOffOutline,
+    mdiEyeOutline,
+    mdiPlus,
+  } from '@mdi/js';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import { listNavigation } from '$lib/utils/list-navigation';
@@ -395,18 +404,18 @@
     <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
       <CreateSharedLink />
       <SelectAllAssets {assetStore} {assetInteractionStore} />
-      <AssetSelectContextMenu icon={mdiPlus} title="Add">
+      <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
         <AddToAlbum />
         <AddToAlbum shared />
       </AssetSelectContextMenu>
-      <DeleteAssets onAssetDelete={(assetIds) => $assetStore.removeAssets(assetIds)} />
+      <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
       <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
         <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
-        <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
-        <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => $assetStore.removeAssets(assetIds)} />
-        <MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
+        <MenuOption icon={mdiAccountMultipleCheckOutline} text="Fix incorrect match" on:click={handleReassignAssets} />
         <ChangeDate menuItem />
         <ChangeLocation menuItem />
+        <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => $assetStore.removeAssets(assetIds)} />
+        <DeleteAssets menuItem onAssetDelete={(assetIds) => $assetStore.removeAssets(assetIds)} />
       </AssetSelectContextMenu>
     </AssetSelectControlBar>
   {:else}
@@ -414,13 +423,26 @@
       <ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close={() => goto(previousRoute)}>
         <svelte:fragment slot="trailing">
           <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
-            <MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_PERSON)} />
-            <MenuOption text="Set date of birth" on:click={() => (viewMode = ViewMode.BIRTH_DATE)} />
-            <MenuOption text="Merge person" on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)} />
+            <MenuOption
+              text="Select featured photo"
+              icon={mdiAccountBoxOutline}
+              on:click={() => (viewMode = ViewMode.SELECT_PERSON)}
+            />
             <MenuOption
               text={data.person.isHidden ? 'Unhide person' : 'Hide person'}
+              icon={data.person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
               on:click={() => toggleHidePerson()}
             />
+            <MenuOption
+              text="Set date of birth"
+              icon={mdiCalendarEditOutline}
+              on:click={() => (viewMode = ViewMode.BIRTH_DATE)}
+            />
+            <MenuOption
+              text="Merge people"
+              icon={mdiAccountMultipleCheckOutline}
+              on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)}
+            />
           </AssetSelectContextMenu>
         </svelte:fragment>
       </ControlAppBar>
@@ -428,7 +450,7 @@
 
     {#if viewMode === ViewMode.SELECT_PERSON}
       <ControlAppBar on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}>
-        <svelte:fragment slot="leading">Select feature photo</svelte:fragment>
+        <svelte:fragment slot="leading">Select featured photo</svelte:fragment>
       </ControlAppBar>
     {/if}
   {/if}
diff --git a/web/src/routes/(user)/photos/+page.svelte b/web/src/routes/(user)/photos/+page.svelte
index 9e80c71e00..ffc30d6565 100644
--- a/web/src/routes/(user)/photos/+page.svelte
+++ b/web/src/routes/(user)/photos/+page.svelte
@@ -55,23 +55,25 @@
   >
     <CreateSharedLink on:escape={() => (handleEscapeKey = true)} />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
-    <AssetSelectContextMenu icon={mdiPlus} title="Add">
+    <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
       <AddToAlbum />
       <AddToAlbum shared />
     </AssetSelectContextMenu>
-    <DeleteAssets
-      on:escape={() => (handleEscapeKey = true)}
-      onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
-    />
+    <FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
-      <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
       <DownloadAction menuItem />
-      <ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
       {#if $selectedAssets.size > 1}
         <StackAction onStack={(assetIds) => assetStore.removeAssets(assetIds)} />
       {/if}
       <ChangeDate menuItem />
       <ChangeLocation menuItem />
+      <ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
+      <DeleteAssets
+        menuItem
+        on:escape={() => (handleEscapeKey = true)}
+        onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
+      />
+      <hr />
       <AssetJobActions />
     </AssetSelectContextMenu>
   </AssetSelectControlBar>
diff --git a/web/src/routes/(user)/search/+page.svelte b/web/src/routes/(user)/search/+page.svelte
index 5774541e4e..ab726b55cc 100644
--- a/web/src/routes/(user)/search/+page.svelte
+++ b/web/src/routes/(user)/search/+page.svelte
@@ -209,18 +209,18 @@
       <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
         <CreateSharedLink />
         <CircleIconButton title="Select all" icon={mdiSelectAll} on:click={handleSelectAll} />
-        <AssetSelectContextMenu icon={mdiPlus} title="Add">
+        <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
           <AddToAlbum />
           <AddToAlbum shared />
         </AssetSelectContextMenu>
-        <DeleteAssets {onAssetDelete} />
+        <FavoriteAction removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
 
         <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
           <DownloadAction menuItem />
-          <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
-          <ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
           <ChangeDate menuItem />
           <ChangeLocation menuItem />
+          <ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
+          <DeleteAssets menuItem {onAssetDelete} />
         </AssetSelectContextMenu>
       </AssetSelectControlBar>
     </div>
diff --git a/web/src/routes/(user)/trash/+page.svelte b/web/src/routes/(user)/trash/+page.svelte
index fd176b7a1c..66e3bb5074 100644
--- a/web/src/routes/(user)/trash/+page.svelte
+++ b/web/src/routes/(user)/trash/+page.svelte
@@ -76,13 +76,13 @@
       <LinkButton on:click={handleRestoreTrash}>
         <div class="flex place-items-center gap-2 text-sm">
           <Icon path={mdiHistory} size="18" />
-          Restore All
+          Restore all
         </div>
       </LinkButton>
       <LinkButton on:click={() => (isShowEmptyConfirmation = true)}>
         <div class="flex place-items-center gap-2 text-sm">
           <Icon path={mdiDeleteOutline} size="18" />
-          Empty Trash
+          Empty trash
         </div>
       </LinkButton>
     </div>