fix: bug with svelte gestures (#17154)

* fix: bug with svelte gestures

* lint

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { press, tap } from 'svelte-gestures';
-
   import Icon from '$lib/components/elements/icon.svelte';
   import { ProjectionType } from '$lib/constants';
   import { getAssetThumbnailUrl, isSharedLink } from '$lib/utils';
@@ -103,10 +101,8 @@
     }
     onClick?.($state.snapshot(asset));
   };
+
   const handleClick = (e: MouseEvent) => {
-    if (isTouchDevice) {
-      return;
-    }
     if (e.ctrlKey || e.metaKey) {
       return;
     }
@@ -126,6 +122,25 @@
   const onMouseLeave = () => {
     mouseOver = false;
   };
+
+  function longPress(element: HTMLElement, { onLongPress }: { onLongPress: () => void }) {
+    let timer: ReturnType<typeof setTimeout>;
+    const start = (event: TouchEvent) => {
+      timer = setTimeout(() => {
+        onLongPress();
+        event.preventDefault();
+      }, 350);
+    };
+    const end = () => clearTimeout(timer);
+    element.addEventListener('touchstart', start);
+    element.addEventListener('touchend', end);
+    return {
+      destroy: () => {
+        element.removeEventListener('touchstart', start);
+        element.removeEventListener('touchend', end);
+      },
+    };
+  }
 </script>
 
 <div
@@ -146,9 +161,6 @@
     ></canvas>
   {/if}
 
-  <!-- svelte queries for all links on afterNavigate, leading to performance problems in asset-grid which updates
-     the navigation url on scroll. Replace this with button for now. -->
-
   <!-- as of iOS17, there is a preference for long press speed, which is not available for mobile web.
       The defaults are as follows:
       fast: 200ms
@@ -163,10 +175,7 @@
     class:cursor-pointer={!disabled}
     onmouseenter={onMouseEnter}
     onmouseleave={onMouseLeave}
-    use:press={() => ({ timeframe: 350, triggerBeforeFinished: true })}
-    use:tap={() => ({ timeframe: 350 })}
-    onpress={(evt) => (evt.detail.pointerType === 'mouse' ? void 0 : onSelect?.($state.snapshot(asset)))}
-    ontap={(evt) => (evt.detail.pointerType === 'mouse' ? void 0 : callClickHandlers())}
+    use:longPress={{ onLongPress: () => onSelect?.($state.snapshot(asset)) }}
     onkeydown={(evt) => {
       if (evt.key === 'Enter') {
         callClickHandlers();