trunk-merge/pr-3687/572a8904-813e-47ac-9cd3-635f1708e031

packages/ui/src/features/canvas/components/ChannelFeedView.tsx

@@ -48,7 +48,7 @@ import { TaskTabIcon } from "@posthog/ui/features/browser-tabs/TaskTabIcon";
 import type { ChannelFeedSystemMessage } from "@posthog/ui/features/canvas/hooks/useChannelFeedMessages";
 import { useChannelTaskData } from "@posthog/ui/features/canvas/hooks/useChannelTaskData";
 import { useTaskThread } from "@posthog/ui/features/canvas/hooks/useTaskThread";
-import { shouldOpenTaskCardInline } from "@posthog/ui/features/canvas/taskCardNavigation";
+import { taskCardNavigation } from "@posthog/ui/features/canvas/taskCardNavigation";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
 import {
   type SidebarPrState,
@@ -59,7 +59,6 @@ import { Text } from "@radix-ui/themes";
 import { Link } from "@tanstack/react-router";
 import {
   Fragment,
-  type MouseEvent,
   memo,
   type ReactNode,
   useEffect,
@@ -270,12 +269,10 @@ const NO_PENDING: PendingKickoff[] = [];
 export function TaskCard({
   task,
   channelId,
-  onOpen,
   inThread = false,
 }: {
   task: Task;
   channelId: string;
-  onOpen?: () => void;
   inThread?: boolean;
 }) {
   const statusDisplay = useTaskStatusDisplay(task);
@@ -284,18 +281,10 @@ export function TaskCard({
       ? task.latest_run.output.pr_url
       : undefined;
   const stage = task.latest_run?.stage;
-  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    if (!onOpen || !shouldOpenTaskCardInline(event)) return;
-    event.preventDefault();
-    onOpen();
-  };
-
   return (
     <Link
-      to="/website/$channelId/tasks/$taskId"
-      params={{ channelId, taskId: task.id }}
+      {...taskCardNavigation(channelId, task.id)}
       preload="intent"
-      onClick={handleClick}
       className={cn(
         "mt-1.5 block w-full text-inherit no-underline outline-none focus-visible:ring-(--accent-8) focus-visible:ring-2",
         inThread ? "rounded-none" : "rounded-sm",
@@ -504,11 +493,7 @@ const FeedItem = memo(function FeedItem({
         </ThreadItemActions>
       }
     >
-      <TaskCard
-        task={task}
-        channelId={channelId}
-        onOpen={() => onOpenThread(task)}
-      />
+      <TaskCard task={task} channelId={channelId} />
       <ReplyFooter
         taskId={task.id}
         inView={inView}

packages/ui/src/features/canvas/taskCardNavigation.test.ts

@@ -1,30 +1,11 @@
 import { describe, expect, it } from "vitest";
-import { shouldOpenTaskCardInline } from "./taskCardNavigation";
+import { taskCardNavigation } from "./taskCardNavigation";
 
-const PRIMARY_CLICK = {
-  defaultPrevented: false,
-  button: 0,
-  metaKey: false,
-  ctrlKey: false,
-  shiftKey: false,
-  altKey: false,
-};
-
-describe("shouldOpenTaskCardInline", () => {
-  it("opens an unmodified primary click in the thread dock", () => {
-    expect(shouldOpenTaskCardInline(PRIMARY_CLICK)).toBe(true);
-  });
-
-  it.each([
-    { defaultPrevented: true },
-    { button: 1 },
-    { metaKey: true },
-    { ctrlKey: true },
-    { shiftKey: true },
-    { altKey: true },
-  ])("leaves browser navigation intact for %o", (override) => {
-    expect(shouldOpenTaskCardInline({ ...PRIMARY_CLICK, ...override })).toBe(
-      false,
-    );
+describe("taskCardNavigation", () => {
+  it("opens the channel task view", () => {
+    expect(taskCardNavigation("channel-1", "task-1")).toEqual({
+      to: "/website/$channelId/tasks/$taskId",
+      params: { channelId: "channel-1", taskId: "task-1" },
+    });
   });
 });

packages/ui/src/features/canvas/taskCardNavigation.ts

@@ -1,21 +1,6 @@
-export interface TaskCardPointerIntent {
-  defaultPrevented: boolean;
-  button: number;
-  metaKey: boolean;
-  ctrlKey: boolean;
-  shiftKey: boolean;
-  altKey: boolean;
-}
-
-export function shouldOpenTaskCardInline(
-  event: TaskCardPointerIntent,
-): boolean {
-  return (
-    !event.defaultPrevented &&
-    event.button === 0 &&
-    !event.metaKey &&
-    !event.ctrlKey &&
-    !event.shiftKey &&
-    !event.altKey
-  );
+export function taskCardNavigation(channelId: string, taskId: string) {
+  return {
+    to: "/website/$channelId/tasks/$taskId" as const,
+    params: { channelId, taskId },
+  };
 }