diff --git a/packages/ui/src/features/canvas/components/ActivityView.tsx b/packages/ui/src/features/canvas/components/ActivityView.tsx index 18b186efa7..f209b08b02 100644 --- a/packages/ui/src/features/canvas/components/ActivityView.tsx +++ b/packages/ui/src/features/canvas/components/ActivityView.tsx @@ -1,4 +1,10 @@ -import { BellIcon, LinkIcon, RobotIcon } from "@phosphor-icons/react"; +import { + BellIcon, + CheckIcon, + ChecksIcon, + LinkIcon, + RobotIcon, +} from "@phosphor-icons/react"; import type { TaskActivityItem } from "@posthog/core/canvas/taskActivity"; import { Avatar, @@ -102,12 +108,14 @@ function ActivityRow({ item, folderChannelId, onOpen, + onMarkRead, currentUser, }: { item: TaskActivityItem; /** Desktop folder channel id (the /website route param); null when unmapped. */ folderChannelId: string | null; onOpen: (item: TaskActivityItem) => void; + onMarkRead: (item: TaskActivityItem) => void; currentUser?: UserBasic | null; }) { const isAgentActivity = @@ -181,6 +189,18 @@ function ActivityRow({ )} + {item.isUnread && ( + onMarkRead(item)} + > + + + )} {folderChannelId && ( { + markTasksRead( + items + .filter((item) => item.isUnread) + .map((item) => ({ + task_id: item.taskId, + seen_before: item.activityAt, + })), + ); + }, [items, markTasksRead]); // Items carry backend channel names only; the desktop folder-channel id // (needed for /website navigation and copy-link) is resolved here, where // the single useChannels subscription lives. @@ -242,12 +279,28 @@ export function ActivityView() { return ( - - Activity - - - Tasks you're involved in across channels. - + + + + Activity + + + Tasks you're involved in across channels. + + + {unreadCount > 0 && ( + + + Mark all as read + + )} + {isLoading && items.length === 0 ? ( @@ -274,6 +327,7 @@ export function ActivityView() { item={item} folderChannelId={folderChannelIdFor(item.channelName)} onOpen={markRead} + onMarkRead={markRead} currentUser={currentUser} /> ))}