feat: unified feed title

Author: DIYgod

apps/renderer/src/components/errors/previews/FeedPreview.tsx

@@ -9,8 +9,8 @@ import { useSearchParams } from "react-router-dom"
 
 import { getItemComponentByView } from "~/modules/entry-column/Items"
 import type { UniversalItemProps } from "~/modules/entry-column/types"
-import { FeedCertification } from "~/modules/feed/feed-certification"
 import { FeedIcon } from "~/modules/feed/feed-icon"
+import { FeedTitle } from "~/modules/feed/feed-title"
 import { useEntriesPreview } from "~/queries/entries"
 import { useFeed } from "~/queries/feed"
 
@@ -56,10 +56,7 @@ export function FeedPreview(props: {
               size={64}
             />
             <div className="flex flex-col items-center">
-              <div className="mb-2 mt-4 flex items-center text-2xl font-bold">
-                <h1>{feed.data.feed.title}</h1>
-                <FeedCertification feed={feed.data.feed} />
-              </div>
+              <FeedTitle feed={feed.data.feed} className="mb-2 mt-4 text-2xl font-bold" />
               <div className="mb-8 text-sm text-zinc-500">{feed.data.feed.description}</div>
             </div>
             <div className="mb-4 text-sm">

apps/renderer/src/modules/feed-column/item.tsx

@@ -22,15 +22,14 @@ import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { getNewIssueUrl } from "~/lib/issues"
 import { showNativeMenu } from "~/lib/native-menu"
-import { FeedCertification } from "~/modules/feed/feed-certification"
 import { FeedIcon } from "~/modules/feed/feed-icon"
+import { FeedTitle } from "~/modules/feed/feed-title"
 import { getPreferredTitle, useFeedById } from "~/store/feed"
 import { useInboxById } from "~/store/inbox"
 import { useListById } from "~/store/list"
 import { subscriptionActions, useSubscriptionByFeedId } from "~/store/subscription"
 import { useFeedUnreadStore } from "~/store/unread"
 
-import { BoostCertification } from "../boost/boost-certification"
 import { useSelectedFeedIds } from "./atom"
 import { feedColumnStyles } from "./styles"
 import { UnreadNumber } from "./unread-number"
@@ -161,9 +160,7 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
           )}
         >
           <FeedIcon fallback feed={feed} size={16} />
-          <div className="truncate">{getPreferredTitle(feed)}</div>
-          {isFeed && !hideExtraBadge && <FeedCertification feed={feed} className="text-[15px]" />}
-          {isFeed && !hideExtraBadge && <BoostCertification feed={feed} className="text-[15px]" />}
+          <FeedTitle feed={feed} />
           {isFeed && feed.errorAt && (
             <Tooltip delayDuration={300}>
               <TooltipTrigger asChild>

apps/renderer/src/modules/feed/feed-summary.tsx

@@ -5,8 +5,7 @@ import { UrlBuilder } from "@follow/utils/url-builder"
 import { cn } from "@follow/utils/utils"
 
 import { FeedIcon } from "~/modules/feed/feed-icon"
-
-import { FeedCertification } from "./feed-certification"
+import { FeedTitle } from "~/modules/feed/feed-title"
 
 export function FollowSummary({
   feed,
@@ -19,7 +18,6 @@ export function FollowSummary({
 }) {
   let siteLink: string | undefined
   let feedLink: string | undefined
-  let feedTitle = feed.title
   let feedText: string | undefined
 
   switch (feed.type) {
@@ -33,7 +31,6 @@ export function FollowSummary({
       siteLink = void 0
       feedLink = siteLink
       feedText = `${feed.id}${env.VITE_INBOXES_EMAIL}`
-      feedTitle = feed.title || `${feed.id}'s Inbox`
       break
     }
     default: {
@@ -53,11 +50,8 @@ export function FollowSummary({
           className="mask-squircle mask mr-3 shrink-0 rounded-none"
           size={32}
         />
-        <div className="truncate text-base font-semibold leading-tight">
-          <div className="flex items-center">
-            {feedTitle}
-            <FeedCertification className="center" feed={feed} />
-          </div>
+        <div className="leading-tight">
+          <FeedTitle feed={feed} className="text-base font-semibold" />
           <EllipsisHorizontalTextWithTooltip className="truncate text-xs font-normal text-zinc-500">
             {feed.description}
           </EllipsisHorizontalTextWithTooltip>

apps/renderer/src/modules/feed/feed-title.tsx

@@ -0,0 +1,22 @@
+import type { FeedOrListRespModel } from "@follow/models/types"
+import { cn } from "@follow/utils/utils"
+
+import { BoostCertification } from "~/modules/boost/boost-certification"
+import { FeedCertification } from "~/modules/feed/feed-certification"
+import { getPreferredTitle } from "~/store/feed/store"
+
+export const FeedTitle = ({
+  feed,
+  className,
+}: {
+  feed: FeedOrListRespModel
+  className?: string
+}) => {
+  return (
+    <div className={cn("flex items-center truncate", className)}>
+      <div className="truncate">11{getPreferredTitle(feed)}</div>
+      <FeedCertification feed={feed} />
+      <BoostCertification feed={feed} />
+    </div>
+  )
+}