fix(webapp): surface customize sidebar save failures instead of closing silently

A confirmed customization could silently vanish: the modal closed the
moment Confirm was clicked, so a save that failed or hung (dev server
hiccups, transaction timeouts) looked identical to a successful one,
and a thrown preferences write escalated to the app error boundary.
Confirm now spins until the save response and the refreshed side menu
data land, the dialog stays open with an inline error on failure, the
preference routes report failures as responses instead of throwing,
and the preferences transaction retries retriable Prisma errors.

Author: samejr

apps/webapp/app/components/navigation/CustomizeSidebarDialog.tsx

@@ -113,13 +113,21 @@ export function CustomizeSidebarDialog({
   sections,
   prefs,
   onConfirm,
-  onClose,
+  isConfirming,
+  confirmError,
 }: {
   sections: CustomizeSidebarSection[];
   prefs: SavedPreferences | undefined;
-  /** Owned by the parent: closing this dialog unmounts it, so it can't run its own fetcher. */
+  /**
+   * Owned by the parent: closing this dialog unmounts it, so it can't run its own fetcher. The
+   * parent submits the payload and closes the dialog once the save lands (or reports back via
+   * `confirmError`), so a failed save never silently reads as a successful one.
+   */
   onConfirm: (payload: SidebarCustomizationPayload) => void;
-  onClose: () => void;
+  /** True from Confirm until the save (and the refreshed side menu data) lands. */
+  isConfirming: boolean;
+  /** Save failure to surface next to Confirm; the dialog stays open for a retry. */
+  confirmError?: string;
 }) {
   const [state, setState] = useState<DialogState>(() => buildState(sections, prefs));
 
@@ -243,7 +251,6 @@ export function CustomizeSidebarDialog({
     };
 
     onConfirm(payload);
-    onClose();
   };
 
   return (
@@ -300,9 +307,19 @@ export function CustomizeSidebarDialog({
             Reset
           </Button>
         </div>
-        <Button variant="primary/medium" onClick={confirm} disabled={hasBlankLabels}>
-          Confirm
-        </Button>
+        <div className="flex min-w-0 items-center gap-3">
+          {confirmError && !isConfirming && (
+            <FormError className="truncate">{confirmError}</FormError>
+          )}
+          <Button
+            variant="primary/medium"
+            onClick={confirm}
+            disabled={hasBlankLabels}
+            isLoading={isConfirming}
+          >
+            Confirm
+          </Button>
+        </div>
       </DialogFooter>
     </DialogContent>
   );

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -4,7 +4,7 @@ import {
   ExclamationTriangleIcon,
 } from "@heroicons/react/24/outline";
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
-import { useFetcher, useNavigation, useSubmit } from "@remix-run/react";
+import { useFetcher, useNavigation, useRevalidator, useSubmit } from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
 import {
   type CSSProperties,
@@ -395,15 +395,51 @@ export function SideMenu({
   const isV3Project = project.engine === "V1";
   const favorites = useFavorites();
   const [isCustomizeOpen, setCustomizeOpen] = useState(false);
-  // Lives here (not in the dialog): confirming closes/unmounts the dialog, which would abort a
-  // fetcher owned by it before the request fires.
-  const customizationFetcher = useFetcher();
+  // Lives here (not in the dialog): the dialog unmounts on close, which would abort a fetcher it
+  // owned mid-request.
+  const customizationFetcher = useFetcher<{ success: boolean }>();
+  const revalidator = useRevalidator();
+  // Confirm lifecycle: the dialog stays open (Confirm spinning) until the save response AND the
+  // revalidated preferences land, so the side menu is already updated the moment it closes — and
+  // a failed or hung save shows as such instead of silently reading as success.
+  const [isCustomizeConfirmPending, setCustomizeConfirmPending] = useState(false);
+  const [customizeError, setCustomizeError] = useState<string>();
+  // The fetcher's data survives across confirms, so only settle once THIS submission has been
+  // seen in flight — otherwise a reopened dialog could consume the previous confirm's response.
+  const customizeSubmitSeenRef = useRef(false);
   const submitSidebarCustomization = (payload: SidebarCustomizationPayload) => {
+    setCustomizeError(undefined);
+    setCustomizeConfirmPending(true);
+    customizeSubmitSeenRef.current = false;
     customizationFetcher.submit(
       { customization: JSON.stringify(payload) },
       { method: "POST", action: "/resources/preferences/sidemenu" }
     );
   };
+  useEffect(() => {
+    if (!isCustomizeConfirmPending) return;
+    if (customizationFetcher.state !== "idle") {
+      customizeSubmitSeenRef.current = true;
+      return;
+    }
+    if (!customizeSubmitSeenRef.current) return; // submit hasn't been picked up yet
+    const data = customizationFetcher.data;
+    if (!data) return;
+    if (data.success) {
+      // Wait out the post-save revalidation so the menu behind the dialog reflects the changes
+      if (revalidator.state !== "idle") return;
+      setCustomizeConfirmPending(false);
+      setCustomizeOpen(false);
+    } else {
+      setCustomizeConfirmPending(false);
+      setCustomizeError("Couldn't save your changes. Please try again.");
+    }
+  }, [
+    isCustomizeConfirmPending,
+    customizationFetcher.state,
+    customizationFetcher.data,
+    revalidator.state,
+  ]);
   // Same ownership rule: removing a favorite optimistically unmounts its menu item (and, for the
   // last favorite, the whole section), which would abort an item-owned fetcher mid-request.
   // Separate fetchers per mutation: fetchers are single-flight, so a shared one would cancel an
@@ -1221,7 +1257,18 @@ export function SideMenu({
           </motion.div>
         </div>
       </div>
-      <Dialog open={isCustomizeOpen} onOpenChange={setCustomizeOpen}>
+      <Dialog
+        open={isCustomizeOpen}
+        onOpenChange={(open) => {
+          setCustomizeOpen(open);
+          if (!open) {
+            // Cancel/ESC during a pending confirm abandons the wait; a still-running save is
+            // harmless (the menu revalidates whenever it lands)
+            setCustomizeConfirmPending(false);
+            setCustomizeError(undefined);
+          }
+        }}
+      >
         {/* Mounted only while open so the modal state re-seeds from current preferences each time */}
         {isCustomizeOpen && (
           <CustomizeSidebarDialog
@@ -1232,7 +1279,8 @@ export function SideMenu({
               sectionItemOrder: sideMenuPrefs?.sectionItemOrder,
             }}
             onConfirm={submitSidebarCustomization}
-            onClose={() => setCustomizeOpen(false)}
+            isConfirming={isCustomizeConfirmPending}
+            confirmError={customizeError}
           />
         )}
       </Dialog>

apps/webapp/app/routes/resources.preferences.favorites.tsx

@@ -5,6 +5,7 @@ import {
   removeFavorite,
   renameFavorite,
 } from "~/services/dashboardPreferences.server";
+import { logger } from "~/services/logger.server";
 import { requireUser } from "~/services/session.server";
 
 const FavoriteLabel = z
@@ -52,20 +53,27 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ success: false, error: "Invalid request data" }, { status: 400 });
   }
 
-  switch (result.data.intent) {
-    case "add": {
-      const { id, url, label, icon } = result.data;
-      await addFavorite({ user, favorite: { id, url, label, icon } });
-      break;
-    }
-    case "remove": {
-      await removeFavorite({ user, id: result.data.id });
-      break;
-    }
-    case "rename": {
-      await renameFavorite({ user, id: result.data.id, label: result.data.label });
-      break;
+  // Errors come back as a response (never a throw, which would escalate a preferences write to
+  // the error boundary); the side menu's optimistic entries revert when the fetcher settles.
+  try {
+    switch (result.data.intent) {
+      case "add": {
+        const { id, url, label, icon } = result.data;
+        await addFavorite({ user, favorite: { id, url, label, icon } });
+        break;
+      }
+      case "remove": {
+        await removeFavorite({ user, id: result.data.id });
+        break;
+      }
+      case "rename": {
+        await renameFavorite({ user, id: result.data.id, label: result.data.label });
+        break;
+      }
     }
+  } catch (error) {
+    logger.error("Failed to update favorites", { error: String(error) });
+    return json({ success: false, error: "Failed to save preferences" }, { status: 500 });
   }
 
   return json({ success: true });

apps/webapp/app/routes/resources.preferences.sidemenu.tsx

@@ -9,6 +9,7 @@ import {
   updateSideMenuCustomization,
   updateSideMenuPreferences,
 } from "~/services/dashboardPreferences.server";
+import { logger } from "~/services/logger.server";
 import { requireUser } from "~/services/session.server";
 
 // Transforms form data string "true"/"false" to boolean, or undefined if not present
@@ -67,14 +68,25 @@ export async function action({ request }: ActionFunctionArgs) {
     }
     const { sectionOrder, hiddenItems, sectionItemOrder, favorites, removedFavoriteIds } =
       customizationResult.data;
-    await updateSideMenuCustomization({
-      user,
-      sectionOrder,
-      hiddenItems,
-      sectionItemOrder,
-      favorites,
-      removedFavoriteIds,
-    });
+    // The modal keeps its "Confirm" pending until this responds, so failures must come back as a
+    // response (never a throw, which would escalate a preferences write to the error boundary).
+    try {
+      const updated = await updateSideMenuCustomization({
+        user,
+        sectionOrder,
+        hiddenItems,
+        sectionItemOrder,
+        favorites,
+        removedFavoriteIds,
+      });
+      // undefined means nothing was written (impersonating, or the user row is gone)
+      if (!updated) {
+        return json({ success: false, error: "Failed to save preferences" }, { status: 500 });
+      }
+    } catch (error) {
+      logger.error("Failed to save sidebar customization", { error: String(error) });
+      return json({ success: false, error: "Failed to save preferences" }, { status: 500 });
+    }
     return json({ success: true });
   }
 

apps/webapp/app/services/dashboardPreferences.server.ts

@@ -93,28 +93,36 @@ async function mutateDashboardPreferences(
   userId: string,
   mutate: (current: DashboardPreferences) => DashboardPreferences | undefined
 ) {
-  return await $transaction(prisma, "mutateDashboardPreferences", async (tx) => {
-    const rows = await tx.$queryRaw<Array<{ dashboardPreferences: unknown }>>`
+  return await $transaction(
+    prisma,
+    "mutateDashboardPreferences",
+    async (tx) => {
+      const rows = await tx.$queryRaw<Array<{ dashboardPreferences: unknown }>>`
       SELECT "dashboardPreferences" FROM "User" WHERE id = ${userId} FOR UPDATE
     `;
-    if (rows.length === 0) {
-      return undefined;
-    }
+      if (rows.length === 0) {
+        return undefined;
+      }
 
-    const updated = mutate(getDashboardPreferences(rows[0].dashboardPreferences));
-    if (!updated) {
-      return undefined;
-    }
+      const updated = mutate(getDashboardPreferences(rows[0].dashboardPreferences));
+      if (!updated) {
+        return undefined;
+      }
 
-    return await tx.user.update({
-      where: {
-        id: userId,
-      },
-      data: {
-        dashboardPreferences: updated,
-      },
-    });
-  });
+      return await tx.user.update({
+        where: {
+          id: userId,
+        },
+        data: {
+          dashboardPreferences: updated,
+        },
+      });
+    },
+    // Concurrent writers queue on the row lock, so under load (several debounced writes plus a
+    // revalidation burst) a transaction can time out acquiring a connection or the lock; those
+    // codes are retriable and preference writes are idempotent.
+    { maxRetries: 3 }
+  );
 }
 
 export async function updateCurrentProjectEnvironmentId({