feat(channels): add recents + pinned to channel home#3033
Conversation
Reorder the channel home page so the prompt box sits above the starter suggestions, and add a two-column glance below them: recent tasks on the left (5 most recently active, with the shared task status icons and an "All tasks →" link to the Recents tab) and pinned artifacts on the right (5 most recently pinned canvases). Typing in the prompt box fades out the suggestions and lists so the composer has focus. Generated-By: PostHog Code Task-Id: b1d3004b-eca2-40c5-b30a-7d8db3f22573
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
|
Reviews (1): Last reviewed commit: "feat(channels): add recents + pinned to ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const recentTasks = useMemo(() => { | ||
| const taskById = new Map(tasks?.map((t) => [t.id, t]) ?? []); | ||
| return filedTasks | ||
| .flatMap((f) => { | ||
| const task = taskById.get(f.taskId); | ||
| if (!task || archivedTaskIds.has(f.taskId)) return []; | ||
| return [{ task, ts: Date.parse(task.updated_at) || 0 }]; | ||
| }) | ||
| .sort((a, b) => b.ts - a.ts) | ||
| .slice(0, RECENT_TASK_LIMIT); | ||
| }, [filedTasks, tasks, archivedTaskIds]); |
There was a problem hiding this comment.
useTasks() data starts as undefined and useChannelTasks defaults to [] while loading, so taskById is empty on first render and recentTasks is always empty — causing "No tasks yet" to flash before real data arrives. Both isLoading values need to gate the empty state. The same race applies to PinnedArtifactsColumn where dashboards defaults to [] during loading.
Rule Used: In cases where there are multiple states to handle... (source)
Learned From
PostHog/posthog#32610
| track(ANALYTICS_EVENTS.CHANNEL_ACTION, { | ||
| action_type: "open_artifact", | ||
| surface: "channel_home", | ||
| channel_id: channelId, | ||
| }); |
There was a problem hiding this comment.
dashboard_id in open-artifact analytics
openTask includes task_id in its tracking call, but the parallel openCanvas call omits dashboard_id. The value is available as the function parameter, so this looks like an oversight that will make the open_artifact events harder to query later.
| track(ANALYTICS_EVENTS.CHANNEL_ACTION, { | |
| action_type: "open_artifact", | |
| surface: "channel_home", | |
| channel_id: channelId, | |
| }); | |
| track(ANALYTICS_EVENTS.CHANNEL_ACTION, { | |
| action_type: "open_artifact", | |
| surface: "channel_home", | |
| channel_id: channelId, | |
| dashboard_id: dashboardId, | |
| }); |
| <div | ||
| className={cn( | ||
| "flex flex-col gap-6 transition-opacity duration-200", | ||
| !composerEmpty && "pointer-events-none opacity-0", | ||
| )} | ||
| aria-hidden={!composerEmpty} |
There was a problem hiding this comment.
pointer-events-none and opacity-0 prevent mouse interaction and visual display, but interactive elements inside (the "All tasks" <Link> and every <ListRow> button) remain in the keyboard tab order while the user is typing. A user pressing Tab during composition can inadvertently land on invisible controls. Adding the HTML inert attribute (inert={!composerEmpty || undefined}) to this div would suppress focus, click, and screen-reader exposure all at once, complementing the existing aria-hidden.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
- Gate the "No tasks yet" / "No pinned artifacts yet" empty states on the underlying queries' loading flags so they don't flash before data arrives. - Include `dashboard_id` on the open_artifact analytics event (add the optional field to ChannelActionProperties). - Mark the faded suggestions/lists container `inert` while typing so its links/buttons leave the keyboard tab order, complementing aria-hidden. Generated-By: PostHog Code Task-Id: b1d3004b-eca2-40c5-b30a-7d8db3f22573
Declutter the channel home: collapse the suggestions grid into four centered category chips (Code, Analysis, Debug, Canvas) below the prompt box. Clicking a chip crossfades the chips + recents out and an action list in, with each action showing its icon, title, and a muted inline description, plus a back button to return to the chips. The recents and pinned columns hide alongside the chips while a category is open. Also restore the channel CONTEXT.md indicator that was lost in the home redesign: when a channel has a context doc, the composer now shows the "Using: #channel CONTEXT.md" chip (with dismiss) it had on the new-task page. Generated-By: PostHog Code Task-Id: b9cd812b-a600-4565-87d0-f5b9f195ea14
Match the channel-home CONTEXT.md chip to the TaskInput style: attach it to the bottom of the prompt box with a slight underlap (negative top margin, no top border, bottom-only rounding, inset horizontal margin) instead of floating it below as a detached pill. Generated-By: PostHog Code Task-Id: b9cd812b-a600-4565-87d0-f5b9f195ea14
Turn the channel-home category chips into a quill Menubar: each chip is a menu trigger whose popup lists that category's suggested actions, with hover-to-switch between menus. Anchoring each popup to the whole bar (not its trigger) makes Base UI's --anchor-width the bar width, so the popup fills the bar. The bar now stays put while a menu is open; only the recents below fade out. Chips get a bit more vertical margin. Drops the previous in-place expand/back-button + crossfade in favor of the menu popups' built-in fade. Generated-By: PostHog Code Task-Id: b9cd812b-a600-4565-87d0-f5b9f195ea14
1 participant
Problem
The channel home page only showed the starter suggestions above the prompt box, with no at-a-glance view of what's happening in the channel.
Why: Raquel wanted the channel home to surface recent activity and pinned artifacts directly, with the prompt box leading the page.
Changes
How did you test this?
pnpm --filter @posthog/ui typecheckpasses.Automatic notifications
Created with PostHog Code