Add version/effect dropdowns and dynamic title to Matrix Mode UI #66
Conversation
…ols checkbox
- Convert Version and Effect from text display to interactive dropdowns
- Populate dropdowns from getAvailableModes() and getAvailableEffects()
- Wire up dropdown change events to reload page with new parameters
- Add updatePageTitle() function to update document.title with current version/effect
- Page title format: "Matrix - {Version} / {Effect}"
- Title updates on page load, dropdown changes, and auto mode switching
- Remove "Show Spotify Controls" checkbox from mode display panel
- Hide Spotify UI by default (visible=false)
- Update copilot instructions with UI component architecture details
Co-authored-by: ap0ught <41078+ap0ught@users.noreply.github.com>
- Remove "trans" from getAvailableEffects() array in config.js - Update copilot instructions to document that trans effect was removed - Note: Service worker caching may require cache version bump for immediate effect Co-authored-by: ap0ught <41078+ap0ught@users.noreply.github.com>
🎬 PR Preview Deployed!Your changes are now available for testing: Preview URL: https://ap0ught.github.io/matrix/pr-66/ Test Links:The preview will be updated automatically when you push new commits. Preview deployed from commit 3133549 |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Matrix Mode UI with interactive controls and dynamic page titles. The changes transform static text displays into functional dropdowns and add quality-of-life improvements to the user interface.
Key changes:
- Version and Effect fields converted from static text to interactive
<select>dropdowns - Added dynamic page title updates that reflect current version/effect (format: "Matrix - {Version} / {Effect}")
- Removed Spotify controls checkbox from Mode Display panel and set Spotify UI to hidden by default
- Removed deprecated "trans" effect from available effects list
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| js/mode-display.js | Added imports for available modes/effects, replaced static text with dropdowns, removed Spotify toggle, added formatModeName method |
| js/main.js | Added updatePageTitle function, updated event handlers for dropdown changes, set Spotify UI to hidden by default |
| js/config.js | Removed "trans" from getAvailableEffects array |
| .github/copilot-instructions.md | Added UI Components Architecture documentation section detailing dropdown functionality and page title behavior |
| formatModeName(name) { | ||
| return name | ||
| .split(/(?=[A-Z])|[_-]/) // Split on camelCase, underscores, and hyphens | ||
| .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) | ||
| .join(" "); | ||
| } |
There was a problem hiding this comment.
The formatModeName method is duplicated across three files (mode-display.js, main.js, and mode-manager.js). This violates the DRY (Don't Repeat Yourself) principle and creates maintenance overhead. Consider extracting this to a shared utility module (e.g., js/utils.js) and importing it where needed, or reusing the existing implementation from ModeManager.
| const formatName = (name) => { | ||
| return name | ||
| .split(/(?=[A-Z])|[_-]/) | ||
| .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) | ||
| .join(" "); | ||
| }; |
There was a problem hiding this comment.
The formatName function duplicates the same logic as formatModeName in mode-manager.js and mode-display.js. This code duplication creates maintenance overhead. Consider importing a shared utility function instead of defining this inline.
Matrix Mode panel showed version/effect as static text, lacked page title updates, and displayed unused Spotify controls.
Changes
Interactive Mode Selection
<select>dropdowns populated fromgetAvailableModes()andgetAvailableEffects()Dynamic Page Title
updatePageTitle(config)that formats title as"Matrix - {Version} / {Effect}"UI Cleanup
visible: false)getAvailableEffects()arrayDocumentation
.github/copilot-instructions.mdScreenshots
Before: Static text display with unused Spotify toggle
After: Interactive dropdowns, clean UI
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.