Updated tables. Added MenuButton.

2026-02-04 12:47:13 +01:00 · 2025-05-07 04:10:27 -07:00 · 2025-05-07 04:10:27 -07:00 · a15c7cd596
commit a15c7cd596
parent 92b283486e
27 changed files with 334 additions and 207 deletions
--- a/package.json
+++ b/package.json
@ -79,7 +79,7 @@
    "@prisma/extension-read-replicas": "^0.4.1",
    "@react-spring/web": "^9.7.3",
    "@tanstack/react-query": "^5.74.11",
-    "@umami/react-zen": "^0.90.0",
+    "@umami/react-zen": "^0.96.0",
    "@umami/redis-client": "^0.27.0",
    "bcryptjs": "^2.4.3",
    "chalk": "^4.1.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -39,8 +39,8 @@ importers:
        specifier: ^5.74.11
        version: 5.74.11(react@19.1.0)
      '@umami/react-zen':
-        specifier: ^0.90.0
-        version: 0.90.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))
+        specifier: ^0.96.0
+        version: 0.96.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))
      '@umami/redis-client':
        specifier: ^0.27.0
        version: 0.27.0
@ -2992,8 +2992,8 @@ packages:
    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
    engines: {node: ^16.0.0 || >=18.0.0}

-  '@umami/react-zen@0.90.0':
-    resolution: {integrity: sha512-Hj0/GSQPUtiRwq1ri3nX+anWp5udNQmrKZcHOH/j1B3z4KL/AW+llYyXqP9loG1N+NgEzW66P791Pac8Wo7qpw==}
+  '@umami/react-zen@0.96.0':
+    resolution: {integrity: sha512-ojY3sOehvGbYN29fHrPHyBlsrrjOFJdlftlYTsPQSbX/25SiD1Sk6/WqcY/YEJZS71gZyklc4yjd/EKSZgxJqw==}

  '@umami/redis-client@0.27.0':
    resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
@ -6350,8 +6350,8 @@ packages:
    peerDependencies:
      react: ^16.8.0 || ^17 || ^18 || ^19

-  react-hook-form@7.56.1:
-    resolution: {integrity: sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ==}
+  react-hook-form@7.56.2:
+    resolution: {integrity: sha512-vpfuHuQMF/L6GpuQ4c3ZDo+pRYxIi40gQqsCmmfUBwm+oqvBhKhwghCuj2o00YCgSfU6bR9KC/xnQGWm3Gr08A==}
    engines: {node: '>=18.0.0'}
    peerDependencies:
      react: ^16.8.0 || ^17 || ^18 || ^19
@ -10784,7 +10784,7 @@ snapshots:
      '@typescript-eslint/types': 6.21.0
      eslint-visitor-keys: 3.4.3

-  '@umami/react-zen@0.90.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))':
+  '@umami/react-zen@0.96.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))':
    dependencies:
      '@fontsource/jetbrains-mono': 5.2.5
      '@internationalized/date': 3.8.0
@ -10798,7 +10798,7 @@ snapshots:
      react: 19.1.0
      react-aria-components: 1.8.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      react-dom: 19.1.0(react@19.1.0)
-      react-hook-form: 7.56.1(react@19.1.0)
+      react-hook-form: 7.56.2(react@19.1.0)
      react-icons: 5.5.0(react@19.1.0)
      thenby: 1.3.4
      zustand: 5.0.4(@types/react@19.1.2)(immer@9.0.21)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0))
@ -14702,7 +14702,7 @@ snapshots:
    dependencies:
      react: 19.1.0

-  react-hook-form@7.56.1(react@19.1.0):
+  react-hook-form@7.56.2(react@19.1.0):
    dependencies:
      react: 19.1.0

--- a/src/app/(main)/MenuBar.tsx
+++ b/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 />
--- a/src/app/(main)/settings/profile/LanguageSetting.tsx
+++ b/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('');
    }
--- a/src/app/(main)/settings/profile/PasswordChangeButton.tsx
+++ b/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>
--- a/src/app/(main)/settings/profile/ThemeSetting.tsx
+++ b/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>
--- a/src/app/(main)/settings/teams/TeamAddForm.tsx
+++ b/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>
  );
--- a/src/app/(main)/settings/teams/TeamJoinForm.tsx
+++ b/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>
  );
--- a/src/app/(main)/settings/teams/TeamsTable.tsx
+++ b/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>
--- a/src/app/(main)/settings/users/UserAddForm.tsx
+++ b/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>
  );
--- a/src/app/(main)/settings/users/UserDeleteForm.tsx
+++ b/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}
--- a/src/app/(main)/settings/users/UsersTable.tsx
+++ b/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>
+    </>
  );
 }
--- a/src/app/(main)/settings/websites/WebsitesTable.tsx
+++ b/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>
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx
+++ b/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);
  };

--- a/src/app/(main)/teams/[teamId]/settings/members/TeamMemberEditButton.tsx
+++ b/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 }) => (
--- a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx
+++ b/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>
            )
          );
        }}
--- a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx
+++ b/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>
--- a/src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
+++ b/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' }),
    },
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/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>
  );
 }
--- a/src/components/charts/BarChart.tsx
+++ b/src/components/charts/BarChart.tsx
@ -49,10 +49,11 @@ export function BarChart({
  const [tooltip, setTooltip] = useState(null);
  const { theme } = useTheme();
  const { locale } = useLocale();
-  const { colors } = getThemeColors(theme);
+  const { colors } = useMemo(() => getThemeColors(theme), [theme]);

  const options: any = useMemo(() => {
    return {
+      __id: new Date().getTime(),
      scales: {
        x: {
          type: XAxisType,
@ -98,21 +99,21 @@ export function BarChart({
  const handleTooltip = ({ tooltip }: { tooltip: any }) => {
    const { opacity, labelColors, dataPoints } = tooltip;

-    if (opacity) {
-      setTooltip({
-        title: formatDate(
-          new Date(dataPoints[0].raw?.d || dataPoints[0].raw?.x || dataPoints[0].raw),
-          dateFormats[unit],
-          locale,
-        ),
-        color: labelColors?.[0]?.backgroundColor,
-        value: currency
-          ? formatLongCurrency(dataPoints[0].raw.y, currency)
-          : `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`,
-      });
-    } else {
-      setTooltip(null);
-    }
+    setTooltip(
+      opacity
+        ? {
+            title: formatDate(
+              new Date(dataPoints[0].raw?.d || dataPoints[0].raw?.x || dataPoints[0].raw),
+              dateFormats[unit],
+              locale,
+            ),
+            color: labelColors?.[0]?.backgroundColor,
+            value: currency
+              ? formatLongCurrency(dataPoints[0].raw.y, currency)
+              : `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`,
+          }
+        : null,
+    );
  };

  return (
--- a/src/components/common/SideMenu.tsx
+++ b/src/components/common/SideMenu.tsx
@ -1,17 +1,21 @@
-import { Text, List, ListItem } from '@umami/react-zen';
+import { ReactNode } from 'react';
+import { Text, List, ListItem, Icon, Row } from '@umami/react-zen';

 export interface SideMenuProps {
-  items: { id: string; label: string; url: string }[];
+  items: { id: string; label: string; url: string; icon?: ReactNode }[];
  selectedKey?: string;
 }

 export function SideMenu({ items, selectedKey }: SideMenuProps) {
  return (
    <List>
-      {items.map(({ id, label, url }) => {
+      {items.map(({ id, label, url, icon }) => {
        return (
          <ListItem key={id} id={id} href={url}>
-            <Text weight={id === selectedKey ? 'bold' : 'regular'}>{label}</Text>
+            <Row alignItems="center" gap>
+              {icon && <Icon>{icon}</Icon>}
+              <Text weight={id === selectedKey ? 'bold' : 'regular'}>{label}</Text>
+            </Row>
          </ListItem>
        );
      })}
--- a/src/components/hooks/useNavigation.ts
+++ b/src/components/hooks/useNavigation.ts
@ -6,7 +6,8 @@ export function useNavigation() {
  const router = useRouter();
  const pathname = usePathname();
  const params = useSearchParams();
-  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
+  const [, teamId] = pathname.match(/\/teams\/([a-f0-9-]+)/) || [];
+  const [, websiteId] = pathname.match(/\/websites\/([a-f0-9-]+)/) || [];

  const query = useMemo<{ [key: string]: any }>(() => {
    const obj = {};
@ -26,5 +27,5 @@ export function useNavigation() {
    return teamId ? `/teams/${teamId}${url}` : url;
  }

-  return { pathname, query, router, renderUrl, renderTeamUrl, teamId };
+  return { pathname, query, router, renderUrl, renderTeamUrl, teamId, websiteId };
 }
--- a/src/components/input/DateFilter.tsx
+++ b/src/components/input/DateFilter.tsx
@ -22,7 +22,6 @@ export function DateFilter({
  value,
  onChange,
  showAllTime = false,
-  ...props
 }: DateFilterProps) {
  const { formatMessage, labels } = useMessages();
  const [showPicker, setShowPicker] = useState(false);
@ -93,7 +92,7 @@ export function DateFilter({
  };

  const renderValue = ({ defaultChildren }) => {
-    return value.startsWith('range') ? (
+    return value?.startsWith('range') ? (
      <DateDisplay startDate={startDate} endDate={endDate} />
    ) : (
      defaultChildren
@ -103,10 +102,9 @@ export function DateFilter({
  return (
    <>
      <Select
-        {...props}
        selectedKey={value}
        placeholder={formatMessage(labels.selectDate)}
-        onSelectionChange={handleChange}
+        onChange={handleChange}
        renderValue={renderValue}
      >
        {options.map(({ label, value, divider }: any) => {
--- a/src/components/input/MenuButton.tsx
+++ b/src/components/input/MenuButton.tsx
@ -0,0 +1,30 @@
+import { ReactNode, Key } from 'react';
+import { DialogTrigger, Button, Menu, Popover, Icon } from '@umami/react-zen';
+import { Lucide } from '@/components/icons';
+
+export function MenuButton({
+  children,
+  onAction,
+}: {
+  children: ReactNode;
+  onAction?: (action: string) => void;
+}) {
+  const handleAction = (key: Key) => {
+    onAction?.(key.toString());
+  };
+
+  return (
+    <DialogTrigger>
+      <Button variant="outline">
+        <Icon>
+          <Lucide.Ellipsis />
+        </Icon>
+      </Button>
+      <Popover>
+        <Menu onAction={handleAction} style={{ minWidth: '140px' }}>
+          {children}
+        </Menu>
+      </Popover>
+    </DialogTrigger>
+  );
+}
--- a/src/components/input/TeamsButton.tsx
+++ b/src/components/input/TeamsButton.tsx
@ -45,7 +45,7 @@ export function TeamsButton({
      <Button className={className} variant="quiet">
        <Row alignItems="center" gap="3">
          <Icon>{teamId ? <Users /> : <User />}</Icon>
-          {showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
+          {showText && <Text>{teamId ? team?.name : user.username}</Text>}
          <Icon rotate={90} size="xs">
            <Icons.Chevron />
          </Icon>
--- a/src/components/input/WebsiteSelect.tsx
+++ b/src/components/input/WebsiteSelect.tsx
@ -1,19 +1,23 @@
-import { useState, Key } from 'react';
+import { useState } from 'react';
 import { Select, ListItem } from '@umami/react-zen';
 import { useWebsites, useMessages } from '@/components/hooks';
+import type { SelectProps } from '@umami/react-zen/Select';

 export function WebsiteSelect({
  websiteId,
  teamId,
+  variant,
  onSelect,
+  ...props
 }: {
  websiteId?: string;
  teamId?: string;
+  variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
  onSelect?: (key: any) => void;
-}) {
+} & SelectProps) {
  const { formatMessage, labels } = useMessages();
  const [search, setSearch] = useState('');
-  const [selectedId, setSelectedId] = useState<Key>(websiteId);
+  const [selectedId, setSelectedId] = useState(websiteId);

  const queryResult = useWebsites({ teamId }, { search, pageSize: 5 });

@ -26,15 +30,20 @@ export function WebsiteSelect({
    setSearch(value);
  };

+  const items = queryResult?.result?.data as any[];
+
  return (
    <Select
-      items={queryResult?.result?.data as any[]}
-      value={selectedId as string}
-      onChange={handleSelect}
+      {...props}
+      items={items}
+      value={selectedId}
      placeholder={formatMessage(labels.selectWebsite)}
-      allowSearch={true}
-      onSearch={handleSearch}
      isLoading={queryResult.query.isLoading}
+      buttonProps={{ variant }}
+      allowSearch={true}
+      searchValue={search}
+      onSearch={handleSearch}
+      onChange={handleSelect}
    >
      {({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
    </Select>
--- a/src/components/metrics/PageviewsChart.tsx
+++ b/src/components/metrics/PageviewsChart.tsx
@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTheme } from '@umami/react-zen';
 import { BarChart, BarChartProps } from '@/components/charts/BarChart';
 import { useLocale, useMessages } from '@/components/hooks';
@ -28,8 +28,8 @@ export function PageviewsChart({
 }: PageviewsChartProps) {
  const { formatMessage, labels } = useMessages();
  const { theme } = useTheme();
-  const { colors } = getThemeColors(theme);
  const { locale } = useLocale();
+  const { colors } = useMemo(() => getThemeColors(theme), [theme]);

  const chartData = useMemo(() => {
    if (!data) {
@ -37,6 +37,7 @@ export function PageviewsChart({
    }

    return {
+      __id: new Date().getTime(),
      datasets: [
        {
          label: formatMessage(labels.visitors),
@ -78,6 +79,8 @@ export function PageviewsChart({
    };
  }, [data, locale]);

+  const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]);
+
  return (
    <BarChart
      {...props}
@ -85,7 +88,7 @@ export function PageviewsChart({
      unit={unit}
      isLoading={isLoading}
      isAllTime={isAllTime}
-      renderXLabel={renderDateLabels(unit, locale)}
+      renderXLabel={renderXLabel}
    />
  );
 }