refactor: asset actions (#26367)

web/src/lib/components/ActionButton.svelte

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

web/src/lib/components/album-page/album-shared-link.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import ActionButton from '$lib/components/ActionButton.svelte';
   import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
-  import { Text } from '@immich/ui';
+  import { ActionButton, Text } from '@immich/ui';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 

web/src/lib/components/album-page/album-viewer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ActionButton from '$lib/components/ActionButton.svelte';
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
   import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
@@ -19,7 +18,7 @@
   import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
-  import { IconButton, Logo } from '@immich/ui';
+  import { ActionButton, IconButton, Logo } from '@immich/ui';
   import { mdiDownload, mdiFileImagePlusOutline, mdiPresentationPlay } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  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 AddToStackAction from '$lib/components/asset-viewer/actions/add-to-stack-action.svelte';
@@ -34,7 +33,7 @@
     type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
-  import { CommandPaletteDefaultProvider, type ActionItem } from '@immich/ui';
+  import { ActionButton, CommandPaletteDefaultProvider, type ActionItem } from '@immich/ui';
   import {
     mdiArrowLeft,
     mdiCompare,
@@ -91,56 +90,11 @@
     shortcuts: [{ key: 'Escape' }],
   });
 
-  const {
+  const Actions = $derived(getAssetActions($t, asset));
-    Share,
-    Download,
-    DownloadOriginal,
-    SharedLinkDownload,
-    Offline,
-    Favorite,
-    Unfavorite,
-    PlayMotionPhoto,
-    StopMotionPhoto,
-    AddToAlbum,
-    ZoomIn,
-    ZoomOut,
-    Copy,
-    Info,
-    Edit,
-    RefreshFacesJob,
-    RefreshMetadataJob,
-    RegenerateThumbnailJob,
-    TranscodeVideoJob,
-  } = $derived(getAssetActions($t, asset));
   const sharedLink = getSharedLink();
 </script>
 
-<CommandPaletteDefaultProvider
+<CommandPaletteDefaultProvider name={$t('assets')} actions={withoutIcons([Cast, ...Object.values(Actions)])} />
-  name={$t('assets')}
-  actions={withoutIcons([
-    Close,
-    Cast,
-    Share,
-    Download,
-    DownloadOriginal,
-    SharedLinkDownload,
-    Offline,
-    Favorite,
-    Unfavorite,
-    PlayMotionPhoto,
-    StopMotionPhoto,
-    AddToAlbum,
-    ZoomIn,
-    ZoomOut,
-    Copy,
-    Info,
-    Edit,
-    RefreshFacesJob,
-    RefreshMetadataJob,
-    RegenerateThumbnailJob,
-    TranscodeVideoJob,
-  ])}
-/>
 
 <div
   class="flex h-16 place-items-center justify-between bg-linear-to-b from-black/40 px-3 transition-transform duration-200"
@@ -151,23 +105,23 @@
 
   <div class="flex gap-2 overflow-x-auto dark" data-testid="asset-viewer-navbar-actions">
     <ActionButton action={Cast} />
-    <ActionButton action={Share} />
+    <ActionButton action={Actions.Share} />
-    <ActionButton action={Offline} />
+    <ActionButton action={Actions.Offline} />
-    <ActionButton action={PlayMotionPhoto} />
+    <ActionButton action={Actions.PlayMotionPhoto} />
-    <ActionButton action={StopMotionPhoto} />
+    <ActionButton action={Actions.StopMotionPhoto} />
-    <ActionButton action={ZoomIn} />
+    <ActionButton action={Actions.ZoomIn} />
-    <ActionButton action={ZoomOut} />
+    <ActionButton action={Actions.ZoomOut} />
-    <ActionButton action={Copy} />
+    <ActionButton action={Actions.Copy} />
-    <ActionButton action={SharedLinkDownload} />
+    <ActionButton action={Actions.SharedLinkDownload} />
-    <ActionButton action={Info} />
+    <ActionButton action={Actions.Info} />
-    <ActionButton action={Favorite} />
+    <ActionButton action={Actions.Favorite} />
-    <ActionButton action={Unfavorite} />
+    <ActionButton action={Actions.Unfavorite} />
 
     {#if isOwner}
       <RatingAction {asset} {onAction} />
     {/if}
 
-    <ActionButton action={Edit} />
+    <ActionButton action={Actions.Edit} />
 
     {#if isOwner}
       <DeleteAction {asset} {onAction} {preAction} {onUndoDelete} />
@@ -179,14 +133,14 @@
           <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
         {/if}
 
-        <ActionMenuItem action={Download} />
+        <ActionMenuItem action={Actions.Download} />
-        <ActionMenuItem action={DownloadOriginal} />
+        <ActionMenuItem action={Actions.DownloadOriginal} />
 
         {#if !isLocked && asset.isTrashed}
           <RestoreAction {asset} {onAction} />
         {/if}
 
-        <ActionMenuItem action={AddToAlbum} />
+        <ActionMenuItem action={Actions.AddToAlbum} />
 
         {#if isOwner}
           <AddToStackAction {asset} {stack} {onAction} />
@@ -249,10 +203,10 @@
         {/if}
         {#if isOwner}
           <hr />
-          <ActionMenuItem action={RefreshFacesJob} />
+          <ActionMenuItem action={Actions.RefreshFacesJob} />
-          <ActionMenuItem action={RefreshMetadataJob} />
+          <ActionMenuItem action={Actions.RefreshMetadataJob} />
-          <ActionMenuItem action={RegenerateThumbnailJob} />
+          <ActionMenuItem action={Actions.RegenerateThumbnailJob} />
-          <ActionMenuItem action={TranscodeVideoJob} />
+          <ActionMenuItem action={Actions.TranscodeVideoJob} />
         {/if}
       </ButtonContextMenu>
     {/if}

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -5,7 +5,6 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { clickOutside } from '$lib/actions/click-outside';
-  import ActionButton from '$lib/components/ActionButton.svelte';
   import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import SkipLink from '$lib/elements/SkipLink.svelte';
@@ -17,7 +16,7 @@
   import { notificationManager } from '$lib/stores/notification-manager.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import { user } from '$lib/stores/user.store';
-  import { Button, IconButton, Logo } from '@immich/ui';
+  import { ActionButton, Button, IconButton, Logo } from '@immich/ui';
   import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/sharedlinks-page/SharedLinkCard.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import ActionButton from '$lib/components/ActionButton.svelte';
   import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
   import { Route } from '$lib/route';
   import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
-  import { ContextMenuButton, MenuItemType, Text } from '@immich/ui';
+  import { ActionButton, ContextMenuButton, MenuItemType, Text } from '@immich/ui';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
 

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto, onNavigate } from '$app/navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import ActionButton from '$lib/components/ActionButton.svelte';
   import AlbumDescription from '$lib/components/album-page/album-description.svelte';
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
@@ -54,7 +53,14 @@
   import { handleError } from '$lib/utils/handle-error';
   import { isAlbumsRoute, navigate, type AssetGridRouteSearchParams } from '$lib/utils/navigation';
   import { AlbumUserRole, AssetVisibility, getAlbumInfo, updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
-  import { CommandPaletteDefaultProvider, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
+  import {
+    ActionButton,
+    CommandPaletteDefaultProvider,
+    Icon,
+    IconButton,
+    modalManager,
+    toastManager,
+  } from '@immich/ui';
   import {
     mdiAccountEye,
     mdiAccountEyeOutline,