diff options
| -rw-r--r-- | src/components/Menu.svelte | 44 | ||||
| -rw-r--r-- | src/routes/(app)/settings/+layout.svelte | 30 |
2 files changed, 30 insertions, 44 deletions
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte index de21bbbc..7268b74b 100644 --- a/src/components/Menu.svelte +++ b/src/components/Menu.svelte @@ -1,35 +1,24 @@ <script> - import { run } from 'svelte/legacy'; - import { theme } from "$lib/store"; import DarkToggle from "$comp/DarkToggle.svelte"; import OutClick from "svelte-outclick"; - let { - t, - user, - w, - opacity - } = $props(); + let { t, user, w, opacity } = $props(); let dark = () => ($theme = $theme === "dark" ? "light" : "dark"); let showMenu = $state(false); - let menuButtons = $state(); - run(() => { - if (user) - menuButtons = [ - { key: "nav.settings", icon: "ph:gear-bold", href: `/settings` }, - { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` }, - { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` }, - { - key: "nav.merch", - icon: "ph:storefront-bold", - href: `https://coinosmerch.com`, - }, - { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` }, - { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` }, - ]; - }); + let menuButtons = [ + { key: "nav.settings", icon: "ph:gear-bold", href: `/settings` }, + { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` }, + { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` }, + { + key: "nav.merch", + icon: "ph:storefront-bold", + href: `https://coinosmerch.com`, + }, + { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` }, + { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` }, + ]; let hideMenu = () => (showMenu = false); let toggleMenu = () => (showMenu = !showMenu); @@ -38,7 +27,8 @@ <div> <OutClick on:outclick={hideMenu}> <button class="btn-menu {opacity('/support')}" onclick={toggleMenu} - ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24}></iconify-icon> + ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24} + ></iconify-icon> </button> <div @@ -70,7 +60,9 @@ {/each} </ul> <hr class="my-4" /> - <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="160"></iconify-icon></a> + <a href="/?stay=true" + ><iconify-icon icon="coinos:logo" width="160"></iconify-icon></a + > </div> </OutClick> </div> diff --git a/src/routes/(app)/settings/+layout.svelte b/src/routes/(app)/settings/+layout.svelte index c76c6873..e366c05a 100644 --- a/src/routes/(app)/settings/+layout.svelte +++ b/src/routes/(app)/settings/+layout.svelte @@ -1,5 +1,4 @@ <script> - import { run, preventDefault } from "svelte/legacy"; import { setContext } from "svelte"; import { browser } from "$app/environment"; @@ -19,12 +18,13 @@ import { invalidateAll } from "$app/navigation"; import { PUBLIC_COINOS_URL } from "$env/static/public"; - let { data, form } = $props(); + let { children, data, form } = $props(); let formElement = $state(); - let { user, token, cookies, subscriptions } = $state(data); + let { token, cookies, subscriptions } = $derived(data); let { tab } = $derived(data); + let { user } = $derived(form || data); let prev = $derived({ ...user }); let justUpdated; @@ -42,10 +42,11 @@ { name: "security", key: "SECURITY" }, ]; - let { address, id, username } = user; + let { address, id, username } = $derived(user); let submitting = $state(); - async function handleSubmit() { + async function handleSubmit(e) { + e.preventDefault(); try { submitting = true; let data = new FormData(formElement); @@ -164,22 +165,15 @@ submitting = false; } - run(() => { - form?.user && ({ user } = form); - }); - run(() => { - form?.success && throttledSuccess(); - }); - run(() => { - form?.message && fail(form.message); - }); - run(() => { + $effect(() => form?.success && throttledSuccess()); + $effect(() => form?.message && fail(form.message)); + $effect(() => { if (form?.message?.startsWith("Pin")) { fail("Wrong pin, try again"); $pin = ""; } }); - run(() => { + $effect(() => { if (!$loading && $page.url.searchParams.get("verified")) success($t("user.settings.verified")); }); @@ -192,7 +186,7 @@ <form method="POST" class="mb-[154px] settings" - onsubmit={preventDefault(handleSubmit)} + onsubmit={handleSubmit} bind:this={formElement} > <input type="hidden" name="pin" value={$pin} /> @@ -219,7 +213,7 @@ </div> </div> - <slot /> + {@render children?.()} </div> <div |