Settings refactor.

src/app/(main)/admin/teams/[teamId]/AdminTeamPage.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { TeamDetails } from '@/app/(main)/teams/[teamId]/settings/team/TeamDetails';
+import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
 import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
 
 export function AdminTeamPage({ teamId }: { teamId: string }) {

src/app/(main)/admin/users/[userId]/UserProvider.tsx

@@ -1,22 +1,19 @@
-import { createContext, ReactNode, useEffect } from 'react';
+import { createContext, ReactNode } from 'react';
 import { Loading } from '@umami/react-zen';
-import { useModified, useUserQuery } from '@/components/hooks';
+import { useUserQuery } from '@/components/hooks';
 
 export const UserContext = createContext(null);
 
 export function UserProvider({ userId, children }: { userId: string; children: ReactNode }) {
-  const { modified } = useModified(`user:${userId}`);
-  const { data: user, isFetching, isLoading, refetch } = useUserQuery(userId);
-
-  useEffect(() => {
-    if (modified) {
-      refetch();
-    }
-  }, [modified]);
+  const { data: user, isFetching, isLoading } = useUserQuery(userId);
 
   if (isFetching && isLoading) {
     return <Loading position="page" />;
   }
 
-  return <UserContext.Provider value={{ ...user, modified }}>{children}</UserContext.Provider>;
+  if (!user) {
+    return null;
+  }
+
+  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
 }

src/app/(main)/settings/SettingsLayout.tsx

@@ -13,6 +13,11 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
   const { pathname } = useNavigation();
 
   const items = [
+    {
+      id: 'preferences',
+      label: formatMessage(labels.preferences),
+      url: '/settings/preferences',
+    },
     {
       id: 'profile',
       label: formatMessage(labels.profile),

src/app/(main)/settings/preferences/PreferenceSettings.tsx

@@ -0,0 +1,39 @@
+import { Column, Label } from '@umami/react-zen';
+import { useLoginQuery, useMessages } from '@/components/hooks';
+import { TimezoneSetting } from './TimezoneSetting';
+import { DateRangeSetting } from './DateRangeSetting';
+import { LanguageSetting } from './LanguageSetting';
+import { ThemeSetting } from './ThemeSetting';
+
+export function PreferenceSettings() {
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <Column width="400px" gap="6">
+      <Column>
+        <Label>{formatMessage(labels.defaultDateRange)}</Label>
+        <DateRangeSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.language)}</Label>
+        <LanguageSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.timezone)}</Label>
+        <TimezoneSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.theme)}</Label>
+        <ThemeSetting />
+      </Column>
+    </Column>
+  );
+}

src/app/(main)/settings/preferences/PreferencesPage.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { PreferenceSettings } from './PreferenceSettings';
+
+export function PreferencesPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Column gap>
+      <SectionHeader title={formatMessage(labels.preferences)} />
+      <PreferenceSettings />
+    </Column>
+  );
+}

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

@@ -6,15 +6,12 @@ export function ThemeSetting() {
 
   return (
     <Row gap>
-      <Button
-        variant={theme === 'light' ? 'primary' : 'secondary'}
-        onPress={() => setTheme('light')}
-      >
+      <Button variant={theme === 'light' ? 'primary' : undefined} onPress={() => setTheme('light')}>
         <Icon>
           <Sun />
         </Icon>
       </Button>
-      <Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}>
+      <Button variant={theme === 'dark' ? 'primary' : undefined} onPress={() => setTheme('dark')}>
         <Icon>
           <Moon />
         </Icon>

src/app/(main)/settings/preferences/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import { PreferencesPage } from './PreferencesPage';
+
+export default function () {
+  return <PreferencesPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Preferences',
+};

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

@@ -1,4 +1,13 @@
-import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
+import {
+  Button,
+  Icon,
+  Text,
+  useToast,
+  DialogTrigger,
+  Dialog,
+  Modal,
+  Column,
+} from '@umami/react-zen';
 import { PasswordEditForm } from './PasswordEditForm';
 import { LockKeyhole } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
@@ -21,7 +30,11 @@ export function PasswordChangeButton() {
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.changePassword)}>
-          {({ close }) => <PasswordEditForm onSave={handleSave} onClose={close} />}
+          {({ close }) => (
+            <Column width="300px">
+              <PasswordEditForm onSave={handleSave} onClose={close} />
+            </Column>
+          )}
         </Dialog>
       </Modal>
     </DialogTrigger>

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

@@ -1,10 +1,6 @@
 import { Row, Column, Label } from '@umami/react-zen';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
-import { TimezoneSetting } from './TimezoneSetting';
-import { DateRangeSetting } from './DateRangeSetting';
-import { LanguageSetting } from './LanguageSetting';
-import { ThemeSetting } from './ThemeSetting';
 import { PasswordChangeButton } from './PasswordChangeButton';
 
 export function ProfileSettings() {
@@ -52,26 +48,6 @@ export function ProfileSettings() {
           </Row>
         </Column>
       )}
-
-      <Column>
-        <Label>{formatMessage(labels.defaultDateRange)}</Label>
-        <DateRangeSetting />
-      </Column>
-
-      <Column>
-        <Label>{formatMessage(labels.language)}</Label>
-        <LanguageSetting />
-      </Column>
-
-      <Column>
-        <Label>{formatMessage(labels.timezone)}</Label>
-        <TimezoneSetting />
-      </Column>
-
-      <Column>
-        <Label>{formatMessage(labels.theme)}</Label>
-        <ThemeSetting />
-      </Column>
     </Column>
   );
 }

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

@@ -25,7 +25,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
       <FormField name="name" label={formatMessage(labels.name)}>
         <TextField autoComplete="off" />
       </FormField>

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

@@ -25,7 +25,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
       <FormField
         label={formatMessage(labels.accessCode)}
         name="accessCode"

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

@@ -6,17 +6,16 @@ import { ReactNode } from 'react';
 export function TeamsDataTable({
   allowEdit,
   showActions,
-  children,
 }: {
   allowEdit?: boolean;
   showActions?: boolean;
   children?: ReactNode;
 }) {
   const { user } = useLoginQuery();
-  const queryResult = useUserTeamsQuery(user.id);
+  const query = useUserTeamsQuery(user.id);
 
   return (
-    <DataGrid query={queryResult} renderEmpty={() => children}>
+    <DataGrid query={query}>
       {({ data }) => {
         return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
       }}

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

@@ -1,8 +1,9 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import { Arrow, Edit } from '@/components/icons';
+import { Eye, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
 import { MenuButton } from '@/components/input/MenuButton';
+import Link from 'next/link';
 
 export function TeamsTable({
   data = [],
@@ -16,7 +17,9 @@ export function TeamsTable({
 
   return (
     <DataTable data={data}>
-      <DataColumn id="name" label={formatMessage(labels.name)} />
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {(row: any) => <Link href={`/settings/teams/${row.id}`}>{row.name}</Link>}
+      </DataColumn>
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
         {(row: any) => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
       </DataColumn>
@@ -36,12 +39,12 @@ export function TeamsTable({
                 <MenuItem href={`/teams/${id}`}>
                   <Row alignItems="center" gap>
                     <Icon>
-                      <Arrow />
+                      <Eye />
                     </Icon>
                     <Text>{formatMessage(labels.view)}</Text>
                   </Row>
                 </MenuItem>
-                <MenuItem href={`/teams/${id}/settings`}>
+                <MenuItem href={`/settings/teams/${id}`}>
                   <Row alignItems="center" gap>
                     <Icon>
                       <Edit />

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

@@ -8,8 +8,8 @@ import { Users } from '@/components/icons';
 import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
 import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
-import { TeamWebsitesDataTable } from '@/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable';
-import { TeamMembersDataTable } from '@/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable';
+import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
+import { TeamMembersDataTable } from './TeamMembersDataTable';
 
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
@@ -22,10 +22,12 @@ export function TeamDetails({ teamId }: { teamId: string }) {
     user.role !== ROLES.viewOnly;
 
   const canEdit =
-    !!team?.teamUser?.find(
+    user.isAdmin ||
+    (!!team?.teamUser?.find(
       ({ userId, role }) =>
         (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
-    ) && user.role !== ROLES.viewOnly;
+    ) &&
+      user.role !== ROLES.viewOnly);
 
   return (
     <Column gap>

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

@@ -6,7 +6,6 @@ import {
   TextField,
   Button,
   useToast,
-  Text,
 } from '@umami/react-zen';
 import { getRandomChars } from '@/lib/crypto';
 import { useContext } from 'react';
@@ -15,28 +14,38 @@ import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 
 const generateId = () => `team_${getRandomChars(16)}`;
 
-export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?: boolean }) {
+export function TeamEditForm({
+  teamId,
+  allowEdit,
+  onSave,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+  onSave?: () => void;
+}) {
   const team = useContext(TeamContext);
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
   const { mutate, error } = useMutation({
     mutationFn: (data: any) => post(`/teams/${teamId}`, data),
   });
-  const { toast } = useToast();
-  const { touch } = useModified();
-  const cloudMode = !!process.env.cloudMode;
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         touch('teams');
+        touch(`teams:${teamId}`);
         toast(formatMessage(messages.saved));
+        onSave?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }} style={{ width: 400 }}>
       {({ setValue }) => {
         return (
           <>
@@ -48,22 +57,16 @@ export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?
               label={formatMessage(labels.name)}
               rules={{ required: formatMessage(labels.required) }}
             >
-              {allowEdit ? <TextField /> : <Text>{team?.name}</Text>}
+              <TextField isReadOnly={!allowEdit} />
+            </FormField>
+            <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
+              <TextField isReadOnly allowCopy />
             </FormField>
-            {!cloudMode && allowEdit && (
-              <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
-                <TextField isReadOnly allowCopy />
-              </FormField>
-            )}
             {allowEdit && (
               <FormButtons justifyContent="space-between">
-                {allowEdit && (
-                  <Button
-                    onPress={() => setValue('accessCode', generateId(), { shouldDirty: true })}
-                  >
-                    {formatMessage(labels.regenerate)}
-                  </Button>
-                )}
+                <Button onPress={() => setValue('accessCode', generateId(), { shouldDirty: true })}>
+                  {formatMessage(labels.regenerate)}
+                </Button>
                 <FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
               </FormButtons>
             )}

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

@@ -1,14 +1,5 @@
 import { useMessages, useModified } from '@/components/hooks';
-import {
-  Row,
-  Pressable,
-  Icon,
-  Modal,
-  DialogTrigger,
-  Dialog,
-  Text,
-  useToast,
-} from '@umami/react-zen';
+import { Row, Button, Icon, Modal, DialogTrigger, Dialog, useToast } from '@umami/react-zen';
 import { TeamMemberEditForm } from './TeamMemberEditForm';
 import { Edit } from '@/components/icons';
 
@@ -28,21 +19,20 @@ export function TeamMemberEditButton({
   const { touch } = useModified();
 
   const handleSave = () => {
-    toast(formatMessage(messages.saved));
     touch('teams:members');
+    toast(formatMessage(messages.saved));
     onSave?.();
   };
 
   return (
     <DialogTrigger>
-      <Pressable>
+      <Button variant="quiet">
         <Row alignItems="center" gap>
           <Icon>
             <Edit />
           </Icon>
-          <Text>{formatMessage(labels.edit)}</Text>
         </Row>
-      </Pressable>
+      </Button>
       <Modal>
         <Dialog title={formatMessage(labels.editMember)}>
           {({ close }) => (

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

@@ -39,7 +39,7 @@ export function TeamMemberEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={{ role }}>
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }} style={{ minWidth: 400 }}>
       <FormField
         name="role"
         rules={{ required: formatMessage(labels.required) }}
@@ -53,12 +53,12 @@ export function TeamMemberEditForm({
       </FormField>
 
       <FormButtons>
-        <FormSubmitButton variant="primary" isDisabled={false}>
-          {formatMessage(labels.save)}
-        </FormSubmitButton>
         <Button isDisabled={isPending} onPress={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
+        <FormSubmitButton variant="primary" isDisabled={false}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

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

@@ -1,8 +1,8 @@
 import { ConfirmationForm } from '@/components/common/ConfirmationForm';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { messages } from '@/components/messages';
-import { Close } from '@/components/icons';
-import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { Trash } from '@/components/icons';
+import { Button, Icon, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
 
 export function TeamMemberRemoveButton({
   teamId,
@@ -35,11 +35,10 @@ export function TeamMemberRemoveButton({
 
   return (
     <DialogTrigger>
-      <Button>
+      <Button variant="quiet">
         <Icon>
-          <Close />
+          <Trash />
         </Icon>
-        <Text>{formatMessage(labels.remove)}</Text>
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.removeMember)}>
@@ -53,6 +52,7 @@ export function TeamMemberRemoveButton({
               onConfirm={handleConfirm.bind(null, close)}
               onClose={close}
               buttonLabel={formatMessage(labels.remove)}
+              buttonVariant="danger"
             />
           )}
         </Dialog>

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

@@ -12,7 +12,7 @@ export function TeamMembersDataTable({
   const queryResult = useTeamMembersQuery(teamId);
 
   return (
-    <DataGrid query={queryResult}>
+    <DataGrid query={queryResult} allowSearch>
       {({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
     </DataGrid>
   );

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

@@ -1,9 +1,8 @@
-import { DataColumn, DataTable, MenuItem } from '@umami/react-zen';
-import { useMessages, useLoginQuery } from '@/components/hooks';
+import { DataColumn, DataTable, Row } from '@umami/react-zen';
+import { useMessages } 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 = [],
@@ -15,7 +14,6 @@ export function TeamMembersTable({
   allowEdit: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLoginQuery();
 
   const roles = {
     [ROLES.teamOwner]: formatMessage(labels.teamOwner),
@@ -32,28 +30,22 @@ export function TeamMembersTable({
       <DataColumn id="role" label={formatMessage(labels.role)}>
         {(row: any) => roles[row?.role]}
       </DataColumn>
-      <DataColumn id="action" align="end">
-        {(row: any) => {
-          return (
-            allowEdit &&
-            row?.role !== ROLES.teamOwner &&
-            user?.id !== row?.user?.id && (
-              <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>
-            )
-          );
-        }}
-      </DataColumn>
+      {allowEdit && (
+        <DataColumn id="action" align="end">
+          {(row: any) => {
+            return (
+              <Row alignItems="center">
+                <TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
+                <TeamMemberRemoveButton
+                  teamId={teamId}
+                  userId={row?.user?.id}
+                  userName={row?.user?.username}
+                />
+              </Row>
+            );
+          }}
+        </DataColumn>
+      )}
     </DataTable>
   );
 }

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

@@ -0,0 +1,11 @@
+'use client';
+import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
+
+export function TeamSettingsPage({ teamId }: { teamId: string }) {
+  return (
+    <TeamProvider teamId={teamId}>
+      <TeamDetails teamId={teamId} />
+    </TeamProvider>
+  );
+}

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

@@ -12,7 +12,7 @@ export function TeamWebsitesDataTable({
   const queryResult = useTeamWebsitesQuery(teamId);
 
   return (
-    <DataGrid query={queryResult}>
+    <DataGrid query={queryResult} allowSearch>
       {({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
     </DataGrid>
   );

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

@@ -1,7 +1,8 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
 import { useLoginQuery, useMessages } from '@/components/hooks';
-import { Arrow, Edit } from '@/components/icons';
+import { Eye, Edit } from '@/components/icons';
 import { MenuButton } from '@/components/input/MenuButton';
+import Link from 'next/link';
 
 export function TeamWebsitesTable({
   teamId,
@@ -17,7 +18,9 @@ export function TeamWebsitesTable({
 
   return (
     <DataTable data={data}>
-      <DataColumn id="name" label={formatMessage(labels.name)} />
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {(row: any) => <Link href={`/settings/websites/${row.id}`}>{row.name}</Link>}
+      </DataColumn>
       <DataColumn id="domain" label={formatMessage(labels.domain)} />
       <DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
         {(row: any) => row?.createUser?.username}
@@ -31,7 +34,7 @@ export function TeamWebsitesTable({
               <MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
                 <Row alignItems="center" gap>
                   <Icon>
-                    <Arrow />
+                    <Eye />
                   </Icon>
                   <Text>{formatMessage(labels.view)}</Text>
                 </Row>

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

@@ -1,12 +1,12 @@
 import { Metadata } from 'next';
-import { TeamPage } from './TeamPage';
+import { TeamSettingsPage } from './TeamSettingsPage';
 
 export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
   const { teamId } = await params;
 
-  return <TeamPage teamId={teamId} />;
+  return <TeamSettingsPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
-  title: 'Teams Details',
+  title: 'Teams',
 };

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

@@ -1,5 +1,14 @@
 import { useMessages, useModified } from '@/components/hooks';
-import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
+import {
+  Button,
+  Icon,
+  Modal,
+  Dialog,
+  DialogTrigger,
+  Text,
+  Column,
+  useToast,
+} from '@umami/react-zen';
 import { Plus } from '@/components/icons';
 import { WebsiteAddForm } from './WebsiteAddForm';
 
@@ -24,7 +33,11 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.addWebsite)}>
-          {({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
+          {({ close }) => (
+            <Column width="300px">
+              <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
+            </Column>
+          )}
         </Dialog>
       </Modal>
     </DialogTrigger>

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

@@ -6,7 +6,7 @@ import { Eye, SquarePen } from '@/components/icons';
 import Link from 'next/link';
 
 export interface WebsitesTableProps {
-  data: any[];
+  data: Record<string, any>[];
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
@@ -22,7 +22,8 @@ export function WebsitesTable({
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { renderUrl } = useNavigation();
+  const { renderUrl, pathname } = useNavigation();
+  const isSettings = pathname.includes('/settings');
 
   if (!data?.length) {
     return children;
@@ -31,7 +32,11 @@ export function WebsitesTable({
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>}
+        {(row: any) => (
+          <Link href={renderUrl(`${isSettings ? '/settings' : ''}/websites/${row.id}`, false)}>
+            {row.name}
+          </Link>
+        )}
       </DataColumn>
       <DataColumn id="domain" label={formatMessage(labels.domain)} />
       {showActions && (
@@ -41,7 +46,7 @@ export function WebsitesTable({
 
             return (
               <MenuButton>
-                {allowEdit && (
+                {allowView && (
                   <MenuItem href={renderUrl(`/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-view">
@@ -51,7 +56,7 @@ export function WebsitesTable({
                     </Row>
                   </MenuItem>
                 )}
-                {allowView && (
+                {allowEdit && (
                   <MenuItem href={renderUrl(`/settings/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-edit">

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

@@ -33,7 +33,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 420 }}>
+    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 400 }}>
       <FormField name="id" label={formatMessage(labels.websiteId)}>
         <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
       </FormField>

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

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { useMessages } from '@/components/hooks';
-import { Globe, Arrow } from '@/components/icons';
+import { Globe, Eye } from '@/components/icons';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
@@ -25,7 +25,7 @@ export function WebsiteSettings({
       <SectionHeader title={website?.name} icon={<Globe />}>
         <LinkButton href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Icon>
-            <Arrow />
+            <Eye />
           </Icon>
           <Text>{formatMessage(labels.view)}</Text>
         </LinkButton>
@@ -35,7 +35,7 @@ export function WebsiteSettings({
           <Tab id="details">{formatMessage(labels.details)}</Tab>
           <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
           <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
-          <Tab id="data">{formatMessage(labels.data)}</Tab>
+          <Tab id="manage">{formatMessage(labels.manage)}</Tab>
         </TabList>
         <TabPanel id="details">
           <WebsiteEditForm websiteId={websiteId} />
@@ -44,9 +44,9 @@ export function WebsiteSettings({
           <WebsiteTrackingCode websiteId={websiteId} />
         </TabPanel>
         <TabPanel id="share">
-          <WebsiteShareForm websiteId={websiteId} />
+          <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
         </TabPanel>
-        <TabPanel id="data">
+        <TabPanel id="manage">
           <WebsiteData websiteId={websiteId} />
         </TabPanel>
       </Tabs>

src/app/(main)/teams/[teamId]/TeamProvider.tsx

@@ -1,25 +1,18 @@
 'use client';
-import { createContext, ReactNode, useEffect } from 'react';
-import { useTeamQuery, useModified } from '@/components/hooks';
+import { createContext, ReactNode } from 'react';
+import { useTeamQuery } from '@/components/hooks';
 import { Loading } from '@umami/react-zen';
 
 export const TeamContext = createContext(null);
 
 export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
-  const { modified } = useModified(`teams`);
-  const { data: team, isLoading, isFetching, refetch } = useTeamQuery(teamId);
-
-  useEffect(() => {
-    if (teamId && modified) {
-      refetch();
-    }
-  }, [teamId, modified]);
+  const { data: team, isLoading, isFetching } = useTeamQuery(teamId);
 
   if (isFetching && isLoading) {
     return <Loading position="page" />;
   }
 
-  if (teamId && !team) {
+  if (!team) {
     return null;
   }
 

src/app/(main)/teams/[teamId]/layout.tsx

@@ -1,6 +1,5 @@
 import { TeamProvider } from './TeamProvider';
 import { Metadata } from 'next';
-import { TeamSettingsLayout } from './settings/TeamSettingsLayout';
 
 export default async function ({
   children,
@@ -11,11 +10,7 @@ export default async function ({
 }) {
   const { teamId } = await params;
 
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamSettingsLayout>{children}</TeamSettingsLayout>
-    </TeamProvider>
-  );
+  return <TeamProvider teamId={teamId}>{children}</TeamProvider>;
 }
 
 export const metadata: Metadata = {

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

@@ -1,49 +0,0 @@
-'use client';
-import { ReactNode } from 'react';
-import { useMessages, useNavigation } from '@/components/hooks';
-import { Grid, Column } from '@umami/react-zen';
-import { SideMenu } from '@/components/common/SideMenu';
-import { Panel } from '@/components/common/Panel';
-import { PageHeader } from '@/components/common/PageHeader';
-import { PageBody } from '@/components/common/PageBody';
-
-export function TeamSettingsLayout({ children }: { children: ReactNode }) {
-  const { formatMessage, labels } = useMessages();
-  const { pathname, teamId } = useNavigation();
-
-  const items = [
-    {
-      id: 'team',
-      label: formatMessage(labels.team),
-      url: `/teams/${teamId}/settings/team`,
-    },
-    {
-      id: 'websites',
-      label: formatMessage(labels.websites),
-      url: `/teams/${teamId}/settings/websites`,
-    },
-    {
-      id: 'members',
-      label: formatMessage(labels.members),
-      url: `/teams/${teamId}/settings/members`,
-    },
-  ].filter(n => n);
-
-  const value = items.find(({ url }) => pathname.includes(url))?.id;
-
-  return (
-    <PageBody>
-      <Column gap="6">
-        <PageHeader title={formatMessage(labels.teamSettings)} />
-        <Grid columns="200px 1fr" gap>
-          <Column>
-            <SideMenu items={items} selectedKey={value} />
-          </Column>
-          <Column>
-            <Panel>{children}</Panel>
-          </Column>
-        </Grid>
-      </Column>
-    </PageBody>
-  );
-}

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

@@ -1,12 +0,0 @@
-import { Metadata } from 'next';
-import { TeamMembersPage } from './TeamMembersPage';
-
-export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
-  const { teamId } = await params;
-
-  return <TeamMembersPage teamId={teamId} />;
-}
-
-export const metadata: Metadata = {
-  title: 'Team Members',
-};

src/app/(main)/teams/[teamId]/settings/team/TeamPage.tsx

@@ -1,6 +0,0 @@
-'use client';
-import { TeamDetails } from './TeamDetails';
-
-export function TeamPage({ teamId }: { teamId: string }) {
-  return <TeamDetails teamId={teamId} />;
-}

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

@@ -1,29 +0,0 @@
-'use client';
-import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
-import { WebsiteAddButton } from '@/app/(main)/settings/websites/WebsiteAddButton';
-import { useLoginQuery, useMessages } from '@/components/hooks';
-import { SectionHeader } from '@/components/common/SectionHeader';
-import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
-import { ROLES } from '@/lib/constants';
-import { useContext } from 'react';
-import { Column } from '@umami/react-zen';
-
-export function TeamWebsitesPage({ teamId }: { teamId: string }) {
-  const team = useContext(TeamContext);
-  const { formatMessage, labels } = useMessages();
-  const { user } = useLoginQuery();
-
-  const canEdit =
-    !!team?.teamUser?.find(
-      ({ userId, role }) => userId === user.id && role !== ROLES.teamViewOnly,
-    ) && user.role !== ROLES.viewOnly;
-
-  return (
-    <Column gap>
-      <SectionHeader title={formatMessage(labels.websites)}>
-        {canEdit && <WebsiteAddButton teamId={teamId} />}
-      </SectionHeader>
-      <TeamWebsitesDataTable teamId={teamId} allowEdit={canEdit} />
-    </Column>
-  );
-}

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

@@ -1,5 +0,0 @@
-import Page from '@/app/(main)/settings/websites/[websiteId]/page';
-
-export default function ({ params }) {
-  return <Page params={params} />;
-}

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

@@ -1,12 +0,0 @@
-import { TeamWebsitesPage } from './TeamWebsitesPage';
-import { Metadata } from 'next';
-
-export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
-  const { teamId } = await params;
-
-  return <TeamWebsitesPage teamId={teamId} />;
-}
-
-export const metadata: Metadata = {
-  title: 'Teams Websites',
-};

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

@@ -1,6 +1,6 @@
 'use client';
-import { createContext, ReactNode, useEffect } from 'react';
-import { useModified, useWebsiteQuery } from '@/components/hooks';
+import { createContext, ReactNode } from 'react';
+import { useWebsiteQuery } from '@/components/hooks';
 import { Loading } from '@umami/react-zen';
 import { Website } from '@/generated/prisma/client';
 
@@ -13,18 +13,15 @@ export function WebsiteProvider({
   websiteId: string;
   children: ReactNode;
 }) {
-  const { modified } = useModified(`website:${websiteId}`);
-  const { data: website, isFetching, isLoading, refetch } = useWebsiteQuery(websiteId);
-
-  useEffect(() => {
-    if (modified) {
-      refetch();
-    }
-  }, [modified]);
+  const { data: website, isFetching, isLoading } = useWebsiteQuery(websiteId);
 
   if (isFetching && isLoading) {
     return <Loading position="page" />;
   }
 
+  if (!website) {
+    return null;
+  }
+
   return <WebsiteContext.Provider value={website}>{children}</WebsiteContext.Provider>;
 }

src/app/api/teams/[teamId]/users/route.ts

@@ -1,13 +1,14 @@
 import { z } from 'zod';
 import { unauthorized, json, badRequest } from '@/lib/response';
 import { canAddUserToTeam, canViewTeam } from '@/lib/auth';
-import { parseRequest } from '@/lib/request';
-import { pagingParams, teamRoleParam } from '@/lib/schema';
+import { getQueryFilters, parseRequest } from '@/lib/request';
+import { pagingParams, teamRoleParam, searchParams } from '@/lib/schema';
 import { createTeamUser, getTeamUser, getTeamUsers } from '@/queries';
 
 export async function GET(request: Request, { params }: { params: Promise<{ teamId: string }> }) {
   const schema = z.object({
     ...pagingParams,
+    ...searchParams,
   });
 
   const { auth, query, error } = await parseRequest(request, schema);
@@ -22,6 +23,8 @@ export async function GET(request: Request, { params }: { params: Promise<{ team
     return unauthorized('You must be the owner of this team.');
   }
 
+  const filters = getQueryFilters(query);
+
   const users = await getTeamUsers(
     {
       where: {
@@ -39,7 +42,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ team
         },
       },
     },
-    query,
+    filters,
   );
 
   return json(users);

src/components/common/ConfirmationForm.tsx

@@ -25,10 +25,17 @@ export function ConfirmationForm({
 
   return (
     <Form onSubmit={onConfirm} error={error}>
-      <Row marginY="4">{message}</Row>
+      <Row marginY="4" gap="2">
+        {message}
+      </Row>
       <FormButtons>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
-        <FormSubmitButton data-test="button-confirm" isLoading={isLoading} variant={buttonVariant}>
+        <FormSubmitButton
+          data-test="button-confirm"
+          isLoading={isLoading}
+          variant={buttonVariant}
+          isDisabled={false}
+        >
           {buttonLabel || formatMessage(labels.ok)}
         </FormSubmitButton>
       </FormButtons>

src/components/hooks/queries/useTeamQuery.ts

@@ -1,10 +1,17 @@
 import { useApi } from '../useApi';
+import { useModified } from '@/components/hooks';
+import { keepPreviousData } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useTeamQuery(teamId: string) {
+export function useTeamQuery(teamId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
+  const { modified } = useModified(`teams:${teamId}`);
+
   return useQuery({
-    queryKey: ['teams', teamId],
+    queryKey: ['teams', { teamId, modified }],
     queryFn: () => get(`/teams/${teamId}`),
     enabled: !!teamId,
+    placeholderData: keepPreviousData,
+    ...options,
   });
 }

src/components/hooks/queries/useUserQuery.ts

@@ -1,11 +1,17 @@
 import { useApi } from '../useApi';
+import { useModified } from '@/components/hooks';
+import { keepPreviousData } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useUserQuery(userId: string, options?: Record<string, any>) {
+export function useUserQuery(userId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
+  const { modified } = useModified(`user:${userId}`);
+
   return useQuery({
-    queryKey: ['users', userId],
+    queryKey: ['users', { userId, modified }],
     queryFn: () => get(`/users/${userId}`),
     enabled: !!userId,
+    placeholderData: keepPreviousData,
     ...options,
   });
 }

src/components/hooks/queries/useWebsiteQuery.ts

@@ -1,12 +1,17 @@
 import { useApi } from '../useApi';
+import { useModified } from '@/components/hooks';
+import { keepPreviousData } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteQuery(websiteId: string, options?: Record<string, any>) {
+export function useWebsiteQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
+  const { modified } = useModified(`website:${websiteId}`);
 
   return useQuery({
-    queryKey: ['website', { websiteId }],
+    queryKey: ['website', { websiteId, modified }],
     queryFn: () => get(`/websites/${websiteId}`),
     enabled: !!websiteId,
+    placeholderData: keepPreviousData,
     ...options,
   });
 }

src/components/input/FilterBar.tsx

@@ -62,7 +62,7 @@ export function FilterBar() {
         })}
       </Row>
       <TooltipTrigger delay={0}>
-        <Button variant="wrapper" onPress={handleResetFilter} style={{ alignSelf: 'flex-start' }}>
+        <Button variant="zero" onPress={handleResetFilter} style={{ alignSelf: 'flex-start' }}>
           <Icon>
             <Close />
           </Icon>

src/components/input/MenuButton.tsx

@@ -5,9 +5,11 @@ import { Ellipsis } from '@/components/icons';
 export function MenuButton({
   children,
   onAction,
+  isDisabled,
 }: {
   children: ReactNode;
   onAction?: (action: string) => void;
+  isDisabled?: boolean;
 }) {
   const handleAction = (key: Key) => {
     onAction?.(key.toString());
@@ -15,7 +17,7 @@ export function MenuButton({
 
   return (
     <DialogTrigger>
-      <Button variant="quiet">
+      <Button variant="quiet" isDisabled={isDisabled}>
         <Icon>
           <Ellipsis />
         </Icon>

src/components/messages.ts

@@ -334,6 +334,7 @@ export const labels = defineMessages({
   firstClick: { id: 'label.first-click', defaultMessage: 'First click' },
   lastClick: { id: 'label.last-click', defaultMessage: 'Last click' },
   online: { id: 'label.online', defaultMessage: 'Online' },
+  preferences: { id: 'label.preferences', defaultMessage: 'Preferences' },
 });
 
 export const messages = defineMessages({