From 714e71751e149b81644614d8941e095900ab5f73 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 7 Mar 2025 20:47:43 +0600
Subject: [PATCH] web/PopoverContainer: refactor & simplify code

why the fuck was it that way in the first place
---
 .../components/misc/PopoverContainer.svelte   | 19 ++++++-------------
 .../components/queue/ProcessingQueue.svelte   | 12 +++++++-----
 .../components/save/SupportedServices.svelte  |  3 +--
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/web/src/components/misc/PopoverContainer.svelte b/web/src/components/misc/PopoverContainer.svelte
index 2b060bcb..2937ab1f 100644
--- a/web/src/components/misc/PopoverContainer.svelte
+++ b/web/src/components/misc/PopoverContainer.svelte
@@ -1,22 +1,15 @@
 <script lang="ts">
     export let id = "";
     export let expanded = false;
-    export let popoverAction: () => void;
     export let expandStart: "left" | "center" | "right" = "center";
 
+    /*
+        a popover isn't pre-rendered by default, because the user might never open it.
+        but if they do, we render only once, and then keep it the dom :3
+    */
+
     $: renderPopover = false;
-
-    export const showPopover = async () => {
-        const timeout = !renderPopover;
-        renderPopover = true;
-
-        // 10ms delay to let the popover render for the first time
-        if (timeout) {
-            setTimeout(popoverAction, 10);
-        } else {
-            popoverAction();
-        }
-    };
+    $: if (expanded && !renderPopover) renderPopover = true;
 </script>
 
 <div {id} class="popover {expandStart}" aria-hidden={!expanded} class:expanded>
diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index ca76b7ac..5da1a39b 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -47,11 +47,14 @@
 
     $: indeterminate = queue.length > 0 && totalProgress === 0;
 
-    const popoverAction = async () => {
+    const popoverAction = () => {
         expanded = !expanded;
-        if (expanded) updateQuota();
     };
 
+    $: if (expanded) {
+        updateQuota();
+    }
+
     onNavigate(() => {
         expanded = false;
     });
@@ -59,21 +62,20 @@
     onMount(() => {
         // clear old files from storage on first page load
         clearFileStorage();
-    })
+    });
 </script>
 
 <div id="processing-queue" class:expanded>
     <ProcessingStatus
         progress={totalProgress * 100}
         {indeterminate}
-        expandAction={popover?.showPopover}
+        expandAction={popoverAction}
     />
 
     <PopoverContainer
         bind:this={popover}
         id="processing-popover"
         {expanded}
-        {popoverAction}
         expandStart="right"
     >
         <div id="processing-header">
diff --git a/web/src/components/save/SupportedServices.svelte b/web/src/components/save/SupportedServices.svelte
index c141499e..4f8c625b 100644
--- a/web/src/components/save/SupportedServices.svelte
+++ b/web/src/components/save/SupportedServices.svelte
@@ -41,7 +41,7 @@
     <button
         id="services-button"
         class="button"
-        on:click={popover?.showPopover}
+        on:click={popoverAction}
         aria-label={$t(`save.services.title_${expanded ? "hide" : "show"}`)}
     >
         <div class="expand-icon">
@@ -54,7 +54,6 @@
         bind:this={popover}
         id="services-popover"
         {expanded}
-        {popoverAction}
     >
         <div
             id="services-container"