add sidebar more tab, customize and tracking

Author: charlesvien

packages/shared/src/analytics-events.ts

@@ -237,6 +237,32 @@ export interface CommandMenuActionProperties {
   channel_id?: string;
 }
 
+export type SidebarNavItem =
+  | "new_task"
+  | "home"
+  | "search"
+  | "inbox"
+  | "agents"
+  | "skills"
+  | "mcp_servers"
+  | "command_center"
+  | "contexts"
+  | "activity"
+  | "more"
+  | "customize_sidebar";
+
+export interface SidebarNavItemClickedProperties {
+  item: SidebarNavItem;
+  /** True when the row was clicked inside the expanded More section. */
+  in_more: boolean;
+}
+
+export interface SidebarCustomizedProperties {
+  item: SidebarNavItem;
+  /** True when the item was promoted to the top level, false when moved under More. */
+  visible: boolean;
+}
+
 export interface BrainrotActivatedProperties {
   /** Grid layout preset, e.g. "2x2". */
   layout: string;
@@ -1113,6 +1139,8 @@ export const ANALYTICS_EVENTS = {
   BRAINROT_ACTIVATED: "Brainrot activated",
   SKILL_BUTTON_TRIGGERED: "Skill button triggered",
   POSTHOG_WEB_OPENED: "PostHog web opened",
+  SIDEBAR_NAV_ITEM_CLICKED: "Sidebar nav item clicked",
+  SIDEBAR_CUSTOMIZED: "Sidebar customized",
 
   // Permission events
   PERMISSION_RESPONDED: "Permission responded",
@@ -1271,6 +1299,8 @@ export type EventPropertyMap = {
   [ANALYTICS_EVENTS.BRAINROT_ACTIVATED]: BrainrotActivatedProperties;
   [ANALYTICS_EVENTS.SKILL_BUTTON_TRIGGERED]: SkillButtonTriggeredProperties;
   [ANALYTICS_EVENTS.POSTHOG_WEB_OPENED]: never;
+  [ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED]: SidebarNavItemClickedProperties;
+  [ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED]: SidebarCustomizedProperties;
 
   // Permission events
   [ANALYTICS_EVENTS.PERMISSION_RESPONDED]: PermissionRespondedProperties;

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

@@ -0,0 +1,86 @@
+import {
+  type Icon,
+  Lightbulb,
+  MagnifyingGlass,
+  Plugs,
+} from "@phosphor-icons/react";
+import {
+  ANALYTICS_EVENTS,
+  type SidebarNavItem,
+} from "@posthog/shared/analytics-events";
+import {
+  MORE_NAV_ITEMS,
+  type MoreNavItemId,
+} 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";
+
+const ITEM_ICONS: Record<MoreNavItemId, Icon> = {
+  search: MagnifyingGlass,
+  skills: Lightbulb,
+  "mcp-servers": Plugs,
+};
+
+const ITEM_ANALYTICS_IDS: Record<MoreNavItemId, SidebarNavItem> = {
+  search: "search",
+  skills: "skills",
+  "mcp-servers": "mcp_servers",
+};
+
+interface CustomizeSidebarDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CustomizeSidebarDialog({
+  open,
+  onOpenChange,
+}: CustomizeSidebarDialogProps) {
+  const hiddenNavItems = useSidebarStore((s) => s.hiddenNavItems);
+  const setNavItemHidden = useSidebarStore((s) => s.setNavItemHidden);
+
+  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.
+        </Dialog.Description>
+
+        <Flex direction="column" gap="3" mt="4">
+          {MORE_NAV_ITEMS.map(({ id, label }) => {
+            const ItemIcon = ITEM_ICONS[id];
+            const visible = !hiddenNavItems.includes(id);
+            return (
+              <Text key={id} as="label" size="2">
+                <Flex gap="2" align="center">
+                  <Checkbox
+                    checked={visible}
+                    onCheckedChange={(checked) => {
+                      const nextVisible = checked === true;
+                      setNavItemHidden(id, !nextVisible);
+                      track(ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED, {
+                        item: ITEM_ANALYTICS_IDS[id],
+                        visible: nextVisible,
+                      });
+                    }}
+                  />
+                  <ItemIcon size={16} />
+                  {label}
+                </Flex>
+              </Text>
+            );
+          })}
+        </Flex>
+
+        <Flex mt="4" justify="end">
+          <Dialog.Close>
+            <Button variant="solid">Done</Button>
+          </Dialog.Close>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

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

@@ -1,10 +1,17 @@
 import { Badge, Switch } from "@posthog/quill";
 import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
-import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import {
+  ANALYTICS_EVENTS,
+  type SidebarNavItem,
+} from "@posthog/shared/analytics-events";
 import { HOME_TAB_FLAG } from "@posthog/shared/constants";
 import { useCommandCenterStore } from "@posthog/ui/features/command-center/commandCenterStore";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
+import {
+  MORE_NAV_ITEMS,
+  type MoreNavItemId,
+} from "@posthog/ui/features/sidebar/constants";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import {
@@ -27,12 +34,16 @@ import { useCommandMenuStore } from "@posthog/ui/shell/commandMenuStore";
 import { Box, Flex } from "@radix-ui/themes";
 import { useRouterState } from "@tanstack/react-router";
 import { SquircleDashed } from "lucide-react";
+import { useState } from "react";
+import { CustomizeSidebarDialog } from "./CustomizeSidebarDialog";
 import { ActivityItem } from "./items/ActivityItem";
 import { AgentsItem } from "./items/AgentsItem";
 import { CommandCenterItem } from "./items/CommandCenterItem";
+import { CustomizeSidebarItem } from "./items/CustomizeSidebarItem";
 import { HomeItem } from "./items/HomeItem";
 import { InboxItem } from "./items/InboxItem";
 import { McpServersItem } from "./items/McpServersItem";
+import { MoreItem } from "./items/MoreItem";
 import { NewTaskItem } from "./items/NewTaskItem";
 import { SearchItem } from "./items/SearchItem";
 import { SkillsItem } from "./items/SkillsItem";
@@ -54,7 +65,9 @@ interface SidebarNavSectionProps {
 // into either layout. In the Channels space, destinations with a /website
 // mirror (Home, Skills, MCP servers, Command Center) stay in that space;
 // Inbox, Agents and New task have no mirror yet and jump back to Code.
-// Search opens the command menu in place.
+// Search opens the command menu in place. Search, Skills and MCP servers are
+// tucked under the collapsible More row by default; the Customize sidebar
+// dialog promotes them back to the top level.
 export function SidebarNavSection({
   commandCenterActiveCount: providedActiveCount,
 }: SidebarNavSectionProps = {}) {
@@ -133,50 +146,149 @@ export function SidebarNavSection({
 
   const openCommandMenu = useCommandMenuStore((s) => s.open);
 
+  // Every nav row reports which item was clicked so per-item usage is
+  // measurable; in_more distinguishes clicks inside the expanded More section.
+  const withNavTrack =
+    (item: SidebarNavItem, action: () => void, inMore = false) =>
+    () => {
+      track(ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED, {
+        item,
+        in_more: inMore,
+      });
+      action();
+    };
+
+  const hiddenNavItems = useSidebarStore((s) => s.hiddenNavItems);
+  const hidden = new Set<MoreNavItemId>(hiddenNavItems);
+  const [moreExpanded, setMoreExpanded] = useState(false);
+  const [customizeOpen, setCustomizeOpen] = useState(false);
+
+  // While More is collapsed, an active item hidden under it takes over the
+  // More row so the current page stays visible in the nav.
+  const moreItemActive: Record<MoreNavItemId, boolean> = {
+    search: false,
+    skills: isSkillsActive,
+    "mcp-servers": isMcpServersActive,
+  };
+  const activeHiddenItem = MORE_NAV_ITEMS.find(
+    ({ id }) => hidden.has(id) && moreItemActive[id],
+  );
+  const takeoverLabel =
+    !moreExpanded && activeHiddenItem ? activeHiddenItem.label : null;
+
   return (
     <Flex direction="column" className="shrink-0 gap-px px-2 py-2">
       <Box mb="2">
-        <NewTaskItem isActive={isHomeActive} onClick={goNewTask} />
+        <NewTaskItem
+          isActive={isHomeActive}
+          onClick={withNavTrack("new_task", goNewTask)}
+        />
       </Box>
 
       {homeTabEnabled && (
         <Box>
-          <HomeItem isActive={isHomeViewActive} onClick={goHome} />
+          <HomeItem
+            isActive={isHomeViewActive}
+            onClick={withNavTrack("home", goHome)}
+          />
         </Box>
       )}
 
-      <Box>
-        <SearchItem onClick={openCommandMenu} />
-      </Box>
+      {!hidden.has("search") && (
+        <Box>
+          <SearchItem onClick={withNavTrack("search", openCommandMenu)} />
+        </Box>
+      )}
 
       <Box>
         <InboxItem
           isActive={isInboxActive}
-          onClick={navigateToInbox}
+          onClick={withNavTrack("inbox", navigateToInbox)}
           pullRequestCount={inboxPullRequestCount}
         />
       </Box>
 
       <Box>
-        <AgentsItem isActive={isAgentsActive} onClick={navigateToAgents} />
+        <AgentsItem
+          isActive={isAgentsActive}
+          onClick={withNavTrack("agents", navigateToAgents)}
+        />
       </Box>
 
-      <Box>
-        <SkillsItem isActive={isSkillsActive} onClick={goSkills} />
-      </Box>
+      {!hidden.has("skills") && (
+        <Box>
+          <SkillsItem
+            isActive={isSkillsActive}
+            onClick={withNavTrack("skills", goSkills)}
+          />
+        </Box>
+      )}
 
-      <Box>
-        <McpServersItem isActive={isMcpServersActive} onClick={goMcpServers} />
-      </Box>
+      {!hidden.has("mcp-servers") && (
+        <Box>
+          <McpServersItem
+            isActive={isMcpServersActive}
+            onClick={withNavTrack("mcp_servers", goMcpServers)}
+          />
+        </Box>
+      )}
 
-      <Box mb={bluebirdEnabled ? undefined : "2"}>
+      <Box>
         <CommandCenterItem
           isActive={isCommandCenterActive}
-          onClick={goCommandCenter}
+          onClick={withNavTrack("command_center", goCommandCenter)}
           activeCount={commandCenterActiveCount}
         />
       </Box>
 
+      {/* Everything the user shoved off the top level lives here, plus the
+          Customize entry point. Collapsed by default; when a hidden item is
+          the active page it takes over the More row (see takeoverLabel). */}
+      <Flex
+        direction="column"
+        className="gap-px"
+        mb={bluebirdEnabled ? undefined : "2"}
+      >
+        <MoreItem
+          expanded={moreExpanded}
+          activeItemLabel={takeoverLabel}
+          onClick={withNavTrack("more", () => setMoreExpanded((e) => !e))}
+        />
+
+        {moreExpanded && (
+          <>
+            {hidden.has("search") && (
+              <SearchItem
+                depth={1}
+                onClick={withNavTrack("search", openCommandMenu, true)}
+              />
+            )}
+            {hidden.has("skills") && (
+              <SkillsItem
+                depth={1}
+                isActive={isSkillsActive}
+                onClick={withNavTrack("skills", goSkills, true)}
+              />
+            )}
+            {hidden.has("mcp-servers") && (
+              <McpServersItem
+                depth={1}
+                isActive={isMcpServersActive}
+                onClick={withNavTrack("mcp_servers", goMcpServers, true)}
+              />
+            )}
+            <CustomizeSidebarItem
+              depth={1}
+              onClick={withNavTrack(
+                "customize_sidebar",
+                () => setCustomizeOpen(true),
+                true,
+              )}
+            />
+          </>
+        )}
+      </Flex>
+
       {/* "Channels" is a toggle laid out as a nav row: the # label and Alpha
           badge on the left, a Switch on the right. It flips the channels
           feature rather than routing — enabling it reveals the Canvas row
@@ -199,6 +311,10 @@ export function SidebarNavSection({
             checked={channelsEnabled}
             onCheckedChange={(checked) => {
               setChannelsEnabled(checked);
+              track(ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED, {
+                item: "contexts",
+                in_more: false,
+              });
               track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
                 action_type: "toggle_channels",
                 surface: "nav",
@@ -222,10 +338,15 @@ export function SidebarNavSection({
         <Box>
           <ActivityItem
             isActive={isActivityActive}
-            onClick={navigateToActivity}
+            onClick={withNavTrack("activity", navigateToActivity)}
           />
         </Box>
       )}
+
+      <CustomizeSidebarDialog
+        open={customizeOpen}
+        onOpenChange={setCustomizeOpen}
+      />
     </Flex>
   );
 }

packages/ui/src/features/sidebar/components/items/CustomizeSidebarItem.tsx

@@ -0,0 +1,21 @@
+import { SlidersHorizontal } from "@phosphor-icons/react";
+import { SidebarItem } from "../SidebarItem";
+
+interface CustomizeSidebarItemProps {
+  onClick: () => void;
+  depth?: number;
+}
+
+export function CustomizeSidebarItem({
+  onClick,
+  depth = 0,
+}: CustomizeSidebarItemProps) {
+  return (
+    <SidebarItem
+      depth={depth}
+      icon={<SlidersHorizontal size={16} />}
+      label="Customize sidebar"
+      onClick={onClick}
+    />
+  );
+}