From a7625c6b5eec8e81b4e08e0f1709d88127c4e6a7 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 25 Sep 2026 18:52:51 +0200
Subject: [PATCH] web/components: link @handle mentions in profile bios with
 ProfilePopover

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/comment/Comment.svelte |  4 +--
 .../lib/components/profile/AvatarList.svelte  |  2 +-
 .../lib/components/profile/ProfileBio.svelte  | 28 ++++++++++++++++++
 .../profile/ProfilePopover.stories.svelte     | 29 ++++++++++++-------
 .../components/profile/ProfilePopover.svelte  |  6 ++--
 .../profile/UserProfileChrome.svelte          |  8 +++--
 web/src/lib/components/profile/bio.test.ts    | 24 +++++++++++++++
 web/src/lib/components/profile/bio.ts         | 17 +++++++++++
 .../organization/OrganizationChrome.svelte    |  6 +++-
 .../repo/pulls/PullCommitRow.svelte           |  2 +-
 .../repo/pulls/PullReviewComment.svelte       |  2 +-
 .../repo/tickets/TicketInfoBar.svelte         |  2 +-
 .../timeline/TimelineActorHeader.svelte       |  2 +-
 13 files changed, 108 insertions(+), 24 deletions(-)
 create mode 100644 web/src/lib/components/profile/ProfileBio.svelte
 create mode 100644 web/src/lib/components/profile/bio.test.ts
 create mode 100644 web/src/lib/components/profile/bio.ts

diff --git a/web/src/lib/components/comment/Comment.svelte b/web/src/lib/components/comment/Comment.svelte
index 523b542ae..94a46e5e5 100644
--- a/web/src/lib/components/comment/Comment.svelte
+++ b/web/src/lib/components/comment/Comment.svelte
@@ -51,12 +51,12 @@
 		class={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-1.5 ${variant === "top" ? "border-b border-border-default bg-background-default p-md pb-lg" : "pt-sm pr-md pb-md"}`}
 	>
 		<div class="self-center">
-			<ProfilePopover did={authorDid}>
+			<ProfilePopover identifier={authorDid}>
 				<VouchAvatar did={authorDid} handle={authorHandle} size="large" />
 			</ProfilePopover>
 		</div>
 		<div class="flex flex-wrap items-center gap-xs text-foreground-muted">
-			<ProfilePopover did={authorDid}>
+			<ProfilePopover identifier={authorDid}>
 				<User handle={authorHandle} did={authorDid} showImage={false} link />
 			</ProfilePopover>
 			<Separator variant="dot" />
diff --git a/web/src/lib/components/profile/AvatarList.svelte b/web/src/lib/components/profile/AvatarList.svelte
index c3231bf6d..e3a526ae6 100644
--- a/web/src/lib/components/profile/AvatarList.svelte
+++ b/web/src/lib/components/profile/AvatarList.svelte
@@ -39,7 +39,7 @@
 		<!-- the z-index lives on the flex child so earlier avatars stack on top -->
 		<div class="relative inline-block {Z[i]}">
 			{#if popover}
-				<ProfilePopover did={person.did}>
+				<ProfilePopover identifier={person.did}>
 					{@render avatarLink(person)}
 				</ProfilePopover>
 			{:else}
diff --git a/web/src/lib/components/profile/ProfileBio.svelte b/web/src/lib/components/profile/ProfileBio.svelte
new file mode 100644
index 000000000..deb9b1d7f
--- /dev/null
+++ b/web/src/lib/components/profile/ProfileBio.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
+	import { bioSegments } from "$lib/components/profile/bio";
+
+	interface Props {
+		text: string;
+		class?: string;
+	}
+
+	let { text, class: className }: Props = $props();
+
+	const segments = $derived(bioSegments(text));
+</script>
+
+<div class={className}>
+	{#each segments as segment, i (i)}
+		{#if segment.kind === "mention"}
+			<ProfilePopover identifier={segment.handle}>
+				<a href={resolve(`/${segment.handle}` as "/")} class="font-medium hover:underline"
+					>@{segment.handle}</a
+				>
+			</ProfilePopover>
+		{:else}
+			{segment.text}
+		{/if}
+	{/each}
+</div>
diff --git a/web/src/lib/components/profile/ProfilePopover.stories.svelte b/web/src/lib/components/profile/ProfilePopover.stories.svelte
index c07510b7c..bb9bf6ff8 100644
--- a/web/src/lib/components/profile/ProfilePopover.stories.svelte
+++ b/web/src/lib/components/profile/ProfilePopover.stories.svelte
@@ -51,7 +51,7 @@
 		component: ProfilePopover,
 		tags: ["autodocs"],
 		args: {
-			did: DID
+			identifier: DID
 		}
 	});
 </script>
@@ -60,8 +60,11 @@
 <Story name="Avatar trigger" parameters={{ auth: true }}>
 	{#snippet template(args)}
 		<div class="flex justify-center p-24">
-			<ProfilePopover did={args.did} preview={{ card: fullCard, networkVouches }}>
-				<Avatar did={args.did} handle={HANDLE} size="large" />
+			<ProfilePopover
+				identifier={args.identifier}
+				preview={{ card: fullCard, networkVouches }}
+			>
+				<Avatar did={args.identifier} handle={HANDLE} size="large" />
 			</ProfilePopover>
 		</div>
 	{/snippet}
@@ -71,7 +74,10 @@
 <Story name="Name trigger" parameters={{ auth: true }}>
 	{#snippet template(args)}
 		<div class="flex justify-center p-24">
-			<ProfilePopover did={args.did} preview={{ card: fullCard, networkVouches }}>
+			<ProfilePopover
+				identifier={args.identifier}
+				preview={{ card: fullCard, networkVouches }}
+			>
 				<span class="font-bold hover:underline">{HANDLE}</span>
 			</ProfilePopover>
 		</div>
@@ -82,7 +88,7 @@
 <Story name="Minimal card" parameters={{ auth: true }}>
 	{#snippet template()}
 		<div class="flex justify-center p-24">
-			<ProfilePopover did={minimalCard.did} preview={{ card: minimalCard }}>
+			<ProfilePopover identifier={minimalCard.did} preview={{ card: minimalCard }}>
 				<Avatar did={minimalCard.did} handle={minimalCard.handle} size="large" />
 			</ProfilePopover>
 		</div>
@@ -93,8 +99,8 @@
 <Story name="Signed out" parameters={{ auth: false }}>
 	{#snippet template(args)}
 		<div class="flex justify-center p-24">
-			<ProfilePopover did={args.did} preview={{ card: fullCard }}>
-				<Avatar did={args.did} handle={HANDLE} size="large" />
+			<ProfilePopover identifier={args.identifier} preview={{ card: fullCard }}>
+				<Avatar did={args.identifier} handle={HANDLE} size="large" />
 			</ProfilePopover>
 		</div>
 	{/snippet}
@@ -104,8 +110,8 @@
 <Story name="Disabled" parameters={{ auth: true }}>
 	{#snippet template(args)}
 		<div class="flex justify-center p-24">
-			<ProfilePopover did={args.did} disabled preview={{ card: fullCard }}>
-				<Avatar did={args.did} handle={HANDLE} size="large" />
+			<ProfilePopover identifier={args.identifier} disabled preview={{ card: fullCard }}>
+				<Avatar did={args.identifier} handle={HANDLE} size="large" />
 			</ProfilePopover>
 		</div>
 	{/snippet}
@@ -115,7 +121,10 @@
 <Story name="Large counts" parameters={{ auth: true }}>
 	{#snippet template()}
 		<div class="flex justify-center p-24">
-			<ProfilePopover did={popularCard.did} preview={{ card: popularCard, networkVouches }}>
+			<ProfilePopover
+				identifier={popularCard.did}
+				preview={{ card: popularCard, networkVouches }}
+			>
 				<Avatar did={popularCard.did} handle={popularCard.handle} size="large" />
 			</ProfilePopover>
 		</div>
diff --git a/web/src/lib/components/profile/ProfilePopover.svelte b/web/src/lib/components/profile/ProfilePopover.svelte
index 2e80b3b2b..75c65efcc 100644
--- a/web/src/lib/components/profile/ProfilePopover.svelte
+++ b/web/src/lib/components/profile/ProfilePopover.svelte
@@ -16,7 +16,7 @@
 	import type { DirectVouch, ProfileCardData, NetworkVouch } from "$lib/components/profile/types";
 
 	interface Props {
-		did: string;
+		identifier: string;
 		disabled?: boolean;
 		openDelay?: number;
 		class?: string;
@@ -25,7 +25,7 @@
 	}
 
 	let {
-		did,
+		identifier,
 		disabled = false,
 		openDelay = 200,
 		class: className,
@@ -67,7 +67,7 @@
 
 		try {
 			const ctx = createBobbinClient({ serviceUrl: bobbinUrl });
-			card = await fetchProfileCard(ctx, { identifier: did, viewerDid });
+			card = await fetchProfileCard(ctx, { identifier, viewerDid });
 			status = "loaded";
 		} catch {
 			status = "error";
diff --git a/web/src/lib/components/profile/UserProfileChrome.svelte b/web/src/lib/components/profile/UserProfileChrome.svelte
index e9325da09..738c60d28 100644
--- a/web/src/lib/components/profile/UserProfileChrome.svelte
+++ b/web/src/lib/components/profile/UserProfileChrome.svelte
@@ -6,6 +6,7 @@
 	import FollowButton from "$lib/components/profile/FollowButton.svelte";
 	import NetworkVouches from "$lib/components/profile/NetworkVouches.svelte";
 	import ProfileEditForm from "$lib/components/profile/ProfileEditForm.svelte";
+	import ProfileBio from "$lib/components/profile/ProfileBio.svelte";
 	import ProfileMoreMenu from "$lib/components/profile/ProfileMoreMenu.svelte";
 	import ProfileSocialLinks from "$lib/components/profile/ProfileSocialLinks.svelte";
 	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
@@ -117,9 +118,10 @@
 					</div>
 				{:else}
 					{#if shown?.description}
-						<p class="min-w-0 typography-paragraph-regular sm:-mt-px">
-							{shown.description}
-						</p>
+						<ProfileBio
+							text={shown.description}
+							class="min-w-0 typography-paragraph-regular sm:-mt-px"
+						/>
 					{/if}
 					{#if shown}
 						<ProfileSocialLinks
diff --git a/web/src/lib/components/profile/bio.test.ts b/web/src/lib/components/profile/bio.test.ts
new file mode 100644
index 000000000..02de9a7df
--- /dev/null
+++ b/web/src/lib/components/profile/bio.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { bioSegments } from "$lib/components/profile/bio";
+
+describe("bioSegments", () => {
+	it("splits mentions out of surrounding text", () => {
+		expect(bioSegments("working on @tangled.org with @Alice.bsky.social.")).toEqual([
+			{ kind: "text", text: "working on " },
+			{ kind: "mention", handle: "tangled.org" },
+			{ kind: "text", text: " with " },
+			{ kind: "mention", handle: "alice.bsky.social" },
+			{ kind: "text", text: "." }
+		]);
+	});
+
+	it("leaves emails and dotless names as text", () => {
+		expect(bioSegments("mail me@example.com or @nobody")).toEqual([
+			{ kind: "text", text: "mail me@example.com or @nobody" }
+		]);
+	});
+
+	it("keeps a mention at the very start", () => {
+		expect(bioSegments("@eti.tngl.sh")).toEqual([{ kind: "mention", handle: "eti.tngl.sh" }]);
+	});
+});
diff --git a/web/src/lib/components/profile/bio.ts b/web/src/lib/components/profile/bio.ts
new file mode 100644
index 000000000..c970886fd
--- /dev/null
+++ b/web/src/lib/components/profile/bio.ts
@@ -0,0 +1,17 @@
+export type BioSegment = { kind: "text"; text: string } | { kind: "mention"; handle: string };
+
+const MENTION =
+	/(?<![\w@.])@((?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z](?:[a-z0-9-]{0,61}[a-z0-9])?)(?![\w-]|\.[a-z0-9])/gi;
+
+export const bioSegments = (text: string): BioSegment[] => {
+	const segments: BioSegment[] = [];
+	let last = 0;
+	for (const match of text.matchAll(MENTION)) {
+		if (match.index > last)
+			segments.push({ kind: "text", text: text.slice(last, match.index) });
+		segments.push({ kind: "mention", handle: match[1].toLowerCase() });
+		last = match.index + match[0].length;
+	}
+	if (last < text.length) segments.push({ kind: "text", text: text.slice(last) });
+	return segments;
+};
diff --git a/web/src/lib/components/profile/organization/OrganizationChrome.svelte b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
index f2be45376..b26608f69 100644
--- a/web/src/lib/components/profile/organization/OrganizationChrome.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
@@ -8,6 +8,7 @@
 	import type { ProfileRecord } from "$lib/api/records";
 	import { getAuth } from "$lib/auth.svelte";
 	import FollowButton from "$lib/components/profile/FollowButton.svelte";
+	import ProfileBio from "$lib/components/profile/ProfileBio.svelte";
 	import ProfileMoreMenu from "$lib/components/profile/ProfileMoreMenu.svelte";
 	import ProfileSocialLinks from "$lib/components/profile/ProfileSocialLinks.svelte";
 	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
@@ -104,7 +105,10 @@
 					</h1>
 
 					{#if profile.description}
-						<p class="max-w-137 typography-paragraph-regular">{profile.description}</p>
+						<ProfileBio
+							text={profile.description}
+							class="max-w-137 typography-paragraph-regular"
+						/>
 					{/if}
 				</div>
 
diff --git a/web/src/lib/components/repo/pulls/PullCommitRow.svelte b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
index 875e208b7..bea1a86ec 100644
--- a/web/src/lib/components/repo/pulls/PullCommitRow.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
@@ -102,7 +102,7 @@
 	>
 		{#if showAvatar}
 			{#if commit.authorHandle && commit.authorDid}
-				<ProfilePopover did={commit.authorDid}>
+				<ProfilePopover identifier={commit.authorDid}>
 					<Avatar
 						did={commit.authorDid}
 						handle={commit.authorHandle}
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
index afc249f61..02983de02 100644
--- a/web/src/lib/components/repo/pulls/PullReviewComment.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
@@ -45,7 +45,7 @@
 >
 	<header class="flex h-8 items-center justify-between">
 		<!-- User pins its own `text-foreground-default`, so the dimmed state has to say so -->
-		<ProfilePopover did={comment.authorDid}>
+		<ProfilePopover identifier={comment.authorDid}>
 			<User
 				did={comment.authorDid}
 				handle={comment.authorHandle}
diff --git a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
index 4203f2bfd..7672328f5 100644
--- a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
@@ -47,7 +47,7 @@
 
 {#snippet person(who: Person)}
 	{#if who.did}
-		<ProfilePopover did={who.did}>
+		<ProfilePopover identifier={who.did}>
 			<User handle={who.handle} did={who.did} link vouchBadge={who.did === authorDid} />
 		</ProfilePopover>
 	{:else}
diff --git a/web/src/lib/components/timeline/TimelineActorHeader.svelte b/web/src/lib/components/timeline/TimelineActorHeader.svelte
index 903b59128..230d5ce3f 100644
--- a/web/src/lib/components/timeline/TimelineActorHeader.svelte
+++ b/web/src/lib/components/timeline/TimelineActorHeader.svelte
@@ -19,7 +19,7 @@
 	} = $props();
 </script>
 
-<ProfilePopover did={actor.did}>
+<ProfilePopover identifier={actor.did}>
 	<User handle={actor.handle} did={actor.did} link />
 </ProfilePopover>
 <span>{verb}</span>
-- 
2.51.2