diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx index bffb08e2f..937dc597c 100644 --- a/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx +++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx @@ -1,11 +1,4 @@ -import { ScrollArea } from "@follow/components/ui/scroll-area/index.js" -import { - HoverCard, - HoverCardContent, - HoverCardPortal, - HoverCardTrigger, -} from "@radix-ui/react-hover-card" -import clsx from "clsx" +import { AvatarGroup } from "@follow/components/ui/avatar-group/index.js" import { useWhoami } from "~/atoms/user" import { useAuthQuery } from "~/hooks/common" @@ -13,7 +6,7 @@ import { useAppLayoutGridContainerWidth } from "~/providers/app-grid-layout-cont import { Queries } from "~/queries" import { useEntryReadHistory } from "~/store/entry" -import { EntryUser, EntryUserRow, getLimit } from "./EntryReadHistory.shared" +import { EntryUser, getLimit } from "./EntryReadHistory.shared" export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) => { const me = useWhoami() @@ -37,64 +30,27 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) => className="animate-in fade-in @md:flex hidden items-center duration-200" data-hide-in-print > - {entryHistory.userIds - .filter((id) => id !== me?.id) - .slice(0, LIMIT) + + {entryHistory.userIds + .filter((id) => id !== me?.id) + .slice(0, LIMIT) - .map((userId, i) => ( - - ))} + .map((userId) => ( + + ))} + - {!!totalCount && totalCount > LIMIT && ( - - - - - - {totalCount > LIMIT && ( - - - -
    - {entryHistory.userIds - .filter((id) => id !== me?.id) - .slice(LIMIT) - .map((userId) => ( - - ))} -
- - - - )} - - )} +
+ + +{Math.min(totalCount - LIMIT, 99)} + +
) } diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx index 8b226fe3f..276807e1a 100644 --- a/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx +++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx @@ -1,11 +1,5 @@ import { Avatar, AvatarFallback, AvatarImage } from "@follow/components/ui/avatar/index.jsx" -import { - Tooltip, - TooltipContent, - TooltipPortal, - TooltipTrigger, -} from "@follow/components/ui/tooltip/index.jsx" -import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js" +import { TooltipContent, TooltipPortal } from "@follow/components/ui/tooltip/index.jsx" import { FeedViewType } from "@follow/constants" import { getNameInitials } from "@follow/utils/cjk" import { m } from "motion/react" @@ -36,74 +30,37 @@ export const getLimit = (width: number): number => { return 5 } -export const EntryUserRow: Component<{ userId: string }> = memo(({ userId }) => { - const user = useUserById(userId) - const presentUserProfile = usePresentUserProfileModal("drawer") - if (!user) return null - - return ( -
  • { - presentUserProfile(userId) - }} - role="button" - tabIndex={0} - className="cursor-button hover:bg-theme-selection-hover hover:text-theme-selection-foreground relative flex min-w-0 max-w-[50ch] shrink-0 items-center gap-2 truncate rounded-md p-1 px-2" - > - - - {getNameInitials(user.name || "")} - - - {user.name && ( - - {user.name} - - )} -
    • - ) -}) - export const EntryUser: Component<{ userId: string - i: number -}> = memo(({ userId, i }) => { + ref?: React.Ref +}> = memo(({ userId, ref }) => { const user = useUserById(userId) const { t } = useTranslation() const presentUserProfile = usePresentUserProfileModal("drawer") if (!user) return null return ( - - + { + presentUserProfile(userId) }} - asChild > - { - presentUserProfile(userId) - }} - > - - - {getNameInitials(user.name || "")} - - - + + + {getNameInitials(user.name || "")} + + {t("entry_actions.recent_reader")} {user.name} - + ) }) diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx index 6be78a6a7..a44ffe380 100644 --- a/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx +++ b/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx @@ -148,6 +148,7 @@ export const EntryContent: Component = ({ /> + {/* Indicator for the entry */}
    = ({ <>
    { EventBus.dispatch(COMMAND_ID.timeline.switchToPrevious) }} @@ -167,7 +169,7 @@ export const EntryContent: Component = ({
    { EventBus.dispatch(COMMAND_ID.timeline.switchToNext) }} diff --git a/packages/internal/components/src/ui/avatar-group/index.tsx b/packages/internal/components/src/ui/avatar-group/index.tsx new file mode 100644 index 000000000..4c1d25802 --- /dev/null +++ b/packages/internal/components/src/ui/avatar-group/index.tsx @@ -0,0 +1,74 @@ +import { Spring } from "@follow/components/constants/spring" +import { cn } from "@follow/utils/utils" +import type { Transition } from "motion/react" +import { m as motion } from "motion/react" +import * as React from "react" + +import { Tooltip, TooltipTrigger } from "../tooltip" + +type AvatarProps = { + children: React.ReactNode + zIndex: number + transition: Transition + translate: string | number +} + +const AvatarContainer = React.memo(({ children, zIndex, transition, translate }: AvatarProps) => { + return ( + + + + {children} + + + + ) +}) + +type AvatarGroupProps = Omit, "translate"> & { + children: React.ReactElement[] + transition?: Transition + translate?: string | number +} + +function AvatarGroup({ + ref, + children, + className, + transition = Spring.presets.smooth, + translate = "-30%", + + ...props +}: AvatarGroupProps) { + return ( +
    + {children?.map((child, index) => ( + + + {child} + + + ))} +
    + ) +} + +export { AvatarGroup, type AvatarGroupProps }