feat: add ResourceBookmark component and integrate it into ArticlePage and ArticleCard for enhanced bookmarking functionality

Author: kingRayhan

src/app/[username]/[articleHandle]/page.tsx

@@ -18,6 +18,7 @@ import { notFound } from "next/navigation";
 import type { Article, WithContext } from "schema-dts";
 import { eq } from "sqlkit";
 import ArticleSidebar from "./_components/ArticleSidebar";
+import ResourceBookmark from "@/components/ResourceBookmark";
 
 interface ArticlePageProps {
   params: Promise<{
@@ -155,7 +156,16 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
             <h1 className="text-2xl font-bold">{article?.title ?? ""}</h1>
           </div>
 
-          <ResourceReaction resource_type="ARTICLE" resource_id={article.id} />
+          <div className="flex items-center justify-between mb-4">
+            <ResourceReaction
+              resource_type="ARTICLE"
+              resource_id={article.id}
+            />
+            <ResourceBookmark
+              resource_type="ARTICLE"
+              resource_id={article.id}
+            />
+          </div>
 
           <div className="mx-auto content-typography">{parsedHTML}</div>
         </div>

src/components/ArticleCard.tsx

@@ -12,6 +12,7 @@ import { ResourceBookmarkable } from "./render-props/ResourceBookmarkable";
 import ResourceReaction from "./ResourceReaction";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import UserInformationCard from "./UserInformationCard";
+import ResourceBookmark from "./ResourceBookmark";
 
 interface ArticleCardProps {
   id: string;
@@ -118,39 +119,7 @@ const ArticleCard = ({
 
       <div className="mt-4 flex items-center justify-between">
         <ResourceReaction resource_type="ARTICLE" resource_id={id} />
-
-        <ResourceBookmarkable
-          resource_type="ARTICLE"
-          resource_id={id}
-          render={({ bookmarked, toggle }) => (
-            <button
-              onClick={() => {
-                if (!session?.user) {
-                  loginPopup.show();
-                  return;
-                }
-                toggle();
-              }}
-              className={clsx(
-                "transition-colors duration-300 flex cursor-pointer px-2 py-1 rounded-sm hover:bg-primary/20",
-                { "bg-primary/20": bookmarked }
-              )}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className={clsx("size-5 stroke-2 fill-transparent", {
-                  "!stroke-current": !bookmarked,
-                  "!fill-current": bookmarked,
-                })}
-              >
-                <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
-              </svg>
-            </button>
-          )}
-        />
+        <ResourceBookmark resource_type="ARTICLE" resource_id={id} />
       </div>
     </div>
   );

src/components/ResourceBookmark.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import { ResourceBookmarkable } from "./render-props/ResourceBookmarkable";
+import { useSession } from "@/store/session.atom";
+import { useLoginPopup } from "./app-login-popup";
+import clsx from "clsx";
+
+interface ResourceBookmarkProps {
+  resource_type: "ARTICLE" | "COMMENT";
+  resource_id: string;
+}
+const ResourceBookmark: React.FC<ResourceBookmarkProps> = ({
+  resource_type,
+  resource_id,
+}) => {
+  const session = useSession();
+  const loginPopup = useLoginPopup();
+
+  return (
+    <ResourceBookmarkable
+      resource_type={resource_type}
+      resource_id={resource_id}
+      render={({ bookmarked, toggle }) => (
+        <button
+          onClick={() => {
+            if (!session?.user) {
+              loginPopup.show();
+              return;
+            }
+            toggle();
+          }}
+          className={clsx(
+            "transition-colors duration-300 flex cursor-pointer px-2 py-1 rounded-sm hover:bg-primary/20",
+            { "bg-primary/20": bookmarked }
+          )}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={clsx("size-5 stroke-2 fill-transparent", {
+              "!stroke-current": !bookmarked,
+              "!fill-current": bookmarked,
+            })}
+          >
+            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+          </svg>
+        </button>
+      )}
+    />
+  );
+};
+
+export default ResourceBookmark;