svelte 5 fixups

11 files changed, 83 insertions, 120 deletions

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