fix(webapp): serialize preference writes and improve favorite defaults

New favorites now land at the top of the Favorites section, and
favoriting a detail page whose title is generic uses the short id from
the URL (e.g. "Run: 05hrqq9n", matching the id shown in the runs
table). The star tooltip previews that label before you save.

Fix sidebar customizations reappearing after Reset + Confirm: every
preference writer is a read-modify-write over one JSON column, and a
concurrent write (a debounced collapse or width save, a favorite
toggle, a dashboard reorder) could land after the clear and write the
old customization back from its stale read. All preference writes now
re-read the row under a lock inside a transaction, so concurrent
writers serialize instead of clobbering each other.

Author: samejr

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

@@ -32,9 +32,9 @@ export function FavoritePageButton({ pageTitle }: { pageTitle?: string }) {
   const url = location.pathname + stripFavoriteSearchParam(location.search);
   const existing = favorites.find((favorite) => favorite.url === url);
   const isFavorited = existing !== undefined;
-  // A renamed favorite keeps its custom name in the tooltip
-  const pageName =
-    existing?.label ?? (pageTitle?.trim() || resolvePageMeta(location.pathname).name);
+  // The tooltip names the favorite: its custom name once saved, else the label saving would use
+  // (which includes detail-page ids, e.g. "Run: 05hrqq9n")
+  const pageName = existing?.label ?? buildFavoriteLabel(location.pathname, pageTitle);
 
   const toggle = () => {
     if (existing) {

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

@@ -238,19 +238,41 @@ export function resolvePageMeta(pathname: string): PageMeta {
 
 const MAX_LABEL_LENGTH = 50;
 
+/**
+ * Short id for a detail page whose last URL segment is a friendly id ("run_cmryyza…05hrqq9n").
+ * Uses the same 8-character tail the dashboard tables display, so the label matches what the
+ * user sees elsewhere.
+ */
+function detailIdFromPath(pathname: string): string | undefined {
+  const segments = pathname.split("/").filter(Boolean);
+  const last = segments[segments.length - 1];
+  if (last && /^(run|batch|session|deployment|schedule|waitpoint)_[a-z0-9]{8,}$/i.test(last)) {
+    return last.slice(-8);
+  }
+  return undefined;
+}
+
 /**
  * Compose the default side menu label for a favorited page. List pages keep their nav name
- * ("Queues"); detail pages get an identifying prefix ("Queue: email-queue"). Users can rename.
+ * ("Queues"); detail pages get an identifying prefix ("Queue: email-queue", or the short id for
+ * friendly-id pages: "Run: 05hrqq9n"). Users can rename.
  */
 export function buildFavoriteLabel(pathname: string, pageTitle: string | undefined): string {
   const meta = resolvePageMeta(pathname);
   const title = pageTitle?.trim();
+  const prefix = meta.singular ?? meta.name;
+
+  // Generic titles ("Runs", "Run") identify nothing on a detail page; prefer the short id
+  const isGenericTitle =
+    !title ||
+    title.toLowerCase() === meta.name.toLowerCase() ||
+    title.toLowerCase() === prefix.toLowerCase();
 
-  if (!title || title.toLowerCase() === meta.name.toLowerCase()) {
-    return meta.name;
+  if (isGenericTitle) {
+    const detailId = detailIdFromPath(pathname);
+    return detailId ? `${prefix}: ${detailId}` : meta.name;
   }
 
-  const prefix = meta.singular ?? meta.name;
   const label = title.toLowerCase().startsWith(prefix.toLowerCase())
     ? title
     : `${prefix}: ${title}`;
@@ -281,9 +303,10 @@ export function useFavorites(): FavoritePage[] {
         const icon = fetcher.formData.get("icon");
         if (typeof url !== "string" || typeof label !== "string") break;
         if (!favorites.some((f) => f.url === url)) {
+          // Newest favorites go to the top of the section (matches addFavorite server-side)
           favorites = [
-            ...favorites,
             { id, url, label, icon: typeof icon === "string" ? icon : undefined },
+            ...favorites,
           ];
         }
         break;