[Frontend] Implement Bookmark button

frontend/src/components/BookmarkButton.tsx

@@ -0,0 +1,94 @@
+import {
+  useBookmarkQuestion,
+  useGetQuestionDetails,
+  useRemoveQuestionBookmark,
+} from "@/services/api/programmingForumComponents";
+import { useState } from "react";
+import { Button } from "./ui/button";
+// import { ReactComponent as BookmarkIcon } from '../assets/Icon/Nav/Bookmark/Active.svg';
+
+export default function BookmarkButton({
+  question,
+}: {
+  question: { questionId?: number; bookmarked?: boolean };
+}) {
+  const { isLoading, data, error, refetch } = useGetQuestionDetails(
+    {
+      pathParams: {
+        questionId: question.questionId!,
+      },
+    },
+    {
+      enabled: typeof question.bookmarked !== "boolean",
+    },
+  );
+
+  const [optimisticBookmarking, setOptimisticBookmarking] = useState(
+    null as boolean | null,
+  );
+
+  const { mutateAsync: bookmark } = useBookmarkQuestion({
+    onSuccess: () => {
+      refetch().then(() => {
+        setOptimisticBookmarking(null);
+      });
+    },
+    onError: () => {
+      setOptimisticBookmarking(null);
+    },
+  });
+  const { mutateAsync: removeBookmark } = useRemoveQuestionBookmark({
+    onSuccess: () => {
+      refetch().then(() => {
+        setOptimisticBookmarking(null);
+      });
+    },
+    onError: () => {
+      setOptimisticBookmarking(null);
+    },
+  });
+
+  const bookmarked = optimisticBookmarking ?? data?.data?.bookmarked;
+
+  return (
+    <Button
+      disabled={!!error || isLoading}
+      size="icon"
+      aria-label={bookmarked ? "Remove bookmark" : "Add bookmark"}
+      variant={bookmarked && !isLoading ? "primary-outline" : "default"}
+      onClick={() => {
+        if (bookmarked) {
+          removeBookmark({
+            pathParams: {
+              questionId: question.questionId!,
+            },
+          });
+          setOptimisticBookmarking(false);
+        } else {
+          bookmark({
+            pathParams: {
+              questionId: question.questionId!,
+            },
+          });
+          setOptimisticBookmarking(true);
+        }
+      }}
+    >
+      {isLoading ? (
+        "Loading..."
+      ) : error ? (
+        "Error"
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill={bookmarked && !isLoading ? "#a51819" : "#fafafa" }
+          width="20px"
+          height="20px"
+        >
+          <path d="M5 3h14a1 1 0 011 1v16a1 1 0 01-1.496.868L12 15.98l-6.504 4.889A1 1 0 014 20V4a1 1 0 011-1z" />
+        </svg>
+      )}
+    </Button>
+  );
+}

frontend/src/routes/question.test.tsx

@@ -55,6 +55,12 @@ vi.mock("@/services/api/programmingForumComponents", () => ({
   useDeleteQuestion: vi.fn(() => ({
     mutateAsync: vi.fn(),
   })),
+  useBookmarkQuestion: vi.fn(() => ({
+    mutateAsync: vi.fn(),
+  })),
+  useRemoveQuestionBookmark: vi.fn(() => ({
+    mutateAsync: vi.fn(),
+  })),
   useVoteQuestion: vi.fn(() => ({
     mutateAsync: vi.fn(),
   })),
@@ -196,6 +202,22 @@ describe("QuestionPage", () => {
     expect(screen.getByRole("button", { name: /delete/i })).toBeInTheDocument();
   });
 
+  it("renders bookmark button", () => {
+    vi.mocked(useAuthStore).mockReturnValue({
+      selfProfile: { id: 1},
+      token: "mock-token",
+    });
+    render(
+      <MemoryRouter initialEntries={["/question/1"]}>
+        <Routes>
+          <Route path="/question/:questionId" element={<QuestionPage />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole("button", { name: /bookmark/i })).toBeInTheDocument();
+  });
+
   it("updates difficulty counts when voting", async () => {
     // Mock the auth store with a logged-in user
     vi.mocked(useAuthStore).mockReturnValue({

frontend/src/routes/question.tsx

@@ -6,6 +6,7 @@ import { DifficultyBar } from "@/components/DifficultyBar";
 import ErrorAlert from "@/components/ErrorAlert";
 import { ExerciseCard } from "@/components/ExerciseCard";
 import FollowButton from "@/components/FollowButton";
+import BookmarkButton from "@/components/BookmarkButton";
 import { FullscreenLoading } from "@/components/FullscreenLoading";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -138,6 +139,10 @@ export default function QuestionPage() {
                 <Trash className="h-5 w-5" />
               </Button>
             )}
+            {!!token && (
+          <BookmarkButton
+          question = {{questionId: question.id, bookmarked: question.bookmarked, }}
+          />)}
           </div>
         </div>