feat: add inline mentions in comments

components/social/comment/post-comments-drawer.tsx

@@ -37,6 +37,7 @@ import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
 import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { EmojiPicker } from "@/components/ui/emoji-picker";
+import { MentionTextarea } from "@/components/social/mention-textarea";
 import { CommentRow } from "./comment-row";
 import { ReportCommentModal } from "./comment-report-modal";
 
@@ -324,20 +325,15 @@ export function PostCommentsDrawer({
             ) : null}
             <div className="flex items-end gap-2">
               <EmojiPicker onSelect={insertEmoji} />
-              <textarea
+              <MentionTextarea
                 ref={inputRef}
                 value={draft}
-                onChange={(e) => setDraft(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    submit();
-                  }
-                }}
+                onChange={setDraft}
+                onSubmit={submit}
                 rows={1}
                 maxLength={2000}
                 placeholder={replyTo ? "Write a reply…" : "Add a comment…"}
-                className="flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40 max-h-32"
+                className="w-full resize-none rounded-lg border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40 max-h-32"
               />
               <button
                 type="button"