1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script lang="ts">
import History from "$icon/history";
import RouteOff from "$icon/route-off";
import EmptyState from "#lib/components/ui/EmptyState.svelte";
import Pending from "#lib/components/ui/Pending.svelte";
import PreviewCard from "#lib/components/timeline/PreviewCard.svelte";
import PreviewEmpty from "#lib/components/timeline/PreviewEmpty.svelte";
import RecentItem from "#lib/components/timeline/RecentItem.svelte";
import { recentPath } from "#lib/components/timeline/recents.ts";
import timelineRecentspreviewSkeletonFixture from "#lib/bones/timeline-recentspreview--skeleton-fixture.bones.json";
import Bones from "#lib/components/ui/Bones.svelte";
import type { RecentItemData } from "#lib/components/timeline/types.ts";
let { items }: { items?: RecentItemData[] | Promise<RecentItemData[]> } = $props();
</script>
{#snippet content(resolvedItems: RecentItemData[])}
{#if resolvedItems.length > 0}
<div class="relative flex flex-col p-2xs">
<div class="absolute inset-y-0 z-1 w-px bg-border-default" style="left: 1.375rem"></div>
{#each resolvedItems as item (recentPath(item))}
<RecentItem {item} />
{/each}
</div>
{:else}
<PreviewEmpty icon={RouteOff}>
<EmptyState size="inline" message="No recent pages yet." class="justify-center" />
</PreviewEmpty>
{/if}
{/snippet}
<PreviewCard title="Recents" icon={History}>
{#if items === undefined}
<Bones capture={timelineRecentspreviewSkeletonFixture} />
{:else if items instanceof Promise}
<Pending>
{#snippet skeleton()}
<Bones capture={timelineRecentspreviewSkeletonFixture} />
{/snippet}
{@const resolved = await items}
{@render content(resolved)}
</Pending>
{:else}
{@render content(items)}
{/if}
</PreviewCard>