From 9c12f62345251c007543ef1e7d6e450e6ff51010 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 31 May 2026 19:12:39 +0200
Subject: [PATCH] fix(stammbaum): keep dimmed nodes opaque so connectors do not
 bleed through (#703)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Group opacity on the node <g> made the whole node translucent — including
its card fill — so the connector lines drawn beneath a dimmed node showed
through it. Render the card fill at full strength outside the dim group and
move the lineage focus+dim onto an inner content group (outline + labels)
only. The focus ring also leaves the dim group, so a dimmed-but-focused
node keeps a full-strength ring.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../lib/person/genealogy/StammbaumNode.svelte | 63 +++++++++++--------
 .../genealogy/StammbaumTree.svelte.test.ts    | 24 ++++++-
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/person/genealogy/StammbaumNode.svelte b/frontend/src/lib/person/genealogy/StammbaumNode.svelte
index e17b3c09..9b89fd91 100644
--- a/frontend/src/lib/person/genealogy/StammbaumNode.svelte
+++ b/frontend/src/lib/person/genealogy/StammbaumNode.svelte
@@ -9,7 +9,7 @@ interface Props {
 	node: PersonNodeDTO;
 	pos: { x: number; y: number };
 	selected: boolean;
-	/** Dim the whole node when a lineage is highlighted and this person is outside it. */
+	/** Dim the node's outline + labels when a lineage is highlighted and this person is outside it. */
 	dimmed?: boolean;
 	onSelect: (id: string) => void;
 }
@@ -38,12 +38,11 @@ const datesLabel = $derived(
 	aria-label="{node.displayName}{datesLabel}"
 	aria-expanded={selected}
 	transform="translate({pos.x}, {pos.y})"
-	opacity={dimmed ? DIMMED_OPACITY : undefined}
 	onclick={() => onSelect(node.id)}
 	onkeydown={handleKey}
 	onfocus={() => (focused = true)}
 	onblur={() => (focused = false)}
-	class="lineage-fade cursor-pointer focus:outline-none"
+	class="cursor-pointer focus:outline-none"
 >
 	{#if focused}
 		<rect
@@ -57,40 +56,52 @@ const datesLabel = $derived(
 			stroke-width="2"
 		/>
 	{/if}
+	<!-- Opaque card fill — full strength even when dimmed, so the connectors
+	     drawn beneath the node never bleed through. The lineage dim lives on the
+	     content group below; group opacity here would make the fill translucent. -->
 	<rect
 		width={NODE_W}
 		height={NODE_H}
 		rx="4"
 		fill={selected ? 'var(--c-primary)' : 'var(--c-surface)'}
-		stroke="var(--c-primary)"
-		stroke-width="1.5"
 	/>
-	{#if selected}
-		<rect width="4" height={NODE_H} rx="2" fill="var(--c-accent)" />
-	{/if}
-	<text
-		x={NODE_W / 2}
-		y={NODE_H / 2 - 6}
-		text-anchor="middle"
-		font-family="serif"
-		font-size="16"
-		fill={selected ? 'var(--c-primary-fg)' : 'var(--c-ink)'}
-	>
-		{node.displayName}
-	</text>
-	{#if node.birthYear || node.deathYear}
+	<!-- Outline + labels carry the lineage focus+dim; the box stays opaque. -->
+	<g class="lineage-fade" opacity={dimmed ? DIMMED_OPACITY : undefined}>
+		<rect
+			width={NODE_W}
+			height={NODE_H}
+			rx="4"
+			fill="none"
+			stroke="var(--c-primary)"
+			stroke-width="1.5"
+		/>
+		{#if selected}
+			<rect width="4" height={NODE_H} rx="2" fill="var(--c-accent)" />
+		{/if}
 		<text
 			x={NODE_W / 2}
-			y={NODE_H / 2 + 12}
+			y={NODE_H / 2 - 6}
 			text-anchor="middle"
-			font-family="sans-serif"
-			font-size="12"
-			fill={selected ? 'var(--c-primary-fg)' : 'var(--c-ink-3)'}
-			opacity={selected ? 0.75 : 1}
+			font-family="serif"
+			font-size="16"
+			fill={selected ? 'var(--c-primary-fg)' : 'var(--c-ink)'}
 		>
-			{node.birthYear ?? '?'}–{node.deathYear ?? ''}
+			{node.displayName}
 		</text>
-	{/if}
+		{#if node.birthYear || node.deathYear}
+			<text
+				x={NODE_W / 2}
+				y={NODE_H / 2 + 12}
+				text-anchor="middle"
+				font-family="sans-serif"
+				font-size="12"
+				fill={selected ? 'var(--c-primary-fg)' : 'var(--c-ink-3)'}
+				opacity={selected ? 0.75 : 1}
+			>
+				{node.birthYear ?? '?'}–{node.deathYear ?? ''}
+			</text>
+		{/if}
+	</g>
 </g>
 
 <style>
diff --git a/frontend/src/lib/person/genealogy/StammbaumTree.svelte.test.ts b/frontend/src/lib/person/genealogy/StammbaumTree.svelte.test.ts
index b84b12d1..c4ddd395 100644
--- a/frontend/src/lib/person/genealogy/StammbaumTree.svelte.test.ts
+++ b/frontend/src/lib/person/genealogy/StammbaumTree.svelte.test.ts
@@ -940,10 +940,27 @@ describe('StammbaumTree lineage highlight (#703)', () => {
 		edge('mutter', 'kind', 'PARENT_OF')
 	];
 
+	// The lineage dim lives on the inner content group (outline + labels); the
+	// card fill renders outside it at full strength so connectors beneath never
+	// bleed through a dimmed node.
 	function nodeOpacity(displayName: string): string | null {
+		const content = nodeContentGroup(displayName);
+		return content.getAttribute('opacity');
+	}
+	function nodeContentGroup(displayName: string): Element {
 		const g = document.querySelector(`g[role="button"][aria-label="${displayName}"]`);
 		if (!g) throw new Error(`No node group rendered for ${displayName}`);
-		return g.getAttribute('opacity');
+		const content = g.querySelector('g.lineage-fade');
+		if (!content) throw new Error(`No content group rendered for ${displayName}`);
+		return content;
+	}
+	/** The opaque card fill is a direct-child rect of the node, outside the dim group. */
+	function cardFillIsOpaque(displayName: string): boolean {
+		const g = document.querySelector(`g[role="button"][aria-label="${displayName}"]`);
+		if (!g) throw new Error(`No node group rendered for ${displayName}`);
+		const fill = g.querySelector(':scope > rect');
+		if (!fill) throw new Error(`No card-fill rect rendered for ${displayName}`);
+		return fill.getAttribute('opacity') === null && fill.getAttribute('fill-opacity') === null;
 	}
 	const DIM = '0.4';
 
@@ -974,8 +991,11 @@ describe('StammbaumTree lineage highlight (#703)', () => {
 		for (const name of ['Vater', 'Grossvater', 'Grossmutter', 'Kind', 'Mutter']) {
 			expect(nodeOpacity(name)).toBeNull();
 		}
-		// The collateral sibling dims.
+		// The collateral sibling dims — but its card fill stays opaque so the
+		// connectors drawn beneath it do not show through (the dim is on the
+		// outline + labels only).
 		expect(nodeOpacity('Tante')).toBe(DIM);
+		expect(cardFillIsOpaque('Tante')).toBe(true);
 	});
 
 	it('recomputes the highlight for a newly selected person and clears the previous one (AC6)', async () => {