Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<script lang="ts"> import { resolve } from "$app/paths"; import ArrowRight from "$icon/arrow-right"; import Bell from "$icon/bell"; import BellOff from "$icon/bell-off"; import Inbox from "$icon/inbox"; import { createLoad } from "$lib/action.svelte"; import NotificationList from "$lib/components/notifications/NotificationList.svelte"; import type { NotificationSummary } from "$lib/components/notifications/types"; import { getNotifications, type Notifications } from "$lib/notifications.svelte"; import PreviewCard from "./PreviewCard.svelte"; import PreviewEmpty from "./PreviewEmpty.svelte";
// the appview preview serves five rows and sends the rest to the full page const PREVIEW_LIMIT = 5;
let { signedIn = false, notifications: fixtures }: { signedIn?: boolean; notifications?: NotificationSummary[] } = $props();
// stories render this card without the layout, so the context can be absent const context = getNotifications() as Notifications | undefined; const path = "/notifications";
const preview = createLoad(async () => { if (!signedIn) return null; if (fixtures) { return { notifications: fixtures, totalUnread: fixtures.filter((n) => !n.read).length }; } return (await context?.preview(PREVIEW_LIMIT)) ?? null; });
const items = $derived(preview.data?.notifications ?? []); const totalUnread = $derived(preview.data?.totalUnread ?? null);</script>
<PreviewCard title="Notifications" icon={Bell} href={path}> {#snippet action()} <a href={resolve(path as "/")} class="flex items-center gap-1 pr-4 typography-paragraph-small text-foreground-subtle no-underline hover:no-underline" > View all <ArrowRight class="size-3.5" aria-hidden="true" /> </a> {/snippet}
{#if !signedIn} <PreviewEmpty icon={BellOff}> <a href={resolve("/login" as "/")}>Log in</a> to view your inbox </PreviewEmpty> {:else if items.length > 0} <NotificationList notifications={items} border={false} grouped={false} /> {:else if totalUnread === 0} <PreviewEmpty icon={Inbox}> <p>All caught up!</p> </PreviewEmpty> {:else} <PreviewEmpty icon={Bell}> <a href={resolve(path as "/")}>Open your inbox</a> </PreviewEmpty> {/if}</PreviewCard>