From c7094207dae127302a72951400ea53b735224ee1 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 28 Apr 2026 17:25:22 +0200
Subject: [PATCH] fix(feedback): ReactionBar stoppt Click-Bubbling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wer in Feed/Workbench eine Reaction setzt, landete bisher direkt im
Detail-View — der Button-Click ist zur Card-onclick durchgesickert.

Fix in der Quelle: ReactionBar.handleClick ruft jetzt e.stopPropagation()
bevor onToggle feuert. Damit funktioniert es überall, wo Reactions in
einer klickbaren Hülle sitzen (Feed-Cards, MyReactedView, Detail-Page,
zukünftige Surfaces).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/feedback/src/ReactionBar.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/feedback/src/ReactionBar.svelte b/packages/feedback/src/ReactionBar.svelte
index 936ae2071..4eaeca3f3 100644
--- a/packages/feedback/src/ReactionBar.svelte
+++ b/packages/feedback/src/ReactionBar.svelte
@@ -31,7 +31,11 @@
 
 	let pendingEmoji = $state<string | null>(null);
 
-	async function handleClick(emoji: ReactionEmoji) {
+	async function handleClick(e: MouseEvent, emoji: ReactionEmoji) {
+		// Reaction-bars sit inside clickable cards (feedback feed, /me/reacted,
+		// detail page). Without stopPropagation, every reaction-click also
+		// triggers the card's onClick — user reacts and lands in detail-view.
+		e.stopPropagation();
 		if (readOnly || !onToggle) return;
 		pendingEmoji = emoji;
 		try {
@@ -62,7 +66,7 @@
 			title={readOnly ? readOnlyTooltip : `${REACTION_LABELS[emoji]} (${count})`}
 			aria-pressed={mine}
 			aria-label={`${REACTION_LABELS[emoji]}: ${count}`}
-			onclick={() => handleClick(emoji)}
+			onclick={(e) => handleClick(e, emoji)}
 		>
 			<span class="emoji">{emoji}</span>
 			{#if count > 0}<span class="count">{count}</span>{/if}