refactor(#292 review): extract NAVBAR_COLLAPSE_BREAKPOINT constant (F2)

The AppShell navbar breakpoint and both burger toggles' hiddenFrom/visibleFrom
must be equal, or the sidebar becomes unreachable on tablet widths (the round-1
regression). A comment guarded that before; now a shared const does. Add
NAVBAR_COLLAPSE_BREAKPOINT='md' to sidebar-atom.ts and reference it from the navbar
breakpoint (global-app-shell) + both toggles (app-header). aside.breakpoint and the
sm brand/search gates are intentionally separate contracts, left untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/client/src/components/layouts/global/app-header.tsx

@@ -12,6 +12,7 @@ import TopMenu from "@/components/layouts/global/top-menu.tsx";
 import { Link } from "react-router-dom";
 import { useAtom } from "jotai";
 import {
+  NAVBAR_COLLAPSE_BREAKPOINT,
   desktopSidebarAtom,
   mobileSidebarAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
@@ -53,7 +54,13 @@ export function AppHeader() {
               aria-label={t("Sidebar toggle")}
               opened={mobileOpened}
               onClick={toggleMobile}
-              hiddenFrom="sm"
+              // Must match the AppShell navbar breakpoint (md). The navbar
+              // collapses to the MOBILE drawer below md, so the mobile toggle
+              // (which flips mobileOpened) must be the one visible across the
+              // whole <md band — otherwise at 768-991 the desktop toggle showed
+              // but flipped the wrong atom, leaving the drawer unopenable (the
+              // regression from the initial sm->md navbar change).
+              hiddenFrom={NAVBAR_COLLAPSE_BREAKPOINT}
               size="sm"
             />
           </Tooltip>
@@ -63,7 +70,7 @@ export function AppHeader() {
               aria-label={t("Sidebar toggle")}
               opened={desktopOpened}
               onClick={toggleDesktop}
-              visibleFrom="sm"
+              visibleFrom={NAVBAR_COLLAPSE_BREAKPOINT}
               size="sm"
             />
           </Tooltip>

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -6,6 +6,7 @@ import SettingsSidebar from "@/components/settings/settings-sidebar.tsx";
 import { useAtom } from "jotai";
 import {
   APP_NAVBAR_ID,
+  NAVBAR_COLLAPSE_BREAKPOINT,
   asideStateAtom,
   desktopSidebarAtom,
   mobileSidebarAtom,
@@ -88,7 +89,13 @@ export default function GlobalAppShell({
       header={{ height: 45 }}
       navbar={{
         width: isSpaceRoute ? sidebarWidth : 300,
-        breakpoint: "sm",
+        // `md` (not `sm`): below 992px the fixed ~300px sidebar leaves too little
+        // room for content — the settings tables (Members/…) overflow the offset
+        // content area on tablet (~768px) and clip the Role/actions columns
+        // off-screen with no horizontal scroll. Collapsing the navbar to a toggle
+        // drawer across the whole tablet band frees the full width for content
+        // (the mobile drawer is closed by default, so nothing overlaps on load).
+        breakpoint: NAVBAR_COLLAPSE_BREAKPOINT,
         collapsed: {
           mobile: !mobileOpened,
           desktop: !desktopOpened,
@@ -97,7 +104,7 @@ export default function GlobalAppShell({
       aside={
         isPageRoute && {
           width: 420,
-          breakpoint: "sm",
+          breakpoint: "md",
           collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen },
         }
       }

apps/client/src/components/layouts/global/hooks/atoms/sidebar-atom.ts

@@ -7,6 +7,13 @@ import { atom } from "jotai";
 // would create a shell -> chat-window -> shell import cycle).
 export const APP_NAVBAR_ID = "app-shell-navbar";
 
+// Single source of truth for the navbar collapse breakpoint. The AppShell navbar
+// `breakpoint` and BOTH burger toggles' `hiddenFrom`/`visibleFrom` MUST use this
+// exact value: if they drift, the sidebar becomes unreachable on tablet widths
+// (the round-1 regression of #292). Kept here so the shell and the header share
+// one constant the compiler enforces, instead of three hand-synced string literals.
+export const NAVBAR_COLLAPSE_BREAKPOINT = "md";
+
 export const mobileSidebarAtom = atom<boolean>(false);
 
 export const desktopSidebarAtom = atomWithWebStorage<boolean>(

apps/client/src/features/auth/hooks/use-auth.ts

@@ -23,7 +23,6 @@ import { acceptInvitation } from "@/features/workspace/services/workspace-servic
 import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
 import { RESET } from "jotai/utils";
 import { useTranslation } from "react-i18next";
-import { clearPersistedTreeCaches } from "@/features/page/tree/atoms/tree-data-atom";
 
 export default function useAuth() {
   const { t } = useTranslation();
@@ -123,9 +122,6 @@ export default function useAuth() {
 
   const handleLogout = async () => {
     setCurrentUser(RESET);
-    // Purge the persisted sidebar tree caches (they contain page titles) so
-    // nothing readable is left in localStorage on a shared machine.
-    clearPersistedTreeCaches();
     await logout();
     window.location.replace(`${APP_ROUTE.AUTH.LOGIN}?logout=1`);
   };

apps/client/src/features/page/tree/atoms/open-tree-nodes-atom.ts

@@ -13,30 +13,20 @@ export type OpenMap = Record<string, boolean>;
 // `OpenMap | Promise<OpenMap>` and break the functional-updater setter below).
 const openTreeNodesStorage = createJSONStorage<OpenMap>(() => localStorage);
 
-// Single source of truth for the open-map localStorage key prefix. Exported so
-// the logout cache sweep (tree-data-atom.ts) removes keys by the SAME prefix
-// used to write them — a rename here can never silently desync the cleanup.
-export const OPEN_TREE_NODES_KEY_PREFIX = "openTreeNodes:";
-
 // One persisted open/closed map per (workspace, user). Scoping the localStorage
 // key prevents accounts that share a browser origin from leaking tree state.
 // `getOnInit: true` reads localStorage synchronously at atom init (not on mount),
 // so the first render already has the saved state — no collapse-then-expand
 // flicker on reload, and writes never run against an un-hydrated empty map.
 const openTreeNodesFamily = atomFamily((scopeKey: string) =>
-  atomWithStorage<OpenMap>(
-    `${OPEN_TREE_NODES_KEY_PREFIX}${scopeKey}`,
-    {},
-    openTreeNodesStorage,
-    { getOnInit: true },
-  ),
+  atomWithStorage<OpenMap>(`openTreeNodes:${scopeKey}`, {}, openTreeNodesStorage, {
+    getOnInit: true,
+  }),
 );
 
 // Resolve the storage scope from the current user. Fall back to "anon" for the
 // workspace/user parts when nothing is loaded yet (logged out / first paint).
-// Shared by the open-map atom below and the persisted tree-data atom
-// (tree-data-atom.ts) so both caches are scoped identically.
-export const scopeKeyAtom = atom((get) => {
+const scopeKeyAtom = atom((get) => {
   const currentUser = get(currentUserAtom);
   const workspaceId = currentUser?.workspace?.id ?? "anon";
   const userId = currentUser?.user?.id ?? "anon";

apps/client/src/features/page/tree/atoms/tree-data-atom.test.ts

@@ -1,232 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import type { SpaceTreeNode } from "@/features/page/tree/types";
-import type { ICurrentUser } from "@/features/user/types/user.types";
-
-// The persisted tree-data atom hydrates from localStorage ONCE, at family-atom
-// creation (`getOnInit: true`). To exercise hydration deterministically each
-// test imports a FRESH module instance (fresh atomFamily) after seeding the
-// storage stub from vitest.setup.ts. jotai itself is externalized by vitest, so
-// `createStore` can stay a static import — atoms are plain objects and any
-// store works with any module instance.
-import { createStore } from "jotai";
-
-// Storage key for the default scope: no currentUser -> "anon:anon" (see
-// scopeKeyAtom in open-tree-nodes-atom.ts) with the `v1` cache-shape version.
-const ANON_KEY = "treeData:v1:anon:anon";
-const DEBOUNCE_MS = 500;
-
-async function freshImport() {
-  vi.resetModules();
-  const treeDataModule = await import("./tree-data-atom");
-  const userModule = await import(
-    "@/features/user/atoms/current-user-atom"
-  );
-  return {
-    treeDataAtom: treeDataModule.treeDataAtom,
-    flushPendingTreeDataWrites: treeDataModule.flushPendingTreeDataWrites,
-    clearPersistedTreeCaches: treeDataModule.clearPersistedTreeCaches,
-    currentUserAtom: userModule.currentUserAtom,
-  };
-}
-
-function node(id: string): SpaceTreeNode {
-  return {
-    id,
-    slugId: `slug-${id}`,
-    name: id,
-    position: "a0",
-    spaceId: "space-1",
-    parentPageId: null as unknown as string,
-    hasChildren: false,
-    children: [],
-  };
-}
-
-// Every persisted tree key currently in storage — asserting on the whole
-// prefix (not one known key) catches writes that resurrect under ANY scope.
-function persistedTreeDataKeys(): string[] {
-  const keys: string[] = [];
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
-    if (key !== null && key.startsWith("treeData:v1:")) keys.push(key);
-  }
-  return keys;
-}
-
-function currentUser(workspaceId: string, userId: string): ICurrentUser {
-  return {
-    user: { id: userId },
-    workspace: { id: workspaceId },
-  } as unknown as ICurrentUser;
-}
-
-beforeEach(() => {
-  localStorage.clear();
-});
-
-afterEach(() => {
-  vi.useRealTimers();
-  vi.restoreAllMocks();
-});
-
-describe("treeDataAtom (localStorage-persisted)", () => {
-  it("reads [] from a fresh store with empty storage", async () => {
-    const { treeDataAtom } = await freshImport();
-    const store = createStore();
-
-    expect(store.get(treeDataAtom)).toEqual([]);
-  });
-
-  it("persists through the debounced setItem and hydrates a fresh module back", async () => {
-    vi.useFakeTimers();
-    const setItemSpy = vi.spyOn(localStorage, "setItem");
-
-    const { treeDataAtom } = await freshImport();
-    const store = createStore();
-
-    store.set(treeDataAtom, [node("a")]);
-    // Second write inside the debounce window — must coalesce into ONE flush
-    // carrying only the latest value.
-    vi.advanceTimersByTime(DEBOUNCE_MS / 2);
-    store.set(treeDataAtom, [node("a"), node("b")]);
-
-    // Nothing flushed yet: the write is trailing-debounced.
-    expect(localStorage.getItem(ANON_KEY)).toBeNull();
-
-    vi.advanceTimersByTime(DEBOUNCE_MS + 100);
-
-    expect(setItemSpy).toHaveBeenCalledTimes(1);
-    expect(JSON.parse(localStorage.getItem(ANON_KEY)!)).toEqual([
-      node("a"),
-      node("b"),
-    ]);
-
-    // A fresh module (fresh atom family -> getOnInit re-reads storage) and a
-    // fresh store hydrate the persisted tree back — the reload scenario.
-    const second = await freshImport();
-    const store2 = createStore();
-    expect(store2.get(second.treeDataAtom)).toEqual([node("a"), node("b")]);
-  });
-
-  it("reads [] (without throwing) when storage holds corrupted JSON", async () => {
-    localStorage.setItem(ANON_KEY, "{definitely not JSON!!!");
-
-    const { treeDataAtom } = await freshImport();
-    const store = createStore();
-
-    expect(store.get(treeDataAtom)).toEqual([]);
-  });
-
-  it("reads [] when storage holds valid JSON of a non-array shape", async () => {
-    localStorage.setItem(ANON_KEY, JSON.stringify({ id: "not-a-tree" }));
-
-    const { treeDataAtom } = await freshImport();
-    const store = createStore();
-
-    expect(store.get(treeDataAtom)).toEqual([]);
-  });
-
-  it("supports functional-updater writes", async () => {
-    const { treeDataAtom } = await freshImport();
-    const store = createStore();
-
-    store.set(treeDataAtom, [node("a")]);
-    store.set(treeDataAtom, (prev) => [...prev, node("b")]);
-
-    expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["a", "b"]);
-  });
-
-  it("isolates trees between (workspace, user) scopes", async () => {
-    const { treeDataAtom, currentUserAtom } = await freshImport();
-    const store = createStore();
-
-    store.set(currentUserAtom, currentUser("w1", "u1"));
-    store.set(treeDataAtom, [node("a")]);
-    expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["a"]);
-
-    // Another account on the same browser origin must NOT see u1's tree.
-    store.set(currentUserAtom, currentUser("w2", "u2"));
-    expect(store.get(treeDataAtom)).toEqual([]);
-
-    store.set(treeDataAtom, [node("b")]);
-    expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["b"]);
-
-    // Switching back resolves the original scope's tree untouched.
-    store.set(currentUserAtom, currentUser("w1", "u1"));
-    expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["a"]);
-  });
-
-  it("clearPersistedTreeCaches removes all tree keys and discards pending writes", async () => {
-    vi.useFakeTimers();
-
-    // Stale caches across scopes plus an UNRELATED key that must survive.
-    localStorage.setItem("treeData:v1:a:b", JSON.stringify([node("stale")]));
-    localStorage.setItem("openTreeNodes:a:b", JSON.stringify({ p1: true }));
-    localStorage.setItem("currentUser", JSON.stringify({ user: { id: "b" } }));
-
-    const { treeDataAtom, clearPersistedTreeCaches } = await freshImport();
-    const store = createStore();
-
-    // Queue a debounced write (not flushed yet) for the anon scope.
-    store.set(treeDataAtom, [node("pending")]);
-    expect(localStorage.getItem(ANON_KEY)).toBeNull();
-
-    clearPersistedTreeCaches();
-
-    // Both prefixed caches are swept; the unrelated key is untouched.
-    expect(localStorage.getItem("treeData:v1:a:b")).toBeNull();
-    expect(localStorage.getItem("openTreeNodes:a:b")).toBeNull();
-    expect(localStorage.getItem("currentUser")).toBe(
-      JSON.stringify({ user: { id: "b" } }),
-    );
-
-    // The queued write was DISCARDED, not merely delayed: the debounce timer
-    // firing later must not resurrect a tree key after logout.
-    vi.advanceTimersByTime(DEBOUNCE_MS + 100);
-    expect(localStorage.getItem(ANON_KEY)).toBeNull();
-  });
-
-  it("clearPersistedTreeCaches discards queued writes even when flushed DIRECTLY", async () => {
-    vi.useFakeTimers();
-
-    const { treeDataAtom, clearPersistedTreeCaches, flushPendingTreeDataWrites } =
-      await freshImport();
-    const store = createStore();
-
-    // Queue a debounced write, then clear. Calling the flush directly (not via
-    // the debounce timer) isolates the pending-queue discard from the timer
-    // cancel: if the queue survived, this flush would resurrect the key even
-    // though the timer never fired.
-    store.set(treeDataAtom, [node("pending")]);
-    clearPersistedTreeCaches();
-    flushPendingTreeDataWrites();
-
-    expect(localStorage.getItem(ANON_KEY)).toBeNull();
-    expect(persistedTreeDataKeys()).toEqual([]);
-  });
-
-  it("disables persistence after clearPersistedTreeCaches: NEW writes never reach storage", async () => {
-    vi.useFakeTimers();
-
-    const { treeDataAtom, clearPersistedTreeCaches, flushPendingTreeDataWrites } =
-      await freshImport();
-    const store = createStore();
-
-    clearPersistedTreeCaches();
-
-    // The resurrection scenario: a websocket tree event lands while `await
-    // logout()` is still in flight, AFTER the sweep. The write must not be
-    // queued, must not arm a new debounce timer, and must not survive the
-    // beforeunload flush fired by the logout redirect.
-    store.set(treeDataAtom, [node("late")]);
-
-    vi.advanceTimersByTime(DEBOUNCE_MS + 100);
-    flushPendingTreeDataWrites(); // what the beforeunload handler runs
-
-    expect(persistedTreeDataKeys()).toEqual([]);
-
-    // Only PERSISTENCE is disabled: the in-memory atom keeps working, so the
-    // UI stays intact during the brief pre-redirect window.
-    expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["late"]);
-  });
-});

apps/client/src/features/page/tree/atoms/tree-data-atom.ts

@@ -1,200 +1,8 @@
 import { atom } from "jotai";
-import { atomFamily, atomWithStorage } from "jotai/utils";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { appendNodeChildren } from "../utils";
-import {
-  OPEN_TREE_NODES_KEY_PREFIX,
-  scopeKeyAtom,
-} from "./open-tree-nodes-atom";
 
-// The sidebar tree is persisted to localStorage so a page reload can paint the
-// last-known tree IMMEDIATELY (no blank sidebar while the root query runs) and
-// then reconcile with the server in the background. localStorage is a BOOT
-// CACHE only — the in-memory atom stays the source of truth while the app runs.
-
-// Trailing-debounce machinery for the localStorage writes. The tree is
-// rewritten on every lazy load / drag / socket event; serializing a large tree
-// on each update would burn CPU and thrash the storage quota, so writes are
-// coalesced (~500 ms per burst) and only the latest value per key is flushed.
-const WRITE_DEBOUNCE_MS = 500;
-
-// Single source of truth for the tree-cache localStorage key prefix. The `v1`
-// segment versions the cached node shape (bump it when SpaceTreeNode changes
-// incompatibly). Shared by the storage key construction below AND the logout
-// sweep in clearPersistedTreeCaches() so the two can never drift apart.
-export const TREE_DATA_KEY_PREFIX = "treeData:v1:";
-
-// Size guard: skip persisting trees whose JSON exceeds ~4M chars. localStorage
-// quota is typically ~5 MB per origin; a huge tree must not evict everything
-// else or spam QuotaExceededError on every debounce tick.
-const MAX_SERIALIZED_LENGTH = 4_000_000;
-
-const pendingWrites = new Map<string, SpaceTreeNode[]>();
-let flushTimer: ReturnType<typeof setTimeout> | null = null;
-let writeFailureWarned = false;
-
-// Persistence kill-switch, armed by clearPersistedTreeCaches(). Once set, the
-// debounced setItem and the flush become no-ops so nothing can be written back
-// to localStorage AFTER the logout sweep: a websocket tree event landing while
-// `await logout()` is still in flight would otherwise re-queue a write that
-// the `beforeunload` flush (fired by the redirect) silently resurrects.
-// Intentionally never reset: every caller of clearPersistedTreeCaches()
-// immediately navigates away with a full page load
-// (window.location.replace/href), so this module instance is torn down anyway.
-// Only PERSISTENCE stops — the in-memory atoms keep working, so the UI stays
-// intact during the brief pre-redirect window.
-let persistenceDisabled = false;
-
-function writeNow(key: string, value: SpaceTreeNode[]): void {
-  try {
-    const serialized = JSON.stringify(value);
-    if (serialized.length > MAX_SERIALIZED_LENGTH) {
-      console.warn("[tree] cached tree too large to persist; skipping", key);
-      return;
-    }
-    localStorage.setItem(key, serialized);
-  } catch (err) {
-    // QuotaExceededError, private mode, jsdom shims without working storage…
-    // The cache is best-effort: warn once, keep the in-memory tree working.
-    if (!writeFailureWarned) {
-      writeFailureWarned = true;
-      console.warn("[tree] failed to persist tree cache", err);
-    }
-  }
-}
-
-// Exported so tests can force the debounced write synchronously; production
-// code must never need it (the beforeunload hook below covers reloads).
-export function flushPendingTreeDataWrites(): void {
-  if (flushTimer !== null) {
-    clearTimeout(flushTimer);
-    flushTimer = null;
-  }
-  if (persistenceDisabled) {
-    // Belt-and-braces: after logout nothing may reach localStorage, even via
-    // the beforeunload flush racing the redirect. Drop anything queued.
-    pendingWrites.clear();
-    return;
-  }
-  for (const [key, value] of pendingWrites) {
-    writeNow(key, value);
-  }
-  pendingWrites.clear();
-}
-
-// Logout hygiene: the tree cache stores PAGE TITLES, so leaving it behind
-// would keep them readable in localStorage on a shared machine after logout.
-// Sweep by key prefix (not just the current scope) so stale scopes — old
-// users, the `anon:anon` fallback — are purged too. Pending debounced writes
-// are DISCARDED first (not flushed): a queued write firing after the sweep
-// would silently resurrect a removed key.
-export function clearPersistedTreeCaches(): void {
-  // Disable persistence FIRST so no write can be queued (or flushed) between
-  // the sweep below and the full-page navigation every caller performs next.
-  persistenceDisabled = true;
-  if (flushTimer !== null) {
-    clearTimeout(flushTimer);
-    flushTimer = null;
-  }
-  pendingWrites.clear();
-  try {
-    // Collect matching keys BEFORE removing: deleting while iterating
-    // `localStorage.key(i)` shifts the indices and skips entries.
-    const keysToRemove: string[] = [];
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i);
-      if (
-        key !== null &&
-        (key.startsWith(TREE_DATA_KEY_PREFIX) ||
-          key.startsWith(OPEN_TREE_NODES_KEY_PREFIX))
-      ) {
-        keysToRemove.push(key);
-      }
-    }
-    for (const key of keysToRemove) {
-      localStorage.removeItem(key);
-    }
-  } catch {
-    // Best-effort: disabled storage / jsdom shims must never break logout.
-  }
-}
-
-// Flush the pending debounced write on unload so a reload right after a tree
-// change doesn't lose the newest state (the debounce would otherwise eat it).
-if (
-  typeof window !== "undefined" &&
-  typeof window.addEventListener === "function"
-) {
-  window.addEventListener("beforeunload", flushPendingTreeDataWrites);
-}
-
-// Custom sync storage for the tree cache. Deliberately NO `subscribe` key:
-// cross-tab sync would REPLACE this tab's tree wholesale and clobber in-flight
-// lazy loads; websockets already keep every open tab live. Each tab keeps its
-// own in-memory tree — localStorage only seeds the next boot.
-const treeDataStorage = {
-  getItem: (key: string, initialValue: SpaceTreeNode[]): SpaceTreeNode[] => {
-    // Defensive: jsdom test shims may lack methods, stored JSON may be
-    // corrupted or of a wrong shape. Any failure falls back to the empty tree.
-    try {
-      const raw = localStorage.getItem(key);
-      if (raw === null) return initialValue;
-      const parsed = JSON.parse(raw);
-      return Array.isArray(parsed) ? (parsed as SpaceTreeNode[]) : initialValue;
-    } catch {
-      return initialValue;
-    }
-  },
-  setItem: (key: string, newValue: SpaceTreeNode[]): void => {
-    // After logout the cache must stay purged: neither queue the write nor arm
-    // a new flush timer (see persistenceDisabled above). The in-memory atom
-    // value is unaffected — only the localStorage mirror is frozen.
-    if (persistenceDisabled) return;
-    pendingWrites.set(key, newValue);
-    if (flushTimer !== null) clearTimeout(flushTimer);
-    flushTimer = setTimeout(flushPendingTreeDataWrites, WRITE_DEBOUNCE_MS);
-  },
-  removeItem: (key: string): void => {
-    pendingWrites.delete(key);
-    try {
-      localStorage.removeItem(key);
-    } catch {
-      /* best-effort cache — ignore */
-    }
-  },
-};
-
-// One persisted tree per (workspace, user) — same scoping rationale as the
-// open-map atom (accounts sharing a browser origin must not leak trees).
-// `getOnInit: true` reads localStorage synchronously at atom init, so the very
-// first render already has the cached tree — no blank-then-jump sidebar.
-const treeDataFamily = atomFamily((scopeKey: string) =>
-  atomWithStorage<SpaceTreeNode[]>(
-    `${TREE_DATA_KEY_PREFIX}${scopeKey}`,
-    [],
-    treeDataStorage,
-    { getOnInit: true },
-  ),
-);
-
-// Public facade — same read value (SpaceTreeNode[]) and same setter shape
-// (value OR functional updater) as the previous in-memory atom, transparently
-// routed to the persisted tree of the current workspace/user.
-export const treeDataAtom = atom(
-  (get) => get(treeDataFamily(get(scopeKeyAtom))),
-  (
-    get,
-    set,
-    update: SpaceTreeNode[] | ((prev: SpaceTreeNode[]) => SpaceTreeNode[]),
-  ) => {
-    const target = treeDataFamily(get(scopeKeyAtom));
-    const next =
-      typeof update === "function"
-        ? (update as (prev: SpaceTreeNode[]) => SpaceTreeNode[])(get(target))
-        : update;
-    set(target, next);
-  },
-);
+export const treeDataAtom = atom<SpaceTreeNode[]>([]);
 
 // Atom
 export const appendNodeChildrenAtom = atom(

apps/client/src/features/page/tree/components/space-tree.expand-all.test.tsx

@@ -71,8 +71,7 @@ vi.mock("@mantine/core", () => ({
 // getOnInit), which crashes under jsdom's localStorage shim here. Swap in a
 // plain in-memory atom with the same read value (OpenMap) and the same setter
 // shape (value OR functional updater) so the component's open-state logic runs
-// unchanged while staying inside the test store. `scopeKeyAtom` is also
-// re-exported (the real module exports it for the persisted tree-data atom).
+// unchanged while staying inside the test store.
 vi.mock("@/features/page/tree/atoms/open-tree-nodes-atom.ts", async () => {
   const { atom } = await import("jotai");
   type OpenMap = Record<string, boolean>;
@@ -87,17 +86,11 @@ vi.mock("@/features/page/tree/atoms/open-tree-nodes-atom.ts", async () => {
       set(base, next);
     },
   );
-  // Fixed scope key: the tree-data atom family resolves through this, so all
-  // tests read/write the same (empty at start of each test) storage key.
-  const scopeKeyAtom = atom(() => "test-workspace:test-user");
-  return { openTreeNodesAtom, scopeKeyAtom };
+  return { openTreeNodesAtom };
 });
 
 import SpaceTree, { SpaceTreeApi } from "./space-tree";
-import {
-  treeDataAtom,
-  flushPendingTreeDataWrites,
-} from "@/features/page/tree/atoms/tree-data-atom.ts";
+import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
 import { openTreeNodesAtom } from "@/features/page/tree/atoms/open-tree-nodes-atom.ts";
 import { createStore, Provider } from "jotai";
 import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
@@ -141,10 +134,6 @@ function renderTree(store: ReturnType<typeof createStore>) {
 beforeEach(() => {
   getSpaceTreeMock.mockReset();
   notificationsShowMock.mockReset();
-  // The tree-data atom persists via a ~500 ms trailing debounce; flush it NOW
-  // (cancelling the timer) so a previous test's pending write can't land in
-  // storage mid-test after the clear below.
-  flushPendingTreeDataWrites();
   // jsdom's localStorage shim here lacks `clear`; guard it. Each test uses a
   // fresh jotai store anyway, so cross-test open-state never leaks.
   try {

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -199,66 +199,45 @@ const SpaceTree = forwardRef<SpaceTreeApi, SpaceTreeProps>(function SpaceTree(
   const openIdsRef = useRef(openIds);
   openIdsRef.current = openIds;
 
-  // Re-fetch and reconcile the children of every currently-open, already-loaded
-  // branch of THIS space. Shared by the socket reconnect handler and the
-  // post-load cache refresh below. The ROOT level is reconciled separately by
-  // the root-query refetch + mergeRootTrees; an UNLOADED branch is skipped
-  // (lazy-load fetches it fresh on expand). Reads refs so it always sees the
-  // latest tree/open-state/space without re-creating the callback.
-  const refreshOpenBranches = useCallback(async () => {
-    const effectSpaceId = spaceIdRef.current;
-    const branchIds = loadedOpenBranchIds(
-      dataRef.current.filter((n) => n?.spaceId === effectSpaceId),
-      openIdsRef.current,
-    );
-    if (branchIds.length === 0) return;
-    for (const id of branchIds) {
-      try {
-        // `fresh: true` bypasses the 30-min sidebar-pages cache so the
-        // reconcile sees the server's CURRENT children (handler-order
-        // independent — no reliance on the global reconnect invalidation).
-        const fresh = await fetchAllAncestorChildren(
-          { pageId: id, spaceId: effectSpaceId },
-          { fresh: true },
-        );
-        if (spaceIdRef.current !== effectSpaceId) return; // space switched
-        setData((prev) => treeModel.reconcileChildren(prev, id, fresh));
-      } catch (err) {
-        console.error("[tree] open branch refresh failed", err);
-      }
-    }
-  }, [setData]);
-
-  // Reconnect refresh (#159 #8): on a socket reconnect, refresh open branches
+  // Reconnect refresh (#159 #8): on a socket reconnect, re-fetch and reconcile
+  // the children of every currently-open, already-loaded branch of THIS space,
   // so a move/rename/delete that happened INSIDE a loaded branch while events
   // were missed (laptop sleep / wifi gap) is reflected instead of left stale.
-  // No first-connect guard is needed: space-tree usually mounts AFTER the
-  // initial connect, so every `connect` it sees is a reconnect; the rare
+  // The ROOT level is reconciled separately by the root-query refetch +
+  // mergeRootTrees; an UNLOADED branch is skipped (lazy-load fetches it fresh on
+  // expand). No first-connect guard is needed: space-tree usually mounts AFTER
+  // the initial connect, so every `connect` it sees is a reconnect; the rare
   // initial-connect case has an empty tree, so the refresh is a harmless no-op.
   useEffect(() => {
     if (!socket) return;
-    const onConnect = () => {
-      refreshOpenBranches();
+    const onConnect = async () => {
+      const effectSpaceId = spaceIdRef.current;
+      const branchIds = loadedOpenBranchIds(
+        dataRef.current.filter((n) => n?.spaceId === effectSpaceId),
+        openIdsRef.current,
+      );
+      if (branchIds.length === 0) return;
+      for (const id of branchIds) {
+        try {
+          // `fresh: true` bypasses the 30-min sidebar-pages cache so the
+          // reconcile sees the server's CURRENT children (handler-order
+          // independent — no reliance on the global reconnect invalidation).
+          const fresh = await fetchAllAncestorChildren(
+            { pageId: id, spaceId: effectSpaceId },
+            { fresh: true },
+          );
+          if (spaceIdRef.current !== effectSpaceId) return; // space switched
+          setData((prev) => treeModel.reconcileChildren(prev, id, fresh));
+        } catch (err) {
+          console.error("[tree] reconnect branch refresh failed", err);
+        }
+      }
     };
     socket.on("connect", onConnect);
     return () => {
       socket.off("connect", onConnect);
     };
-  }, [socket, refreshOpenBranches]);
-
-  // Post-load cache refresh: the sidebar paints instantly from the
-  // localStorage-cached tree, so children of open branches may be stale. Once
-  // the server root set has been merged for this space (isDataLoaded flips
-  // true), refresh every open, already-loaded branch ONCE per space per mount.
-  // dataRef.current is already up to date here: refs are assigned during
-  // render, and this effect runs after the merge-triggered re-render commit.
-  const refreshedSpacesRef = useRef<Set<string>>(new Set());
-  useEffect(() => {
-    if (!isDataLoaded) return;
-    if (refreshedSpacesRef.current.has(spaceId)) return;
-    refreshedSpacesRef.current.add(spaceId);
-    refreshOpenBranches();
-  }, [isDataLoaded, spaceId, refreshOpenBranches]);
+  }, [socket, setData]);
 
   const handleToggle = useCallback(
     async (id: string, isOpen: boolean) => {
@@ -354,17 +333,12 @@ const SpaceTree = forwardRef<SpaceTreeApi, SpaceTreeProps>(function SpaceTree(
 
   return (
     <div className={classes.treeContainer}>
-      {/* "No pages yet" only after the SERVER confirmed the space is empty —
-          never while just the localStorage cache is empty. */}
       {isDataLoaded && filteredData.length === 0 && (
         <Text size="xs" c="dimmed" py="xs" px="sm">
           {t("No pages yet")}
         </Text>
       )}
-      {/* Cache-first paint: render as soon as ANY data exists (synchronous
-          localStorage hydration) instead of waiting for the server round-trip;
-          the background merge/refresh reconciles it afterwards. */}
-      {filteredData.length > 0 && (
+      {isDataLoaded && filteredData.length > 0 && (
         <DocTree<SpaceTreeNode>
           data={filteredData}
           openIds={openIds}

apps/client/src/lib/api-client.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosInstance } from "axios";
 import APP_ROUTE from "@/lib/app-route.ts";
 import { isCloud } from "@/lib/config.ts";
-import { clearPersistedTreeCaches } from "@/features/page/tree/atoms/tree-data-atom";
 
 const api: AxiosInstance = axios.create({
   baseURL: "/api",
@@ -72,12 +71,6 @@ function redirectToLogin() {
     "/invites",
   ];
   if (!exemptPaths.some((path) => window.location.pathname.startsWith(path))) {
-    // Forced logout (401 / expired session) must purge the persisted sidebar
-    // tree caches too: they contain page titles, and on a shared machine most
-    // sessions end via cookie expiry — not the logout button — so this is the
-    // only cleanup that runs on that path. It also disables further cache
-    // persistence until the full page load below.
-    clearPersistedTreeCaches();
     const redirectTo = window.location.pathname;
     if (redirectTo === APP_ROUTE.HOME) {
       window.location.href = APP_ROUTE.AUTH.LOGIN;