From a7da8d060840c80a1ddf23cf6ee07b0c3f7b0e80 Mon Sep 17 00:00:00 2001
From: Seongmin Lee <git@boltless.me>
Date: Mon, 27 Jul 2026 08:54:02 +0000
Subject: [PATCH] web: timeline

Signed-off-by: Seongmin Lee <git@boltless.me>
---
 web/src/routes/timeline/+page.svelte | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/routes/timeline/+page.ts | 28 ++++++++++++++++++++++++++++
 2 file(s) changed, 134 insertion(s)(+), 0 deletion(s)(-)

diff --git a/web/src/routes/timeline/+page.svelte b/web/src/routes/timeline/+page.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/routes/timeline/+page.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	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 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 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>
+	<title>Timeline &middot; Tangled</title>
+</svelte:head>
+
+<section class="mx-auto flex w-full max-w-screen-md flex-col gap-4 px-6 py-8">
+	<div class="flex items-center justify-between">
+		<h1 class="flex items-center gap-2 text-2xl font-semibold">
+			<GalleryVertical class="size-5 text-foreground-subtle" aria-hidden="true" />
+			Timeline
+		</h1>
+		{#if data.signedIn}
+			<ButtonGroup>
+				<Button
+					href={resolve("/timeline" as "/")}
+					variant={data.followingOnly ? "ghost" : "default"}>Global</Button
+				>
+				<Button
+					href={resolve("/timeline?following=true" as "/")}
+					variant={data.followingOnly ? "default" : "ghost"}>Following</Button
+				>
+			</ButtonGroup>
+		{/if}
+	</div>
+
+	{#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>
+	{:else}
+		<EmptyState
+			message={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
+		/>
+	{/each}
+</section>
diff --git a/web/src/routes/timeline/+page.ts b/web/src/routes/timeline/+page.ts
new file mode 100644
--- /dev/null
+++ b/web/src/routes/timeline/+page.ts
@@ -0,0 +1,28 @@
+import { createBobbinClient } from "$lib/api/client";
+import { jsonGet } from "$lib/api/_request";
+import { toHttpError } from "$lib/api/load";
+import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
+import type { PageLoad } from "./$types";
+
+const PAGE_LIMIT = 50;
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	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",
+			{ viewer, followingOnly, limit: PAGE_LIMIT }
+		);
+		return { feed, followingOnly, signedIn: viewer !== undefined };
+	} catch (cause) {
+		toHttpError(cause, "Could not load timeline");
+	}
+};

--
tangled.sh