Summary
In the Project Editor (ProjectEditorPage.tsx), users can inspect the generated configuration (JSON workspace file or terminal launcher script) by clicking the preview button. However, the current implementation has several UX limitations: the preview panel cannot be closed once opened, does not auto-update when project details change, and the button label remains static ("View generated JSON" / "View generated script").
Current Behavior
- No collapse/close option: Clicking the preview button calls
handlePreview(), fetching and displaying the preview. There is no mechanism or toggle to close or collapse the preview once rendered.
- Stale preview data (No auto-update): If the user modifies project fields (e.g., project name, folders, terminal commands, or IDE selection) while the preview is visible, the content does not update automatically.
- Static button text & icon: The button label consistently displays "View generated JSON" (or "View generated script" for terminal IDE), accompanied by a static
<ChevronDown /> icon, without reflecting whether the preview is currently expanded or collapsed.
Proposed Solution
- Toggle open / close: Clicking the button when the preview is open should collapse/hide it.
- Automatic live update: When the preview panel is open, any change to
project should automatically trigger a debounced re-fetch of previewWorkspace(project) so the preview always reflects the latest state.
- Dynamic button label & icon:
- When closed: Show "View generated JSON" (or script) with a
<ChevronDown /> icon.
- When open: Change label to "Hide generated JSON" (or script) with a
<ChevronUp /> icon (add matching i18n keys for editor.hideJson and editor.hideScript in en-us.json and pt-br.json).
Expected Behavior
- User can toggle open/close the generated preview seamlessly.
- While open, changes made to folders, commands, or settings immediately/reactively refresh the preview content without requiring manual re-clicks.
- Button label and chevron indicator accurately reflect the toggle state.
Acceptance Criteria
Summary
In the Project Editor (
ProjectEditorPage.tsx), users can inspect the generated configuration (JSON workspace file or terminal launcher script) by clicking the preview button. However, the current implementation has several UX limitations: the preview panel cannot be closed once opened, does not auto-update when project details change, and the button label remains static ("View generated JSON" / "View generated script").Current Behavior
handlePreview(), fetching and displaying the preview. There is no mechanism or toggle to close or collapse the preview once rendered.<ChevronDown />icon, without reflecting whether the preview is currently expanded or collapsed.Proposed Solution
projectshould automatically trigger a debounced re-fetch ofpreviewWorkspace(project)so the preview always reflects the latest state.<ChevronDown />icon.<ChevronUp />icon (add matching i18n keys foreditor.hideJsonandeditor.hideScriptinen-us.jsonandpt-br.json).Expected Behavior
Acceptance Criteria
ChevronDown) and up (ChevronUp) depending on open state.