svelte 5 fixups

15 files changed, 121 insertions, 179 deletions

diff --git a/src/routes/(app)/invoice/[id]/+layout.server.ts b/src/routes/(app)/invoice/[id]/+layout.server.ts
index e428d9fe..9b667c7b 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.ts
+++ b/src/routes/(app)/invoice/[id]/+layout.server.ts
@@ -35,6 +35,7 @@ export async function load({ cookies, depends, params, url, parent }) {
 		}
 	}
 
+	console.log("REDRAW", invoice?.text);
 	const src = Qr.drawImg(invoice?.text || "", { size: 500 });
 	const theme = cookies.get("theme");
 	return { id, invoice, subject, src, user, token, theme };
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index fef43e4d..ded42016 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -26,7 +26,8 @@
 
   let readingerror = (e) => console.log("nfc error", e);
 
-  let { invoice, id, subject, user, src } = $state(data);
+  let { invoice, id, subject, user } = $state(data);
+  let src = $derived(data.src);
   let {
     aid,
     amount,
@@ -38,32 +39,15 @@
     user: { username, currency },
   } = $state(invoice);
 
-  let qr = $state();
-  let tipPercent = 0;
+  let tipPercent = $derived(tip ? (tip / amount) * 100 : 0);
 
-  let refresh = async (data) => {
-    ({ invoice, id, user, src } = data);
-    ({
-      aid,
-      amount,
-      hash,
-      type,
-      rate,
-      text,
-      tip,
-      user: { username, currency },
-    } = invoice);
-
-    if (browser && !subbed[id])
-      send("subscribe", invoice)
-        .then(() => (subbed[id] = true))
-        .catch((e) => {
-          console.log("failed to subscribe to invoice notifications", invoice);
-          console.log(e);
-        });
-
-    tipPercent = (tip / amount) * 100;
-  };
+  // if (browser && !subbed[id])
+  //   send("subscribe", invoice)
+  //     .then(() => (subbed[id] = true))
+  //     .catch((e) => {
+  //       console.log("failed to subscribe to invoice notifications", invoice);
+  //       console.log(e);
+  //     });
 
   let subbed = {};
 
@@ -90,6 +74,7 @@
   };
 
   let setAmount = $state(async () => {
+    console.log("LALA", newAmount);
     if (typeof $amountPrompt === "undefined") $amountPrompt = true;
     settingAmount = false;
     amount = newAmount;
@@ -104,6 +89,7 @@
     if (subject?.prompt) url += "/tip";
     else url += "?options=true";
 
+    console.log("GO", url);
     goto(url, { invalidateAll: true, noScroll: true });
   });
 
@@ -112,31 +98,20 @@
   let toggleAmount = $state(() => (settingAmount = !settingAmount));
   let fiat = $state(true);
   let submit = $state();
-  run(() => {
-    refresh(data);
-  });
-  let amountFiat;
-  run(() => {
-    amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-  });
+  let amountFiat = $derived(parseFloat(((amount * rate) / sats).toFixed(2)));
   let tipAmount = $derived(((tip * rate) / sats).toFixed(2));
-  let link;
-  run(() => {
-    link = [types.bitcoin, types.liquid].includes(type)
-      ? text
-      : `lightning:${text}`;
-  });
-  let txt;
-  run(() => {
-    txt = [types.bitcoin, types.liquid].includes(type) ? hash : text;
-  });
+  let link = $derived(
+    [types.bitcoin, types.liquid].includes(type) ? text : `lightning:${text}`,
+  );
+  let txt = $derived(
+    [types.bitcoin, types.liquid].includes(type) ? hash : text,
+  );
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
   <InvoiceData
     {src}
     {link}
-    {qr}
     {txt}
     {invoice}
     {amount}
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 7ec76bc9..6b93b94b 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { run } from 'svelte/legacy';
+  import { run } from "svelte/legacy";
 
   import { page } from "$app/stores";
   import { fly } from "svelte/transition";
@@ -17,7 +17,10 @@
 
   let { contacts } = data;
 
-  let el = $state(), text = $state(), pasted = $state(), w = $state();
+  let el = $state(),
+    text = $state(),
+    pasted = $state(),
+    w = $state();
 
   let keypress = (e) =>
     e.key === "Enter" ? e.preventDefault() || el.click() : (pasted = false);
@@ -60,7 +63,7 @@
       bind:value={text}
       onpaste={() => (pasted = true)}
       autocapitalize="none"
-></textarea>
+    ></textarea>
 
     <div class="flex gap-2">
       <a href="/scan" class="contents">
@@ -95,18 +98,12 @@
         {$t("user.send.contacts")}
       </h1>
       <div>
-        {#each contacts as c}
-          <a href={`/pay/${c.username}`}>
-            <div class="border-b p-2 last:border-b-0 hover:bg-base-200">
-              <div class="flex">
-                <div>
-                  <div class="flex">
-                    <Avatar user={c} size={20} disabled={true} />
-                    <div class="my-auto text-left">
-                      <p class="ml-1 text-lg break-words">{c.username}</p>
-                    </div>
-                  </div>
-                </div>
+        {#each contacts as c, i}
+          <a href={`/pay/${c.username}`} class="contents">
+            <div class="flex hover:bg-base-200 p-2">
+              <Avatar user={c} size={20} disabled={true} />
+              <div class="my-auto text-left">
+                <p class="ml-1 text-lg break-words">{c.username}</p>
               </div>
             </div>
           </a>
diff --git a/src/routes/(app)/settings/+layout.server.ts b/src/routes/(app)/settings/+layout.server.ts
new file mode 100644
index 00000000..cd63d4f0
--- /dev/null
+++ b/src/routes/(app)/settings/+layout.server.ts
@@ -0,0 +1,10 @@
+import { auth, get } from "$lib/utils";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ cookies, params, url }) {
+	const tab = url.pathname.split("/").filter(Boolean).pop();
+	if (tab === "settings") redirect(307, `${url.pathname}/account`);
+	params.cookies = cookies.getAll();
+	const subscriptions = await get("/subscriptions", auth(cookies));
+	return { cookies: cookies.getAll(), subscriptions, tab };
+}
diff --git a/src/routes/(app)/settings/[...tab]/+page.svelte b/src/routes/(app)/settings/+layout.svelte
index 5b9e048d..edf256ab 100644
--- a/src/routes/(app)/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/settings/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { run, preventDefault } from 'svelte/legacy';
+  import { run, preventDefault } from "svelte/legacy";
+  import { setContext } from "svelte";
 
   import { browser } from "$app/environment";
   import { onMount, tick } from "svelte";
@@ -11,33 +12,20 @@
   import Pin from "$comp/Pin.svelte";
   import { loading, t } from "$lib/translations";
   import { fail, auth, post, sleep, warning, success } from "$lib/utils";
-  import { avatar, banner, password, pin } from "$lib/store";
+  import { avatar, banner, password, pin, save } from "$lib/store";
   import { upload } from "$lib/upload";
   import { page } from "$app/stores";
   import { sign, send, reEncryptEntropy, setNsec } from "$lib/nostr";
   import { invalidateAll } from "$app/navigation";
-
-  import Account from "./_account.svelte";
-  import Pos from "./_pos.svelte";
-  import Security from "./_security.svelte";
-  import Shopify from "./_shopify.svelte";
-
   import { PUBLIC_COINOS_URL } from "$env/static/public";
 
   let { data, form } = $props();
 
-  let submit = $state();
   let formElement = $state();
 
-  let { user, token, rates, tab, cookies, subscriptions } = $state(data);
-  let prev;
-
-  let update = () => {
-    ({ user, token, rates, tab, subscriptions } = data);
-    prev = { ...user };
-  };
-
-
+  let { user, token, rates, cookies, subscriptions } = $state(data);
+  let { tab } = $derived(data);
+  let prev = $derived({ ...user });
 
   let justUpdated;
   let throttledSuccess = () => {
@@ -48,20 +36,16 @@
     }
   };
 
-
-
   let tabs = [
-    { name: "account", key: "ACCOUNT", comp: Account },
-    { name: "pos", key: "POINT_OF_SALE", comp: Pos },
-    { name: "security", key: "SECURITY", comp: Security },
-    { name: "shopify", key: "SHOPIFY", comp: Shopify },
+    { name: "account", key: "ACCOUNT" },
+    { name: "preferences", key: "POINT_OF_SALE" },
+    { name: "security", key: "SECURITY" },
+    { name: "shopify", key: "SHOPIFY" },
   ];
 
-
   let { address, id, username } = user;
   let submitting = $state();
 
-
   async function handleSubmit() {
     try {
       submitting = true;
@@ -182,9 +166,6 @@
     submitting = false;
   }
   run(() => {
-    update(data);
-  });
-  run(() => {
     form?.user && ({ user } = form);
   });
   run(() => {
@@ -199,13 +180,10 @@
       $pin = "";
     }
   });
-  let { comp } = $derived(tabs.find((t) => t.name === tab));
   run(() => {
     if (!$loading && $page.url.searchParams.get("verified"))
       success($t("user.settings.verified"));
   });
-
-  const SvelteComponent = $derived(comp);
 </script>
 
 {#if user.haspin && $pin?.length !== 6}
@@ -227,9 +205,7 @@
         {$t("user.settings.header")}
       </h1>
 
-      <div
-        class="flex justify-around items-center border-b pb-3"
-      >
+      <div class="flex justify-around items-center border-b pb-3">
         {#each tabs.filter((t) => t.name !== "shopify") as { name, key }}
           <a href={`/settings/${name}`}>
             <button
@@ -244,14 +220,14 @@
       </div>
     </div>
 
-    <SvelteComponent {user} {rates} {submit} {subscriptions} />
+    <slot />
   </div>
 
   <div
     class="z-10 fixed bottom-0 bg-base-100 shadow border-t border-t-8 border-accent w-full flex justify-center items-center py-3"
   >
     <button
-      bind:this={submit}
+      bind:this={$save}
       type="submit"
       class="btn !w-auto"
       class:bg-base-200={submitting}
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/routes/(app)/settings/+page.svelte
diff --git a/src/routes/(app)/settings/[...tab]/+page.server.ts b/src/routes/(app)/settings/[...tab]/+page.server.ts
deleted file mode 100644
index 39533426..00000000
--- a/src/routes/(app)/settings/[...tab]/+page.server.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { auth, fd, get, post } from "$lib/utils";
-import { fail, redirect } from "@sveltejs/kit";
-
-export async function load({ cookies, params, url }) {
-	if (url.pathname.endsWith("settings"))
-		redirect(307, `${url.pathname}/account`);
-	params.cookies = cookies.getAll();
-	const subscriptions = await get("/subscriptions", auth(cookies));
-	return { cookies: cookies.getAll(), subscriptions, tab: params.tab };
-}
-
-export const actions = {
-	default: async ({ cookies, request }) => {
-		const form = await fd(request);
-
-		if (form.tab === "pos") {
-			form.notify = form.notify === "on";
-			form.push = form.push === "on";
-			form.nip5 = form.nip5 === "on";
-			form.prompt = form.prompt === "on";
-			form.autowithdraw = form.autowithdraw === "on";
-		}
-
-		let user = { ...(await get("/me", auth(cookies))), ...form };
-
-		try {
-			({ user } = await post("/user", user, auth(cookies)));
-		} catch (e: any) {
-			return fail(400, { message: e.message });
-		}
-
-		if (user.language) cookies.set("lang", user.language, { path: "/" });
-
-		return { user, success: true };
-	},
-};
diff --git a/src/routes/(app)/settings/account/+page.server.ts b/src/routes/(app)/settings/account/+page.server.ts
new file mode 100644
index 00000000..4145935e
--- /dev/null
+++ b/src/routes/(app)/settings/account/+page.server.ts
@@ -0,0 +1,5 @@
+import updateUser from "$lib/settings";
+
+export const actions = {
+	default: updateUser,
+};
diff --git a/src/routes/(app)/settings/[...tab]/_account.svelte b/src/routes/(app)/settings/account/+page.svelte
index 54249265..77860948 100644
--- a/src/routes/(app)/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -4,11 +4,14 @@
   import { t } from "$lib/translations";
   import { page } from "$app/stores";
 
-  let { user = $bindable(), rates, submit } = $props();
-
+  let { data } = $props();
+  let { user, rates } = $state(data);
   let { id } = user;
 
-  let avatarFile, avatarInput = $state(), bannerFile, bannerInput = $state();
+  let avatarFile,
+    avatarInput = $state(),
+    bannerFile,
+    bannerInput = $state();
 
   let selectAvatar = () => avatarInput.click();
   let selectBanner = () => bannerInput.click();
@@ -45,8 +48,6 @@
     reader.readAsDataURL(file);
   };
 
-  if (!user.display) user.display = user.username;
-
   let url = $derived(`${$page.url.host}/${user.username}`);
   let full = $derived(`${$page.url.protocol}//${url}`);
   let addr = $derived(`${user.username}@${$page.url.host}`);
@@ -79,17 +80,11 @@
   >
     <input type="text" name="email" class="clean" bind:value={user.email} />
     {#if user.verified}
-      <iconify-icon
-        icon="ph:check-bold"
-        class="text-success ml-auto"
-        width="32"
-></iconify-icon>
+      <iconify-icon icon="ph:check-bold" class="text-success ml-auto" width="32"
+      ></iconify-icon>
     {:else if user.email}
-      <iconify-icon
-        icon="ph:clock-bold"
-        class="text-warning ml-auto"
-        width="32"
-></iconify-icon>
+      <iconify-icon icon="ph:clock-bold" class="text-warning ml-auto" width="32"
+      ></iconify-icon>
     {/if}
   </label>
 </div>
@@ -116,7 +111,7 @@
         onclick={selectAvatar}
         onkeydown={selectAvatar}
       >
-        <Icon icon="logo-symbol-white" style="mx-auto" />
+        <iconify-icon icon="coinos:symbol" class="mx-auto"></iconify-icon>
         <iconify-icon icon="ph:floppy-disk-bold" width="32"></iconify-icon>
       </div>
     {/if}
@@ -161,7 +156,7 @@
       onclick={selectBanner}
       onkeydown={selectBanner}
       alt="Banner"
-></div>
+    ></div>
   {/if}
 
   <button
@@ -191,5 +186,5 @@
     name="address"
     bind:value={user.address}
     placeholder={$t("user.settings.aboutPlaceholder")}
-></textarea>
+  ></textarea>
 </div>
diff --git a/src/routes/(app)/settings/preferences/+page.server.ts b/src/routes/(app)/settings/preferences/+page.server.ts
new file mode 100644
index 00000000..4145935e
--- /dev/null
+++ b/src/routes/(app)/settings/preferences/+page.server.ts
@@ -0,0 +1,5 @@
+import updateUser from "$lib/settings";
+
+export const actions = {
+	default: updateUser,
+};
diff --git a/src/routes/(app)/settings/[...tab]/_pos.svelte b/src/routes/(app)/settings/preferences/+page.svelte
index 3f68eebc..762d25f5 100644
--- a/src/routes/(app)/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/settings/preferences/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { run } from 'svelte/legacy';
+  import { run } from "svelte/legacy";
 
   import { onMount, tick } from "svelte";
   import { browser } from "$app/environment";
@@ -11,20 +11,19 @@
   import { page } from "$app/stores";
   import { PUBLIC_VAPID_PUBKEY } from "$env/static/public";
 
-  let {
-    user = $bindable(),
-    rates,
-    submit,
-    subscriptions
-  } = $props();
-
+  let { data } = $props();
+  let user = $derived(data.user);
+  let rates = $derived(data.rates);
   let { currency } = $state(user);
   let rate = $state(rates[currency]);
 
   let fiats = Object.keys(rates).sort((a, b) => a.localeCompare(b));
   let keypress = (e) => e.key === "Enter" && (e.preventDefault() || el.click());
 
-  let editingReserve = $state(), editingThreshold = $state(), doneReserve = $state(), doneThreshold;
+  let editingReserve = $state(),
+    editingThreshold = $state(),
+    doneReserve = $state(),
+    doneThreshold;
   let doneEditing = () => {
     editingReserve = false;
     editingThreshold = false;
@@ -44,9 +43,12 @@
 
   if (!user.threshold) user.threshold = 1000000;
   if (!user.reserve) user.reserve = 100000;
-  let reserveEl = $state(), thresholdEl = $state();
+  let reserveEl = $state(),
+    thresholdEl = $state();
 
-  let push = $state(), pm, subscription;
+  let push = $state(),
+    pm,
+    subscription;
 
   onMount(async () => {
     if (!browser) return;
@@ -104,7 +106,7 @@
   <label for="currency" class="font-bold block mb-1"
     >{$t("user.settings.localCurrency")}</label
   >
-  <select name="currency" value={user.currency}>
+  <select name="currency" value={currency}>
     {#each fiats as fiat}
       <option value={fiat}>{fiat}</option>
     {/each}
@@ -168,7 +170,7 @@
       onkeypress={keypress}
       class="w-full p-4 border rounded-xl h-48"
       bind:value={user.destination}
-></textarea>
+    ></textarea>
   </div>
 
   <div>
@@ -222,7 +224,7 @@
       </h1>
       <Numpad
         bind:amount={user.threshold}
-        bind:currency
+          {currency}
         bind:rate
         bind:submit={doneReserve}
         bind:element={thresholdEl}
diff --git a/src/routes/(app)/settings/security/+page.server.ts b/src/routes/(app)/settings/security/+page.server.ts
new file mode 100644
index 00000000..4145935e
--- /dev/null
+++ b/src/routes/(app)/settings/security/+page.server.ts
@@ -0,0 +1,5 @@
+import updateUser from "$lib/settings";
+
+export const actions = {
+	default: updateUser,
+};
diff --git a/src/routes/(app)/settings/[...tab]/_security.svelte b/src/routes/(app)/settings/security/+page.svelte
index 8bb8a3fa..d3f27ee6 100644
--- a/src/routes/(app)/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/settings/security/+page.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { run } from 'svelte/legacy';
+  import { run } from "svelte/legacy";
+  import { getContext } from "svelte";
 
   import { getMnemonic, getNsec } from "$lib/nostr";
   import { tick } from "svelte";
@@ -8,11 +9,13 @@
   import Icon from "$comp/Icon.svelte";
   import Qr from "$comp/Qr.svelte";
   import { copy, post, success, fail } from "$lib/utils";
-  import { pin as current } from "$lib/store";
+  import { save, pin as current } from "$lib/store";
   import { invalidate } from "$app/navigation";
   import { page } from "$app/stores";
 
-  let { user = $bindable(), rates, submit } = $props();
+  let { data } = $props();
+  let { user, rates } = $state(data);
+  let { id } = user;
 
   let confirming2fa = $state(),
     disabling2fa = $state(),
@@ -24,14 +27,14 @@
     old,
     otp = $state(),
     password = $state(),
-    pin = $state(),
+    pin = $state(""),
     revealPassword = $state(),
     revealSeed,
     revealNsec = $state(),
     token = $state(""),
     setting2fa = $state(),
     settingPin = $state(),
-    verify = $state();
+    verify = $state("");
 
   let toggleImporting = () => {
     revealNsec = false;
@@ -67,7 +70,7 @@
         $current = pin;
         pin = "";
         verify = "";
-        submit.click();
+        $save.click();
         settingPin = false;
         verifying = false;
       } else {
@@ -95,7 +98,7 @@
       try {
         disablingPin = true;
         await tick();
-        submit.click();
+        $save.click();
       } catch (e) {
         console.log(e);
         fail("Failed to disable pin");
@@ -138,6 +141,7 @@
         cancel();
       }
     } catch (e) {
+      console.log(e);
       fail("Failed to enable 2FA, try again");
     }
   };
@@ -155,10 +159,7 @@
       fail("Failed to disable 2FA, try again");
     }
   };
-  let verifying;
-  run(() => {
-    verifying = pin?.length > 5;
-  });
+  let verifying = $derived(pin?.length > 5);
   run(() => {
     verify && checkPin(pin);
   });
@@ -170,6 +171,7 @@
   });
 </script>
 
+{console.log("SAVE", $save)}
 <input type="hidden" name="newpin" value={disablingPin ? "delete" : pin} />
 <input type="hidden" name="confirm" bind:value={password} />
 
@@ -191,7 +193,7 @@
     <iconify-icon
       icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
       width="32"
-></iconify-icon>
+    ></iconify-icon>
   </button>
 </div>
 
@@ -214,12 +216,11 @@
       notify={false}
     />
   {:else}
-    <button type="button" class="btn" onclick={togglePin}
-      >
+    <button type="button" class="btn" onclick={togglePin}>
       <iconify-icon
         icon={user.haspin ? "ph:lock-key-open-bold" : "ph:lock-key-bold"}
         width="32"
-></iconify-icon>
+      ></iconify-icon>
       {user.haspin
         ? $t("user.settings.disablePIN")
         : $t("user.settings.enablePIN")}</button
diff --git a/src/routes/(app)/settings/[...tab]/_shopify.svelte b/src/routes/(app)/settings/shopify/+page.svelte
index cc746c49..cc746c49 100644
--- a/src/routes/(app)/settings/[...tab]/_shopify.svelte
+++ b/src/routes/(app)/settings/shopify/+page.svelte
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index ee0ed70c..0de57279 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -47,3 +47,9 @@ addIcon("coinos:smile", {
 	width: 112,
 	height: 108,
 });
+
+addIcon("coinos:symbol", {
+	body: `<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM36 67.2C53.2313 67.2 67.2 53.2313 67.2 36C67.2 18.7687 53.2313 4.8 36 4.8C18.7687 4.8 4.8 18.7687 4.8 36C4.8 53.2313 18.7687 67.2 36 67.2Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.001 12.7998C36.0009 12.7998 36.0008 12.7998 36.0008 12.7998C23.1878 12.7998 12.8008 23.1868 12.8008 35.9998C12.8008 48.8128 23.1878 59.1998 36.0008 59.1998C36.0008 59.1998 36.0009 59.1998 36.001 59.1998V12.7998Z" fill="white"/></svg>`,
+	width: 72,
+	height: 72,
+});