Persist lil-gui folder open/closed states and improve reset icon UX in visualizer

[Copilot]

• Add saveFolderStates() and loadFolderStates() to state.js
• Import new functions in ui.js and wire up folder open/close persistence in createSlicingGUI()
• Add confirm() prompt before reset action
• Add @keyframes spin-once CSS animation and .spinning class to visualizer.css
• Trigger spin animation on reset icon after confirm, auto-remove via animationend
• Fix private API usage — replace _title/_closed with folderMap + trackFolder() helper; $title only used for event attachment
• Respect useDefaults for folder states (useDefaults ? null : loadFolderStates()); add clearFolderStates() to state.js and call it in resetView()
• Add transition: none to #reset.spinning to prevent keyframe/transition conflict
• Spin animation: reflow-trick restart, named SPIN_ANIMATION_DURATION_MS constant, timeout cancelled on animationend

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[jgphilpott]

Nice, thanks @copilot! Do you think you could also update the #reset icon to rotate when clicked like the one in the sender example examples/serial/browser/sender.js? Also, add a prompt to confirm the action (also like in the sender example). Thanks!

[Copilot]

Nice, thanks @copilot! Do you think you could also update the #reset icon to rotate when clicked like the one in the sender example examples/serial/browser/sender.js? Also, add a...

Done in commit 7361612. Following the sender.js pattern:

• Confirm prompt: clicking the reset icon now shows confirm('Are you sure you want to reset? This will restore all settings to their default values.') — the reset only proceeds if the user confirms.
• Spin animation: on confirmation, a spinning CSS class is added to #reset which triggers a @keyframes spin-once 360° rotation (0.5s ease-in-out). The class is removed automatically via an animationend listener.

Changes: modules/interactions.js (logic) and visualizer.css (keyframe + class).

[Copilot]

Pull request overview

This PR enhances the visualizer's lil-gui-based slicing panel in two ways: it persists the open/closed state of each settings folder across page reloads (stored in localStorage), and it adds a confirm() dialog plus a spin animation to the reset button for better UX.

Changes:

• Two new localStorage helpers (saveFolderStates / loadFolderStates) added to the state module, applied during GUI construction.
• Reset button now requires confirmation and shows a one-shot spin animation via CSS keyframes and an animationend listener.
• CSS keyframe animation spin-once added for the reset icon.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
examples/visualizer/modules/state.js	Adds saveFolderStates and loadFolderStates using the same try/catch + localStorage pattern as all other persistence helpers
examples/visualizer/modules/ui.js	Wires folder-state persistence into createSlicingGUI: loads saved states on construction, attaches a click listener to each folder's title to persist on every toggle
examples/visualizer/modules/interactions.js	Wraps the reset click handler with a confirm() guard and a CSS spin animation
examples/visualizer/visualizer.css	Adds @keyframes spin-once and #reset.spinning rule

[jgphilpott]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

All 4 review comments addressed in commit 74f9fcf:

1. Private API (_title, _closed) — replaced with a folderMap object built via a trackFolder() helper during construction; open/closed state is tracked in folderMap[title].isOpen and toggled in the click listener without touching lil-gui internals. A collectFolderStates() helper was extracted for clarity.

2. useDefaults not respected for folder states — createSlicingGUI() now uses useDefaults ? null : loadFolderStates(). Added clearFolderStates() to state.js; called in resetView() alongside the existing clearSlicingSettings().

3. CSS transition conflict with spin animation — added transition: none to #reset.spinning so the 0.2s transform transition on #controls img doesn't fight the keyframe animation.

4. Animation robustness — reflow trick (remove → offsetWidth → add) forces a restart on rapid re-click; SPIN_ANIMATION_DURATION_MS = 500 constant keeps the timeout (+ 100ms buffer) in sync with the CSS; the timeout is cancelled when animationend fires to avoid double classList.remove.