feat(desktop): feed preview

DIYgod · DIYgod · commit eb26cde97d64 · 2025-05-05T15:28:13.000+08:00
diff --git a/apps/desktop/layer/renderer/src/hooks/biz/useRouteParams.ts b/apps/desktop/layer/renderer/src/hooks/biz/useRouteParams.ts
@@ -1,5 +1,6 @@
 import { getReadonlyRoute, useReadonlyRouteSelector } from "@follow/components/atoms/route.js"
 import { FeedViewType } from "@follow/constants"
+import { isBizId } from "@follow/utils/utils"
 import type { Params } from "react-router"
 import { useParams } from "react-router"
 
@@ -13,6 +14,7 @@ import {
   ROUTE_TIMELINE_OF_VIEW,
 } from "~/constants"
 import { getListById } from "~/store/list"
+import { getSubscriptionByFeedId } from "~/store/subscription"
 
 export const useRouteEntryId = () => {
   const { entryId } = useParams()
@@ -35,6 +37,7 @@ export interface BizRouteParams {
   inboxId?: string
   listId?: string
   timelineId?: string
+  isPreview?: boolean
 }
 
 const parseRouteParams = (params: Params<any>): BizRouteParams => {
@@ -43,6 +46,13 @@ const parseRouteParams = (params: Params<any>): BizRouteParams => {
     : undefined
   const list = listId ? getListById(listId) : undefined
 
+  let isPreview = false
+  if (listId) {
+    isPreview = !getSubscriptionByFeedId(listId)
+  } else if (params.feedId) {
+    isPreview = isBizId(params.feedId) && !getSubscriptionByFeedId(params.feedId)
+  }
+
   return {
     view: params.timelineId?.startsWith(ROUTE_TIMELINE_OF_VIEW)
       ? (Number.parseInt(
@@ -64,6 +74,7 @@ const parseRouteParams = (params: Params<any>): BizRouteParams => {
       : undefined,
     listId,
     timelineId: params.timelineId,
+    isPreview,
   }
 }
 
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
@@ -1,4 +1,4 @@
-import { ActionButton } from "@follow/components/ui/button/index.js"
+import { ActionButton, Button } from "@follow/components/ui/button/index.js"
 import { DividerVertical } from "@follow/components/ui/divider/index.js"
 import { RotatingRefreshIcon } from "@follow/components/ui/loading/index.jsx"
 import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
@@ -14,6 +14,7 @@ import { useTimelineColumnShow } from "~/atoms/sidebar"
 import { useWhoami } from "~/atoms/user"
 import { FEED_COLLECTION_LIST, ROUTE_ENTRY_PENDING } from "~/constants"
 import { shortcuts } from "~/constants/shortcuts"
+import { useFollow } from "~/hooks/biz/useFollow"
 import { useRouteParams } from "~/hooks/biz/useRouteParams"
 import { EntryHeader } from "~/modules/entry-content/header"
 import { useRefreshFeedMutation } from "~/queries/feed"
@@ -34,10 +35,11 @@ export const EntryListHeader: FC<{
 }> = ({ refetch, isRefreshing, hasUpdate }) => {
   const routerParams = useRouteParams()
   const { t } = useTranslation()
+  const { t: tCommon } = useTranslation("common")
 
   const unreadOnly = useGeneralSettingKey("unreadOnly")
 
-  const { feedId, entryId, view } = routerParams
+  const { feedId, entryId, view, isPreview, listId } = routerParams
 
   const headerTitle = useFeedHeaderTitle()
 
@@ -57,6 +59,8 @@ export const EntryListHeader: FC<{
 
   const feed = useFeedById(feedId)
 
+  const follow = useFollow()
+
   const titleStyleBasedView = ["pl-6", "pl-7", "pl-7", "pl-7", "px-5", "pl-6"]
 
   const feedColumnShow = useTimelineColumnShow()
@@ -139,6 +143,21 @@ export const EntryListHeader: FC<{
           <MarkAllReadButton shortcut />
         </div>
       </div>
+      {isPreview && (
+        <Button
+          size="lg"
+          buttonClassName="mt-4"
+          onClick={() => {
+            follow({
+              isList: !!listId,
+              id: listId ?? feedId,
+              url: feed?.url,
+            })
+          }}
+        >
+          {tCommon("words.follow")}
+        </Button>
+      )}
 
       {/* <TimelineTabs /> */}
     </div>
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/FeedItem.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/FeedItem.tsx
@@ -1,5 +1,6 @@
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { OouiUserAnonymous } from "@follow/components/icons/OouiUserAnonymous.jsx"
+import { Button } from "@follow/components/ui/button/index.js"
 import {
   Tooltip,
   TooltipContent,
@@ -17,6 +18,7 @@ import { useTranslation } from "react-i18next"
 import { MenuItemSeparator, MenuItemText, useShowContextMenu } from "~/atoms/context-menu"
 import { getMainContainerElement } from "~/atoms/dom"
 import { useFeedActions, useInboxActions, useListActions } from "~/hooks/biz/useFeedActions"
+import { useFollow } from "~/hooks/biz/useFollow"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { useContextMenu } from "~/hooks/common/useContextMenu"
@@ -40,6 +42,7 @@ interface FeedItemProps {
   feedId: string
   view?: number
   className?: string
+  isPreview?: boolean
 }
 
 const DraggableItemWrapper: Component<
@@ -61,9 +64,9 @@ const DraggableItemWrapper: Component<
     </div>
   )
 }
-const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
+const FeedItemImpl = ({ view, feedId, className, isPreview }: FeedItemProps) => {
   const { t } = useTranslation()
-  const subscription = useSubscriptionByFeedId(feedId)!
+  const subscription = useSubscriptionByFeedId(feedId)
   const navigate = useNavigateEntry()
   const feed = useFeedById(feedId, (feed) => {
     return {
@@ -153,6 +156,8 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
       setIsContextMenuOpen(false)
     },
   })
+  const follow = useFollow()
+
   if (!feed) return null
 
   const isFeed = feed.type === "feed" || !feed.type
@@ -205,7 +210,7 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
             </TooltipPortal>
           </Tooltip>
         )}
-        {subscription.isPrivate && (
+        {subscription?.isPrivate && (
           <Tooltip delayDuration={300}>
             <TooltipTrigger>
               <OouiUserAnonymous className="ml-1 shrink-0 text-base" />
@@ -216,6 +221,21 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
           </Tooltip>
         )}
       </div>
+      {isPreview && (
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => {
+            follow({
+              isList: false,
+              id: feedId,
+              url: feed.url,
+            })
+          }}
+        >
+          <i className="i-mgc-add-cute-re text-accent text-base" />
+        </Button>
+      )}
       <UnreadNumber unread={feedUnread} className="ml-2" />
     </DraggableItemWrapper>
   )
@@ -227,7 +247,8 @@ const ListItemImpl: Component<{
   listId: string
   view: FeedViewType
   iconSize?: number
-}> = ({ view, listId, className, iconSize = 22 }) => {
+  isPreview?: boolean
+}> = ({ view, listId, className, iconSize = 22, isPreview }) => {
   const list = useListById(listId)
 
   const isActive = useRouteParamsSelector((routerParams) => routerParams.listId === listId)
@@ -264,6 +285,8 @@ const ListItemImpl: Component<{
       setIsContextMenuOpen(false)
     },
   })
+  const follow = useFollow()
+
   if (!list) return null
   return (
     <div
@@ -282,7 +305,7 @@ const ListItemImpl: Component<{
           {getPreferredTitle(list)}
         </EllipsisHorizontalTextWithTooltip>
 
-        {subscription.isPrivate && (
+        {subscription?.isPrivate && (
           <Tooltip delayDuration={300}>
             <TooltipTrigger>
               <OouiUserAnonymous className="ml-1 shrink-0 text-base" />
@@ -293,6 +316,20 @@ const ListItemImpl: Component<{
           </Tooltip>
         )}
       </div>
+      {isPreview && (
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => {
+            follow({
+              isList: true,
+              id: listId,
+            })
+          }}
+        >
+          <i className="i-mgc-add-cute-re text-accent text-base" />
+        </Button>
+      )}
       <UnreadNumber unread={listUnread} className="ml-2" />
     </div>
   )
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/FeedList.electron.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/FeedList.electron.tsx
@@ -6,8 +6,11 @@ import { useTranslation } from "react-i18next"
 import Selecto from "react-selecto"
 import { useEventListener } from "usehooks-ts"
 
+import { useRouteParams } from "~/hooks/biz/useRouteParams"
 import { useAuthQuery } from "~/hooks/common"
 import { Queries } from "~/queries"
+import { useFeedQuery } from "~/queries/feed"
+import { useList } from "~/queries/lists"
 import {
   useCategoryOpenStateByView,
   useFeedsGroupedData,
@@ -21,6 +24,7 @@ import {
   useSelectedFeedIdsState,
 } from "./atom"
 import { DraggableContext } from "./context"
+import { FeedItem, ListItem } from "./FeedItem"
 import { EmptyFeedList, ListHeader, StarredItem } from "./FeedList.shared"
 import { useShouldFreeUpSpace } from "./hook"
 import { SortableFeedList, SortByAlphabeticalInbox, SortByAlphabeticalList } from "./sort-by"
@@ -112,6 +116,14 @@ const FeedListImpl = forwardRef<HTMLDivElement, { className?: string; view: numb
 
     const shouldFreeUpSpace = useShouldFreeUpSpace()
 
+    const routerParams = useRouteParams()
+    const { listId, isPreview, feedId } = routerParams
+    const isFeedPreview = isPreview && !listId
+    const isListPreview = isPreview && listId
+
+    useFeedQuery({ id: isFeedPreview ? feedId : undefined })
+    useList({ id: isListPreview ? listId : undefined })
+
     return (
       <div className={cn(className, "font-medium")}>
         <ListHeader view={view} />
@@ -213,11 +225,14 @@ const FeedListImpl = forwardRef<HTMLDivElement, { className?: string; view: numb
           rootClassName={cn("h-full", shouldFreeUpSpace && "overflow-visible")}
         >
           <StarredItem view={view} />
-          {hasListData && (
+          {(hasListData || (isListPreview && listId)) && (
             <>
               <div className="text-text-secondary mt-1 flex h-6 w-full shrink-0 items-center rounded-md px-2.5 text-xs font-semibold transition-colors">
                 {t("words.lists")}
               </div>
+              {isListPreview && listId && (
+                <ListItem listId={listId} view={view} className="pl-2.5 pr-0" isPreview />
+              )}
               <SortByAlphabeticalList view={view} data={listsData} />
             </>
           )}
@@ -240,6 +255,9 @@ const FeedListImpl = forwardRef<HTMLDivElement, { className?: string; view: numb
               {t("words.feeds")}
             </div>
           )}
+          {isFeedPreview && feedId && (
+            <FeedItem feedId={feedId} view={view} className="pl-2.5 pr-0.5" isPreview />
+          )}
           <DraggableContext.Provider value={draggableContextValue}>
             <div className="space-y-px" id="feeds-area" ref={setNodeRef}>
               {hasData ? (
diff --git a/apps/desktop/layer/renderer/src/store/subscription/hooks.ts b/apps/desktop/layer/renderer/src/store/subscription/hooks.ts
@@ -68,9 +68,12 @@ export const useCategoriesByView = (view: FeedViewType) =>
     ),
   )
 
-export const useSubscriptionByFeedId = (feedId: FeedId) =>
+export const useSubscriptionByFeedId = (feedId?: FeedId) =>
   useSubscriptionStore(
-    useCallback((state) => subscriptionByFeedIdSelector(feedId)(state) || null, [feedId]),
+    useCallback(
+      (state) => (feedId ? subscriptionByFeedIdSelector(feedId)(state) || null : null),
+      [feedId],
+    ),
   )
 export const useSubscriptionsByFeedIds = (feedIds: FeedId[]) =>
   useSubscriptionStore(
diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
@@ -115,6 +115,7 @@ export default ({ mode }) => {
         "/forget-password": proxyConfig,
         "/reset-password": proxyConfig,
         "/register": proxyConfig,
+        "/share": proxyConfig,
 
         ...(env.VITE_DEV_PROXY
           ? {
diff --git a/packages/internal/components/src/ui/button/variants.tsx b/packages/internal/components/src/ui/button/variants.tsx
@@ -36,6 +36,7 @@ export const styledButtonVariant = cva(
     ],
     variants: {
       size: {
+        sm: "px-2 py-1 rounded-md text-xs",
         default: "px-3 py-1.5 rounded-lg text-sm",
         lg: "px-4 py-2 rounded-lg text-base",
       },
diff --git a/packages/internal/shared/src/hono.ts b/packages/internal/shared/src/hono.ts

Original file line number	Diff line number	Diff line change
`@@ -68,9 +68,12 @@ export const useCategoriesByView = (view: FeedViewType) =>`
`68`	`68`	`),`
`69`	`69`	`)`
`70`	`70`
`71`		`-export const useSubscriptionByFeedId = (feedId: FeedId) =>`
	`71`	`+export const useSubscriptionByFeedId = (feedId?: FeedId) =>`
`72`	`72`	`useSubscriptionStore(`
`73`		`- useCallback((state) => subscriptionByFeedIdSelector(feedId)(state) \|\| null, [feedId]),`
	`73`	`+ useCallback(`
	`74`	`+ (state) => (feedId ? subscriptionByFeedIdSelector(feedId)(state) \|\| null : null),`
	`75`	`+ [feedId],`
	`76`	`+ ),`
`74`	`77`	`)`
`75`	`78`	`export const useSubscriptionsByFeedIds = (feedIds: FeedId[]) =>`
`76`	`79`	`useSubscriptionStore(`