feat(webapp): remove favorites from the customize modal, custom action icons

Favorite rows in the customize sidebar modal gain a remove button next
to the visibility toggle; removals stage in the modal and apply on
Confirm (Cancel discards them). New custom icons replace the previous
ones for Remove, Rename, and Customize sidebar. Slack and Vercel
favorites render their brand logos at the same size as the organization
menu, and favoriting a custom dashboard uses the dashboard chart icon.

Author: samejr

apps/webapp/app/assets/icons/CrossIcon.tsx

@@ -0,0 +1,14 @@
+export function CrossIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M5 5L19 19M19 5L5 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/RenameIcon.tsx

@@ -0,0 +1,27 @@
+export function RenameIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.0799 4 7.2V16.8C4 17.9201 4 18.4802 4.21799 18.908C4.40973 19.2843 4.71569 19.5903 5.09202 19.782C5.51984 20 6.0799 20 7.2 20H16.8C17.9201 20 18.4802 20 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V13"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 14.9999V12.4142C9 12.1489 9.10536 11.8946 9.29289 11.707L17.3358 3.66416C18.1168 2.88311 19.3832 2.88311 20.1642 3.66416L20.3358 3.83573C21.1168 4.61678 21.1168 5.88311 20.3358 6.66416L12.2929 14.707C12.1054 14.8946 11.851 14.9999 11.5858 14.9999H9Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/SidebarCustomizeIcon.tsx

@@ -0,0 +1,26 @@
+export function SidebarCustomizeIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H11M11 5H19C20.1046 5 21 5.89543 21 7V17C21 18.1046 20.1046 19 19 19H11M11 5V19"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.125 8.75C6.125 9.23325 6.51675 9.625 7 9.625C7.48325 9.625 7.875 9.23325 7.875 8.75C7.875 8.26675 7.48325 7.875 7 7.875C6.51675 7.875 6.125 8.26675 6.125 8.75ZM6.125 12C6.125 12.4832 6.51675 12.875 7 12.875C7.48325 12.875 7.875 12.4832 7.875 12C7.875 11.5168 7.48325 11.125 7 11.125C6.51675 11.125 6.125 11.5168 6.125 12ZM6.125 15.25C6.125 15.7332 6.51675 16.125 7 16.125C7.48325 16.125 7.875 15.7332 7.875 15.25C7.875 14.7668 7.48325 14.375 7 14.375C6.51675 14.375 6.125 14.7668 6.125 15.25Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.75"
+      />
+    </svg>
+  );
+}

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

@@ -3,6 +3,7 @@ import { ArrowDownIcon, ArrowUpIcon, EyeIcon, EyeSlashIcon } from "@heroicons/re
 import { GripVerticalIcon } from "lucide-react";
 import { useState } from "react";
 import ReactGridLayout, { type Layout, useContainerWidth } from "react-grid-layout";
+import { CrossIcon } from "~/assets/icons/CrossIcon";
 import { cn } from "~/utils/cn";
 import { Button } from "../primitives/Buttons";
 import { DialogContent, DialogFooter, DialogHeader } from "../primitives/Dialog";
@@ -16,6 +17,7 @@ export type CustomizeSidebarItem = {
   id: string;
   name: string;
   icon: RenderIcon;
+  iconClassName?: string;
   defaultHidden?: boolean;
   /** Favorites get an inline-editable name in the modal. */
   isFavorite?: boolean;
@@ -40,6 +42,7 @@ export type SidebarCustomizationPayload = {
   hiddenItems: Record<string, boolean> | null;
   sectionItemOrder: Record<string, string[]> | null;
   favorites?: Array<{ id: string; label: string }>;
+  removedFavoriteIds?: string[];
 };
 
 type DialogState = {
@@ -50,6 +53,8 @@ type DialogState = {
   hidden: Record<string, boolean>;
   /** favorite id -> label being edited */
   labels: Record<string, string>;
+  /** favorite ids staged for removal; applied on Confirm */
+  removed: string[];
 };
 
 const FAVORITES_SECTION_ID = "favorites";
@@ -84,7 +89,13 @@ function buildState(
     }
   }
 
-  return { sectionOrder: orderedSections.map((section) => section.id), itemOrders, hidden, labels };
+  return {
+    sectionOrder: orderedSections.map((section) => section.id),
+    itemOrders,
+    hidden,
+    labels,
+    removed: [],
+  };
 }
 
 function arraysEqual(a: string[], b: string[]) {
@@ -142,13 +153,25 @@ export function CustomizeSidebarDialog({
     setState((current) => ({ ...current, labels: { ...current.labels, [itemId]: label } }));
   };
 
+  const removeFavorite = (itemId: string) => {
+    setState((current) => ({ ...current, removed: [...current.removed, itemId] }));
+  };
+
   // Reset restores the default layout (positions + visibility) but never touches favorite names
+  // or staged removals; Cancel is the way out of those
   const reset = () =>
-    setState((current) => ({ ...buildState(sections, undefined), labels: current.labels }));
+    setState((current) => ({
+      ...buildState(sections, undefined),
+      labels: current.labels,
+      removed: current.removed,
+    }));
 
   const hasBlankLabels = sections.some((section) =>
     section.items.some(
-      (item) => item.isFavorite && (state.labels[item.id] ?? item.name).trim().length === 0
+      (item) =>
+        item.isFavorite &&
+        !state.removed.includes(item.id) &&
+        (state.labels[item.id] ?? item.name).trim().length === 0
     )
   );
 
@@ -158,6 +181,7 @@ export function CustomizeSidebarDialog({
     const hiddenOverrides: Record<string, boolean> = {};
     for (const section of sections) {
       for (const item of section.items) {
+        if (state.removed.includes(item.id)) continue;
         const isHidden = state.hidden[item.id] ?? false;
         if (isHidden !== (item.defaultHidden ?? false)) {
           hiddenOverrides[item.id] = isHidden;
@@ -175,12 +199,17 @@ export function CustomizeSidebarDialog({
     }
 
     const favoritesSection = sections.find((section) => section.id === FAVORITES_SECTION_ID);
-    const favoriteOrder = state.itemOrders[FAVORITES_SECTION_ID] ?? [];
+    const favoriteOrder = (state.itemOrders[FAVORITES_SECTION_ID] ?? []).filter(
+      (id) => !state.removed.includes(id)
+    );
     const favoritesChanged =
       favoritesSection !== undefined &&
-      (!arraysEqual(favoriteOrder, defaults.itemOrders[FAVORITES_SECTION_ID] ?? []) ||
+      (state.removed.length > 0 ||
+        !arraysEqual(favoriteOrder, defaults.itemOrders[FAVORITES_SECTION_ID] ?? []) ||
         favoritesSection.items.some(
-          (item) => (state.labels[item.id] ?? item.name).trim() !== item.name
+          (item) =>
+            !state.removed.includes(item.id) &&
+            (state.labels[item.id] ?? item.name).trim() !== item.name
         ));
 
     // Parts equal to the defaults are sent as null so the stored preference is cleared, not pinned
@@ -193,6 +222,7 @@ export function CustomizeSidebarDialog({
       favorites: favoritesChanged
         ? favoriteOrder.map((id) => ({ id, label: state.labels[id] ?? "" }))
         : undefined,
+      removedFavoriteIds: state.removed.length > 0 ? state.removed : undefined,
     };
 
     onConfirm(payload);
@@ -229,12 +259,15 @@ export function CustomizeSidebarDialog({
             </div>
             <SectionItemList
               section={section}
-              order={state.itemOrders[section.id] ?? section.items.map((item) => item.id)}
+              order={(state.itemOrders[section.id] ?? section.items.map((item) => item.id)).filter(
+                (id) => !state.removed.includes(id)
+              )}
               hidden={state.hidden}
               labels={state.labels}
               onReorder={(itemIds) => reorderItems(section.id, itemIds)}
               onToggleHidden={toggleHidden}
               onLabelChange={setLabel}
+              onRemove={removeFavorite}
             />
           </div>
         ))}
@@ -289,6 +322,7 @@ function SectionItemList({
   onReorder,
   onToggleHidden,
   onLabelChange,
+  onRemove,
 }: {
   section: CustomizeSidebarSection;
   order: string[];
@@ -297,6 +331,7 @@ function SectionItemList({
   onReorder: (itemIds: string[]) => void;
   onToggleHidden: (itemId: string) => void;
   onLabelChange: (itemId: string, label: string) => void;
+  onRemove: (itemId: string) => void;
 }) {
   const { width, containerRef } = useContainerWidth({ initialWidth: 416 });
 
@@ -321,6 +356,7 @@ function SectionItemList({
       draggable={options.draggable}
       onToggleHidden={() => onToggleHidden(item.id)}
       onLabelChange={(label) => onLabelChange(item.id, label)}
+      onRemove={() => onRemove(item.id)}
     />
   );
 
@@ -359,13 +395,15 @@ function ModalItemRow({
   draggable,
   onToggleHidden,
   onLabelChange,
+  onRemove,
 }: {
   item: CustomizeSidebarItem;
   isHidden: boolean;
   label: string | undefined;
   draggable: boolean;
   onToggleHidden: () => void;
   onLabelChange: (label: string) => void;
+  onRemove: () => void;
 }) {
   return (
     <div
@@ -378,7 +416,10 @@ function ModalItemRow({
           isHidden && "opacity-50"
         )}
       >
-        <Icon icon={item.icon} className="size-5 shrink-0 text-text-dimmed" />
+        <Icon
+          icon={item.icon}
+          className={cn("size-5 shrink-0 text-text-dimmed", item.iconClassName)}
+        />
         {item.isFavorite ? (
           <>
             <Input
@@ -398,6 +439,16 @@ function ModalItemRow({
         )}
       </div>
       <div className="flex shrink-0 items-center gap-1">
+        {item.isFavorite && (
+          <button
+            type="button"
+            onClick={onRemove}
+            aria-label={`Remove ${item.name}`}
+            className="flex size-7 items-center justify-center rounded text-text-dimmed transition-colors hover:bg-error/10 hover:text-error focus-custom"
+          >
+            <CrossIcon className="size-4" />
+          </button>
+        )}
         <button
           type="button"
           onClick={onToggleHidden}

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

@@ -1,6 +1,8 @@
-import { EllipsisHorizontalIcon, PencilSquareIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
 import { useLocation, useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState } from "react";
+import { CrossIcon } from "~/assets/icons/CrossIcon";
+import { RenameIcon } from "~/assets/icons/RenameIcon";
 import { type FavoritePage } from "~/services/dashboardPreferences.server";
 import { cn } from "~/utils/cn";
 import { Icon, type RenderIcon } from "../primitives/Icon";
@@ -14,6 +16,7 @@ import {
   favoriteLinkTo,
   favoritePageActiveColor,
   favoritePageIcon,
+  favoritePageIconClassName,
   isFavoriteActive,
 } from "./favoritePages";
 import { SideMenuItem } from "./SideMenuItem";
@@ -62,6 +65,7 @@ export function FavoriteMenuItem({
       <FavoriteRenameRow
         label={favorite.label}
         icon={icon}
+        iconClassName={favoritePageIconClassName(favorite.icon)}
         onSubmit={submitRename}
         onCancel={() => setIsEditing(false)}
       />
@@ -72,6 +76,7 @@ export function FavoriteMenuItem({
     <SideMenuItem
       name={favorite.label}
       icon={icon}
+      iconClassName={favoritePageIconClassName(favorite.icon)}
       activeIconColor={favoritePageActiveColor(favorite.icon)}
       inactiveIconColor="text-text-dimmed"
       to={favoriteLinkTo(favorite)}
@@ -100,7 +105,7 @@ export function FavoriteMenuItem({
             >
               <div className="flex flex-col gap-1">
                 <PopoverMenuItem
-                  icon={PencilSquareIcon}
+                  icon={RenameIcon}
                   title="Rename"
                   leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
                   className={SIDE_MENU_POPOVER_ITEM_LABEL}
@@ -110,7 +115,7 @@ export function FavoriteMenuItem({
                   }}
                 />
                 <PopoverMenuItem
-                  icon={TrashIcon}
+                  icon={CrossIcon}
                   title="Remove"
                   danger
                   leadingIconClassName="h-5 w-5"
@@ -136,11 +141,13 @@ export function FavoriteMenuItem({
 function FavoriteRenameRow({
   label,
   icon,
+  iconClassName,
   onSubmit,
   onCancel,
 }: {
   label: string;
   icon: RenderIcon;
+  iconClassName?: string;
   onSubmit: (value: string) => void;
   onCancel: () => void;
 }) {
@@ -155,7 +162,7 @@ function FavoriteRenameRow({
 
   return (
     <div className="flex h-8 w-full items-center gap-2 rounded bg-background-hover pl-1.75 pr-2">
-      <Icon icon={icon} className="size-5 shrink-0 text-text-dimmed" />
+      <Icon icon={icon} className={cn("size-5 shrink-0 text-text-dimmed", iconClassName)} />
       <input
         ref={inputRef}
         autoFocus