From 2627bbabce18141b60a694aaeda99909287652d7 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 30 Jul 2026 11:44:21 +0100
Subject: [PATCH] web/components: add timeline component

just a list of timeline events, but with the vertical line passing
through them. extra sauce

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../timeline/Timeline.stories.svelte          | 83 +++++++++++++++++++
 .../lib/components/timeline/Timeline.svelte   | 35 ++++++++
 web/src/routes/timeline/+page.svelte          | 23 ++---
 3 files changed, 123 insertions(+), 18 deletions(-)
 create mode 100644 web/src/lib/components/timeline/Timeline.stories.svelte
 create mode 100644 web/src/lib/components/timeline/Timeline.svelte

diff --git a/web/src/lib/components/timeline/Timeline.stories.svelte b/web/src/lib/components/timeline/Timeline.stories.svelte
new file mode 100644
index 00000000..a2f3c6a0
--- /dev/null
+++ b/web/src/lib/components/timeline/Timeline.stories.svelte
@@ -0,0 +1,83 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import Timeline from "./Timeline.svelte";
+	import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	const owner = { did: "did:plc:3p7ejjxnufohsygt5vbyxb2i", handle: "tangled.org" };
+	const alice = { did: "did:plc:oky5czdrnfjpqslsw2a5iclo", handle: "alice.tngl.sh" };
+
+	const repo = {
+		did: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+		slug: "core",
+		owner,
+		createdAt: "2025-06-01T10:30:00Z",
+		description: "The knot server, appview, and everything that makes tangled tick.",
+		starCount: 42
+	};
+
+	const feed = [
+		{
+			event: {
+				$type: "sh.tangled.feed.getTimeline#repoEvent",
+				cid: "bafyreib1",
+				uri: "at://did:plc:3p7ejjxnufohsygt5vbyxb2i/sh.tangled.repo/core",
+				repo
+			},
+			eventAt: "2025-06-04T09:00:00Z"
+		},
+		{
+			event: {
+				$type: "sh.tangled.feed.getTimeline#starEvent",
+				cid: "bafyreib2",
+				uri: "at://did:plc:oky5czdrnfjpqslsw2a5iclo/sh.tangled.feed.star/3l",
+				actor: alice,
+				repo
+			},
+			eventAt: "2025-06-03T18:20:00Z"
+		},
+		{
+			event: {
+				$type: "sh.tangled.feed.getTimeline#followEvent",
+				cid: "bafyreib3",
+				uri: "at://did:plc:oky5czdrnfjpqslsw2a5iclo/sh.tangled.graph.follow/3l",
+				actor: alice,
+				subject: {
+					did: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+					handle: "joshka.net",
+					description: "Rust, TUIs, and the occasional git plumbing yak-shave.",
+					followersCount: 128,
+					followsCount: 87
+				}
+			},
+			eventAt: "2025-06-02T12:00:00Z"
+		},
+		{
+			event: {
+				$type: "sh.tangled.feed.getTimeline#repoEvent",
+				cid: "bafyreib4",
+				uri: "at://did:plc:3p7ejjxnufohsygt5vbyxb2i/sh.tangled.repo/core-fork",
+				repo: { ...repo, slug: "core-fork" },
+				source: repo
+			},
+			eventAt: "2025-06-01T08:00:00Z"
+		}
+	] as unknown as ShTangledFeedGetTimeline.$output["feed"];
+
+	const { Story } = defineMeta({
+		title: "Timeline/Timeline",
+		component: Timeline,
+		tags: ["autodocs"],
+		args: { feed }
+	});
+</script>
+
+<Story name="Default">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<Timeline {...args} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<Story name="Empty" args={{ feed: [], emptyMessage: "Nothing here yet." }} />
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
new file mode 100644
index 00000000..68288acb
--- /dev/null
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import TimelineRepoEvent from "./TimelineRepoEvent.svelte";
+	import TimelineStarEvent from "./TimelineStarEvent.svelte";
+	import TimelineFollowEvent from "./TimelineFollowEvent.svelte";
+	import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	let {
+		feed,
+		emptyMessage = "Nothing here yet."
+	}: { feed: ShTangledFeedGetTimeline.$output["feed"]; emptyMessage?: string } = $props();
+</script>
+
+{#if feed.length > 0}
+	<div class="flex flex-col gap-4">
+		{#each feed as item, i (item.event.uri)}
+			{@const event = item.event}
+			<div class="relative">
+				<!-- connector bridging the gap up to the previous card -->
+				{#if i !== 0}
+					<div class="absolute -top-4 left-8 h-4 w-0.5 bg-border-default" aria-hidden="true"></div>
+				{/if}
+				{#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
+					<TimelineRepoEvent {event} eventAt={item.eventAt} />
+				{:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
+					<TimelineStarEvent {event} eventAt={item.eventAt} />
+				{:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
+					<TimelineFollowEvent {event} eventAt={item.eventAt} />
+				{/if}
+			</div>
+		{/each}
+	</div>
+{:else}
+	<EmptyState message={emptyMessage} />
+{/if}
diff --git a/web/src/routes/timeline/+page.svelte b/web/src/routes/timeline/+page.svelte
index 14b9507b..a045354d 100644
--- a/web/src/routes/timeline/+page.svelte
+++ b/web/src/routes/timeline/+page.svelte
@@ -3,10 +3,7 @@
 	import GalleryVertical from "$icon/gallery-vertical";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
-	import TimelineRepoEvent from "$lib/components/timeline/TimelineRepoEvent.svelte";
-	import TimelineStarEvent from "$lib/components/timeline/TimelineStarEvent.svelte";
-	import TimelineFollowEvent from "$lib/components/timeline/TimelineFollowEvent.svelte";
+	import Timeline from "$lib/components/timeline/Timeline.svelte";
 	import type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
@@ -36,18 +33,8 @@
 		{/if}
 	</div>
 
-	{#each data.feed as item (item.event.uri)}
-		{@const event = item.event}
-		{#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
-			<TimelineRepoEvent {event} eventAt={item.eventAt} />
-		{:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
-			<TimelineStarEvent {event} eventAt={item.eventAt} />
-		{:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
-			<TimelineFollowEvent {event} eventAt={item.eventAt} />
-		{/if}
-	{:else}
-		<EmptyState
-			message={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
-		/>
-	{/each}
+	<Timeline
+		feed={data.feed ?? []}
+		emptyMessage={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
+	/>
 </section>
-- 
2.51.2