add inbox, default skills and mcp visible

Author: charlesvien

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

@@ -1,6 +1,7 @@
 import {
   Bell,
   CreditCard,
+  EnvelopeSimple,
   Lightbulb,
   Lightning,
   MagnifyingGlass,
@@ -12,20 +13,21 @@ import {
   type SidebarNavItem,
 } from "@posthog/shared/analytics-events";
 import {
+  CUSTOMIZABLE_NAV_ITEMS,
+  type CustomizableNavItemId,
   isNavItemVisible,
-  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";
 import { SquircleDashed } from "lucide-react";
 
 const ITEM_ICONS: Record<
-  MoreNavItemId,
+  CustomizableNavItemId,
   React.ComponentType<{ size?: number | string }>
 > = {
   search: MagnifyingGlass,
+  inbox: EnvelopeSimple,
   agents: Robot,
   skills: Lightbulb,
   "mcp-servers": Plugs,
@@ -35,8 +37,9 @@ const ITEM_ICONS: Record<
   activity: Bell,
 };
 
-const ITEM_ANALYTICS_IDS: Record<MoreNavItemId, SidebarNavItem> = {
+const ITEM_ANALYTICS_IDS: Record<CustomizableNavItemId, SidebarNavItem> = {
   search: "search",
+  inbox: "inbox",
   agents: "agents",
   skills: "skills",
   "mcp-servers": "mcp_servers",
@@ -68,7 +71,7 @@ export function CustomizeSidebarDialog({
         </Dialog.Description>
 
         <Flex direction="column" gap="3" mt="4">
-          {MORE_NAV_ITEMS.map(({ id, label }) => {
+          {CUSTOMIZABLE_NAV_ITEMS.map(({ id, label }) => {
             const ItemIcon = ITEM_ICONS[id];
             const visible = isNavItemVisible(navItemOverrides, id);
             return (

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

@@ -9,10 +9,10 @@ import { useCommandCenterStore } from "@posthog/ui/features/command-center/comma
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
 import {
+  CUSTOMIZABLE_NAV_ITEM_IDS,
+  CUSTOMIZABLE_NAV_ITEMS,
+  type CustomizableNavItemId,
   isNavItemVisible,
-  MORE_NAV_ITEM_IDS,
-  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";
@@ -163,8 +163,10 @@ export function SidebarNavSection({
     };
 
   const navItemOverrides = useSidebarStore((s) => s.navItemOverrides);
-  const hidden = new Set<MoreNavItemId>(
-    MORE_NAV_ITEM_IDS.filter((id) => !isNavItemVisible(navItemOverrides, id)),
+  const hidden = new Set<CustomizableNavItemId>(
+    CUSTOMIZABLE_NAV_ITEM_IDS.filter(
+      (id) => !isNavItemVisible(navItemOverrides, id),
+    ),
   );
   const [moreExpanded, setMoreExpanded] = useState(false);
   const [customizeOpen, setCustomizeOpen] = useState(false);
@@ -175,8 +177,9 @@ export function SidebarNavSection({
   // More row so the current page stays visible in the nav. Search, Usage and
   // Contexts never take over: Search opens the command menu in place, Usage
   // leaves for the settings chrome and Contexts is a toggle, not a page.
-  const moreItemActive: Record<MoreNavItemId, boolean> = {
+  const moreItemActive: Record<CustomizableNavItemId, boolean> = {
     search: false,
+    inbox: isInboxActive,
     agents: isAgentsActive,
     skills: isSkillsActive,
     "mcp-servers": isMcpServersActive,
@@ -185,7 +188,7 @@ export function SidebarNavSection({
     contexts: false,
     activity: isActivityActive,
   };
-  const activeHiddenItem = MORE_NAV_ITEMS.find(
+  const activeHiddenItem = CUSTOMIZABLE_NAV_ITEMS.find(
     ({ id }) => hidden.has(id) && moreItemActive[id],
   );
   const takeoverLabel =
@@ -253,13 +256,15 @@ export function SidebarNavSection({
         </Box>
       )}
 
-      <Box>
-        <InboxItem
-          isActive={isInboxActive}
-          onClick={withNavTrack("inbox", navigateToInbox)}
-          pullRequestCount={inboxPullRequestCount}
-        />
-      </Box>
+      {!hidden.has("inbox") && (
+        <Box>
+          <InboxItem
+            isActive={isInboxActive}
+            onClick={withNavTrack("inbox", navigateToInbox)}
+            pullRequestCount={inboxPullRequestCount}
+          />
+        </Box>
+      )}
 
       {!hidden.has("agents") && (
         <Box>
@@ -343,6 +348,14 @@ export function SidebarNavSection({
                 onClick={withNavTrack("search", openCommandMenu, true)}
               />
             )}
+            {hidden.has("inbox") && (
+              <InboxItem
+                depth={1}
+                isActive={isInboxActive}
+                onClick={withNavTrack("inbox", navigateToInbox, true)}
+                pullRequestCount={inboxPullRequestCount}
+              />
+            )}
             {hidden.has("agents") && (
               <AgentsItem
                 depth={1}

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

@@ -10,12 +10,14 @@ interface InboxItemProps {
   isActive: boolean;
   onClick: () => void;
   pullRequestCount?: number;
+  depth?: number;
 }
 
 export function InboxItem({
   isActive,
   onClick,
   pullRequestCount = 0,
+  depth = 0,
 }: InboxItemProps) {
   return (
     <Tooltip
@@ -28,7 +30,7 @@ export function InboxItem({
     >
       <div>
         <SidebarItem
-          depth={0}
+          depth={depth}
           icon={
             <EnvelopeSimple size={16} weight={isActive ? "fill" : "regular"} />
           }

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

@@ -1,29 +1,34 @@
 export const SIDEBAR_MIN_WIDTH = 240;
 
-export const MORE_NAV_ITEMS = [
+export const CUSTOMIZABLE_NAV_ITEMS = [
   { id: "search", label: "Search", defaultVisible: false },
+  { id: "inbox", label: "Inbox", defaultVisible: true },
   { id: "agents", label: "Agents", defaultVisible: true },
-  { id: "skills", label: "Skills", defaultVisible: false },
-  { id: "mcp-servers", label: "MCP servers", defaultVisible: false },
+  { id: "skills", label: "Skills", defaultVisible: true },
+  { id: "mcp-servers", label: "MCP servers", defaultVisible: true },
   { id: "usage", label: "Usage", defaultVisible: false },
   { id: "command-center", label: "Command Center", defaultVisible: true },
   { id: "contexts", label: "Contexts", defaultVisible: true },
   { id: "activity", label: "Activity", defaultVisible: true },
 ] as const;
 
-export type MoreNavItemId = (typeof MORE_NAV_ITEMS)[number]["id"];
+export type CustomizableNavItemId =
+  (typeof CUSTOMIZABLE_NAV_ITEMS)[number]["id"];
 
-export const MORE_NAV_ITEM_IDS = MORE_NAV_ITEMS.map((item) => item.id);
+export const CUSTOMIZABLE_NAV_ITEM_IDS = CUSTOMIZABLE_NAV_ITEMS.map(
+  (item) => item.id,
+);
 
-export type NavItemOverrides = Partial<Record<MoreNavItemId, boolean>>;
+export type NavItemOverrides = Partial<Record<CustomizableNavItemId, boolean>>;
 
-const DEFAULT_VISIBILITY: Record<MoreNavItemId, boolean> = Object.fromEntries(
-  MORE_NAV_ITEMS.map((item) => [item.id, item.defaultVisible]),
-) as Record<MoreNavItemId, boolean>;
+const DEFAULT_VISIBILITY: Record<CustomizableNavItemId, boolean> =
+  Object.fromEntries(
+    CUSTOMIZABLE_NAV_ITEMS.map((item) => [item.id, item.defaultVisible]),
+  ) as Record<CustomizableNavItemId, boolean>;
 
 export function isNavItemVisible(
   overrides: NavItemOverrides,
-  id: MoreNavItemId,
+  id: CustomizableNavItemId,
 ): boolean {
   return overrides[id] ?? DEFAULT_VISIBILITY[id];
 }
@@ -35,7 +40,7 @@ export function sanitizeNavItemOverrides(value: unknown): NavItemOverrides {
     return {};
   }
   const overrides: NavItemOverrides = {};
-  for (const id of MORE_NAV_ITEM_IDS) {
+  for (const id of CUSTOMIZABLE_NAV_ITEM_IDS) {
     const entry = (value as Record<string, unknown>)[id];
     if (typeof entry === "boolean") overrides[id] = entry;
   }

packages/ui/src/features/sidebar/sidebarStore.test.ts

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import { isNavItemVisible, MORE_NAV_ITEMS } from "./constants";
+import { CUSTOMIZABLE_NAV_ITEMS, isNavItemVisible } from "./constants";
 import { useSidebarStore } from "./sidebarStore";
 
 describe("sidebarStore navItemOverrides", () => {
@@ -8,13 +8,15 @@ describe("sidebarStore navItemOverrides", () => {
   });
 
   it.each(
-    MORE_NAV_ITEMS.map((item) => [item.id, item.defaultVisible] as const),
+    CUSTOMIZABLE_NAV_ITEMS.map(
+      (item) => [item.id, item.defaultVisible] as const,
+    ),
   )("%s is visible=%s by default", (id, defaultVisible) => {
     const overrides = useSidebarStore.getState().navItemOverrides;
     expect(isNavItemVisible(overrides, id)).toBe(defaultVisible);
   });
 
-  it.each(MORE_NAV_ITEMS.map((item) => item.id))(
+  it.each(CUSTOMIZABLE_NAV_ITEMS.map((item) => item.id))(
     "setNavItemVisible(%s) overrides in both directions",
     (id) => {
       useSidebarStore.getState().setNavItemVisible(id, true);
@@ -33,7 +35,7 @@ describe("sidebarStore navItemOverrides", () => {
     useSidebarStore.getState().setNavItemVisible("agents", false);
 
     const overrides = useSidebarStore.getState().navItemOverrides;
-    for (const item of MORE_NAV_ITEMS) {
+    for (const item of CUSTOMIZABLE_NAV_ITEMS) {
       if (item.id === "agents") continue;
       expect(isNavItemVisible(overrides, item.id)).toBe(item.defaultVisible);
     }

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

@@ -3,7 +3,7 @@ import type { WorkspaceMode } from "@posthog/shared";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import {
-  type MoreNavItemId,
+  type CustomizableNavItemId,
   type NavItemOverrides,
   SIDEBAR_MIN_WIDTH,
   sanitizeNavItemOverrides,
@@ -27,7 +27,7 @@ interface SidebarStoreState {
   // the Bluebird chrome ships with channels hidden until the user opts in.
   channelsEnabled: boolean;
   // Per-item visibility overrides from the Customize sidebar dialog. Items
-  // absent from the map follow their MORE_NAV_ITEMS defaultVisible, so newly
+  // absent from the map follow their CUSTOMIZABLE_NAV_ITEMS defaultVisible, so newly
   // shipped moreable items keep their intended default for existing users.
   navItemOverrides: NavItemOverrides;
 }
@@ -50,7 +50,7 @@ interface SidebarStoreActions {
   setShowInternal: (showInternal: boolean) => void;
   toggleTaskType: (mode: WorkspaceMode) => void;
   setChannelsEnabled: (channelsEnabled: boolean) => void;
-  setNavItemVisible: (item: MoreNavItemId, visible: boolean) => void;
+  setNavItemVisible: (item: CustomizableNavItemId, visible: boolean) => void;
 }
 
 type SidebarStore = SidebarStoreState & SidebarStoreActions;