fix(web): fix thumbnail hover link position (#16762)

* fix(web): don't show a scrollbar when hovering over the last row of images on the search page

* Format code

* Fix asset selection z-index

* Remove anchor overlay on mouseover

* Fix a test

* Fix merge

* Fix overlays

* fix merge

* fix stack thumbs in asset viewer

* fix dimmed bounds, animation

* lint

---------

Co-authored-by: Min Idzelis <min123@gmail.com>

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

@@ -592,29 +592,27 @@
       id="stack-slideshow"
       class="z-[1002] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
     >
-      <div class="relative w-full whitespace-nowrap transition-all">
+      <div class="relative w-full whitespace-nowrap">
         {#each stackedAssets as stackedAsset (stackedAsset.id)}
           <div
-            class="{stackedAsset.id == asset.id
-              ? '-translate-y-[1px]'
-              : '-translate-y-0'} inline-block px-1 transition-transform"
+            class={['inline-block px-1 relative transition-all pb-2']}
+            style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
           >
             <Thumbnail
-              class="{stackedAsset.id == asset.id
-                ? 'bg-transparent border-2 border-white'
-                : 'bg-gray-700/40'} inline-block hover:bg-transparent"
+              imageClass={{ 'border-2 border-white': stackedAsset.id === asset.id }}
+              dimmed={stackedAsset.id !== asset.id}
               asset={stackedAsset}
               onClick={(stackedAsset) => {
                 asset = stackedAsset;
               }}
               onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
-              disableMouseOver
               readonly
-              thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
+              thumbnailSize={stackedAsset.id === asset.id ? 65 : 60}
               showStackedIcon={false}
+              disableLinkMouseOver
             />
 
-            {#if stackedAsset.id == asset.id}
+            {#if stackedAsset.id === asset.id}
               <div class="w-full flex place-items-center place-content-center">
                 <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]"></div>
               </div>

web/src/lib/components/assets/thumbnail/__test__/thumbnail.spec.ts

@@ -23,6 +23,9 @@ vi.hoisted(() => {
 describe('Thumbnail component', () => {
   beforeAll(() => {
     vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
+    vi.mock('$lib/utils/navigation', () => ({
+      currentUrlReplaceAssetId: vi.fn(),
+    }));
   });
 
   it('should only contain a single tabbable element (the container)', () => {
@@ -30,7 +33,6 @@ describe('Thumbnail component', () => {
     render(Thumbnail, {
       asset,
       focussed: false,
-      overrideDisplayForTest: true,
       selected: true,
     });
 
@@ -55,7 +57,6 @@ describe('Thumbnail component', () => {
     const handleFocusSpy = vi.fn();
     render(Thumbnail, {
       asset,
-      overrideDisplayForTest: true,
       handleFocus: handleFocusSpy,
     });
 
@@ -70,7 +71,6 @@ describe('Thumbnail component', () => {
     const handleFocusSpy = vi.fn();
     render(Thumbnail, {
       asset,
-      overrideDisplayForTest: true,
       focussed: true,
       handleFocus: handleFocusSpy,
     });

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

@@ -4,6 +4,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { TUNABLES } from '$lib/utils/tunables';
   import { mdiEyeOffOutline } from '@mdi/js';
+  import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
 
   interface Props {
@@ -19,6 +20,7 @@
     hidden?: boolean;
     border?: boolean;
     hiddenIconClass?: string;
+    class?: ClassValue;
     onComplete?: (() => void) | undefined;
   }
 
@@ -36,6 +38,7 @@
     border = false,
     hiddenIconClass = 'text-white',
     onComplete = undefined,
+    class: imageClass = '',
   }: Props = $props();
 
   let {
@@ -88,7 +91,7 @@
     src={url}
     alt={loaded || errored ? altText : ''}
     {title}
-    class="object-cover {optionalClasses}"
+    class={['object-cover', optionalClasses, imageClass]}
     class:opacity-0={!thumbhash && !loaded}
     draggable="false"
   />

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

@@ -1,12 +1,11 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { ProjectionType } from '$lib/constants';
-  import { getAssetThumbnailUrl, isSharedLink } from '$lib/utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { timeToSeconds } from '$lib/utils/date-time';
-  import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
   import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
-  import { getAssetPlaybackUrl } from '$lib/utils';
+  import { getAssetPlaybackUrl, getAssetThumbnailUrl, isSharedLink } from '$lib/utils';
+  import { timeToSeconds } from '$lib/utils/date-time';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
   import {
     mdiArchiveArrowDownOutline,
     mdiCameraBurst,
@@ -17,13 +16,14 @@
     mdiRotate360,
   } from '@mdi/js';
 
+  import { thumbhash } from '$lib/actions/thumbhash';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
+  import { TUNABLES } from '$lib/utils/tunables';
+  import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
   import ImageThumbnail from './image-thumbnail.svelte';
   import VideoThumbnail from './video-thumbnail.svelte';
-  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
-  import { TUNABLES } from '$lib/utils/tunables';
-  import { thumbhash } from '$lib/actions/thumbhash';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -35,16 +35,16 @@
     focussed?: boolean;
     selectionCandidate?: boolean;
     disabled?: boolean;
+    disableLinkMouseOver?: boolean;
     readonly?: boolean;
     showArchiveIcon?: boolean;
     showStackedIcon?: boolean;
-    disableMouseOver?: boolean;
-
+    imageClass?: ClassValue;
+    dimmed?: boolean;
     onClick?: ((asset: AssetResponseDto) => void) | undefined;
     onSelect?: ((asset: AssetResponseDto) => void) | undefined;
     onMouseEvent?: ((event: { isMouseOver: boolean; selectedGroupIndex: number }) => void) | undefined;
     handleFocus?: (() => void) | undefined;
-    class?: string;
   }
 
   let {
@@ -57,15 +57,16 @@
     focussed = false,
     selectionCandidate = false,
     disabled = false,
+    disableLinkMouseOver = false,
     readonly = false,
     showArchiveIcon = false,
     showStackedIcon = true,
-    disableMouseOver = false,
     onClick = undefined,
     onSelect = undefined,
     onMouseEvent = undefined,
     handleFocus = undefined,
-    class: className = '',
+    imageClass = '',
+    dimmed = false,
   }: Props = $props();
 
   let {
@@ -145,11 +146,12 @@
 
 <div
   data-asset={asset.id}
+  class={[
+    'focus-visible:outline-none flex overflow-hidden',
+    disabled ? 'bg-gray-300' : 'bg-immich-primary/20 dark:bg-immich-dark-primary/20',
+  ]}
   style:width="{width}px"
   style:height="{height}px"
-  class="focus-visible:outline-none flex overflow-hidden {disabled
-    ? 'bg-gray-300'
-    : 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
 >
   {#if !loaded && asset.thumbhash}
     <canvas
@@ -168,11 +170,9 @@
       slow: ??ms
       -->
   <div
-    class="group"
-    style:width="{width}px"
-    style:height="{height}px"
-    class:cursor-not-allowed={disabled}
-    class:cursor-pointer={!disabled}
+    class={['group absolute  top-[0px] bottom-[0px]', { 'curstor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
+    style:width="inherit"
+    style:height="inherit"
     onmouseenter={onMouseEnter}
     onmouseleave={onMouseLeave}
     use:longPress={{ onLongPress: () => onSelect?.($state.snapshot(asset)) }}
@@ -184,20 +184,19 @@
         onSelect?.(asset);
       }
     }}
-    tabindex={0}
     onclick={handleClick}
-    role="link"
     bind:this={focussableElement}
     onfocus={handleFocus}
     data-testid="container-with-tabindex"
+    tabindex={0}
+    role="link"
   >
-    {#if !usingMobileDevice && mouseOver && !disableMouseOver}
+    <!-- Select asset button  -->
+    {#if !usingMobileDevice && mouseOver && !disableLinkMouseOver}
       <!-- lazy show the url on mouse over-->
       <a
-        class="absolute z-30 {className} top-[41px]"
+        class={['absolute  z-10 w-full top-0 bottom-0']}
         style:cursor="unset"
-        style:width="{width}px"
-        style:height="{height}px"
         href={currentUrlReplaceAssetId(asset.id)}
         onclick={(evt) => evt.preventDefault()}
         tabindex={-1}
@@ -205,87 +204,98 @@
       >
       </a>
     {/if}
-    <div class="absolute z-20 {className}" style:width="{width}px" style:height="{height}px">
-      <!-- Select asset button  -->
-      {#if !readonly && (mouseOver || selected || selectionCandidate)}
-        <button
-          type="button"
-          onclick={onIconClickedHandler}
-          class="absolute p-2 focus:outline-none"
-          class:cursor-not-allowed={disabled}
-          role="checkbox"
-          tabindex={-1}
-          onfocus={handleFocus}
-          aria-checked={selected}
-          {disabled}
-        >
-          {#if disabled}
-            <Icon path={mdiCheckCircle} size="24" class="text-zinc-800" />
-          {:else if selected}
-            <div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
-              <Icon path={mdiCheckCircle} size="24" class="text-immich-primary" />
-            </div>
-          {:else}
-            <Icon path={mdiCheckCircle} size="24" class="text-white/80 hover:text-white" />
-          {/if}
-        </button>
-      {/if}
-    </div>
+    {#if !readonly && (mouseOver || selected || selectionCandidate)}
+      <button
+        type="button"
+        onclick={onIconClickedHandler}
+        class={['absolute z-20 p-2 focus:outline-none', { 'cursor-not-allowed': disabled }]}
+        role="checkbox"
+        tabindex={-1}
+        onfocus={handleFocus}
+        aria-checked={selected}
+        {disabled}
+      >
+        {#if disabled}
+          <Icon path={mdiCheckCircle} size="24" class="text-zinc-800" />
+        {:else if selected}
+          <div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
+            <Icon path={mdiCheckCircle} size="24" class="text-immich-primary" />
+          </div>
+        {:else}
+          <Icon path={mdiCheckCircle} size="24" class="text-white/80 hover:text-white" />
+        {/if}
+      </button>
+    {/if}
 
     <div
-      class="absolute h-full w-full select-none bg-transparent transition-transform"
-      class:scale-[0.85]={selected}
-      class:rounded-xl={selected}
+      class={[
+        'absolute h-full w-full select-none bg-transparent transition-transform',
+        { 'scale-[0.85]': selected },
+        { 'rounded-xl': selected },
+      ]}
     >
-      <!-- Gradient overlay on hover -->
-      {#if !usingMobileDevice}
+      <!-- icon overlay -->
+      <div>
+        <!-- Gradient overlay on hover -->
+        {#if !usingMobileDevice && !disabled}
+          <div
+            class={[
+              'absolute h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100',
+              { 'rounded-xl': selected },
+            ]}
+          ></div>
+        {/if}
+        <!-- Dimmed support -->
+
+        {#if dimmed && !mouseOver}
+          <div id="a" class={['absolute h-full w-full z-30  bg-gray-700/40', { 'rounded-xl': selected }]}></div>
+        {/if}
+        <!-- Outline on focus -->
         <div
-          class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
-          class:rounded-xl={selected}
+          class={[
+            'absolute size-full group-focus-visible:outline outline-4 -outline-offset-4 outline-immich-primary',
+            { 'rounded-xl': selected },
+          ]}
         ></div>
-      {/if}
-      <!-- Outline on focus -->
-      <div
-        class="absolute size-full group-focus-visible:outline outline-4 -outline-offset-4 outline-immich-primary"
-      ></div>
 
-      <!-- Favorite asset star -->
-      {#if !isSharedLink() && asset.isFavorite}
-        <div class="absolute bottom-2 left-2 z-10">
-          <Icon path={mdiHeart} size="24" class="text-white" />
-        </div>
-      {/if}
+        <!-- Favorite asset star -->
+        {#if !isSharedLink() && asset.isFavorite}
+          <div class="absolute bottom-2 left-2 z-10">
+            <Icon path={mdiHeart} size="24" class="text-white" />
+          </div>
+        {/if}
 
-      {#if !isSharedLink() && showArchiveIcon && asset.isArchived}
-        <div class="absolute {asset.isFavorite ? 'bottom-10' : 'bottom-2'} left-2 z-10">
-          <Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />
-        </div>
-      {/if}
+        {#if !isSharedLink() && showArchiveIcon && asset.isArchived}
+          <div class={['absolute left-2 z-10', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
+            <Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />
+          </div>
+        {/if}
 
-      {#if asset.type === AssetTypeEnum.Image && asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR}
-        <div class="absolute right-0 top-0 z-20 flex place-items-center gap-1 text-xs font-medium text-white">
-          <span class="pr-2 pt-2">
-            <Icon path={mdiRotate360} size="24" />
-          </span>
-        </div>
-      {/if}
-
-      <!-- Stacked asset -->
-
-      {#if asset.stack && showStackedIcon}
-        <div
-          class="absolute {asset.type == AssetTypeEnum.Image && asset.livePhotoVideoId == undefined
-            ? 'top-0 right-0'
-            : 'top-7 right-1'} z-20 flex place-items-center gap-1 text-xs font-medium text-white"
-        >
-          <span class="pr-2 pt-2 flex place-items-center gap-1">
-            <p>{asset.stack.assetCount.toLocaleString($locale)}</p>
-            <Icon path={mdiCameraBurst} size="24" />
-          </span>
-        </div>
-      {/if}
+        {#if asset.type === AssetTypeEnum.Image && asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR}
+          <div class="absolute right-0 top-0 z-10 flex place-items-center gap-1 text-xs font-medium text-white">
+            <span class="pr-2 pt-2">
+              <Icon path={mdiRotate360} size="24" />
+            </span>
+          </div>
+        {/if}
 
+        <!-- Stacked asset -->
+        {#if asset.stack && showStackedIcon}
+          <div
+            class={[
+              'absolute z-10 flex place-items-center gap-1 text-xs font-medium text-white',
+              asset.type == AssetTypeEnum.Image && !asset.livePhotoVideoId ? 'top-0 right-0' : 'top-7 right-1',
+            ]}
+          >
+            <span class="pr-2 pt-2 flex place-items-center gap-1">
+              <p>{asset.stack.assetCount.toLocaleString($locale)}</p>
+              <Icon path={mdiCameraBurst} size="24" />
+            </span>
+          </div>
+        {/if}
+      </div>
       <ImageThumbnail
+        class={imageClass}
         url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"
@@ -293,7 +303,6 @@
         curve={selected}
         onComplete={() => (loaded = true)}
       />
-
       {#if asset.type === AssetTypeEnum.Video}
         <div class="absolute top-0 h-full w-full">
           <VideoThumbnail
@@ -304,9 +313,7 @@
             playbackOnIconHover={!$playVideoThumbnailOnHover}
           />
         </div>
-      {/if}
-
-      {#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
+      {:else if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
         <div class="absolute top-0 h-full w-full">
           <VideoThumbnail
             url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}