refactor: asset navbar (#25476)

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

@@ -7,7 +7,6 @@
   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 EditAction from '$lib/components/asset-viewer/actions/edit-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';
@@ -20,7 +19,6 @@
   import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
   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';
-  import { ProjectionType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
@@ -67,7 +65,6 @@
     onAction: OnAction;
     onUndoDelete?: OnUndoDelete;
     onPlaySlideshow: () => void;
-    onEdit: () => void;
     onClose?: () => void;
     playOriginalVideo: boolean;
     setPlayOriginalVideo: (value: boolean) => void;
@@ -86,26 +83,42 @@
     onUndoDelete = undefined,
     onPlaySlideshow,
     onClose,
-    onEdit,
     playOriginalVideo = false,
     setPlayOriginalVideo,
   }: Props = $props();
 
-  let isOwner = $derived($user && asset.ownerId === $user?.id);
-  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?.(),
-    shortcuts: [{ key: 'Escape' }],
-  };
+  const isOwner = $derived($user && asset.ownerId === $user?.id);
+  const isLocked = $derived(asset.visibility === AssetVisibility.Locked);
+  const isImage = $derived(asset.type === AssetTypeEnum.Image);
+  const smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
 
   const { Cast } = $derived(getGlobalActions($t));
 
+  const { Close, ZoomIn, ZoomOut } = $derived({
+    Close: {
+      title: $t('go_back'),
+      type: $t('assets'),
+      icon: mdiArrowLeft,
+      $if: () => !!onClose,
+      onAction: () => onClose?.(),
+      shortcuts: [{ key: 'Escape' }],
+    },
+
+    ZoomIn: {
+      title: $t('zoom_image'),
+      icon: mdiMagnifyPlusOutline,
+      $if: () => isImage && $photoZoomState && $photoZoomState.currentZoom <= 1,
+      onAction: () => onZoomImage(),
+    },
+
+    ZoomOut: {
+      title: $t('zoom_image'),
+      icon: mdiMagnifyMinusOutline,
+      $if: () => $photoZoomState && $photoZoomState.currentZoom > 1,
+      onAction: () => onZoomImage(),
+    },
+  } satisfies Record<string, ActionItem>);
+
   const {
     Share,
     Download,
@@ -117,22 +130,13 @@
     PlayMotionPhoto,
     StopMotionPhoto,
     Info,
+    Edit,
     RefreshFacesJob,
     RefreshMetadataJob,
     RegenerateThumbnailJob,
     TranscodeVideoJob,
   } = $derived(getAssetActions($t, asset));
   const sharedLink = getSharedLink();
-
-  const editorDisabled = $derived(
-    !isOwner ||
-      asset.type !== AssetTypeEnum.Image ||
-      asset.livePhotoVideoId ||
-      (asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR &&
-        asset.originalPath.toLowerCase().endsWith('.insp')) ||
-      asset.originalPath.toLowerCase().endsWith('.gif') ||
-      asset.originalPath.toLowerCase().endsWith('.svg'),
-  );
 </script>
 
 <CommandPaletteDefaultProvider
@@ -150,6 +154,7 @@
     PlayMotionPhoto,
     StopMotionPhoto,
     Info,
+    Edit,
     RefreshFacesJob,
     RefreshMetadataJob,
     RegenerateThumbnailJob,
@@ -170,18 +175,9 @@
     <ActionButton action={Offline} />
     <ActionButton action={PlayMotionPhoto} />
     <ActionButton action={StopMotionPhoto} />
+    <ActionButton action={ZoomIn} />
+    <ActionButton action={ZoomOut} />
 
-    {#if asset.type === AssetTypeEnum.Image}
-      <IconButton
-        class="hidden sm:flex"
-        color="secondary"
-        variant="ghost"
-        shape="round"
-        icon={$photoZoomState && $photoZoomState.currentZoom > 1 ? mdiMagnifyMinusOutline : mdiMagnifyPlusOutline}
-        aria-label={$t('zoom_image')}
-        onclick={onZoomImage}
-      />
-    {/if}
     {#if canCopyImageToClipboard() && asset.type === AssetTypeEnum.Image && $photoViewerImgElement}
       <IconButton
         color="secondary"
@@ -202,9 +198,7 @@
       <RatingAction {asset} {onAction} />
     {/if}
 
-    {#if !editorDisabled}
-      <EditAction onAction={onEdit} />
-    {/if}
+    <ActionButton action={Edit} />
 
     {#if isOwner}
       <DeleteAction {asset} {onAction} {preAction} {onUndoDelete} />