From 84fb4b209a2650b2a93f3208ee9a23a44d8283c7 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Fri, 8 Nov 2024 15:19:04 -0800
Subject: svelte 5 fixups

---
 src/components/Avatar.svelte       | 22 +++++++++++----
 src/components/InvoiceData.svelte  |  2 --
 src/components/LocationsMap.svelte | 47 ++++++++++++++++----------------
 src/components/Numpad.svelte       | 55 +++++++++++++-------------------------
 src/components/Pin.svelte          | 50 +++++++++++++---------------------
 5 files changed, 78 insertions(+), 98 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index 3007c3e7..04f346b1 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
+  import { run } from "svelte/legacy";
 
   import { avatar, banner } from "$lib/store";
   import Icon from "$comp/Icon.svelte";
@@ -17,8 +17,12 @@
   let link = $derived(user?.anon ? `/${user.pubkey}` : `/${user.username}`);
 
   let base = "/api/public";
-  let profile = $derived(user?.profile ? `${base}/${user.profile}.webp` : user?.picture);
-  let fallback = $derived(`${base}/punks/` + punk(user.pubkey || user.id || "aa"));
+  let profile = $derived(
+    user?.profile ? `${base}/${user.profile}.webp` : user?.picture,
+  );
+  let fallback = $derived(
+    `${base}/punks/` + punk(user.pubkey || user.id || "aa"),
+  );
   let tmp = $derived($avatar?.id && $avatar.id === user.id && $avatar.src);
   let src;
   run(() => {
@@ -28,7 +32,7 @@
   let handle = () => (src = fallback);
 </script>
 
-<a href={link} class:pointer-events-none={disabled}>
+{#snippet body()}
   <div
     class="w-{s} h-{s} rounded-full border-4 border-base-100 overflow-hidden bg-gradient-to-r from-primary to-gradient flex justify-center items-center"
   >
@@ -39,4 +43,12 @@
       onerror={handle}
     />
   </div>
-</a>
+{/snippet}
+
+{#if disabled}
+  {@render body()}
+{:else}
+  <a href={link} class:pointer-events-none={disabled}>
+    {@render body()}
+  </a>
+{/if}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index da1ea5d9..2298d150 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -4,7 +4,6 @@
     showQr,
     src,
     link,
-    qr = $bindable(),
     txt,
     invoice,
     amount,
@@ -21,7 +20,6 @@
       <img
         {src}
         class="mx-auto z-10 max-w-[360px] border-4 border-white"
-        bind:this={qr}
         alt={txt}
       />
     </a>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index b04b8e98..36223b75 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -1,7 +1,6 @@
 <script>
   import { tick, onMount, onDestroy, mount } from "svelte";
   import { browser } from "$app/environment";
-  import Icon from "$comp/Icon.svelte";
   import Popup from "$comp/Popup.svelte";
   import { back } from "$lib/utils";
 
@@ -9,7 +8,8 @@
 
   let { locations } = $props();
   let map;
-  let mapContainer = $state(), mapWrapper = $state();
+  let mapContainer = $state(),
+    mapWrapper = $state();
   let markers = [];
   let search = $state();
   let clearSearch = (e) => (search = "");
@@ -49,7 +49,6 @@
     }
   };
 
-
   let scroll = () => {
     const el = document.querySelector(".selected");
     if (el)
@@ -197,9 +196,9 @@
             let popupContainer = document.createElement("div");
 
             mount(Popup, {
-                            target: popupContainer,
-                            props: { tags },
-                          });
+              target: popupContainer,
+              props: { tags },
+            });
 
             let marker = new maplibre.Marker({ color: "#F7931A", scale: 0.65 })
               .setLngLat([lon, lat])
@@ -247,11 +246,13 @@
   });
 
   onDestroy(() => map && map.remove());
-  let list = $derived(search
-    ? markers.filter((m) =>
-        m.tags.name.toLowerCase().includes(search.toLowerCase()),
-      )
-    : inview);
+  let list = $derived(
+    search
+      ? markers.filter((m) =>
+          m.tags.name.toLowerCase().includes(search.toLowerCase()),
+        )
+      : inview,
+  );
 </script>
 
 <div class="w-screen h-dvh flex" id="map" bind:this={mapWrapper}>
@@ -259,29 +260,29 @@
     id="map-container"
     class="mx-auto h-full w-full z-0"
     bind:this={mapContainer}
-></div>
+  ></div>
   <div class="absolute flex top-2 left-2 gap-2">
     <button
-      class="rounded-full border-2 border-black bg-base-100 w-10 h-10"
+      class="rounded-full border-2 border-black bg-base-100 w-16 h-16 flex items-center justify-center bg-opacity-80"
       onclick={back}
     >
-      <Icon icon="arrow-left" style="w-4 m-auto" />
+      <iconify-icon icon="ph:arrow-left-bold" width="24"></iconify-icon>
     </button>
   </div>
   <div class="relative">
     {#if !showList}
       <div
-        class="space-y-1 text-sm w-[300px] max-w-[calc(100vw*0.5)] h-[300px] max-h-[calc(100vh*0.4)] overflow-y-scroll p-4 bg-opacity-90 bg-white absolute right-4 bottom-8 rounded-2xl shadow text-ellipsis overflow-x-hidden"
+        class="space-y-1 text-sm w-[300px] max-w-[calc(100vw*0.5)] h-[300px] max-h-[calc(100vh*0.4)] overflow-y-scroll p-4 bg-opacity-90 bg-base-100 absolute right-4 bottom-8 rounded-2xl shadow text-ellipsis overflow-x-hidden"
       >
-        <div class="relative mb-4 sticky top-0 bg-white z-10">
+        <div class="relative mb-4 sticky top-0 bg-base-100 z-10">
           <input bind:value={search} class="w-full" />
           <div class="flex gap-1 absolute right-6 top-3">
             {#if search}
               <button onclick={clearSearch}>
-                <Icon icon="close" style="w-8" />
+                <iconify-icon icon="ph:x-bold" width="32"></iconify-icon>
               </button>
             {:else}
-              <Icon icon="search" style="w-8" />
+              <iconify-icon icon="ph:search-bold" width="32"></iconify-icon>
             {/if}
           </div>
         </div>
@@ -300,19 +301,19 @@
     {/if}
     <div class="absolute flex top-2 right-2 gap-2">
       <button
-        class="rounded-full border-2 border-black bg-white w-10 h-10"
+        class="rounded-full border-2 border-primary bg-base-100 w-16 h-16 flex items-center justify-center bg-opacity-80"
         onclick={toggleList}
       >
-        <Icon icon="list" style="w-4 m-auto" />
+        <iconify-icon icon="ph:list-bold" width="24"></iconify-icon>
       </button>
       <button
-        class="rounded-full border-2 border-black bg-white w-10 h-10"
+        class="rounded-full border-2 border-primary bg-base-100 w-16 h-16 flex items-center justify-center bg-opacity-80"
         onclick={toggle}
       >
         {#if timeout}
-          <Icon icon="pause" style="w-4 m-auto" />
+          <iconify-icon icon="ph:pause-bold" width="24"></iconify-icon>
         {:else}
-          <Icon icon="play" style="w-4 m-auto" />
+          <iconify-icon icon="ph:play-bold" width="24"></iconify-icon>
         {/if}
       </button>
     </div>
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 03c7c48f..07d1ef4c 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -1,33 +1,21 @@
-<script lang="ts">
-  import { run, preventDefault, stopPropagation } from "svelte/legacy";
-
+<script>
   import Left from "$comp/Left.svelte";
   import Icon from "$comp/Icon.svelte";
   import { f, s, focus, warning, sat, sats } from "$lib/utils";
   import { t } from "$lib/translations";
 
-  interface Props {
-    amount: any;
-    currency: any;
-    element: any;
-    fiat?: any;
-    rate: any;
-    submit?: any;
-    amountFiat?: number;
-  }
-
-  let {
-    amount = $bindable(),
+  export let amount,
     currency,
-    element = $bindable(),
-    fiat = $bindable(!amount),
-    rate = $bindable(),
-    submit = undefined,
-    amountFiat = $bindable(0),
-  }: Props = $props();
+    element,
+    fiat = !amount,
+    rate,
+    submit = undefined;
+
+  export let amountFiat = 0;
 
   let arrow = "<";
 
+  $: update(amount, amountFiat);
   let update = (a, f) => {
     if (fiat) {
       amount = Math.round(f / (rate / sats));
@@ -114,6 +102,8 @@
     }
   };
 
+  $: html = fiat ? amountFiat : s(amount);
+
   let prev = "";
 
   let input = (e) => {
@@ -203,13 +193,6 @@
     }
     fiat = !fiat;
   };
-  run(() => {
-    update(amount, amountFiat);
-  });
-  let html;
-  run(() => {
-    html = fiat ? amountFiat : s(amount);
-  });
 </script>
 
 <div class="flex justify-center items-center">
@@ -225,17 +208,17 @@
           use:focus
           contenteditable
           bind:innerHTML={html}
-          onfocus={select}
-          onblur={blur}
-          oninput={input}
-          onkeydown={keydown}
+          on:focus={select}
+          on:blur={blur}
+          on:input={input}
+          on:keydown={keydown}
           class="outline-none my-auto"
           bind:this={element}
-        ></div>
+        />
       </div>
       <div
         class="flex items-center justify-center text-2xl cursor-pointer"
-        onclick={stopPropagation(preventDefault(swap))}
+        on:click|preventDefault|stopPropagation={swap}
       >
         {fiat ? "⚡️" + s(amount) : f(amountFiat, currency)}
       </div>
@@ -247,7 +230,7 @@
           <button
             type="button"
             class="btn"
-            onclick={stopPropagation(preventDefault(() => handleInput(value)))}
+            on:click|preventDefault|stopPropagation={() => handleInput(value)}
           >
             <Left />
           </button>
@@ -255,7 +238,7 @@
           <button
             type="button"
             class="btn"
-            onclick={stopPropagation(preventDefault(() => handleInput(value)))}
+            on:click|preventDefault|stopPropagation={() => handleInput(value)}
             >{value}</button
           >
         {/if}
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index da53577e..fb17c612 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,36 +1,28 @@
-<script lang="ts">
-  import { run, createBubbler, preventDefault } from "svelte/legacy";
-
-  const bubble = createBubbler();
+<script>
   import { t } from "$lib/translations";
   import { post, success, fail, focus, setCookie } from "$lib/utils";
   import Pinpad from "$comp/Pinpad.svelte";
   import { pin } from "$lib/store";
   import { onMount } from "svelte";
 
-  interface Props {
-    value?: string;
-    title?: any;
-    cancel?: any;
-    notify?: boolean;
-  }
-
-  let {
-    value = $bindable(""),
-    title = $t("user.settings.verifyPIN"),
-    cancel = () => (p = ""),
-    notify = true,
-  }: Props = $props();
+  export let value = "";
+  export let title = $t("user.settings.verifyPIN");
+  export let cancel = () => (p = "");
+  export let notify = true;
 
-  let p = $state("");
+  let p = "";
 
+  $: update(value);
   let update = (value) => (p = value);
 
-  let loaded = $state();
+  $: p.toString().length > 5 && (value = p.toString());
+
+  let loaded;
   onMount(() => setTimeout(() => (loaded = true), 500));
 
-  let locktime = $state(30 * 60);
+  let locktime = 30 * 60;
 
+  $: loaded && checkPin(p);
   let checkPin = async (p) => {
     if (p?.length !== 6) return;
     let result;
@@ -49,21 +41,12 @@
       value = "";
     }
   };
-  run(() => {
-    p.toString().length > 5 && (value = p.toString());
-  });
-  run(() => {
-    update(value);
-  });
-  run(() => {
-    loaded && checkPin(p);
-  });
 </script>
 
 {#if loaded}
   <div
     class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
-    onclick={preventDefault(bubble("click"))}
+    on:click|preventDefault
   >
     <div
       class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
@@ -75,7 +58,10 @@
         <label for="locktime" class="font-bold"
           >{$t("user.settings.rememberFor")}</label
         >
-        <select name="locktime" bind:value={locktime}>
+        <select
+          name="locktime"
+          bind:value={locktime}
+        >
           <option value={30}>30 {$t("user.settings.seconds")}</option>
           <option value={5 * 60}>5 {$t("user.settings.minutes")}</option>
           <option value={10 * 60}>10 {$t("user.settings.minutes")}</option>
@@ -86,7 +72,7 @@
       </div>
 
       <div class="w-full flex">
-        <button class="btn" onclick={preventDefault(cancel)}>
+        <button class="btn" on:click|preventDefault={cancel}>
           <div class="my-auto">Cancel</div>
         </button>
       </div>
-- 
cgit v1.2.3