feat: reimplement user actions

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>
 	);
 }