feat: reimplement user actions

app/routes/machines/components/machine.tsx

@@ -96,7 +96,7 @@ export default function MachineRow({
 	return (
 		<tr
 			key={machine.id}
-			className="'group hover:bg-headplane-50 dark:hover:bg-headplane-950"
+			className="group hover:bg-headplane-50 dark:hover:bg-headplane-950"
 		>
 			<td className="pl-0.5 py-2 focus-within:ring">
 				<Link

app/routes/users/components/menu.tsx

@@ -0,0 +1,62 @@
+import { Ellipsis } from 'lucide-react';
+import { useState } from 'react';
+import Menu from '~/components/Menu';
+import type { Machine, User } from '~/types';
+import cn from '~/utils/cn';
+import Delete from '../dialogs/delete-user';
+import Rename from '../dialogs/rename-user';
+
+interface MenuProps {
+	user: User & {
+		machines: Machine[];
+	};
+}
+
+type Modal = 'rename' | 'delete' | null;
+
+export default function UserMenu({ user }: MenuProps) {
+	const [modal, setModal] = useState<Modal>(null);
+	return (
+		<>
+			{modal === 'rename' && (
+				<Rename
+					user={user}
+					isOpen={modal === 'rename'}
+					setIsOpen={(isOpen) => {
+						if (!isOpen) setModal(null);
+					}}
+				/>
+			)}
+			{modal === 'delete' && (
+				<Delete
+					user={user}
+					isOpen={modal === 'delete'}
+					setIsOpen={(isOpen) => {
+						if (!isOpen) setModal(null);
+					}}
+				/>
+			)}
+
+			<Menu>
+				<Menu.IconButton
+					label="Machine Options"
+					className={cn(
+						'py-0.5 w-10 bg-transparent border-transparent',
+						'border group-hover:border-headplane-200',
+						'dark:group-hover:border-headplane-700',
+					)}
+				>
+					<Ellipsis className="h-5" />
+				</Menu.IconButton>
+				<Menu.Panel onAction={(key) => setModal(key as Modal)}>
+					<Menu.Section>
+						<Menu.Item key="rename">Rename user</Menu.Item>
+						<Menu.Item key="delete" textValue="Delete">
+							<p className="text-red-500 dark:text-red-400">Delete</p>
+						</Menu.Item>
+					</Menu.Section>
+				</Menu.Panel>
+			</Menu>
+		</>
+	);
+}

app/routes/users/components/user-row.tsx

@@ -2,6 +2,7 @@ import { CircleUser } from 'lucide-react';
 import StatusCircle from '~/components/StatusCircle';
 import { Machine, User } from '~/types';
 import cn from '~/utils/cn';
+import MenuOptions from './menu';
 
 interface UserRowProps {
 	role: string;
@@ -16,7 +17,10 @@ export default function UserRow({ user, role }: UserRowProps) {
 	);
 
 	return (
-		<tr key={user.id}>
+		<tr
+			key={user.id}
+			className="group hover:bg-headplane-50 dark:hover:bg-headplane-950"
+		>
 			<td className="pl-0.5 py-2">
 				<div className="flex items-center">
 					{user.profilePicUrl ? (
@@ -53,6 +57,9 @@ export default function UserRow({ user, role }: UserRowProps) {
 					<p>{isOnline ? 'Connected' : new Date(lastSeen).toLocaleString()}</p>
 				</span>
 			</td>
+			<td className="py-2 pr-0.5">
+				<MenuOptions user={user} />
+			</td>
 		</tr>
 	);
 }

app/routes/users/dialogs/delete-user.tsx

@@ -1,27 +1,38 @@
-import { X } from 'lucide-react';
 import Dialog from '~/components/Dialog';
-import { User } from '~/types';
+import { Machine, User } from '~/types';
 
-interface Props {
+interface DeleteProps {
-	user: User;
+	user: User & { machines: Machine[] };
+	isOpen: boolean;
+	setIsOpen: (isOpen: boolean) => void;
 }
 
-// TODO: Warn that OIDC users will be recreated on next login
+export default function DeleteUser({ user, isOpen, setIsOpen }: DeleteProps) {
-export default function DeleteUser({ user }: Props) {
 	const name =
 		(user.displayName?.length ?? 0) > 0 ? user.displayName : user.name;
 
 	return (
-		<Dialog>
+		<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
-			<Dialog.IconButton label={`Delete ${name}`}>
+			<Dialog.Panel
-				<X className="p-0.5" />
+				variant={user.machines.length > 0 ? 'unactionable' : 'normal'}
-			</Dialog.IconButton>
+			>
-			<Dialog.Panel>
 				<Dialog.Title>Delete {name}?</Dialog.Title>
-				<Dialog.Text className="mb-6">
+				{user.machines.length > 0 ? (
-					Are you sure you want to delete {name}? A deleted user cannot be
+					<Dialog.Text className="mb-6">
-					recovered.
+						Users cannot be deleted if they have machines. Please delete or
-				</Dialog.Text>
+						re-assign their machines to other users before proceeding.
+					</Dialog.Text>
+				) : (
+					<Dialog.Text className="mb-6">
+						Deleted users cannot be recovered.
+						{user.provider === 'oidc' && (
+							<p className="mt-4 text-sm text-headplane-600 dark:text-headplane-300">
+								Since this user is authenticated via an external provider, they
+								will be recreated if they sign in again.
+							</p>
+						)}
+					</Dialog.Text>
+				)}
 				<input type="hidden" name="action_id" value="delete_user" />
 				<input type="hidden" name="user_id" value={user.id} />
 			</Dialog.Panel>

app/routes/users/dialogs/rename-user.tsx

@@ -1,19 +1,17 @@
-import { Pencil } from 'lucide-react';
 import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
 import { User } from '~/types';
 
-interface Props {
+interface RenameProps {
 	user: User;
+	isOpen: boolean;
+	setIsOpen: (isOpen: boolean) => void;
 }
 
 // TODO: Server side validation before submitting
-export default function RenameUser({ user }: Props) {
+export default function RenameUser({ user, isOpen, setIsOpen }: RenameProps) {
 	return (
-		<Dialog>
+		<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
-			<Dialog.IconButton label={`Rename ${user.name}`}>
-				<Pencil className="p-1" />
-			</Dialog.IconButton>
 			<Dialog.Panel>
 				<Dialog.Title>Rename {user.name}?</Dialog.Title>
 				<Dialog.Text className="mb-6">