feat: display collect and uncollect button

src/renderer/src/hooks/useEntryActions.tsx

@@ -4,6 +4,7 @@ import { ofetch } from "ofetch"
 import { useQuery } from "@tanstack/react-query"
 import { client } from "@renderer/lib/client"
 import { EntriesResponse } from "@renderer/lib/types"
+import { apiFetch } from "@renderer/lib/queries/api-fetch"
 
 export const useCheckEagle = () =>
   useQuery({
@@ -18,6 +19,22 @@ export const useCheckEagle = () =>
     },
   })
 
+export const useIsCollected = (entryId: string) =>
+  useQuery({
+    queryKey: ["is-collected", entryId],
+    queryFn: async () => {
+      const { data: collected } = await apiFetch<{
+        data: boolean
+      }>("/collections", {
+        query: {
+          entryId,
+        },
+      })
+
+      return collected
+    },
+  })
+
 export const useEntryActions = ({
   view,
   entry,
@@ -26,9 +43,22 @@ export const useEntryActions = ({
   entry: EntriesResponse[number]
 }) => {
   const checkEagle = useCheckEagle()
+  const isCollected = useIsCollected(entry.id)
 
   const items = [
     [
+      {
+        name: "Collect",
+        className: "i-mingcute-star-line",
+        action: "collect",
+        disabled: isCollected.data,
+      },
+      {
+        name: "Uncollect",
+        className: "i-mingcute-star-fill",
+        action: "uncollect",
+        disabled: !isCollected.data,
+      },
       {
         name: "Copy Link",
         className: "i-mingcute-link-line",