fix(web): backwards asset navigation in GalleryViewer (#10132)

* fix(web): backwards asset navigation in GalleryViewer

* fix ctrl/cmd click

---------

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

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

@@ -732,7 +732,8 @@
                   ? 'bg-transparent border-2 border-white'
                   : 'bg-gray-700/40'} inline-block hover:bg-transparent"
                 asset={stackedAsset}
-                onClick={() => {
+                onClick={(stackedAsset, event) => {
+                  event.preventDefault();
                   asset = stackedAsset;
                   preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
                 }}
@@ -740,7 +741,6 @@
                 readonly
                 thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
                 showStackedIcon={false}
-                isStackSlideshow={true}
               />
 
               {#if stackedAsset.id == asset.id}

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

@@ -22,7 +22,6 @@
   import { fade } from 'svelte/transition';
   import ImageThumbnail from './image-thumbnail.svelte';
   import VideoThumbnail from './video-thumbnail.svelte';
-  import { shortcut } from '$lib/actions/shortcut';
   import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
 
   const dispatch = createEventDispatcher<{
@@ -37,14 +36,12 @@
   export let thumbnailHeight: number | undefined = undefined;
   export let selected = false;
   export let selectionCandidate = false;
-  export let isMultiSelectState = false;
-  export let isStackSlideshow = false;
   export let disabled = false;
   export let readonly = false;
   export let showArchiveIcon = false;
   export let showStackedIcon = true;
   export let href: string | undefined = undefined;
-  export let onClick: ((asset: AssetResponseDto) => void) | undefined = undefined;
+  export let onClick: ((asset: AssetResponseDto, event: Event) => void) | undefined = undefined;
 
   let className = '';
   export { className as class };
@@ -65,14 +62,6 @@
     return [235, 235];
   })();
 
-  const thumbnailClickedHandler = (e: Event) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!disabled) {
-      onClick?.(asset);
-    }
-  };
-
   const onIconClickedHandler = (e: MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
@@ -81,12 +70,17 @@
     }
   };
 
-  const handleClick = (e: Event) => {
+  const handleClick = (e: MouseEvent) => {
-    if (isMultiSelectState) {
+    if (e.ctrlKey || e.metaKey) {
-      onIconClickedHandler(e as MouseEvent);
+      return;
-    } else if (isStackSlideshow) {
-      thumbnailClickedHandler(e);
     }
+
+    if (selected) {
+      onIconClickedHandler(e);
+      return;
+    }
+
+    onClick?.(asset, e);
   };
 
   const onMouseEnter = () => {
@@ -111,7 +105,6 @@
     on:mouseleave={onMouseLeave}
     tabindex={0}
     on:click={handleClick}
-    use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: thumbnailClickedHandler }}
   >
     {#if intersecting}
       <div class="absolute z-20 {className}" style:width="{width}px" style:height="{height}px">

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -80,15 +80,6 @@
     });
   }
 
-  const assetClickHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
-    if (isSelectionMode || $isMultiSelectState) {
-      assetSelectHandler(asset, assetsInDateGroup, groupTitle);
-      return;
-    }
-
-    assetViewingStore.setAsset(asset);
-  };
-
   const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => dispatch('select', { title, assets });
 
   const assetSelectHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
@@ -174,12 +165,19 @@
               {showArchiveIcon}
               {asset}
               {groupIndex}
-              onClick={() => assetClickHandler(asset, groupAssets, groupTitle)}
+              onClick={(asset, event) => {
+                if (isSelectionMode || $isMultiSelectState) {
+                  event.preventDefault();
+                  assetSelectHandler(asset, groupAssets, groupTitle);
+                  return;
+                }
+
+                assetViewingStore.setAsset(asset);
+              }}
               on:select={() => assetSelectHandler(asset, groupAssets, groupTitle)}
               on:mouse-event={() => assetMouseEventHandler(groupTitle, asset)}
               selected={$selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)}
               selectionCandidate={$assetSelectionCandidates.has(asset)}
-              isMultiSelectState={$isMultiSelectState || isSelectionMode}
               disabled={$assetStore.albumAssets.has(asset.id)}
               thumbnailWidth={box.width}
               thumbnailHeight={box.height}

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

@@ -123,12 +123,19 @@
         <Thumbnail
           {asset}
           readonly={disableAssetSelect}
-          onClick={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
+          onClick={async (asset, e) => {
+            e.preventDefault();
+
+            if (isMultiSelectionMode) {
+              selectAssetHandler(asset);
+              return;
+            }
+            await viewAssetHandler(asset);
+          }}
           on:select={(e) => selectAssetHandler(e.detail.asset)}
           on:intersected={(event) =>
             i === Math.max(1, assets.length - 7) ? dispatch('intersected', event.detail) : undefined}
           selected={selectedAssets.has(asset)}
-          isMultiSelectState={isMultiSelectionMode}
           {showArchiveIcon}
           thumbnailWidth={geometry.boxes[i].width}
           thumbnailHeight={geometry.boxes[i].height}