feat(desktop): trending

DIYgod · DIYgod · commit eb6a40954f86 · 2025-05-03T13:59:44.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/discover/feed-card.tsx b/apps/desktop/layer/renderer/src/modules/discover/feed-card.tsx
@@ -2,6 +2,7 @@ import { Button } from "@follow/components/ui/button/index.js"
 import { Card, CardContent, CardFooter, CardHeader } from "@follow/components/ui/card/index.jsx"
 import { RelativeTime } from "@follow/components/ui/datetime/index.js"
 import { getBackgroundGradient } from "@follow/utils/color"
+import { cn } from "@follow/utils/utils"
 import type { FC } from "react"
 import { memo } from "react"
 import { useTranslation } from "react-i18next"
@@ -24,7 +25,9 @@ export const FeedCard: FC<{
   onSuccess?: (item: DiscoverSearchData[number]) => void
   onUnSubscribed?: (item: DiscoverSearchData[number]) => void
   children?: React.ReactNode
-}> = memo(({ item, onSuccess, children }) => {
+  followButtonVariant?: "ghost"
+  followButtonClassName?: string
+}> = memo(({ item, onSuccess, children, followButtonVariant, followButtonClassName }) => {
   const follow = useFollow()
   const { t } = useTranslation()
 
@@ -58,7 +61,7 @@ export const FeedCard: FC<{
               </div>
             </CardContent>
           )}
-          <CardFooter className="flex justify-between gap-4 border-t border-zinc-100/80 py-3 dark:border-zinc-800/80">
+          <CardFooter className="flex justify-between gap-4 pb-3">
             <div className="flex items-center gap-3 text-sm text-zinc-500 dark:text-zinc-400">
               <div className="flex items-center gap-1.5">
                 <i className="i-mgc-user-3-cute-re" />
@@ -98,7 +101,7 @@ export const FeedCard: FC<{
                 {t("discover.preview")}
               </Button>
               <Button
-                variant={item.isSubscribed ? "outline" : undefined}
+                variant={item.isSubscribed ? "outline" : followButtonVariant}
                 disabled={item.isSubscribed}
                 onClick={() => {
                   follow({
@@ -113,14 +116,15 @@ export const FeedCard: FC<{
                     },
                   })
                 }}
-                buttonClassName={`relative overflow-hidden rounded-lg text-sm font-medium transition-all duration-300 ${
+                buttonClassName={cn(
+                  "relative overflow-hidden rounded-lg text-sm font-medium transition-all duration-300",
                   item.isSubscribed
                     ? "border-zinc-200/80 text-zinc-400 dark:border-zinc-700/80"
-                    : ""
-                }`}
+                    : "",
+                  followButtonClassName,
+                )}
               >
                 {item.isSubscribed ? t("feed.actions.followed") : t("feed.actions.follow")}
-                {/* <i className="i-mgc-add-cute-re size-5 text-white" /> */}
               </Button>
             </div>
           </CardFooter>
diff --git a/apps/desktop/layer/renderer/src/modules/discover/recommendations.tsx b/apps/desktop/layer/renderer/src/modules/discover/recommendations.tsx
@@ -143,7 +143,7 @@ export function Recommendations() {
   }
 
   return (
-    <div className="mt-12 w-full max-w-[1200px]">
+    <div className="mt-12 w-full max-w-[800px]">
       <div className="center relative flex">
         <div className="absolute bottom-0 right-0 flex items-center gap-2">
           <span className="text-headline text-text font-medium">Preferred language:</span>
@@ -167,7 +167,7 @@ export function Recommendations() {
         )}
       </div>
 
-      <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+      <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
         {RSSHubCategories.map((cat) => (
           <Card
             key={cat}
@@ -177,7 +177,7 @@ export function Recommendations() {
             }}
             onClick={() => handleShowCategoryContent(cat)}
           >
-            <CardContent className="flex min-h-[100px] flex-col items-center justify-center p-4 text-center">
+            <CardContent className="flex aspect-square flex-col items-center justify-center p-4 text-center">
               <div className="mb-2 text-2xl">{CategoryMap[cat]?.emoji}</div>
               <div className="font-medium text-white">
                 {t(`discover.category.${cat}`, { ns: "common" })}
diff --git a/apps/desktop/layer/renderer/src/modules/discover/trending.tsx b/apps/desktop/layer/renderer/src/modules/discover/trending.tsx
@@ -0,0 +1,57 @@
+import type { FeedModel } from "@follow/models"
+import { cn } from "@follow/utils/utils"
+import { useQuery } from "@tanstack/react-query"
+import { useTranslation } from "react-i18next"
+
+import { apiFetch } from "~/lib/api-fetch"
+
+import { FeedCard } from "./feed-card"
+
+export function Trending() {
+  const { t } = useTranslation()
+  const { data } = useQuery({
+    queryKey: ["trending", "eng"],
+    queryFn: async () => {
+      return await apiFetch<{
+        data: {
+          feed: FeedModel
+        }[]
+      }>("/trending/feeds", {
+        method: "GET",
+        params: {
+          // language: "en",
+          // view: 0,
+          limit: 20,
+        },
+      })
+    },
+  })
+
+  return (
+    <div className="mt-4 w-full max-w-[800px]">
+      <div className="flex items-center justify-center gap-2 text-center text-lg font-medium">
+        <i className="i-mingcute-trending-up-line text-2xl" />
+        <span>{t("words.trending")}</span>
+      </div>
+      <div className="mt-8 grid grid-cols-2 gap-6">
+        {data?.data?.map((item, index) => (
+          <FeedCard
+            key={item.feed.id}
+            item={item}
+            followButtonVariant="ghost"
+            followButtonClassName="border-accent text-accent px-3 -mr-3"
+          >
+            <div
+              className={cn(
+                "center absolute -left-5 -top-5 size-12 rounded-br-3xl pl-4 pt-4 text-xs",
+                index < 3 ? "bg-accent text-white" : "bg-zinc-100",
+              )}
+            >
+              {index + 1}
+            </div>
+          </FeedCard>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/desktop/layer/renderer/src/modules/feed/feed-summary.tsx b/apps/desktop/layer/renderer/src/modules/feed/feed-summary.tsx
@@ -16,34 +16,26 @@ export function FollowSummary({
   docs?: string
   className?: string
 }) {
-  let siteLink: string | undefined
-  let feedLink: string | undefined
   let feedText: string | undefined
 
   switch (feed.type) {
     case "list": {
-      siteLink = UrlBuilder.shareList(feed.id)
-      feedLink = siteLink
       feedText = UrlBuilder.shareList(feed.id)
       break
     }
     case "inbox": {
-      siteLink = void 0
-      feedLink = siteLink
       feedText = `${feed.id}${env.VITE_INBOXES_EMAIL}`
       break
     }
     default: {
-      siteLink = feed.siteUrl || void 0
-      feedLink = feed.url || docs
       feedText = feed.url || docs
       break
     }
   }
 
   return (
     <div className={cn("flex select-text flex-col gap-2 text-sm", className)}>
-      <a href={siteLink} target="_blank" className="flex items-center" rel="noreferrer">
+      <div className="flex items-center">
         <FeedIcon
           feed={feed}
           fallbackUrl={docs}
@@ -56,12 +48,12 @@ export function FollowSummary({
             {feed.description}
           </EllipsisHorizontalTextWithTooltip>
         </div>
-      </a>
+      </div>
       <div className="flex items-center gap-1 truncate text-zinc-500">
         <i className="i-mgc-right-cute-re shrink-0" />
-        <a href={feedLink} target="_blank" rel="noreferrer" className="truncate">
+        <div className="truncate">
           <EllipsisHorizontalTextWithTooltip>{feedText}</EllipsisHorizontalTextWithTooltip>
-        </a>
+        </div>
       </div>
     </div>
   )
diff --git a/apps/desktop/layer/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx b/apps/desktop/layer/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
@@ -16,6 +16,7 @@ import { DiscoverImport } from "~/modules/discover/import"
 import { DiscoverInboxList } from "~/modules/discover/inbox-list-form"
 import { Recommendations } from "~/modules/discover/recommendations"
 import { DiscoverTransform } from "~/modules/discover/transform-form"
+import { Trending } from "~/modules/discover/trending"
 import { DiscoverUser } from "~/modules/discover/user-form"
 
 const tabs: {
@@ -114,6 +115,7 @@ export function Component() {
           </TabsContent>
         ))}
       </Tabs>
+      <Trending />
       <AppErrorBoundary errorType={ErrorComponentType.RSSHubDiscoverError}>
         <Recommendations />
       </AppErrorBoundary>
diff --git a/packages/internal/shared/src/hono.ts b/packages/internal/shared/src/hono.ts
