Function ProjectSidebarInner

src/browser/components/ProjectSidebar/ProjectSidebar.tsx:694–3035

({
  collapsed,
  onToggleCollapsed,
  sortedWorkspacesByProject,
  workspaceRecency,
})

}

const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
  collapsed,
  onToggleCollapsed,
  sortedWorkspacesByProject,
  workspaceRecency,
}) => {
  // Use the narrow actions context — does NOT subscribe to workspaceMetadata
  // changes, preventing the entire sidebar tree from re-rendering on every
  // workspace create/archive/rename.
  const {
    selectedWorkspace,
    setSelectedWorkspace: onSelectWorkspace,
    preflightArchiveWorkspace,
    archiveWorkspace: onArchiveWorkspace,
    removeWorkspace,
    updateWorkspaceTitle: onUpdateTitle,
    refreshWorkspaceMetadata,
    pendingNewWorkspaceProject,
    pendingNewWorkspaceDraftId,
    workspaceDraftsByProject,
    workspaceDraftPromotionsByProject,
    createWorkspaceDraft,
    openWorkspaceDraft,
    deleteWorkspaceDraft,
  } = useWorkspaceActions();
  const workspaceStore = useWorkspaceStoreRaw();
  useWorkspaceAttentionSubscription(sortedWorkspacesByProject, workspaceStore);
  const runtimeStatusStore = useRuntimeStatusStoreRaw();
  const { navigateToProject } = useRouter();
  const { api } = useAPI();
  const preserveSubagentsUntilArchive = usePreserveSubagentsUntilArchiveSetting(api);
  const { confirm: confirmDialog } = useConfirmDialog();
  const settings = useSettings();

  // Get project state and operations from context
  const {
    userProjects,
    openProjectCreateModal: onAddProject,
    removeProject: onRemoveProject,
    updateDisplayName,
    updateColor: updateProjectColor,
    assignWorkspaceToSubProject,
  } = useProjectContext();

  // Theme for logo variant
  const { theme } = useTheme();
  const MuxLogo = theme === "dark" || theme.endsWith("-dark") ? MuxLogoDark : MuxLogoLight;
  const multiProjectWorkspacesEnabled = useExperimentValue(EXPERIMENT_IDS.MULTI_PROJECT_WORKSPACES);

  // Mobile breakpoint for auto-closing sidebar
  const MOBILE_BREAKPOINT = 768;
  const projectListScrollRef = useRef<HTMLDivElement | null>(null);
  const mobileScrollTopRef = useRef(0);
  const wasCollapsedRef = useRef(collapsed);

  const normalizeMobileScrollTop = useCallback((scrollTop: number): number => {
    return Number.isFinite(scrollTop) ? Math.max(0, Math.round(scrollTop)) : 0;
  }, []);