feat: add listening ports protocol selector

[f0ssel]

Relies on #12908 to be merged first.
Closes #12902

Notes:

• The selector applies to all listening port links
• The selector also decides the protocol when sharing a listening port with the "Share" button
• The selector value is saved in localstorage by workspaceID
• I moved the no detected ports text to a more reactive position and updated helper text

[aslilac]

Suggested change

	{"No open ports were detected."}
	No open ports were detected.

[aslilac]

Suggested change

	{
	"The listening ports are exclusively accessible to you. Selecting HTTP/S will change the protocol for all listening ports."
	}
	The listening ports are exclusively accessible to you. This option will change the protocol for all listening ports.

[aslilac]

Suggested change

	const filteredListeningPorts = (listeningPorts ? listeningPorts : []).filter(
	(port) => {
	for (let i = 0; i < filteredSharedPorts.length; i++) {
	if (filteredSharedPorts[i].port === port.port) {
	return false;
	}
	}
	}
	return true;
	});
	return true;
	},
	);
	const filteredListeningPorts = (listeningPorts ?? []).filter(
	(port) => filteredSharedPorts.every((sharedPort) => sharedPort.port !== port.port),
	);

[aslilac]

I'm always wary of using localStorage for stuff like this. Can you share some of your rationale?

[f0ssel]

I am too. We have had many group discussions (dean, jon, kyle, ben) around a few of the PRs coming out of Shared Ports about these protocol selection features. I've suggested keeping this state and other UX state in the DB in the past, but the group thought that putting this button in local storage is better than making a new table to track this stuff. We want an MVP that is feature complete, but can still iterate on later as we get customer feedback, and this was the solution we landed on for now.

[aslilac]

Gotcha. If it changes the protocol of all ports though, is it really "UI state"?

[f0ssel]

I promise you I have brought up many different discussions about doing things with this on the backend but the conclusion the group came to was client side storage for now and that we can iterate on the design once we get feedback.