Persist expert state

[Steve-Mcl]

Description

Persistent pinning and open state of the FF Expert

NOTES

• first time navigating to FF, expert will be PINNED & OPEN (subsequent page openings will depend on stored state)
• upon page refresh (or close/open) - previous state will be restored from storage e.g:
  • if expert is OPEN+PINNED it will be re-opened and pinned after browser close/re-open (or refresh)
  • if expert is PINNED but CLOSED, re-opening the expert will open it in pinned state again (this also persists refresh)
  • if expert is UNPINNED + CLOSED, re-opening the expert will open it in unpinned state again (this also persists refresh)

Subtle issue: We dont have a layered tray system like Node-RED so when expert is pinned open & user opens the notifications or a snapshot, the drawer (expert) is closed and the drawer re-opened with the new content/component. That means user would need to click Expert button to re-open it after dismissing the notification tray/snapshot tray.
So... I have added workaround - it will re-open the Expert if it was previously PINNED and OPEN (at the point in time that the notifications/snapshot was drawer was opened)
IMO - It looks a bit janky - please check it out on pre-staging (i'll post a link once its built)
There may be a way to improve this (drawer component reuse) however I suspect it is quite a large refactor due to single state

• TODO: Unit tests

Persistent expert drawer state and session management:

• Added a persistent expertState object to rightDrawer in useUxDrawersStore, tracking whether the expert drawer is pinned and open, and configured it to be stored in localStorage for session persistence. [1] [2]
• Updated drawer open/close/toggle logic to save and restore expertState whenever the expert drawer is opened, closed, or pinned, ensuring consistent behavior and state across user actions and sessions. [1] [2] [3]

Drawer transition and animation improvements:

• Refined the opening and pinning animation logic in RightDrawer.vue, including improved handling for opening the expert drawer in pinned mode and preventing unnecessary animations when pinning. [1] [2] [3]
• Modified the computed class bindings for the drawer to ensure correct animation states, especially when pinning or opening.

Drawer interaction and open logic:

• Updated the expert drawer open action (openAssistantDrawer) to accept an openPinned option, allowing the drawer to open in pinned mode and controlling whether it closes on click outside. [1] [2]
• Ensured that the expert drawer automatically reopens in pinned mode after other drawers are closed, improving user experience and workflow. [1] [2]

Codebase integration:

• Integrated Vuex actions with Pinia in RightDrawer.vue for consistent state management and action dispatching. [1] [2]

Related Issue(s)

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.62%. Comparing base (b8758ac) to head (b8c70d7).
⚠️ Report is 12 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6892   +/-   ##
=======================================
  Coverage   76.62%   76.62%           
=======================================
  Files         399      399           
  Lines       20165    20165           
  Branches     4856     4856           
=======================================
  Hits        15452    15452           
  Misses       4713     4713           

Flag	Coverage Δ
backend	76.62% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.