cmd/tsconnect: switch UI to Preact

Reduces the amount of boilerplate to render the UI and makes it easier to
respond to state changes (e.g. machine getting authorized, netmap changing,
etc.)

Preact adds ~13K to our bundle size (5K after Brotli) thus is a neglibible
size contribution. We mitigate the delay in rendering the UI by having a static
placeholder in the HTML.

Required bumping the esbuild version to pick up evanw/esbuild#2349, which
makes it easier to support Preact's JSX code generation.

Fixes #5137
Fixes #5273

Signed-off-by: Mihai Parparita <mihai@tailscale.com>

cmd/tsconnect/src/header.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import { IPNState } from "./wasm_js"
+
+export function Header({ state, ipn }: { state: IPNState; ipn?: IPN }) {
+  const stateText = STATE_LABELS[state]
+
+  let logoutButton
+  if (state === IPNState.Running) {
+    logoutButton = (
+      <button
+        class="button bg-gray-500 border-gray-500 text-white hover:bg-gray-600 hover:border-gray-600 ml-2 font-bold"
+        onClick={() => ipn?.logout()}
+      >
+        Logout
+      </button>
+    )
+  }
+  return (
+    <div class="bg-gray-100 border-b border-gray-200 pt-4 pb-2">
+      <header class="container mx-auto px-4 flex flex-row items-center">
+        <h1 class="text-3xl font-bold grow">Tailscale Connect</h1>
+        <div class="text-gray-600">{stateText}</div>
+        {logoutButton}
+      </header>
+    </div>
+  )
+}
+
+const STATE_LABELS = {
+  [IPNState.NoState]: "Initializing…",
+  [IPNState.InUseOtherUser]: "In-use by another user",
+  [IPNState.NeedsLogin]: "Needs login",
+  [IPNState.NeedsMachineAuth]: "Needs authorization",
+  [IPNState.Stopped]: "Stopped",
+  [IPNState.Starting]: "Starting…",
+  [IPNState.Running]: "Running",
+} as const