perf(web): switching project keeps Diagnostics and Providers mounted

apps/web/src/components/settings/SettingsScopeSentence.tsx

@@ -152,7 +152,7 @@ function EnvironmentScopeMenu({
       >
         {!singleEnvironment ? (
           <>
-            <MenuRadioItem value={ALL_ENVIRONMENTS_VALUE}>
+            <MenuRadioItem value={ALL_ENVIRONMENTS_VALUE} closeOnClick>
               <span className="flex min-w-0 items-center gap-2">
                 <LayersIcon aria-hidden className="size-3.5" />
                 <span className="min-w-0 flex-1 truncate">All environments</span>
@@ -163,7 +163,11 @@ function EnvironmentScopeMenu({
           </>
         ) : null}
         {environments.map((environment) => (
-          <MenuRadioItem key={environment.environmentId} value={environment.environmentId}>
+          <MenuRadioItem
+            key={environment.environmentId}
+            value={environment.environmentId}
+            closeOnClick
+          >
             <span className="flex min-w-0 items-center gap-2">
               <EnvironmentMachineIcon
                 aria-hidden
@@ -199,15 +203,15 @@ function ProjectScopeMenu({ value, groups, onChange }: SettingsScopeMenuProps) {
           if (typeof next === "string") onChange(selectProjectAxis(value, next));
         }}
       >
-        <MenuRadioItem value={ALL_PROJECTS_VALUE}>
+        <MenuRadioItem value={ALL_PROJECTS_VALUE} closeOnClick>
           <span className="flex min-w-0 items-center gap-2">
             <span className="min-w-0 flex-1 truncate">All projects</span>
             <MenuRadioItemIndicator />
           </span>
         </MenuRadioItem>
         <MenuSeparator />
         {groups.map((group) => (
-          <MenuRadioItem key={group.projectKey} value={group.projectKey}>
+          <MenuRadioItem key={group.projectKey} value={group.projectKey} closeOnClick>
             <span className="flex min-w-0 items-center gap-2">
               <ProjectFavicon project={group} className="size-3.5" />
               <span className="min-w-0 flex-1 truncate">{group.displayName}</span>

apps/web/src/components/settings/settingsScopeRetention.test.tsx

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import { act, useState, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vite-plus/test";
+import type { SettingsScopeSearch } from "./settingsScope";
+
+interface ScopeState {
+  readonly search: SettingsScopeSearch;
+  readonly environmentId: string | null;
+}
+
+const state = vi.hoisted(() => ({
+  pathname: "/settings/diagnostics",
+  scope: { search: {}, environmentId: null } as ScopeState,
+}));
+
+vi.mock("@tanstack/react-router", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@tanstack/react-router")>()),
+  createFileRoute: () => (options: { component: () => ReactNode }) => ({
+    options,
+    useSearch: () => state.scope.search,
+    useNavigate: () => vi.fn(),
+  }),
+  useLocation: (options?: { select: (location: unknown) => unknown }) => {
+    const location = { pathname: state.pathname, hash: "", state: {} };
+    return options ? options.select(location) : location;
+  },
+  Outlet: () => <StatefulContent />,
+  redirect: vi.fn(),
+}));
+vi.mock("./SettingsScopeContext", async () => {
+  const { createContext, useContext } = await import("react");
+  const Scope = createContext<ScopeState>(state.scope);
+  return {
+    SettingsScopeProvider: ({ children }: { children: ReactNode }) => (
+      <Scope value={state.scope}>{children}</Scope>
+    ),
+    useSettingsScope: () => {
+      const { search, environmentId } = useContext(Scope);
+      return {
+        search,
+        scope: { kind: "all" },
+        environment: environmentId ? { environmentId } : null,
+        connectedEnvironments: environmentId ? [{}] : [],
+      };
+    },
+  };
+});
+vi.mock("../../state/environments", () => ({ useEnvironments: () => ({ environments: [] }) }));
+vi.mock("../ui/sidebar", () => ({
+  SidebarInset: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}));
+vi.mock("../WorkspacePageHeader", () => ({
+  WorkspacePageHeader: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}));
+vi.mock("./settingsLayout", () => ({
+  SettingsPageContainer: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}));
+vi.mock("./SettingsBreadcrumb", () => ({ SettingsBreadcrumb: () => null }));
+vi.mock("../sidebar/mainAppLocation", () => ({ useNavigateToMainApp: () => vi.fn() }));
+vi.mock("../../hooks/useNavigateBack", () => ({ useEscapeToGoBack: () => undefined }));
+vi.mock("./SettingsPanels", () => ({ useSettingsRestore: () => ({ changedSettingLabels: [] }) }));
+
+import { Route } from "../../routes/settings";
+
+function StatefulContent() {
+  const [value, setValue] = useState(0);
+  return (
+    <button aria-label="Retained value" onClick={() => setValue(value + 1)}>
+      {value}
+    </button>
+  );
+}
+
+let root: Root;
+let container: HTMLDivElement;
+const Layout = Route.options.component!;
+await Layout.preload?.();
+
+async function render(scope: ScopeState) {
+  state.scope = scope;
+  await act(async () => root.render(<Layout />));
+}
+function retainedValue() {
+  return container.querySelector('button[aria-label="Retained value"]')?.textContent ?? null;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+const first = { search: { machine: "first", project: "one" }, environmentId: "first" };
+const otherProject = { search: { machine: "first", project: "two" }, environmentId: "first" };
+const otherMachine = { search: { machine: "second", project: "one" }, environmentId: "second" };
+const implicitFirst = { search: { project: "one" }, environmentId: "first" };
+const implicitSecond = { search: { project: "one" }, environmentId: "second" };
+
+const disconnected = { search: first.search, environmentId: null };
+
+it.each([
+  ["/settings/diagnostics", "another project", "1", first, otherProject],
+  ["/settings/providers", "another project", "1", first, otherProject],
+  ["/settings/diagnostics", "another environment", "0", first, otherMachine],
+  ["/settings/providers", "another environment", "0", first, otherMachine],
+  ["/settings/diagnostics", "an implicit environment change", "0", implicitFirst, implicitSecond],
+  ["/settings/providers", "an implicit environment change", "0", implicitFirst, implicitSecond],
+  ["/settings/diagnostics", "a disconnect", "0", first, disconnected],
+  ["/settings/keybindings", "another project", "0", first, otherProject],
+])("%s after %s shows %s", async (pathname, _change, expected, before, after) => {
+  state.pathname = pathname;
+  await render(before);
+  await act(async () =>
+    container.querySelector<HTMLButtonElement>('button[aria-label="Retained value"]')?.click(),
+  );
+  expect(retainedValue()).toBe("1");
+
+  await render(after);
+
+  expect(retainedValue()).toBe(expected);
+});

apps/web/src/routes/settings.tsx

@@ -114,7 +114,11 @@ function SettingsContentLayout() {
   const location = useLocation();
   const navigateToMainApp = useNavigateToMainApp();
   useEscapeToGoBack(navigateToMainApp);
-  const { search } = useSettingsScope();
+  const { search, environment } = useSettingsScope();
+  const contentScopeKey =
+    location.pathname === "/settings/diagnostics" || location.pathname === "/settings/providers"
+      ? environment?.environmentId
+      : JSON.stringify(search);
   const [restoreSignal, setRestoreSignal] = useState(0);
 
   return (
@@ -133,10 +137,7 @@ function SettingsContentLayout() {
           </div>
         </WorkspacePageHeader>
 
-        <div
-          key={`${JSON.stringify(search)}:${restoreSignal}`}
-          className="min-h-0 flex flex-1 flex-col"
-        >
+        <div key={`${contentScopeKey}:${restoreSignal}`} className="min-h-0 flex flex-1 flex-col">
           <SettingsScopeBoundary pathname={location.pathname}>
             <Outlet />
           </SettingsScopeBoundary>