From 62371c311f30ffe1e7d5ac2ad20c4945871e8c97 Mon Sep 17 00:00:00 2001
From: "user.email" <freakymustard67@gmail.com>
Date: Sun, 16 Aug 2026 01:43:37 +0530
Subject: [PATCH] Highlight @username mentions in task description preview

Splits the description on @word tokens and renders mentions with a purple
highlight in a live preview below the textarea. Uses split+map (not
dangerouslySetInnerHTML) so it is XSS-safe.

Closes #279
---
 .../client/src/components/Task/TaskModal.jsx  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/devboard/client/src/components/Task/TaskModal.jsx b/devboard/client/src/components/Task/TaskModal.jsx
index 68ed430..7bb0dd9 100644
--- a/devboard/client/src/components/Task/TaskModal.jsx
+++ b/devboard/client/src/components/Task/TaskModal.jsx
@@ -84,6 +84,20 @@ const TaskModal = ({
     await updateTask(task._id, { snippets: updatedSnippets });
   };
 
+  const renderWithMentions = (text) =>
+    text.split(/(@\w+)/g).map((part, i) =>
+      part.startsWith("@") ? (
+        <span
+          key={i}
+          className="text-purple-300 bg-purple-950/50 border border-purple-800/50 rounded px-1 py-0.5"
+        >
+          {part}
+        </span>
+      ) : (
+        <span key={i}>{part}</span>
+      )
+    );
+
   useEffect(() => {
     window.history.pushState(null, "", window.location.href);
     const handlePop = () => {
@@ -192,6 +206,12 @@ const TaskModal = ({
                 ? "s"
                 : ""}
             </p>
+            {/* Live preview with @username mentions highlighted */}
+            {form.description.trim() && (
+              <p className="text-xs text-[#a0a0a5] mt-1.5 whitespace-pre-wrap break-words">
+                {renderWithMentions(form.description)}
+              </p>
+            )}
 
             {aiError && (
               <p className="text-xs text-red-400 mt-1">{aiError}</p>