feat(sidebar): Drag to reorder nav items in customize dialog

packages/shared/src/analytics-events.ts

@@ -270,6 +270,12 @@ export interface SidebarCustomizedProperties {
   visible: boolean;
 }
 
+export interface SidebarReorderedProperties {
+  item: SidebarNavItem;
+  /** Zero-based position of the item in the nav after the drag. */
+  to_index: number;
+}
+
 export interface BrainrotActivatedProperties {
   /** Grid layout preset, e.g. "2x2". */
   layout: string;
@@ -1140,6 +1146,7 @@ export const ANALYTICS_EVENTS = {
   POSTHOG_WEB_OPENED: "PostHog web opened",
   SIDEBAR_NAV_ITEM_CLICKED: "Sidebar nav item clicked",
   SIDEBAR_CUSTOMIZED: "Sidebar customized",
+  SIDEBAR_REORDERED: "Sidebar reordered",
 
   // Permission events
   PERMISSION_RESPONDED: "Permission responded",
@@ -1300,6 +1307,7 @@ export type EventPropertyMap = {
   [ANALYTICS_EVENTS.POSTHOG_WEB_OPENED]: never;
   [ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED]: SidebarNavItemClickedProperties;
   [ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED]: SidebarCustomizedProperties;
+  [ANALYTICS_EVENTS.SIDEBAR_REORDERED]: SidebarReorderedProperties;
 
   // Permission events
   [ANALYTICS_EVENTS.PERMISSION_RESPONDED]: PermissionRespondedProperties;

packages/ui/src/features/sidebar/components/CustomizeSidebarDialog.test.tsx

@@ -1,12 +1,49 @@
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { Theme } from "@radix-ui/themes";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const { track } = vi.hoisted(() => ({ track: vi.fn() }));
+type CapturedDragEvent = {
+  operation: { source?: { id?: string }; target?: { id?: string } };
+  canceled?: boolean;
+};
+
+const { track, dndCapture } = vi.hoisted(() => ({
+  track: vi.fn(),
+  dndCapture: {} as {
+    onDragStart?: (event: CapturedDragEvent) => void;
+    onDragOver?: (event: CapturedDragEvent) => void;
+    onDragEnd?: (event: CapturedDragEvent) => void;
+  },
+}));
 
 vi.mock("@posthog/ui/shell/analytics", () => ({ track }));
+vi.mock("@dnd-kit/react", () => ({
+  DragDropProvider: ({
+    onDragStart,
+    onDragOver,
+    onDragEnd,
+    children,
+  }: {
+    onDragStart?: (event: CapturedDragEvent) => void;
+    onDragOver?: (event: CapturedDragEvent) => void;
+    onDragEnd?: (event: CapturedDragEvent) => void;
+    children?: React.ReactNode;
+  }) => {
+    dndCapture.onDragStart = onDragStart;
+    dndCapture.onDragOver = onDragOver;
+    dndCapture.onDragEnd = onDragEnd;
+    return <>{children}</>;
+  },
+}));
+vi.mock("@dnd-kit/react/sortable", () => ({
+  useSortable: () => ({
+    ref: () => {},
+    handleRef: () => {},
+    isDragging: false,
+  }),
+}));
 
 import {
   CUSTOMIZABLE_NAV_ITEM_IDS,
@@ -38,10 +75,42 @@ function renderDialog(available = availability()) {
   );
 }
 
+function dragStart(sourceId: string) {
+  act(() => {
+    dndCapture.onDragStart?.({ operation: { source: { id: sourceId } } });
+  });
+}
+
+function dragOver(sourceId: string, targetId: string) {
+  act(() => {
+    dndCapture.onDragOver?.({
+      operation: { source: { id: sourceId }, target: { id: targetId } },
+    });
+  });
+}
+
+function dragEnd(
+  sourceId: string,
+  { cancel = false }: { cancel?: boolean } = {},
+) {
+  act(() => {
+    dndCapture.onDragEnd?.({
+      operation: { source: { id: sourceId } },
+      canceled: cancel,
+    });
+  });
+}
+
+function rowLabels() {
+  return screen
+    .getAllByRole("checkbox")
+    .map((checkbox) => checkbox.closest("label")?.textContent);
+}
+
 describe("CustomizeSidebarDialog", () => {
   beforeEach(() => {
     track.mockReset();
-    useSidebarStore.setState({ navItemOverrides: {} });
+    useSidebarStore.setState({ navItemOverrides: {}, navItemOrder: [] });
   });
 
   it("unchecking a visible item demotes it and tracks the change", async () => {
@@ -82,4 +151,88 @@ describe("CustomizeSidebarDialog", () => {
       screen.getByRole("checkbox", { name: "Configure" }),
     ).toBeInTheDocument();
   });
+
+  it("renders rows in the stored order", () => {
+    useSidebarStore.setState({ navItemOrder: ["loops", "search"] });
+    renderDialog();
+
+    expect(rowLabels().slice(0, 2)).toEqual(["Loops", "Search"]);
+  });
+
+  it("previews on dragover and persists only on drop", () => {
+    renderDialog();
+
+    dragStart("skills");
+    dragOver("skills", "search");
+
+    expect(rowLabels()[0]).toBe("Skills");
+    expect(useSidebarStore.getState().navItemOrder).toEqual([]);
+    expect(track).not.toHaveBeenCalled();
+
+    dragEnd("skills");
+
+    expect(useSidebarStore.getState().navItemOrder).toEqual([
+      "skills",
+      "search",
+      "inbox",
+      "agents",
+      "mcp-servers",
+      "command-center",
+      "contexts",
+      "activity",
+      "configure",
+      "loops",
+    ]);
+    expect(track).toHaveBeenCalledWith(ANALYTICS_EVENTS.SIDEBAR_REORDERED, {
+      item: "skills",
+      to_index: 0,
+    });
+  });
+
+  it("ignores a repeated dragover for the same source and target", () => {
+    renderDialog();
+
+    dragStart("skills");
+    dragOver("skills", "search");
+    dragOver("skills", "search");
+
+    expect(rowLabels()[0]).toBe("Skills");
+
+    dragEnd("skills");
+
+    expect(useSidebarStore.getState().navItemOrder[0]).toBe("skills");
+  });
+
+  it("a canceled drag drops the preview and leaves the store untouched", () => {
+    renderDialog();
+
+    dragStart("skills");
+    dragOver("skills", "search");
+    dragEnd("skills", { cancel: true });
+
+    expect(rowLabels()[0]).toBe("Search");
+    expect(useSidebarStore.getState().navItemOrder).toEqual([]);
+    expect(track).not.toHaveBeenCalled();
+  });
+
+  it("a drop without movement neither persists nor tracks", () => {
+    renderDialog();
+
+    dragStart("skills");
+    dragEnd("skills");
+
+    expect(useSidebarStore.getState().navItemOrder).toEqual([]);
+    expect(track).not.toHaveBeenCalled();
+  });
+
+  it("reset clears the stored order back to the default", async () => {
+    const user = userEvent.setup();
+    useSidebarStore.setState({ navItemOrder: ["loops", "search"] });
+    renderDialog();
+
+    await user.click(screen.getByRole("button", { name: "Reset" }));
+
+    expect(useSidebarStore.getState().navItemOrder).toEqual([]);
+    expect(rowLabels()[0]).toBe("Search");
+  });
 });