Function ProxySettingsSub

site/src/modules/dashboard/Navbar/MobileMenu.tsx:115–207

({ proxyContextValue })

};

const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
	const selectedProxy = proxyContextValue?.proxy.proxy;
	const latency = selectedProxy
		? proxyContextValue?.proxyLatencies[selectedProxy?.id]
		: undefined;
	const [open, setOpen] = useState(false);

	if (!selectedProxy) {
		return null;
	}

	return (
		<Collapsible open={open} onOpenChange={setOpen}>
			<CollapsibleTrigger asChild>
				<DropdownMenuItem
					className={cn(itemStyles.default, open ? itemStyles.open : "")}
					onClick={(e) => {
						e.preventDefault();
						setOpen((prev) => !prev);
					}}
				>
					Workspace proxy settings:
					<span className="leading-none flex items-center gap-1">
						<ExternalImage
							className="w-4 h-4"
							src={selectedProxy.icon_url}
							alt={selectedProxy.name}
						/>
						{latency && <Latency latency={latency.latencyMS} />}
					</span>
					<ChevronRightIcon
						className={cn("ml-auto", open ? "rotate-90" : "")}
					/>
				</DropdownMenuItem>
			</CollapsibleTrigger>
			<CollapsibleContent>
				{proxyContextValue.proxies &&
					sortProxiesByLatency(
						proxyContextValue.proxies,
						proxyContextValue.proxyLatencies,
					).map((p) => {
						const latency = proxyContextValue.proxyLatencies[p.id];
						return (
							<DropdownMenuItem
								className={cn(itemStyles.default, itemStyles.sub)}
								key={p.id}
								onClick={(e) => {
									e.preventDefault();

									if (!p.healthy) {
										toast.error("Failed to select proxy.", {
											description: "Please select a healthy workspace proxy.",
										});
										return;
									}

									proxyContextValue.setProxy(p);
									setOpen(false);