New settings layouts. Segment management screen.

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

@@ -2,44 +2,60 @@
 import { ReactNode } from 'react';
 import { Grid, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { SideMenu } from '@/components/common/SideMenu';
-import { PageHeader } from '@/components/common/PageHeader';
-import { Panel } from '@/components/common/Panel';
 import { PageBody } from '@/components/common/PageBody';
+import { SideMenu } from '@/components/common/SideMenu';
+import { UserCircle, Users, Knobs } from '@/components/icons';
 
 export function SettingsLayout({ children }: { children: ReactNode }) {
   const { formatMessage, labels } = useMessages();
-  const { pathname } = useNavigation();
+  const { renderUrl, pathname } = useNavigation();
 
   const items = [
     {
-      id: 'preferences',
-      label: formatMessage(labels.preferences),
-      url: '/settings/preferences',
+      label: formatMessage(labels.application),
+      items: [
+        {
+          id: 'preferences',
+          label: formatMessage(labels.preferences),
+          path: renderUrl('/settings/preferences'),
+          icon: <Knobs />,
+        },
+        {
+          id: 'teams',
+          label: formatMessage(labels.teams),
+          path: renderUrl('/settings/teams'),
+          icon: <Users />,
+        },
+      ],
     },
     {
-      id: 'profile',
-      label: formatMessage(labels.profile),
-      url: '/settings/profile',
+      label: formatMessage(labels.account),
+      items: [
+        {
+          id: 'profile',
+          label: formatMessage(labels.profile),
+          path: renderUrl('/settings/profile'),
+          icon: <UserCircle />,
+        },
+      ],
     },
-    { id: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
   ];
 
-  const value = items.find(({ url }) => pathname.includes(url))?.id;
+  const selectedKey =
+    items.flatMap(e => e.items)?.find(({ path }) => path && pathname.endsWith(path))?.id ||
+    'overview';
 
   return (
-    <PageBody>
-      <Column gap="6">
-        <PageHeader title={formatMessage(labels.settings)} />
-        <Grid columns="200px 1fr" gap>
-          <Column>
-            <SideMenu items={items} selectedKey={value} />
-          </Column>
-          <Column>
-            <Panel minHeight="300px">{children}</Panel>
-          </Column>
-        </Grid>
+    <Grid columns="auto 1fr" width="100%" height="100%">
+      <Column height="100%" border="right" backgroundColor>
+        <SideMenu
+          items={items}
+          title={formatMessage(labels.settings)}
+          selectedKey={selectedKey}
+          allowMinimize={false}
+        />
       </Column>
-    </PageBody>
+      <PageBody gap="6">{children}</PageBody>
+    </Grid>
   );
 }

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

@@ -19,17 +19,14 @@ export function PreferenceSettings() {
         <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.language)}</Label>
+        <LanguageSetting />
+      </Column>
       <Column>
         <Label>{formatMessage(labels.theme)}</Label>
         <ThemeSetting />

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

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

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

@@ -1,16 +1,19 @@
 'use client';
 import { ProfileSettings } from './ProfileSettings';
 import { useMessages } from '@/components/hooks';
-import { SectionHeader } from '@/components/common/SectionHeader';
+import { Panel } from '@/components/common/Panel';
 import { Column } from '@umami/react-zen';
+import { PageHeader } from '@/components/common/PageHeader';
 
 export function ProfilePage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap>
-      <SectionHeader title={formatMessage(labels.profile)} />
-      <ProfileSettings />
+    <Column gap="6">
+      <PageHeader title={formatMessage(labels.profile)} />
+      <Panel>
+        <ProfileSettings />
+      </Panel>
     </Column>
   );
 }

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

@@ -34,12 +34,10 @@ export function ProfileSettings() {
         <Label>{formatMessage(labels.username)}</Label>
         {username}
       </Column>
-
       <Column>
         <Label>{formatMessage(labels.role)}</Label>
         {renderRole(role)}
       </Column>
-
       {!cloudMode && (
         <Column>
           <Label>{formatMessage(labels.password)}</Label>

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

@@ -1,5 +1,5 @@
 import { Row } from '@umami/react-zen';
-import { SectionHeader } from '@/components/common/SectionHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { ROLES } from '@/lib/constants';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { TeamsJoinButton } from './TeamsJoinButton';
@@ -11,11 +11,11 @@ export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
   const cloudMode = !!process.env.cloudMode;
 
   return (
-    <SectionHeader title={formatMessage(labels.teams)}>
+    <PageHeader title={formatMessage(labels.teams)}>
       <Row gap="3">
         {!cloudMode && <TeamsJoinButton />}
         {allowCreate && user.role !== ROLES.viewOnly && <TeamsAddButton />}
       </Row>
-    </SectionHeader>
+    </PageHeader>
   );
 }

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

@@ -2,12 +2,15 @@
 import { TeamsDataTable } from './TeamsDataTable';
 import { TeamsHeader } from './TeamsHeader';
 import { Column } from '@umami/react-zen';
+import { Panel } from '@/components/common/Panel';
 
 export function TeamsSettingsPage() {
   return (
-    <Column gap>
+    <Column gap="6">
       <TeamsHeader />
-      <TeamsDataTable />
+      <Panel>
+        <TeamsDataTable />
+      </Panel>
     </Column>
   );
 }

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

@@ -7,7 +7,7 @@ import Link from 'next/link';
 
 export function TeamsTable({
   data = [],
-  showActions = true,
+  showActions = false,
 }: {
   data: any[];
   allowEdit?: boolean;
@@ -29,7 +29,7 @@ export function TeamsTable({
       <DataColumn id="members" label={formatMessage(labels.members)}>
         {(row: any) => row._count.teamUser}
       </DataColumn>
-      {showActions && (
+      {showActions ? (
         <DataColumn id="action" label=" " align="end">
           {(row: any) => {
             const { id } = row;
@@ -56,7 +56,7 @@ export function TeamsTable({
             );
           }}
         </DataColumn>
-      )}
+      ) : null}
     </DataTable>
   );
 }

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

@@ -1,8 +1,8 @@
 import { useContext, useState } from 'react';
 import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
-import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
 import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
-import { SectionHeader } from '@/components/common/SectionHeader';
+
 import { ROLES } from '@/lib/constants';
 import { Users } from '@/components/icons';
 import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
@@ -10,6 +10,8 @@ import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
 import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
@@ -33,30 +35,32 @@ export function TeamDetails({ teamId }: { teamId: string }) {
       user.role !== ROLES.viewOnly);
 
   return (
-    <Column gap>
-      <SectionHeader title={team?.name} icon={<Users />}>
+    <Column gap="6">
+      <PageHeader title={team?.name} icon={<Users />}>
         {!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
-      </SectionHeader>
-      <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
-        <TabList>
-          <Tab id="details">{formatMessage(labels.details)}</Tab>
-          <Tab id="members">{formatMessage(labels.members)}</Tab>
-          <Tab id="websites">{formatMessage(labels.websites)}</Tab>
-          {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
-        </TabList>
-        <TabPanel id="details" style={{ width: 500 }}>
-          <TeamEditForm teamId={teamId} allowEdit={canEdit} />
-        </TabPanel>
-        <TabPanel id="members">
-          <TeamMembersDataTable teamId={teamId} allowEdit />
-        </TabPanel>
-        <TabPanel id="websites">
-          <TeamWebsitesDataTable teamId={teamId} allowEdit />
-        </TabPanel>
-        <TabPanel id="manage">
-          <TeamManage teamId={teamId} />
-        </TabPanel>
-      </Tabs>
+      </PageHeader>
+      <Panel>
+        <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
+          <TabList>
+            <Tab id="details">{formatMessage(labels.details)}</Tab>
+            <Tab id="members">{formatMessage(labels.members)}</Tab>
+            <Tab id="websites">{formatMessage(labels.websites)}</Tab>
+            {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
+          </TabList>
+          <TabPanel id="details" style={{ width: 500 }}>
+            <TeamEditForm teamId={teamId} allowEdit={canEdit} />
+          </TabPanel>
+          <TabPanel id="members">
+            <TeamMembersDataTable teamId={teamId} allowEdit />
+          </TabPanel>
+          <TabPanel id="websites">
+            <TeamWebsitesDataTable teamId={teamId} allowEdit />
+          </TabPanel>
+          <TabPanel id="manage">
+            <TeamManage teamId={teamId} />
+          </TabPanel>
+        </Tabs>
+      </Panel>
     </Column>
   );
 }

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

@@ -10,7 +10,7 @@ import {
 import { getRandomChars } from '@/lib/crypto';
 import { useContext } from 'react';
 import { useApi, useMessages, useModified } from '@/components/hooks';
-import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
 
 const generateId = () => `team_${getRandomChars(16)}`;
 

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

@@ -1,6 +1,7 @@
 import { useMessages, useModified } from '@/components/hooks';
-import { Row, Button, Icon, Modal, DialogTrigger, Dialog, useToast } from '@umami/react-zen';
+import { Dialog, useToast } from '@umami/react-zen';
 import { TeamMemberEditForm } from './TeamMemberEditForm';
+import { ActionButton } from '@/components/input/ActionButton';
 import { Edit } from '@/components/icons';
 
 export function TeamMemberEditButton({
@@ -25,27 +26,18 @@ export function TeamMemberEditButton({
   };
 
   return (
-    <DialogTrigger>
-      <Button variant="quiet">
-        <Row alignItems="center" gap>
-          <Icon>
-            <Edit />
-          </Icon>
-        </Row>
-      </Button>
-      <Modal>
-        <Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
-          {({ close }) => (
-            <TeamMemberEditForm
-              teamId={teamId}
-              userId={userId}
-              role={role}
-              onSave={handleSave}
-              onClose={close}
-            />
-          )}
-        </Dialog>
-      </Modal>
-    </DialogTrigger>
+    <ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
+      <Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
+        {({ close }) => (
+          <TeamMemberEditForm
+            teamId={teamId}
+            userId={userId}
+            role={role}
+            onSave={handleSave}
+            onClose={close}
+          />
+        )}
+      </Dialog>
+    </ActionButton>
   );
 }

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

@@ -2,7 +2,8 @@ import { ConfirmationForm } from '@/components/common/ConfirmationForm';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { messages } from '@/components/messages';
 import { Trash } from '@/components/icons';
-import { Button, Icon, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
+import { Dialog } from '@umami/react-zen';
+import { ActionButton } from '@/components/input/ActionButton';
 
 export function TeamMemberRemoveButton({
   teamId,
@@ -34,29 +35,22 @@ export function TeamMemberRemoveButton({
   };
 
   return (
-    <DialogTrigger>
-      <Button variant="quiet">
-        <Icon>
-          <Trash />
-        </Icon>
-      </Button>
-      <Modal>
-        <Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
-          {({ close }) => (
-            <ConfirmationForm
-              message={formatMessage(messages.confirmRemove, {
-                target: userName,
-              })}
-              isLoading={isPending}
-              error={error}
-              onConfirm={handleConfirm.bind(null, close)}
-              onClose={close}
-              buttonLabel={formatMessage(labels.remove)}
-              buttonVariant="danger"
-            />
-          )}
-        </Dialog>
-      </Modal>
-    </DialogTrigger>
+    <ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
+      <Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
+        {({ close }) => (
+          <ConfirmationForm
+            message={formatMessage(messages.confirmRemove, {
+              target: userName,
+            })}
+            isLoading={isPending}
+            error={error}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+            buttonLabel={formatMessage(labels.remove)}
+            buttonVariant="danger"
+          />
+        )}
+      </Dialog>
+    </ActionButton>
   );
 }

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

@@ -0,0 +1,20 @@
+'use client';
+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 { data: team, isLoading, isFetching } = useTeamQuery(teamId);
+
+  if (isFetching && isLoading) {
+    return <Loading position="page" />;
+  }
+
+  if (!team) {
+    return null;
+  }
+
+  return <TeamContext.Provider value={team}>{children}</TeamContext.Provider>;
+}

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

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

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

@@ -1,58 +1,19 @@
-import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
-import { useLoginQuery, useMessages } from '@/components/hooks';
-import { Eye, Edit } from '@/components/icons';
-import { MenuButton } from '@/components/input/MenuButton';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
 import Link from 'next/link';
 
-export function TeamWebsitesTable({
-  teamId,
-  data = [],
-  allowEdit = false,
-}: {
-  teamId: string;
-  data: any[];
-  allowEdit?: boolean;
-}) {
-  const { user } = useLoginQuery();
+export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data: any[] }) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={`/settings/websites/${row.id}`}>{row.name}</Link>}
+        {(row: any) => <Link href={`/teams/${teamId}/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}
       </DataColumn>
-      <DataColumn id="action" label=" " align="end">
-        {(row: any) => {
-          const { id: websiteId } = row;
-
-          return (
-            <MenuButton>
-              <MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
-                <Row alignItems="center" gap>
-                  <Icon>
-                    <Eye />
-                  </Icon>
-                  <Text>{formatMessage(labels.view)}</Text>
-                </Row>
-              </MenuItem>
-              {allowEdit && (teamId || user?.isAdmin) && (
-                <MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
-                  <Row alignItems="center" gap>
-                    <Icon>
-                      <Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </Row>
-                </MenuItem>
-              )}
-            </MenuButton>
-          );
-        }}
-      </DataColumn>
     </DataTable>
   );
 }

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

@@ -57,7 +57,7 @@ export function WebsitesTable({
                   </MenuItem>
                 )}
                 {allowEdit && (
-                  <MenuItem href={`/settings/websites/${websiteId}`}>
+                  <MenuItem href={renderUrl(`/settings/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-edit">
                         <SquarePen />

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

@@ -1,5 +1,4 @@
 import { Button, Modal, DialogTrigger, Dialog, Column } from '@umami/react-zen';
-import { useRouter } from 'next/navigation';
 import {
   useLoginQuery,
   useMessages,
@@ -17,9 +16,9 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useLoginQuery();
   const { touch } = useModified();
-  const { teamId, renderUrl } = useNavigation();
-  const router = useRouter();
+  const { router, pathname, teamId, renderUrl } = useNavigation();
   const { data: teams } = useUserTeamsQuery(user.id);
+  const isAdmin = pathname.startsWith('/admin');
 
   const canTransferWebsite =
     (
@@ -49,21 +48,23 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
 
   return (
     <Column gap="6">
-      <ActionForm
-        label={formatMessage(labels.transferWebsite)}
-        description={formatMessage(messages.transferWebsite)}
-      >
-        <DialogTrigger>
-          <Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
-          <Modal>
-            <Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
-              {({ close }) => (
-                <WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
-              )}
-            </Dialog>
-          </Modal>
-        </DialogTrigger>
-      </ActionForm>
+      {!isAdmin && (
+        <ActionForm
+          label={formatMessage(labels.transferWebsite)}
+          description={formatMessage(messages.transferWebsite)}
+        >
+          <DialogTrigger>
+            <Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
+            <Modal>
+              <Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
+                {({ close }) => (
+                  <WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
+                )}
+              </Dialog>
+            </Modal>
+          </DialogTrigger>
+        </ActionForm>
+      )}
 
       <ActionForm
         label={formatMessage(labels.resetWebsite)}

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

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

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

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Globe } from '@/components/icons';
+
+export function WebsiteSettingsHeader() {
+  const website = useContext(WebsiteContext);
+
+  return <PageHeader title={website?.name} icon={<Globe />} />;
+}

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

@@ -1,11 +1,19 @@
 'use client';
+import { Column } from '@umami/react-zen';
 import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { WebsiteSettings } from './WebsiteSettings';
+import { WebsiteSettingsHeader } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <WebsiteSettings websiteId={websiteId} />
+      <Column gap="6">
+        <WebsiteSettingsHeader />
+        <Panel>
+          <WebsiteSettings websiteId={websiteId} />
+        </Panel>
+      </Column>
     </WebsiteProvider>
   );
 }