feat(desktop): use feed preview in trending

DIYgod · DIYgod · commit 7500ad2f050a · 2025-05-05T17:53:20.000+08:00
diff --git a/apps/desktop/layer/renderer/src/atoms/preview.ts b/apps/desktop/layer/renderer/src/atoms/preview.ts
@@ -0,0 +1,5 @@
+import { atom } from "jotai"
+
+import { createAtomHooks } from "~/lib/jotai"
+
+export const [, , , , previewBackPath, setPreviewBackPath] = createAtomHooks(atom<string>())
diff --git a/apps/desktop/layer/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx b/apps/desktop/layer/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx
diff --git a/apps/desktop/layer/renderer/src/components/errors/index.ts b/apps/desktop/layer/renderer/src/components/errors/index.ts
@@ -5,9 +5,6 @@ import { ErrorComponentType } from "./enum"
 const ErrorFallbackMap = {
   [ErrorComponentType.Modal]: lazy(() => import("./ModalError")),
   [ErrorComponentType.Page]: lazy(() => import("./PageError")),
-  [ErrorComponentType.FeedFoundCanBeFollow]: lazy(
-    () => import("./FeedFoundCanBeFollowErrorFallback"),
-  ),
   [ErrorComponentType.FeedNotFound]: lazy(() => import("./FeedNotFound")),
   [ErrorComponentType.RSSHubDiscoverError]: lazy(() => import("./RSSHubError")),
 }
diff --git a/apps/desktop/layer/renderer/src/modules/discover/feed-card.tsx b/apps/desktop/layer/renderer/src/modules/discover/feed-card.tsx
@@ -6,25 +6,29 @@ import { cn } from "@follow/utils/utils"
 import type { FC } from "react"
 import { memo } from "react"
 import { useTranslation } from "react-i18next"
+import { useLocation } from "react-router"
 
+import { setPreviewBackPath } from "~/atoms/preview"
 import { Media } from "~/components/ui/media"
 import { useFollow } from "~/hooks/biz/useFollow"
+import { navigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { getRouteParams } from "~/hooks/biz/useRouteParams"
 import { useFeedSafeUrl } from "~/hooks/common/useFeedSafeUrl"
 import type { apiClient } from "~/lib/api-fetch"
-import { UrlBuilder } from "~/lib/url-builder"
 import { useSubscriptionByFeedId } from "~/store/subscription"
 
 import { FollowSummary } from "../feed/feed-summary"
 
 const numberFormatter = new Intl.NumberFormat("en-US", {})
 
-type DiscoverSearchData = Awaited<ReturnType<typeof apiClient.discover.$post>>["data"]
+type DiscoverItem = Awaited<ReturnType<typeof apiClient.discover.$post>>["data"][number] & {
+  view?: number
+}
 
 export const FeedCard: FC<{
-  item: DiscoverSearchData[number]
-  onSuccess?: (item: DiscoverSearchData[number]) => void
-  onUnSubscribed?: (item: DiscoverSearchData[number]) => void
+  item: DiscoverItem
+  onSuccess?: (item: DiscoverItem) => void
+  onUnSubscribed?: (item: DiscoverItem) => void
   children?: React.ReactNode
   followButtonVariant?: "ghost" | "outline"
   followedButtonVariant?: "ghost" | "outline"
@@ -47,6 +51,7 @@ export const FeedCard: FC<{
 
     const subscription = useSubscriptionByFeedId(item.feed?.id || item.list?.id || "")
     const isSubscribed = !!subscription
+    const location = useLocation()
 
     return (
       <Card
@@ -113,17 +118,23 @@ export const FeedCard: FC<{
               </div>
 
               <div className="flex items-center justify-between gap-2">
-                <Button
-                  variant="ghost"
-                  disabled={!item.feed?.id}
-                  buttonClassName="rounded-lg px-3 text-sm font-medium text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/80 dark:hover:text-white"
-                  onClick={() => {
-                    if (!item.feed?.id) return
-                    window.open(UrlBuilder.shareFeed(item.feed.id, 0), "_blank")
-                  }}
-                >
-                  {t("discover.preview")}
-                </Button>
+                {!isSubscribed && (
+                  <Button
+                    variant="ghost"
+                    disabled={!item.feed?.id}
+                    buttonClassName="rounded-lg px-3 text-sm font-medium text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/80 dark:hover:text-white"
+                    onClick={() => {
+                      if (!item.feed?.id) return
+                      setPreviewBackPath(location.pathname)
+                      navigateEntry({
+                        feedId: item.feed.id,
+                        view: item.view ?? 0,
+                      })
+                    }}
+                  >
+                    {t("discover.preview")}
+                  </Button>
+                )}
                 <Button
                   variant={isSubscribed ? followedButtonVariant : followButtonVariant}
                   onClick={() => {
@@ -157,7 +168,7 @@ export const FeedCard: FC<{
 )
 
 const SearchResultContent: FC<{
-  entry: NonUndefined<DiscoverSearchData[number]["entries"]>[number]
+  entry: NonUndefined<DiscoverItem["entries"]>[number]
 }> = memo(({ entry }) => {
   const safeUrl = useFeedSafeUrl(entry.id)
   return (
@@ -191,7 +202,7 @@ const SearchResultContent: FC<{
 })
 
 const FeedCardMediaThumbnail: FC<{
-  entry: NonUndefined<DiscoverSearchData[number]["entries"]>[number]
+  entry: NonUndefined<DiscoverItem["entries"]>[number]
 }> = ({ entry }) => {
   const [, , , bgAccent, bgAccentLight] = getBackgroundGradient(
     entry.title || entry.url || "Untitled",
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/hooks/useEntriesByView.ts b/apps/desktop/layer/renderer/src/modules/entry-column/hooks/useEntriesByView.ts
@@ -14,7 +14,7 @@ import { feedUnreadActions } from "~/store/unread"
 
 const anyString = [] as string[]
 export const useEntriesByView = ({ onReset }: { onReset?: () => void }) => {
-  const { feedId, isAllFeeds, view, isCollection, inboxId, listId } = useRouteParams()
+  const { feedId, isAllFeeds, view, isCollection, inboxId, listId, isPreview } = useRouteParams()
 
   const unreadOnly = useGeneralSettingKey("unreadOnly")
 
@@ -29,15 +29,15 @@ export const useEntriesByView = ({ onReset }: { onReset?: () => void }) => {
       inboxId,
       listId,
       view,
-      ...(unreadOnly === true && { read: false }),
+      ...(unreadOnly === true && !isPreview && { read: false }),
     }
 
     if (feedId && listId && isBizId(feedId)) {
       delete params.listId
     }
 
     return params
-  }, [feedId, folderIds, inboxId, listId, unreadOnly, view])
+  }, [feedId, folderIds, inboxId, listId, unreadOnly, view, isPreview])
   const query = useEntries(entriesOptions)
 
   const [fetchedTime, setFetchedTime] = useState<number>()
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/index.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/index.tsx
@@ -1,13 +1,11 @@
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { FeedViewType, views } from "@follow/constants"
 import { useTitle } from "@follow/hooks"
-import type { FeedModel } from "@follow/models/types"
 import { isBizId } from "@follow/utils/utils"
 import type { Range, Virtualizer } from "@tanstack/react-virtual"
 import { memo, useCallback, useEffect, useRef } from "react"
 
 import { useGeneralSettingKey } from "~/atoms/settings/general"
-import { FeedFoundCanBeFollowError } from "~/components/errors/FeedFoundCanBeFollowErrorFallback"
 import { FeedNotFound } from "~/components/errors/FeedNotFound"
 import { FEED_COLLECTION_LIST, ROUTE_FEED_PENDING } from "~/constants"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
@@ -193,12 +191,6 @@ const AddFeedHelper = () => {
   if (feedQuery.error && feedQuery.error.statusCode === 404) {
     throw new FeedNotFound()
   }
-
-  if (!feedQuery.data) {
-    return null
-  }
-
-  throw new FeedFoundCanBeFollowError(feedQuery.data.feed as FeedModel)
 }
 
 export const EntryColumn = memo(EntryColumnImpl)
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryListHeader.electron.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryListHeader.electron.tsx
@@ -8,7 +8,9 @@ import { stopPropagation } from "@follow/utils/dom"
 import { cn, isBizId } from "@follow/utils/utils"
 import type { FC } from "react"
 import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router"
 
+import { previewBackPath } from "~/atoms/preview"
 import { setGeneralSetting, useGeneralSettingKey } from "~/atoms/settings/general"
 import { useTimelineColumnShow } from "~/atoms/sidebar"
 import { useWhoami } from "~/atoms/user"
@@ -64,6 +66,9 @@ export const EntryListHeader: FC<{
   const titleStyleBasedView = ["pl-6", "pl-7", "pl-7", "pl-7", "px-5", "pl-6"]
 
   const feedColumnShow = useTimelineColumnShow()
+
+  const navigate = useNavigate()
+
   return (
     <div
       className={cn(
@@ -144,19 +149,32 @@ export const EntryListHeader: FC<{
         </div>
       </div>
       {isPreview && (
-        <Button
-          size="lg"
-          buttonClassName="mt-4"
-          onClick={() => {
-            follow({
-              isList: !!listId,
-              id: listId ?? feedId,
-              url: feed?.url,
-            })
-          }}
-        >
-          {tCommon("words.follow")}
-        </Button>
+        <div className="mt-4 flex items-center justify-center gap-2">
+          <Button
+            size="lg"
+            buttonClassName="flex-1 max-w-72"
+            variant="outline"
+            onClick={(e) => {
+              e.stopPropagation()
+              navigate(previewBackPath() || "/")
+            }}
+          >
+            {tCommon("words.back")}
+          </Button>
+          <Button
+            size="lg"
+            buttonClassName="flex-1 max-w-72"
+            onClick={() => {
+              follow({
+                isList: !!listId,
+                id: listId ?? feedId,
+                url: feed?.url,
+              })
+            }}
+          >
+            {tCommon("words.follow")}
+          </Button>
+        </div>
       )}
 
       {/* <TimelineTabs /> */}
diff --git a/apps/desktop/layer/renderer/src/modules/trending/index.tsx b/apps/desktop/layer/renderer/src/modules/trending/index.tsx
@@ -64,6 +64,8 @@ export function Trending({
       return await apiFetch<{
         data: {
           feed: FeedModel
+          view: number
+          subscriptionCount: number
         }[]
       }>("/trending/feeds", {
         method: "GET",
