fix(sidebar): keep the flag-off layout unchanged, and cover it with a test

Two changes in this PR reached users who don't have the channels layout.

The sidebar minimum went from 240 to 272 for everyone, but the extra room exists for the title bar's search button, which only the new layout renders — without it the strip needs 208px and fits 240 comfortably. Anyone on the old layout with a narrow sidebar would have been widened for nothing. SIDEBAR_MIN_WIDTH returns to 240 and the new layout raises its own floor: ResizableSidebar takes an optional minWidth, and ChannelsSidebar supplies it and lifts an already-narrower width once, only while the flag is on.

The channel header's star also rendered unconditionally, so it appeared in the pre-existing channels alpha, which reaches that header too. It is now behind the flag like the rest of the new layout.

Adds a test for openTaskInput, the riskiest shared change, pinning that creates go to Code (or an explicitly requested website space) until a channel is scoped, which only the new layout does.

Generated-By: PostHog Code
Task-Id: c401c7cb-e436-4da3-80bf-1d3008ee5d38

Author: puemos

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

@@ -69,7 +69,7 @@ export function ChannelHeader({ channelId }: { channelId: string }) {
           {channelName ?? "Channel"}
         </Text>
       </Button>
-      {channel && channel.name !== PERSONAL_CHANNEL_NAME && (
+      {channelsLayout && channel && channel.name !== PERSONAL_CHANNEL_NAME && (
         <ChannelStarButton channel={channel} />
       )}
       {!channelsLayout && <ChannelTabs channelId={channelId} />}

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

@@ -18,6 +18,7 @@ import { ProjectSwitcher } from "@posthog/ui/features/sidebar/components/Project
 import { SidebarMenu } from "@posthog/ui/features/sidebar/components/SidebarMenu";
 import { SidebarNavSection } from "@posthog/ui/features/sidebar/components/SidebarNavSection";
 import { UpdateBanner } from "@posthog/ui/features/sidebar/components/UpdateBanner";
+import { CHANNELS_SIDEBAR_MIN_WIDTH } from "@posthog/ui/features/sidebar/constants";
 import {
   beginSidebarPeek,
   cancelSidebarPeek,
@@ -90,6 +91,16 @@ export function ChannelsSidebar() {
   // mounts a provider-laden row per channel) swaps in.
   const bodyChannelsWorld = useDeferredValue(channelsWorld);
 
+  // The channels layout's title bar needs more room than the shared floor, so
+  // it raises the minimum here rather than in the constant — leaving the width
+  // of everyone on the old layout untouched.
+  const minWidth = channelsLayout ? CHANNELS_SIDEBAR_MIN_WIDTH : undefined;
+  useEffect(() => {
+    if (channelsLayout && width < CHANNELS_SIDEBAR_MIN_WIDTH) {
+      setWidth(CHANNELS_SIDEBAR_MIN_WIDTH);
+    }
+  }, [channelsLayout, width, setWidth]);
+
   const archivedTaskIds = useArchivedTaskIds();
 
   // The route is the source of truth: a /website/$channelId page adopts that
@@ -134,6 +145,7 @@ export function ChannelsSidebar() {
       isResizing={isResizing}
       setIsResizing={setIsResizing}
       side="left"
+      minWidth={minWidth}
       setOpen={setOpen}
       peek={peek}
       onPeekEnter={beginSidebarPeek}

packages/ui/src/features/canvas/components/channelsSidebarStore.ts

@@ -5,6 +5,7 @@ export const useChannelsSidebarStore = createSidebarStore({
   name: "channels-sidebar",
   defaultWidth: SIDEBAR_MIN_WIDTH,
   // Also re-clamps the legacy Code width adopted by the migration below.
+  // The channels layout raises the floor further, at runtime (ChannelsSidebar).
   minWidth: SIDEBAR_MIN_WIDTH,
 });
 

packages/ui/src/features/sidebar/constants.ts

@@ -1,11 +1,14 @@
 import type { SidebarNavItem } from "@posthog/shared/analytics-events";
 
+export const SIDEBAR_MIN_WIDTH = 240;
+
 /**
- * The title bar's left strip is pinned to this width and none of its contents
- * shrink: inset, logo, toggle, search and history buttons come to 228px, so
- * anything near 240 leaves the two groups touching.
+ * Wider floor for the channels layout only. The title bar's left strip is
+ * pinned to the sidebar width and none of its contents shrink; that layout
+ * adds a search button, taking the strip to 228px, so 240 would leave the two
+ * groups touching. Off, the strip needs 208px and keeps the usual floor.
  */
-export const SIDEBAR_MIN_WIDTH = 272;
+export const CHANNELS_SIDEBAR_MIN_WIDTH = 272;
 
 export const CUSTOMIZABLE_NAV_ITEMS = [
   { id: "inbox", label: "Inbox", analyticsId: "inbox", defaultVisible: true },

packages/ui/src/primitives/ResizableSidebar.tsx

@@ -25,6 +25,9 @@ interface ResizableSidebarProps {
   isResizing: boolean;
   setIsResizing: (isResizing: boolean) => void;
   side: "left" | "right";
+  // Floor for drag-resize. Defaults to SIDEBAR_MIN_WIDTH; callers whose chrome
+  // needs more room can raise it.
+  minWidth?: number;
   // Enables drag-to-close/reopen. Without it, dragging just clamps at min.
   setOpen?: (open: boolean) => void;
   // While closed, the panel can "peek" — slide out over the content as a
@@ -45,6 +48,7 @@ export const ResizableSidebar: React.FC<ResizableSidebarProps> = ({
   isResizing,
   setIsResizing,
   side,
+  minWidth = SIDEBAR_MIN_WIDTH,
   setOpen,
   peek = false,
   onPeekEnter,
@@ -101,7 +105,7 @@ export const ResizableSidebar: React.FC<ResizableSidebarProps> = ({
       const pointer =
         side === "left" ? e.clientX : window.innerWidth - e.clientX;
       const maxWidth = window.innerWidth * 0.5;
-      const clamped = Math.max(SIDEBAR_MIN_WIDTH, Math.min(maxWidth, pointer));
+      const clamped = Math.max(minWidth, Math.min(maxWidth, pointer));
 
       if (open) {
         if (pointer < DRAG_COLLAPSE_AT && setOpen) {
@@ -166,6 +170,7 @@ export const ResizableSidebar: React.FC<ResizableSidebarProps> = ({
     isResizing,
     setIsResizing,
     side,
+    minWidth,
     open,
     peek,
     width,

packages/ui/src/router/useOpenTask.test.ts

@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const navigateToChannelNewTask = vi.fn();
+const navigateToWebsiteNew = vi.fn();
+const navigateToCode = vi.fn();
+
+vi.mock("./navigationBridge", () => ({
+  navigateToChannelNewTask: (...args: unknown[]) =>
+    navigateToChannelNewTask(...args),
+  navigateToWebsiteNew: () => navigateToWebsiteNew(),
+  navigateToCode: () => navigateToCode(),
+  navigateToChannelTask: vi.fn(),
+  navigateToTaskDetail: vi.fn(),
+  navigateToFolderSettings: vi.fn(),
+}));
+vi.mock("@posthog/di/container", () => ({
+  resolveService: vi.fn(),
+  resolveServiceOptional: vi.fn(),
+}));
+vi.mock("@posthog/ui/shell/analytics", () => ({
+  track: vi.fn(),
+  setActiveTaskContext: vi.fn(),
+}));
+
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { openTaskInput } from "./useOpenTask";
+
+describe("openTaskInput channel scoping", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useCurrentChannelStore.setState({ currentChannelId: null });
+  });
+
+  // Without the channels layout nothing sets a current channel, so creates must
+  // land where they always did rather than being pulled into a channel.
+  it("routes to Code when no channel is current", () => {
+    openTaskInput();
+    expect(navigateToCode).toHaveBeenCalledTimes(1);
+    expect(navigateToChannelNewTask).not.toHaveBeenCalled();
+  });
+
+  it("still honours an explicit website space when no channel is current", () => {
+    openTaskInput({ space: "website" });
+    expect(navigateToWebsiteNew).toHaveBeenCalledTimes(1);
+    expect(navigateToChannelNewTask).not.toHaveBeenCalled();
+  });
+
+  it("routes into the current channel once one is scoped", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "chan-1" });
+    openTaskInput();
+    expect(navigateToChannelNewTask).toHaveBeenCalledWith("chan-1");
+    expect(navigateToCode).not.toHaveBeenCalled();
+  });
+
+  it("carries prefill into the channel route", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "chan-1" });
+    openTaskInput({ initialPrompt: "ship it" });
+    expect(navigateToChannelNewTask).toHaveBeenCalledWith("chan-1");
+  });
+});