From 787be14d733491550a30d9535cdcc4ceb1c97999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 6 Nov 2026 14:48:40 +0100
Subject: [PATCH] desktop: Share the avatar stack

Board cards show assignees the way the repository header shows
delegates, overlapping and fanning out on hover, so the stack moves
into its own component.
---
 desktop/src/components/AvatarStack.svelte | 59 +++++++++++++++++++++++
 desktop/src/components/RepoHeader.svelte  | 45 +----------------
 2 files changed, 61 insertions(+), 43 deletions(-)
 create mode 100644 desktop/src/components/AvatarStack.svelte

diff --git a/desktop/src/components/AvatarStack.svelte b/desktop/src/components/AvatarStack.svelte
new file mode 100644
index 000000000..1ba884acc
--- /dev/null
+++ b/desktop/src/components/AvatarStack.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Author } from "@bindings/cob/Author";
+
+  import { authorForNodeId } from "@app/lib/utils";
+
+  import NodeId from "@app/components/NodeId.svelte";
+
+  interface Props {
+    people: Author[];
+    avatarSize?: string;
+  }
+
+  const { people, avatarSize = undefined }: Props = $props();
+
+  // The cards are portaled out of the stack, so moving onto one ends the
+  // stack's hover. Keep it fanned out while any card is still open.
+  let hovered = $state(false);
+  const cardsOpen: Record<string, boolean> = $state({});
+  const fanned = $derived(hovered || Object.values(cardsOpen).some(Boolean));
+</script>
+
+<style>
+  .avatars {
+    display: flex;
+    align-items: center;
+  }
+  /* Positioned so each avatar paints together with its ring; otherwise every
+     ring is painted before any image and the one below covers it. */
+  .avatar {
+    position: relative;
+    display: flex;
+    border-radius: 2px;
+    box-shadow: 0 0 0 2px var(--color-surface-canvas);
+    transition: margin-left 150ms ease;
+  }
+  .avatar + .avatar {
+    margin-left: -0.625rem;
+  }
+  .avatars.fanned .avatar + .avatar {
+    margin-left: 0.25rem;
+  }
+</style>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="avatars"
+  class:fanned
+  onmouseenter={() => (hovered = true)}
+  onmouseleave={() => (hovered = false)}>
+  {#each people as person, index (person.did)}
+    <div class="avatar" style:z-index={people.length - index}>
+      <NodeId
+        {...authorForNodeId(person)}
+        avatarOnly
+        {avatarSize}
+        oncardtoggle={expanded => (cardsOpen[person.did] = expanded)} />
+    </div>
+  {/each}
+</div>
diff --git a/desktop/src/components/RepoHeader.svelte b/desktop/src/components/RepoHeader.svelte
index c3d0777db..22ffc4d03 100644
--- a/desktop/src/components/RepoHeader.svelte
+++ b/desktop/src/components/RepoHeader.svelte
@@ -3,10 +3,9 @@
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
 
   import * as router from "@app/lib/router";
-  import { authorForNodeId } from "@app/lib/utils";
 
+  import AvatarStack from "@app/components/AvatarStack.svelte";
   import CheckoutRepoButton from "@app/components/CheckoutRepoButton.svelte";
-  import NodeId from "@app/components/NodeId.svelte";
   import ShareButton from "@app/components/ShareButton.svelte";
   import VisibilityBadge from "@app/components/VisibilityBadge.svelte";
 
@@ -18,12 +17,6 @@
   const { repo, config }: Props = $props();
 
   const project = $derived(repo.payloads["xyz.radicle.project"]!);
-
-  // The cards are portaled out of the stack, so moving onto one ends the
-  // stack's hover. Keep it fanned out while any card is still open.
-  let hovered = $state(false);
-  const cardsOpen: Record<string, boolean> = $state({});
-  const fanned = $derived(hovered || Object.values(cardsOpen).some(Boolean));
 </script>
 
 <style>
@@ -82,25 +75,6 @@
   .meta-value {
     color: var(--color-text-primary);
   }
-  .avatars {
-    display: flex;
-    align-items: center;
-  }
-  /* Positioned so each avatar paints together with its ring; otherwise every
-     ring is painted before any image and the one below covers it. */
-  .avatar {
-    position: relative;
-    display: flex;
-    border-radius: 2px;
-    box-shadow: 0 0 0 2px var(--color-surface-canvas);
-    transition: margin-left 150ms ease;
-  }
-  .avatar + .avatar {
-    margin-left: -0.625rem;
-  }
-  .avatars.fanned .avatar + .avatar {
-    margin-left: 0.25rem;
-  }
   .actions {
     display: flex;
     align-items: center;
@@ -133,22 +107,7 @@
         <span class="meta-label">Delegates</span>
         <span class="meta-value">{repo.threshold}/{repo.delegates.length}</span>
       </button>
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="avatars"
-        class:fanned
-        onmouseenter={() => (hovered = true)}
-        onmouseleave={() => (hovered = false)}>
-        {#each repo.delegates as delegate, index (delegate.did)}
-          <div class="avatar" style:z-index={repo.delegates.length - index}>
-            <NodeId
-              {...authorForNodeId(delegate)}
-              avatarOnly
-              avatarSize="1.25rem"
-              oncardtoggle={expanded => (cardsOpen[delegate.did] = expanded)} />
-          </div>
-        {/each}
-      </div>
+      <AvatarStack people={repo.delegates} avatarSize="1.25rem" />
     </div>
   </div>