Function Sidebar

apps/ui/src/components/layout/sidebar/sidebar.tsx:48–555

()

const logger = createLogger('Sidebar');

export function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();

  const {
    projects,
    trashedProjects,
    currentProject,
    sidebarOpen,
    sidebarStyle,
    mobileSidebarHidden,
    projectHistory,
    upsertAndSetCurrentProject,
    toggleSidebar,
    toggleMobileSidebarHidden,
    restoreTrashedProject,
    deleteTrashedProject,
    emptyTrash,
    cyclePrevProject,
    cycleNextProject,
    moveProjectToTrash,
    removeProject,
    specCreatingForProject,
    setSpecCreatingForProject,
    setCurrentProject,
  } = useAppStore();

  const isCompact = useIsCompact();

  // Environment variable flags for hiding sidebar items
  const { hideTerminal, hideRunningAgents, hideContext, hideSpecEditor, hideWiki } =
    SIDEBAR_FEATURE_FLAGS;

  // Get customizable keyboard shortcuts
  const shortcuts = useKeyboardShortcutsConfig();

  // Get unread notifications count
  const unreadNotificationsCount = useNotificationsStore((s) => s.unreadCount);

  // State for context menu
  const [contextMenuProject, setContextMenuProject] = useState<Project | null>(null);
  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(
    null
  );
  const [editDialogProject, setEditDialogProject] = useState<Project | null>(null);

  // State for delete project confirmation dialog
  const [showDeleteProjectDialog, setShowDeleteProjectDialog] = useState(false);
  // State for remove from automaker confirmation dialog
  const [showRemoveFromAutomakerDialog, setShowRemoveFromAutomakerDialog] = useState(false);

  // State for trash dialog
  const [showTrashDialog, setShowTrashDialog] = useState(false);

  // Project creation state and handlers
  const {
    showNewProjectModal,
    setShowNewProjectModal,