feat(web): improve individual share ux (#17430)

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

@@ -54,6 +54,7 @@
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     stack?: StackResponseDto | null;
+    showCloseButton?: boolean;
     showDetailButton: boolean;
     showSlideshow?: boolean;
     onZoomImage: () => void;
@@ -73,6 +74,7 @@
     album = null,
     person = null,
     stack = null,
+    showCloseButton = true,
     showDetailButton,
     showSlideshow = false,
     onZoomImage,
@@ -89,6 +91,7 @@
   const sharedLink = getSharedLink();
   let isOwner = $derived($user && asset.ownerId === $user?.id);
   let showDownloadButton = $derived(sharedLink ? sharedLink.allowDownload : !asset.isOffline);
+
   // $: showEditorButton =
   //   isOwner &&
   //   asset.type === AssetTypeEnum.Image &&
@@ -104,7 +107,9 @@
   class="z-[1001] flex h-16 place-items-center justify-between bg-gradient-to-b from-black/40 px-3 transition-transform duration-200"
 >
   <div class="text-white">
+    {#if showCloseButton}
       <CloseAction {onClose} />
+    {/if}
   </div>
   <div class="flex gap-2 overflow-x-auto text-white" data-testid="asset-viewer-navbar-actions">
     {#if !asset.isTrashed && $user}

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

@@ -61,6 +61,7 @@
     preAction?: PreAction | undefined;
     onAction?: OnAction | undefined;
     reactions?: ActivityResponseDto[];
+    showCloseButton?: boolean;
     onClose: (dto: { asset: AssetResponseDto }) => void;
     onNext: () => Promise<HasAsset>;
     onPrevious: () => Promise<HasAsset>;
@@ -79,6 +80,7 @@
     preAction = undefined,
     onAction = undefined,
     reactions = $bindable([]),
+    showCloseButton,
     onClose,
     onNext,
     onPrevious,
@@ -431,6 +433,7 @@
         {album}
         {person}
         {stack}
+        {showCloseButton}
         showDetailButton={enableDetailPanel}
         showSlideshow={true}
         onZoomImage={zoomToggle}

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
+  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import { AppRoute, AssetAction } from '$lib/constants';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { getKey, handlePromiseError } from '$lib/utils';
   import { downloadArchive } from '$lib/utils/asset-utils';
@@ -14,6 +15,7 @@
   import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
+  import AssetViewer from '../asset-viewer/asset-viewer.svelte';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
   import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
@@ -72,9 +74,21 @@
   const handleSelectAll = () => {
     assetInteraction.selectAssets(assets);
   };
+
+  const handleAction = async (action: Action) => {
+    switch (action.type) {
+      case AssetAction.ARCHIVE:
+      case AssetAction.DELETE:
+      case AssetAction.TRASH: {
+        await goto(AppRoute.PHOTOS);
+        break;
+      }
+    }
+  };
 </script>
 
 <section class="bg-immich-bg dark:bg-immich-dark-bg">
+  {#if sharedLink?.allowUpload || assets.length > 1}
     {#if assetInteraction.selectionActive}
       <AssetSelectControlBar
         assets={assetInteraction.selectedAssets}
@@ -112,4 +126,15 @@
     <section class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
       <GalleryViewer {assets} {assetInteraction} {viewport} />
     </section>
+  {:else}
+    <AssetViewer
+      asset={assets[0]}
+      showCloseButton={false}
+      onAction={handleAction}
+      onPrevious={() => Promise.resolve(false)}
+      onNext={() => Promise.resolve(false)}
+      onRandom={() => Promise.resolve(undefined)}
+      onClose={() => {}}
+    />
+  {/if}
 </section>