feat: persist debug-and-preview panel width in localstorage (#21434)

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -51,8 +51,10 @@ const DebugAndPreview = () => {
 
   const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
   const nodePanelWidth = useStore(s => s.nodePanelWidth)
-  const [panelWidth, setPanelWidth] = useState(400)
+  const panelWidth = useStore(s => s.previewPanelWidth)
+  const setPanelWidth = useStore(s => s.setPreviewPanelWidth)
   const handleResize = useCallback((width: number) => {
+    localStorage.setItem('debug-and-preview-panel-width', `${width}`)
     setPanelWidth(width)
   }, [setPanelWidth])
   const maxPanelWidth = useMemo(() => {

web/app/components/workflow/store/workflow/layout-slice.ts

@@ -10,6 +10,8 @@ export type LayoutSliceShape = {
   setRightPanelWidth: (width: number) => void
   nodePanelWidth: number
   setNodePanelWidth: (width: number) => void
+  previewPanelWidth: number
+  setPreviewPanelWidth: (width: number) => void
   otherPanelWidth: number
   setOtherPanelWidth: (width: number) => void
   bottomPanelWidth: number // min-width = 400px; default-width = auto || 480px;
@@ -31,6 +33,8 @@ export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
   setRightPanelWidth: width => set(() => ({ rightPanelWidth: width })),
   nodePanelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 400,
   setNodePanelWidth: width => set(() => ({ nodePanelWidth: width })),
+  previewPanelWidth: localStorage.getItem('debug-and-preview-panel-width') ? Number.parseFloat(localStorage.getItem('debug-and-preview-panel-width')!) : 400,
+  setPreviewPanelWidth: width => set(() => ({ previewPanelWidth: width })),
   otherPanelWidth: 400,
   setOtherPanelWidth: width => set(() => ({ otherPanelWidth: width })),
   bottomPanelWidth: 480,