fix(bluebird): make the thread panel collapse stick when opening a task

packages/shared/src/analytics-events.ts

@@ -814,7 +814,8 @@ export type ChannelsSurface =
   | "pinned"
   | "dashboards_grid"
   | "canvas"
-  | "context";
+  | "context"
+  | "thread_panel";
 
 export type ChannelActionType =
   | "enter_space"
@@ -840,7 +841,9 @@ export type ChannelActionType =
   | "file_task"
   | "unfile_task"
   | "archive_task"
-  | "open_task";
+  | "open_task"
+  | "collapse_thread"
+  | "expand_thread";
 
 export interface ChannelActionProperties {
   action_type: ChannelActionType;

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

@@ -1,7 +1,9 @@
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import type { Task } from "@posthog/shared/domain-types";
 import { ThreadPanel } from "@posthog/ui/features/canvas/components/ThreadPanel";
 import { useThreadPanelStore } from "@posthog/ui/features/canvas/stores/threadPanelStore";
 import { ResizableSidebar } from "@posthog/ui/primitives/ResizableSidebar";
+import { track } from "@posthog/ui/shell/analytics";
 import { useState } from "react";
 
 // The right-hand dock hosting a task's ThreadPanel: a thin rail when
@@ -24,13 +26,22 @@ export function ThreadSidebar({
   const setCollapsed = useThreadPanelStore((s) => s.setCollapsed);
   const [isResizing, setIsResizing] = useState(false);
 
+  const toggleCollapsed = (next: boolean) => {
+    setCollapsed(next);
+    track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+      action_type: next ? "collapse_thread" : "expand_thread",
+      surface: "thread_panel",
+      task_id: taskId,
+    });
+  };
+
   if (collapsed) {
     return (
       <ThreadPanel
         taskId={taskId}
         task={task}
         collapsed
-        onToggleCollapsed={() => setCollapsed(false)}
+        onToggleCollapsed={() => toggleCollapsed(false)}
       />
     );
   }
@@ -48,7 +59,7 @@ export function ThreadSidebar({
         taskId={taskId}
         task={task}
         onClose={onClose}
-        onToggleCollapsed={() => setCollapsed(true)}
+        onToggleCollapsed={() => toggleCollapsed(true)}
       />
     </ResizableSidebar>
   );

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

@@ -108,15 +108,16 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
     [channelId, fileTask, invalidateFeed, queryClient],
   );
 
+  // The task route's mount effect points the panel at the task, so navigating
+  // is enough here.
   const handleOpenTask = useCallback(
     (task: Task) => {
-      openThread(task.id);
       void navigate({
         to: "/website/$channelId/tasks/$taskId",
         params: { channelId, taskId: task.id },
       });
     },
-    [channelId, navigate, openThread],
+    [channelId, navigate],
   );
 
   const handleOpenThread = useCallback(

packages/ui/src/features/canvas/stores/threadPanelStore.ts

@@ -13,7 +13,8 @@ interface ThreadPanelState {
   taskId: string | null;
   collapsed: boolean;
   width: number;
-  openThread: (taskId: string) => void;
+  /** Points the panel at a task; expands it unless `expand: false`. */
+  openThread: (taskId: string, opts?: { expand?: boolean }) => void;
   closeThread: () => void;
   setCollapsed: (collapsed: boolean) => void;
   setWidth: (width: number) => void;
@@ -25,7 +26,8 @@ export const useThreadPanelStore = create<ThreadPanelState>()(
       taskId: null,
       collapsed: false,
       width: DEFAULT_PANEL_WIDTH,
-      openThread: (taskId) => set({ taskId, collapsed: false }),
+      openThread: (taskId, opts) =>
+        set(opts?.expand === false ? { taskId } : { taskId, collapsed: false }),
       closeThread: () => set({ taskId: null }),
       setCollapsed: (collapsed) => set({ collapsed }),
       setWidth: (width) => set({ width }),

packages/ui/src/router/routes/website/$channelId/tasks/$taskId.tsx

@@ -40,11 +40,11 @@ function ChannelTaskDetailRoute() {
     markAsViewed(taskId);
   }, [taskId, markAsViewed]);
 
-  // Opening a task shows its thread docked on the right (collapsible). The
-  // panel follows the task being viewed.
+  // Opening a task shows its thread docked on the right, keeping the user's
+  // collapse preference. The panel follows the task being viewed.
   const openThread = useThreadPanelStore((s) => s.openThread);
   useEffect(() => {
-    openThread(taskId);
+    openThread(taskId, { expand: false });
   }, [openThread, taskId]);
 
   const { data: fetched } = useQuery({