From 296fd6bf0883ece30454471d253a6fd41baf04ab Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 12 Aug 2026 08:49:56 +0100
Subject: [PATCH] web/components/profile: tweaks to follow follow-card bio &
 pronouns

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/comment/Comment.svelte |  2 +-
 .../components/profile/FollowButton.svelte    |  3 +-
 .../profile/FollowCardContent.svelte          | 31 ++++---
 .../lib/components/profile/ProfileCard.svelte | 48 ++++++++---
 web/src/lib/components/profile/pages.ts       | 81 +++++++++++++------
 .../components/profile/tabs/PeopleTab.svelte  |  2 +-
 web/src/lib/components/profile/types.ts       |  1 +
 web/src/lib/components/shell/Topbar.svelte    | 10 +--
 web/src/routes/login/+page.svelte             |  3 +-
 9 files changed, 124 insertions(+), 57 deletions(-)

diff --git a/web/src/lib/components/comment/Comment.svelte b/web/src/lib/components/comment/Comment.svelte
index 43fcd1cd2..1ef7153d7 100644
--- a/web/src/lib/components/comment/Comment.svelte
+++ b/web/src/lib/components/comment/Comment.svelte
@@ -37,7 +37,7 @@
 
 {#if deleted}
 	<div
-		class={`typography-paragraph-small text-foreground-subtle italic ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
+		class={`text-foreground-subtle italic ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
 	>
 		This comment was deleted.
 	</div>
diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index f12157d56..0d7e7462c 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -72,9 +72,10 @@
 			<UserRoundPlus class="size-4" aria-hidden="true" /><span>Follow</span>
 		</Button>
 	{:else}
-		<div class="flex w-full flex-col items-end">
+		<div class="flex w-full flex-col">
 			<Button
 				variant="default"
+				class="w-full gap-2"
 				insetShadow={true}
 				loading={relation.loading}
 				disabled={!relation.known}
diff --git a/web/src/lib/components/profile/FollowCardContent.svelte b/web/src/lib/components/profile/FollowCardContent.svelte
index 021a84fe6..52d2cd66f 100644
--- a/web/src/lib/components/profile/FollowCardContent.svelte
+++ b/web/src/lib/components/profile/FollowCardContent.svelte
@@ -20,18 +20,25 @@
 <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
 	<div class="flex min-w-0 flex-1 items-center gap-4">
 		<div class="flex size-24 shrink-0 items-center justify-center">
-			<Avatar did={person.did} handle={person.handle} size="full" class="p-2" />
+			<Avatar did={person.did} handle={person.handle} size="full" />
 		</div>
 
 		<div class="flex min-w-0 flex-1 flex-col justify-around">
-			<a
-				href={resolve(`/${person.handle}` as "/")}
-				class="max-w-full truncate font-bold text-foreground-default hover:underline"
-			>
-				{person.handle}
-			</a>
+			<div class="flex max-w-full items-center gap-2">
+				<a
+					href={resolve(`/${person.handle}` as "/")}
+					class="min-w-0 truncate font-bold text-foreground-default hover:underline"
+				>
+					{person.handle}
+				</a>
+				{#if person.pronouns}
+					<span class="shrink-0 whitespace-nowrap text-foreground-muted"
+						>{person.pronouns}</span
+					>
+				{/if}
+			</div>
 			{#if person.description}
-				<p class="pb-2 typography-paragraph-small wrap-break-word text-foreground-muted md:pb-2">
+				<p class="pb-2 wrap-break-word md:pb-2">
 					{person.description}
 				</p>
 			{/if}
@@ -40,14 +47,16 @@
 				<span
 					><a
 						href={resolve(`/${person.handle}?tab=followers` as "/")}
-						class="hover:text-foreground-default hover:underline">{followerCount.value} followers</a
+						class="hover:text-foreground-default hover:underline"
+						>{followerCount.value} followers</a
 					></span
 				>
-				<Separator variant="dot"/>
+				<Separator variant="dot" />
 				<span
 					><a
 						href={resolve(`/${person.handle}?tab=following` as "/")}
-						class="hover:text-foreground-default hover:underline">{person.following} following</a
+						class="hover:text-foreground-default hover:underline"
+						>{person.following} following</a
 					></span
 				>
 			</div>
diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte
index a3669af52..ffc47c405 100644
--- a/web/src/lib/components/profile/ProfileCard.svelte
+++ b/web/src/lib/components/profile/ProfileCard.svelte
@@ -54,17 +54,22 @@
 <div class="grid grid-cols-3 items-center gap-1 md:grid-cols-1">
 	<div class="col-span-1 flex items-center justify-center">
 		<div class="relative aspect-square w-3/4">
-			<Avatar did={identity.did} handle={identity.handle} size="full" class="absolute inset-0" />
+			<Avatar
+				did={identity.did}
+				handle={identity.handle}
+				size="full"
+				class="absolute inset-0"
+			/>
 		</div>
 	</div>
 
 	<div class="col-span-2">
 		<div class="flex flex-row flex-nowrap items-center gap-2">
-			<h1 title={identity.handle} class="truncate typography-heading-4 font-bold">
+			<h1 title={identity.handle} class="min-w-0 truncate typography-heading-4 font-bold">
 				{identity.handle}
 			</h1>
 			{#if shown?.pronouns}
-				<p class="text-foreground-subtle">{shown.pronouns}</p>
+				<p class="shrink-0 whitespace-nowrap text-foreground-muted">{shown.pronouns}</p>
 			{/if}
 		</div>
 		<div class="md:hidden">
@@ -96,24 +101,31 @@
 					<div class="mb-2 flex max-w-full flex-col gap-2 truncate">
 						{#if shown?.location}
 							<div class="flex items-center gap-2">
-								<span class="shrink-0"><MapPin class="size-4" aria-hidden="true" /></span>
+								<span class="shrink-0"
+									><MapPin class="size-4" aria-hidden="true" /></span
+								>
 								<span>{shown.location}</span>
 							</div>
 						{/if}
 						{#if blueskyUrl}
 							<div class="flex items-center gap-2">
-								<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
+								<span class="shrink-0"
+									><Link class="size-4" aria-hidden="true" /></span
+								>
 								<a
 									href={blueskyUrl}
 									target="_blank"
 									rel="external noopener noreferrer"
-									class="truncate no-underline hover:underline">{identity.handle}</a
+									class="truncate no-underline hover:underline"
+									>{identity.handle}</a
 								>
 							</div>
 						{/if}
 						{#each links as link, index (index)}
 							<div class="flex items-center gap-2">
-								<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
+								<span class="shrink-0"
+									><Link class="size-4" aria-hidden="true" /></span
+								>
 								<a
 									href={link}
 									target="_blank"
@@ -127,16 +139,27 @@
 
 				<div class="my-2 flex items-center gap-2">
 					{#if isSelf}
-						<Button variant="default" class="w-full gap-2" onclick={() => (editing = true)}>
+						<Button
+							variant="default"
+							class="w-full gap-2"
+							onclick={() => (editing = true)}
+						>
 							<Pencil class="size-3" aria-hidden="true" />
 							Edit
 						</Button>
 					{:else}
 						<div class="w-full">
-							<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
+							<FollowButton
+								profileDid={identity.did}
+								initialRkey={viewerFollowRkey}
+							/>
 						</div>
 					{/if}
-					<Button href={`/${identity.handle}/feed.atom`} variant="default" aria-label="RSS feed">
+					<Button
+						href={`/${identity.handle}/feed.atom`}
+						variant="default"
+						aria-label="RSS feed"
+					>
 						<Rss class="size-4" aria-hidden="true" />
 					</Button>
 				</div>
@@ -152,7 +175,10 @@
 							/>
 						{/if}
 						{#if networkVouches.length > 0}
-							<NetworkVouches subjectHandle={identity.handle} vouches={networkVouches} />
+							<NetworkVouches
+								subjectHandle={identity.handle}
+								vouches={networkVouches}
+							/>
 						{/if}
 					</div>
 				{/if}
diff --git a/web/src/lib/components/profile/pages.ts b/web/src/lib/components/profile/pages.ts
index c61005c74..d84316409 100644
--- a/web/src/lib/components/profile/pages.ts
+++ b/web/src/lib/components/profile/pages.ts
@@ -130,7 +130,8 @@ const resolvePeople = (
 	dids: string[],
 	data: Sidecar,
 	docSource: LinkSource,
-	viewerDid?: string
+	viewerDid?: string,
+	profiles?: Map<string, ProfileRecord>
 ): PersonData[] => {
 	return [...new Set(dids)].map((did) => {
 		const handle = handleOf(data, did, docSource);
@@ -139,7 +140,17 @@ const resolvePeople = (
 		const isSelf = viewerDid === did;
 		const viewerUri = viewerUriOf(data, did, FOLLOW_VIEWER.source);
 		const viewerFollowRkey = viewerUri ? rkeyFromUri(viewerUri) : viewerUri;
-		return { did, handle, followers, following, isSelf, viewerFollowRkey };
+		const profile = profiles?.get(did);
+		return {
+			did,
+			handle,
+			description: profile?.description,
+			pronouns: profile?.pronouns,
+			followers,
+			following,
+			isSelf,
+			viewerFollowRkey
+		};
 	});
 };
 
@@ -154,8 +165,10 @@ const resolveVouches = async (
 			// the record's author is the voucher: if that's the profile itself
 			// the vouch is outgoing, otherwise someone vouched for the profile
 			const direction = didFromUri(item.uri) === profileDid ? "outgoing" : "incoming";
-			const otherDid = direction === "incoming" ? didFromUri(item.uri) : rkeyFromUri(item.uri);
-			const handle = (await cache.resolve(otherDid).catch(() => null))?.handle ?? INVALID_HANDLE;
+			const otherDid =
+				direction === "incoming" ? didFromUri(item.uri) : rkeyFromUri(item.uri);
+			const handle =
+				(await cache.resolve(otherDid).catch(() => null))?.handle ?? INVALID_HANDLE;
 			return {
 				uri: item.uri,
 				did: otherDid,
@@ -185,14 +198,14 @@ const resolveStars = async (
 	const enriched =
 		repoDids.length > 0
 			? await enrich<{ items: ListItem[] }>(ctx, {
-				xrpc: "sh.tangled.repo.getReposByRepoDids",
-				params: { dids: repoDids },
-				enrich: [
-					...targetAll(starDescriptors(viewerDid), ["items[].value.repoDid"]),
-					target(REPO_OWNER_DOCS, ["items[].uri"])
-				],
-				...(viewerDid ? { viewer: viewerDid } : {})
-			})
+					xrpc: "sh.tangled.repo.getReposByRepoDids",
+					params: { dids: repoDids },
+					enrich: [
+						...targetAll(starDescriptors(viewerDid), ["items[].value.repoDid"]),
+						target(REPO_OWNER_DOCS, ["items[].uri"])
+					],
+					...(viewerDid ? { viewer: viewerDid } : {})
+				})
 			: { output: { items: [] }, data: {} as Sidecar };
 	const reposByDid = new Map(
 		enriched.output.items.map((item) => [(item.value as RepoRecord).repoDid, item])
@@ -328,7 +341,9 @@ export const fetchPeoplePage = async (
 	const targets = direction === "followers" ? ["items[].uri"] : ["items[].value.subject"];
 	const enriched = await enrich<RecordPage<ShTangledGraphFollow.Main>>(ctx, {
 		xrpc:
-			direction === "followers" ? "sh.tangled.graph.listFollows" : "sh.tangled.graph.listFollowsBy",
+			direction === "followers"
+				? "sh.tangled.graph.listFollows"
+				: "sh.tangled.graph.listFollowsBy",
 		params: { subject: did, limit, offset },
 		enrich: targetAll(
 			viewerDid ? [...FOLLOW_STATS, FOLLOW_VIEWER, docs] : [...FOLLOW_STATS, docs],
@@ -339,9 +354,25 @@ export const fetchPeoplePage = async (
 	const dids =
 		direction === "followers"
 			? enriched.output.items.map((item) => didFromUri(item.uri))
-			: enriched.output.items.map((item) => (item.value as ShTangledGraphFollow.Main).subject);
+			: enriched.output.items.map(
+					(item) => (item.value as ShTangledGraphFollow.Main).subject
+				);
+	// the enrich minidocs give handles but not bio/pronouns, so pull the profile
+	// records for this page's dids and merge them in. getProfiles takes the profile
+	// record at-uris, not bare dids
+	const uniqueDids = [...new Set(dids)];
+	const profileUris = uniqueDids.map((d) => `at://${d}/sh.tangled.actor.profile/self`);
+	const profiles =
+		profileUris.length > 0
+			? await getProfiles(ctx, profileUris)
+					.then(
+						(list) =>
+							new Map(list.items.map((item) => [didFromUri(item.uri), item.value]))
+					)
+					.catch(() => new Map<string, ProfileRecord>())
+			: new Map<string, ProfileRecord>();
 	return {
-		items: resolvePeople(dids, enriched.data, docs.source, viewerDid),
+		items: resolvePeople(dids, enriched.data, docs.source, viewerDid, profiles),
 		cursor: enriched.output.cursor
 	};
 };
@@ -454,19 +485,19 @@ export const fetchPinned = async (
 	const [byDid, byUri] = await Promise.all([
 		dids.length > 0
 			? enrich<{ items: ListItem[] }>(ctx, {
-				xrpc: "sh.tangled.repo.getReposByRepoDids",
-				params: { dids },
-				enrich: targetAll(descriptors, ["items[].value.repoDid"]),
-				...(viewerDid ? { viewer: viewerDid } : {})
-			})
+					xrpc: "sh.tangled.repo.getReposByRepoDids",
+					params: { dids },
+					enrich: targetAll(descriptors, ["items[].value.repoDid"]),
+					...(viewerDid ? { viewer: viewerDid } : {})
+				})
 			: empty,
 		uris.length > 0
 			? enrich<{ items: ListItem[] }>(ctx, {
-				xrpc: "sh.tangled.repo.getRepos",
-				params: { repos: uris },
-				enrich: targetAll(descriptors, ["items[].value.repoDid"]),
-				...(viewerDid ? { viewer: viewerDid } : {})
-			})
+					xrpc: "sh.tangled.repo.getRepos",
+					params: { repos: uris },
+					enrich: targetAll(descriptors, ["items[].value.repoDid"]),
+					...(viewerDid ? { viewer: viewerDid } : {})
+				})
 			: empty
 	]);
 	const cards = new Map<string, RepoCardData>();
diff --git a/web/src/lib/components/profile/tabs/PeopleTab.svelte b/web/src/lib/components/profile/tabs/PeopleTab.svelte
index 1c86e86e7..cf4e8db88 100644
--- a/web/src/lib/components/profile/tabs/PeopleTab.svelte
+++ b/web/src/lib/components/profile/tabs/PeopleTab.svelte
@@ -42,7 +42,7 @@
 
 <Section {title} empty={people.length === 0} {emptyMessage} listClass="flex flex-col gap-8">
 	{#each people as person (person.did)}
-		<FollowCard {person} />
+		<FollowCard {person} border={true} />
 	{/each}
 	{#snippet footer()}
 		{#if pages > 1}
diff --git a/web/src/lib/components/profile/types.ts b/web/src/lib/components/profile/types.ts
index 0239b249e..51285e567 100644
--- a/web/src/lib/components/profile/types.ts
+++ b/web/src/lib/components/profile/types.ts
@@ -49,6 +49,7 @@ export interface PersonData {
 	did: string;
 	handle: string;
 	description?: string;
+	pronouns?: string;
 	followers?: number;
 	following?: number;
 	viewerFollowRkey?: string | null;
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index d14b2980a..08e18b1b2 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -174,16 +174,16 @@
 							{#snippet trigger()}
 								<User did={user.did} handle={user.handle} />
 							{/snippet}
-							<DropdownItem size="small" href={`/${user.handle}`} icon={UserIcon}>Profile</DropdownItem>
-							<DropdownItem size="small" href={`/${user.handle}?tab=repos`} icon={BookMarked}>
+							<DropdownItem href={`/${user.handle}`} icon={UserIcon}>Profile</DropdownItem>
+							<DropdownItem href={`/${user.handle}?tab=repos`} icon={BookMarked}>
 								Repositories
 							</DropdownItem>
-							<DropdownItem size="small" href={`/${user.handle}?tab=strings`} icon={LineSquiggle}>
+							<DropdownItem href={`/${user.handle}?tab=strings`} icon={LineSquiggle}>
 								Strings
 							</DropdownItem>
-							<DropdownItem size="small" href="/settings" icon={Cog}>Settings</DropdownItem>
+							<DropdownItem href="/settings" icon={Cog}>Settings</DropdownItem>
 							<Separator />
-							<DropdownItem size="small" danger icon={LogOut} onclick={onSignOut}>Logout</DropdownItem>
+							<DropdownItem danger icon={LogOut} onclick={onSignOut}>Logout</DropdownItem>
 						</Dropdown>
 					{:else}
 						<div class={style.identity()} aria-hidden="true">
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index bbc912442..aa7bcd13b 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -56,7 +56,7 @@
 				inputmode="url"
 				required
 				placeholder="akshay.tngl.sh"
-				class="w-full rounded-sm border border-border-default bg-background-default p-3 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
+				class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 			/>
 			<p class="mt-1 typography-paragraph-small text-foreground-subtle">
 				Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
@@ -76,7 +76,6 @@
 
 		<Button
 			type="submit"
-			size="small"
 			loading={login.loading}
 			spinnerClass="size-4"
 			aria-label={login.loading ? "Logging in" : undefined}
-- 
2.51.2