Sync sidebar organization, ordering, and navigation preferences through the server

Add a synced-preference atom that holds each UI preference in memory,
hydrates from the server, and writes through a per-key queue with
revision checks: queued edits compose as operations evaluated against
the server value at the submitted revision, functional updates re-apply
on conflict, cache updates stay revision-monotonic, and the atom
reconciles to the cache when its queue drains. The sidebar waits for
the preferences query alongside the project list instead of painting a
default layout first. A one-shot migration uploads the value found in
the old browser storage once when the server has none, then deletes
that copy. Convert the organization mode, chronological sort, three
section orders, navigation entry order and visibility, and both
provider pickers, and stop persisting normalized orders on mount.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Author: SawyerHood

apps/app/src/App.tsx

@@ -13,6 +13,7 @@ import { RouteNavigationProvider } from "./components/ui/app-route-anchor";
 import { RouteNavigationIndicator } from "./components/ui/route-navigation-indicator";
 import { AppNavigationUrlHost } from "./lib/url-open-routing";
 import { NativeShellReporter } from "./lib/native-shell";
+import { UiPreferencesSync } from "@/lib/ui-preferences/UiPreferencesSync";
 import { AppFileExternalNavigationHost } from "./components/plugin/AppFileExternalNavigationHost";
 import { useAppTheme } from "./hooks/useAppTheme";
 import { useFaviconColorSync } from "./lib/favicon-color-preference";
@@ -364,6 +365,7 @@ export function App() {
             <AppFileExternalNavigationHost>
               <HashNavigationScroll />
               <NativeShellReporter />
+              <UiPreferencesSync />
               <Routes>
                 <Route
                   path={AUTH_CALLBACK_ROUTE_PATH}

apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx

@@ -773,7 +773,10 @@ describe("PluginNavSidebarItems", () => {
     expect(screen.getByTestId("sidebar-navigation-more-row")).not.toBeNull();
 
     unmount();
-    renderSidebarItems();
+    renderSidebarItems({
+      storedOrder: store.get(pluginNavPanelOrderAtom),
+      storedVisibleKeys: store.get(pluginNavVisiblePanelKeysAtom),
+    });
     expect(panelRowNames(labels)).toEqual(["Two", "Three", "Four"]);
     expect(screen.queryByRole("button", { name: "One" })).toBeNull();
 
@@ -804,8 +807,9 @@ describe("PluginNavSidebarItems", () => {
     });
 
     expect(visibleRowKeys()).toEqual(["__bb__/new-thread", "docs/main"]);
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
-      "__bb__/new-thread",
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual(["docs/main"]);
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "tasks/main",
       "docs/main",
     ]);
   });
@@ -821,13 +825,11 @@ describe("PluginNavSidebarItems", () => {
 
     expect(visibleRowKeys()).toEqual(["__bb__/new-thread", "tasks/main"]);
     expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
-      "tasks/main",
       "__bb__/new-thread",
     ]);
     expect(store.get(pluginNavPanelOrderAtom)).toEqual([
       "__bb__/new-thread",
       "docs/main",
-      "tasks/main",
     ]);
   });
 

apps/app/src/components/plugin/PluginNavSidebarItems.tsx

@@ -275,29 +275,19 @@ function PluginNavSidebarItemList({
     [ordered, visibleKeys],
   );
 
-  useEffect(() => {
-    if (haveSameOrder(storedOrder, normalizedOrder)) return;
-    setStoredOrder(normalizedOrder);
-  }, [normalizedOrder, setStoredOrder, storedOrder]);
-
-  useEffect(() => {
-    if (
-      storedVisibleKeys === null ||
-      normalizedVisibleKeys === null ||
-      haveSameOrder(storedVisibleKeys, normalizedVisibleKeys)
-    ) {
-      return;
-    }
-    setStoredVisibleKeys(normalizedVisibleKeys);
-  }, [normalizedVisibleKeys, setStoredVisibleKeys, storedVisibleKeys]);
-
   const orderedKeys = useMemo(
     () => ordered.map(getPluginNavPanelKey),
     [ordered],
   );
 
+  const persistNormalizedOrder = useCallback(() => {
+    if (haveSameOrder(storedOrder, normalizedOrder)) return;
+    setStoredOrder(normalizedOrder);
+  }, [normalizedOrder, setStoredOrder, storedOrder]);
+
   const setPanelVisible = useCallback(
     (key: string, isVisible: boolean) => {
+      persistNormalizedOrder();
       setStoredVisibleKeys(
         togglePluginNavPanelVisibility(
           normalizedVisibleKeys ?? visibleKeys,
@@ -306,7 +296,12 @@ function PluginNavSidebarItemList({
         ),
       );
     },
-    [normalizedVisibleKeys, setStoredVisibleKeys, visibleKeys],
+    [
+      normalizedVisibleKeys,
+      persistNormalizedOrder,
+      setStoredVisibleKeys,
+      visibleKeys,
+    ],
   );
 
   const handleDragEnd = useCallback(