web/save: add supported services popover

web/src/components/save/SupportedServices.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+    import { getServerInfo, cachedInfo } from "$lib/api/server-info";
+
+    import Skeleton from "$components/misc/Skeleton.svelte";
+    import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
+
+    let services: string[] = [];
+
+    $: expanded = false;
+    $: loaded = false;
+
+    const loadInfo = async () => {
+        await getServerInfo();
+
+        if ($cachedInfo) {
+            loaded = true;
+            services = $cachedInfo.cobalt.services;
+        }
+    };
+</script>
+
+<div id="supported-services">
+    <button
+        id="services-button"
+        class:expanded
+        on:click={async () => {
+            expanded = !expanded;
+            if (expanded && services.length === 0) {
+                await loadInfo();
+            }
+        }}
+    >
+        <div class="expand-icon">
+            <IconPlus />
+        </div>
+        <span class="title">{$t("save.services.title")}</span>
+    </button>
+
+    <div id="services-popover" class:expanded>
+        <div id="services-container">
+            {#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>
+    </div>
+</div>
+
+<style>
+    #supported-services {
+        display: flex;
+        position: relative;
+        max-width: 400px;
+        flex-direction: column;
+        align-items: center;
+        height: 35px;
+    }
+
+    #services-popover {
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.2s cubic-bezier(0.53, 0.05, 0.23, 0.99);
+        border-radius: 18px;
+        background: var(--button);
+        box-shadow:
+            var(--button-box-shadow),
+            0 0 10px 10px var(--button-stroke);
+
+        transform: scale(0);
+        transform-origin: top center;
+        position: relative;
+
+        padding: 12px;
+        gap: 6px;
+        top: 6px;
+    }
+
+    #services-popover.expanded {
+        transform: scale(1);
+    }
+
+    #services-button {
+        gap: 9px;
+        padding: 7px 13px 7px 10px;
+        justify-content: flex-start;
+        border-radius: 18px;
+        display: flex;
+        flex-direction: row;
+        font-size: 13px;
+        font-weight: 500;
+    }
+
+    .expand-icon {
+        height: 21px;
+        width: 21px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 18px;
+        background: var(--button-elevated);
+        padding: 0;
+        box-shadow: none;
+        transition: transform 0.2s;
+    }
+
+    #services-button:hover .expand-icon {
+        background: var(--button-elevated-hover);
+    }
+
+    .expand-icon :global(svg) {
+        height: 18px;
+        width: 18px;
+        stroke-width: 2px;
+        color: var(--secondary);
+        will-change: transform;
+    }
+
+    .expanded .expand-icon {
+        transform: rotate(45deg);
+        transition: transform 0.2s;
+    }
+
+    #services-container {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        gap: 3px;
+    }
+
+    .service-item {
+        display: flex;
+        padding: 4px 8px;
+        border-radius: calc(var(--border-radius) / 2);
+        background: var(--button-elevated);
+        font-size: 12.5px;
+        font-weight: 500;
+    }
+
+    #services-disclaimer {
+        padding: 0;
+    }
+</style>