Updated website edit.

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} />
-      </SectionHeader>
+      <FieldsButton value={fields} onChange={setFields} />
       <Panel height="900px" overflow="auto" allowFullscreen>
         <Breakdown
           websiteId={websiteId}
@@ -39,19 +36,16 @@ const FieldsButton = ({ value, onChange }) => {
   return (
     <Box>
       <DialogTrigger>
-        <Button variant="primary">
-          <Icon>
-            <ListCheck />
-          </Icon>
-          <Text>Fields</Text>
+        <Button>
+          <IconLabel icon={<ListCheck />}>{formatMessage(labels.fields)}</IconLabel>
         </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%">
-        <Column height="100%" border="right" backgroundColor marginRight="2">
-          <WebsiteNav websiteId={websiteId} />
-        </Column>
+      <Grid columns={isSettings ? '1fr' : 'auto 1fr'} width="100%" height="100%">
+        {!isSettings && (
+          <Column height="100%" border="right" backgroundColor marginRight="2">
+            <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 { useWebsite } from '@/components/hooks';
+import { Globe, ArrowLeft } from '@/components/icons';
+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 />} />
+    </>
+  );
 }