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">
-    <CloseAction {onClose} />
+    {#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,44 +74,67 @@
   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 assetInteraction.selectionActive}
-    <AssetSelectControlBar
-      assets={assetInteraction.selectedAssets}
-      clearSelect={() => cancelMultiselect(assetInteraction)}
-    >
-      <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
-      {#if sharedLink?.allowDownload}
-        <DownloadAction filename="immich-shared.zip" />
-      {/if}
-      {#if isOwned}
-        <RemoveFromSharedLink bind:sharedLink />
-      {/if}
-    </AssetSelectControlBar>
-  {:else}
-    <ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
-      {#snippet leading()}
-        <ImmichLogoSmallLink />
-      {/snippet}
-
-      {#snippet trailing()}
-        {#if sharedLink?.allowUpload}
-          <CircleIconButton
-            title={$t('add_photos')}
-            onclick={() => handleUploadAssets()}
-            icon={mdiFileImagePlusOutline}
-          />
-        {/if}
-
+  {#if sharedLink?.allowUpload || assets.length > 1}
+    {#if assetInteraction.selectionActive}
+      <AssetSelectControlBar
+        assets={assetInteraction.selectedAssets}
+        clearSelect={() => cancelMultiselect(assetInteraction)}
+      >
+        <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
         {#if sharedLink?.allowDownload}
-          <CircleIconButton title={$t('download')} onclick={downloadAssets} icon={mdiFolderDownloadOutline} />
+          <DownloadAction filename="immich-shared.zip" />
         {/if}
-      {/snippet}
-    </ControlAppBar>
+        {#if isOwned}
+          <RemoveFromSharedLink bind:sharedLink />
+        {/if}
+      </AssetSelectControlBar>
+    {:else}
+      <ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
+        {#snippet leading()}
+          <ImmichLogoSmallLink />
+        {/snippet}
+
+        {#snippet trailing()}
+          {#if sharedLink?.allowUpload}
+            <CircleIconButton
+              title={$t('add_photos')}
+              onclick={() => handleUploadAssets()}
+              icon={mdiFileImagePlusOutline}
+            />
+          {/if}
+
+          {#if sharedLink?.allowDownload}
+            <CircleIconButton title={$t('download')} onclick={downloadAssets} icon={mdiFolderDownloadOutline} />
+          {/if}
+        {/snippet}
+      </ControlAppBar>
+    {/if}
+    <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 class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
-    <GalleryViewer {assets} {assetInteraction} {viewport} />
-  </section>
 </section>