Description:

We should add a Ports utility to the Utility Area in CodeEdit that allows users to manage port forwarding within their development environment. This utility will make it easy for users to forward ports, monitor active ports, and configure various port-related settings from within the editor. The functionality will be visually displayed in a table where users can see port numbers, forwarded addresses, and port visibility (private or public). The user will also be able to interact with individual ports through a context menu.

Expected Behavior

1. Ports Management Interface:
   • A dedicated utility within the Utility Area that lists forwarded ports in a table format.
   • The table should include columns for:
   • Port number
   • Forwarded address
   • Port visibility (Private or Public)
   • Origin (how the port was forwarded)
   • Status (running or stopped)
2. Context Menu for Each Port:
   • Right-clicking (or Control-clicking) a port should bring up a context menu with the following actions:
     • Open in Browser: Opens the forwarded port in the default web browser.
     • Preview in Editor: If applicable, open the forwarded address in the editor’s built-in preview.
     • Set Port Label: Allows the user to assign a label or name to the port for easier identification.
     • Copy Local Address: Copies the local IP/hostname and port to the clipboard.
     • Port Visibility: Toggle between Private (accessible only to the local machine) and Public (accessible externally).
     • Change Port Protocol: Allow users to change the protocol used for the port (e.g., HTTP, HTTPS).
     • Stop Forwarding Port: Stops forwarding the selected port.
     • Forward a Port: Manually forward a new port by specifying the port number and address.
3. Port Visibility and Protocol:
   • Ports can be toggled between Private (only accessible locally) and Public (accessible to other devices).
   • Users should be able to modify the protocol for a forwarded port (e.g., switching between HTTP and HTTPS).
4. Filter/Search Ports:
   • A filter or search input should be provided at the bottom of the table to quickly find ports by number or address.
5. Keyboard Shortcuts:
   • Consider adding keyboard shortcuts for key actions, such as stopping a port or toggling visibility.
6. Error Handling:
   • If a port fails to forward or an error occurs during interaction, display a clear error message (e.g., “Port forwarding failed”).
   • Gracefully handle cases where a forwarded port is no longer available or conflicts arise.

Acceptance Criteria

1. A new Ports Management Utility is available in the Utility Area where users can see and manage their forwarded ports.
2. Users can forward new ports, stop forwarding, and toggle visibility between private and public with ease.
3. Right-clicking a port shows a context menu with actions like Open in Browser, Preview in Editor, and Change Port Protocol.
4. Ports can be filtered or searched for using a filter input in the interface.
5. If a forwarded port encounters an error, the system displays a meaningful error message.
6. The interface updates dynamically as ports are forwarded or stopped.

Screenshots

Original Issue

I have just built the latest CodeEdit build and used the new feature introduced in #1798, and I noticed that there was no menu to manage open ports. For example, if I ran a web server on http://localhost:3000, an editor like VSCode would show that there is an open port in it's status bar:

What if CodeEdit had open ports in the navigator?