Reworked settings screens.

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

@@ -1,15 +1,23 @@
 'use client';
-import { WebsitesHeader } from '@/app/(main)/settings/websites/WebsitesHeader';
 import { WebsitesDataTable } from '@/app/(main)/settings/websites/WebsitesDataTable';
-import { useNavigation } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { Column } from '@umami/react-zen';
+import { PageHeader } from '@/components/common/PageHeader';
+import { WebsiteAddButton } from '@/app/(main)/settings/websites/WebsiteAddButton';
+import { Panel } from '@/components/common/Panel';
 
 export function WebsitesPage() {
   const { teamId } = useNavigation();
+  const { formatMessage, labels } = useMessages();
 
   return (
-    <>
-      <WebsitesHeader />
-      <WebsitesDataTable teamId={teamId} allowEdit={false} />
-    </>
+    <Column gap="6">
+      <PageHeader title={formatMessage(labels.websites)}>
+        <WebsiteAddButton teamId={teamId} />
+      </PageHeader>
+      <Panel>
+        <WebsitesDataTable teamId={teamId} allowEdit={false} />
+      </Panel>
+    </Column>
   );
 }

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

@@ -1,6 +1,6 @@
 import { Grid, Heading, Column, Row } from '@umami/react-zen';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
-import { SideBar } from '@/components/common/SideBar';
+import { SideMenu } from '@/components/common/SideMenu';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
@@ -146,7 +146,7 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
   return (
     <Panel>
       <Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
-        <SideBar items={items} selectedKey={view} />
+        <SideMenu items={items} selectedKey={view} />
         <Column border="left" paddingLeft="6">
           <Row alignItems="center" justifyContent="space-between">
             <Heading size="1">{formatMessage(labels.previous)}</Heading>

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

@@ -1,7 +1,7 @@
 import { Icon, Icons, Text, Grid, Column } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { SideBar } from '@/components/common/SideBar';
+import { SideMenu } from '@/components/common/SideMenu';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
 import { CountriesTable } from '@/components/metrics/CountriesTable';
@@ -17,7 +17,6 @@ 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,
@@ -56,77 +55,77 @@ export function WebsiteExpandedView({
 
   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: 'channel',
+      id: 'channel',
       label: formatMessage(labels.channels),
       url: renderUrl({ view: 'channel' }),
     },
     {
-      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' }),
     },
@@ -143,20 +142,18 @@ export function WebsiteExpandedView({
           </Icon>
           <Text>{formatMessage(labels.back)}</Text>
         </LinkButton>
-        <SideBar items={items} selectedKey={view} />
+        <SideMenu items={items} selectedKey={view} />
       </Column>
       <Column>
-        <Panel>
-          <DetailsComponent
-            websiteId={websiteId}
-            domainName={domainName}
-            animate={false}
-            virtualize={true}
-            itemCount={25}
-            allowFilter={true}
-            allowSearch={true}
-          />
-        </Panel>
+        <DetailsComponent
+          websiteId={websiteId}
+          domainName={domainName}
+          animate={false}
+          virtualize={true}
+          itemCount={25}
+          allowFilter={true}
+          allowSearch={true}
+        />
       </Column>
     </Grid>
   );

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Page } from '@/components/common/Page';
-import { PageHeader } from '@/components/common/PageHeader';
+import { SectionHeader } from '@/components/common/SectionHeader';
 import { useApi, useMessages } from '@/components/hooks';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 
@@ -22,7 +22,7 @@ export function RealtimeHome() {
 
   return (
     <Page isLoading={isLoading || data?.length > 0} error={error}>
-      <PageHeader title={formatMessage(labels.realtime)} />
+      <SectionHeader title={formatMessage(labels.realtime)} />
       {data?.length === 0 && (
         <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)} />
       )}

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

@@ -36,19 +36,19 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
   const buttons = [
     {
       label: formatMessage(labels.all),
-      key: TYPE_ALL,
+      id: TYPE_ALL,
     },
     {
       label: formatMessage(labels.views),
-      key: TYPE_PAGEVIEW,
+      id: TYPE_PAGEVIEW,
     },
     {
       label: formatMessage(labels.visitors),
-      key: TYPE_SESSION,
+      id: TYPE_SESSION,
     },
     {
       label: formatMessage(labels.events),
-      key: TYPE_EVENT,
+      id: TYPE_EVENT,
     },
   ];
 
@@ -160,7 +160,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
     <div className={styles.table}>
       <div className={styles.actions}>
         <SearchField className={styles.search} value={search} onSearch={setSearch} />
-        <FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
+        <FilterButtons items={buttons} value={filter} onChange={setFilter} />
       </div>
       <div className={styles.header}>{formatMessage(labels.activity)}</div>
       <div className={styles.body}>