From 032d2342eeb2be491d3c8623d62f746df63cd49f Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 31 Jul 2026 10:23:40 +0100
Subject: [PATCH] web/routes: implement starred-by page

TODO: paginate, we probably want page+offset style pagination on bobbin
instead of cursor style pagination.

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../lib/components/repo/RepoIndexView.svelte  |  4 +-
 web/src/lib/components/repo/StarredBy.svelte  | 16 ++++++++
 .../components/repo/StarredByContent.svelte   | 30 ++++++++++++++
 .../routes/[handle]/[repo]/+layout@.svelte    |  4 +-
 .../routes/[handle]/[repo]/stars/+page.svelte | 20 ++++++++++
 web/src/routes/[handle]/[repo]/stars/+page.ts | 40 +++++++++++++++++++
 6 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 web/src/lib/components/repo/StarredBy.svelte
 create mode 100644 web/src/lib/components/repo/StarredByContent.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/stars/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/stars/+page.ts

diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index a17372534..606b239a6 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -31,8 +31,8 @@
 	const refsCapped = $derived(data.refs.capped);
 </script>
 
-<TabPanel>
-	{#if data.availability === "needs-upgrade"}
+<TabPanel class="relative mx-auto w-full">
+ 	{#if data.needsUpgrade}
 		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
 			<div>
 				<span class="flex items-center justify-center gap-2">
diff --git a/web/src/lib/components/repo/StarredBy.svelte b/web/src/lib/components/repo/StarredBy.svelte
new file mode 100644
index 000000000..0f9149155
--- /dev/null
+++ b/web/src/lib/components/repo/StarredBy.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Card from "$lib/components/ui/Card.svelte";
+	import StarredByContent from "./StarredByContent.svelte";
+
+	interface Props {
+		did: string;
+		handle: string;
+		createdAt: string;
+	}
+
+	let { did, handle, createdAt }: Props = $props();
+</script>
+
+<Card border shadow={false} padding="small">
+	<StarredByContent {did} {handle} {createdAt} />
+</Card>
diff --git a/web/src/lib/components/repo/StarredByContent.svelte b/web/src/lib/components/repo/StarredByContent.svelte
new file mode 100644
index 000000000..5c9996201
--- /dev/null
+++ b/web/src/lib/components/repo/StarredByContent.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+
+	interface Props {
+		did: string;
+		handle: string;
+		createdAt: string;
+	}
+
+	let { did, handle, createdAt }: Props = $props();
+</script>
+
+<div class="flex items-center gap-3">
+	<div class="flex size-10 shrink-0 items-center justify-center">
+		<Avatar {did} {handle} size="full" />
+	</div>
+	<div class="min-w-0 flex-1">
+		<a
+			href={resolve(`/${handle}` as "/")}
+			class="block truncate text-foreground-default no-underline hover:underline"
+		>
+			{handle}
+		</a>
+		<p class="text-sm text-foreground-muted">
+			Starred <TimeAgo value={createdAt} variant="full" />
+		</p>
+	</div>
+</div>
diff --git a/web/src/routes/[handle]/[repo]/+layout@.svelte b/web/src/routes/[handle]/[repo]/+layout@.svelte
index c375954ce..bbd51eb1b 100644
--- a/web/src/routes/[handle]/[repo]/+layout@.svelte
+++ b/web/src/routes/[handle]/[repo]/+layout@.svelte
@@ -13,7 +13,9 @@
 
 	const activeTab = $derived.by(() => {
 		const segment = page.route.id?.split("/")[3] ?? "";
-		return ["issues", "pulls", "pipelines", "settings"].includes(segment) ? segment : "overview";
+		return ["issues", "pulls", "pipelines", "settings"].includes(segment)
+			? segment
+			: "overview";
 	});
 
 	// the pull page runs a discussion rail down the full page height, so it places
diff --git a/web/src/routes/[handle]/[repo]/stars/+page.svelte b/web/src/routes/[handle]/[repo]/stars/+page.svelte
new file mode 100644
index 000000000..38df14b27
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/stars/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import StarredBy from "$lib/components/repo/StarredBy.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+
+	let { data } = $props();
+</script>
+
+<TabPanel class="flex flex-col gap-4">
+	<h2 class="typography-heading-4">Starred by</h2>
+
+	{#if data.starrers.length === 0}
+		<p class="text-foreground-muted">No stars yet.</p>
+	{:else}
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+			{#each data.starrers as starrer (starrer.did)}
+				<StarredBy did={starrer.did} handle={starrer.handle} createdAt={starrer.createdAt} />
+			{/each}
+		</div>
+	{/if}
+</TabPanel>
diff --git a/web/src/routes/[handle]/[repo]/stars/+page.ts b/web/src/routes/[handle]/[repo]/stars/+page.ts
new file mode 100644
index 000000000..e510df10f
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/stars/+page.ts
@@ -0,0 +1,40 @@
+import { createBobbinClient } from "$lib/api/client";
+import { IdentityCache } from "$lib/api/identity";
+import { listStars } from "$lib/api/records";
+import { didFromUri } from "$lib/api/uri";
+import type { PageLoad } from "./$types";
+
+const LIMIT = 50;
+
+export interface Starrer {
+	did: string;
+	handle: string;
+	createdAt: string;
+}
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	const repoDid = parent.repo.repoDid;
+
+	// no repoDid means bobbin never indexed this repo, so there is nothing to list
+	if (!repoDid) {
+		return { starrers: [] as Starrer[] };
+	}
+
+	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
+
+	// TODO: paginate
+	const result = await listStars(ctx, repoDid, { limit: LIMIT }).catch(() => null);
+	const items = result?.items ?? [];
+
+	const identity = new IdentityCache(ctx);
+	const starrers: Starrer[] = await Promise.all(
+		items.map(async (item): Promise<Starrer> => {
+			const did = didFromUri(item.uri);
+			const doc = await identity.resolve(did).catch(() => null);
+			return { did, handle: doc?.handle ?? did, createdAt: item.value.createdAt };
+		})
+	);
+
+	return { starrers };
+};
-- 
2.51.2