Skip to content

Improve workspace preview with close support and live auto-update #14

Description

@granderr

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

  1. 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.
  2. 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.
  3. 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

  • Clicking the preview button toggles the preview panel visibility (open/close).
  • Chevron icon switches between down (ChevronDown) and up (ChevronUp) depending on open state.
  • Button label dynamically alternates between "View..." and "Hide..." (with localized strings).
  • If the preview panel is currently open, modifying any project property automatically updates the preview content.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions