feat(dashboards): move tile editor to a drawer with docked settings panel

.changeset/tile-editor-drawer.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+feat: Move dashboard tile creation/editing from a modal into a right-side drawer. Display Settings (including the heatmap variant) now dock as a full-height side panel next to the editor/preview instead of stacking a second drawer, so the tile stays visible while its display options are changed and a single Esc press just closes the panel rather than closing everything at once.

packages/app/src/DBDashboardPage.tsx

@@ -63,11 +63,11 @@ import {
   Box,
   Breadcrumbs,
   Button,
+  Drawer,
   Flex,
   Group,
   Indicator,
   Menu,
-  Modal,
   Paper,
   Popover,
   Portal,
@@ -1418,7 +1418,7 @@ const Tile = forwardRef(
   },
 );
 
-const EditTileModal = ({
+const EditTileDrawer = ({
   dashboardId,
   chart,
   onClose,
@@ -1434,9 +1434,12 @@ const EditTileModal = ({
   onSave: (chart: Tile) => void;
 }) => {
   const contextZIndex = useZIndex();
-  const modalZIndex = contextZIndex + 10;
+  const drawerZIndex = contextZIndex + 10;
   const confirm = useConfirm();
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  // While a settings side panel is docked, hand Esc over to the panel so it
+  // closes only the panel instead of dismissing the whole tile editor.
+  const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
 
   // Reset dirty state only when a *different* tile is opened, not on every
   // chart-object reference change (onSubmit recreates the chart object with
@@ -1469,18 +1472,23 @@ const EditTileModal = ({
   }, [confirm, isSaving, hasUnsavedChanges, onClose]);
 
   return (
-    <Modal
+    <Drawer
       opened={chart != null}
       onClose={handleClose}
+      closeOnEscape={!settingsPanelOpen}
       withCloseButton={false}
-      centered
+      position="right"
       size="90%"
-      padding="xs"
-      zIndex={modalZIndex}
+      padding={0}
+      zIndex={drawerZIndex}
+      // Full-height flex body: the editor column scrolls on its own and the
+      // Display Settings panel docks full-height beside it, so neither the body
+      // nor the panel shows a stray horizontal scrollbar.
+      styles={{ body: { height: '100%', padding: 0, overflow: 'hidden' } }}
     >
       {chart != null && (
-        <ZIndexContext.Provider value={modalZIndex + 10}>
-          {/* Isolate chart cross-syncing to this edit modal: the preview chart
+        <ZIndexContext.Provider value={drawerZIndex + 10}>
+          {/* Isolate chart cross-syncing to this edit drawer: the preview chart
               must not drive shadow tooltips on the dashboard tiles behind it. */}
           <IsolatedChartSyncProvider>
             <EditTimeChartForm
@@ -1496,13 +1504,14 @@ const EditTileModal = ({
               }}
               onClose={handleClose}
               onDirtyChange={setHasUnsavedChanges}
+              onSettingsPanelOpenChange={setSettingsPanelOpen}
               isDashboardForm
               autoRun
             />
           </IsolatedChartSyncProvider>
         </ZIndexContext.Provider>
       )}
-    </Modal>
+    </Drawer>
   );
 };
 
@@ -2918,7 +2927,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       </Head>
       {!isKioskMode && <OnboardingModal />}
       {!isKioskMode && (
-        <EditTileModal
+        <EditTileDrawer
           dashboardId={dashboardId}
           chart={editedTile}
           onClose={() => {