feat(desktop): display trending in home

DIYgod · DIYgod · commit 1179dad29fde · 2025-05-03T21:17:52.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/app-layout/entry-content/EntryContentPlaceholder.tsx b/apps/desktop/layer/renderer/src/modules/app-layout/entry-content/EntryContentPlaceholder.tsx
@@ -10,9 +10,9 @@ import { ROUTE_FEED_PENDING } from "~/constants"
 import { useRouteParams } from "~/hooks/biz/useRouteParams"
 import { DayOf } from "~/modules/ai/ai-daily/constants"
 import { DailyItem } from "~/modules/ai/ai-daily/daily"
-import { EntryPlaceholderDaily } from "~/modules/ai/ai-daily/EntryPlaceholderDaily"
 import type { DailyView } from "~/modules/ai/ai-daily/types"
 import { EntryPlaceholderLogo } from "~/modules/entry-content/components/EntryPlaceholderLogo"
+import { Trending } from "~/modules/trending"
 
 import type { EntryContentPlaceholderContextValue } from "./EntryContentPlaceholderContext"
 import { EntryContentPlaceholderContext } from "./EntryContentPlaceholderContext"
@@ -28,20 +28,23 @@ export const EntryContentPlaceholder = () => {
   )
 
   const openedSummary = useAtomValue(ctxValue.openedSummary)
+
+  const isTrending = feedId === ROUTE_FEED_PENDING && view === FeedViewType.Articles
+
   return (
     <LayoutGroup>
       <EntryContentPlaceholderContext.Provider value={ctxValue}>
         <AnimatePresence>
           {openedSummary === null ? (
             <m.div
-              className="center size-full flex-col"
+              className={cn(
+                "flex size-full flex-col items-center",
+                isTrending ? "overflow-scroll p-11" : "center",
+              )}
               initial={{ opacity: 0.01, y: 300 }}
               animate={{ opacity: 1, y: 0 }}
             >
-              <EntryPlaceholderLogo />
-              {feedId === ROUTE_FEED_PENDING && view === FeedViewType.Articles && (
-                <EntryPlaceholderDaily view={view} />
-              )}
+              {isTrending ? <Trending narrow center /> : <EntryPlaceholderLogo />}
             </m.div>
           ) : (
             <SummaryDetailContent />
diff --git a/apps/desktop/layer/renderer/src/modules/discover/feed-card.tsx b/apps/desktop/layer/renderer/src/modules/discover/feed-card.tsx
@@ -27,112 +27,122 @@ export const FeedCard: FC<{
   children?: React.ReactNode
   followButtonVariant?: "ghost"
   followButtonClassName?: string
-}> = memo(({ item, onSuccess, children, followButtonVariant, followButtonClassName }) => {
-  const follow = useFollow()
-  const { t } = useTranslation()
+  className?: string
+}> = memo(
+  ({ item, onSuccess, children, followButtonVariant, followButtonClassName, className }) => {
+    const follow = useFollow()
+    const { t } = useTranslation()
 
-  return (
-    <Card
-      data-feed-id={item.feed?.id || item.list?.id}
-      className="select-text overflow-hidden border border-zinc-200/50 bg-white/80 shadow-sm backdrop-blur-xl transition-all duration-300 hover:shadow-lg dark:border-zinc-800/50 dark:bg-neutral-800/50"
-    >
-      {children}
-      <CardHeader className="pb-2">
-        <FollowSummary className="max-w-[462px]" feed={item.feed || item.list!} docs={item.docs} />
-      </CardHeader>
-      {item.docs ? (
-        <CardFooter className="pt-4">
-          <a href={item.docs} target="_blank" rel="noreferrer">
-            <Button className="rounded-full bg-zinc-900 px-6 text-white transition-opacity hover:opacity-90 dark:bg-white dark:text-zinc-900">
-              View Docs
-            </Button>
-          </a>
-        </CardFooter>
-      ) : (
-        <>
-          {!!item.entries?.length && (
-            <CardContent className="mb-4 px-6 py-0">
-              <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
-                {item.entries
-                  .filter((e) => !!e)
-                  .map((entry) => (
-                    <SearchResultContent key={entry.id} entry={entry} />
-                  ))}
-              </div>
-            </CardContent>
-          )}
-          <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" />
-
-                <span>
-                  {numberFormatter.format(item.subscriptionCount ?? 0)}{" "}
-                  {t("feed.follower", { count: item.subscriptionCount ?? 0 })}
-                </span>
-              </div>
-              {item.updatesPerWeek ? (
-                <div className="flex items-center gap-1.5">
-                  <i className="i-mgc-safety-certificate-cute-re" />
-                  <span>{t("feed.entry_week", { count: item.updatesPerWeek ?? 0 })}</span>
+    return (
+      <Card
+        data-feed-id={item.feed?.id || item.list?.id}
+        className={cn(
+          "select-text overflow-hidden rounded-b-none border-0 border-b border-zinc-200/50 bg-white/80 backdrop-blur-xl transition-all duration-300 dark:border-zinc-800/50 dark:bg-neutral-800/50",
+          className,
+        )}
+      >
+        {children}
+        <CardHeader className="px-4 py-5 pb-2">
+          <FollowSummary
+            className="max-w-[462px]"
+            feed={item.feed || item.list!}
+            docs={item.docs}
+          />
+        </CardHeader>
+        {item.docs ? (
+          <CardFooter className="p-4">
+            <a href={item.docs} target="_blank" rel="noreferrer">
+              <Button className="rounded-full bg-zinc-900 px-6 text-white transition-opacity hover:opacity-90 dark:bg-white dark:text-zinc-900">
+                View Docs
+              </Button>
+            </a>
+          </CardFooter>
+        ) : (
+          <>
+            {!!item.entries?.length && (
+              <CardContent className="mb-4 px-4 py-0">
+                <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+                  {item.entries
+                    .filter((e) => !!e)
+                    .map((entry) => (
+                      <SearchResultContent key={entry.id} entry={entry} />
+                    ))}
                 </div>
-              ) : item.entries?.[0]?.publishedAt ? (
+              </CardContent>
+            )}
+            <CardFooter className="flex justify-between gap-4 px-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-safe-alert-cute-re" />
-                  <span>{t("feed.updated_at")}</span>
-                  <RelativeTime
-                    date={item.entries[0].publishedAt}
-                    displayAbsoluteTimeAfterDay={Infinity}
-                  />
+                  <i className="i-mgc-user-3-cute-re" />
+
+                  <span>
+                    {numberFormatter.format(item.subscriptionCount ?? 0)}{" "}
+                    {t("feed.follower", { count: item.subscriptionCount ?? 0 })}
+                  </span>
                 </div>
-              ) : null}
-            </div>
+                {item.updatesPerWeek ? (
+                  <div className="flex items-center gap-1.5">
+                    <i className="i-mgc-safety-certificate-cute-re" />
+                    <span>{t("feed.entry_week", { count: item.updatesPerWeek ?? 0 })}</span>
+                  </div>
+                ) : item.entries?.[0]?.publishedAt ? (
+                  <div className="flex items-center gap-1.5">
+                    <i className="i-mgc-safe-alert-cute-re" />
+                    <span>{t("feed.updated_at")}</span>
+                    <RelativeTime
+                      date={item.entries[0].publishedAt}
+                      displayAbsoluteTimeAfterDay={Infinity}
+                    />
+                  </div>
+                ) : null}
+              </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>
-              <Button
-                variant={item.isSubscribed ? "outline" : followButtonVariant}
-                disabled={item.isSubscribed}
-                onClick={() => {
-                  follow({
-                    isList: !!item.list?.id,
-                    id: item.list?.id,
-                    url: item.feed?.url,
-                    defaultValues: {
-                      view: getRouteParams().view.toString(),
-                    },
-                    onSuccess() {
-                      onSuccess?.(item)
-                    },
-                  })
-                }}
-                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")}
-              </Button>
-            </div>
-          </CardFooter>
-        </>
-      )}
-    </Card>
-  )
-})
+              <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>
+                <Button
+                  variant={item.isSubscribed ? "outline" : followButtonVariant}
+                  disabled={item.isSubscribed}
+                  onClick={() => {
+                    follow({
+                      isList: !!item.list?.id,
+                      id: item.list?.id,
+                      url: item.feed?.url,
+                      defaultValues: {
+                        view: getRouteParams().view.toString(),
+                      },
+                      onSuccess() {
+                        onSuccess?.(item)
+                      },
+                    })
+                  }}
+                  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")}
+                </Button>
+              </div>
+            </CardFooter>
+          </>
+        )}
+      </Card>
+    )
+  },
+)
 
 const SearchResultContent: FC<{
   entry: NonUndefined<DiscoverSearchData[number]["entries"]>[number]
diff --git a/apps/desktop/layer/renderer/src/modules/discover/form.tsx b/apps/desktop/layer/renderer/src/modules/discover/form.tsx
@@ -317,7 +317,7 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
               </button>
             )}
           </div>
-          <div className="space-y-4 text-sm">
+          <div className="text-sm">
             {discoverSearchData?.map((item) => (
               <FeedCard
                 key={item.feed?.id || item.list?.id}
diff --git a/apps/desktop/layer/renderer/src/modules/discover/recommendations.tsx b/apps/desktop/layer/renderer/src/modules/discover/recommendations.tsx
@@ -141,21 +141,23 @@ export function Recommendations() {
   }
 
   return (
-    <div className="mt-12 w-full max-w-[800px] space-y-6">
-      <div className="flex items-center justify-center gap-2 text-center text-xl font-bold">
-        <i className="i-mgc-grid-2-cute-re text-xl" />
-        <span>{t("words.categories")}</span>
-      </div>
-      <div className="center flex justify-center">
-        <div className="flex items-center gap-2">
-          <span className="text-headline text-text font-medium">Language:</span>
-          <ResponsiveSelect
-            value={selectedLang}
-            onValueChange={handleLangChange}
-            triggerClassName="w-32 h-8 rounded"
-            size="sm"
-            items={LanguageOptions as any}
-          />
+    <div className="mt-4 w-full max-w-[800px] space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center justify-center gap-2 text-center text-xl font-bold">
+          <i className="i-mgc-grid-2-cute-re text-xl" />
+          <span>{t("words.categories")}</span>
+        </div>
+        <div className="center flex justify-center">
+          <div className="flex items-center gap-2">
+            <span className="text-text text-sm font-medium">Language:</span>
+            <ResponsiveSelect
+              value={selectedLang}
+              onValueChange={handleLangChange}
+              triggerClassName="h-8 rounded border-0"
+              size="sm"
+              items={LanguageOptions as any}
+            />
+          </div>
         </div>
       </div>
 
diff --git a/apps/desktop/layer/renderer/src/modules/feed/feed-icon.tsx b/apps/desktop/layer/renderer/src/modules/feed/feed-icon.tsx
@@ -139,7 +139,7 @@ export function FeedIcon({
     <span
       style={colorfulStyle}
       className={cn(
-        "flex shrink-0 items-center justify-center rounded-sm",
+        "mask-squircle mask flex shrink-0 items-center justify-center",
         "text-white",
         marginClassName,
         className,
@@ -166,7 +166,11 @@ export function FeedIcon({
       isIconLoadedSet.add(src!)
 
       ImageElement = (
-        <PlatformIcon url={siteUrl} style={sizeStyle} className={cn("center", className)}>
+        <PlatformIcon
+          url={siteUrl}
+          style={sizeStyle}
+          className={cn("center mask-squircle mask", className)}
+        >
           <m.img style={sizeStyle} {...(disableFadeIn || isIconLoaded ? {} : fadeInVariant)} />
         </PlatformIcon>
       )
@@ -182,7 +186,11 @@ export function FeedIcon({
       isIconLoadedSet.add(finalSrc)
 
       ImageElement = (
-        <PlatformIcon url={image} style={sizeStyle} className={cn("center", className)}>
+        <PlatformIcon
+          url={image}
+          style={sizeStyle}
+          className={cn("center mask-squircle mask", className)}
+        >
           <m.img
             className={cn(marginClassName, className)}
             style={sizeStyle}
@@ -208,7 +216,7 @@ export function FeedIcon({
         <PlatformIcon
           url={(feed as FeedModel)?.siteUrl || fallbackUrl}
           style={sizeStyle}
-          className={cn("center", className)}
+          className={cn("center mask-squircle mask", className)}
         >
           <FallbackableImage
             className={cn(marginClassName, className)}
diff --git a/apps/desktop/layer/renderer/src/modules/feed/feed-summary.tsx b/apps/desktop/layer/renderer/src/modules/feed/feed-summary.tsx
@@ -43,7 +43,7 @@ export function FollowSummary({
           size={32}
         />
         <div className="min-w-0 leading-tight">
-          <FeedTitle feed={feed} className="text-base font-semibold" />
+          <FeedTitle feed={feed} className="text-sm font-semibold" />
           <EllipsisHorizontalTextWithTooltip className="truncate text-xs font-normal text-zinc-500">
             {feed.description}
           </EllipsisHorizontalTextWithTooltip>
@@ -52,7 +52,9 @@ export function FollowSummary({
       <div className="flex items-center gap-1 truncate text-zinc-500">
         <i className="i-mgc-right-cute-re shrink-0" />
         <div className="truncate">
-          <EllipsisHorizontalTextWithTooltip>{feedText}</EllipsisHorizontalTextWithTooltip>
+          <EllipsisHorizontalTextWithTooltip className="text-xs">
+            {feedText}
+          </EllipsisHorizontalTextWithTooltip>
         </div>
       </div>
     </div>
diff --git a/apps/desktop/layer/renderer/src/modules/trending/index.tsx b/apps/desktop/layer/renderer/src/modules/trending/index.tsx
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
