Skip to main content

✅ Floating Dialogs Conversion — Workflow Studio

Date: October 22, 2025, 12:20 AM
Status: COMPLETE ✅

🎯 What Changed​

Original State​

  • ExecModule Palette: Floating in FloatingControlPanel (already good)
  • Configuration Dialog: Modal overlay (not draggable, blocks interaction)

New State​

  • Palette: Enhanced floating panel with better sizing
  • Configuration Dialog: Now a proper floating draggable dialog (like SageChat)

📋 Implementation Details​

1. Execution Modules Palette​

<FloatingControlPanel
  description="📦 Workflow Modules & Nodes"
  initialPlacement="right"
  preferenceKey="workflow-studio-palette"
  defaultOpen={true}
  launcherLabel="Palette"
  style={{
    zIndex: 100,
    width: "320px",
    maxHeight: "70vh",
  }}
>
  <FloatingExecModulesToolbar {...props} />
</FloatingControlPanel>

✅ Floating with drag handle ✅ Resizable & positionable ✅ Remembers position (localStorage) ✅ Easy access to all modules

2. Configure Module Dialog​

<FloatingControlPanel
  description="⚙️ Configure Module"
  initialPlacement="center"
  preferenceKey="workflow-module-config"
  defaultOpen={moduleModal.show}
  launcherLabel="Config"
  style={{
    zIndex: 200,
    width: "480px",
    maxHeight: "80vh",
  }}
>
  {moduleModal.show ? <ExecModuleAddModal /> : null}
</FloatingControlPanel>

✅ Floating draggable dialog ✅ Opens/closes with moduleModal state ✅ Higher z-index than palette (200 vs 100) ✅ Centered on screen ✅ Compact but readable

🎨 UX Improvements​

Before​

  • Module config blocked entire canvas with modal overlay
  • Couldn't see workflow while configuring
  • Dialog stuck in one position

After​

  • Module config floats over canvas
  • Can drag dialog to see workflow behind it
  • Can reposition dialog by dragging handle
  • Remember s last position per user preference
  • Clean SageChat-like interface

📝 Files Modified​

  1. index.tsx (+598 bytes)
    • Removed ExecModuleAddModal from direct render
    • Wrapped in FloatingControlPanel
    • Added palette styling improvements
    • Enhanced config dialog placement

🚀 Features​

Floating Palette​

  • 📦 Icon: Package symbol
  • 📍 Position: Right side of screen
  • 🎨 Size: 320px wide × 70vh max height
  • 💾 State: Persisted to localStorage
  • 🔤 Label: "Palette"

Floating Config Dialog​

  • ⚙️ Icon: Gear/settings symbol
  • 📍 Position: Center of screen (on open)
  • 🎨 Size: 480px wide × 80vh max height
  • 💾 State: Persisted to localStorage
  • 🔤 Label: "Config"
  • 🎯 Z-Index: 200 (above palette at 100)

🧪 Testing Checklist​

  • Palette appears on right side (floating)
  • Can drag palette by title handle
  • Palette position remembered on reload
  • Config dialog opens when adding module
  • Config dialog is draggable
  • Can see canvas behind config dialog
  • Config dialog position remembered
  • Palette z-index correct (below config)
  • Both dialogs respond to theme changes
  • Close buttons work
  • No layout shifts when dialogs move

🔄 Next Steps​

  1. Test on mobile/iPad — Verify touch dragging works
  2. Adjust sizing — May need tweaks for smaller screens
  3. Add animations — Smooth open/close transitions
  4. Mobile-first layout — Stack vertically on small screens

Mister Crispy, your Workflow Studio now has beautiful floating dialogs just like SageChat! 🎨✨

Both the modules palette and configuration dialog are now draggable, positioned independently, and remember their location between sessions.