feat: add preview button when selecting images (#27305)

* Add preview button when selecting images

* Fix test helper

* prettier

* styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

e2e/src/ui/specs/timeline/utils.ts

@@ -62,7 +62,7 @@ export const thumbnailUtils = {
     return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"]`);
   },
   selectButton(page: Page, assetId: string) {
-    return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"] button`);
+    return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"] button[role="checkbox"]`);
   },
   selectedAsset(page: Page) {
     return page.locator('[data-thumbnail-focus-container][data-selected]');

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -19,6 +19,7 @@
     mdiCheckCircle,
     mdiFileGifBox,
     mdiHeart,
+    mdiMagnifyPlusOutline,
     mdiMotionPauseOutline,
     mdiMotionPlayOutline,
     mdiRotate360,
@@ -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 = '',
@@ -442,6 +445,24 @@
       </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/25 p-1.5 hover:bg-black/50 focus:outline-none transition-colors"
+        in:fade={{ duration: 100 }}
+        tabindex={-1}
+        aria-label="Preview asset"
+      >
+        <Icon icon={mdiMagnifyPlusOutline} size="20" class="text-white" />
+      </button>
+    {/if}
+
     <!-- Outline on focus -->
     <div
       class={[

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -376,6 +376,7 @@
               void navigateToAsset(asset);
             }}
             onSelect={() => handleSelectAssets(currentAsset)}
+            onPreview={assetInteraction.selectionActive ? () => void navigateToAsset(asset) : undefined}
             onMouseEvent={() => assetMouseEventHandler(currentAsset)}
             {showArchiveIcon}
             asset={currentAsset}

web/src/lib/components/timeline/Timeline.svelte

@@ -698,6 +698,9 @@
                   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}