diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader.svelte | 19 | ||||
| -rw-r--r-- | src/components/Avatar.svelte | 8 | ||||
| -rw-r--r-- | src/routes/(app)/+layout.svelte | 2 |
3 files changed, 12 insertions, 17 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index fef2f0f4..1431bb6f 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,5 +1,5 @@ <script> - import { run } from 'svelte/legacy'; + import { run } from "svelte/legacy"; import { banner, theme, newPayment } from "$lib/store"; import { goto } from "$app/navigation"; @@ -11,18 +11,17 @@ let { user, subject = $bindable() } = $props(); let w = $state(); - run(() => { - if (!subject) subject = user; - }); + $effect(() => (subject ||= user)); - let bg = - $derived($banner?.id && $banner.id === subject.id + let bg = $derived( + $banner?.id && $banner.id === subject.id ? `url(${$banner.src})` : subject?.banner ? subject.banner.includes(":") ? `url(${subject.banner})` : `url(/api/public/${subject.banner}.webp)` - : undefined); + : undefined, + ); const links = [ { @@ -47,7 +46,8 @@ let opacity = $derived((href) => $page.url.pathname === href ? "opacity-100" - : "opacity-90 hover:opacity-none"); + : "opacity-90 hover:opacity-none", + ); </script> <svelte:window bind:innerWidth={w} /> @@ -62,7 +62,8 @@ {#each links as { href, icon, flip }} <a {href} data-sveltekit-preload-code="eager"> <button class="btn-menu {opacity(href)}"> - <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip}></iconify-icon> + <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip} + ></iconify-icon> </button> </a> {/each} diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index 04f346b1..467b825e 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -24,12 +24,7 @@ `${base}/punks/` + punk(user.pubkey || user.id || "aa"), ); let tmp = $derived($avatar?.id && $avatar.id === user.id && $avatar.src); - let src; - run(() => { - src = tmp || profile || fallback; - }); - - let handle = () => (src = fallback); + let src = $derived(tmp || profile || fallback); </script> {#snippet body()} @@ -40,7 +35,6 @@ {src} class="w-full h-full object-cover object-center overflow-hidden" alt={user.username} - onerror={handle} /> </div> {/snippet} diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte index c09fc309..a81bfbf1 100644 --- a/src/routes/(app)/+layout.svelte +++ b/src/routes/(app)/+layout.svelte @@ -125,7 +125,7 @@ <SvelteToast options={{ reversed: true, intro: { y: 192 } }} /> <main class="pb-20 min-h-dvh" data-theme={theme}> - <AppHeader {user} {subject} /> + <AppHeader {user} bind:subject /> {#if !$loading} {@render children?.()} {/if} |