Updated website edit.

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

@@ -1,5 +1,4 @@
 'use client';
-import { Column } from '@umami/react-zen';
 import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
 import { WebsiteSettings } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettings';
 import { WebsiteSettingsHeader } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettingsHeader';
@@ -7,10 +6,8 @@ import { WebsiteSettingsHeader } from '@/app/(main)/websites/[websiteId]/setting
 export function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <Column gap="6" margin="2">
+      <WebsiteSettingsHeader />
-        <WebsiteSettingsHeader />
+      <WebsiteSettings websiteId={websiteId} />
-        <WebsiteSettings websiteId={websiteId} />
-      </Column>
     </WebsiteProvider>
   );
 }

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

@@ -1,15 +1,13 @@
 import { ReactNode } from 'react';
-import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-zen';
+import { Icon, DataTable, DataColumn } from '@umami/react-zen';
+import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { MenuButton } from '@/components/input/MenuButton';
+import { SquarePen } from '@/components/icons';
-import { Eye, SquarePen } from '@/components/icons';
 import { Empty } from '@/components/common/Empty';
 
 export function WebsitesTable({
   data = [],
   showActions,
-  allowEdit,
-  allowView,
   renderLink,
 }: {
   data: Record<string, any>[];
@@ -37,28 +35,11 @@ export function WebsitesTable({
             const websiteId = row.id;
 
             return (
-              <MenuButton>
+              <LinkButton href={renderUrl(`/websites/${websiteId}/settings`)} variant="quiet">
-                {allowView && (
+                <Icon>
-                  <MenuItem href={renderUrl(`/websites/${websiteId}`)}>
+                  <SquarePen />
-                    <Row alignItems="center" gap>
+                </Icon>
-                      <Icon data-test="link-button-view">
+              </LinkButton>
-                        <Eye />
-                      </Icon>
-                      <Text>{formatMessage(labels.view)}</Text>
-                    </Row>
-                  </MenuItem>
-                )}
-                {allowEdit && (
-                  <MenuItem href={renderUrl(`/websites/${websiteId}/settings`)}>
-                    <Row alignItems="center" gap>
-                      <Icon data-test="link-button-edit">
-                        <SquarePen />
-                      </Icon>
-                      <Text>{formatMessage(labels.edit)}</Text>
-                    </Row>
-                  </MenuItem>
-                )}
-              </MenuButton>
             );
           }}
         </DataColumn>

src/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage.tsx

@@ -1,13 +1,12 @@
 'use client';
 import { useState } from 'react';
-import { Button, Column, Box, Text, Icon, DialogTrigger, Modal, Dialog } from '@umami/react-zen';
+import { Button, Column, Box, DialogTrigger, Popover, Dialog, IconLabel } from '@umami/react-zen';
 import { useDateRange, useMessages } from '@/components/hooks';
 import { ListCheck } from '@/components/icons';
 import { Panel } from '@/components/common/Panel';
 import { Breakdown } from './Breakdown';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { FieldSelectForm } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm';
-import { SectionHeader } from '@/components/common/SectionHeader';
 
 export function BreakdownPage({ websiteId }: { websiteId: string }) {
   const {
@@ -18,9 +17,7 @@ export function BreakdownPage({ websiteId }: { websiteId: string }) {
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
-      <SectionHeader>
+      <FieldsButton value={fields} onChange={setFields} />
-        <FieldsButton value={fields} onChange={setFields} />
-      </SectionHeader>
       <Panel height="900px" overflow="auto" allowFullscreen>
         <Breakdown
           websiteId={websiteId}
@@ -39,19 +36,16 @@ const FieldsButton = ({ value, onChange }) => {
   return (
     <Box>
       <DialogTrigger>
-        <Button variant="primary">
+        <Button>
-          <Icon>
+          <IconLabel icon={<ListCheck />}>{formatMessage(labels.fields)}</IconLabel>
-            <ListCheck />
-          </Icon>
-          <Text>Fields</Text>
         </Button>
-        <Modal>
+        <Popover>
           <Dialog title={formatMessage(labels.fields)} style={{ width: 400 }}>
             {({ close }) => (
               <FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />
             )}
           </Dialog>
-        </Modal>
+        </Popover>
       </DialogTrigger>
     </Box>
   );

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

@@ -2,17 +2,24 @@
 import { ReactNode } from 'react';
 import { Column, Grid } from '@umami/react-zen';
 import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
+import { useNavigation } from '@/components/hooks';
 import { PageBody } from '@/components/common/PageBody';
 import { WebsiteHeader } from './WebsiteHeader';
 import { WebsiteNav } from './WebsiteNav';
 
 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
+  const { pathname } = useNavigation();
+
+  const isSettings = pathname.endsWith('/settings');
+
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <Grid columns="auto 1fr" width="100%" height="100%">
+      <Grid columns={isSettings ? '1fr' : 'auto 1fr'} width="100%" height="100%">
-        <Column height="100%" border="right" backgroundColor marginRight="2">
+        {!isSettings && (
-          <WebsiteNav websiteId={websiteId} />
+          <Column height="100%" border="right" backgroundColor marginRight="2">
-        </Column>
+            <WebsiteNav websiteId={websiteId} />
+          </Column>
+        )}
         <PageBody gap>
           <WebsiteHeader />
           <Column>{children}</Column>

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

@@ -1,9 +1,9 @@
+import { Text } from '@umami/react-zen';
 import { Eye, User, Clock, Sheet, Tag, ChartPie, UserPlus } from '@/components/icons';
 import { Lightning, Path, Money, Compare, Target, Funnel, Magnet, Network } from '@/components/svg';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
-import { Text } from '@umami/react-zen';
 
 export function WebsiteNav({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();

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

@@ -1,9 +1,22 @@
+import Link from 'next/link';
 import { PageHeader } from '@/components/common/PageHeader';
-import { Globe } from '@/components/icons';
+import { Globe, ArrowLeft } from '@/components/icons';
-import { useWebsite } from '@/components/hooks';
+import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
+import { IconLabel, Row } from '@umami/react-zen';
 
 export function WebsiteSettingsHeader() {
   const website = useWebsite();
+  const { formatMessage, labels } = useMessages();
+  const { renderUrl } = useNavigation();
 
-  return <PageHeader title={website?.name} icon={<Globe />} />;
+  return (
+    <>
+      <Row marginTop="6">
+        <Link href={renderUrl(`/websites/${website.id}`)}>
+          <IconLabel icon={<ArrowLeft />} label={formatMessage(labels.website)} />
+        </Link>
+      </Row>
+      <PageHeader title={website?.name} description={website?.domain} icon={<Globe />} />
+    </>
+  );
 }

src/components/common/PageHeader.tsx

@@ -24,6 +24,7 @@ export function PageHeader({
       justifyContent="space-between"
       alignItems="center"
       paddingY="6"
+      marginBottom="6"
       border={showBorder ? 'bottom' : undefined}
       width="100%"
       {...props}

src/components/common/SideMenu.tsx

@@ -1,14 +1,13 @@
 import { ReactNode } from 'react';
 import {
-  Text,
   Heading,
   NavMenu,
   NavMenuItem,
-  Icon,
   Row,
   Column,
   NavMenuGroup,
   NavMenuProps,
+  IconLabel,
 } from '@umami/react-zen';
 import Link from 'next/link';
 
@@ -47,10 +46,7 @@ export function SideMenu({
       return (
         <Link key={id} href={path}>
           <NavMenuItem isSelected={isSelected}>
-            <Row alignItems="center" gap>
+            <IconLabel icon={icon}>{label}</IconLabel>
-              <Icon>{icon}</Icon>
-              <Text>{label}</Text>
-            </Row>
           </NavMenuItem>
         </Link>
       );