From 18197a9f95617b4e96ab79fdf67d1c4fd10d89cc Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Sat, 16 May 2026 20:38:03 +0200
Subject: [PATCH] =?UTF-8?q?feat(P4B.T7):=20MessageBubble=20renders=20white?=
 =?UTF-8?q?board=20kind=20with=20=C3=96ffnen=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a whiteboard branch to the MessageBubble ternary chain that renders
a card with an icon, label, and Öffnen button dispatching the
chatapp:open-whiteboard CustomEvent. ConversationPage now listens for
that event via a useEffect and calls setOpenWhiteboardId to open the
modal.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/desktop/src/components/MessageBubble.tsx | 26 +++++++++++++++++++
 apps/desktop/src/pages/ConversationPage.tsx   |  9 +++++++
 2 files changed, 35 insertions(+)

diff --git a/apps/desktop/src/components/MessageBubble.tsx b/apps/desktop/src/components/MessageBubble.tsx
index b95d109..067bbf0 100644
--- a/apps/desktop/src/components/MessageBubble.tsx
+++ b/apps/desktop/src/components/MessageBubble.tsx
@@ -442,6 +442,32 @@ export function MessageBubble({
                   defaultValue: 'Nachricht nicht lesbar',
                 })}
               </span>
+            ) : parsed.kind === 'whiteboard' ? (
+              <div className="flex items-center gap-3 rounded-2xl border border-accent/30 bg-accent/5 px-4 py-3">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/20 text-accent">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}
+                       strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
+                    <rect x="3" y="4" width="18" height="13" rx="2" />
+                    <path d="M8 21h8M12 17v4" />
+                  </svg>
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-semibold text-fg">Whiteboard</div>
+                  <div className="text-xs text-fg-muted">Gemeinsames Zeichnen</div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    window.dispatchEvent(
+                      new CustomEvent('chatapp:open-whiteboard', { detail: { id: parsed.whiteboardId } }),
+                    );
+                  }}
+                  disabled={!parsed.whiteboardId}
+                  className="cursor-pointer rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  Öffnen
+                </button>
+              </div>
             ) : parsed.kind === 'poll' ? (
               <PollCard
                 question={parsed.question}
diff --git a/apps/desktop/src/pages/ConversationPage.tsx b/apps/desktop/src/pages/ConversationPage.tsx
index cf66c26..83871e6 100644
--- a/apps/desktop/src/pages/ConversationPage.tsx
+++ b/apps/desktop/src/pages/ConversationPage.tsx
@@ -463,6 +463,15 @@ export function ConversationPage() {
     };
   }, [id, setActiveConversation]);
 
+  useEffect(() => {
+    const onOpen = (e: Event) => {
+      const detail = (e as CustomEvent<{ id?: string }>).detail;
+      if (detail?.id) setOpenWhiteboardId(detail.id);
+    };
+    window.addEventListener('chatapp:open-whiteboard', onOpen);
+    return () => window.removeEventListener('chatapp:open-whiteboard', onOpen);
+  }, []);
+
   useEffect(() => {
     if (id && messages.length > 0) markRead(id);
   }, [id, messages.length, markRead]);