add sidebar environment visibility toggles

FORK.md

@@ -45,5 +45,6 @@ This repository is a fork of `pingdotgg/t3code`. Keep this file focused on fork
 ### UX Changes
 
 - Desktop context-menu style is configurable.
+- Sidebar environments can be hidden or shown dynamically from the project toolbar.
 - Threads can be archived with middle click.
 - Terminal selection has a copy action.

apps/web/src/components/Sidebar.logic.test.ts

@@ -482,6 +482,20 @@ describe("resolveAdjacentThreadId", () => {
         direction: "previous",
       }),
     ).toBe(threads[2]);
+    expect(
+      resolveAdjacentThreadId({
+        threadIds: threads,
+        currentThreadId: ThreadId.make("hidden-thread"),
+        direction: "next",
+      }),
+    ).toBeNull();
+    expect(
+      resolveAdjacentThreadId({
+        threadIds: threads,
+        currentThreadId: ThreadId.make("hidden-thread"),
+        direction: "previous",
+      }),
+    ).toBeNull();
     expect(
       resolveAdjacentThreadId({
         threadIds: threads,

apps/web/src/components/Sidebar.tsx

@@ -150,6 +150,7 @@ import {
 import { Input } from "./ui/input";
 import {
   Menu,
+  MenuCheckboxItem,
   MenuGroup,
   MenuPopup,
   MenuRadioGroup,
@@ -243,6 +244,13 @@ const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> =
 const SIDEBAR_ICON_ACTION_BUTTON_CLASS =
   "inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md px-[calc(--spacing(1)-1px)] text-muted-foreground/60 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring";
 
+interface SidebarEnvironmentVisibilityOption {
+  environmentId: string;
+  label: string;
+  visible: boolean;
+  projectCount: number;
+}
+
 function SidebarThreadDetailPrewarmer({ threadRef }: { readonly threadRef: ScopedThreadRef }) {
   useEnvironmentThread(threadRef.environmentId, threadRef.threadId);
   return null;
@@ -2716,6 +2724,76 @@ function ProjectSortMenu({
   );
 }
 
+function EnvironmentVisibilityMenu({
+  environments,
+  hiddenCount,
+  onVisibilityChange,
+}: {
+  environments: readonly SidebarEnvironmentVisibilityOption[];
+  hiddenCount: number;
+  onVisibilityChange: (environmentId: string, visible: boolean) => void;
+}) {
+  if (environments.length <= 1) {
+    return null;
+  }
+
+  const visibleEnvironmentCount = environments.filter((environment) => environment.visible).length;
+
+  return (
+    <Menu>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <MenuTrigger className="inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md px-[calc(--spacing(1)-1px)] text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground" />
+          }
+        >
+          <Globe2Icon className="size-3.5" />
+        </TooltipTrigger>
+        <TooltipPopup side="right">
+          {hiddenCount > 0
+            ? `${hiddenCount} hidden environment${hiddenCount === 1 ? "" : "s"}`
+            : "Environments"}
+        </TooltipPopup>
+      </Tooltip>
+      <MenuPopup
+        align="start"
+        collisionAvoidance={{ side: "none", align: "none", fallbackAxisSide: "none" }}
+        side="bottom"
+        className="min-w-56"
+      >
+        <MenuGroup>
+          <div className="px-2 py-1 font-medium text-muted-foreground sm:text-xs">Environments</div>
+          {environments.map((environment) => {
+            const isLastVisibleEnvironment = environment.visible && visibleEnvironmentCount <= 1;
+            return (
+              <MenuCheckboxItem
+                key={environment.environmentId}
+                checked={environment.visible}
+                className="min-h-7 py-1 sm:text-xs"
+                disabled={isLastVisibleEnvironment}
+                variant="switch"
+                onCheckedChange={(checked) => {
+                  if (isLastVisibleEnvironment && checked !== true) {
+                    return;
+                  }
+                  onVisibilityChange(environment.environmentId, checked === true);
+                }}
+              >
+                <span className="grid min-w-0 grid-cols-[1fr_auto] items-center gap-3">
+                  <span className="truncate">{environment.label}</span>
+                  <span className="text-muted-foreground/60">
+                    {environment.projectCount} project{environment.projectCount === 1 ? "" : "s"}
+                  </span>
+                </span>
+              </MenuCheckboxItem>
+            );
+          })}
+        </MenuGroup>
+      </MenuPopup>
+    </Menu>
+  );
+}
+
 function SortableProjectItem({
   projectId,
   disabled = false,
@@ -2857,7 +2935,10 @@ interface SidebarProjectsContentProps {
   threadSortOrder: SidebarThreadSortOrder;
   projectGroupingMode: SidebarProjectGroupingMode;
   threadPreviewCount: SidebarThreadPreviewCount;
+  environmentVisibilityOptions: readonly SidebarEnvironmentVisibilityOption[];
+  hiddenEnvironmentCount: number;
   updateSettings: ReturnType<typeof useUpdateClientSettings>;
+  setSidebarEnvironmentVisible: (environmentId: string, visible: boolean) => void;
   openAddProject: () => void;
   isManualProjectSorting: boolean;
   projectDnDSensors: ReturnType<typeof useSensors>;
@@ -2898,7 +2979,10 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     threadSortOrder,
     projectGroupingMode,
     threadPreviewCount,
+    environmentVisibilityOptions,
+    hiddenEnvironmentCount,
     updateSettings,
+    setSidebarEnvironmentVisible,
     openAddProject,
     isManualProjectSorting,
     projectDnDSensors,
@@ -2950,6 +3034,12 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     },
     [updateSettings],
   );
+  const handleEnvironmentVisibilityChange = useCallback(
+    (environmentId: string, visible: boolean) => {
+      setSidebarEnvironmentVisible(environmentId, visible);
+    },
+    [setSidebarEnvironmentVisible],
+  );
 
   return (
     <SidebarContent className="gap-0">
@@ -3016,6 +3106,11 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
               onProjectGroupingModeChange={handleProjectGroupingModeChange}
               onThreadPreviewCountChange={handleThreadPreviewCountChange}
             />
+            <EnvironmentVisibilityMenu
+              environments={environmentVisibilityOptions}
+              hiddenCount={hiddenEnvironmentCount}
+              onVisibilityChange={handleEnvironmentVisibilityChange}
+            />
             <Tooltip>
               <TooltipTrigger
                 render={
@@ -3123,7 +3218,13 @@ export default function Sidebar() {
   const sidebarThreads = useThreadShells();
   const projectExpandedById = useUiStateStore((store) => store.projectExpandedById);
   const projectOrder = useUiStateStore((store) => store.projectOrder);
+  const sidebarEnvironmentHiddenById = useUiStateStore(
+    (store) => store.sidebarEnvironmentHiddenById,
+  );
   const reorderProjects = useUiStateStore((store) => store.reorderProjects);
+  const setSidebarEnvironmentVisible = useUiStateStore(
+    (store) => store.setSidebarEnvironmentVisible,
+  );
   const navigate = useNavigate();
   const pathname = useLocation({ select: (loc) => loc.pathname });
   const isOnSettings = pathname.startsWith("/settings");
@@ -3178,6 +3279,27 @@ export default function Sidebar() {
       ),
     [environments],
   );
+  const environmentVisibilityOptions = useMemo<SidebarEnvironmentVisibilityOption[]>(() => {
+    const projectCountsByEnvironmentId = new Map<string, number>();
+    for (const project of projects) {
+      projectCountsByEnvironmentId.set(
+        project.environmentId,
+        (projectCountsByEnvironmentId.get(project.environmentId) ?? 0) + 1,
+      );
+    }
+    const canHideSidebarEnvironments = environments.length > 1;
+    return environments.map((environment) => ({
+      environmentId: environment.environmentId,
+      label: environment.label,
+      visible:
+        !canHideSidebarEnvironments ||
+        sidebarEnvironmentHiddenById[environment.environmentId] !== true,
+      projectCount: projectCountsByEnvironmentId.get(environment.environmentId) ?? 0,
+    }));
+  }, [environments, projects, sidebarEnvironmentHiddenById]);
+  const hiddenEnvironmentCount = environmentVisibilityOptions.filter(
+    (environment) => !environment.visible,
+  ).length;
   const orderedProjects = useMemo(() => {
     return orderItemsByPreferredIds({
       items: projects,
@@ -3189,28 +3311,59 @@ export default function Sidebar() {
       ],
     });
   }, [projectOrder, projects]);
+  const visibleOrderedProjects = useMemo(
+    () =>
+      orderedProjects.filter(
+        (project) =>
+          environments.length <= 1 || sidebarEnvironmentHiddenById[project.environmentId] !== true,
+      ),
+    [environments.length, orderedProjects, sidebarEnvironmentHiddenById],
+  );
+  const visibleSidebarThreads = useMemo(
+    () =>
+      sidebarThreads.filter(
+        (thread) =>
+          environments.length <= 1 || sidebarEnvironmentHiddenById[thread.environmentId] !== true,
+      ),
+    [environments.length, sidebarEnvironmentHiddenById, sidebarThreads],
+  );
 
   // Build a mapping from physical project key → logical project key for
   // cross-environment grouping.  Projects that share a repositoryIdentity
   // canonicalKey are treated as one logical project in the sidebar.
   const physicalToLogicalKey = useMemo(() => {
     return buildPhysicalToLogicalProjectKeyMap({
-      projects: orderedProjects,
+      projects: visibleOrderedProjects,
       settings: projectGroupingSettings,
     });
-  }, [orderedProjects, projectGroupingSettings]);
+  }, [visibleOrderedProjects, projectGroupingSettings]);
   const projectPhysicalKeyByScopedRef = useMemo(
     () =>
       new Map(
-        orderedProjects.map((project) => [
+        visibleOrderedProjects.map((project) => [
           scopedProjectKey(scopeProjectRef(project.environmentId, project.id)),
           derivePhysicalProjectKey(project),
         ]),
       ),
-    [orderedProjects],
+    [visibleOrderedProjects],
   );
 
   const sidebarProjects = useMemo<SidebarProjectSnapshot[]>(() => {
+    return buildSidebarProjectSnapshots({
+      projects: visibleOrderedProjects,
+      settings: projectGroupingSettings,
+      primaryEnvironmentId,
+      resolveEnvironmentLabel: (environmentId) => environmentLabelById.get(environmentId) ?? null,
+      isDesktopLocalEnvironment: (environmentId) => desktopLocalEnvironmentIds.has(environmentId),
+    });
+  }, [
+    environmentLabelById,
+    desktopLocalEnvironmentIds,
+    visibleOrderedProjects,
+    projectGroupingSettings,
+    primaryEnvironmentId,
+  ]);
+  const sidebarProjectsForProjectOrder = useMemo<SidebarProjectSnapshot[]>(() => {
     return buildSidebarProjectSnapshots({
       projects: orderedProjects,
       settings: projectGroupingSettings,
@@ -3225,6 +3378,13 @@ export default function Sidebar() {
     projectGroupingSettings,
     primaryEnvironmentId,
   ]);
+  const sidebarProjectForProjectOrderByKey = useMemo(
+    () =>
+      new Map(
+        sidebarProjectsForProjectOrder.map((project) => [project.projectKey, project] as const),
+      ),
+    [sidebarProjectsForProjectOrder],
+  );
 
   const sidebarProjectByKey = useMemo(
     () => new Map(sidebarProjects.map((project) => [project.projectKey, project] as const)),
@@ -3259,7 +3419,7 @@ export default function Sidebar() {
   // are displayed together.
   const threadsByProjectKey = useMemo(() => {
     const next = new Map<string, SidebarThreadSummary[]>();
-    for (const thread of sidebarThreads) {
+    for (const thread of visibleSidebarThreads) {
       const physicalKey =
         projectPhysicalKeyByScopedRef.get(
           scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
@@ -3273,7 +3433,7 @@ export default function Sidebar() {
       }
     }
     return next;
-  }, [sidebarThreads, physicalToLogicalKey, projectPhysicalKeyByScopedRef]);
+  }, [visibleSidebarThreads, physicalToLogicalKey, projectPhysicalKeyByScopedRef]);
   const getCurrentSidebarShortcutContext = useCallback(
     () => ({
       terminalFocus: isTerminalFocused(),
@@ -3336,16 +3496,16 @@ export default function Sidebar() {
       dragInProgressRef.current = false;
       const { active, over } = event;
       if (!over || active.id === over.id) return;
-      const activeProject = sidebarProjects.find((project) => project.projectKey === active.id);
-      const overProject = sidebarProjects.find((project) => project.projectKey === over.id);
+      const activeProject = sidebarProjectForProjectOrderByKey.get(String(active.id));
+      const overProject = sidebarProjectForProjectOrderByKey.get(String(over.id));
       if (!activeProject || !overProject) return;
       const activeMemberKeys = activeProject.memberProjects.map(
         (member) => member.physicalProjectKey,
       );
       const overMemberKeys = overProject.memberProjects.map((member) => member.physicalProjectKey);
       reorderProjects(orderedProjects.map(getProjectOrderKey), activeMemberKeys, overMemberKeys);
     },
-    [orderedProjects, sidebarProjectSortOrder, reorderProjects, sidebarProjects],
+    [orderedProjects, sidebarProjectForProjectOrderByKey, sidebarProjectSortOrder, reorderProjects],
   );
 
   const handleProjectDragStart = useCallback(
@@ -3382,8 +3542,8 @@ export default function Sidebar() {
   }, []);
 
   const visibleThreads = useMemo(
-    () => sidebarThreads.filter((thread) => thread.archivedAt === null),
-    [sidebarThreads],
+    () => visibleSidebarThreads.filter((thread) => thread.archivedAt === null),
+    [visibleSidebarThreads],
   );
   const sortedProjects = useMemo(() => {
     const sortableProjects = sidebarProjects.map((project) => ({
@@ -3730,7 +3890,10 @@ export default function Sidebar() {
             threadSortOrder={sidebarThreadSortOrder}
             projectGroupingMode={sidebarProjectGroupingMode}
             threadPreviewCount={sidebarThreadPreviewCount}
+            environmentVisibilityOptions={environmentVisibilityOptions}
+            hiddenEnvironmentCount={hiddenEnvironmentCount}
             updateSettings={updateSettings}
+            setSidebarEnvironmentVisible={setSidebarEnvironmentVisible}
             openAddProject={openAddProjectCommandPalette}
             isManualProjectSorting={isManualProjectSorting}
             projectDnDSensors={projectDnDSensors}

apps/web/src/components/ui/menu.tsx

@@ -28,13 +28,15 @@ function MenuPopup({
   alignOffset,
   side = "bottom",
   anchor,
+  collisionAvoidance,
   ...props
 }: MenuPrimitive.Popup.Props & {
   align?: MenuPrimitive.Positioner.Props["align"];
   sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
   alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
   side?: MenuPrimitive.Positioner.Props["side"];
   anchor?: MenuPrimitive.Positioner.Props["anchor"];
+  collisionAvoidance?: MenuPrimitive.Positioner.Props["collisionAvoidance"];
 }) {
   return (
     <MenuPrimitive.Portal>
@@ -43,6 +45,7 @@ function MenuPopup({
         alignOffset={alignOffset}
         anchor={anchor}
         className="z-50"
+        collisionAvoidance={collisionAvoidance}
         data-slot="menu-positioner"
         side={side}
         sideOffset={sideOffset}