Updated tables. Added MenuButton.

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -19,7 +19,7 @@ export function LanguageSetting() {
 
   const handleReset = () => saveLocale(DEFAULT_LOCALE);
 
-  const handleOpen = isOpen => {
+  const handleOpen = (isOpen: boolean) => {
     if (isOpen) {
       setSearch('');
     }

src/app/(main)/settings/profile/PasswordChangeButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
 import { PasswordEditForm } from './PasswordEditForm';
-import { Icons } from '@/components/icons';
+import { Lucide } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function PasswordChangeButton() {
@@ -15,7 +15,7 @@ export function PasswordChangeButton() {
     <DialogTrigger>
       <Button>
         <Icon fillColor="currentColor">
-          <Icons.Lock />
+          <Lucide.LockKeyhole />
         </Icon>
         <Text>{formatMessage(labels.changePassword)}</Text>
       </Button>

src/app/(main)/settings/profile/ThemeSetting.tsx

@@ -1,5 +1,5 @@
 import { Row, Button, Icon, useTheme } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Lucide } from '@/components/icons';
 
 export function ThemeSetting() {
   const { theme, setTheme } = useTheme();
@@ -10,13 +10,13 @@ export function ThemeSetting() {
         variant={theme === 'light' ? 'primary' : 'secondary'}
         onPress={() => setTheme('light')}
       >
-        <Icon fillColor="currentColor">
-          <Icons.Sun />
+        <Icon>
+          <Lucide.Sun />
         </Icon>
       </Button>
       <Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}>
-        <Icon fillColor="currentColor">
-          <Icons.Moon />
+        <Icon>
+          <Lucide.Moon />
         </Icon>
       </Button>
     </Row>

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -30,12 +30,12 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
         <TextField autoComplete="off" />
       </FormField>
       <FormButtons>
-        <FormSubmitButton variant="primary" isDisabled={isPending}>
-          {formatMessage(labels.save)}
-        </FormSubmitButton>
         <Button isDisabled={isPending} onPress={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
+        <FormSubmitButton variant="primary" isDisabled={isPending}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -34,8 +34,8 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
         <TextField autoComplete="off" />
       </FormField>
       <FormButtons>
-        <FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
+        <FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
       </FormButtons>
     </Form>
   );

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,8 +1,8 @@
-import { DataColumn, DataTable, Icon, Text } from '@umami/react-zen';
+import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
-import { LinkButton } from '@/components/common/LinkButton';
+import { MenuButton } from '@/components/input/MenuButton';
 
 export function TeamsTable({
   data = [],
@@ -32,12 +32,24 @@ export function TeamsTable({
             const { id } = row;
 
             return (
-              <LinkButton href={`/teams/${id}/settings`}>
-                <Icon>
-                  <Icons.Arrow />
-                </Icon>
-                <Text>{formatMessage(labels.view)}</Text>
-              </LinkButton>
+              <MenuButton>
+                <MenuItem href={`/teams/${id}`}>
+                  <Row alignItems="center" gap>
+                    <Icon>
+                      <Icons.Arrow />
+                    </Icon>
+                    <Text>{formatMessage(labels.view)}</Text>
+                  </Row>
+                </MenuItem>
+                <MenuItem href={`/teams/${id}/settings`}>
+                  <Row alignItems="center" gap>
+                    <Icon>
+                      <Icons.Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Row>
+                </MenuItem>
+              </MenuButton>
             );
           }}
         </DataColumn>

src/app/(main)/settings/users/UserAddForm.tsx

@@ -62,12 +62,12 @@ export function UserAddForm({ onSave, onClose }) {
         </Select>
       </FormField>
       <FormButtons>
-        <FormSubmitButton variant="primary" data-test="button-submit" isDisabled={false}>
-          {formatMessage(labels.save)}
-        </FormSubmitButton>
         <Button isDisabled={isPending} onPress={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
+        <FormSubmitButton variant="primary" data-test="button-submit" isDisabled={false}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

src/app/(main)/settings/users/UserDeleteForm.tsx

@@ -23,7 +23,7 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
   return (
     <ConfirmationForm
       message={formatMessage(messages.confirmDelete, {
-        target: <b key={messages.confirmDelete.id}>{username}</b>,
+        target: <b key={messages.confirmDelete.id}>&nbsp;{username}</b>,
       })}
       onConfirm={handleConfirm}
       onClose={onClose}

src/app/(main)/settings/users/UsersTable.tsx

@@ -1,9 +1,22 @@
-import { Row, Button, Text, Icon, Icons, DataTable, DataColumn } from '@umami/react-zen';
-import Link from 'next/link';
+import {
+  Row,
+  Text,
+  Icon,
+  Icons,
+  DataTable,
+  DataColumn,
+  MenuItem,
+  MenuSeparator,
+  Modal,
+  Dialog,
+} from '@umami/react-zen';
 import { formatDistance } from 'date-fns';
 import { ROLES } from '@/lib/constants';
 import { useMessages, useLocale } from '@/components/hooks';
-import { UserDeleteButton } from './UserDeleteButton';
+import { MenuButton } from '@/components/input/MenuButton';
+import Link from 'next/link';
+import { useState } from 'react';
+import { UserDeleteForm } from '@/app/(main)/settings/users/UserDeleteForm';
 
 export function UsersTable({
   data = [],
@@ -14,48 +27,78 @@ export function UsersTable({
 }) {
   const { formatMessage, labels } = useMessages();
   const { dateLocale } = useLocale();
+  const [deleteUser, setDeleteUser] = useState(null);
+  const handleDelete = () => {};
 
   return (
-    <DataTable data={data}>
-      <DataColumn id="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
-      <DataColumn id="role" label={formatMessage(labels.role)} style={{ maxWidth: 60 }}>
-        {(row: any) =>
-          formatMessage(
-            labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
-          )
-        }
-      </DataColumn>
-      <DataColumn id="created" label={formatMessage(labels.created)} style={{ maxWidth: 60 }}>
-        {(row: any) =>
-          formatDistance(new Date(row.createdAt), new Date(), {
-            addSuffix: true,
-            locale: dateLocale,
-          })
-        }
-      </DataColumn>
-      <DataColumn id="websites" label={formatMessage(labels.websites)} style={{ maxWidth: 60 }}>
-        {(row: any) => row._count.websiteUser}
-      </DataColumn>
-      {showActions && (
-        <DataColumn id="action" align="end">
-          {(row: any) => {
-            const { id, username } = row;
-            return (
-              <Row gap="3">
-                <UserDeleteButton userId={id} username={username} />
-                <Button asChild>
-                  <Link href={`/settings/users/${id}`} data-test="link-button-edit">
-                    <Icon>
-                      <Icons.Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </Link>
-                </Button>
-              </Row>
-            );
-          }}
+    <>
+      <DataTable data={data}>
+        <DataColumn id="username" label={formatMessage(labels.username)} width="2fr">
+          {(row: any) => <Link href={`/settings/users/${row.id}`}>{row.username}</Link>}
         </DataColumn>
-      )}
-    </DataTable>
+        <DataColumn id="role" label={formatMessage(labels.role)}>
+          {(row: any) =>
+            formatMessage(
+              labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
+            )
+          }
+        </DataColumn>
+        <DataColumn id="created" label={formatMessage(labels.created)}>
+          {(row: any) =>
+            formatDistance(new Date(row.createdAt), new Date(), {
+              addSuffix: true,
+              locale: dateLocale,
+            })
+          }
+        </DataColumn>
+        <DataColumn id="websites" label={formatMessage(labels.websites)} width="100px">
+          {(row: any) => row._count.websiteUser}
+        </DataColumn>
+        {showActions && (
+          <DataColumn id="action" align="end" width="100px">
+            {(row: any) => {
+              const { id } = row;
+
+              return (
+                <MenuButton>
+                  <MenuItem href={`/settings/users/${id}`} data-test="link-button-edit">
+                    <Row alignItems="center" gap>
+                      <Icon>
+                        <Icons.Edit />
+                      </Icon>
+                      <Text>{formatMessage(labels.edit)}</Text>
+                    </Row>
+                  </MenuItem>
+                  <MenuSeparator />
+                  <MenuItem id="delete" onAction={() => setDeleteUser(row)}>
+                    <Row alignItems="center" gap>
+                      <Icon>
+                        <Icons.Trash />
+                      </Icon>
+                      <Text>{formatMessage(labels.delete)}</Text>
+                    </Row>
+                  </MenuItem>
+                </MenuButton>
+              );
+            }}
+          </DataColumn>
+        )}
+      </DataTable>
+      <Modal isOpen={!!deleteUser}>
+        <Dialog title={formatMessage(labels.deleteUser)}>
+          {({ close }) => (
+            <UserDeleteForm
+              userId={deleteUser?.id}
+              username={deleteUser?.username}
+              onSave={handleDelete}
+              onClose={() => {
+                close();
+                setDeleteUser(null);
+              }}
+            />
+          )}
+        </Dialog>
+      </Modal>
+    </>
   );
 }

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { Row, Text, Icon, Icons, DataTable, DataColumn, Button } from '@umami/react-zen';
-import Link from 'next/link';
+import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
+import { MenuButton } from '@/components/input/MenuButton';
+import { Lucide } from '@/components/icons';
 
 export interface WebsitesTableProps {
   data: any[];
@@ -36,28 +37,28 @@ export function WebsitesTable({
             const websiteId = row.id;
 
             return (
-              <Row gap="3">
+              <MenuButton>
                 {allowEdit && (
-                  <Button asChild>
-                    <Link href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
-                      <Icon data-test="link-button-edit">
-                        <Icons.Edit />
-                      </Icon>
-                      <Text>{formatMessage(labels.edit)}</Text>
-                    </Link>
-                  </Button>
-                )}
-                {allowView && (
-                  <Button asChild>
-                    <Link href={renderTeamUrl(`/websites/${websiteId}`)}>
+                  <MenuItem href={renderTeamUrl(`/websites/${websiteId}`)}>
+                    <Row alignItems="center" gap>
                       <Icon data-test="link-button-view">
-                        <Icons.Arrow />
+                        <Lucide.Eye />
                       </Icon>
                       <Text>{formatMessage(labels.view)}</Text>
-                    </Link>
-                  </Button>
+                    </Row>
+                  </MenuItem>
                 )}
-              </Row>
+                {allowView && (
+                  <MenuItem href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
+                    <Row alignItems="center" gap>
+                      <Icon data-test="link-button-edit">
+                        <Lucide.SquarePen />
+                      </Icon>
+                      <Text>{formatMessage(labels.edit)}</Text>
+                    </Row>
+                  </MenuItem>
+                )}
+              </MenuButton>
             );
           }}
         </DataColumn>

src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx

@@ -57,7 +57,6 @@ export function WebsiteTransferForm({
   };
 
   const handleChange = (key: Key) => {
-    console.log('KEY', key);
     setTeamId(key as string);
   };