From bce9981d73b0f28aa89e694e24cfed18235a4fbb Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 5 Aug 2026 18:18:11 +0300
Subject: [PATCH] web/components: show vouch button and network vouches in
 profiles

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../lib/components/profile/ProfileCard.svelte | 29 ++++++++++++++++++-
 web/src/lib/components/ui/Button.svelte       |  2 +-
 web/src/routes/[handle]/+layout.svelte        |  2 ++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte
index ff4cd27a9..9472dcbdd 100644
--- a/web/src/lib/components/profile/ProfileCard.svelte
+++ b/web/src/lib/components/profile/ProfileCard.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import FollowButton from "./FollowButton.svelte";
+	import VouchButton from "./VouchButton.svelte";
+	import NetworkVouches from "./NetworkVouches.svelte";
 	import ProfileEditForm from "./ProfileEditForm.svelte";
 	import FollowerFollowing from "./FollowerFollowing.svelte";
 	import MapPin from "$icon/map-pin";
@@ -10,6 +12,7 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import type { ProfileRecord } from "$lib/api/records";
+	import type { DirectVouch, NetworkVouch } from "./types";
 
 	interface Identity {
 		did: string;
@@ -22,9 +25,19 @@
 		followers: number;
 		following: number;
 		viewerFollowRkey?: string | null;
+		viewerVouch?: DirectVouch | null;
+		networkVouches?: NetworkVouch[];
 	}
 
-	let { identity, profile, followers, following, viewerFollowRkey }: Props = $props();
+	let {
+		identity,
+		profile,
+		followers,
+		following,
+		viewerFollowRkey,
+		viewerVouch = null,
+		networkVouches = []
+	}: Props = $props();
 
 	const auth = getAuth();
 	const isSelf = $derived(auth.currentDid === identity.did);
@@ -126,6 +139,20 @@
 						<Rss class="size-4" aria-hidden="true" />
 					</Button>
 				</div>
+
+				{#if !isSelf}
+					<div class="my-2 flex flex-col gap-2">
+						<VouchButton
+							profileDid={identity.did}
+							profileLabel={identity.handle}
+							initialVouch={viewerVouch}
+							{networkVouches}
+						/>
+						{#if networkVouches.length > 0}
+							<NetworkVouches subjectHandle={identity.handle} vouches={networkVouches} />
+						{/if}
+					</div>
+				{/if}
 			</div>
 		{/if}
 	</div>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index d9cf8fca3..4c96038a3 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -71,7 +71,7 @@
 		},
 		compoundVariants: [
 			{
-				variant: "default",
+				variant: ["default", "danger", "success", "warning"],
 				insetShadow: true,
 				class: [
 					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-[''] dark:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)]",
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index 8f04d6233..259f07373 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -38,6 +38,8 @@
 					followers={counts.followers}
 					following={counts.following}
 					viewerFollowRkey={data.viewerFollowRkey}
+					viewerVouch={data.viewerVouch}
+					networkVouches={data.networkVouches}
 				/>
 			</aside>
 			<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
-- 
knotmirror 0.0.1