Updated tables. Added MenuButton.

src/app/(main)/MenuBar.tsx

@@ -6,9 +6,13 @@ import type { RowProps } from '@umami/react-zen/Row';
 import useGlobalState from '@/components/hooks/useGlobalState';
 import { Lucide } from '@/components/icons';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
+import { useNavigation } from '@/components/hooks';
 
 export function MenuBar(props: RowProps) {
   const [isCollapsed, setCollapsed] = useGlobalState('sidenav-collapsed');
+  const { websiteId } = useNavigation();
+
+  const handleSelect = () => {};
 
   return (
     <Row
@@ -27,11 +31,17 @@ export function MenuBar(props: RowProps) {
             <Lucide.PanelLeft />
           </Icon>
         </Button>
-        <TeamsButton />
-        <Icon>
-          <Lucide.Slash />
-        </Icon>
-        <WebsiteSelect />
+        <Row alignItems="center" gap="1">
+          <TeamsButton />
+          {websiteId && (
+            <>
+              <Icon strokeColor="7" rotate={-25}>
+                <Lucide.Slash />
+              </Icon>
+              <WebsiteSelect variant="quiet" websiteId={websiteId} onSelect={handleSelect} />
+            </>
+          )}
+        </Row>
       </Row>
       <Row alignItems="center" justifyContent="flex-end">
         <ThemeButton />

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

src/app/(main)/teams/[teamId]/settings/members/TeamMemberEditButton.tsx

@@ -1,6 +1,7 @@
 import { useMessages, useModified } from '@/components/hooks';
 import {
-  Button,
+  Row,
+  Pressable,
   Icon,
   Icons,
   Modal,
@@ -34,12 +35,14 @@ export function TeamMemberEditButton({
 
   return (
     <DialogTrigger>
-      <Button>
-        <Icon>
-          <Icons.Edit />
-        </Icon>
-        <Text>{formatMessage(labels.edit)}</Text>
-      </Button>
+      <Pressable>
+        <Row alignItems="center" gap>
+          <Icon>
+            <Icons.Edit />
+          </Icon>
+          <Text>{formatMessage(labels.edit)}</Text>
+        </Row>
+      </Pressable>
       <Modal>
         <Dialog title={formatMessage(labels.editMember)}>
           {({ close }) => (

src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx

@@ -1,8 +1,9 @@
-import { DataColumn, DataTable } from '@umami/react-zen';
+import { DataColumn, DataTable, MenuItem } from '@umami/react-zen';
 import { useMessages, useLoginQuery } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
 import { TeamMemberEditButton } from './TeamMemberEditButton';
+import { MenuButton } from '@/components/input/MenuButton';
 
 export function TeamMembersTable({
   data = [],
@@ -37,14 +38,18 @@ export function TeamMembersTable({
             allowEdit &&
             row?.role !== ROLES.teamOwner &&
             user?.id !== row?.user?.id && (
-              <>
-                <TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
-                <TeamMemberRemoveButton
-                  teamId={teamId}
-                  userId={row?.user?.id}
-                  userName={row?.user?.username}
-                />
-              </>
+              <MenuButton>
+                <MenuItem>
+                  <TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
+                </MenuItem>
+                <MenuItem>
+                  <TeamMemberRemoveButton
+                    teamId={teamId}
+                    userId={row?.user?.id}
+                    userName={row?.user?.username}
+                  />
+                </MenuItem>
+              </MenuButton>
             )
           );
         }}

src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx

@@ -1,7 +1,7 @@
-import { DataColumn, DataTable, Icon, Text } from '@umami/react-zen';
+import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
-import { LinkButton } from '@/components/common/LinkButton';
+import { MenuButton } from '@/components/input/MenuButton';
 
 export function TeamWebsitesTable({
   teamId,
@@ -25,23 +25,28 @@ export function TeamWebsitesTable({
       <DataColumn id="action" label=" " align="end">
         {(row: any) => {
           const { id: websiteId } = row;
+
           return (
-            <>
-              {allowEdit && (teamId || user?.isAdmin) && (
-                <LinkButton href={`/teams/${teamId}/settings/websites/${websiteId}`}>
+            <MenuButton>
+              <MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
+                <Row alignItems="center" gap>
                   <Icon>
-                    <Icons.Edit />
+                    <Icons.Arrow />
                   </Icon>
-                  <Text>{formatMessage(labels.edit)}</Text>
-                </LinkButton>
+                  <Text>{formatMessage(labels.view)}</Text>
+                </Row>
+              </MenuItem>
+              {allowEdit && (teamId || user?.isAdmin) && (
+                <MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
+                  <Row alignItems="center" gap>
+                    <Icon>
+                      <Icons.Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Row>
+                </MenuItem>
               )}
-              <LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
-                <Icon>
-                  <Icons.Arrow />
-                </Icon>
-                <Text>{formatMessage(labels.view)}</Text>
-              </LinkButton>
-            </>
+            </MenuButton>
           );
         }}
       </DataColumn>

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

@@ -53,72 +53,72 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
 
   const items = [
     {
-      key: 'url',
+      id: 'url',
       label: formatMessage(labels.pages),
       url: renderUrl({ view: 'url' }),
     },
     {
-      key: 'referrer',
+      id: 'referrer',
       label: formatMessage(labels.referrers),
       url: renderUrl({ view: 'referrer' }),
     },
     {
-      key: 'browser',
+      id: 'browser',
       label: formatMessage(labels.browsers),
       url: renderUrl({ view: 'browser' }),
     },
     {
-      key: 'os',
+      id: 'os',
       label: formatMessage(labels.os),
       url: renderUrl({ view: 'os' }),
     },
     {
-      key: 'device',
+      id: 'device',
       label: formatMessage(labels.devices),
       url: renderUrl({ view: 'device' }),
     },
     {
-      key: 'country',
+      id: 'country',
       label: formatMessage(labels.countries),
       url: renderUrl({ view: 'country' }),
     },
     {
-      key: 'region',
+      id: 'region',
       label: formatMessage(labels.regions),
       url: renderUrl({ view: 'region' }),
     },
     {
-      key: 'city',
+      id: 'city',
       label: formatMessage(labels.cities),
       url: renderUrl({ view: 'city' }),
     },
     {
-      key: 'language',
+      id: 'language',
       label: formatMessage(labels.languages),
       url: renderUrl({ view: 'language' }),
     },
     {
-      key: 'screen',
+      id: 'screen',
       label: formatMessage(labels.screens),
       url: renderUrl({ view: 'screen' }),
     },
     {
-      key: 'event',
+      id: 'event',
       label: formatMessage(labels.events),
       url: renderUrl({ view: 'event' }),
     },
     {
-      key: 'query',
+      id: 'query',
       label: formatMessage(labels.queryParameters),
       url: renderUrl({ view: 'query' }),
     },
     {
-      key: 'host',
+      id: 'host',
       label: formatMessage(labels.hosts),
       url: renderUrl({ view: 'host' }),
     },
     {
-      key: 'tag',
+      id: 'tag',
       label: formatMessage(labels.tags),
       url: renderUrl({ view: 'tag' }),
     },

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

@@ -17,6 +17,7 @@ import { RegionsTable } from '@/components/metrics/RegionsTable';
 import { ScreenTable } from '@/components/metrics/ScreenTable';
 import { TagsTable } from '@/components/metrics/TagsTable';
 import { ChannelsTable } from '@/components/metrics/ChannelsTable';
+import { Panel } from '@/components/common/Panel';
 
 const views = {
   url: PagesTable,
@@ -134,27 +135,29 @@ export function WebsiteExpandedView({
   const DetailsComponent = views[view] || (() => null);
 
   return (
-    <Grid columns="auto 1fr" gap="6" marginTop="6">
-      <Column gap="6" width="200px">
-        <LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}>
-          <Icon rotate={180}>
-            <Icons.Arrow />
-          </Icon>
-          <Text>{formatMessage(labels.back)}</Text>
-        </LinkButton>
-        <SideMenu items={items} selectedKey={view} />
-      </Column>
-      <Column>
-        <DetailsComponent
-          websiteId={websiteId}
-          domainName={domainName}
-          animate={false}
-          virtualize={true}
-          itemCount={25}
-          allowFilter={true}
-          allowSearch={true}
-        />
-      </Column>
-    </Grid>
+    <Panel>
+      <Grid columns="auto 1fr" gap="6">
+        <Column gap="6" width="200px" border="right" paddingRight="3">
+          <LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}>
+            <Icon rotate={180}>
+              <Icons.Arrow />
+            </Icon>
+            <Text>{formatMessage(labels.back)}</Text>
+          </LinkButton>
+          <SideMenu items={items} selectedKey={view} />
+        </Column>
+        <Column>
+          <DetailsComponent
+            websiteId={websiteId}
+            domainName={domainName}
+            animate={false}
+            virtualize={true}
+            itemCount={25}
+            allowFilter={true}
+            allowSearch={true}
+          />
+        </Column>
+      </Grid>
+    </Panel>
   );
 }