From 70014559200601bdecacc1cacf8e22dd609feeb3 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:45:10 +0800
Subject: [PATCH] feat: add boost certification to feed list

---
 .../src/modules/boost/boost-certification.tsx | 46 +++++++++++++++++++
 apps/renderer/src/modules/boost/hooks.tsx     | 16 +++++++
 .../renderer/src/modules/feed-column/item.tsx |  2 +
 apps/renderer/src/store/subscription/store.ts |  5 ++
 locales/app/en.json                           |  1 +
 5 files changed, 70 insertions(+)
 create mode 100644 apps/renderer/src/modules/boost/boost-certification.tsx

diff --git a/apps/renderer/src/modules/boost/boost-certification.tsx b/apps/renderer/src/modules/boost/boost-certification.tsx
new file mode 100644
index 000000000..2c6e71cb8
--- /dev/null
+++ b/apps/renderer/src/modules/boost/boost-certification.tsx
@@ -0,0 +1,46 @@
+import { useTranslation } from "react-i18next"
+
+import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "~/components/ui/tooltip"
+import { cn } from "~/lib/utils"
+import type { FeedOrListRespModel } from "~/models"
+
+import { useBoostModal, useIsFeedBoosted } from "./hooks"
+
+export const BoostCertification = ({
+  feed,
+  className,
+}: {
+  feed: FeedOrListRespModel
+  className?: string
+}) => {
+  const showBoostModal = useBoostModal()
+  const { t } = useTranslation()
+  const isFeedBoosted = useIsFeedBoosted(feed.id)
+  if (!isFeedBoosted) return null
+
+  return (
+    <Tooltip delayDuration={300}>
+      <TooltipTrigger asChild>
+        <i
+          className={cn(
+            "i-mgc-rocket-cute-fi ml-1.5 shrink-0 cursor-pointer text-amber-500 hover:bg-amber-400",
+            className,
+          )}
+          onClick={(e) => {
+            e.stopPropagation()
+            showBoostModal(feed.id)
+          }}
+        />
+      </TooltipTrigger>
+
+      <TooltipPortal>
+        <TooltipContent className="px-4 py-2">
+          <div className="flex items-center text-base">
+            <i className="i-mgc-rocket-cute-fi mr-2 shrink-0 text-amber-500" />
+            {t("boost.feed_being_boosted")}
+          </div>
+        </TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  )
+}
diff --git a/apps/renderer/src/modules/boost/hooks.tsx b/apps/renderer/src/modules/boost/hooks.tsx
index a77508b83..fcf9f7cbd 100644
--- a/apps/renderer/src/modules/boost/hooks.tsx
+++ b/apps/renderer/src/modules/boost/hooks.tsx
@@ -1,7 +1,9 @@
+import { atom } from "jotai"
 import { useCallback } from "react"
 
 import { useAsyncModal } from "~/components/ui/modal/helper/use-async-modal"
 import { useAuthQuery, useI18n } from "~/hooks/common"
+import { createAtomHooks } from "~/lib/jotai"
 import { boosts } from "~/queries/boosts"
 
 import { BoostModalContent } from "./modal"
@@ -27,3 +29,17 @@ export const useBoostModal = () => {
     [present, t],
   )
 }
+
+const [, , useFeedBoostMap, , getFeedBoostMap, setFeedBoostMap] = createAtomHooks(
+  atom<Record<string, boolean>>({}),
+)
+
+export const updateFeedBoostStatus = (feedId: string, isBoosted: boolean) => {
+  const prev = getFeedBoostMap()
+  setFeedBoostMap({ ...prev, [feedId]: isBoosted })
+}
+
+export const useIsFeedBoosted = (feedId: string) => {
+  const map = useFeedBoostMap()
+  return map[feedId] ?? false
+}
diff --git a/apps/renderer/src/modules/feed-column/item.tsx b/apps/renderer/src/modules/feed-column/item.tsx
index c3fb1916a..cd1960f44 100644
--- a/apps/renderer/src/modules/feed-column/item.tsx
+++ b/apps/renderer/src/modules/feed-column/item.tsx
@@ -24,6 +24,7 @@ import { useListById } from "~/store/list"
 import { subscriptionActions, useSubscriptionByFeedId } from "~/store/subscription"
 import { useFeedUnreadStore } from "~/store/unread"
 
+import { BoostCertification } from "../boost/boost-certification"
 import { feedColumnStyles } from "./styles"
 import { UnreadNumber } from "./unread-number"
 
@@ -122,6 +123,7 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
           <FeedIcon fallback feed={feed} size={16} />
           <div className="truncate">{getPreferredTitle(feed)}</div>
           {isFeed && <FeedCertification feed={feed} className="text-[15px]" />}
+          {isFeed && <BoostCertification feed={feed} className="text-[15px]" />}
           {isFeed && feed.errorAt && (
             <Tooltip delayDuration={300}>
               <TooltipTrigger asChild>
diff --git a/apps/renderer/src/store/subscription/store.ts b/apps/renderer/src/store/subscription/store.ts
index a218d85b0..b60ffdc2e 100644
--- a/apps/renderer/src/store/subscription/store.ts
+++ b/apps/renderer/src/store/subscription/store.ts
@@ -9,6 +9,7 @@ import { apiClient } from "~/lib/api-fetch"
 import { FeedViewType } from "~/lib/enum"
 import { capitalizeFirstLetter } from "~/lib/utils"
 import type { FeedModel, InboxModel, ListModelPoplutedFeeds, SubscriptionModel } from "~/models"
+import { updateFeedBoostStatus } from "~/modules/boost/hooks"
 import { SubscriptionService } from "~/services"
 
 import { entryActions } from "../entry"
@@ -173,6 +174,10 @@ class SubscriptionActions {
       } else if ("inboxes" in subscription) {
         inboxes.push(subscription.inboxes)
       }
+
+      if ("boost" in subscription) {
+        updateFeedBoostStatus(subscription.feedId, subscription.boost.boosters.length > 0)
+      }
     }
     this.updateCategoryOpenState(transformedData.filter((s) => s.category || s.defaultCategory))
     feedActions.upsertMany(feeds)
diff --git a/locales/app/en.json b/locales/app/en.json
index c78353f7b..ead7caa07 100644
--- a/locales/app/en.json
+++ b/locales/app/en.json
@@ -29,6 +29,7 @@
   "app.toggle_sidebar": "Toggle Sidebar",
   "beta_access": "Beta Access",
   "boost.boost_feed": "Boost Feed",
+  "boost.feed_being_boosted": "Feed being boosted",
   "discover.any_url_or_keyword": "Any URL or Keyword",
   "discover.default_option": " (default)",
   "discover.feed_description": "The description of this feed is as follows, and you can fill out the parameter form with the relevant information.",