add drag to reorder nav items in customize dialog

Author: charlesvien

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,50 @@
 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,
+  }),
+}));
+vi.mock("@dnd-kit/dom", () => ({ PointerSensor: class {} }));
 
 import {
   CUSTOMIZABLE_NAV_ITEM_IDS,
@@ -38,10 +76,27 @@ function renderDialog(available = availability()) {
   );
 }
 
+function drag(
+  sourceId: string,
+  targetId: string,
+  { cancel = false }: { cancel?: boolean } = {},
+) {
+  act(() => {
+    dndCapture.onDragStart?.({ operation: { source: { id: sourceId } } });
+    dndCapture.onDragOver?.({
+      operation: { source: { id: sourceId }, target: { id: targetId } },
+    });
+    dndCapture.onDragEnd?.({
+      operation: { source: { id: sourceId }, target: { id: targetId } },
+      canceled: cancel,
+    });
+  });
+}
+
 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 +137,47 @@ describe("CustomizeSidebarDialog", () => {
       screen.getByRole("checkbox", { name: "Configure" }),
     ).toBeInTheDocument();
   });
+
+  it("renders rows in the stored order", () => {
+    useSidebarStore.setState({ navItemOrder: ["loops", "search"] });
+    renderDialog();
+
+    const labels = screen
+      .getAllByRole("checkbox")
+      .map((checkbox) => checkbox.closest("label")?.textContent);
+
+    expect(labels.slice(0, 2)).toEqual(["Loops", "Search"]);
+  });
+
+  it("dragging a row persists the new order and tracks on drop", () => {
+    renderDialog();
+
+    drag("skills", "search");
+
+    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("a canceled drag restores the order from dragstart", () => {
+    renderDialog();
+
+    drag("skills", "search", { cancel: true });
+
+    expect(useSidebarStore.getState().navItemOrder).toEqual([]);
+    expect(track).not.toHaveBeenCalled();
+  });
 });

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

@@ -1,5 +1,9 @@
+import { PointerSensor } from "@dnd-kit/dom";
+import { type DragDropEvents, DragDropProvider } from "@dnd-kit/react";
+import { useSortable } from "@dnd-kit/react/sortable";
 import {
   Bell,
+  DotsSixVertical,
   EnvelopeSimple,
   HashIcon,
   Lightbulb,
@@ -12,13 +16,16 @@ import {
 } from "@phosphor-icons/react";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import {
-  CUSTOMIZABLE_NAV_ITEMS,
+  type CustomizableNavItem,
   type CustomizableNavItemId,
   isNavItemVisible,
+  moveNavItem,
+  orderedNavItems,
 } from "@posthog/ui/features/sidebar/constants";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { track } from "@posthog/ui/shell/analytics";
 import { Button, Checkbox, Dialog, Flex, Text } from "@radix-ui/themes";
+import { type RefCallback, useRef } from "react";
 
 const ITEM_ICONS: Record<
   CustomizableNavItemId,
@@ -36,6 +43,13 @@ const ITEM_ICONS: Record<
   loops: RepeatIcon,
 };
 
+function sameOrder(
+  a: readonly CustomizableNavItemId[],
+  b: readonly CustomizableNavItemId[],
+): boolean {
+  return a.length === b.length && a.every((id, i) => id === b[i]);
+}
+
 interface CustomizeSidebarDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -50,44 +64,87 @@ export function CustomizeSidebarDialog({
   available,
 }: CustomizeSidebarDialogProps) {
   const navItemOverrides = useSidebarStore((s) => s.navItemOverrides);
+  const navItemOrder = useSidebarStore((s) => s.navItemOrder);
   const setNavItemVisible = useSidebarStore((s) => s.setNavItemVisible);
+  const setNavItemOrder = useSidebarStore((s) => s.setNavItemOrder);
+
+  const items = orderedNavItems(navItemOrder).filter(
+    ({ id }) => available?.[id] !== false,
+  );
+
+  // Dragover persists the reorder live so the list previews it, which means a
+  // canceled drag must restore the order captured at dragstart.
+  const initialOrder = useRef<readonly CustomizableNavItemId[] | null>(null);
+
+  const handleDragStart: DragDropEvents["dragstart"] = () => {
+    initialOrder.current = useSidebarStore.getState().navItemOrder;
+  };
+
+  const handleDragOver: DragDropEvents["dragover"] = (event) => {
+    const sourceId = event.operation.source?.id;
+    const targetId = event.operation.target?.id;
+    if (!sourceId || !targetId || sourceId === targetId) return;
+    const current = useSidebarStore.getState().navItemOrder;
+    const next = moveNavItem(current, String(sourceId), String(targetId));
+    if (next !== current) setNavItemOrder(next);
+  };
+
+  const handleDragEnd: DragDropEvents["dragend"] = (event) => {
+    const before = initialOrder.current;
+    initialOrder.current = null;
+    if (event.canceled) {
+      if (before) setNavItemOrder(before);
+      return;
+    }
+    const after = useSidebarStore.getState().navItemOrder;
+    if (before && sameOrder(before, after)) return;
+    const sourceId = event.operation.source?.id;
+    const moved = orderedNavItems(after).find(({ id }) => id === sourceId);
+    if (!moved) return;
+    track(ANALYTICS_EVENTS.SIDEBAR_REORDERED, {
+      item: moved.analyticsId,
+      to_index: orderedNavItems(after).findIndex(({ id }) => id === moved.id),
+    });
+  };
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Content maxWidth="360px">
         <Dialog.Title>Customize sidebar</Dialog.Title>
         <Dialog.Description className="text-gray-10 text-sm">
-          Choose which items appear in your sidebar. Unchecked items live under
-          More.
+          Choose which items appear in your sidebar and drag to reorder.
+          Unchecked items live under More.
         </Dialog.Description>
 
-        <Flex direction="column" gap="3" mt="4">
-          {CUSTOMIZABLE_NAV_ITEMS.filter(
-            ({ id }) => available?.[id] !== false,
-          ).map(({ id, label, analyticsId }) => {
-            const ItemIcon = ITEM_ICONS[id];
-            const visible = isNavItemVisible(navItemOverrides, id);
-            return (
-              <Text key={id} as="label" size="2">
-                <Flex gap="2" align="center">
-                  <Checkbox
-                    checked={visible}
-                    onCheckedChange={(checked) => {
-                      const nextVisible = checked === true;
-                      setNavItemVisible(id, nextVisible);
-                      track(ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED, {
-                        item: analyticsId,
-                        visible: nextVisible,
-                      });
-                    }}
-                  />
-                  <ItemIcon size={16} />
-                  {label}
-                </Flex>
-              </Text>
-            );
-          })}
-        </Flex>
+        <DragDropProvider
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+          sensors={[
+            {
+              plugin: PointerSensor,
+              options: { activationConstraints: { distance: { value: 5 } } },
+            },
+          ]}
+        >
+          <Flex direction="column" gap="3" mt="4">
+            {items.map((item, index) => (
+              <SortableNavItemRow
+                key={item.id}
+                item={item}
+                index={index}
+                visible={isNavItemVisible(navItemOverrides, item.id)}
+                onVisibleChange={(nextVisible) => {
+                  setNavItemVisible(item.id, nextVisible);
+                  track(ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED, {
+                    item: item.analyticsId,
+                    visible: nextVisible,
+                  });
+                }}
+              />
+            ))}
+          </Flex>
+        </DragDropProvider>
 
         <Flex mt="4" justify="end">
           <Dialog.Close>
@@ -100,3 +157,47 @@ export function CustomizeSidebarDialog({
     </Dialog.Root>
   );
 }
+
+function SortableNavItemRow({
+  item,
+  index,
+  visible,
+  onVisibleChange,
+}: {
+  item: CustomizableNavItem;
+  index: number;
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+}) {
+  const { ref, handleRef, isDragging } = useSortable({
+    id: item.id,
+    index,
+    group: "customize-sidebar-nav",
+    transition: { duration: 200, easing: "ease" },
+  });
+  const ItemIcon = ITEM_ICONS[item.id];
+  return (
+    <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
+      <Flex gap="2" align="center">
+        <button
+          ref={handleRef as RefCallback<HTMLButtonElement>}
+          type="button"
+          title="Drag to reorder"
+          className="shrink-0 cursor-grab text-gray-9 hover:text-gray-11"
+        >
+          <DotsSixVertical size={14} />
+        </button>
+        <Text as="label" size="2" className="flex-1">
+          <Flex gap="2" align="center">
+            <Checkbox
+              checked={visible}
+              onCheckedChange={(checked) => onVisibleChange(checked === true)}
+            />
+            <ItemIcon size={16} />
+            {item.label}
+          </Flex>
+        </Text>
+      </Flex>
+    </div>
+  );
+}

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

@@ -96,7 +96,11 @@ describe("SidebarNavSection", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     useAppView.mockReturnValue({ type: "home" });
-    useSidebarStore.setState({ navItemOverrides: {}, channelsEnabled: true });
+    useSidebarStore.setState({
+      navItemOverrides: {},
+      navItemOrder: [],
+      channelsEnabled: true,
+    });
   });
 
   it.each([
@@ -147,6 +151,20 @@ describe("SidebarNavSection", () => {
     },
   );
 
+  it("renders top-level items in the stored order", () => {
+    useSidebarStore.setState({ navItemOrder: ["activity", "inbox"] });
+    renderNav();
+
+    const labels = screen
+      .getAllByRole("button")
+      .map((button) => button.textContent ?? "");
+    const position = (label: string) =>
+      labels.findIndex((text) => text.includes(label));
+
+    expect(position("Activity")).toBeLessThan(position("Inbox"));
+    expect(position("Inbox")).toBeLessThan(position("Agents"));
+  });
+
   it("never lets hidden search take over the More row", () => {
     useSidebarStore.setState({ navItemOverrides: { search: false } });
     renderNav();