This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import GalleryVertical from "$icon/gallery-vertical";
4 import Button from "$lib/components/ui/Button.svelte";
5 import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
6 import EmptyState from "$lib/components/ui/EmptyState.svelte";
7 import TimelineRepoEvent from "$lib/components/timeline/TimelineRepoEvent.svelte";
8 import TimelineStarEvent from "$lib/components/timeline/TimelineStarEvent.svelte";
9 import TimelineFollowEvent from "$lib/components/timeline/TimelineFollowEvent.svelte";
10 import type { PageData } from "./$types";
11
12 let { data }: { data: PageData } = $props();
13</script>
14
15<svelte:head>
16 <title>Timeline · Tangled</title>
17</svelte:head>
18
19<section class="mx-auto flex w-full max-w-screen-md flex-col gap-4 px-6 py-8">
20 <div class="flex items-center justify-between">
21 <h1 class="flex items-center gap-2 text-2xl font-semibold">
22 <GalleryVertical class="size-5 text-foreground-subtle" aria-hidden="true" />
23 Timeline
24 </h1>
25 {#if data.signedIn}
26 <ButtonGroup>
27 <Button
28 href={resolve("/timeline" as "/")}
29 variant={data.followingOnly ? "ghost" : "default"}>Global</Button
30 >
31 <Button
32 href={resolve("/timeline?following=true" as "/")}
33 variant={data.followingOnly ? "default" : "ghost"}>Following</Button
34 >
35 </ButtonGroup>
36 {/if}
37 </div>
38
39 {#each data.feed as item (item.event.uri)}
40 {@const event = item.event}
41 {#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
42 <TimelineRepoEvent {event} eventAt={item.eventAt} />
43 {:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
44 <TimelineStarEvent {event} eventAt={item.eventAt} />
45 {:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
46 <TimelineFollowEvent {event} eventAt={item.eventAt} />
47 {/if}
48 {:else}
49 <EmptyState
50 message={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
51 />
52 {/each}
53</section>