refactor: improve comment components and enhance styling

- Refactored CommentActions to use a state machine for managing action modes (replying, editing, deleting).
- Introduced CommentAvatar component for better avatar handling in comments.
- Updated CommentForm to use context for managing form state, allowing for better state sharing among components.
- Enhanced styling in next.config.ts for improved prose formatting.
- Adjusted CommentSingle to utilize the new CommentAvatar component for consistency.

components/comments/comment-actions.tsx

@@ -3,6 +3,16 @@
 import { useState } from "react";
 import { toast } from "sonner";
 import { ReplyIcon, EditIcon, Trash2Icon, EllipsisIcon, Loader2Icon } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -10,48 +20,57 @@ import {
   DropdownMenuTrigger,
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
-import { CommentForm } from "./comment-form";
+import { EditCommentForm, ReplyForm } from "./comment-form";
 import { useSession } from "@/lib/auth-client";
 import { deleteComment, type CommentWithUser } from "@/lib/server/comments";
 
+type ActionMode =
+  | { type: "idle" }
+  | { type: "replying" }
+  | { type: "editing" }
+  | { type: "confirming-delete" }
+  | { type: "deleting" };
+
 const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
-  const [isReplying, setIsReplying] = useState(false);
-  const [isEditing, setIsEditing] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
+  const [mode, setMode] = useState<ActionMode>({ type: "idle" });
 
   const { data: session } = useSession();
 
   if (!session) return null;
 
   const handleDelete = async () => {
-    if (!confirm("Are you sure you want to delete this comment?")) return;
-
-    setIsDeleting(true);
+    setMode({ type: "deleting" });
 
     try {
       await deleteComment(comment.id);
       toast.success("Your comment has been deleted successfully.");
+      setMode({ type: "idle" });
     } catch (error) {
       console.error("Error deleting comment:", error);
       toast.error("Failed to delete comment. Please try again.");
-    } finally {
-      setIsDeleting(false);
+      setMode({ type: "idle" });
     }
   };
 
+  const isDeleting = mode.type === "deleting";
+
   return (
     <div className="mt-4">
-      {isEditing ? (
-        <CommentForm
+      {mode.type === "editing" ? (
+        <EditCommentForm
           slug={comment.pageSlug}
-          initialContent={comment.content}
           commentId={comment.id}
-          onCancel={() => setIsEditing(false)}
-          onSuccess={() => setIsEditing(false)}
+          initialContent={comment.content}
+          onCancel={() => setMode({ type: "idle" })}
+          onSuccess={() => setMode({ type: "idle" })}
         />
       ) : (
         <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={() => setIsReplying(!isReplying)}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setMode(mode.type === "replying" ? { type: "idle" } : { type: "replying" })}
+          >
             <ReplyIcon />
             Reply
           </Button>
@@ -65,11 +84,15 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuItem onClick={() => setIsEditing(!isEditing)}>
+                <DropdownMenuItem onClick={() => setMode({ type: "editing" })}>
                   <EditIcon />
                   Edit
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={handleDelete} disabled={isDeleting} variant="destructive">
+                <DropdownMenuItem
+                  onClick={() => setMode({ type: "confirming-delete" })}
+                  disabled={isDeleting}
+                  variant="destructive"
+                >
                   {isDeleting ? <Loader2Icon className="animate-spin" /> : <Trash2Icon />}
                   Delete
                 </DropdownMenuItem>
@@ -79,16 +102,31 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
         </div>
       )}
 
-      {isReplying && (
+      {mode.type === "replying" && (
         <div className="mt-4">
-          <CommentForm
+          <ReplyForm
             slug={comment.pageSlug}
             parentId={comment.id}
-            onCancel={() => setIsReplying(false)}
-            onSuccess={() => setIsReplying(false)}
+            onCancel={() => setMode({ type: "idle" })}
+            onSuccess={() => setMode({ type: "idle" })}
           />
         </div>
       )}
+
+      <AlertDialog open={mode.type === "confirming-delete"} onOpenChange={(open) => !open && setMode({ type: "idle" })}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete comment?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={handleDelete}>
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 };