From 0ea22f76bd8f736d41cfc003924254374c4f40e6 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Sat, 12 Oct 2024 14:54:53 -0400
Subject: [PATCH] wip: prevent multiple popovers

---
 .../elements/buttons/circle-icon-button.svelte           | 9 +++++++--
 web/src/lib/utils/popover-timer.ts                       | 8 +++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/elements/buttons/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
index 86782b6f44..56217dd4a6 100644
--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
@@ -33,7 +33,8 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { scale } from 'svelte/transition';
   import { tick } from 'svelte';
-  import { getHoverMode, hoverDelay, setHoverMode } from '$lib/utils/popover-timer';
+  import { activePopoverId, getHoverMode, hoverDelay, setHoverMode } from '$lib/utils/popover-timer';
+  import { generateId } from '$lib/utils/generate-id';
 
   type $$Props = Props;
 
@@ -84,6 +85,8 @@
   $: mobileClass = hideMobile ? 'hidden sm:flex' : '';
   $: paddingClass = paddingClasses[padding];
 
+  const id = $$restProps.id ?? generateId();
+
   let popover: HTMLElement;
   let element: HTMLElement;
   let top = 0;
@@ -111,6 +114,7 @@
     left = box.left;
     showPopover = true;
     setHoverMode(true);
+    $activePopoverId = id;
     void tick().then(() => {
       const offsetWidth = popover?.offsetWidth ?? 10;
       const spaceBelow = (window.visualViewport?.height ?? window.innerHeight) - box.top - box.height;
@@ -128,6 +132,7 @@
   bind:this={element}
   type={href ? undefined : type}
   {href}
+  {id}
   style:width={buttonSize ? buttonSize + 'px' : ''}
   style:height={buttonSize ? buttonSize + 'px' : ''}
   class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all disabled:cursor-default hover:dark:text-immich-dark-gray {className} {mobileClass}"
@@ -141,7 +146,7 @@
 >
   <Icon path={icon} {size} ariaHidden {viewBox} color="currentColor" />
 </svelte:element>
-{#if showPopover}
+{#if showPopover && $activePopoverId === id}
   <div
     in:scale={{ duration: 150, opacity: 0, start: 0.9 }}
     out:scale={{ duration: 150, opacity: 0, start: 0.9 }}
diff --git a/web/src/lib/utils/popover-timer.ts b/web/src/lib/utils/popover-timer.ts
index 046375263c..1ae545cc1b 100644
--- a/web/src/lib/utils/popover-timer.ts
+++ b/web/src/lib/utils/popover-timer.ts
@@ -1,6 +1,11 @@
+import { writable } from 'svelte/store';
+
 let _hoverMode = false;
 let timeoutId: ReturnType<typeof setTimeout> | undefined;
 const hoverDelay = 600;
+
+const activePopoverId = writable<number>(0);
+
 const getHoverMode = () => _hoverMode;
 const setHoverMode = (mode: boolean) => {
   if (mode) {
@@ -12,4 +17,5 @@ const setHoverMode = (mode: boolean) => {
     _hoverMode = false;
   }, hoverDelay);
 };
-export { getHoverMode, hoverDelay, setHoverMode };
+
+export { activePopoverId, getHoverMode, hoverDelay, setHoverMode };