fix: accessibility issue and add delete answer

frontend/src/components/AnswerCard.tsx

@@ -1,8 +1,8 @@
+import placeholderProfile from "@/assets/placeholder_profile.png";
 import { Card } from "@/components/ui/card";
 import { ArrowRight, CornerDownRight, Star } from "lucide-react";
 import React from "react";
 import { Link } from "react-router-dom";
-import placeholderProfile from "@/assets/placeholder_profile.png";
 
 interface AnswerCardProps {
   id: number;
@@ -49,8 +49,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
         <div className="flex items-center justify-between">
           <Link to={`/users/${author.id}`} className="h-10 w-10">
             <img
-              src={author?.profilePicture ||
-                  placeholderProfile}
+              src={author?.profilePicture || placeholderProfile}
               alt={"Profile picture"}
               className="rounded-full object-cover"
             />

frontend/src/components/AnswerItem.tsx

@@ -1,26 +1,31 @@
+import placeholderProfile from "@/assets/placeholder_profile.png";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { useDeleteAnswer } from "@/services/api/programmingForumComponents";
 import { AnswerDetails } from "@/services/api/programmingForumSchemas";
 import useAuthStore from "@/services/auth";
-import { ThumbsDown, ThumbsUp } from "lucide-react";
+import { ThumbsDown, ThumbsUp, Trash2 } from "lucide-react";
 import React from "react";
 import { Link } from "react-router-dom";
 import { ContentWithSnippets } from "./ContentWithSnippets";
-import placeholderProfile from "@/assets/placeholder_profile.png";
 
 interface AnswerItemProps {
   answer: AnswerDetails;
   onUpvote: () => void;
   onDownvote: () => void;
+  onDelete: () => void;
 }
 
 export const AnswerItem: React.FC<AnswerItemProps> = ({
   answer,
   onUpvote,
   onDownvote,
+  onDelete,
 }) => {
-  const { token } = useAuthStore();
+  const { token, selfProfile } = useAuthStore();
 
+  const isSelfAnswer = answer.author?.id === selfProfile?.id;
+  const { mutateAsync: deleteAnswer } = useDeleteAnswer();
   return (
     <Card className="border-none bg-neutral-100 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-4">
@@ -55,23 +60,43 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
               </div>
             )}
           </div>
-          <div className="flex flex-col items-end gap-1">
-            <Link
-              to={`/users/${answer.author?.id}`}
-              className="flex items-center gap-2"
-            >
-              <img
-                src={
-                  answer.author?.profilePicture || placeholderProfile
-                }
-                alt={"Profile picture"}
-                className="h-8 w-8 rounded-full object-cover"
-              />
-              <span className="text-sm font-medium">{answer.author?.name}</span>
-            </Link>
-            <span className="text-xs text-gray-700">
-              Answered: {new Date(answer.createdAt || "").toLocaleDateString()}
-            </span>
+          <div className="flex items-center gap-4">
+            <div className="flex flex-col items-end gap-1">
+              <Link
+                to={`/users/${answer.author?.id}`}
+                className="flex items-center gap-2"
+              >
+                <img
+                  src={answer.author?.profilePicture || placeholderProfile}
+                  alt={"Profile picture"}
+                  className="h-8 w-8 rounded-full object-cover"
+                />
+                <span className="text-sm font-medium">
+                  {answer.author?.name}
+                </span>
+              </Link>
+              <span className="text-xs text-gray-700">
+                Answered:{" "}
+                {new Date(answer.createdAt || "").toLocaleDateString()}
+              </span>
+            </div>
+            {isSelfAnswer && (
+              <Button
+                variant="destructive"
+                size="icon"
+                onClick={() => {
+                  deleteAnswer({
+                    pathParams: {
+                      answerId: answer.id,
+                    },
+                  }).then(() => {
+                    onDelete();
+                  });
+                }}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            )}
           </div>
         </div>
       </div>

frontend/src/components/Answers.test.tsx

@@ -21,6 +21,9 @@ vi.mock("@/services/api/programmingForumComponents", () => ({
   useGetQuestionAnswers: vi.fn(),
   useUpvoteAnswer: vi.fn(),
   useDownvoteAnswer: vi.fn(),
+  useDeleteAnswer: vi.fn().mockReturnValue({
+    mutateAsync: vi.fn(),
+  }),
 }));
 
 // Mock the auth store

frontend/src/components/Answers.tsx

@@ -67,11 +67,11 @@ export function Answers({ questionId }: AnswersProps) {
           answer={answer}
           onUpvote={() => handleVote(answer.id, 1)}
           onDownvote={() => handleVote(answer.id, -1)}
+          onDelete={() => refetch()}
         />
       ))}
       {answers.length === 0 && (
         <span>
-          {" "}
           This question doesn't have an answer yet. Contribute to the discussion
           by answering this question.
         </span>

frontend/src/index.css

@@ -104,7 +104,7 @@ blockquote {
 }
 
 code {
-  @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+  @apply relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
 }
 
 @layer base {

frontend/src/routes/question.tsx

@@ -123,7 +123,6 @@ export default function QuestionPage() {
 
   useEffect(() => {
     if (!isEditing && question.tags) {
-      console.log("set tags", question.tags);
       setTags(question.tags.map((t) => Number(t.id)));
     }
   }, [question?.tags, isEditing]);