Feat(frontend): save splitpanes and tabs

[Guilhem-lm]

Add possibility to save splitpanes && tab layout

---

[!IMPORTANT] This pull request adds functionality to save and restore split pane layouts and tab states in the frontend, updating multiple components to support this feature.

• Behavior:
  • Adds ability to save and restore split pane layouts and tab states in FlowBuilder.svelte.
  • Introduces savedSplitPanesLayout and tabsStateFromUrl props in FlowBuilder.svelte.
  • Updates saveSessionDraft() to include split_panes_layout and tabs_state.
• Components:
  • Adds SplitPanesLayout and TabsState classes for managing layouts and tab states.
  • Updates Splitpanes.svelte and Pane.svelte to handle pane activation and resizing.
  • Modifies Tabs.svelte and TabsV2.svelte to use TabsState for managing selected tabs.
• Files:
  • Adds splitPanes directory with Pane.svelte, Splitpanes.svelte, SplitPanesLayout.svelte.ts, and types.ts.
  • Updates multiple components to use new splitPanes and tabsState logic, including FlowEditor.svelte, ModulePreviewResultViewer.svelte, and others.
• Misc:
  • Updates +page.svelte files in flows/add and flows/edit to handle new layout and tab state props.

^{This description was created by for 74795bec7198eec3b3ec7c6df1d78d892afff946. You can customize this summary. It will automatically update as commits are pushed.}

[cloudflare-workers-and-pages[bot]]

Deploying windmill with    Cloudflare Pages

Latest commit:	74795be
Status:	✅  Deploy successful!
Preview URL:	https://d582d3a8.windmill.pages.dev
Branch Preview URL:	https://feat-frontend-save-flow-buil.windmill.pages.dev

View logs

[diegoimbert]

code looks great !

[diegoimbert]

/ai review pr

[claude[bot]]

Claude finished @diegoimbert's task —— View job

---

PR Review: Feat(frontend): save splitpanes and tabs

I'll review this PR that adds split pane layout and tab state persistence functionality.

Todo List:

• [x] Read and understand the main implementation files
• [x] Analyze the new SplitPanesLayout and TabsState classes
• [x] Review component updates and integration
• [x] Check against Svelte 5 best practices
• [x] Review existing feedback from ellipsis-dev
• [x] Provide comprehensive review feedback

✅ Overall Assessment: APPROVE with Minor Suggestions

This PR implements a robust state management system for preserving split pane layouts and tab selections across sessions. The implementation follows Svelte 5 patterns excellently and integrates cleanly with the existing FlowBuilder architecture.

Strengths:

✅ Excellent Svelte 5 Usage: Proper use of $state, $derived, $effect, and private class fields
✅ Clean Architecture: Well-separated concerns with context-based state sharing
✅ Performance Considerations: 500ms debounced persistence prevents excessive localStorage writes
✅ Type Safety: Good TypeScript usage with proper interfaces
✅ Integration: Seamless integration with existing components
✅ Memory Management: Proper cleanup in onDestroy lifecycle

Issues Found:

🔴 Critical Issue (Needs Fix):

Potential Null Pointer in setActivePane (SplitPanesLayout.svelte.ts:25):

setActivePane(layoutId: string, paneIndex: number) {
    if (!this.#layout[layoutId][paneIndex].size) { // ❌ Can crash if layoutId doesn't exist

Recommended Fix:

setActivePane(layoutId: string, paneIndex: number) {
    if (!this.#layout[layoutId]?.[paneIndex]?.size) {
        return
    } else {
        this.#layout[layoutId][paneIndex].active = true
        this.#scalePanes(layoutId, paneIndex)
    }
    this.#changeCb?.()
}

🟡 Minor Suggestions:

1. Add Error Boundary for State Restoration (FlowBuilder.svelte:159-163): Consider wrapping state initialization in try-catch for malformed localStorage data.

2. Add JSDoc Comments: The complex scaling algorithms in SplitPanesLayout would benefit from documentation explaining the mathematical approach.

3. Consistent Naming (Very Minor): setTabStateContext vs setSplitPanesLayoutContext - minor inconsistency but not critical.

✅ Already Addressed Issues:

The ellipsis-dev reviews identified several issues that have been properly fixed:

• ✅ Missing id prop in TabsV2
• ✅ Uninitialized tabsState variable
• ✅ Various type safety improvements

Code Quality Assessment:

• Svelte 5 Best Practices: ⭐⭐⭐⭐⭐ Excellent
• Type Safety: ⭐⭐⭐⭐⭐ Very Good
• Performance: ⭐⭐⭐⭐⭐ Excellent (debouncing, minimal reactivity)
• Architecture: ⭐⭐⭐⭐⭐ Clean separation of concerns
• Error Handling: ⭐⭐⭐⭐ Good (one critical fix needed)

Recommendation:

APPROVE after fixing the null pointer issue in setActivePane. This is a well-designed feature that significantly improves the developer experience by preserving UI state across sessions.

The implementation demonstrates strong understanding of Svelte 5 patterns and follows the repository's architectural conventions well.

---