feat(desktop): optimzie feed card styles

DIYgod · DIYgod · commit bac3cd0ffb4d · 2025-05-06T19:38:39.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
@@ -1,5 +1,5 @@
 import { Button } from "@follow/components/ui/button/index.js"
-import { Card, CardContent, CardFooter, CardHeader } from "@follow/components/ui/card/index.jsx"
+import { Card, CardContent, 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"
@@ -21,9 +21,7 @@ import { FollowSummary } from "../feed/feed-summary"
 
 const numberFormatter = new Intl.NumberFormat("en-US", {})
 
-type DiscoverItem = Awaited<ReturnType<typeof apiClient.discover.$post>>["data"][number] & {
-  view?: number
-}
+type DiscoverItem = Awaited<ReturnType<typeof apiClient.discover.$post>>["data"][number]
 
 export const FeedCard: FC<{
   item: DiscoverItem
@@ -35,6 +33,8 @@ export const FeedCard: FC<{
   followButtonClassName?: string
   followedButtonClassName?: string
   className?: string
+  simple?: boolean
+  hideButtons?: boolean
 }> = memo(
   ({
     item,
@@ -45,6 +45,8 @@ export const FeedCard: FC<{
     followButtonClassName,
     followedButtonClassName,
     className,
+    simple,
+    hideButtons,
   }) => {
     const follow = useFollow()
     const { t } = useTranslation()
@@ -62,108 +64,111 @@ export const FeedCard: FC<{
         )}
       >
         {children}
-        <CardHeader className="px-4 py-5 pb-2">
-          <FollowSummary
-            className="max-w-[462px]"
-            feed={item.feed || item.list!}
-            docs={item.docs}
-          />
+        <CardHeader className="p-0 pb-2">
+          <FollowSummary feed={item.feed || item.list!} docs={item.docs} simple={simple} />
         </CardHeader>
         {item.docs ? (
-          <CardFooter className="p-4">
+          <CardContent className="p-0">
             <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>
+          </CardContent>
         ) : (
           <>
-            {!!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} />
-                    ))}
+            <CardContent className="p-0">
+              <div className="flex justify-between gap-4">
+                <div className="flex items-center gap-3 text-sm text-zinc-500 dark:text-zinc-400">
+                  {!!item.analytics?.subscriptionCount && (
+                    <div className="flex items-center gap-1.5">
+                      <i className="i-mgc-user-3-cute-re" />
+
+                      <span>
+                        {numberFormatter.format(item.analytics.subscriptionCount)}{" "}
+                        {t("feed.follower", { count: item.analytics.subscriptionCount })}
+                      </span>
+                    </div>
+                  )}
+                  {!simple &&
+                    (item.analytics?.updatesPerWeek ? (
+                      <div className="flex items-center gap-1.5">
+                        <i className="i-mgc-safety-certificate-cute-re" />
+                        <span>
+                          {t("feed.entry_week", { count: item.analytics.updatesPerWeek ?? 0 })}
+                        </span>
+                      </div>
+                    ) : item.analytics?.latestEntryPublishedAt ? (
+                      <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.analytics.latestEntryPublishedAt}
+                          displayAbsoluteTimeAfterDay={Infinity}
+                        />
+                      </div>
+                    ) : null)}
                 </div>
-              </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">
-                {!!item.analytics?.subscriptionCount && (
-                  <div className="flex items-center gap-1.5">
-                    <i className="i-mgc-user-3-cute-re" />
 
-                    <span>
-                      {numberFormatter.format(item.analytics.subscriptionCount)}{" "}
-                      {t("feed.follower", { count: item.analytics.subscriptionCount })}
-                    </span>
+                {!hideButtons && (
+                  <div className="flex items-center justify-between gap-2">
+                    {!isSubscribed && (
+                      <Button
+                        variant="ghost"
+                        disabled={!item.feed?.id}
+                        buttonClassName="rounded-lg px-3 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.analytics?.view ?? 0,
+                          })
+                        }}
+                      >
+                        {t("discover.preview")}
+                      </Button>
+                    )}
+                    <Button
+                      variant={isSubscribed ? followedButtonVariant : followButtonVariant}
+                      onClick={() => {
+                        follow({
+                          isList: !!item.list?.id,
+                          id: item.list?.id || item.feed?.id,
+                          url: item.feed?.url,
+                          defaultValues: {
+                            view: getRouteParams().view.toString(),
+                          },
+                          onSuccess() {
+                            onSuccess?.(item)
+                          },
+                        })
+                      }}
+                      buttonClassName={cn(
+                        "relative overflow-hidden rounded-lg font-medium transition-all duration-300",
+                        isSubscribed
+                          ? "border-zinc-200/80 text-zinc-400 dark:border-zinc-700/80"
+                          : "",
+                        isSubscribed ? followedButtonClassName : followButtonClassName,
+                      )}
+                    >
+                      {isSubscribed ? t("feed.actions.followed") : t("feed.actions.follow")}
+                    </Button>
                   </div>
                 )}
-                {item.analytics?.updatesPerWeek ? (
-                  <div className="flex items-center gap-1.5">
-                    <i className="i-mgc-safety-certificate-cute-re" />
-                    <span>
-                      {t("feed.entry_week", { count: item.analytics.updatesPerWeek ?? 0 })}
-                    </span>
-                  </div>
-                ) : item.analytics?.latestEntryPublishedAt ? (
-                  <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.analytics.latestEntryPublishedAt}
-                      displayAbsoluteTimeAfterDay={Infinity}
-                    />
-                  </div>
-                ) : null}
               </div>
-
-              <div className="flex items-center justify-between gap-2">
-                {!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={() => {
-                    follow({
-                      isList: !!item.list?.id,
-                      id: item.list?.id || item.feed?.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",
-                    isSubscribed ? "border-zinc-200/80 text-zinc-400 dark:border-zinc-700/80" : "",
-                    isSubscribed ? followedButtonClassName : followButtonClassName,
-                  )}
-                >
-                  {isSubscribed ? t("feed.actions.followed") : t("feed.actions.follow")}
-                </Button>
-              </div>
-            </CardFooter>
+              {!!item.entries?.length && (
+                <div className="mt-2">
+                  <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>
+                </div>
+              )}
+            </CardContent>
           </>
         )}
       </Card>
diff --git a/apps/desktop/layer/renderer/src/modules/discover/feed-form.tsx b/apps/desktop/layer/renderer/src/modules/discover/feed-form.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@follow/components/ui/button/index.js"
-import { Card, CardHeader } from "@follow/components/ui/card/index.jsx"
 import {
   Form,
   FormControl,
@@ -15,7 +14,7 @@ import { RootPortal } from "@follow/components/ui/portal/index.js"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
 import { Switch } from "@follow/components/ui/switch/index.jsx"
 import { FeedViewType } from "@follow/constants"
-import type { EntryModelSimple, FeedModel } from "@follow/models/types"
+import type { EntryModelSimple, FeedAnalyticsModel, FeedModel } from "@follow/models/types"
 import { tracker } from "@follow/tracker"
 import { cn } from "@follow/utils/utils"
 import { zodResolver } from "@hookform/resolvers/zod"
@@ -32,14 +31,14 @@ import { useAuthQuery, useI18n } from "~/hooks/common"
 import { apiClient } from "~/lib/api-fetch"
 import { tipcClient } from "~/lib/client"
 import { toastFetchError } from "~/lib/error-parser"
-import { FollowSummary } from "~/modules/feed/feed-summary"
 import { feed as feedQuery, useFeedQuery } from "~/queries/feed"
 import { subscription as subscriptionQuery } from "~/queries/subscriptions"
 import { useFeedByIdOrUrl } from "~/store/feed"
 import { useSubscriptionByFeedId } from "~/store/subscription"
 import { feedUnreadActions } from "~/store/unread"
 
 import { ViewSelectorRadioGroup } from "../shared/ViewSelectorRadioGroup"
+import { FeedCard } from "./feed-card"
 
 const formSchema = z.object({
   view: z.string(),
@@ -106,6 +105,7 @@ export const FeedForm: Component<{
                         subscriptionData: feedQuery.data?.subscription,
                         entries: feedQuery.data?.entries,
                         feed,
+                        analytics: feedQuery.data?.analytics,
                         placeholderRef,
                       }}
                     />
@@ -164,6 +164,7 @@ const FeedInnerForm = ({
   subscriptionData,
   feed,
   entries,
+  analytics,
 
   placeholderRef,
 }: {
@@ -179,6 +180,7 @@ const FeedInnerForm = ({
   }
   feed: FeedModel
   entries?: EntryModelSimple[]
+  analytics?: FeedAnalyticsModel
 
   placeholderRef: React.RefObject<HTMLDivElement>
 }) => {
@@ -275,11 +277,14 @@ const FeedInnerForm = ({
 
   return (
     <div className="flex flex-1 flex-col gap-y-4">
-      <Card>
-        <CardHeader>
-          <FollowSummary feed={feed} />
-        </CardHeader>
-      </Card>
+      <FeedCard
+        item={{
+          feed,
+          analytics,
+        }}
+        hideButtons
+        className="px-1 pb-5 pt-2"
+      />
       <Form {...form}>
         <form
           id="feed-form"
diff --git a/apps/desktop/layer/renderer/src/modules/discover/form.tsx b/apps/desktop/layer/renderer/src/modules/discover/form.tsx
@@ -322,7 +322,7 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
                 item={item}
                 onSuccess={handleSuccess}
                 onUnSubscribed={handleUnSubscribed}
-                className="last:border-b-0"
+                className="py-5 last:border-b-0"
               />
             ))}
           </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
@@ -11,10 +11,12 @@ export function FollowSummary({
   feed,
   docs,
   className,
+  simple,
 }: {
   feed: FeedOrListRespModel
   docs?: string
   className?: string
+  simple?: boolean
 }) {
   let feedText: string | undefined
 
@@ -39,24 +41,21 @@ export function FollowSummary({
         <FeedIcon
           feed={feed}
           fallbackUrl={docs}
-          className="mask-squircle mask mr-3 shrink-0 rounded-none"
+          className="mask-squircle mask shrink-0 rounded-none"
           size={32}
         />
         <div className="min-w-0 leading-tight">
-          <FeedTitle feed={feed} className="text-sm font-semibold" />
+          <FeedTitle feed={feed} className="mb-0.5 text-[15px] font-semibold" />
           <EllipsisHorizontalTextWithTooltip className="truncate text-xs font-normal text-zinc-500">
-            {feed.description}
-          </EllipsisHorizontalTextWithTooltip>
-        </div>
-      </div>
-      <div className="flex items-center gap-1 truncate text-zinc-500">
-        <i className="i-mgc-right-cute-re shrink-0" />
-        <div className="truncate">
-          <EllipsisHorizontalTextWithTooltip className="text-xs">
             {feedText}
           </EllipsisHorizontalTextWithTooltip>
         </div>
       </div>
+      {!simple && (
+        <EllipsisHorizontalTextWithTooltip className="truncate text-sm font-normal text-zinc-500">
+          {feed.description}
+        </EllipsisHorizontalTextWithTooltip>
+      )}
     </div>
   )
 }
diff --git a/apps/desktop/layer/renderer/src/modules/trending/index.tsx b/apps/desktop/layer/renderer/src/modules/trending/index.tsx
@@ -131,11 +131,12 @@ export function Trending({
             <FeedCard
               key={item.feed.id}
               item={item}
+              simple
               followedButtonVariant="ghost"
               followButtonVariant="ghost"
               followedButtonClassName="px-3 -mr-3"
               followButtonClassName="border-accent text-accent px-3 -mr-3"
-              className="pl-2 [&:nth-last-child(-n+2)]:border-b-0"
+              className="py-5 pl-6 pr-4 [&:nth-last-child(-n+2)]:border-b-0"
             >
               <div
                 className={cn(
diff --git a/packages/internal/shared/src/hono.ts b/packages/internal/shared/src/hono.ts
@@ -14691,6 +14691,7 @@ declare const _routes: hono_hono_base.HonoBase<Env, ({
                     readCount: number;
                     analytics?: {
                         view: number | null;
+                        feedId: string;
                         updatesPerWeek: number | null;
                         subscriptionCount: number | null;
                         latestEntryPublishedAt: string | null;
