From 031f6ea29afa91b3d7e71b21001f98f9dc1e0d9c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 19 Apr 2026 19:06:46 +0200
Subject: [PATCH] feat(dashboard): add ContributorStack component for mission
 control pill stacks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/ContributorStack.svelte    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/src/lib/components/ContributorStack.svelte

diff --git a/frontend/src/lib/components/ContributorStack.svelte b/frontend/src/lib/components/ContributorStack.svelte
new file mode 100644
index 00000000..0feeb237
--- /dev/null
+++ b/frontend/src/lib/components/ContributorStack.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { components } from '$lib/generated/api';
+
+type ActivityActorDTO = components['schemas']['ActivityActorDTO'];
+
+interface Props {
+	contributors: ActivityActorDTO[];
+	hasMore: boolean;
+}
+
+let { contributors, hasMore }: Props = $props();
+</script>
+
+{#if contributors.length === 0}
+	<span
+		class="inline-block h-[22px] w-[22px] flex-shrink-0 rounded-full border-[1.5px] border-dashed border-[#cdcbbf]"
+		title="Noch niemand angefangen"
+	></span>
+{:else}
+	<span class="inline-flex items-center">
+		{#each contributors as actor, i (actor.name ?? actor.initials + i)}
+			<span
+				class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
+				style="background-color: {actor.color || '#8c9aa3'};"
+				title={actor.name ?? ''}
+			>
+				{actor.initials}
+			</span>
+		{/each}
+		{#if hasMore}
+			<span
+				class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[9px] font-bold text-ink-3 ring-2 ring-white"
+			>
+				…
+			</span>
+		{/if}
+	</span>
+{/if}