[pull] main from immich-app:main

e2e/src/generators.ts

@@ -26,6 +26,5 @@ export const makeRandomImage = () => {
   if (!value) {
     throw new Error('Ran out of random asset data');
   }
-
   return value;
 };

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.52.0",
+    "@immich/ui": "^0.53.3",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
@@ -39,7 +39,6 @@
     "@types/geojson": "^7946.0.16",
     "@zoom-image/core": "^0.41.0",
     "@zoom-image/svelte": "^0.3.0",
-    "async-mutex": "^0.5.0",
     "dom-to-image": "^2.6.0",
     "fabric": "^6.5.4",
     "geo-coordinates-parser": "^1.7.4",

web/src/lib/components/ActionButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isEnabled } from '$lib/utils';
   import { IconButton, type ActionItem } from '@immich/ui';
 
   type Props = {
@@ -9,6 +10,6 @@
   const { title, icon, color = 'secondary', onAction } = $derived(action);
 </script>
 
-{#if action.$if?.() ?? true}
+{#if icon && isEnabled(action)}
   <IconButton variant="ghost" shape="round" {color} {icon} aria-label={title} onclick={() => onAction(action)} />
 {/if}

web/src/lib/components/ActionMenuItem.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { isEnabled } from '$lib/utils';
+  import { type ActionItem } from '@immich/ui';
+
+  type Props = {
+    action: ActionItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, onAction } = $derived(action);
+</script>
+
+{#if icon && isEnabled(action)}
+  <MenuOption {icon} text={title} onClick={() => onAction(action)} />
+{/if}

web/src/lib/components/TableButton.svelte

@@ -10,6 +10,6 @@
   const { title, icon, onAction } = $derived(action);
 </script>
 
-{#if action.$if?.() ?? true}
+{#if icon && (action.$if?.() ?? true)}
   <IconButton {size} shape="round" color="primary" {icon} aria-label={title} onclick={() => onAction(action)} />
 {/if}

web/src/lib/components/asset-viewer/actions/action.ts

@@ -5,8 +5,6 @@ import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto, StackRespon
 type ActionMap = {
   [AssetAction.ARCHIVE]: { asset: TimelineAsset };
   [AssetAction.UNARCHIVE]: { asset: TimelineAsset };
-  [AssetAction.FAVORITE]: { asset: TimelineAsset };
-  [AssetAction.UNFAVORITE]: { asset: TimelineAsset };
   [AssetAction.TRASH]: { asset: TimelineAsset };
   [AssetAction.DELETE]: { asset: TimelineAsset };
   [AssetAction.RESTORE]: { asset: TimelineAsset };

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

@@ -2,13 +2,12 @@
   import { goto } from '$app/navigation';
   import { resolve } from '$app/paths';
   import ActionButton from '$lib/components/ActionButton.svelte';
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import AddToAlbumAction from '$lib/components/asset-viewer/actions/add-to-album-action.svelte';
   import AddToStackAction from '$lib/components/asset-viewer/actions/add-to-stack-action.svelte';
   import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
   import DeleteAction from '$lib/components/asset-viewer/actions/delete-action.svelte';
-  import DownloadAction from '$lib/components/asset-viewer/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/asset-viewer/actions/favorite-action.svelte';
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
   import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
@@ -28,7 +27,7 @@
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getAssetJobName, getSharedLink } from '$lib/utils';
+  import { getAssetJobName, withoutIcons } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -97,14 +96,13 @@
     setPlayOriginalVideo,
   }: Props = $props();
 
-  const sharedLink = getSharedLink();
   let isOwner = $derived($user && asset.ownerId === $user?.id);
-  let showDownloadButton = $derived(sharedLink ? sharedLink.allowDownload : !asset.isOffline);
   let isLocked = $derived(asset.visibility === AssetVisibility.Locked);
   let smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
 
   const Close: ActionItem = {
     title: $t('go_back'),
+    type: $t('assets'),
     icon: mdiArrowLeft,
     $if: () => !!onClose,
     onAction: () => onClose?.(),
@@ -113,7 +111,8 @@
 
   const { Cast } = $derived(getGlobalActions($t));
 
-  const { Share, Offline, PlayMotionPhoto, StopMotionPhoto, Info } = $derived(getAssetActions($t, asset));
+  const { Share, Download, SharedLinkDownload, Offline, Favorite, Unfavorite, PlayMotionPhoto, StopMotionPhoto, Info } =
+    $derived(getAssetActions($t, asset));
 
   // $: showEditorButton =
   //   isOwner &&
@@ -128,7 +127,7 @@
 
 <CommandPaletteDefaultProvider
   name={$t('assets')}
-  actions={[Close, Share, Offline, PlayMotionPhoto, StopMotionPhoto, Info]}
+  actions={withoutIcons([Close, Share, Offline, Favorite, Unfavorite, PlayMotionPhoto, StopMotionPhoto, Info])}
 />
 
 <div
@@ -167,14 +166,12 @@
       />
     {/if}
 
-    {#if !isOwner && showDownloadButton}
-      <DownloadAction asset={toTimelineAsset(asset)} />
-    {/if}
-
+    <ActionButton action={SharedLinkDownload} />
     <ActionButton action={Info} />
+    <ActionButton action={Favorite} />
+    <ActionButton action={Unfavorite} />
 
     {#if isOwner}
-      <FavoriteAction {asset} {onAction} />
       <RatingAction {asset} {onAction} />
     {/if}
 
@@ -185,9 +182,8 @@
         {#if showSlideshow && !isLocked}
           <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
         {/if}
-        {#if showDownloadButton}
-          <DownloadAction asset={toTimelineAsset(asset)} menuItem />
-        {/if}
+
+        <ActionMenuItem action={Download} />
 
         {#if !isLocked}
           {#if asset.isTrashed}