Sharable ports UI redesign

[stirby]

Originally raised by @pauliuspetk here: https://github.com/coder/coder/issues/11486#issuecomment-2101286444

The sharable ports UI is a little overly complex since we added protocol control. There are several overly implicit flows and a few duplicate methods of achieving the same result. We've had to work directly with customers already to explain the feature's usage.

I agree with @pauliuspetk we should consolidate into a single table; this was actually part of some of our original mockups. All controls would be in-line with their respective port.

Here, all listening ports would default to the hidden "Owner" and HTTP. Shared ports would be pinned to the top of the list and remain visible even if the listening port goes quiet.

[Kira-Pilot]

Taking resources off of this so we can stay focused on RBAC and Workspace Activity this sprint.

[ggjulio]

When using devcontainers it would be nice if the devcontainer config was reflected in the sharable ports UI.

The simplest approach would be to provide the coder agent with a well known path of the effective devcontainer config.

• https://github.com/devcontainers/cli/blob/5eaf712d24eb96e7e4fcae247232467c37455373/example-usage/tool-vscode-server/start.sh#L11

A new option devcontainer_effective_configuration in the coder_agent can be added for flexibility : devcontainer_effective_configuration = /custom-path/to/effective-config.json

This repo can be used for reproduction:

• https://github.com/microsoft/vscode/blob/main/.devcontainer/devcontainer.json#L40