From 5d75ee493de6d68aedc1f09001863047d3230c29 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 16 Dec 2024 17:24:05 +0600
Subject: [PATCH] web/SupportedServices: use the general popover component

---
 .../components/save/SupportedServices.svelte  | 110 ++++++------------
 1 file changed, 38 insertions(+), 72 deletions(-)

diff --git a/web/src/components/save/SupportedServices.svelte b/web/src/components/save/SupportedServices.svelte
index 6dcb9244..adf63ef5 100644
--- a/web/src/components/save/SupportedServices.svelte
+++ b/web/src/components/save/SupportedServices.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-    import { getServerInfo } from "$lib/api/server-info";
     import cachedInfo from "$lib/state/server-info";
+    import { getServerInfo } from "$lib/api/server-info";
+
+    import type { SvelteComponent } from "svelte";
 
     import Skeleton from "$components/misc/Skeleton.svelte";
     import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
+    import PopoverContainer from "$components/misc/PopoverContainer.svelte";
 
     let services: string[] = [];
 
-    let popover: HTMLDivElement;
-
+    let popover: SvelteComponent;
     $: expanded = false;
+
+    let servicesContainer: HTMLDivElement;
     $: loaded = false;
-    $: renderPopover = false;
 
     const loadInfo = async () => {
         await getServerInfo();
@@ -29,19 +32,7 @@
             await loadInfo();
         }
         if (expanded) {
-            popover.focus();
-        }
-    }
-
-    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 {
-            await popoverAction();
+            servicesContainer.focus();
         }
     };
 </script>
@@ -49,7 +40,7 @@
 <div id="supported-services" class:expanded>
     <button
         id="services-button"
-        on:click={showPopover}
+        on:click={popover?.showPopover}
         aria-label={$t(`save.services.title_${expanded ? "hide" : "show"}`)}
     >
         <div class="expand-icon">
@@ -58,33 +49,36 @@
         <span class="title">{$t("save.services.title")}</span>
     </button>
 
-    {#if renderPopover}
-        <div id="services-popover">
-            <div
-                id="services-container"
-                bind:this={popover}
-                tabindex="-1"
-                data-focus-ring-hidden
-            >
-                {#if loaded}
-                    {#each services as service}
-                        <div class="service-item">{service}</div>
-                    {/each}
-                {:else}
-                    {#each { length: 17 } as _}
-                        <Skeleton
-                            class="elevated"
-                            width={Math.random() * 44 + 50 + "px"}
-                            height="24.5px"
-                        />
-                    {/each}
-                {/if}
-            </div>
-            <div id="services-disclaimer" class="subtext">
-                {$t("save.services.disclaimer")}
-            </div>
+    <PopoverContainer
+        bind:this={popover}
+        id="services-popover"
+        {expanded}
+        {popoverAction}
+    >
+        <div
+            id="services-container"
+            bind:this={servicesContainer}
+            tabindex="-1"
+            data-focus-ring-hidden
+        >
+            {#if loaded}
+                {#each services as service}
+                    <div class="service-item">{service}</div>
+                {/each}
+            {:else}
+                {#each { length: 17 } as _}
+                    <Skeleton
+                        class="elevated"
+                        width={Math.random() * 44 + 50 + "px"}
+                        height="24.5px"
+                    />
+                {/each}
+            {/if}
         </div>
-    {/if}
+        <div id="services-disclaimer" class="subtext">
+            {$t("save.services.disclaimer")}
+        </div>
+    </PopoverContainer>
 </div>
 
 <style>
@@ -97,34 +91,6 @@
         height: 35px;
     }
 
-    #services-popover {
-        display: flex;
-        flex-direction: column;
-        border-radius: 18px;
-        background: var(--button);
-        box-shadow:
-            var(--button-box-shadow),
-            0 0 10px 10px var(--popover-glow);
-
-        position: relative;
-        padding: 12px;
-        gap: 6px;
-        top: 6px;
-
-        opacity: 0;
-        transform: scale(0);
-        transform-origin: top center;
-
-        transition:
-            transform 0.3s cubic-bezier(0.53, 0.05, 0.23, 1.15),
-            opacity 0.25s cubic-bezier(0.53, 0.05, 0.23, 0.99);
-    }
-
-    .expanded #services-popover {
-        transform: scale(1);
-        opacity: 1;
-    }
-
     #services-button {
         gap: 9px;
         padding: 7px 13px 7px 10px;