client/web: add readonly/manage toggle

Updates tailscale/corp#14335

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

client/web/src/ui/popover.tsx

@@ -0,0 +1,106 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import cx from "classnames"
+import React, { ReactNode } from "react"
+
+type Props = {
+  className?: string
+  content: ReactNode
+  children: ReactNode
+
+  /**
+   * asChild renders the trigger element without wrapping it in a button. Use
+   * this when you want to use a `button` element as the trigger.
+   */
+  asChild?: boolean
+  /**
+   * side is the side of the direction from the target element to render the
+   * popover.
+   */
+  side?: "top" | "bottom" | "left" | "right"
+  /**
+   * sideOffset is how far from a give side to render the popover.
+   */
+  sideOffset?: number
+  /**
+   * align is how to align the popover with the target element.
+   */
+  align?: "start" | "center" | "end"
+  /**
+   * alignOffset is how far off of the alignment point to render the popover.
+   */
+  alignOffset?: number
+
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+/**
+ * Popover is a UI component that allows rendering unique controls in a floating
+ * popover, attached to a trigger element. It appears on click and manages focus
+ * on its own behalf.
+ *
+ * To use the Popover, pass the content as children, and give it a `trigger`:
+ *
+ *    <Popover trigger={<span>Open popover</span>}>
+ *      <p>Hello world!</p>
+ *    </Popover>
+ *
+ * By default, the toggle is wrapped in an accessible <button> tag. You can
+ * customize by providing your own button and using the `asChild` prop.
+ *
+ *    <Popover trigger={<Button>Hello</Button>} asChild>
+ *      <p>Hello world!</p>
+ *    </Popover>
+ *
+ * The former style is recommended whenever possible.
+ */
+export default function Popover(props: Props) {
+  const {
+    children,
+    className,
+    content,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    asChild,
+    open,
+    onOpenChange,
+  } = props
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <PopoverPrimitive.Trigger asChild={asChild}>
+        {children}
+      </PopoverPrimitive.Trigger>
+      <PortalContainerContext.Consumer>
+        {(portalContainer) => (
+          <PopoverPrimitive.Portal container={portalContainer}>
+            <PopoverPrimitive.Content
+              className={cx(
+                "origin-radix-popover shadow-popover bg-white rounded-md z-50",
+                "state-open:animate-scale-in state-closed:animate-scale-out",
+                className
+              )}
+              side={side}
+              sideOffset={sideOffset}
+              align={align}
+              alignOffset={alignOffset}
+              collisionPadding={12}
+            >
+              {content}
+            </PopoverPrimitive.Content>
+          </PopoverPrimitive.Portal>
+        )}
+      </PortalContainerContext.Consumer>
+    </PopoverPrimitive.Root>
+  )
+}
+
+Popover.defaultProps = {
+  sideOffset: 10,
+}
+
+const PortalContainerContext = React.createContext<HTMLElement | undefined>(
+  undefined
+)

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

@@ -3,17 +3,24 @@ import React from "react"
 
 export default function ProfilePic({
   url,
-  size = "medium",
+  size = "large",
+  className,
 }: {
-  url: string
-  size?: "small" | "medium"
+  url?: string
+  size?: "small" | "medium" | "large"
+  className?: string
 }) {
   return (
     <div
-      className={cx("relative flex-shrink-0 rounded-full overflow-hidden", {
-        "w-5 h-5": size === "small",
-        "w-8 h-8": size === "medium",
-      })}
+      className={cx(
+        "relative flex-shrink-0 rounded-full overflow-hidden",
+        {
+          "w-5 h-5": size === "small",
+          "w-[26px] h-[26px]": size === "medium",
+          "w-8 h-8": size === "large",
+        },
+        className
+      )}
     >
       {url ? (
         <div