feat(web): rework context menus: add icons and reorder items (#8090)

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

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}

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}

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

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

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}

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}

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}

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}

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} />

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>