Simplify configuration and sidebar navigation (#3680)

Author: k11kirky

packages/ui/src/features/settings/components/SettingsPageContent.tsx

@@ -17,6 +17,7 @@ import { UpdatesSettings } from "@posthog/ui/features/settings/sections/UpdatesS
 import { WorkspacesSettings } from "@posthog/ui/features/settings/sections/WorkspacesSettings";
 import { WorktreesSettings } from "@posthog/ui/features/settings/sections/worktrees/WorktreesSettings";
 import type { SettingsCategory } from "@posthog/ui/features/settings/types";
+import { CustomizeSidebarSettings } from "@posthog/ui/features/sidebar/components/CustomizeSidebarDialog";
 import { SkillsView } from "@posthog/ui/features/skills/SkillsView";
 import { Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
 import type { ComponentType, ReactNode } from "react";
@@ -69,6 +70,7 @@ const SETTINGS_PAGES: Record<SettingsCategory, SettingsPageDefinition> = {
     "Personalization",
     PersonalizationSettings,
   ),
+  sidebar: defineSettingsPage("Sidebar", CustomizeSidebarSettings),
   terminal: defineSettingsPage("Terminal", TerminalSettings),
   "claude-code": defineSettingsPage("Claude Code", ClaudeCodeSettings),
   shortcuts: defineSettingsPage("Shortcuts", ShortcutsSettings),

packages/ui/src/features/settings/components/SettingsPanel.tsx

@@ -15,6 +15,7 @@ import {
   Palette,
   Plugs,
   Robot,
+  SidebarSimple,
   SignOut,
   SlackLogo,
   Terminal,
@@ -101,6 +102,7 @@ const SIDEBAR_GROUPS: SidebarGroup[] = [
         label: "Personalization",
         icon: <Palette size={16} />,
       },
+      { id: "sidebar", label: "Sidebar", icon: <SidebarSimple size={16} /> },
       { id: "terminal", label: "Terminal", icon: <Terminal size={16} /> },
       { id: "shortcuts", label: "Shortcuts", icon: <Keyboard size={16} /> },
     ],

packages/ui/src/features/settings/types.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "vitest";
+import { isSettingsCategory } from "./types";
+
+describe("isSettingsCategory", () => {
+  it("recognizes sidebar experience settings", () => {
+    expect(isSettingsCategory("sidebar")).toBe(true);
+  });
+});

packages/ui/src/features/settings/types.ts

@@ -10,6 +10,7 @@ export type SettingsCategory =
   | "skills"
   | "mcp-servers"
   | "personalization"
+  | "sidebar"
   | "terminal"
   | "claude-code"
   | "shortcuts"
@@ -32,6 +33,7 @@ export const SETTINGS_CATEGORIES: readonly SettingsCategory[] = [
   "skills",
   "mcp-servers",
   "personalization",
+  "sidebar",
   "terminal",
   "claude-code",
   "shortcuts",

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

@@ -1,3 +1,4 @@
+import { LOOPS_FLAG } from "@posthog/shared";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { Theme } from "@radix-ui/themes";
 import { act, render, screen } from "@testing-library/react";
@@ -9,8 +10,9 @@ type CapturedDragEvent = {
   canceled?: boolean;
 };
 
-const { track, dndCapture } = vi.hoisted(() => ({
+const { track, dndCapture, featureFlags } = vi.hoisted(() => ({
   track: vi.fn(),
+  featureFlags: new Map<string, boolean>(),
   dndCapture: {} as {
     onDragStart?: (event: CapturedDragEvent) => void;
     onDragOver?: (event: CapturedDragEvent) => void;
@@ -19,6 +21,9 @@ const { track, dndCapture } = vi.hoisted(() => ({
 }));
 
 vi.mock("@posthog/ui/shell/analytics", () => ({ track }));
+vi.mock("@posthog/ui/features/feature-flags/useFeatureFlag", () => ({
+  useFeatureFlag: (key: string) => featureFlags.get(key) ?? true,
+}));
 vi.mock("@dnd-kit/react", () => ({
   DragDropProvider: ({
     onDragStart,
@@ -45,32 +50,13 @@ vi.mock("@dnd-kit/react/sortable", () => ({
   }),
 }));
 
-import {
-  CUSTOMIZABLE_NAV_ITEM_IDS,
-  type CustomizableNavItemId,
-} from "@posthog/ui/features/sidebar/constants";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
-import { CustomizeSidebarDialog } from "./CustomizeSidebarDialog";
+import { CustomizeSidebarSettings } from "./CustomizeSidebarDialog";
 
-function availability(
-  overrides: Partial<Record<CustomizableNavItemId, boolean>> = {},
-) {
-  return {
-    ...(Object.fromEntries(
-      CUSTOMIZABLE_NAV_ITEM_IDS.map((id) => [id, true]),
-    ) as Record<CustomizableNavItemId, boolean>),
-    ...overrides,
-  };
-}
-
-function renderDialog(available = availability()) {
+function renderSettings() {
   return render(
     <Theme>
-      <CustomizeSidebarDialog
-        open
-        onOpenChange={vi.fn()}
-        available={available}
-      />
+      <CustomizeSidebarSettings />
     </Theme>,
   );
 }
@@ -107,132 +93,129 @@ function rowLabels() {
     .map((checkbox) => checkbox.closest("label")?.textContent);
 }
 
-describe("CustomizeSidebarDialog", () => {
+describe("CustomizeSidebarSettings", () => {
   beforeEach(() => {
     track.mockReset();
+    featureFlags.clear();
     useSidebarStore.setState({ navItemOverrides: {}, navItemOrder: [] });
   });
 
+  it("omits items whose features are unavailable", () => {
+    featureFlags.set(LOOPS_FLAG, false);
+
+    renderSettings();
+
+    expect(
+      screen.queryByRole("checkbox", { name: "Loops" }),
+    ).not.toBeInTheDocument();
+  });
+
   it("unchecking a visible item demotes it and tracks the change", async () => {
     const user = userEvent.setup();
-    renderDialog();
+    renderSettings();
 
-    await user.click(screen.getByRole("checkbox", { name: "MCP servers" }));
+    await user.click(screen.getByRole("checkbox", { name: "Command Center" }));
 
-    expect(useSidebarStore.getState().navItemOverrides["mcp-servers"]).toBe(
+    expect(useSidebarStore.getState().navItemOverrides["command-center"]).toBe(
       false,
     );
     expect(track).toHaveBeenCalledWith(ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED, {
-      item: "mcp_servers",
+      item: "command_center",
       visible: false,
     });
   });
 
   it("checking a hidden item promotes it and tracks the change", async () => {
     const user = userEvent.setup();
-    renderDialog();
+    useSidebarStore.setState({ navItemOverrides: { inbox: false } });
+    renderSettings();
 
-    await user.click(screen.getByRole("checkbox", { name: "Search" }));
+    await user.click(screen.getByRole("checkbox", { name: "Inbox" }));
 
-    expect(useSidebarStore.getState().navItemOverrides.search).toBe(true);
+    expect(useSidebarStore.getState().navItemOverrides.inbox).toBe(true);
     expect(track).toHaveBeenCalledWith(ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED, {
-      item: "search",
+      item: "inbox",
       visible: true,
     });
   });
 
-  it("omits items marked unavailable", () => {
-    renderDialog(availability({ loops: false }));
-
-    expect(
-      screen.queryByRole("checkbox", { name: "Loops" }),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.getByRole("checkbox", { name: "Configure" }),
-    ).toBeInTheDocument();
-  });
-
   it("renders rows in the stored order", () => {
-    useSidebarStore.setState({ navItemOrder: ["configure", "search"] });
-    renderDialog();
+    useSidebarStore.setState({ navItemOrder: ["configure", "inbox"] });
+    renderSettings();
 
-    expect(rowLabels().slice(0, 2)).toEqual(["Configure", "Search"]);
+    expect(rowLabels().slice(0, 2)).toEqual(["Configure", "Inbox"]);
   });
 
   it("previews on dragover and persists only on drop", () => {
-    renderDialog();
+    renderSettings();
 
-    dragStart("skills");
-    dragOver("skills", "search");
+    dragStart("loops");
+    dragOver("loops", "inbox");
 
-    expect(rowLabels()[0]).toBe("Skills");
+    expect(rowLabels()[0]).toBe("Loops");
     expect(useSidebarStore.getState().navItemOrder).toEqual([]);
     expect(track).not.toHaveBeenCalled();
 
-    dragEnd("skills");
+    dragEnd("loops");
 
     expect(useSidebarStore.getState().navItemOrder).toEqual([
-      "skills",
-      "search",
-      "inbox",
-      "agents",
       "loops",
-      "mcp-servers",
+      "inbox",
       "command-center",
       "contexts",
       "activity",
       "configure",
     ]);
     expect(track).toHaveBeenCalledWith(ANALYTICS_EVENTS.SIDEBAR_REORDERED, {
-      item: "skills",
+      item: "loops",
       to_index: 0,
     });
   });
 
   it("ignores a repeated dragover for the same source and target", () => {
-    renderDialog();
+    renderSettings();
 
-    dragStart("skills");
-    dragOver("skills", "search");
-    dragOver("skills", "search");
+    dragStart("loops");
+    dragOver("loops", "inbox");
+    dragOver("loops", "inbox");
 
-    expect(rowLabels()[0]).toBe("Skills");
+    expect(rowLabels()[0]).toBe("Loops");
 
-    dragEnd("skills");
+    dragEnd("loops");
 
-    expect(useSidebarStore.getState().navItemOrder[0]).toBe("skills");
+    expect(useSidebarStore.getState().navItemOrder[0]).toBe("loops");
   });
 
   it("a canceled drag drops the preview and leaves the store untouched", () => {
-    renderDialog();
+    renderSettings();
 
-    dragStart("skills");
-    dragOver("skills", "search");
-    dragEnd("skills", { cancel: true });
+    dragStart("loops");
+    dragOver("loops", "inbox");
+    dragEnd("loops", { cancel: true });
 
-    expect(rowLabels()[0]).toBe("Search");
+    expect(rowLabels()[0]).toBe("Inbox");
     expect(useSidebarStore.getState().navItemOrder).toEqual([]);
     expect(track).not.toHaveBeenCalled();
   });
 
   it("a drop without movement neither persists nor tracks", () => {
-    renderDialog();
+    renderSettings();
 
-    dragStart("skills");
-    dragEnd("skills");
+    dragStart("loops");
+    dragEnd("loops");
 
     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();
+    useSidebarStore.setState({ navItemOrder: ["loops", "inbox"] });
+    renderSettings();
 
     await user.click(screen.getByRole("button", { name: "Reset" }));
 
     expect(useSidebarStore.getState().navItemOrder).toEqual([]);
-    expect(rowLabels()[0]).toBe("Search");
+    expect(rowLabels()[0]).toBe("Inbox");
   });
 });