dependency audit

3 files changed, 49 insertions, 58 deletions

diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index 94fc7c3a..ca64a289 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -9,7 +9,6 @@
   import CoinosLogo from "virtual:icons/coinos/logo";
   import { theme } from "$lib/store";
   import DarkToggle from "$comp/DarkToggle.svelte";
-  import { OutClick } from "svelte-outclick";
   let { t, user, w, opacity } = $props();
 
   let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
@@ -26,47 +25,50 @@
 
   let hideMenu = () => (showMenu = false);
   let toggleMenu = () => (showMenu = !showMenu);
+
+  const clickOutside = (node, callback) => {
+    const handler = (e) => { if (!node.contains(e.target)) callback(); };
+    document.addEventListener("click", handler, true);
+    return { destroy: () => document.removeEventListener("click", handler, true) };
+  };
 </script>
 
-<div>
-  <OutClick onOutClick={hideMenu}>
-    <button class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity('/support')}" onclick={toggleMenu} aria-label="Open menu">
-      <PhListBold width={w > 640 ? 32 : 24} />
-    </button>
+<div use:clickOutside={hideMenu}>
+  <button class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity('/support')}" onclick={toggleMenu} aria-label="Open menu">
+    <PhListBold width={w > 640 ? 32 : 24} />
+  </button>
 
-    <div
-      class="absolute top-14 right-0 bg-base-100 rounded-3xl p-8 shadow-xl z-50"
-      class:hidden={!showMenu}
-      class:block={showMenu}
-    >
-      <ul class="space-y-5 w-48">
-        {#each menuButtons as { href, icon: Icon, key }}
-          <li>
-            {#if key.includes("dark")}
-              <DarkToggle />
-            {:else}
-              <a
-                {href}
-                data-sveltekit-preload-code="eager"
-                data-sveltekit-preload-data="false"
-                onclick={hideMenu}
+  <div
+    class="absolute top-14 right-0 bg-base-100 rounded-3xl p-8 shadow-xl z-50"
+    class:hidden={!showMenu}
+    class:block={showMenu}
+  >
+    <ul class="space-y-5 w-48">
+      {#each menuButtons as { href, icon: Icon, key }}
+        <li>
+          {#if key.includes("dark")}
+            <DarkToggle />
+          {:else}
+            <a
+              {href}
+              data-sveltekit-preload-code="eager"
+              data-sveltekit-preload-data="false"
+              onclick={hideMenu}
+            >
+              <button
+                class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
               >
-                <button
-                  class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
-                >
-                  <Icon width="32" />
-                  {t(key)}
-                </button>
-              </a>
-            {/if}
-          </li>
-        {/each}
-      </ul>
-      <hr class="my-4" />
-      <a href="/?stay=true" aria-label="Coinos home">
-        <CoinosLogo width="160" />
-      </a>
-    </div>
-  </OutClick>
+                <Icon width="32" />
+                {t(key)}
+              </button>
+            </a>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    <hr class="my-4" />
+    <a href="/?stay=true" aria-label="Coinos home">
+      <CoinosLogo width="160" />
+    </a>
+  </div>
 </div>
-
diff --git a/src/components/Payments.svelte b/src/components/Payments.svelte
index 881da11d..2ebe9794 100644
--- a/src/components/Payments.svelte
+++ b/src/components/Payments.svelte
@@ -3,10 +3,8 @@
   import LogosBitcoin from "virtual:icons/logos/bitcoin";
   import { goto } from "$app/navigation";
   import Avatar from "$comp/Avatar.svelte";
-  import { get, f, s, si, sat, loc, sats, types } from "$lib/utils";
-  import { format } from "date-fns";
+  import { get, f, s, si, sat, loc, sats, types, formatDate } from "$lib/utils";
   import { t } from "$lib/translations";
-  import locales from "$lib/locales";
   import { fiat } from "$lib/store";
   const { fund = undefined, locale, user, payments }: any = $props();
   const language = $derived(user?.language || "en");
@@ -102,14 +100,10 @@
 
       <div class="text-secondary text-right text-sm my-auto col-span-3">
         <div>
-          {format(new Date(p.created), "MMM d, yy", {
-            locale: locales[language],
-          })}
+          {formatDate(new Date(p.created), language, { month: "short", day: "numeric", year: "2-digit" })}
         </div>
         <div>
-          {format(new Date(p.created), "h:mm aaa", {
-            locale: locales[language],
-          })}
+          {formatDate(new Date(p.created), language, { hour: "numeric", minute: "2-digit" })}
         </div>
       </div>
     </div>
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index d5dbfc41..692f665e 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
   let { icon = "", text }: any = $props();
   let qr = $state();
-  let screenfull;
 
-  onMount(async () => {
-    if (!browser) return;
-    screenfull = (await import("screenfull")).default;
-  });
+  const toggleFullscreen = (el) =>
+    document.fullscreenElement ? document.exitFullscreen() : el.requestFullscreen();
 
   let src = $derived.by(() => {
     let url = `/qr/${encodeURIComponent(text)}`;
@@ -21,8 +16,8 @@
 <div
   class="w-72 sm:w-80 mx-auto cursor-pointer"
   bind:this={qr}
-  onclick={() => screenfull?.toggle?.(qr)}
-  onkeydown={(e) => (e.key === "Enter" || e.key === " ") && screenfull?.toggle?.(qr)}
+  onclick={() => toggleFullscreen(qr)}
+  onkeydown={(e) => (e.key === "Enter" || e.key === " ") && toggleFullscreen(qr)}
   role="button"
   tabindex="0"
   aria-label="Toggle fullscreen QR"