fix(webapp): favorites and sidebar customization polish

Move the favorite star next to the page title, brighten it on hover,
and use a favorite's custom name in its tooltip. Favorite links now
carry a marker param so only the favorite highlights as active (with
its page's icon color), never its identical main menu item.

Fix removing a favorite from its hover menu not persisting: the
mutation fetcher now lives in the side menu, since the item unmounts
optimistically and an unmounting owner's request gets aborted.

Side menu labels fade out at the right edge when they overflow instead
of hard-clipping. Section headers keep their hover state while hovering
the header ellipsis, the More menu gains a Customize sidebar entry, and
popover menu items use the larger side menu size.

In the Customize sidebar modal: favorite name fields match the row text
size, blank names show an error and block Confirm, Reset keeps custom
names while restoring layout, the footer divider spans the full modal
width, and the scrollbar sits at the modal edge. Built-in metric
dashboards now save with their own icons and names when favorited.

Author: samejr

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

@@ -6,6 +6,7 @@ import ReactGridLayout, { type Layout, useContainerWidth } from "react-grid-layo
 import { cn } from "~/utils/cn";
 import { Button } from "../primitives/Buttons";
 import { DialogContent, DialogFooter, DialogHeader } from "../primitives/Dialog";
+import { FormError } from "../primitives/FormError";
 import { Header3 } from "../primitives/Headers";
 import { Icon, type RenderIcon } from "../primitives/Icon";
 import { Input } from "../primitives/Input";
@@ -141,7 +142,15 @@ export function CustomizeSidebarDialog({
     setState((current) => ({ ...current, labels: { ...current.labels, [itemId]: label } }));
   };
 
-  const reset = () => setState(buildState(sections, undefined));
+  // Reset restores the default layout (positions + visibility) but never touches favorite names
+  const reset = () =>
+    setState((current) => ({ ...buildState(sections, undefined), labels: current.labels }));
+
+  const hasBlankLabels = sections.some((section) =>
+    section.items.some(
+      (item) => item.isFavorite && (state.labels[item.id] ?? item.name).trim().length === 0
+    )
+  );
 
   const confirm = () => {
     const defaults = buildState(sections, undefined);
@@ -193,7 +202,9 @@ export function CustomizeSidebarDialog({
   return (
     <DialogContent className="sm:max-w-md">
       <DialogHeader>Customize sidebar</DialogHeader>
-      <div className="max-h-[60vh] space-y-6 overflow-y-auto pr-2 pt-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
+      {/* Bleeds through the container's right padding (-mr-4/pr-4) so the scrollbar sits at the
+          modal edge while the content keeps its visual inset */}
+      <div className="-mr-4 max-h-[60vh] space-y-6 overflow-y-auto pr-4 pt-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         {orderedSections.map((section, index) => (
           <div key={section.id}>
             <div className="flex items-center justify-between border-b border-grid-dimmed pb-1.5">
@@ -227,7 +238,8 @@ export function CustomizeSidebarDialog({
           </div>
         ))}
       </div>
-      <DialogFooter>
+      {/* Negative margins stretch the top divider across the modal's full width */}
+      <DialogFooter className="-mx-4 px-4">
         <div className="flex items-center gap-2">
           <DialogClose asChild>
             <Button variant="secondary/medium">Cancel</Button>
@@ -236,7 +248,7 @@ export function CustomizeSidebarDialog({
             Reset
           </Button>
         </div>
-        <Button variant="primary/medium" onClick={confirm}>
+        <Button variant="primary/medium" onClick={confirm} disabled={hasBlankLabels}>
           Confirm
         </Button>
       </DialogFooter>
@@ -367,14 +379,19 @@ function ModalItemRow({
       >
         <Icon icon={item.icon} className="size-5 shrink-0 text-text-dimmed" />
         {item.isFavorite ? (
-          <Input
-            value={label ?? item.name}
-            onChange={(e) => onLabelChange(e.target.value)}
-            variant="small"
-            maxLength={64}
-            containerClassName="max-w-60"
-            aria-label={`Rename ${item.name}`}
-          />
+          <>
+            <Input
+              value={label ?? item.name}
+              onChange={(e) => onLabelChange(e.target.value)}
+              variant="medium"
+              maxLength={64}
+              containerClassName="max-w-60"
+              aria-label={`Rename ${item.name}`}
+            />
+            {(label ?? item.name).trim().length === 0 && (
+              <FormError className="shrink-0">Name can't be blank</FormError>
+            )}
+          </>
         ) : (
           <span className="truncate text-sm text-text-bright">{item.name}</span>
         )}

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

@@ -12,6 +12,7 @@ import {
   buildFavoriteLabel,
   FAVORITES_ACTION_PATH,
   resolvePageMeta,
+  stripFavoriteSearchParam,
   useFavorites,
 } from "./favoritePages";
 
@@ -27,10 +28,13 @@ export function FavoritePageButton({ pageTitle }: { pageTitle?: string }) {
   const fetcher = useFetcher();
   const { areShortcutsEnabled } = useShortcuts();
 
-  const url = location.pathname + location.search;
+  // The favorite marker param is presentation-only, so it never counts toward URL identity
+  const url = location.pathname + stripFavoriteSearchParam(location.search);
   const existing = favorites.find((favorite) => favorite.url === url);
   const isFavorited = existing !== undefined;
-  const pageName = pageTitle?.trim() || resolvePageMeta(location.pathname).name;
+  // A renamed favorite keeps its custom name in the tooltip
+  const pageName =
+    existing?.label ?? (pageTitle?.trim() || resolvePageMeta(location.pathname).name);
 
   const toggle = () => {
     if (existing) {
@@ -119,7 +123,7 @@ export function FavoritePageButton({ pageTitle }: { pageTitle?: string }) {
               isFavorited ? (
                 <StarIconSolid className="size-4 text-yellow-500" />
               ) : (
-                <StarIconOutline className="size-4 text-text-dimmed" />
+                <StarIconOutline className="size-4 text-text-dimmed transition-colors group-hover/button:text-text-bright" />
               )
             }
           />

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

@@ -1,5 +1,5 @@
 import { EllipsisHorizontalIcon, PencilSquareIcon, TrashIcon } from "@heroicons/react/20/solid";
-import { useFetcher, useLocation, useNavigation } from "@remix-run/react";
+import { useLocation, useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState } from "react";
 import { type FavoritePage } from "~/services/dashboardPreferences.server";
 import { cn } from "~/utils/cn";
@@ -10,23 +10,35 @@ import {
   PopoverCustomTrigger,
   PopoverMenuItem,
 } from "../primitives/Popover";
-import { favoritePageIcon, FAVORITES_ACTION_PATH } from "./favoritePages";
+import {
+  favoriteLinkTo,
+  favoritePageActiveColor,
+  favoritePageIcon,
+  isFavoriteActive,
+} from "./favoritePages";
 import { SideMenuItem } from "./SideMenuItem";
+import { SIDE_MENU_POPOVER_ITEM_ICON, SIDE_MENU_POPOVER_ITEM_LABEL } from "./sideMenuTypes";
 
 /**
  * A favorited page in the side menu. Renders like a normal menu item, with an ellipsis menu
  * (Rename/Remove) that appears on hover, and an inline-editable label while renaming.
+ *
+ * Mutations are submitted by the SideMenu (not here): removing a favorite unmounts this item
+ * optimistically, and a fetcher owned by an unmounting component gets its request aborted.
  */
 export function FavoriteMenuItem({
   favorite,
   isCollapsed,
+  onRemove,
+  onRename,
 }: {
   favorite: FavoritePage;
   isCollapsed: boolean;
+  onRemove: (id: string) => void;
+  onRename: (id: string, label: string) => void;
 }) {
   const location = useLocation();
   const navigation = useNavigation();
-  const fetcher = useFetcher();
   const [isEditing, setIsEditing] = useState(false);
   const [isMenuOpen, setMenuOpen] = useState(false);
 
@@ -35,24 +47,14 @@ export function FavoriteMenuItem({
   }, [navigation.location?.pathname]);
 
   const icon = favoritePageIcon(favorite.icon);
-  const isActive = location.pathname + location.search === favorite.url;
+  const isActive = isFavoriteActive(favorite, location.pathname, location.search);
 
   const submitRename = (value: string) => {
     setIsEditing(false);
     const label = value.trim();
     // An empty or unchanged submit reverts to the saved label
     if (label.length === 0 || label === favorite.label) return;
-    fetcher.submit(
-      { intent: "rename", id: favorite.id, label },
-      { method: "POST", action: FAVORITES_ACTION_PATH }
-    );
-  };
-
-  const remove = () => {
-    fetcher.submit(
-      { intent: "remove", id: favorite.id },
-      { method: "POST", action: FAVORITES_ACTION_PATH }
-    );
+    onRename(favorite.id, label);
   };
 
   if (isEditing && !isCollapsed) {
@@ -70,9 +72,9 @@ export function FavoriteMenuItem({
     <SideMenuItem
       name={favorite.label}
       icon={icon}
-      activeIconColor="text-text-bright"
+      activeIconColor={favoritePageActiveColor(favorite.icon)}
       inactiveIconColor="text-text-dimmed"
-      to={favorite.url}
+      to={favoriteLinkTo(favorite)}
       isCollapsed={isCollapsed}
       isActive={isActive}
       data-action="favorite"
@@ -99,7 +101,8 @@ export function FavoriteMenuItem({
                 <PopoverMenuItem
                   icon={PencilSquareIcon}
                   title="Rename"
-                  leadingIconClassName="size-4 text-text-dimmed"
+                  leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
+                  className={SIDE_MENU_POPOVER_ITEM_LABEL}
                   onClick={() => {
                     setMenuOpen(false);
                     setIsEditing(true);
@@ -109,10 +112,11 @@ export function FavoriteMenuItem({
                   icon={TrashIcon}
                   title="Remove"
                   danger
-                  leadingIconClassName="size-4"
+                  leadingIconClassName="h-5 w-5"
+                  className={SIDE_MENU_POPOVER_ITEM_LABEL}
                   onClick={() => {
                     setMenuOpen(false);
-                    remove();
+                    onRemove(favorite.id);
                   }}
                 />
               </div>