dedupe sidebar nav rendering, remove usage item

Author: charlesvien

packages/shared/src/analytics-events.ts

@@ -245,7 +245,6 @@ export type SidebarNavItem =
   | "agents"
   | "skills"
   | "mcp_servers"
-  | "usage"
   | "command_center"
   | "contexts"
   | "activity"

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

@@ -1,17 +1,13 @@
 import {
   Bell,
-  CreditCard,
   EnvelopeSimple,
   Lightbulb,
   Lightning,
   MagnifyingGlass,
   Plugs,
   Robot,
 } from "@phosphor-icons/react";
-import {
-  ANALYTICS_EVENTS,
-  type SidebarNavItem,
-} from "@posthog/shared/analytics-events";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import {
   CUSTOMIZABLE_NAV_ITEMS,
   type CustomizableNavItemId,
@@ -31,24 +27,11 @@ const ITEM_ICONS: Record<
   agents: Robot,
   skills: Lightbulb,
   "mcp-servers": Plugs,
-  usage: CreditCard,
   "command-center": Lightning,
   contexts: SquircleDashed,
   activity: Bell,
 };
 
-const ITEM_ANALYTICS_IDS: Record<CustomizableNavItemId, SidebarNavItem> = {
-  search: "search",
-  inbox: "inbox",
-  agents: "agents",
-  skills: "skills",
-  "mcp-servers": "mcp_servers",
-  usage: "usage",
-  "command-center": "command_center",
-  contexts: "contexts",
-  activity: "activity",
-};
-
 interface CustomizeSidebarDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -71,7 +54,7 @@ export function CustomizeSidebarDialog({
         </Dialog.Description>
 
         <Flex direction="column" gap="3" mt="4">
-          {CUSTOMIZABLE_NAV_ITEMS.map(({ id, label }) => {
+          {CUSTOMIZABLE_NAV_ITEMS.map(({ id, label, analyticsId }) => {
             const ItemIcon = ITEM_ICONS[id];
             const visible = isNavItemVisible(navItemOverrides, id);
             return (
@@ -83,7 +66,7 @@ export function CustomizeSidebarDialog({
                       const nextVisible = checked === true;
                       setNavItemVisible(id, nextVisible);
                       track(ANALYTICS_EVENTS.SIDEBAR_CUSTOMIZED, {
-                        item: ITEM_ANALYTICS_IDS[id],
+                        item: analyticsId,
                         visible: nextVisible,
                       });
                     }}
@@ -98,7 +81,9 @@ export function CustomizeSidebarDialog({
 
         <Flex mt="4" justify="end">
           <Dialog.Close>
-            <Button variant="solid">Done</Button>
+            <Button size="1" variant="solid">
+              Done
+            </Button>
           </Dialog.Close>
         </Flex>
       </Dialog.Content>

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

@@ -11,6 +11,10 @@ import { useCallback } from "react";
 
 const INDENT_SIZE = 8;
 
+export function getSidebarItemPaddingLeft(depth: number): string {
+  return `${depth * INDENT_SIZE + 8 + (depth > 0 ? 4 : 0)}px`;
+}
+
 interface SidebarItemProps {
   depth: number;
   icon?: React.ReactNode;
@@ -93,7 +97,7 @@ export function SidebarItem({
       draggable={draggable}
       onDragStart={onDragStart}
       style={{
-        paddingLeft: `${depth * INDENT_SIZE + 8 + (depth > 0 ? 4 : 0)}px`,
+        paddingLeft: getSidebarItemPaddingLeft(depth),
         paddingRight: "8px",
       }}
       onClick={onClick}