From 5f809c4043635619bdd00d29b5e99683c7154d29 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 30 Jul 2026 10:40:18 +0100
Subject: [PATCH] web/components: add components and stories for timeline

also fix up timeline styles

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../profile/FollowCard.stories.svelte         | 45 ++++++++++
 .../lib/components/profile/FollowCard.svelte  | 79 ++++------------
 .../profile/FollowCardContent.svelte          | 65 ++++++++++++++
 .../profile/StringCard.stories.svelte         | 35 ++++++++
 .../lib/components/profile/StringCard.svelte  | 47 ++++------
 .../profile/StringCardContent.svelte          | 34 +++++++
 .../components/profile/tabs/StarredTab.svelte |  7 +-
 .../components/repo/RepoCard.stories.svelte   | 54 +++++++++++
 web/src/lib/components/repo/RepoCard.svelte   | 90 +++++--------------
 .../components/repo/RepoCardContent.svelte    | 75 ++++++++++++++++
 .../lib/components/repo/RepoIndexView.svelte  |  2 +-
 .../repo/issues/IssueCard.stories.svelte      |  1 +
 .../components/repo/issues/IssueCard.svelte   | 52 ++++-------
 .../repo/issues/IssueCardContent.svelte       | 45 ++++++++++
 .../settings/KeyCard.stories.svelte           | 30 +++++++
 .../lib/components/settings/KeyCard.svelte    | 44 ++++-----
 .../components/settings/KeyCardContent.svelte | 38 ++++++++
 .../components/timeline/TimelineCard.svelte   | 17 ++++
 .../TimelineFollowEvent.stories.svelte        | 38 ++++++++
 .../timeline/TimelineFollowEvent.svelte       | 21 +++++
 .../timeline/TimelineRepoEvent.stories.svelte | 56 ++++++++++++
 .../timeline/TimelineRepoEvent.svelte         | 34 +++++++
 .../timeline/TimelineStarEvent.stories.svelte | 41 +++++++++
 .../timeline/TimelineStarEvent.svelte         | 29 ++++++
 web/src/lib/components/timeline/mappers.ts    | 26 ++++++
 web/src/lib/components/ui/Card.stories.svelte | 39 ++++++++
 web/src/lib/components/ui/Card.svelte         | 66 ++++++++++++++
 web/src/routes/timeline/+page.svelte          | 73 +++------------
 web/src/routes/timeline/+page.ts              |  2 -
 29 files changed, 890 insertions(+), 295 deletions(-)
 create mode 100644 web/src/lib/components/profile/FollowCard.stories.svelte
 create mode 100644 web/src/lib/components/profile/FollowCardContent.svelte
 create mode 100644 web/src/lib/components/profile/StringCard.stories.svelte
 create mode 100644 web/src/lib/components/profile/StringCardContent.svelte
 create mode 100644 web/src/lib/components/repo/RepoCard.stories.svelte
 create mode 100644 web/src/lib/components/repo/RepoCardContent.svelte
 create mode 100644 web/src/lib/components/repo/issues/IssueCardContent.svelte
 create mode 100644 web/src/lib/components/settings/KeyCard.stories.svelte
 create mode 100644 web/src/lib/components/settings/KeyCardContent.svelte
 create mode 100644 web/src/lib/components/timeline/TimelineCard.svelte
 create mode 100644 web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte
 create mode 100644 web/src/lib/components/timeline/TimelineFollowEvent.svelte
 create mode 100644 web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte
 create mode 100644 web/src/lib/components/timeline/TimelineRepoEvent.svelte
 create mode 100644 web/src/lib/components/timeline/TimelineStarEvent.stories.svelte
 create mode 100644 web/src/lib/components/timeline/TimelineStarEvent.svelte
 create mode 100644 web/src/lib/components/timeline/mappers.ts
 create mode 100644 web/src/lib/components/ui/Card.stories.svelte
 create mode 100644 web/src/lib/components/ui/Card.svelte

diff --git a/web/src/lib/components/profile/FollowCard.stories.svelte b/web/src/lib/components/profile/FollowCard.stories.svelte
new file mode 100644
index 00000000..58ee65e5
--- /dev/null
+++ b/web/src/lib/components/profile/FollowCard.stories.svelte
@@ -0,0 +1,45 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import FollowCard from "./FollowCard.svelte";
+	import type { PersonData } from "./types";
+
+	const person: PersonData = {
+		did: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+		handle: "joshka.net",
+		description: "Rust, TUIs, and the occasional git plumbing yak-shave.",
+		followers: 128,
+		following: 87,
+		viewerFollowRkey: null,
+		isSelf: true
+	};
+
+	const { Story } = defineMeta({
+		title: "Profile/FollowCard",
+		component: FollowCard,
+		tags: ["autodocs"],
+		argTypes: {
+			border: { control: "boolean" },
+			shadow: { control: "boolean" },
+			background: { control: "boolean" }
+		},
+		args: {
+			person,
+			border: false,
+			shadow: false,
+			background: false
+		}
+	});
+</script>
+
+<!-- default: layout-only (plain), as used on the timeline -->
+<Story name="Plain (timeline)" />
+<Story name="Bordered" args={{ border: true, background: true }} />
+
+<Story name="With follow button">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<FollowCard {...args} person={{ ...person, isSelf: false }} border background />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/profile/FollowCard.svelte b/web/src/lib/components/profile/FollowCard.svelte
index ba5e4df5..b3bec5ff 100644
--- a/web/src/lib/components/profile/FollowCard.svelte
+++ b/web/src/lib/components/profile/FollowCard.svelte
@@ -1,66 +1,21 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
-	import Users from "$icon/users";
-	import FollowButton from "./FollowButton.svelte";
-	import type { FollowChange, PersonData } from "./types";
-	import { createOptimisticCount } from "$lib/optimistic.svelte";
+	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
+	import FollowCardContent from "./FollowCardContent.svelte";
+	import type { PersonData } from "./types";
 
-	let { person }: { person: PersonData } = $props();
-
-	const followerCount = createOptimisticCount({
-		key: () => person.did,
-		loaded: () => person.followers
-	});
-
-	const followed = (change: FollowChange) => followerCount.adjust(change.delta);
+	let {
+		person,
+		border = false,
+		shadow = false,
+		background = false
+	}: {
+		person: PersonData;
+		border?: CardVariants["border"];
+		shadow?: CardVariants["shadow"];
+		background?: CardVariants["background"];
+	} = $props();
 </script>
 
-<div class="flex flex-col gap-4 md:flex-row md:items-center">
-	<div class="flex h-24 w-24 shrink-0 items-center justify-center">
-		<Avatar did={person.did} handle={person.handle} size="size-24" class="p-2" />
-	</div>
-
-	<div class="flex min-w-0 flex-1 flex-col gap-2 md:flex-row md:items-center md:justify-between">
-		<div class="flex min-h-0 flex-1 flex-col justify-around">
-			<a
-				href={resolve(`/${person.handle}` as "/")}
-				class="max-w-full overflow-hidden font-bold text-ellipsis whitespace-nowrap text-foreground-default hover:underline"
-			>
-				{person.handle}
-			</a>
-			{#if person.description}
-				<p class="pb-2 text-sm break-words text-foreground-muted md:pb-2">{person.description}</p>
-			{/if}
-			<div
-				class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-sm text-ellipsis whitespace-nowrap text-foreground-subtle"
-			>
-				<Users class="size-4 shrink-0" />
-				<span
-					><a
-						href={resolve(`/${person.handle}?tab=followers` as "/")}
-						class="hover:text-foreground-default hover:underline">{followerCount.value} followers</a
-					></span
-				>
-				<span class="select-none after:content-['·']"></span>
-				<span
-					><a
-						href={resolve(`/${person.handle}?tab=following` as "/")}
-						class="hover:text-foreground-default hover:underline">{person.following} following</a
-					></span
-				>
-			</div>
-		</div>
-
-		{#if !person.isSelf}
-			<div class="order-last w-full md:order-none md:w-auto md:max-w-32">
-				<FollowButton
-					profileDid={person.did}
-					initialRkey={person.viewerFollowRkey}
-					size="md"
-					onCommit={followed}
-				/>
-			</div>
-		{/if}
-	</div>
-</div>
+<Card {border} {shadow} {background} padding={border || background ? "default" : "none"}>
+	<FollowCardContent {person} />
+</Card>
diff --git a/web/src/lib/components/profile/FollowCardContent.svelte b/web/src/lib/components/profile/FollowCardContent.svelte
new file mode 100644
index 00000000..3d6fc6db
--- /dev/null
+++ b/web/src/lib/components/profile/FollowCardContent.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import Users from "$icon/users";
+	import FollowButton from "./FollowButton.svelte";
+	import type { FollowChange, PersonData } from "./types";
+	import { createOptimisticCount } from "$lib/optimistic.svelte";
+
+	let { person }: { person: PersonData } = $props();
+
+	const followerCount = createOptimisticCount({
+		key: () => person.did,
+		loaded: () => person.followers
+	});
+
+	const followed = (change: FollowChange) => followerCount.adjust(change.delta);
+</script>
+
+<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+	<div class="flex min-w-0 flex-1 items-center gap-4">
+		<div class="flex h-24 w-24 shrink-0 items-center justify-center">
+			<Avatar did={person.did} handle={person.handle} size="size-24" class="p-2" />
+		</div>
+
+		<div class="flex min-w-0 flex-1 flex-col justify-around">
+			<a
+				href={resolve(`/${person.handle}` as "/")}
+				class="max-w-full overflow-hidden font-bold text-ellipsis whitespace-nowrap text-foreground-default hover:underline"
+			>
+				{person.handle}
+			</a>
+			{#if person.description}
+				<p class="pb-2 text-sm break-words text-foreground-muted md:pb-2">{person.description}</p>
+			{/if}
+			<div
+				class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-sm text-ellipsis whitespace-nowrap text-foreground-subtle"
+			>
+				<Users class="size-4 shrink-0" />
+				<span
+					><a
+						href={resolve(`/${person.handle}?tab=followers` as "/")}
+						class="hover:text-foreground-default hover:underline">{followerCount.value} followers</a
+					></span
+				>
+				<span class="select-none after:content-['·']"></span>
+				<span
+					><a
+						href={resolve(`/${person.handle}?tab=following` as "/")}
+						class="hover:text-foreground-default hover:underline">{person.following} following</a
+					></span
+				>
+			</div>
+		</div>
+	</div>
+
+	{#if !person.isSelf}
+		<div class="w-full md:w-auto md:max-w-32">
+			<FollowButton
+				profileDid={person.did}
+				initialRkey={person.viewerFollowRkey}
+				onCommit={followed}
+			/>
+		</div>
+	{/if}
+</div>
diff --git a/web/src/lib/components/profile/StringCard.stories.svelte b/web/src/lib/components/profile/StringCard.stories.svelte
new file mode 100644
index 00000000..d15fc862
--- /dev/null
+++ b/web/src/lib/components/profile/StringCard.stories.svelte
@@ -0,0 +1,35 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import StringCard from "./StringCard.svelte";
+	import type { StringCardData } from "./types";
+
+	const entry: StringCardData = {
+		rkey: "3mrkgcxb4m422",
+		ownerHandle: "tangled.org",
+		filename: "flake.nix",
+		description: "Reproducible dev shell for the appview.",
+		createdAt: "2025-06-01T10:30:00Z",
+		lines: 84
+	};
+
+	const { Story } = defineMeta({
+		title: "Profile/StringCard",
+		component: StringCard,
+		tags: ["autodocs"],
+		argTypes: {
+			border: { control: "boolean" },
+			shadow: { control: "boolean" },
+			background: { control: "boolean" }
+		},
+		args: {
+			entry,
+			border: true,
+			shadow: false,
+			background: true
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Elevated" args={{ shadow: true }} />
+<Story name="Plain" args={{ border: false, background: false }} />
diff --git a/web/src/lib/components/profile/StringCard.svelte b/web/src/lib/components/profile/StringCard.svelte
index 2af23f25..6712aba4 100644
--- a/web/src/lib/components/profile/StringCard.svelte
+++ b/web/src/lib/components/profile/StringCard.svelte
@@ -1,36 +1,21 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import { compactRelativeTime } from "$lib/format";
+	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
+	import StringCardContent from "./StringCardContent.svelte";
 	import type { StringCardData } from "./types";
 
-	let { entry }: { entry: StringCardData } = $props();
+	let {
+		entry,
+		border = true,
+		shadow = false,
+		background = true
+	}: {
+		entry: StringCardData;
+		border?: CardVariants["border"];
+		shadow?: CardVariants["shadow"];
+		background?: CardVariants["background"];
+	} = $props();
 </script>
 
-<div
-	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4 shadow-xs"
->
-	<div class="flex items-center justify-between font-medium text-foreground-default">
-		<div class="mr-2 flex min-w-0 flex-1 items-center">
-			<a
-				href={resolve(`/${entry.ownerHandle}/strings/${entry.rkey}` as "/")}
-				class="min-w-0 truncate font-bold text-foreground-default no-underline hover:underline"
-			>
-				{entry.filename}
-			</a>
-		</div>
-	</div>
-
-	{#if entry.description}
-		<p class="line-clamp-2 text-sm text-foreground-muted">{entry.description}</p>
-	{/if}
-
-	<div
-		class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
-	>
-		<span class="shrink-0"
-			>{entry.lines} line{entry.lines === 1 ? "" : "s"} &middot; {compactRelativeTime(
-				entry.createdAt
-			)}</span
-		>
-	</div>
-</div>
+<Card {border} {shadow} {background}>
+	<StringCardContent {entry} />
+</Card>
diff --git a/web/src/lib/components/profile/StringCardContent.svelte b/web/src/lib/components/profile/StringCardContent.svelte
new file mode 100644
index 00000000..83ab1245
--- /dev/null
+++ b/web/src/lib/components/profile/StringCardContent.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { compactRelativeTime } from "$lib/format";
+	import type { StringCardData } from "./types";
+
+	let { entry }: { entry: StringCardData } = $props();
+</script>
+
+<div class="flex min-h-24 flex-col gap-1">
+	<div class="flex items-center justify-between font-medium text-foreground-default">
+		<div class="mr-2 flex min-w-0 flex-1 items-center">
+			<a
+				href={resolve(`/${entry.ownerHandle}/strings/${entry.rkey}` as "/")}
+				class="min-w-0 truncate font-bold text-foreground-default no-underline hover:underline"
+			>
+				{entry.filename}
+			</a>
+		</div>
+	</div>
+
+	{#if entry.description}
+		<p class="line-clamp-2 text-sm text-foreground-muted">{entry.description}</p>
+	{/if}
+
+	<div
+		class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
+	>
+		<span class="shrink-0"
+			>{entry.lines} line{entry.lines === 1 ? "" : "s"} &middot; {compactRelativeTime(
+				entry.createdAt
+			)}</span
+		>
+	</div>
+</div>
diff --git a/web/src/lib/components/profile/tabs/StarredTab.svelte b/web/src/lib/components/profile/tabs/StarredTab.svelte
index ac2344af..01c9f3c3 100644
--- a/web/src/lib/components/profile/tabs/StarredTab.svelte
+++ b/web/src/lib/components/profile/tabs/StarredTab.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import Section from "$lib/components/ui/Section.svelte";
 	import type { StarData } from "../types";
 
@@ -12,16 +13,14 @@
 		{#if star.kind === "repo"}
 			<RepoCard repo={star.repo} />
 		{:else}
-			<div
-				class="flex items-center gap-2 rounded border border-border-default bg-background-default px-6 py-4 shadow-xs"
-			>
+			<Card shadow={false} class="flex items-center gap-2">
 				<a
 					href={resolve(`/${star.ownerHandle}/strings/${star.rkey}` as "/")}
 					class="truncate font-bold text-foreground-default no-underline hover:underline"
 				>
 					{star.ownerHandle}/{star.rkey}
 				</a>
-			</div>
+			</Card>
 		{/if}
 	{/each}
 </Section>
diff --git a/web/src/lib/components/repo/RepoCard.stories.svelte b/web/src/lib/components/repo/RepoCard.stories.svelte
new file mode 100644
index 00000000..159a6447
--- /dev/null
+++ b/web/src/lib/components/repo/RepoCard.stories.svelte
@@ -0,0 +1,54 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import RepoCard from "./RepoCard.svelte";
+	import type { RepoCardData } from "$lib/components/profile/types";
+
+	const repo: RepoCardData = {
+		name: "core",
+		repoDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+		ownerHandle: "tangled.org",
+		description: "The knot server, appview, and everything that makes tangled tick.",
+		createdAt: "2025-06-01T10:30:00Z",
+		language: "Go",
+		stars: 42,
+		forks: 7,
+		issues: 3,
+		pulls: 5,
+		viewerStarRkey: null
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/RepoCard",
+		component: RepoCard,
+		tags: ["autodocs"],
+		argTypes: {
+			starButton: { control: "boolean" },
+			showOwner: { control: "boolean" },
+			border: { control: "boolean" },
+			shadow: { control: "boolean" },
+			background: { control: "boolean" }
+		},
+		args: {
+			repo,
+			starButton: false,
+			showOwner: true,
+			border: true,
+			shadow: false,
+			background: true
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="No owner" args={{ showOwner: false }} />
+<Story name="Elevated" args={{ shadow: true }} />
+<Story name="Plain (timeline)" args={{ border: false, shadow: false, background: false }} />
+
+<Story name="With star button">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<RepoCard {...args} starButton />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/RepoCard.svelte b/web/src/lib/components/repo/RepoCard.svelte
index a649b70f..07207416 100644
--- a/web/src/lib/components/repo/RepoCard.svelte
+++ b/web/src/lib/components/repo/RepoCard.svelte
@@ -1,77 +1,27 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import BookMarked from "$icon/book-marked";
-	import Star from "$icon/star";
-	import GitFork from "$icon/git-fork";
-	import CircleDot from "$icon/circle-dot";
-	import GitPullRequest from "$icon/git-pull-request";
-	import StarButton from "./StarButton.svelte";
+	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
+	import RepoCardContent from "./RepoCardContent.svelte";
 	import type { RepoCardData } from "$lib/components/profile/types";
+
 	let {
 		repo,
 		starButton = true,
-		showOwner = true
-	}: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean } = $props();
-
-	const stats = $derived(
-		[
-			{ value: repo.stars, Icon: Star },
-			{ value: repo.forks, Icon: GitFork },
-			{ value: repo.issues, Icon: CircleDot },
-			{ value: repo.pulls, Icon: GitPullRequest }
-		].filter((s) => s.value !== undefined)
-	);
+		showOwner = true,
+		border = true,
+		shadow = false,
+		background = true,
+		padding = "default"
+	}: {
+		repo: RepoCardData;
+		starButton?: boolean;
+		showOwner?: boolean;
+		border?: CardVariants["border"];
+		shadow?: CardVariants["shadow"];
+		background?: CardVariants["background"];
+		padding?: CardVariants["padding"];
+	} = $props();
 </script>
 
-<div
-	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4"
->
-	<div class="flex items-start justify-between font-medium text-foreground-default">
-		<div class="mt-1 mr-2 flex min-w-0 flex-1 items-center">
-			<BookMarked class="mr-1.5 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
-			<a
-				href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
-				class="min-w-0 truncate text-foreground-default no-underline hover:underline"
-			>
-				{showOwner ? `${repo.ownerHandle}/${repo.name}` : repo.name}
-			</a>
-		</div>
-		{#if starButton}
-			<div class="ml-4 shrink-0">
-				<StarButton
-					repoDid={repo.repoDid}
-					repoOwnerHandle={repo.ownerHandle}
-					repoName={repo.name}
-					initialCount={repo.stars}
-					initialRkey={repo.viewerStarRkey}
-				/>
-			</div>
-		{/if}
-	</div>
-
-	{#if repo.description}
-		<p class="line-clamp-2 text-sm text-foreground-muted">{repo.description}</p>
-	{/if}
-
-	{#if repo.language !== undefined || stats.length > 0}
-		<div
-			class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
-		>
-			{#if repo.language}
-				<span class="flex items-center gap-2">
-					<span
-						class="inline-block size-2.5 shrink-0 rounded-full"
-						style="background-color: var(--color-background-success-emphasis);"
-					></span>
-					<span>{repo.language}</span>
-				</span>
-			{/if}
-			{#each stats as stat (stat.Icon)}
-				<span class="flex items-center gap-1">
-					<stat.Icon class="size-3.5 shrink-0" aria-hidden="true" />
-					<span>{stat.value}</span>
-				</span>
-			{/each}
-		</div>
-	{/if}
-</div>
+<Card {border} {shadow} {background} {padding}>
+	<RepoCardContent {repo} {starButton} {showOwner} />
+</Card>
diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte
new file mode 100644
index 00000000..743bcb26
--- /dev/null
+++ b/web/src/lib/components/repo/RepoCardContent.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import BookMarked from "$icon/book-marked";
+	import Star from "$icon/star";
+	import GitFork from "$icon/git-fork";
+	import CircleDot from "$icon/circle-dot";
+	import GitPullRequest from "$icon/git-pull-request";
+	import StarButton from "./StarButton.svelte";
+	import type { RepoCardData } from "$lib/components/profile/types";
+	let {
+		repo,
+		starButton = true,
+		showOwner = true
+	}: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean } = $props();
+
+	const stats = $derived(
+		[
+			{ value: repo.stars, Icon: Star },
+			{ value: repo.forks, Icon: GitFork },
+			{ value: repo.issues, Icon: CircleDot },
+			{ value: repo.pulls, Icon: GitPullRequest }
+		].filter((s) => s.value !== undefined)
+	);
+</script>
+
+<div class="flex min-h-24 flex-col gap-1">
+	<div class="flex items-start justify-between font-medium text-foreground-default">
+		<div class="mt-1 mr-2 flex min-w-0 flex-1 items-center">
+			<BookMarked class="mr-1.5 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
+			<a
+				href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
+				class="min-w-0 truncate text-foreground-default no-underline hover:underline"
+			>
+				{showOwner ? `${repo.ownerHandle}/${repo.name}` : repo.name}
+			</a>
+		</div>
+		{#if starButton}
+			<div class="ml-4 shrink-0">
+				<StarButton
+					repoDid={repo.repoDid}
+					repoOwnerHandle={repo.ownerHandle}
+					repoName={repo.name}
+					initialCount={repo.stars}
+					initialRkey={repo.viewerStarRkey}
+				/>
+			</div>
+		{/if}
+	</div>
+
+	{#if repo.description}
+		<p class="line-clamp-2 text-sm text-foreground-muted">{repo.description}</p>
+	{/if}
+
+	{#if repo.language !== undefined || stats.length > 0}
+		<div
+			class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
+		>
+			{#if repo.language}
+				<span class="flex items-center gap-2">
+					<span
+						class="inline-block size-2.5 shrink-0 rounded-full"
+						style="background-color: var(--color-background-success-emphasis);"
+					></span>
+					<span>{repo.language}</span>
+				</span>
+			{/if}
+			{#each stats as stat (stat.Icon)}
+				<span class="flex items-center gap-1">
+					<stat.Icon class="size-3.5 shrink-0" aria-hidden="true" />
+					<span>{stat.value}</span>
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index fd7a3709..bbbcf18b 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -29,7 +29,7 @@
 	const refsCapped = $derived(data.refs.capped);
 </script>
 
-<TabPanel class="relative mx-auto w-full">
+<TabPanel class="relative mx-auto w-full mt-[1px]">
 	{#if data.needsUpgrade}
 		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
 			<div>
diff --git a/web/src/lib/components/repo/issues/IssueCard.stories.svelte b/web/src/lib/components/repo/issues/IssueCard.stories.svelte
index 3a462985..2191e863 100644
--- a/web/src/lib/components/repo/issues/IssueCard.stories.svelte
+++ b/web/src/lib/components/repo/issues/IssueCard.stories.svelte
@@ -29,3 +29,4 @@
 <Story name="Open" />
 <Story name="Closed" args={{ issue: { ...issue, state: "closed" } }} />
 <Story name="No comments" args={{ issue: { ...issue, commentCount: 0 } }} />
+<Story name="Plain" args={{ border: false, shadow: false, background: false }} />
diff --git a/web/src/lib/components/repo/issues/IssueCard.svelte b/web/src/lib/components/repo/issues/IssueCard.svelte
index a3617442..0df24590 100644
--- a/web/src/lib/components/repo/issues/IssueCard.svelte
+++ b/web/src/lib/components/repo/issues/IssueCard.svelte
@@ -1,47 +1,27 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import User from "$lib/components/ui/User.svelte";
-	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
-	import IssueStatePill from "./IssueStatePill.svelte";
+	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
+	import IssueCardContent from "./IssueCardContent.svelte";
 	import type { IssueSummary } from "$lib/components/repo/types";
 
 	interface Props {
 		ownerHandle: string;
 		repoName: string;
 		issue: IssueSummary;
+		border?: CardVariants["border"];
+		shadow?: CardVariants["shadow"];
+		background?: CardVariants["background"];
 	}
 
-	let { ownerHandle, repoName, issue }: Props = $props();
-
-	const href = $derived(
-		resolve(`/${ownerHandle}/${repoName}/issues/${encodeURIComponent(issue.uri)}` as "/")
-	);
+	let {
+		ownerHandle,
+		repoName,
+		issue,
+		border = true,
+		shadow = true,
+		background = true
+	}: Props = $props();
 </script>
 
-<div class="rounded bg-background-default p-4 shadow-xs border border-border-default">
-	<div class="pb-2">
-		<a {href} class="text-foreground-default no-underline">
-			<span class="hover:underline">{issue.title}</span>
-			<span class="text-foreground-subtle">#{issue.rkey}</span>
-		</a>
-	</div>
-
-	<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
-		<IssueStatePill state={issue.state} />
-
-		<span class="ml-1 flex items-center gap-1">
-			<User handle={issue.authorHandle} did={issue.authorDid} />
-		</span>
-
-		<span class="before:mr-1 before:content-['·']">
-			<TimeAgo value={issue.createdAt} />
-		</span>
-
-		<span class="before:mr-1 before:content-['·']">
-			<a {href} class="text-foreground-subtle no-underline hover:underline">
-				{issue.commentCount}
-				{issue.commentCount === 1 ? "comment" : "comments"}
-			</a>
-		</span>
-	</div>
-</div>
+<Card {border} {shadow} {background} padding="sm">
+	<IssueCardContent {ownerHandle} {repoName} {issue} />
+</Card>
diff --git a/web/src/lib/components/repo/issues/IssueCardContent.svelte b/web/src/lib/components/repo/issues/IssueCardContent.svelte
new file mode 100644
index 00000000..1911d052
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueCardContent.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import User from "$lib/components/ui/User.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import IssueStatePill from "./IssueStatePill.svelte";
+	import type { IssueSummary } from "$lib/components/repo/types";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		issue: IssueSummary;
+	}
+
+	let { ownerHandle, repoName, issue }: Props = $props();
+
+	const href = $derived(
+		resolve(`/${ownerHandle}/${repoName}/issues/${encodeURIComponent(issue.uri)}` as "/")
+	);
+</script>
+
+<div class="pb-2">
+	<a {href} class="text-foreground-default no-underline">
+		<span class="hover:underline">{issue.title}</span>
+		<span class="text-foreground-subtle">#{issue.rkey}</span>
+	</a>
+</div>
+
+<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
+	<IssueStatePill state={issue.state} />
+
+	<span class="ml-1 flex items-center gap-1">
+		<User handle={issue.authorHandle} did={issue.authorDid} />
+	</span>
+
+	<span class="before:mr-1 before:content-['·']">
+		<TimeAgo value={issue.createdAt} />
+	</span>
+
+	<span class="before:mr-1 before:content-['·']">
+		<a {href} class="text-foreground-subtle no-underline hover:underline">
+			{issue.commentCount}
+			{issue.commentCount === 1 ? "comment" : "comments"}
+		</a>
+	</span>
+</div>
diff --git a/web/src/lib/components/settings/KeyCard.stories.svelte b/web/src/lib/components/settings/KeyCard.stories.svelte
new file mode 100644
index 00000000..95273e42
--- /dev/null
+++ b/web/src/lib/components/settings/KeyCard.stories.svelte
@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import KeyCard from "./KeyCard.svelte";
+
+	const { Story } = defineMeta({
+		title: "Settings/KeyCard",
+		component: KeyCard,
+		tags: ["autodocs"],
+		argTypes: {
+			deleting: { control: "boolean" },
+			border: { control: "boolean" },
+			shadow: { control: "boolean" },
+			background: { control: "boolean" }
+		},
+		args: {
+			name: "yubikey-5c",
+			fingerprint: "SHA256:9y7Yq0h2s0aVQ3mQ5m8k1J3d4b5c6D7e8F9g0H1i2J",
+			createdAt: "2025-06-01T10:30:00Z",
+			deleting: false,
+			border: true,
+			shadow: false,
+			background: true,
+			onDelete: () => {}
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="No fingerprint" args={{ fingerprint: undefined }} />
+<Story name="Deleting" args={{ deleting: true }} />
diff --git a/web/src/lib/components/settings/KeyCard.svelte b/web/src/lib/components/settings/KeyCard.svelte
index 87a0f7e8..befcc902 100644
--- a/web/src/lib/components/settings/KeyCard.svelte
+++ b/web/src/lib/components/settings/KeyCard.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-	import { relativeTime } from "$lib/format";
-	import Button from "$lib/components/ui/Button.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
-	import KeyIcon from "$icon/key";
-	import Trash2 from "$icon/trash-2";
+	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
+	import KeyCardContent from "./KeyCardContent.svelte";
 
 	interface Props {
 		name: string;
@@ -11,28 +8,23 @@
 		createdAt: string;
 		deleting?: boolean;
 		onDelete: () => void;
+		border?: CardVariants["border"];
+		shadow?: CardVariants["shadow"];
+		background?: CardVariants["background"];
 	}
 
-	let { name, fingerprint, createdAt, deleting = false, onDelete }: Props = $props();
+	let {
+		name,
+		fingerprint,
+		createdAt,
+		deleting = false,
+		onDelete,
+		border = true,
+		shadow = false,
+		background = true
+	}: Props = $props();
 </script>
 
-<div class="flex items-center justify-between gap-2 bg-background-default">
-	<div class="flex min-w-0 flex-col gap-1">
-		<div class="flex items-center gap-2">
-			<KeyIcon class="size-4 shrink-0 text-foreground-muted" aria-hidden="true" />
-			<span class="font-bold text-foreground-default">{name}</span>
-		</div>
-		{#if fingerprint}
-			<span class="truncate font-mono text-sm text-foreground-subtle">{fingerprint}</span>
-		{/if}
-		<span class="text-sm text-foreground-subtle">added {relativeTime(createdAt)}</span>
-	</div>
-	<Button
-		variant="danger"
-		icon={deleting ? Spinner : Trash2}
-		disabled={deleting}
-		onclick={onDelete}
-	>
-		Delete
-	</Button>
-</div>
+<Card {border} {shadow} {background}>
+	<KeyCardContent {name} {fingerprint} {createdAt} {deleting} {onDelete} />
+</Card>
diff --git a/web/src/lib/components/settings/KeyCardContent.svelte b/web/src/lib/components/settings/KeyCardContent.svelte
new file mode 100644
index 00000000..e1e0d2de
--- /dev/null
+++ b/web/src/lib/components/settings/KeyCardContent.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { relativeTime } from "$lib/format";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import KeyIcon from "$icon/key";
+	import Trash2 from "$icon/trash-2";
+
+	interface Props {
+		name: string;
+		fingerprint?: string;
+		createdAt: string;
+		deleting?: boolean;
+		onDelete: () => void;
+	}
+
+	let { name, fingerprint, createdAt, deleting = false, onDelete }: Props = $props();
+</script>
+
+<div class="flex items-center justify-between gap-2">
+	<div class="flex min-w-0 flex-col gap-1">
+		<div class="flex items-center gap-2">
+			<KeyIcon class="size-4 shrink-0 text-foreground-muted" aria-hidden="true" />
+			<span class="font-bold text-foreground-default">{name}</span>
+		</div>
+		{#if fingerprint}
+			<span class="truncate font-mono text-sm text-foreground-subtle">{fingerprint}</span>
+		{/if}
+		<span class="text-sm text-foreground-subtle">added {relativeTime(createdAt)}</span>
+	</div>
+	<Button
+		variant="danger"
+		icon={deleting ? Spinner : Trash2}
+		disabled={deleting}
+		onclick={onDelete}
+	>
+		Delete
+	</Button>
+</div>
diff --git a/web/src/lib/components/timeline/TimelineCard.svelte b/web/src/lib/components/timeline/TimelineCard.svelte
new file mode 100644
index 00000000..d5cf52d6
--- /dev/null
+++ b/web/src/lib/components/timeline/TimelineCard.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Card from "$lib/components/ui/Card.svelte";
+
+	let { header, children }: { header: Snippet; children: Snippet } = $props();
+</script>
+
+<Card border shadow background padding="none">
+	<div
+		class="flex flex-wrap items-center gap-2 border-b border-border-default px-6 py-3 text-sm text-foreground-muted"
+	>
+		{@render header()}
+	</div>
+	<div class="px-6 py-4">
+		{@render children()}
+	</div>
+</Card>
diff --git a/web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte b/web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte
new file mode 100644
index 00000000..ffeed555
--- /dev/null
+++ b/web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte
@@ -0,0 +1,38 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import TimelineFollowEvent from "./TimelineFollowEvent.svelte";
+	import type { FollowEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	const event = {
+		$type: "sh.tangled.feed.getTimeline#followEvent",
+		cid: "bafyreib2",
+		uri: "at://did:plc:oky5czdrnfjpqslsw2a5iclo/sh.tangled.graph.follow/3l",
+		actor: { did: "did:plc:oky5czdrnfjpqslsw2a5iclo", handle: "alice.tngl.sh" },
+		subject: {
+			did: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+			handle: "joshka.net",
+			description: "Rust, TUIs, and the occasional git plumbing yak-shave.",
+			followersCount: 128,
+			followsCount: 87
+		}
+	} as unknown as FollowEvent;
+
+	const { Story } = defineMeta({
+		title: "Timeline/TimelineFollowEvent",
+		component: TimelineFollowEvent,
+		tags: ["autodocs"],
+		args: {
+			event,
+			eventAt: "2025-06-02T09:00:00Z"
+		}
+	});
+</script>
+
+<Story name="Default">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<TimelineFollowEvent {...args} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/timeline/TimelineFollowEvent.svelte b/web/src/lib/components/timeline/TimelineFollowEvent.svelte
new file mode 100644
index 00000000..54df1f63
--- /dev/null
+++ b/web/src/lib/components/timeline/TimelineFollowEvent.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import User from "$lib/components/ui/User.svelte";
+	import FollowCard from "$lib/components/profile/FollowCard.svelte";
+	import TimelineCard from "./TimelineCard.svelte";
+	import { relativeTime } from "$lib/format";
+	import { toPerson } from "./mappers";
+	import type { FollowEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	let { event, eventAt }: { event: FollowEvent; eventAt: string } = $props();
+</script>
+
+<TimelineCard>
+	{#snippet header()}
+		<User handle={event.actor.handle} did={event.actor.did} />
+		<span>followed</span>
+		<User handle={event.subject.handle} did={event.subject.did} />
+		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
+	{/snippet}
+
+	<FollowCard person={toPerson(event.subject)} border={false} shadow={false} background={false} />
+</TimelineCard>
diff --git a/web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte b/web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte
new file mode 100644
index 00000000..2f81839e
--- /dev/null
+++ b/web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte
@@ -0,0 +1,56 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import TimelineRepoEvent from "./TimelineRepoEvent.svelte";
+	import type { RepoEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	const owner = { did: "did:plc:3p7ejjxnufohsygt5vbyxb2i", handle: "tangled.org" };
+
+	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 created = {
+		$type: "sh.tangled.feed.getTimeline#repoEvent",
+		cid: "bafyreib2",
+		uri: "at://did:plc:3p7ejjxnufohsygt5vbyxb2i/sh.tangled.repo/core",
+		repo
+	} as unknown as RepoEvent;
+
+	const forked = {
+		...created,
+		repo: { ...repo, slug: "core-fork" },
+		source: repo
+	} as unknown as RepoEvent;
+
+	const { Story } = defineMeta({
+		title: "Timeline/TimelineRepoEvent",
+		component: TimelineRepoEvent,
+		tags: ["autodocs"],
+		args: {
+			event: created,
+			eventAt: "2025-06-02T09:00:00Z"
+		}
+	});
+</script>
+
+<Story name="Created">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<TimelineRepoEvent {...args} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<Story name="Forked">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<TimelineRepoEvent {...args} event={forked} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/timeline/TimelineRepoEvent.svelte b/web/src/lib/components/timeline/TimelineRepoEvent.svelte
new file mode 100644
index 00000000..fb35ab83
--- /dev/null
+++ b/web/src/lib/components/timeline/TimelineRepoEvent.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import User from "$lib/components/ui/User.svelte";
+	import RepoCard from "$lib/components/repo/RepoCard.svelte";
+	import TimelineCard from "./TimelineCard.svelte";
+	import { relativeTime } from "$lib/format";
+	import { toRepoCard, repoHref } from "./mappers";
+	import type { RepoEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	let { event, eventAt }: { event: RepoEvent; eventAt: string } = $props();
+</script>
+
+<TimelineCard>
+	{#snippet header()}
+		<User handle={event.repo.owner.handle} did={event.repo.owner.did} />
+		{#if event.source}
+			<span>forked</span>
+			<a href={repoHref(event.source)} class="text-foreground-default"
+				>{event.source.owner.handle}/{event.source.slug}</a
+			>
+			<span>to {event.repo.slug}</span>
+		{:else}
+			<span>created {event.repo.slug}</span>
+		{/if}
+		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
+	{/snippet}
+
+	<RepoCard
+		repo={toRepoCard(event.repo)}
+		border={false}
+		shadow={false}
+		background={false}
+		padding="none"
+	/>
+</TimelineCard>
diff --git a/web/src/lib/components/timeline/TimelineStarEvent.stories.svelte b/web/src/lib/components/timeline/TimelineStarEvent.stories.svelte
new file mode 100644
index 00000000..8264c528
--- /dev/null
+++ b/web/src/lib/components/timeline/TimelineStarEvent.stories.svelte
@@ -0,0 +1,41 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import TimelineStarEvent from "./TimelineStarEvent.svelte";
+	import type { StarEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	const owner = { did: "did:plc:3p7ejjxnufohsygt5vbyxb2i", handle: "tangled.org" };
+
+	const event = {
+		$type: "sh.tangled.feed.getTimeline#starEvent",
+		cid: "bafyreib2",
+		uri: "at://did:plc:oky5czdrnfjpqslsw2a5iclo/sh.tangled.feed.star/3l",
+		actor: { did: "did:plc:oky5czdrnfjpqslsw2a5iclo", handle: "alice.tngl.sh" },
+		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
+		}
+	} as unknown as StarEvent;
+
+	const { Story } = defineMeta({
+		title: "Timeline/TimelineStarEvent",
+		component: TimelineStarEvent,
+		tags: ["autodocs"],
+		args: {
+			event,
+			eventAt: "2025-06-02T09:00:00Z"
+		}
+	});
+</script>
+
+<Story name="Default">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<TimelineStarEvent {...args} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/timeline/TimelineStarEvent.svelte b/web/src/lib/components/timeline/TimelineStarEvent.svelte
new file mode 100644
index 00000000..66efda70
--- /dev/null
+++ b/web/src/lib/components/timeline/TimelineStarEvent.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import User from "$lib/components/ui/User.svelte";
+	import RepoCard from "$lib/components/repo/RepoCard.svelte";
+	import TimelineCard from "./TimelineCard.svelte";
+	import { relativeTime } from "$lib/format";
+	import { toRepoCard, repoHref } from "./mappers";
+	import type { StarEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+
+	let { event, eventAt }: { event: StarEvent; eventAt: string } = $props();
+</script>
+
+<TimelineCard>
+	{#snippet header()}
+		<User handle={event.actor.handle} did={event.actor.did} />
+		<span>starred</span>
+		<a href={repoHref(event.repo)} class="text-foreground-default"
+			>{event.repo.owner.handle}/{event.repo.slug}</a
+		>
+		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
+	{/snippet}
+
+	<RepoCard
+		repo={toRepoCard(event.repo)}
+		border={false}
+		shadow={false}
+		background={false}
+		padding="none"
+	/>
+</TimelineCard>
diff --git a/web/src/lib/components/timeline/mappers.ts b/web/src/lib/components/timeline/mappers.ts
new file mode 100644
index 00000000..ead8b47d
--- /dev/null
+++ b/web/src/lib/components/timeline/mappers.ts
@@ -0,0 +1,26 @@
+import { resolve } from "$app/paths";
+import { rkeyFromUri } from "$lib/api/uri";
+import type { RepoCardData, PersonData } from "$lib/components/profile/types";
+import type * as ShTangledRepoDefs from "$lib/api/lexicons/types/sh/tangled/repo/defs";
+import type * as ShTangledActorDefs from "$lib/api/lexicons/types/sh/tangled/actor/defs";
+
+export const toRepoCard = (repo: ShTangledRepoDefs.RepoViewBasic): RepoCardData => ({
+	name: repo.slug,
+	repoDid: repo.did,
+	ownerHandle: repo.owner.handle,
+	description: repo.description,
+	createdAt: repo.createdAt,
+	stars: repo.starCount,
+	viewerStarRkey: repo.viewer?.star ? rkeyFromUri(repo.viewer.star) : null
+});
+
+export const toPerson = (profile: ShTangledActorDefs.ProfileViewDetailed): PersonData => ({
+	did: profile.did,
+	handle: profile.handle,
+	followers: profile.followersCount,
+	following: profile.followsCount,
+	viewerFollowRkey: profile.viewer?.following ? rkeyFromUri(profile.viewer.following) : null
+});
+
+export const repoHref = (repo: ShTangledRepoDefs.RepoViewBasic) =>
+	resolve(`/${repo.owner.handle}/${repo.slug}` as "/");
diff --git a/web/src/lib/components/ui/Card.stories.svelte b/web/src/lib/components/ui/Card.stories.svelte
new file mode 100644
index 00000000..b131d615
--- /dev/null
+++ b/web/src/lib/components/ui/Card.stories.svelte
@@ -0,0 +1,39 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Card from "./Card.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Card",
+		component: Card,
+		tags: ["autodocs"],
+		argTypes: {
+			border: { control: "boolean" },
+			shadow: { control: "boolean" },
+			background: { control: "boolean" },
+			padding: { control: { type: "select" }, options: ["default", "sm", "none"] }
+		},
+		args: {
+			border: true,
+			shadow: false,
+			background: true,
+			padding: "default"
+		}
+	});
+</script>
+
+<!-- Card content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">Card content</Story>
+<Story name="Elevated" args={{ shadow: true }}>Bordered card with shadow</Story>
+<Story name="Plain" args={{ border: false, background: false, shadow: false, padding: "none" }}>
+	Borderless, shadowless, background-less
+</Story>
+
+<Story name="Variants">
+	<div class="flex flex-col gap-4">
+		<Card border shadow={false} background>Bordered, no shadow (profile / settings)</Card>
+		<Card border shadow background>Bordered + shadow (elevated)</Card>
+		<Card border={false} shadow={false} background={false} padding="none"
+			>Plain (timeline)</Card
+		>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Card.svelte b/web/src/lib/components/ui/Card.svelte
new file mode 100644
index 00000000..e11d37f0
--- /dev/null
+++ b/web/src/lib/components/ui/Card.svelte
@@ -0,0 +1,66 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const card = tv({
+		base: "rounded",
+		variants: {
+			border: {
+				true: "border border-border-default",
+				false: ""
+			},
+			shadow: {
+				true: "shadow-xs",
+				false: ""
+			},
+			background: {
+				true: "bg-background-default",
+				false: ""
+			},
+			padding: {
+				default: "px-6 py-4",
+				sm: "p-4",
+				none: ""
+			}
+		},
+		defaultVariants: {
+			border: true,
+			shadow: false,
+			background: true,
+			padding: "default"
+		}
+	});
+
+	export type CardVariants = VariantProps<typeof card>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
+		border?: CardVariants["border"];
+		shadow?: CardVariants["shadow"];
+		background?: CardVariants["background"];
+		padding?: CardVariants["padding"];
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		border = true,
+		shadow = false,
+		background = true,
+		padding = "default",
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(card({ border, shadow, background, padding, class: className }));
+</script>
+
+<div class={classes} {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
diff --git a/web/src/routes/timeline/+page.svelte b/web/src/routes/timeline/+page.svelte
index 4cf45608..14b9507b 100644
--- a/web/src/routes/timeline/+page.svelte
+++ b/web/src/routes/timeline/+page.svelte
@@ -4,39 +4,12 @@
 	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 User from "$lib/components/ui/User.svelte";
-	import RepoCard from "$lib/components/repo/RepoCard.svelte";
-	import FollowCard from "$lib/components/profile/FollowCard.svelte";
-	import { rkeyFromUri } from "$lib/api/uri";
-	import { relativeTime } from "$lib/format";
-	import type { RepoCardData, PersonData } from "$lib/components/profile/types";
-	import type * as ShTangledRepoDefs from "$lib/api/lexicons/types/sh/tangled/repo/defs";
-	import type * as ShTangledActorDefs from "$lib/api/lexicons/types/sh/tangled/actor/defs";
+	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 type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
-
-	const toRepoCard = (repo: ShTangledRepoDefs.RepoViewBasic): RepoCardData => ({
-		name: repo.slug,
-		repoDid: repo.did,
-		ownerHandle: repo.owner.handle,
-		description: repo.description,
-		createdAt: repo.createdAt,
-		stars: repo.starCount,
-        viewerStarRkey: repo.viewer?.star ? rkeyFromUri(repo.viewer.star) : null
-	});
-
-	const toPerson = (profile: ShTangledActorDefs.ProfileViewDetailed): PersonData => ({
-		did: profile.did,
-		handle: profile.handle,
-		avatar: profile.avatar,
-		followers: profile.followersCount,
-		following: profile.followsCount,
-		viewerFollowRkey: profile.viewer?.following ? rkeyFromUri(profile.viewer.following) : null
-	});
-
-	const repoHref = (repo: ShTangledRepoDefs.RepoViewBasic) =>
-		resolve(`/${repo.owner.handle}/${repo.slug}` as "/");
 </script>
 
 <svelte:head>
@@ -65,39 +38,13 @@
 
 	{#each data.feed as item (item.event.uri)}
 		{@const event = item.event}
-		<div class="flex flex-col gap-2">
-			<div class="flex flex-wrap items-center gap-2 text-sm text-foreground-muted">
-				{#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
-					<User handle={event.repo.owner.handle} src={event.repo.owner.avatar} size="sm" />
-					{#if event.source}
-						<span>forked</span>
-						<a href={repoHref(event.source)} class="text-foreground-default"
-							>{event.source.owner.handle}/{event.source.slug}</a
-						>
-						<span>to {event.repo.slug}</span>
-					{:else}
-						<span>created {event.repo.slug}</span>
-					{/if}
-				{:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
-					<User handle={event.actor.handle} src={event.actor.avatar} size="sm" />
-					<span>starred</span>
-					<a href={repoHref(event.repo)} class="text-foreground-default"
-						>{event.repo.owner.handle}/{event.repo.slug}</a
-					>
-				{:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
-					<User handle={event.actor.handle} src={event.actor.avatar} size="sm" />
-					<span>followed</span>
-					<User handle={event.subject.handle} src={event.subject.avatar} size="sm" />
-				{/if}
-				<span class="text-foreground-subtle">{relativeTime(item.eventAt)}</span>
-			</div>
-
-			{#if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
-				<FollowCard person={toPerson(event.subject)} />
-			{:else}
-				<RepoCard repo={toRepoCard(event.repo)} />
-			{/if}
-		</div>
+		{#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."}
diff --git a/web/src/routes/timeline/+page.ts b/web/src/routes/timeline/+page.ts
index db6d7299..2cdea02d 100644
--- a/web/src/routes/timeline/+page.ts
+++ b/web/src/routes/timeline/+page.ts
@@ -11,11 +11,9 @@ export const load: PageLoad = async (event) => {
 	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
 	const viewer = parent.auth?.did;
 
-	// the following feed needs a viewer to resolve the followed set; bobbin 400s without one
 	const followingOnly = event.url.searchParams.get("following") === "true" && viewer !== undefined;
 
 	try {
-		// output key is `feed`, not `items`, so the pagination.ts helpers don't apply
 		const { feed } = await jsonGet<ShTangledFeedGetTimeline.$output>(
 			ctx,
 			"sh.tangled.feed.getTimeline",
-- 
2.51.2