[Feature] Preview / full screen button for viewing images during multi-selection

[johnmaguire]

I have searched the existing feature requests, both open and closed, to make sure this is not a duplicate request.

• Yes

The feature

When multi-selecting images in Google Photos, a "full screen preview" button appears in the bottom right corner of the image thumbnails when hovering over them. If you click it, you can view the image full screen without losing your selections. This is very helpful when reviewing multiple similar images to choose which to keep/delete/organize.

Platform

• Server
• Web
• Mobile

[johnmaguire]

Something like this works:

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 6a786c641..f3cbbe74e 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -21,6 +21,7 @@
     mdiHeart,
     mdiMotionPauseOutline,
     mdiMotionPlayOutline,
+    mdiMagnifyPlusOutline,
     mdiRotate360,
   } from '@mdi/js';
   import { onMount } from 'svelte';
@@ -46,6 +47,7 @@
     dimmed?: boolean;
     albumUsers?: UserResponseDto[];
     onClick?: (asset: TimelineAsset) => void;
+    onPreview?: (asset: TimelineAsset) => void;
     onSelect?: (asset: TimelineAsset) => void;
     onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
   }
@@ -65,6 +67,7 @@
     showStackedIcon = true,
     albumUsers = [],
     onClick = undefined,
+    onPreview = undefined,
     onSelect = undefined,
     onMouseEvent = undefined,
     imageClass = '',
@@ -430,6 +433,23 @@
       </button>
     {/if}
 
+    <!-- Preview asset button (visible on hover when any asset is selected) -->
+    {#if mouseOver && onPreview}
+      <button
+        type="button"
+        onclick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onPreview?.($state.snapshot(asset));
+        }}
+        class="absolute z-2 bottom-1 end-1 rounded-full bg-black/50 p-1.5 hover:bg-black/70 focus:outline-none transition-colors"
+        tabindex={-1}
+        aria-label="Preview asset"
+      >
+        <Icon icon={mdiMagnifyPlusOutline} size="20" class="text-white" />
+      </button>
+    {/if}
+
     <!-- Outline on focus -->
     <div
       class={[
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index 5d1254f8d..712db4fcd 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -386,6 +386,7 @@
               void navigateToAsset(asset);
             }}
             onSelect={() => handleSelectAssets(currentAsset)}
+            onPreview={assetInteraction.selectionActive ? () => void navigateToAsset(asset) : undefined}
             onMouseEvent={() => assetMouseEventHandler(currentAsset)}
             {showArchiveIcon}
             asset={currentAsset}
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index f72ea60dc..6b6561f33 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -699,6 +699,7 @@
                   void onSelectAssets(asset);
                 }}
                 onMouseEvent={() => handleSelectAssetCandidates(asset)}
+                onPreview={(isSelectionMode || assetInteraction.selectionActive) ? (asset) => void navigate({ targetRoute: 'current', assetId: asset.id }) : undefined}
                 selected={isAssetSelected}
                 selectionCandidate={isAssetSelectionCandidate}
                 disabled={isAssetDisabled}