From 5a7d4dc57ef4e30c6239707d79b2ebfac1373090 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 2 Jul 2026 11:41:12 -0400
Subject: [PATCH] fix: preserve whitespace around mentions

renderContent: mention span now includes trailing space when the
next text segment doesn't start with one (React collapses whitespace
between sibling inline elements).

handleMentionSelect: avoid double space when the text after cursor
already starts with a space.
---
 web/src/components/ChatArea.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ChatArea.tsx b/web/src/components/ChatArea.tsx
index 69cc998..260bd53 100644
--- a/web/src/components/ChatArea.tsx
+++ b/web/src/components/ChatArea.tsx
@@ -59,9 +59,12 @@ function renderContent(content: string, memberUsernames: Set<string>) {
 
   return segments.map((seg, idx) => {
     if (seg.type === "mention") {
+      // ponytail: add trailing space because React collapses whitespace between sibling spans
+      const nextSeg = segments[idx + 1];
+      const needsSpace = !nextSeg || (nextSeg.type === "text" && !nextSeg.value.startsWith(" "));
       return (
         <span key={idx} className="text-gb-aqua">
-          @{seg.value}
+          @{seg.value}{needsSpace ? " " : ""}
         </span>
       );
     }
@@ -458,7 +461,8 @@ export function ChatArea() {
     if (atIndex === -1) return;
     const before = currentValue.slice(0, atIndex);
     const after = currentValue.slice(cursor);
-    const next = `${before}@${username} ${after}`;
+    const separator = after.startsWith(" ") || after === "" ? "" : " ";
+    const next = `${before}@${username}${separator}${after}`;
     setInput(next);
     setMentionQuery(null);
     // Also set the DOM value immediately so cursor positioning works