client/web: split out UI components

This commit makes the following structural changes to the web
client interface. No user-visible changes.

1. Splits login, legacy, readonly, and full management clients into
   their own components, and pulls them out into their own view files.
2. Renders the same Login component for all scenarios when the client
   is not logged in, regardless of legacy or debug mode. Styling comes
   from the existing legacy login, which is removed from legacy.tsx
   now that it is shared.
3. Adds a ui folder to hold non-Tailscale-specific components,
   starting with ProfilePic, previously housed in app.tsx.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/ui/profile-pic.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+export default function ProfilePic({ url }: { url: string }) {
+  return (
+    <div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
+      {url ? (
+        <div
+          className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
+          style={{
+            backgroundImage: `url(${url})`,
+            backgroundSize: "cover",
+          }}
+        />
+      ) : (
+        <div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
+      )}
+    </div>
+  )
+}