From 0b675dfc3b383e8b1e9873e0bf8d1b1bc85d28b0 Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Mon, 19 Jan 2026 14:37:45 +0200
Subject: [PATCH] feat(web): improve comment editing and mention rendering

---
 .../comment-composer/comment-composer.tsx     | 12 +++++---
 .../comment-item/comment-item.tsx             |  2 +-
 .../chat-comments/comment-item/types.ts       |  7 ++++-
 .../comment-thread/comment-thread.tsx         | 29 +++++++++----------
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/surfsense_web/components/chat-comments/comment-composer/comment-composer.tsx b/surfsense_web/components/chat-comments/comment-composer/comment-composer.tsx
index 657cfcade..2ddfb300b 100644
--- a/surfsense_web/components/chat-comments/comment-composer/comment-composer.tsx
+++ b/surfsense_web/components/chat-comments/comment-composer/comment-composer.tsx
@@ -205,11 +205,11 @@ export function CommentComposer({
 	// Pre-populate insertedMentions from initialValue when members are loaded
 	useEffect(() => {
 		if (mentionsInitialized || !initialValue || members.length === 0) return;
-		
+
 		const mentionPattern = /@([^\s@]+(?:\s+[^\s@]+)*?)(?=\s|$|[.,!?;:]|@)/g;
 		const foundMentions: InsertedMention[] = [];
 		let match: RegExpExecArray | null;
-		
+
 		while ((match = mentionPattern.exec(initialValue)) !== null) {
 			const displayName = match[1];
 			const member = members.find(
@@ -222,7 +222,7 @@ export function CommentComposer({
 				}
 			}
 		}
-		
+
 		if (foundMentions.length > 0) {
 			setInsertedMentions(foundMentions);
 		}
@@ -239,7 +239,11 @@ export function CommentComposer({
 
 	return (
 		<div className="flex flex-col gap-2">
-			<Popover open={mentionState.isActive} onOpenChange={(open) => !open && closeMentionPicker()} modal={false}>
+			<Popover
+				open={mentionState.isActive}
+				onOpenChange={(open) => !open && closeMentionPicker()}
+				modal={false}
+			>
 				<PopoverAnchor asChild>
 					<Textarea
 						ref={textareaRef}
diff --git a/surfsense_web/components/chat-comments/comment-item/comment-item.tsx b/surfsense_web/components/chat-comments/comment-item/comment-item.tsx
index 8d2a3dad0..362a6079e 100644
--- a/surfsense_web/components/chat-comments/comment-item/comment-item.tsx
+++ b/surfsense_web/components/chat-comments/comment-item/comment-item.tsx
@@ -116,7 +116,7 @@ export function CommentItem({
 	membersLoading = false,
 }: CommentItemProps) {
 	const [{ data: currentUser }] = useAtom(currentUserAtom);
-	
+
 	const isCurrentUser = currentUser?.id === comment.author?.id;
 	const displayName = isCurrentUser
 		? "Me"
diff --git a/surfsense_web/components/chat-comments/comment-item/types.ts b/surfsense_web/components/chat-comments/comment-item/types.ts
index 2c9eadad2..b6d20e7d2 100644
--- a/surfsense_web/components/chat-comments/comment-item/types.ts
+++ b/surfsense_web/components/chat-comments/comment-item/types.ts
@@ -27,7 +27,12 @@ export interface CommentItemProps {
 	isReply?: boolean;
 	isEditing?: boolean;
 	isSubmitting?: boolean;
-	members?: Array<{ id: string; displayName: string | null; email: string; avatarUrl?: string | null }>;
+	members?: Array<{
+		id: string;
+		displayName: string | null;
+		email: string;
+		avatarUrl?: string | null;
+	}>;
 	membersLoading?: boolean;
 }
 
diff --git a/surfsense_web/components/chat-comments/comment-thread/comment-thread.tsx b/surfsense_web/components/chat-comments/comment-thread/comment-thread.tsx
index 3172893d2..1468cee33 100644
--- a/surfsense_web/components/chat-comments/comment-thread/comment-thread.tsx
+++ b/surfsense_web/components/chat-comments/comment-thread/comment-thread.tsx
@@ -126,31 +126,30 @@ export function CommentThread({
 						)}
 
 						{/* Reply composer or button */}
-			
+
 						{isReplyComposerOpen ? (
 							<>
-													<div className="pt-3">
-													<CommentComposer
-								members={members}
-								membersLoading={membersLoading}
-								placeholder="Write a reply..."
-								submitLabel="Reply"
-								isSubmitting={isSubmitting}
-								onSubmit={handleReplySubmit}
-								onCancel={handleReplyCancel}
-								autoFocus
-							/>
-							</div>
+								<div className="pt-3">
+									<CommentComposer
+										members={members}
+										membersLoading={membersLoading}
+										placeholder="Write a reply..."
+										submitLabel="Reply"
+										isSubmitting={isSubmitting}
+										onSubmit={handleReplySubmit}
+										onCancel={handleReplyCancel}
+										autoFocus
+									/>
+								</div>
 							</>
-							
 						) : (
 							<Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={handleReply}>
 								<MessageSquare className="mr-1.5 size-3" />
 								Reply
 							</Button>
 						)}
-						</div>
 					</div>
+				</div>
 			)}
 
 			{/* Reply button when no replies yet */}