claude-code - 💡(How to fix) Fix Feature request: support multiple project previews open simultaneously in the Preview window [1 comments, 2 participants]

TL;DR

Implementing a tabbed interface or switcher in the Preview window to support multiple project previews simultaneously is likely the most effective fix.

Guidance

• Introduce a tabbing system or dropdown menu in the Preview window to list all currently running preview servers, allowing users to switch between projects without losing context.
• Ensure each tab is tied to its respective project's dev server, enabling quick-switching without the need to stop or start servers.
• Consider implementing a mechanism to manage and display the list of available preview servers, such as automatically updating the tab list when a new server is started or stopped.
• Develop a switching mechanism that preserves the state of each project's preview, allowing users to navigate between projects without losing their place.

Example

// Pseudo-code example of a tabbed interface
class PreviewWindow {
  constructor() {
    this.tabs = {}; // Store tabs with project IDs as keys
  }

  addTab(projectId, serverUrl) {
    this.tabs[projectId] = serverUrl;
    // Update tab list UI
  }

  switchTab(projectId) {
    // Switch to the selected project's preview
    // Update the preview content with the selected project's UI
  }
}

Notes

The implementation details may vary depending on the existing architecture and technologies used in the Preview window and project servers. This solution assumes a certain level of flexibility in the current system.

Recommendation

Apply a workaround by introducing a tabbed interface or switcher, as this directly addresses the requested feature and provides a clear path to achieving the expected behavior.