Add tabbed editor modal for compose files #36
+609
−98
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Uses unRAID CSS variables for theme compatibility - Supports both dark (black/gray) and light (white/azure) themes - Dynamic header offset calculation via CSS custom property
Replace separate Compose/ENV file editing with unified modal: - New full-screen modal with tabs for docker-compose.yml, .env, and override files - Real-time YAML syntax validation using js-yaml - Track unsaved changes with visual indicators on tabs - Keyboard shortcuts: Ctrl+S to save, Escape to close - Unsaved changes warning when closing - Dynamic positioning based on unRAID header height - Consolidates 'Compose File' and 'ENV File' buttons into single 'Edit Files' action The modal uses Ace editor instances for each file type with appropriate syntax highlighting (YAML for compose files, shell for .env files).
There was a problem hiding this comment.
Pull request overview
This pull request introduces a unified tabbed editor modal for managing compose files, replacing the previous separate editing dialogs with a modern, full-screen interface. The new editor provides simultaneous access to docker-compose.yml, .env, and docker-compose.override.yml files through tabs, with real-time YAML validation, visual change tracking, and keyboard shortcuts.
Changes:
- Added a new tabbed editor modal UI with support for editing compose, env, and override files in one interface
- Implemented real-time YAML syntax validation using the js-yaml library
- Added visual indicators for modified tabs and keyboard shortcuts (Ctrl+S to save, Escape to close)
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 15 comments.
| File | Description |
|---|---|
| source/compose.manager/styles/editorModal.css | New stylesheet defining the modal's appearance with unRAID theme variables and responsive layout |
| source/compose.manager/php/compose_manager_main.php | Integrated new editor modal functionality, including initialization, file loading, tab switching, validation, and save operations; updated the edit stack menu to use the new unified editor |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Move initEditorModal() to end of body to ensure DOM is ready - Add generateOverride() call when saving compose file (was missing) - Add error handling to AJAX file loading with .fail() handlers - Remove dead code: editComposeFile, editEnv, cancelEdit, saveEdit
Show only first line of error, max 100 characters
Use createTextNode to safely escape error messages from YAML parser instead of inserting directly into HTML
Delay validation by 300ms to avoid excessive parsing while typing
switchEditorTab already handles validation
- Show 'Saved!' message in validation panel after Ctrl+S - Display error dialog if save operation fails
Clear editor content and originalContent to prevent stale content showing briefly when modal reopens
- Remove unused .editor-btn-save class - Add .editor-btn-save-all:disabled and :disabled:hover states
Prevents duplicate handlers if initEditorModal is called multiple times
- Add role='dialog', aria-modal, aria-labelledby to modal overlay - Add aria-label to close button - Add role='tablist' to tab container - Add role='tab', aria-selected, aria-controls to tab buttons - Add role='tabpanel', aria-labelledby to editor containers - Update switchEditorTab to toggle aria-selected state
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 9 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add validation for tabName parameter in switchEditorTab - Add .catch() handler to saveCurrentTab for promise rejection - Implement keyboard arrow navigation between tabs (Left/Right) - Add focus trapping to keep keyboard focus within modal - Add :focus-visible styles for close button and tabs - Improve saveAllTabs error handling with partial save detection - Use rem instead of px for consistent font sizing - Add aria-hidden to decorative icons and modified indicators - Set originalContent when file loading fails to fix modification tracking
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Replace separate Compose/ENV file editing dialogs with a unified full-screen editor modal.
Changes
UI Changes
Testing
Tested on unRAID 7.1.4 with both dark (black) and light (azure) themes.