From 4a4f4ab15a239d64a6f609ed4eb0030b533e5df2 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 25 Feb 2026 11:53:43 +0000
Subject: [PATCH] style: use group color for collapsed stacked layers and step
 count text

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/lib/components/graph/GroupNodeCard.svelte    |  7 ++++---
 .../graph/renderers/nodes/CollapsedGroupNode.svelte  | 12 ++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/graph/GroupNodeCard.svelte b/frontend/src/lib/components/graph/GroupNodeCard.svelte
index d14dec6a79..33803534fe 100644
--- a/frontend/src/lib/components/graph/GroupNodeCard.svelte
+++ b/frontend/src/lib/components/graph/GroupNodeCard.svelte
@@ -90,8 +90,7 @@
 	class={twMerge(
 		'w-full module cursor-pointer max-w-full',
 		fullWidth ? 'rounded-t-md' : 'shadow-sm border rounded-md  overflow-clip',
-		'bg-surface-tertiary',
-		noteColorConfig ? noteColorConfig.text : ''
+		'bg-surface-tertiary'
 	)}
 	style={fullWidth ? '' : 'width: 275px;'}
 >
@@ -137,7 +136,9 @@
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<span
-				class="text-3xs opacity-60 shrink-0 whitespace-nowrap {onExpand
+				class="text-3xs opacity-60 shrink-0 whitespace-nowrap {noteColorConfig
+					? noteColorConfig.text
+					: ''} {onExpand
 					? 'cursor-pointer hover:opacity-100 hover:text-blue-500 dark:hover:text-blue-400'
 					: ''}"
 				onclick={onExpand ? stopPropagation(preventDefault(onExpand)) : undefined}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
index fb90a43952..469586665b 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
@@ -5,6 +5,7 @@
 	import GroupNodeCard from '../../GroupNodeCard.svelte'
 	import GroupActionBar from '../../GroupActionBar.svelte'
 	import { getGroupEditorContext } from '../../groupEditor.svelte'
+	import { NOTE_COLORS, NoteColor } from '../../noteColors'
 
 	interface Props {
 		data: CollapsedGroupN['data']
@@ -22,6 +23,13 @@
 	let group = $derived(
 		groupEditorContext?.groupEditor.getGroups().find((g) => g.id === data.groupId)
 	)
+
+	let colorConfig = $derived(
+		data.color
+			? (NOTE_COLORS[data.color as NoteColor] ?? NOTE_COLORS[NoteColor.BLUE])
+			: NOTE_COLORS[NoteColor.BLUE]
+	)
+	let borderColorClass = $derived(colorConfig.outline.replace(/outline-/g, 'border-'))
 </script>
 
 <NodeWrapper offset={data.offset}>
@@ -30,11 +38,11 @@
 		<div class="relative" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
 			<!-- Stacked layers behind the card -->
 			<div
-				class="absolute inset-0 top-[4px] left-2 h-9 rounded-md bg-surface border border-gray-300 z-[-1]"
+				class="absolute inset-0 top-[4px] left-2 h-9 rounded-md border z-[-1] {colorConfig.background} {borderColorClass}"
 				style="width: 259px;"
 			></div>
 			<div
-				class="absolute inset-0 top-[7px] left-4 h-9 rounded-md bg-[#F2F2F8] border border-gray-300 z-[-2]"
+				class="absolute inset-0 top-[7px] left-4 h-9 rounded-md border z-[-2] {colorConfig.background} {borderColorClass}"
 				style="width: 243px;"
 			></div>