From 0b68c24b2e68cd8ea8420c1cac2528cc87b0c64a 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: show profile hovercards on avatars in
 listings, timeline, and comments

---
 web/src/lib/components/comment/Comment.svelte |  9 +++++--
 .../lib/components/profile/AvatarList.svelte  | 25 +++++++++++++------
 .../repo/issues/IssueCardContent.svelte       |  9 ++++---
 .../repo/pulls/PullCardContent.svelte         |  5 +++-
 .../timeline/TimelineFollowEvent.svelte       |  9 +++++--
 .../timeline/TimelineRepoEvent.svelte         |  5 +++-
 .../timeline/TimelineStarEvent.svelte         |  5 +++-
 7 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/comment/Comment.svelte b/web/src/lib/components/comment/Comment.svelte
index 2550dd39b..43fcd1cd2 100644
--- a/web/src/lib/components/comment/Comment.svelte
+++ b/web/src/lib/components/comment/Comment.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import Reactions from "$lib/components/reaction/Reactions.svelte";
 	import type { ReactionGroup } from "$lib/components/reaction/reactions";
@@ -45,10 +46,14 @@
 		class={`flex gap-2 ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
 	>
 		<div class="shrink-0">
-			<Avatar did={authorDid} handle={authorHandle} size="large" />
+			<ProfilePopover did={authorDid}>
+				<Avatar did={authorDid} handle={authorHandle} size="large" />
+			</ProfilePopover>
 		</div>
 		<div class="min-w-0 flex-1">
-			<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle">
+			<div
+				class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle"
+			>
 				<span class="text-foreground-default">{authorHandle}</span>
 				<span class="before:mr-1 before:content-['·']">
 					<TimeAgo value={createdAt} />
diff --git a/web/src/lib/components/profile/AvatarList.svelte b/web/src/lib/components/profile/AvatarList.svelte
index c1ce1213d..f7f63c2d2 100644
--- a/web/src/lib/components/profile/AvatarList.svelte
+++ b/web/src/lib/components/profile/AvatarList.svelte
@@ -8,14 +8,18 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import Avatar, { type AvatarSize } from "$lib/components/ui/Avatar.svelte";
+	import ProfilePopover from "./ProfilePopover.svelte";
 
 	interface Props {
 		people: AvatarPerson[];
 		size?: AvatarSize;
 		class?: string;
+		// hovering an avatar opens a profile card; turn off inside a popover to
+		// avoid nesting one hovercard within another
+		popover?: boolean;
 	}
 
-	let { people, size = "regular", class: className }: Props = $props();
+	let { people, size = "regular", class: className, popover = true }: Props = $props();
 
 	const MAX = 5;
 	const Z = ["z-50", "z-40", "z-30", "z-20", "z-10"];
@@ -24,16 +28,23 @@
 	const overflow = $derived(Math.max(0, people.length - MAX));
 </script>
 
+{#snippet avatarLink(person: AvatarPerson)}
+	<a href={resolve(`/${person.handle ?? person.did}` as "/")} title={person.handle ?? person.did}>
+		<Avatar did={person.did} handle={person.handle} {size} />
+	</a>
+{/snippet}
+
 <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>
+			{#if popover}
+				<ProfilePopover did={person.did}>
+					{@render avatarLink(person)}
+				</ProfilePopover>
+			{:else}
+				{@render avatarLink(person)}
+			{/if}
 		</div>
 	{/each}
 
diff --git a/web/src/lib/components/repo/issues/IssueCardContent.svelte b/web/src/lib/components/repo/issues/IssueCardContent.svelte
index b9ec4f70e..0269b5aea 100644
--- a/web/src/lib/components/repo/issues/IssueCardContent.svelte
+++ b/web/src/lib/components/repo/issues/IssueCardContent.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import User from "$lib/components/ui/User.svelte";
+	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import IssueStatePill from "./IssueStatePill.svelte";
 	import type { IssueSummary } from "$lib/components/repo/types";
@@ -29,15 +30,17 @@
 	<IssueStatePill state={issue.state} />
 
 	<span class="ml-1 flex items-center gap-1">
-		<User handle={issue.authorHandle} did={issue.authorDid} link />
+		<ProfilePopover did={issue.authorDid}>
+			<User handle={issue.authorHandle} did={issue.authorDid} link />
+		</ProfilePopover>
 	</span>
 
 	<Separator variant="dot" />
-	
+
 	<TimeAgo value={issue.createdAt} />
 
 	<Separator variant="dot" />
-	
+
 	<a {href} class="text-foreground-muted no-underline hover:underline">
 		{issue.commentCount}
 		{issue.commentCount === 1 ? "comment" : "comments"}
diff --git a/web/src/lib/components/repo/pulls/PullCardContent.svelte b/web/src/lib/components/repo/pulls/PullCardContent.svelte
index 93cfa39a4..c25748e87 100644
--- a/web/src/lib/components/repo/pulls/PullCardContent.svelte
+++ b/web/src/lib/components/repo/pulls/PullCardContent.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import User from "$lib/components/ui/User.svelte";
+	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import PullStatePill from "./PullStatePill.svelte";
 	import type { PullSummary } from "$lib/components/repo/types";
@@ -31,7 +32,9 @@
 	<PullStatePill state={pull.state} />
 
 	<span class="ml-1 flex items-center gap-1">
-		<User handle={pull.authorHandle} did={pull.authorDid} link />
+		<ProfilePopover did={pull.authorDid}>
+			<User handle={pull.authorHandle} did={pull.authorDid} link />
+		</ProfilePopover>
 	</span>
 
 	<Separator variant="dot" />
diff --git a/web/src/lib/components/timeline/TimelineFollowEvent.svelte b/web/src/lib/components/timeline/TimelineFollowEvent.svelte
index e9f38a8b4..e95dd9491 100644
--- a/web/src/lib/components/timeline/TimelineFollowEvent.svelte
+++ b/web/src/lib/components/timeline/TimelineFollowEvent.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import User from "$lib/components/ui/User.svelte";
+	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import FollowCard from "$lib/components/profile/FollowCard.svelte";
 	import TimelineCard from "./TimelineCard.svelte";
 	import { relativeTime } from "$lib/format";
@@ -11,9 +12,13 @@
 
 <TimelineCard>
 	{#snippet header()}
-		<User handle={event.actor.handle} did={event.actor.did} link />
+		<ProfilePopover did={event.actor.did}>
+			<User handle={event.actor.handle} did={event.actor.did} link />
+		</ProfilePopover>
 		<span>followed</span>
-		<User handle={event.subject.handle} did={event.subject.did} link />
+		<ProfilePopover did={event.subject.did}>
+			<User handle={event.subject.handle} did={event.subject.did} link />
+		</ProfilePopover>
 		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
 	{/snippet}
 
diff --git a/web/src/lib/components/timeline/TimelineRepoEvent.svelte b/web/src/lib/components/timeline/TimelineRepoEvent.svelte
index 23687a1e9..bb71c4c8d 100644
--- a/web/src/lib/components/timeline/TimelineRepoEvent.svelte
+++ b/web/src/lib/components/timeline/TimelineRepoEvent.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import User from "$lib/components/ui/User.svelte";
+	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
 	import TimelineCard from "./TimelineCard.svelte";
 	import { relativeTime } from "$lib/format";
@@ -11,7 +12,9 @@
 
 <TimelineCard>
 	{#snippet header()}
-		<User handle={event.repo.owner.handle} did={event.repo.owner.did} link />
+		<ProfilePopover did={event.repo.owner.did}>
+			<User handle={event.repo.owner.handle} did={event.repo.owner.did} link />
+		</ProfilePopover>
 		{#if event.source}
 			<span>forked</span>
 			<a href={repoHref(event.source)} class="text-foreground-default"
diff --git a/web/src/lib/components/timeline/TimelineStarEvent.svelte b/web/src/lib/components/timeline/TimelineStarEvent.svelte
index fff1bb437..a660f687a 100644
--- a/web/src/lib/components/timeline/TimelineStarEvent.svelte
+++ b/web/src/lib/components/timeline/TimelineStarEvent.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import User from "$lib/components/ui/User.svelte";
+	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
 	import TimelineCard from "./TimelineCard.svelte";
 	import { relativeTime } from "$lib/format";
@@ -11,7 +12,9 @@
 
 <TimelineCard>
 	{#snippet header()}
-		<User handle={event.actor.handle} did={event.actor.did} link />
+		<ProfilePopover did={event.actor.did}>
+			<User handle={event.actor.handle} did={event.actor.did} link />
+		</ProfilePopover>
 		<span>starred</span>
 		<a href={repoHref(event.repo)} class="text-foreground-default"
 			>{event.repo.owner.handle}/{event.repo.slug}</a
-- 
2.51.2