= memo(
style={useMemo(
() => ({
transform,
- paddingTop: isStickyItem ? "1.75rem" : undefined,
+ paddingTop: isStickyItem ? "2.75rem" : undefined,
}),
[transform, isStickyItem],
)}
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
index e935198ff..2d9ab776d 100644
--- a/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
+++ b/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -1,13 +1,13 @@
import { useGlobalFocusableScopeSelector } from "@follow/components/common/Focusable/hooks.js"
+import { Spring } from "@follow/components/constants/spring.js"
import { useMobile } from "@follow/components/hooks/useMobile.js"
-import type { FeedViewType } from "@follow/constants"
-import { views } from "@follow/constants"
+import { FeedViewType, views } from "@follow/constants"
import { useEntry } from "@follow/store/entry/hooks"
import { unreadSyncService } from "@follow/store/unread/store"
-import { EventBus } from "@follow/utils/event-bus"
import { cn } from "@follow/utils/utils"
+import { AnimatePresence, m } from "motion/react"
import type { FC, MouseEvent, MouseEventHandler, PropsWithChildren, TouchEvent } from "react"
-import { useCallback, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { NavLink } from "react-router"
import { useDebounceCallback } from "usehooks-ts"
@@ -22,13 +22,20 @@ import { useGeneralSettingKey } from "~/atoms/settings/general"
import { FocusablePresets } from "~/components/common/Focusable"
import { useEntryIsRead } from "~/hooks/biz/useAsRead"
import { useContextMenuActionShortCutTrigger } from "~/hooks/biz/useContextMenuActionShortCutTrigger"
-import { HIDE_ACTIONS_IN_ENTRY_CONTEXT_MENU, useEntryActions } from "~/hooks/biz/useEntryActions"
+import {
+ HIDE_ACTIONS_IN_ENTRY_CONTEXT_MENU,
+ useEntryActions,
+ useSortedEntryActions,
+} from "~/hooks/biz/useEntryActions"
+import { useFeature } from "~/hooks/biz/useFeature"
import { useFeedActions } from "~/hooks/biz/useFeedActions"
import { getNavigateEntryPath, useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
-import { getRouteParams, useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
+import { getRouteParams, useRouteParams, useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
import { useContextMenu } from "~/hooks/common/useContextMenu"
import { copyToClipboard } from "~/lib/clipboard"
import { COMMAND_ID } from "~/modules/command/commands/id"
+import { EntryHeaderActions } from "~/modules/entry-content/actions/header-actions"
+import { MoreActions } from "~/modules/entry-content/actions/more-actions"
export const EntryItemWrapper: FC<
{
@@ -61,7 +68,8 @@ export const EntryItemWrapper: FC<
const asRead = useEntryIsRead(entry)
const hoverMarkUnread = useGeneralSettingKey("hoverMarkUnread")
- const handleMouseEnter = useDebounceCallback(
+ const [showAction, setShowAction] = useState(false)
+ const handleMouseEnterMarkRead = useDebounceCallback(
() => {
if (!hoverMarkUnread) return
if (!document.hasFocus()) return
@@ -76,14 +84,43 @@ export const EntryItemWrapper: FC<
},
)
- const navigate = useNavigateEntry()
+ const handleMouseEnter = useMemo(() => {
+ return () => {
+ setShowAction(true)
+ handleMouseEnterMarkRead()
+ }
+ }, [handleMouseEnterMarkRead])
+ const handleMouseLeave = useMemo(() => {
+ return (e: React.MouseEvent) => {
+ handleMouseEnterMarkRead.cancel()
+ // If the mouse is over the action bar, don't hide the action bar
+ const { relatedTarget, currentTarget } = e
+ if (relatedTarget && relatedTarget instanceof Node && currentTarget.contains(relatedTarget)) {
+ return
+ }
+ setShowAction(false)
+ }
+ }, [handleMouseEnterMarkRead])
+ const isDropdownMenuOpen = useGlobalFocusableScopeSelector(
+ FocusablePresets.isNotFloatingLayerScope,
+ )
+
+ useEffect(() => {
+ // Hide the action bar when dropdown menu is open and click outside
+ if (isDropdownMenuOpen) {
+ setShowAction(false)
+ }
+ }, [isDropdownMenuOpen])
+
+ const navigate = useNavigateEntry()
const navigationPath = useMemo(() => {
if (!entry?.id) return "#"
return getNavigateEntryPath({
entryId: entry?.id,
})
}, [entry?.id])
+
const handleClick = useCallback(
(e: TouchEvent
| MouseEvent) => {
e.preventDefault()
@@ -97,10 +134,11 @@ export const EntryItemWrapper: FC<
unreadSyncService.markEntryAsRead(entry.id)
}
- setTimeout(
- () => EventBus.dispatch(COMMAND_ID.layout.focusToEntryRender, { highlightBoundary: false }),
- 60,
- )
+ // TODO
+ // setTimeout(
+ // () => EventBus.dispatch(COMMAND_ID.layout.focusToEntryRender, { highlightBoundary: false }),
+ // 60,
+ // )
navigate({
entryId: entry.id,
@@ -168,25 +206,55 @@ export const EntryItemWrapper: FC<
},
})
+ const aiEnabled = useFeature("ai")
+ const isWide = views[view as FeedViewType]?.wideMode || aiEnabled
+
return (
{children}
+ {showAction && isWide && }
)
}
+
+const ActionBar = ({ entryId }: { entryId: string }) => {
+ const { mainAction: entryActions } = useSortedEntryActions({
+ entryId,
+ view: FeedViewType.SocialMedia,
+ })
+ const { view } = useRouteParams()
+
+ if (entryActions.length === 0) return null
+
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+
+ )
+}
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/styles.ts b/apps/desktop/layer/renderer/src/modules/entry-column/styles.ts
index c0bf10de4..c53559357 100644
--- a/apps/desktop/layer/renderer/src/modules/entry-column/styles.ts
+++ b/apps/desktop/layer/renderer/src/modules/entry-column/styles.ts
@@ -1 +1,4 @@
export const girdClassNames = tw`grid grid-cols-1 @lg:grid-cols-2 @3xl:grid-cols-3 @6xl:grid-cols-4 @7xl:grid-cols-5 gap-1.5`
+
+// Shared max-width styles for readable content
+export const readableContentMaxWidth = tw`max-w-[65ch] mx-auto px-4`
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/templates/list-item-template.ai.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/templates/list-item-template.ai.tsx
new file mode 100644
index 000000000..426536a83
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/entry-column/templates/list-item-template.ai.tsx
@@ -0,0 +1,348 @@
+import { useMobile } from "@follow/components/hooks/useMobile.js"
+import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
+import { useCollectionEntry, useIsEntryStarred } from "@follow/store/collection/hooks"
+import { useEntry } from "@follow/store/entry/hooks"
+import type { EntryModel } from "@follow/store/entry/types"
+import { useFeedById } from "@follow/store/feed/hooks"
+import { useInboxById } from "@follow/store/inbox/hooks"
+import { clsx, cn, formatEstimatedMins, formatTimeToSeconds, isSafari } from "@follow/utils/utils"
+import { useMemo } from "react"
+import { titleCase } from "title-case"
+
+import { AudioPlayer, useAudioPlayerAtomSelector } from "~/atoms/player"
+import { useGeneralSettingKey } from "~/atoms/settings/general"
+import { useUISettingKey } from "~/atoms/settings/ui"
+import { RelativeTime } from "~/components/ui/datetime"
+import { Media } from "~/components/ui/media/Media"
+import { FEED_COLLECTION_LIST } from "~/constants"
+import { useEntryIsRead } from "~/hooks/biz/useAsRead"
+import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
+import { EntryTranslation } from "~/modules/entry-column/translation"
+import type { FeedIconEntry } from "~/modules/feed/feed-icon"
+import { FeedIcon } from "~/modules/feed/feed-icon"
+import { FeedTitle } from "~/modules/feed/feed-title"
+import { getPreferredTitle } from "~/store/feed/hooks"
+
+import { StarIcon } from "../star-icon"
+import type { UniversalItemProps } from "../types"
+
+const entrySelector = (state: EntryModel) => {
+ const { feedId, inboxHandle, read } = state
+ const { authorAvatar, authorUrl, description, publishedAt, title } = state
+
+ const audios = state.attachments?.filter((a) => a.mime_type?.startsWith("audio") && a.url)
+ const firstAudio = audios?.[0]
+ const media = state.media || []
+ const firstMedia = media?.[0]
+ const photo = media.find((a) => a.type === "photo")
+ const firstPhotoUrl = photo?.url
+ const iconEntry: FeedIconEntry = { firstPhotoUrl, authorAvatar }
+
+ const titleEntry = { authorUrl }
+
+ return {
+ description,
+ feedId,
+ firstAudio,
+ firstMedia,
+ iconEntry,
+ inboxId: inboxHandle,
+ publishedAt,
+ read,
+ title,
+ titleEntry,
+ }
+}
+export function ListItem({
+ entryId,
+ entryPreview,
+ translation,
+ simple,
+}: UniversalItemProps & {
+ simple?: boolean
+}) {
+ const isMobile = useMobile()
+ const entry = useEntry(entryId, entrySelector)
+
+ const isInCollection = useIsEntryStarred(entryId)
+ const collectionCreatedAt = useCollectionEntry(entryId)?.createdAt
+
+ const isRead = useEntryIsRead(entry)
+
+ const inInCollection = useRouteParamsSelector((s) => s.feedId === FEED_COLLECTION_LIST)
+
+ const feed =
+ useFeedById(entry?.feedId, (feed) => {
+ return {
+ type: feed.type,
+ ownerUserId: feed.ownerUserId,
+ id: feed.id,
+ title: feed.title,
+ url: (feed as any).url || "",
+ image: feed.image,
+ siteUrl: feed.siteUrl,
+ }
+ }) || entryPreview?.feeds
+
+ const inbox = useInboxById(entry?.inboxId)
+
+ const thumbnailRatio = useUISettingKey("thumbnailRatio")
+ const rid = `list-item-${entryId}`
+
+ const bilingual = useGeneralSettingKey("translationMode") === "bilingual"
+ const lineClamp = useMemo(() => {
+ const envIsSafari = isSafari()
+ let lineClampTitle = 1
+ let lineClampDescription = 2
+
+ if (translation?.title && !simple && bilingual) {
+ lineClampTitle += 1
+ }
+ if (translation?.description && !simple && bilingual) {
+ lineClampDescription += 1
+ }
+
+ // FIXME: Safari bug, not support line-clamp cross elements
+ return {
+ global: !envIsSafari
+ ? `line-clamp-[${simple ? lineClampTitle : lineClampTitle + lineClampDescription}]`
+ : "",
+ title: envIsSafari ? `line-clamp-[${lineClampTitle}]` : "",
+ description: envIsSafari ? `line-clamp-[${lineClampDescription}]` : "",
+ }
+ }, [simple, translation?.description, translation?.title, bilingual])
+
+ const dimRead = useGeneralSettingKey("dimRead")
+ // NOTE: prevent 0 height element, react virtuoso will not stop render any more
+ if (!entry || !(feed || inbox)) return null
+
+ const displayTime = inInCollection ? collectionCreatedAt : entry?.publishedAt
+
+ const related = feed || inbox
+
+ const hasAudio = simple ? false : !!entry.firstAudio?.url
+ const hasMedia = simple ? false : !!entry.firstMedia?.url
+
+ const marginWidth = 8 * (isMobile ? 1.125 : 1)
+ // calculate the max width to have a correct truncation
+ // FIXME: this is not easy to maintain, need to refactor
+ const feedIconWidth = 20 + marginWidth
+ const audioCoverWidth = 80 + marginWidth
+ const mediaWidth = 80 * (isMobile ? 1.125 : 1) + marginWidth
+
+ let savedWidth = 0
+
+ savedWidth += feedIconWidth
+
+ if (hasAudio) {
+ savedWidth += audioCoverWidth
+ }
+ if (hasMedia && !hasAudio) {
+ savedWidth += mediaWidth
+ }
+
+ return (
+
+
+
+
+
+
+
+ ·
+ {!!displayTime && }
+
+
+ {entry?.title ? (
+
+ ) : (
+
+ )}
+ {!!isInCollection && }
+
+ {!simple && (
+
+
+
+ )}
+
+
+ {hasAudio && entry.firstAudio && (
+
+ }
+ feed={feed || inbox}
+ entry={entry?.iconEntry}
+ size={80}
+ className="m-0 rounded"
+ useMedia
+ noMargin
+ />
+ }
+ />
+ )}
+
+ {!simple && !hasAudio && entry.firstMedia && (
+
+ )}
+
+ {feedIcon}
+
+
+
+
+
+ {!!estimatedMins && (
+
+
+
+ {isChinese ? `${estimatedMins} 分钟` : formatEstimatedMins(estimatedMins)}
+
+
+ )}
+
+
+
+
+
+
+
+ ·
+ {!!displayTime && }
+
+
+ {entry?.title ? (
+
+ ) : (
+
+ )}
+ {!!isInCollection && }
+
+ {!simple && (
+
+
+
+ )}
+
+
+ {hasAudio && entry.firstAudio && (
+
+ }
+ feed={feed || inbox}
+ entry={entry?.iconEntry}
+ size={settingWideMode ? 65 : 80}
+ className="m-0 rounded"
+ useMedia
+ noMargin
+ />
+ }
+ />
+ )}
+
+ {!simple && !hasAudio && entry.firstMedia && (
+
+ )}
+
+ {feedIcon}
+
+
+
+
+
+ {!!estimatedMins && (
+
+
+
+ {isChinese ? `${estimatedMins} 分钟` : formatEstimatedMins(estimatedMins)}
+
+
+ )}
+
-
-
-
-
-
-
- ·
- {!!displayTime && }
-
-
- {entry?.title ? (
-
- ) : (
-
- )}
- {!!isInCollection && }
-
- {!simple && (
-
-
-
- )}
-
-
- {hasAudio && entry.firstAudio && (
-
- }
- feed={feed || inbox}
- entry={entry?.iconEntry}
- size={settingWideMode ? 65 : 80}
- className="m-0 rounded"
- useMedia
- noMargin
- />
- }
- />
- )}
-
- {!simple && !hasAudio && entry.firstMedia && (
-
- )}
-
- {feedIcon}
-
-
-
-
-
- {!!estimatedMins && (
-
-
-
- {isChinese ? `${estimatedMins} 分钟` : formatEstimatedMins(estimatedMins)}
-
-
- )}
-