Reorderable custom dashboards

Author: samejr

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

@@ -25,8 +25,9 @@ import {
 import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, Link, useFetcher, useNavigation } from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
-import { LineChartIcon } from "lucide-react";
-import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { GripVerticalIcon, LineChartIcon } from "lucide-react";
+import { type Ref, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ReactGridLayout, { useContainerWidth, type Layout } from "react-grid-layout";
 import simplur from "simplur";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
 import { DropdownIcon } from "~/assets/icons/DropdownIcon";
@@ -182,6 +183,75 @@ export function SideMenu({
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
   const customDashboards = useCustomDashboards();
+  const dashboardOrderFetcher = useFetcher();
+
+  // Dashboard reorder state
+  const [dashboardOrder, setDashboardOrder] = useState<string[]>(
+    () =>
+      user.dashboardPreferences.sideMenu?.customDashboardOrder?.[organization.id] ??
+      customDashboards.map((d) => d.friendlyId)
+  );
+
+  // Sync order when organization changes (component may not remount)
+  useEffect(() => {
+    setDashboardOrder(
+      user.dashboardPreferences.sideMenu?.customDashboardOrder?.[organization.id] ??
+        customDashboards.map((d) => d.friendlyId)
+    );
+  }, [organization.id]);
+
+  // Sort dashboards by stored order, new dashboards go to end
+  const orderedDashboards = useMemo(() => {
+    const orderMap = new Map(dashboardOrder.map((id, i) => [id, i]));
+    return [...customDashboards].sort((a, b) => {
+      const aIdx = orderMap.get(a.friendlyId) ?? Infinity;
+      const bIdx = orderMap.get(b.friendlyId) ?? Infinity;
+      return aIdx - bIdx;
+    });
+  }, [customDashboards, dashboardOrder]);
+
+  // Layout for ReactGridLayout (1-column vertical list, each item h=1 row)
+  const dashboardLayout = useMemo(
+    () =>
+      orderedDashboards.map((d, i) => ({
+        i: d.friendlyId,
+        x: 0,
+        y: i,
+        w: 1,
+        h: 1,
+      })),
+    [orderedDashboards]
+  );
+
+  // Width measurement for ReactGridLayout
+  const {
+    width: gridWidth,
+    containerRef: gridContainerRef,
+    mounted: gridMounted,
+  } = useContainerWidth({ initialWidth: 216 });
+
+  const canReorder = orderedDashboards.length >= 2 && !isCollapsed;
+
+  // Handle drag stop - extract new order from layout y-positions
+  const handleDashboardDragStop = useCallback(
+    (layout: Layout) => {
+      const sorted = [...layout].sort((a, b) => a.y - b.y);
+      const newOrder = sorted.map((item) => item.i);
+      if (JSON.stringify(newOrder) === JSON.stringify(dashboardOrder)) return;
+      setDashboardOrder(newOrder);
+      // Persist immediately
+      if (!user.isImpersonating) {
+        const formData = new FormData();
+        formData.append("organizationId", organization.id);
+        formData.append("customDashboardOrder", JSON.stringify(newOrder));
+        dashboardOrderFetcher.submit(formData, {
+          method: "POST",
+          action: "/resources/preferences/sidemenu",
+        });
+      }
+    },
+    [dashboardOrder, organization.id, user.isImpersonating, dashboardOrderFetcher]
+  );
 
   const persistSideMenuPreferences = useCallback(
     (data: {
@@ -511,26 +581,82 @@ export function SideMenu({
                     />
                   }
                 />
-                {customDashboards.map((dashboard, index) => {
-                  const isLast = index === customDashboards.length - 1;
-                  return (
-                    <SideMenuItem
-                      key={dashboard.friendlyId}
-                      name={dashboard.title}
-                      icon={
-                        isCollapsed
-                          ? LineChartIcon
-                          : isLast
-                          ? TreeConnectorEnd
-                          : TreeConnectorBranch
-                      }
-                      activeIconColor={isCollapsed ? "text-text-dimmed" : "text-customDashboards"}
-                      inactiveIconColor={isCollapsed ? "text-text-dimmed" : "text-customDashboards"}
-                      to={v3CustomDashboardPath(organization, project, environment, dashboard)}
-                      isCollapsed={isCollapsed}
-                    />
-                  );
-                })}
+                <div ref={gridContainerRef as Ref<HTMLDivElement>}>
+                  {canReorder && gridMounted ? (
+                    <ReactGridLayout
+                      layout={dashboardLayout}
+                      width={gridWidth}
+                      gridConfig={{
+                        cols: 1,
+                        rowHeight: 32,
+                        margin: [0, 0] as const,
+                        containerPadding: [0, 0] as const,
+                      }}
+                      resizeConfig={{ enabled: false }}
+                      dragConfig={{ enabled: true, handle: ".sidebar-drag-handle" }}
+                      onDragStop={handleDashboardDragStop}
+                      className="sidebar-reorder-grid"
+                      autoSize
+                    >
+                      {orderedDashboards.map((dashboard, index) => {
+                        const isLast = index === orderedDashboards.length - 1;
+                        return (
+                          <div key={dashboard.friendlyId}>
+                            <SideMenuItem
+                              name={dashboard.title}
+                              icon={
+                                isCollapsed
+                                  ? LineChartIcon
+                                  : isLast
+                                  ? TreeConnectorEnd
+                                  : TreeConnectorBranch
+                              }
+                              activeIconColor={isCollapsed ? "text-customDashboards" : undefined}
+                              inactiveIconColor={isCollapsed ? "text-customDashboards" : undefined}
+                              to={v3CustomDashboardPath(
+                                organization,
+                                project,
+                                environment,
+                                dashboard
+                              )}
+                              isCollapsed={isCollapsed}
+                              action={
+                                <div className="sidebar-drag-handle flex h-full w-full cursor-grab items-center justify-center rounded text-text-dimmed opacity-0 transition group-hover/menuitem:opacity-100 hover:text-text-bright active:cursor-grabbing">
+                                  <GripVerticalIcon className="size-3.5" />
+                                </div>
+                              }
+                            />
+                          </div>
+                        );
+                      })}
+                    </ReactGridLayout>
+                  ) : (
+                    orderedDashboards.map((dashboard, index) => {
+                      const isLast = index === orderedDashboards.length - 1;
+                      return (
+                        <SideMenuItem
+                          key={dashboard.friendlyId}
+                          name={dashboard.title}
+                          icon={
+                            isCollapsed
+                              ? LineChartIcon
+                              : isLast
+                              ? TreeConnectorEnd
+                              : TreeConnectorBranch
+                          }
+                          activeIconColor={
+                            isCollapsed ? "text-customDashboards" : "text-charcoal-700"
+                          }
+                          inactiveIconColor={
+                            isCollapsed ? "text-customDashboards" : "text-charcoal-700"
+                          }
+                          to={v3CustomDashboardPath(organization, project, environment, dashboard)}
+                          isCollapsed={isCollapsed}
+                        />
+                      );
+                    })
+                  )}
+                </div>
               </SideMenuSection>
             )}
 
@@ -1236,7 +1362,11 @@ function AnimatedChevron({
 // Lines extend to y=-6 and y=26 to fill the full 32px row height (6px gap above/below the 20px icon).
 function TreeConnectorBranch({ className }: { className?: string }) {
   return (
-    <svg className={cn("overflow-visible", className)} viewBox="0 0 20 20" fill="none">
+    <svg
+      className={cn("overflow-visible", className, "text-charcoal-600")}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
       <line x1="10" y1="-6" x2="10" y2="26" stroke="currentColor" strokeWidth="1" />
       <line x1="10" y1="10" x2="20" y2="10" stroke="currentColor" strokeWidth="1" />
     </svg>
@@ -1245,7 +1375,11 @@ function TreeConnectorBranch({ className }: { className?: string }) {
 
 function TreeConnectorEnd({ className }: { className?: string }) {
   return (
-    <svg className={cn("overflow-visible", className)} viewBox="0 0 20 20" fill="none">
+    <svg
+      className={cn("overflow-visible", className, "text-charcoal-600")}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
       <line x1="10" y1="-6" x2="10" y2="10" stroke="currentColor" strokeWidth="1" />
       <line x1="10" y1="10" x2="20" y2="10" stroke="currentColor" strokeWidth="1" />
     </svg>

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

@@ -4,7 +4,10 @@ import {
   SideMenuSectionIdSchema,
   type SideMenuSectionId,
 } from "~/components/navigation/sideMenuTypes";
-import { updateSideMenuPreferences } from "~/services/dashboardPreferences.server";
+import {
+  updateCustomDashboardOrder,
+  updateSideMenuPreferences,
+} from "~/services/dashboardPreferences.server";
 import { requireUser } from "~/services/session.server";
 
 // Transforms form data string "true"/"false" to boolean, or undefined if not present
@@ -17,6 +20,9 @@ const RequestSchema = z.object({
   isCollapsed: booleanFromFormData,
   sectionId: SideMenuSectionIdSchema.optional(),
   sectionCollapsed: booleanFromFormData,
+  // Dashboard reorder fields
+  organizationId: z.string().optional(),
+  customDashboardOrder: z.string().optional(), // JSON-encoded string[]
 });
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -30,10 +36,26 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ success: false, error: "Invalid request data" }, { status: 400 });
   }
 
+  // Handle dashboard order update
+  if (result.data.organizationId && result.data.customDashboardOrder) {
+    const orderResult = z.array(z.string()).safeParse(JSON.parse(result.data.customDashboardOrder));
+    if (orderResult.success) {
+      await updateCustomDashboardOrder({
+        user,
+        organizationId: result.data.organizationId,
+        order: orderResult.data,
+      });
+    }
+    return json({ success: true });
+  }
+
   // Build sectionCollapsed parameter if both sectionId and sectionCollapsed are provided
   const sectionCollapsed =
     result.data.sectionId !== undefined && result.data.sectionCollapsed !== undefined
-      ? { sectionId: result.data.sectionId as SideMenuSectionId, collapsed: result.data.sectionCollapsed }
+      ? {
+          sectionId: result.data.sectionId as SideMenuSectionId,
+          collapsed: result.data.sectionCollapsed,
+        }
       : undefined;
 
   await updateSideMenuPreferences({

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

@@ -7,11 +7,14 @@ const SideMenuPreferences = z.object({
   isCollapsed: z.boolean().default(false),
   // Map for section collapsed states - keys are section identifiers
   collapsedSections: z.record(z.string(), z.boolean()).optional(),
+  // Map of organization ID -> ordered array of dashboard friendlyIds
+  customDashboardOrder: z.record(z.string(), z.array(z.string())).optional(),
 });
 
 export type SideMenuPreferences = z.infer<typeof SideMenuPreferences>;
 
-export { type SideMenuSectionId } from "~/components/navigation/sideMenuTypes";
+import { type SideMenuSectionId } from "~/components/navigation/sideMenuTypes";
+export type { SideMenuSectionId };
 
 const DashboardPreferences = z.object({
   version: z.literal("1"),
@@ -167,3 +170,41 @@ export async function updateSideMenuPreferences({
     },
   });
 }
+
+export async function updateCustomDashboardOrder({
+  user,
+  organizationId,
+  order,
+}: {
+  user: UserFromSession;
+  organizationId: string;
+  order: string[];
+}) {
+  if (user.isImpersonating) {
+    return;
+  }
+
+  const currentSideMenu = SideMenuPreferences.parse(user.dashboardPreferences.sideMenu ?? {});
+
+  const updatedSideMenu = SideMenuPreferences.parse({
+    ...currentSideMenu,
+    customDashboardOrder: {
+      ...currentSideMenu.customDashboardOrder,
+      [organizationId]: order,
+    },
+  });
+
+  const updatedPreferences: DashboardPreferences = {
+    ...user.dashboardPreferences,
+    sideMenu: updatedSideMenu,
+  };
+
+  return prisma.user.update({
+    where: {
+      id: user.id,
+    },
+    data: {
+      dashboardPreferences: updatedPreferences,
+    },
+  });
+}

apps/webapp/app/tailwind.css

@@ -9,6 +9,13 @@
   background: rgb(99 102 241) !important; /* indigo-500 */
 }
 
+/* Sidebar reorder grid: subtle placeholder */
+.sidebar-reorder-grid .react-grid-item.react-grid-placeholder {
+  background: rgb(39 42 46) !important; /* charcoal-700 */
+  border-radius: 0.25rem;
+  opacity: 1 !important;
+}
+
 /* Override resize handle icon to white */
 .react-resizable-handle {
   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiNmZmZmZmYiLz48L2c+PC9zdmc+') !important;

apps/webapp/tailwind.config.js

@@ -161,7 +161,7 @@ const schedules = colors.yellow[500];
 const queues = colors.purple[500];
 const query = colors.blue[500];
 const metrics = colors.green[500];
-const customDashboards = charcoal[500];
+const customDashboards = charcoal[400];
 const deployments = colors.green[500];
 const concurrency = colors.amber[500];
 const limits = colors.purple[500];