feat(spx-gui): move sound editor into stage editor tabs and add stage quick entries#2927
feat(spx-gui): move sound editor into stage editor tabs and add stage quick entries#2927nighca merged 8 commits intogoplus:devfrom
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly refactors the user interface and underlying state management for sound editing within the SPX GUI. By integrating sound management directly into the Stage Editor as a dedicated tab and introducing quick access buttons on the Stage Panel, the changes aim to streamline the user workflow and improve the overall organization of editing functionalities. This consolidation enhances the user experience by providing a more intuitive and accessible way to manage project sounds alongside other stage-related assets. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively refactors the sound editor into the stage editor tabs, which is a great improvement for the UI structure. The addition of quick entry points on the stage panel also enhances usability.
I've found one issue in SoundsEditorState related to auto-selection of sounds, which I've detailed in a specific comment. It's worth noting that the test case that would have likely caught this bug (should handle adding new sounds correctly) was removed in spx-gui/src/components/editor/editor-state.test.ts. I recommend adding a new test to cover this auto-selection behavior in the new SoundsEditorState to prevent future regressions.
![fennoai[bot]](https://avatars.githubusercontent.com/in/1924301?s=60&v=4){kind=small}
|
Clean restructuring — moving sounds into the stage editor tabs and adding quick-entry buttons is a clear UX improvement. The backward-compat routing handling ( |
There was a problem hiding this comment.
Pull request overview
This PR moves the sound editor from a separate top-level editor (accessible via selected.type === "sound") into the StageEditor as a dedicated tab, alongside existing Code, Widgets, and Backdrops tabs. It also adds quick-entry buttons in the StagePanel for opening Widgets, Sounds, and Backdrops tabs directly.
Changes:
- Removed
soundas a top-levelSelectedTypeinEditorState, delegating sound selection toStageEditorStatewith a newSoundsEditorStateclass. The oldSoundsPanelinEditorPanelsis removed. - Added three quick-entry buttons (Widgets, Sounds, Backdrops) in
StagePanelwith SVG icons, and restructured the panels layout soSpritesPanelis always expanded. - Moved sound editor components from
editor/sound/toeditor/stage/sound/, updated all import paths across the codebase, and changed the sound color theme from purple to blue (matching stage).
Reviewed changes
Copilot reviewed 28 out of 40 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
editor-state.ts |
Removed sound from top-level SelectedType; sounds now route through stage state |
editor-state.test.ts |
Updated tests to verify sounds are selected via stageState.selectedSound |
StageEditor.vue |
Added sounds tab and SoundsEditorState; updated StageEditorState class |
sounds-editor-state.ts |
New SoundsEditorState class managing sound selection |
SoundsEditor.vue |
New component rendering the sound list and detail panel |
AddSoundMenu.vue |
New menu component for adding sounds (local file, library, recording) |
StagePanel.vue |
Added quick-entry buttons for Widgets, Sounds, Backdrops tabs |
EditorPanels.vue |
Removed SoundsPanel; simplified layout to Sprites + Stage panels |
SpritesPanel.vue |
Always expanded; removed expand/collapse logic |
SoundsPanel.vue |
Deleted (functionality moved to SoundsEditor) |
SoundSummaryItem.vue |
Deleted (no longer needed) |
ProjectEditor.vue |
Removed top-level SoundEditor rendering |
colors.ts |
Changed sound color from purple to blue |
WaveformDisplay.vue |
Updated waveform stroke/fill colors to grey tones |
WaveformPlayer.vue |
New component for audio playback with waveform visualization |
WaveformRecorder.vue |
New component for audio recording with waveform |
WaveformWithControls.vue |
New component wrapping waveform display with range/cursor controls |
WaveformRangeControl.vue |
New component for draggable range selection on waveform |
VolumeSlider.vue |
Moved component for volume control |
SoundDetail.vue |
Removed header tabs; updated imports for new location |
SoundRecorder.vue |
Updated import paths and button colors |
SoundRecorderModal.vue |
Moved component |
SoundPlayer.vue, SoundItem.vue |
Updated import paths |
copilot.ts |
Removed unnecessary await on postTextStream |
project.ts |
Added documentation comment for sounds field |
widget.svg, sound.svg, backdrop.svg |
New SVG icons for quick entries |
monitor-gray.svg |
Deleted (replaced by UIIcon) |
| Various import updates | Updated paths for moved sound components |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| tilemap?: Tilemap | null | ||
| sprites: Sprite[] | ||
| // Sounds are kept at the project level (not in Stage) because sprite animations | ||
| // reference sounds by ID, and `removeSound` must clean up those cross-sprite references. |
There was a problem hiding this comment.
这么着感觉不是个事儿
这里 animation 与 sound 的关系本质上跟 monitor 那个 PR 中 monitor 与 sprite 的关系类似，但是现在是在用两种不同（且都比较将就）的方式来解决
长远来看还是得有个更可靠的不用在逻辑组织方式上妥协的方案，我单独记个 issue 跟进下吧
close: #2925