feat: redo user page to match account linking

app/routes/users/components/menu.tsx

@@ -2,75 +2,67 @@ import { Ellipsis } from "lucide-react";
 import { useState } from "react";
 
 import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "~/components/menu";
-import type { Machine, User } from "~/types";
 
 import Delete from "../dialogs/delete-user";
 import LinkUser from "../dialogs/link-user";
 import Reassign from "../dialogs/reassign-user";
-import Rename from "../dialogs/rename-user";
+import type { HeadplaneUserData } from "../overview";
 
 interface MenuProps {
-  user: User & {
-    headplaneRole: string;
-    machines: Machine[];
-  };
+  user: HeadplaneUserData;
   headscaleUsers: { id: string; name: string; claimed: boolean }[];
   currentLink?: string;
 }
 
-type Modal = "rename" | "delete" | "reassign" | "link" | null;
+type Modal = "delete" | "reassign" | "link" | null;
 
 export default function UserMenu({ user, headscaleUsers, currentLink }: MenuProps) {
   const [modal, setModal] = useState<Modal>(null);
 
+  const isLinked = currentLink !== undefined;
   const disabledKeys: string[] = [];
-  if (user.provider === "oidc") {
-    disabledKeys.push("rename");
-  } else {
-    disabledKeys.push("reassign", "link");
+  if (!isLinked) {
+    disabledKeys.push("reassign");
   }
 
   // Filter linkable users: unclaimed, or the one currently linked to this user
   const linkableUsers = headscaleUsers.filter((u) => !u.claimed || u.id === currentLink);
 
+  const displayName = user.linkedHeadscaleUser?.displayName || user.name || user.email || user.sub;
+
   return (
     <>
-      {modal === "rename" && (
-        <Rename
-          isOpen={modal === "rename"}
-          setIsOpen={(isOpen) => {
-            if (!isOpen) setModal(null);
-          }}
-          user={user}
-        />
-      )}
-      {modal === "delete" && (
+      {modal === "delete" && user.linkedHeadscaleUser && (
         <Delete
           isOpen={modal === "delete"}
+          machines={user.machines}
           setIsOpen={(isOpen) => {
             if (!isOpen) setModal(null);
           }}
-          user={user}
+          user={user.linkedHeadscaleUser}
         />
       )}
       {modal === "reassign" && (
         <Reassign
+          displayName={displayName}
           isOpen={modal === "reassign"}
+          role={user.role}
           setIsOpen={(isOpen) => {
             if (!isOpen) setModal(null);
           }}
-          user={user}
+          userId={user.linkedHeadscaleUser?.id ?? user.id}
         />
       )}
       {modal === "link" && (
         <LinkUser
           currentLink={currentLink}
+          displayName={displayName}
           headscaleUsers={linkableUsers}
           isOpen={modal === "link"}
           setIsOpen={(isOpen) => {
             if (!isOpen) setModal(null);
           }}
-          user={user}
+          userId={user.linkedHeadscaleUser?.id ?? user.id}
         />
       )}
 
@@ -79,22 +71,23 @@ export default function UserMenu({ user, headscaleUsers, currentLink }: MenuProp
           <Ellipsis className="h-5" />
         </MenuTrigger>
         <MenuContent>
-          <MenuItem disabled={disabledKeys.includes("rename")} onClick={() => setModal("rename")}>
-            Rename user
-          </MenuItem>
           <MenuItem
             disabled={disabledKeys.includes("reassign")}
             onClick={() => setModal("reassign")}
           >
             Change role
           </MenuItem>
-          <MenuItem disabled={disabledKeys.includes("link")} onClick={() => setModal("link")}>
-            Link Headscale user
-          </MenuItem>
-          <MenuSeparator />
-          <MenuItem variant="danger" onClick={() => setModal("delete")}>
-            Delete
+          <MenuItem onClick={() => setModal("link")}>
+            {isLinked ? "Change linked user" : "Link Headscale user"}
           </MenuItem>
+          {user.linkedHeadscaleUser && (
+            <>
+              <MenuSeparator />
+              <MenuItem variant="danger" onClick={() => setModal("delete")}>
+                Delete
+              </MenuItem>
+            </>
+          )}
         </MenuContent>
       </Menu>
     </>