feat: unread data updating and unfollow button in feed modal

src/renderer/src/hooks/biz/useSubscriptionActions.tsx

@@ -0,0 +1,58 @@
+import { apiClient } from "@renderer/lib/api-fetch"
+import { Queries } from "@renderer/queries"
+import type { SubscriptionPlainModel } from "@renderer/store"
+import { getFeedById, unreadActions } from "@renderer/store"
+import { useMutation } from "@tanstack/react-query"
+import { toast } from "sonner"
+
+export const useDeleteSubscription = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => useMutation({
+  mutationFn: async (feed: SubscriptionPlainModel) =>
+    apiClient.subscriptions.$delete({
+      json: {
+        feedId: feed.feedId,
+      },
+    }),
+
+  onSuccess: (_, variables) => {
+    Queries.subscription.byView(variables.view).invalidate()
+    unreadActions.updateByFeedId(variables.feedId, 0)
+
+    const feed = getFeedById(variables.feedId)
+
+    if (!feed) return
+    toast(
+      <>
+        Feed
+        {" "}
+        <i className="mr-px font-semibold">{feed.title}</i>
+        {" "}
+        has been
+        unfollowed.
+      </>,
+      {
+        duration: 3000,
+        action: {
+          label: "Undo",
+          onClick: async () => {
+            await apiClient.subscriptions.$post({
+              json: {
+                url: feed.url,
+                view: variables.view,
+                category: variables.category,
+                isPrivate: variables.isPrivate,
+              },
+            })
+
+            Queries.subscription.byView(variables.view).invalidate()
+            unreadActions.fetchUnreadByView(variables.view)
+          },
+        },
+      },
+    )
+    onSuccess?.()
+  },
+})

src/renderer/src/modules/discover/feed-form.tsx

@@ -22,13 +22,15 @@ import {
 import { Switch } from "@renderer/components/ui/switch"
 import { ViewSelectContent } from "@renderer/components/view-select-content"
 import { useBizQuery } from "@renderer/hooks"
+import { useDeleteSubscription } from "@renderer/hooks/biz/useSubscriptionActions"
 import { apiClient } from "@renderer/lib/api-fetch"
 import { tipcClient } from "@renderer/lib/client"
 import { nextFrame } from "@renderer/lib/dom"
 import { FeedViewType } from "@renderer/lib/enum"
 import { cn } from "@renderer/lib/utils"
 import { Queries } from "@renderer/queries"
 import { useFeed } from "@renderer/queries/feed"
+import { unreadActions } from "@renderer/store"
 import { useMutation } from "@tanstack/react-query"
 import { useEffect, useRef } from "react"
 import { useForm } from "react-hook-form"
@@ -104,11 +106,13 @@ export const FeedForm: Component<{
         tipcClient?.invalidateQuery(
           Queries.subscription.byView(feed.data?.subscription?.view).key,
         )
+        unreadActions.fetchUnreadByView(feed.data?.subscription?.view)
       }
       Queries.subscription.byView(Number.parseInt(variables.view)).invalidate()
       tipcClient?.invalidateQuery(
         Queries.subscription.byView(Number.parseInt(variables.view)).key,
       )
+      unreadActions.fetchUnreadByView(Number.parseInt(variables.view))
 
       const feedId = feed.data?.feed.id
       if (feedId) {
@@ -127,6 +131,16 @@ export const FeedForm: Component<{
     },
   })
 
+  const deleteSubscription = useDeleteSubscription({
+    onSuccess: () => {
+      if (!asWidget && !isSubscribed) {
+        window.close()
+      }
+
+      onSuccess?.()
+    },
+  })
+
   function onSubmit(values: z.infer<typeof formSchema>) {
     followMutation.mutate(values)
   }
@@ -252,7 +266,22 @@ export const FeedForm: Component<{
                     )}
                   />
 
-                  <div className="flex flex-1 items-end justify-end">
+                  <div className="flex flex-1 items-end justify-end gap-4">
+                    {isSubscribed && (
+                      <StyledButton
+                        ref={buttonRef}
+                        isLoading={deleteSubscription.isPending}
+                        className="bg-red-500"
+                        onClick={(e) => {
+                          e.preventDefault()
+                          if (feed.data?.subscription) {
+                            deleteSubscription.mutate(feed.data.subscription)
+                          }
+                        }}
+                      >
+                        Unfollow
+                      </StyledButton>
+                    )}
                     <StyledButton
                       ref={buttonRef}
                       type="submit"

src/renderer/src/modules/feed-column/item.tsx

@@ -11,18 +11,15 @@ import {
 } from "@renderer/components/ui/tooltip"
 import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
-import { apiClient } from "@renderer/lib/api-fetch"
+import { useDeleteSubscription } from "@renderer/hooks/biz/useSubscriptionActions"
 import { levels } from "@renderer/lib/constants"
 import dayjs from "@renderer/lib/dayjs"
 import { nextFrame } from "@renderer/lib/dom"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
-import { Queries } from "@renderer/queries"
 import type { SubscriptionPlainModel } from "@renderer/store"
 import { getFeedById, useFeedById, useUnreadStore } from "@renderer/store"
-import { useMutation } from "@tanstack/react-query"
 import { memo, useCallback } from "react"
-import { toast } from "sonner"
 
 import { useFeedClaimModal } from "../claim/hooks"
 import { FeedForm } from "../discover/feed-form"
@@ -60,50 +57,7 @@ const FeedItemImpl = ({
     [subscription.feedId, navigate, view],
   )
 
-  const deleteMutation = useMutation({
-    mutationFn: async (feed: SubscriptionPlainModel) =>
-      apiClient.subscriptions.$delete({
-        json: {
-          feedId: feed.feedId,
-        },
-      }),
-
-    onSuccess: (_, variables) => {
-      Queries.subscription.byView(variables.view).invalidate()
-
-      const feed = getFeedById(variables.feedId)
-
-      if (!feed) return
-      toast(
-        <>
-          Feed
-          {" "}
-          <i className="mr-px font-semibold">{feed.title}</i>
-          {" "}
-          has been
-          unfollowed.
-        </>,
-        {
-          duration: 3000,
-          action: {
-            label: "Undo",
-            onClick: async () => {
-              await apiClient.subscriptions.$post({
-                json: {
-                  url: feed.url,
-                  view: variables.view,
-                  category: variables.category,
-                  isPrivate: variables.isPrivate,
-                },
-              })
-
-              Queries.subscription.byView(variables.view).invalidate()
-            },
-          },
-        },
-      )
-    },
-  })
+  const deleteSubscription = useDeleteSubscription({})
 
   const feedUnread = useUnreadStore(
     (state) => state.data[subscription.feedId] || 0,
@@ -162,7 +116,7 @@ const FeedItemImpl = ({
             {
               type: "text",
               label: "Unfollow",
-              click: () => deleteMutation.mutate(subscription),
+              click: () => deleteSubscription.mutate(subscription),
             },
             {
               type: "separator",