Allow users to interact with the Instance drawer/FlowFuse expert in the immersive experience without it overlapping one another.

[dimitrieh]

Parent Deliverable: FlowFuse/product#48 — Expert Discovery and Default Enablement

Description

Refactor the immersive editor to provide a more integrated Node-RED experience within FlowFuse, building on the PoC in PR #6585.

The current immersive editor has a floating drawer that always overlays the Node-RED canvas, creating a poor UX when interacting with FlowFuse features (Expert, instance menus, snapshots) while editing flows. This issue covers adopting the PoC approach and extending it with additional capabilities.

PoC Reference

@cstns developed a proof-of-concept in PR #6585 (poc/immersive branch) that refactors how the immersive editor is embedded. Key benefits:

• More integrated Node-RED immersive editor experience
• Better continuity from app to editor with less context switching
• Enables drawer pinning (not possible with current iframe overlay approach — see PR #6318 comment)
• No context switching when dealing with FF Expert or instance menus

Requirements

Core (from PoC)

• Adopt PoC approach: refactor immersive editor embedding per PR POC: immersive editor refactor #6585
• Pinnable drawer — drawer becomes part of the layout rather than floating overlay, resizing the Node-RED iframe accordingly

New Capabilities

• Full screen mode — button to remove the FlowFuse topbar entirely for maximum canvas space
• Switchable drawer side — drawer opens on the right by default, but users can switch it to the left; preference remembered per user via localStorage
• Open-by-default behavior — drawer opens by default on first visit; once closed, stays closed (see FF Expert: Open by default with close persistence #6818 for the localStorage persistence pattern)

Design Considerations

• Left-to-right information flow should be maintained (raised by @hardillb) — default drawer position on the right preserves this
• Allowing the user to switch sides accommodates different preferences while defaulting to the correct flow

Related Issues & PRs

• PR POC: immersive editor refactor #6585 — PoC: immersive editor refactor (draft, to be adopted)
• Pre-existing bug: Interaction problems with snapshots and other actions that summon new contexts in the immersive editor drawer #6659 — Snapshot interaction bugs in immersive editor (adopting the PoC approach resolves this automatically by enabling inline rendering)
• Embed remote instance view [immersive editor] #6599 — Embed remote instance view in immersive editor
• FF Expert: Open by default with close persistence #6818 — FF Expert open-by-default with localStorage persistence (shared pattern for drawer state)
• Consider summoning each drawer tab directly from icons on left side #6268 — Consider summoning drawer tabs directly from icons on left side

Estimate

~2 sprints (per @cstns)

Context

Slack discussion: https://flowfuse.slack.com/archives/C09QS57R8AD/p1772806611679389

[dimitrieh]

@gstout52 this is still a strong recommendation for both FlowFuse env and in immersive editor

[dimitrieh]

This is a good fit for sprint 4 if we release #6598 in sprint 3. Adding it tentatively to 2.27

@cstns can you add your PoC PR to this issue?

---

This should be an indicator for a PoC opportunity :)

cc: @allthedoll @knolleary