From fa3b63322733bc7d77695e727728be43033fc5f1 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Tue, 4 Aug 2026 17:47:56 +0300
Subject: [PATCH] web/components: add NetworkVouches component

Signed-off-by: oppiliappan <me@oppi.li>
---
 bobbin/crates/resolver/src/legacy_upgrade.rs  |  1 -
 .../profile/AvatarList.stories.svelte         | 46 +++++++++++++++
 .../lib/components/profile/AvatarList.svelte  | 43 ++++++++++++++
 .../profile/NetworkVouches.stories.svelte     | 44 ++++++++++++++
 .../components/profile/NetworkVouches.svelte  | 59 +++++++++++++++++++
 .../testing/MockAuthProvider.svelte           | 31 ++++++----
 6 files changed, 213 insertions(+), 11 deletions(-)
 create mode 100644 web/src/lib/components/profile/AvatarList.stories.svelte
 create mode 100644 web/src/lib/components/profile/AvatarList.svelte
 create mode 100644 web/src/lib/components/profile/NetworkVouches.stories.svelte
 create mode 100644 web/src/lib/components/profile/NetworkVouches.svelte

diff --git a/bobbin/crates/resolver/src/legacy_upgrade.rs b/bobbin/crates/resolver/src/legacy_upgrade.rs
index dc10f925..51ba684b 100644
--- a/bobbin/crates/resolver/src/legacy_upgrade.rs
+++ b/bobbin/crates/resolver/src/legacy_upgrade.rs
@@ -383,7 +383,6 @@ async fn upgrade_pull(
     };
     Some(Pull {
         created_at: l.created_at,
-        blobs: None,
         body: l.body,
         dependent_on: l.dependent_on,
         mentions: l.mentions,
diff --git a/web/src/lib/components/profile/AvatarList.stories.svelte b/web/src/lib/components/profile/AvatarList.stories.svelte
new file mode 100644
index 00000000..7e22d5a8
--- /dev/null
+++ b/web/src/lib/components/profile/AvatarList.stories.svelte
@@ -0,0 +1,46 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import AvatarList, { type AvatarPerson } from "./AvatarList.svelte";
+
+	const people: AvatarPerson[] = [
+		{ did: "did:plc:3p7ejjxnufohsygt5vbyxb2i", handle: "joshka.net" },
+		{ did: "did:plc:aaaa000000000000000001", handle: "alice.tngl.sh" },
+		{ did: "did:plc:aaaa000000000000000002", handle: "bob.tngl.sh" },
+		{ did: "did:plc:aaaa000000000000000003", handle: "carol.tngl.sh" },
+		{ did: "did:plc:aaaa000000000000000004", handle: "dave.tngl.sh" },
+		{ did: "did:plc:aaaa000000000000000005", handle: "erin.tngl.sh" },
+		{ did: "did:plc:aaaa000000000000000006", handle: "frank.tngl.sh" }
+	];
+
+	const { Story } = defineMeta({
+		title: "Profile/AvatarList",
+		component: AvatarList,
+		tags: ["autodocs"],
+		argTypes: {
+			size: {
+				control: "inline-radio",
+				options: ["mini", "small", "regular", "large", "full"]
+			}
+		},
+		args: {
+			people,
+			size: "regular"
+		}
+	});
+</script>
+
+<!-- more than five: the surplus collapses into a +N count -->
+<Story name="Overflow" />
+
+<!-- a handful, all shown -->
+<Story name="A few" args={{ people: people.slice(0, 3) }} />
+
+<!-- exactly at the cap, no overflow -->
+<Story name="Exactly max" args={{ people: people.slice(0, 5) }} />
+
+<!-- a single avatar -->
+<Story name="Single" args={{ people: people.slice(0, 1) }} />
+
+<!-- size variants -->
+<Story name="Small" args={{ size: "small" }} />
+<Story name="Large" args={{ size: "large" }} />
diff --git a/web/src/lib/components/profile/AvatarList.svelte b/web/src/lib/components/profile/AvatarList.svelte
new file mode 100644
index 00000000..c1ce1213
--- /dev/null
+++ b/web/src/lib/components/profile/AvatarList.svelte
@@ -0,0 +1,43 @@
+<script module lang="ts">
+	export interface AvatarPerson {
+		did: string;
+		handle?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Avatar, { type AvatarSize } from "$lib/components/ui/Avatar.svelte";
+
+	interface Props {
+		people: AvatarPerson[];
+		size?: AvatarSize;
+		class?: string;
+	}
+
+	let { people, size = "regular", class: className }: Props = $props();
+
+	const MAX = 5;
+	const Z = ["z-50", "z-40", "z-30", "z-20", "z-10"];
+
+	const shown = $derived(people.slice(0, MAX));
+	const overflow = $derived(Math.max(0, people.length - MAX));
+</script>
+
+<div class="inline-flex items-center -space-x-3 {className ?? ''}">
+	{#each shown as person, i (person.did)}
+		<!-- the z-index lives on the flex child so earlier avatars stack on top -->
+		<div class="relative inline-block {Z[i]}">
+			<a
+				href={resolve(`/${person.handle ?? person.did}` as "/")}
+				title={person.handle ?? person.did}
+			>
+				<Avatar did={person.did} handle={person.handle} {size} />
+			</a>
+		</div>
+	{/each}
+
+	{#if overflow > 0}
+		<span class="pl-4 text-sm">+{overflow}</span>
+	{/if}
+</div>
diff --git a/web/src/lib/components/profile/NetworkVouches.stories.svelte b/web/src/lib/components/profile/NetworkVouches.stories.svelte
new file mode 100644
index 00000000..7e7ca719
--- /dev/null
+++ b/web/src/lib/components/profile/NetworkVouches.stories.svelte
@@ -0,0 +1,44 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NetworkVouches from "./NetworkVouches.svelte";
+	import type { NetworkVouch } from "./types";
+
+	const vouch = (n: number): NetworkVouch => ({
+		did: `did:plc:vouch00000000000000${n}`,
+		handle: `voucher-${n}.tngl.sh`,
+		kind: "vouch"
+	});
+	const denounce = (n: number): NetworkVouch => ({
+		did: `did:plc:denounce0000000000${n}`,
+		handle: `denouncer-${n}.tngl.sh`,
+		kind: "denounce"
+	});
+
+	const { Story } = defineMeta({
+		title: "Profile/NetworkVouches",
+		component: NetworkVouches,
+		tags: ["autodocs"],
+		args: {
+			subjectHandle: "joshka.net",
+			vouches: [vouch(1), vouch(2), vouch(3)]
+		}
+	});
+</script>
+
+<!-- only vouches from the network -->
+<Story name="Vouches only" />
+
+<!-- only denouncements -->
+<Story name="Denounces only" args={{ vouches: [denounce(1), denounce(2)] }} />
+
+<!-- both rows, joined -->
+<Story
+	name="Mixed"
+	args={{ vouches: [vouch(1), vouch(2), vouch(3), vouch(4), denounce(1), denounce(2)] }}
+/>
+
+<!-- more than fit: avatars collapse into +N -->
+<Story name="Many vouches" args={{ vouches: Array.from({ length: 8 }, (_, i) => vouch(i + 1)) }} />
+
+<!-- nothing to show: renders empty -->
+<Story name="Empty" args={{ vouches: [] }} />
diff --git a/web/src/lib/components/profile/NetworkVouches.svelte b/web/src/lib/components/profile/NetworkVouches.svelte
new file mode 100644
index 00000000..6b92db0c
--- /dev/null
+++ b/web/src/lib/components/profile/NetworkVouches.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import AvatarList from "./AvatarList.svelte";
+	import type { NetworkVouch } from "./types";
+
+	interface Props {
+		// handle of the profile these vouches are about
+		subjectHandle: string;
+		vouches: NetworkVouch[];
+	}
+
+	let { subjectHandle, vouches }: Props = $props();
+
+	const vouchers = $derived(vouches.filter((v) => v.kind === "vouch"));
+	const denouncers = $derived(vouches.filter((v) => v.kind === "denounce"));
+	const href = $derived(resolve(`/${subjectHandle}?tab=vouches` as "/"));
+
+	const plural = (n: number) => (n === 1 ? "user" : "users");
+
+	const both = $derived(vouchers.length > 0 && denouncers.length > 0);
+	const vouchBorder = $derived(
+		both
+			? "rounded-t-sm border-x border-t border-green-600/25 dark:border-green-400/25"
+			: "rounded-sm border border-green-600/25 dark:border-green-400/25"
+	);
+	const denounceBorder = $derived(
+		both
+			? "rounded-b-sm border-x border-b border-red-600/25 dark:border-red-400/25"
+			: "rounded-sm border border-red-600/25 dark:border-red-400/25"
+	);
+</script>
+
+{#if vouchers.length > 0 || denouncers.length > 0}
+	<div>
+		{#if vouchers.length > 0}
+			<div
+				class="flex items-center justify-between gap-3 bg-green-100 p-2 text-green-800 dark:bg-green-900 dark:text-green-200 {vouchBorder}"
+			>
+				<a {href} class="text-sm text-green-800 hover:no-underline dark:text-green-200">
+					Vouched for by {vouchers.length}
+					{plural(vouchers.length)}
+				</a>
+				<AvatarList people={vouchers} />
+			</div>
+		{/if}
+
+		{#if denouncers.length > 0}
+			<div
+				class="flex items-center justify-between gap-3 bg-red-100 p-2 text-red-800 dark:bg-red-900 dark:text-red-200 {denounceBorder}"
+			>
+				<a {href} class="text-sm text-red-800 hover:no-underline dark:text-red-200">
+					Denounced by {denouncers.length}
+					{plural(denouncers.length)}
+				</a>
+				<AvatarList people={denouncers} />
+			</div>
+		{/if}
+	</div>
+{/if}
diff --git a/web/src/lib/components/testing/MockAuthProvider.svelte b/web/src/lib/components/testing/MockAuthProvider.svelte
index a37350bd..4eeccd26 100644
--- a/web/src/lib/components/testing/MockAuthProvider.svelte
+++ b/web/src/lib/components/testing/MockAuthProvider.svelte
@@ -8,25 +8,36 @@
 	interface Props {
 		// message the fake agent rejects submissions with
 		failWith?: string;
+		// when false, injects a signed-out context (no agent / null did) so stories
+		// can exercise the logged-out affordance
+		signedIn?: boolean;
 		children: Snippet;
 	}
 
 	let {
 		failWith = "MockAuthProvider: network request failed, this error is intentional.",
+		signedIn = true,
 		children
 	}: Props = $props();
 
-	const agent = {
-		sub: "did:plc:alice",
-		handle: () => Promise.reject(new Error(failWith))
-	};
+	// props are fixed for this provider's lifetime, so a one-time snapshot is intended
+	// svelte-ignore state_referenced_locally
+	const agent = signedIn
+		? {
+				sub: "did:plc:alice",
+				handle: () => Promise.reject(new Error(failWith))
+			}
+		: null;
 
-	const auth = {
-		agent,
-		currentDid: "did:plc:alice",
-		currentUser: { did: "did:plc:alice", handle: "alice.pds.tngl.boltless.dev" },
-		bobbinUrl: "https://bobbin.story"
-	} as unknown as Auth;
+	// svelte-ignore state_referenced_locally
+	const auth = (signedIn
+		? {
+				agent,
+				currentDid: "did:plc:alice",
+				currentUser: { did: "did:plc:alice", handle: "alice.pds.tngl.boltless.dev" },
+				bobbinUrl: "https://bobbin.story"
+			}
+		: { agent: null, currentDid: null, currentUser: null }) as unknown as Auth;
 
 	setContext(AUTH_KEY, auth);
 </script>
-- 
2.51.2