Updated reports components.

src/app/(main)/App.tsx

@@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation';
 import { UpdateNotice } from './UpdateNotice';
 import { Nav } from '@/app/(main)/Nav';
 import { MenuBar } from '@/app/(main)/MenuBar';
-import { Page } from '@/components/layout/Page';
+import { Page } from '@/components/common/Page';
 import { useLoginQuery, useConfig } from '@/components/hooks';
 
 export function App({ children }) {
@@ -33,7 +33,13 @@ export function App({ children }) {
     <Grid height="100vh" width="100%" columns="auto 1fr" rows="auto 1fr" overflow="hidden">
       <Nav gridColumn="1 / 2" gridRow="1 / 3" />
       <MenuBar gridColumn="2 / 3" gridRow="1 / 2" />
-      <Column gridColumn="2 / 3" gridRow="2 / 3" alignItems="center" overflow="auto">
+      <Column
+        gridColumn="2 / 3"
+        gridRow="2 / 3"
+        alignItems="center"
+        overflow="auto"
+        backgroundColor="1"
+      >
         <Page>
           {children}
           {process.env.NODE_ENV === 'production' && !pathname.includes('/share/') && (

src/app/(main)/MenuBar.tsx

@@ -17,6 +17,8 @@ export function MenuBar(props: RowProps) {
       paddingY="3"
       paddingX="3"
       paddingRight="5"
+      backgroundColor="1"
+      style={{ borderBottom: '1px solid var(--border-color)' }}
     >
       <Row>
         <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">

src/app/(main)/console/TestConsole.tsx

@@ -2,8 +2,8 @@ import { Button } from '@umami/react-zen';
 import Link from 'next/link';
 import Script from 'next/script';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
-import { Page } from '@/components/layout/Page';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { Page } from '@/components/common/Page';
+import { PageHeader } from '@/components/common/PageHeader';
 import { EventsChart } from '@/components/metrics/EventsChart';
 import { WebsiteChart } from '../websites/[websiteId]/WebsiteChart';
 import { useApi, useNavigation } from '@/components/hooks';

src/app/(main)/dashboard/DashboardPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Icon, Icons, Loading, Text } from '@umami/react-zen';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { Pager } from '@/components/common/Pager';
 import { WebsiteChartList } from '../websites/[websiteId]/WebsiteChartList';
 import { DashboardSettingsButton } from '@/app/(main)/dashboard/DashboardSettingsButton';

src/app/(main)/profile/ProfileHeader.tsx

@@ -1,4 +1,4 @@
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { useMessages } from '@/components/hooks';
 
 export function ProfileHeader() {

src/app/(main)/reports/ReportsHeader.tsx

@@ -1,4 +1,4 @@
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { Icon, Icons, Text } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';

src/app/(main)/reports/ReportsTable.tsx

@@ -4,7 +4,7 @@ import { useMessages, useLoginQuery, useNavigation } from '@/components/hooks';
 import { REPORT_TYPES } from '@/lib/constants';
 import { ReportDeleteButton } from './ReportDeleteButton';
 
-export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
+export function ReportsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
   const { renderTeamUrl } = useNavigation();
@@ -20,11 +20,6 @@ export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomai
           );
         }}
       </DataColumn>
-      {showDomain && (
-        <DataColumn id="domain" label={formatMessage(labels.domain)}>
-          {(row: any) => row?.website?.domain}
-        </DataColumn>
-      )}
       <DataColumn id="action" label="" align="end">
         {(row: any) => {
           const { id, name, userId, website } = row;

src/app/(main)/reports/[reportId]/BaseParameters.module.css

@@ -1,3 +0,0 @@
-.dropdown div {
-  max-height: 300px;
-}

src/app/(main)/reports/[reportId]/BaseParameters.tsx

@@ -1,11 +1,9 @@
-import { useContext } from 'react';
 import { Column, Label } from '@umami/react-zen';
+import { useReport } from '@/components/hooks';
 import { parseDateRange } from '@/lib/date';
 import { DateFilter } from '@/components/input/DateFilter';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 import { useMessages, useNavigation, useWebsiteQuery } from '@/components/hooks';
-import { ReportContext } from './Report';
-import styles from './BaseParameters.module.css';
 
 export interface BaseParametersProps {
   showWebsiteSelect?: boolean;
@@ -20,7 +18,7 @@ export function BaseParameters({
   showDateSelect = true,
   allowDateSelect = true,
 }: BaseParametersProps) {
-  const { report, updateReport } = useContext(ReportContext);
+  const { report, updateReport } = useReport();
   const { formatMessage, labels } = useMessages();
   const { teamId } = useNavigation();
   const { parameters } = report || {};
@@ -50,7 +48,7 @@ export function BaseParameters({
         </Column>
       )}
       {showDateSelect && (
-        <Column className={styles.dropdown}>
+        <Column>
           <Label>{formatMessage(labels.dateRange)}</Label>
           {allowDateSelect && (
             <DateFilter

src/app/(main)/reports/[reportId]/FieldAddForm.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { REPORT_PARAMETERS } from '@/lib/constants';
-import { PopupForm } from './PopupForm';
 import { FieldSelectForm } from './FieldSelectForm';
 
 export function FieldAddForm({
@@ -39,9 +38,7 @@ export function FieldAddForm({
   };
 
   return createPortal(
-    <PopupForm>
-      {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
-    </PopupForm>,
+    !selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />,
     document.body,
   );
 }

src/app/(main)/reports/[reportId]/FieldParameters.tsx

@@ -1,13 +1,11 @@
-import { useFields, useMessages } from '@/components/hooks';
+import { useFields, useMessages, useReport } from '@/components/hooks';
 import { Icons } from '@/components/icons';
-import { useContext } from 'react';
-import { Button, Row, Label, Icon, Popover, MenuTrigger } from '@umami/react-zen';
+import { Button, Row, Label, Icon, Popover, MenuTrigger, Column } from '@umami/react-zen';
 import { FieldSelectForm } from '../[reportId]/FieldSelectForm';
 import { ParameterList } from '../[reportId]/ParameterList';
-import { ReportContext } from './Report';
 
 export function FieldParameters() {
-  const { report, updateReport } = useContext(ReportContext);
+  const { report, updateReport } = useReport();
   const { formatMessage, labels } = useMessages();
   const { parameters } = report || {};
   const { fields } = parameters || {};
@@ -26,12 +24,12 @@ export function FieldParameters() {
   const AddButton = () => {
     return (
       <MenuTrigger>
-        <Button size="sm">
-          <Icon>
+        <Button variant="quiet">
+          <Icon size="sm">
             <Icons.Plus />
           </Icon>
         </Button>
-        <Popover placement="start">
+        <Popover placement="right top">
           <FieldSelectForm
             fields={fieldOptions.filter(({ name }) => !fields.find(f => f.name === name))}
             onSelect={handleAdd}
@@ -43,8 +41,11 @@ export function FieldParameters() {
   };
 
   return (
-    <Row>
-      <Label>{formatMessage(labels.fields)}</Label>
+    <Column gap="3">
+      <Row justifyContent="space-between">
+        <Label>{formatMessage(labels.fields)}</Label>
+        <AddButton />
+      </Row>
       <ParameterList>
         {fields.map(({ name }) => {
           return (
@@ -54,7 +55,6 @@ export function FieldParameters() {
           );
         })}
       </ParameterList>
-      <AddButton />
-    </Row>
+    </Column>
   );
 }

src/app/(main)/reports/[reportId]/FieldSelectForm.tsx

@@ -1,6 +1,5 @@
-import { List, ListItem, Label, Column } from '@umami/react-zen';
+import { Menu, MenuItem, Text, MenuSection } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import styles from './FieldSelectForm.module.css';
 import { Key } from 'react';
 
 export interface FieldSelectFormProps {
@@ -13,18 +12,17 @@ export function FieldSelectForm({ fields = [], onSelect, showType = true }: Fiel
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column>
-      <Label>{formatMessage(labels.fields)}</Label>
-      <List onSelectionChange={key => onSelect(fields[key as any])}>
+    <Menu onSelectionChange={key => onSelect(fields[key as any])}>
+      <MenuSection title={formatMessage(labels.fields)}>
         {fields.map(({ name, label, type }: any, index: Key) => {
           return (
-            <ListItem key={index} className={styles.item}>
-              <div>{label || name}</div>
-              {showType && type && <div className={styles.type}>{type}</div>}
-            </ListItem>
+            <MenuItem key={index}>
+              <Text>{label || name}</Text>
+              {showType && type && <Text color="muted">{type}</Text>}
+            </MenuItem>
           );
         })}
-      </List>
-    </Column>
+      </MenuSection>
+    </Menu>
   );
 }

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -1,17 +1,23 @@
-import { useContext } from 'react';
-import { useMessages, useFormat, useFilters, useFields } from '@/components/hooks';
+import { useMessages, useFormat, useFilters, useFields, useReport } from '@/components/hooks';
 import { Icons } from '@/components/icons';
-import { Button, Row, Label, Icon, Popover, MenuTrigger } from '@umami/react-zen';
+import {
+  Button,
+  Row,
+  Column,
+  Label,
+  Icon,
+  Popover,
+  MenuTrigger,
+  Focusable,
+  Text,
+} from '@umami/react-zen';
 import { FilterSelectForm } from '../[reportId]/FilterSelectForm';
 import { ParameterList } from '../[reportId]/ParameterList';
-import { PopupForm } from '../[reportId]/PopupForm';
-import { ReportContext } from './Report';
 import { FieldFilterEditForm } from '../[reportId]/FieldFilterEditForm';
 import { isSearchOperator } from '@/lib/params';
-import styles from './FilterParameters.module.css';
 
 export function FilterParameters() {
-  const { report, updateReport } = useContext(ReportContext);
+  const { report, updateReport } = useReport();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
   const { parameters } = report || {};
@@ -45,28 +51,26 @@ export function FilterParameters() {
   const AddButton = () => {
     return (
       <MenuTrigger>
-        <Button size="sm">
-          <Icon>
+        <Button variant="quiet">
+          <Icon size="sm">
             <Icons.Plus />
           </Icon>
         </Button>
-        <Popover placement="bottom start">
-          <PopupForm>
-            <FilterSelectForm
-              websiteId={websiteId}
-              fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
-              startDate={dateRange?.startDate}
-              endDate={dateRange?.endDate}
-              onChange={handleAdd}
-            />
-          </PopupForm>
+        <Popover placement="right top">
+          <FilterSelectForm
+            websiteId={websiteId}
+            fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
+            startDate={dateRange?.startDate}
+            endDate={dateRange?.endDate}
+            onChange={handleAdd}
+          />
         </Popover>
       </MenuTrigger>
     );
   };
 
   return (
-    <>
+    <Column gap="3">
       <Row justifyContent="space-between">
         <Label>{formatMessage(labels.filters)}</Label>
         <AddButton />
@@ -94,7 +98,7 @@ export function FilterParameters() {
           },
         )}
       </ParameterList>
-    </>
+    </Column>
   );
 }
 
@@ -113,12 +117,16 @@ const FilterParameter = ({
 
   return (
     <MenuTrigger>
-      <div className={styles.item}>
-        <div className={styles.label}>{label}</div>
-        <div className={styles.op}>{operatorLabels[operator]}</div>
-        <div className={styles.value}>{value}</div>
-      </div>
-      <Popover className={styles.edit} placement="right top">
+      <Focusable>
+        <Row gap="3" alignItems="center">
+          <Text>{label}</Text>
+          <Text size="2" transform="uppercase">
+            {operatorLabels[operator]}
+          </Text>
+          <Text weight="bold">{value}</Text>
+        </Row>
+      </Focusable>
+      <Popover placement="right top">
         {(close: any) => (
           <FieldFilterEditForm
             websiteId={websiteId}

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -1,10 +1,8 @@
 import { ReactNode } from 'react';
-import { Icon } from '@umami/react-zen';
+import { Icon, Row, Text, Button, Column } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 import { Empty } from '@/components/common/Empty';
 import { useMessages } from '@/components/hooks';
-import styles from './ParameterList.module.css';
-import classNames from 'classnames';
 
 export interface ParameterListProps {
   children?: ReactNode;
@@ -14,34 +12,43 @@ export function ParameterList({ children }: ParameterListProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <div className={styles.list}>
+    <Column>
       {!children && <Empty message={formatMessage(labels.none)} />}
       {children}
-    </div>
+    </Column>
   );
 }
 
 const Item = ({
-  children,
-  className,
   icon,
   onClick,
   onRemove,
+  children,
 }: {
-  children?: ReactNode;
-  className?: string;
   icon?: ReactNode;
   onClick?: () => void;
   onRemove?: () => void;
+  children?: ReactNode;
 }) => {
   return (
-    <div className={classNames(styles.item, className)} onClick={onClick}>
-      {icon && <Icon className={styles.icon}>{icon}</Icon>}
-      <div className={styles.value}>{children}</div>
-      <Icon className={styles.close} onClick={onRemove}>
-        <Icons.Close />
-      </Icon>
-    </div>
+    <Row
+      gap="3"
+      alignItems="center"
+      justifyContent="space-between"
+      onClick={onClick}
+      backgroundColor="2"
+      border
+      borderRadius="2"
+      paddingLeft="3"
+    >
+      {icon && <Icon>{icon}</Icon>}
+      <Text>{children}</Text>
+      <Button onPress={onRemove} variant="quiet">
+        <Icon>
+          <Icons.Close />
+        </Icon>
+      </Button>
+    </Row>
   );
 };
 

src/app/(main)/reports/[reportId]/PopupForm.module.css

@@ -1,9 +0,0 @@
-.form {
-  background: var(--base50);
-  min-width: 300px;
-  padding: 20px;
-  border: 1px solid var(--base400);
-  border-radius: var(--border-radius);
-  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-}

src/app/(main)/reports/[reportId]/PopupForm.tsx

@@ -1,23 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import classNames from 'classnames';
-import styles from './PopupForm.module.css';
-
-export function PopupForm({
-  className,
-  style,
-  children,
-}: {
-  className?: string;
-  style?: CSSProperties;
-  children: ReactNode;
-}) {
-  return (
-    <div
-      className={classNames(styles.form, className)}
-      style={style}
-      onClick={e => e.stopPropagation()}
-    >
-      {children}
-    </div>
-  );
-}

src/app/(main)/reports/[reportId]/Report.tsx

@@ -1,8 +1,6 @@
 import { createContext, ReactNode } from 'react';
-import { Loading } from '@umami/react-zen';
-import classNames from 'classnames';
+import { Loading, Grid } from '@umami/react-zen';
 import { useReportQuery } from '@/components/hooks';
-import styles from './Report.module.css';
 
 export const ReportContext = createContext(null);
 
@@ -10,12 +8,10 @@ export function Report({
   reportId,
   defaultParameters,
   children,
-  className,
 }: {
   reportId: string;
   defaultParameters: { type: string; parameters: { [key: string]: any } };
   children: ReactNode;
-  className?: string;
 }) {
   const report = useReportQuery(reportId, defaultParameters);
 
@@ -25,7 +21,9 @@ export function Report({
 
   return (
     <ReportContext.Provider value={report}>
-      <div className={classNames(styles.container, className)}>{children}</div>
+      <Grid rows="auto 1fr" columns="auto 1fr" gap="6">
+        {children}
+      </Grid>
     </ReportContext.Provider>
   );
 }

src/app/(main)/reports/[reportId]/ReportBody.tsx

@@ -1,13 +1,12 @@
-import { useContext } from 'react';
-import { ReportContext } from './Report';
-import styles from './ReportBody.module.css';
+import { Panel } from '@/components/common/Panel';
+import { useReport } from '@/components/hooks';
 
 export function ReportBody({ children }) {
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
 
   if (!report) {
     return null;
   }
 
-  return <div className={styles.body}>{children}</div>;
+  return <Panel>{children}</Panel>;
 }

src/app/(main)/reports/[reportId]/ReportHeader.module.css

@@ -1,36 +0,0 @@
-.header {
-  display: grid;
-  grid-template-columns: 1fr min-content;
-  align-items: center;
-  grid-row: 1 / 2;
-  grid-column: 1 / 3;
-  margin: 20px 0 40px 0;
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 24px;
-  font-weight: 700;
-  gap: 20px;
-  height: 60px;
-}
-
-.type {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: var(--base600);
-}
-
-.description {
-  color: var(--font-color300);
-  max-width: 500px;
-  height: 30px;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-}

src/app/(main)/reports/[reportId]/ReportHeader.tsx

@@ -1,13 +1,18 @@
-import { useContext } from 'react';
-import { Icon, LoadingButton, InlineEditField, useToast } from '@umami/react-zen';
-import { useMessages, useApi, useNavigation } from '@/components/hooks';
-import { ReportContext } from './Report';
-import styles from './ReportHeader.module.css';
+import {
+  Row,
+  Column,
+  Text,
+  Heading,
+  Icon,
+  LoadingButton,
+  InlineEditField,
+  useToast,
+} from '@umami/react-zen';
+import { useMessages, useApi, useNavigation, useReport } from '@/components/hooks';
 import { REPORT_TYPES } from '@/lib/constants';
-import { Breadcrumb } from '@/components/common/Breadcrumb';
 
 export function ReportHeader({ icon }) {
-  const { report, updateReport } = useContext(ReportContext);
+  const { report, updateReport } = useReport();
   const { formatMessage, labels, messages } = useMessages();
   const { toast } = useToast();
   const { router, renderTeamUrl } = useNavigation();
@@ -54,41 +59,33 @@ export function ReportHeader({ icon }) {
   }
 
   return (
-    <div className={styles.header}>
-      <div>
-        <div className={styles.type}>
-          <Breadcrumb
-            data={[
-              { label: formatMessage(labels.reports), url: renderTeamUrl('/reports') },
-              {
-                label: formatMessage(
-                  labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
-                ),
-              },
-            ]}
-          />
-        </div>
-        <div className={styles.title}>
-          <Icon size="lg">{icon}</Icon>
-          <InlineEditField
-            key={name}
-            name="name"
-            value={name}
-            placeholder={defaultName}
-            onCommit={handleNameChange}
-          />
-        </div>
-        <div className={styles.description}>
-          <InlineEditField
-            key={description}
-            name="description"
-            value={description}
-            placeholder={`+ ${formatMessage(labels.addDescription)}`}
-            onCommit={handleDescriptionChange}
-          />
-        </div>
-      </div>
-      <div className={styles.actions}>
+    <Column marginY="6" gap="3" gridColumn="1 / 3">
+      <Row gap="3" alignItems="center">
+        <Icon size="sm">{icon}</Icon>
+        <Text transform="uppercase" weight="bold">
+          {formatMessage(
+            labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
+          )}
+        </Text>
+      </Row>
+      <Row justifyContent="space-between" alignItems="center">
+        <Row gap="6">
+          <Column gap="3">
+            <Row gap="3" alignItems="center">
+              <InlineEditField key={name} name="name" value={name} onCommit={handleNameChange}>
+                <Heading>{name}</Heading>
+              </InlineEditField>
+            </Row>
+            <InlineEditField
+              key={description}
+              name="description"
+              value={description}
+              onCommit={handleDescriptionChange}
+            >
+              <Text>{description || `+ ${formatMessage(labels.addDescription)}`}</Text>
+            </InlineEditField>
+          </Column>
+        </Row>
         <LoadingButton
           variant="primary"
           isLoading={isCreating || isUpdating}
@@ -97,7 +94,7 @@ export function ReportHeader({ icon }) {
         >
           {formatMessage(labels.save)}
         </LoadingButton>
-      </div>
-    </div>
+      </Row>
+    </Column>
   );
 }

src/app/(main)/reports/[reportId]/ReportMenu.tsx

@@ -1,25 +1,26 @@
-import { useContext, useState } from 'react';
-import { Icon, Icons } from '@umami/react-zen';
-import classNames from 'classnames';
-import { ReportContext } from './Report';
-import styles from './ReportMenu.module.css';
+import { useState } from 'react';
+import { Button, Column, Icon, Row } from '@umami/react-zen';
+import { Icons } from '@/components/icons';
+import { useReport } from '@/components/hooks';
 
 export function ReportMenu({ children }) {
   const [collapsed, setCollapsed] = useState(false);
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
 
   if (!report) {
     return null;
   }
 
   return (
-    <div className={classNames(styles.menu, collapsed && styles.collapsed)}>
-      <div className={styles.button} onClick={() => setCollapsed(!collapsed)}>
-        <Icon rotate={collapsed ? -90 : 90}>
-          <Icons.Chevron />
-        </Icon>
-      </div>
+    <Column>
+      <Row alignItems="center" justifyContent="flex-end">
+        <Button variant="quiet" onPress={() => setCollapsed(!collapsed)}>
+          <Icon>
+            <Icons.PanelLeft />
+          </Icon>
+        </Button>
+      </Row>
       {!collapsed && children}
-    </div>
+    </Column>
   );
 }

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -1,7 +1,7 @@
 import { Icon, Text, Row, Column, Grid } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Icons } from '@/components/icons';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { LinkButton } from '@/components/common/LinkButton';
 
 export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
@@ -71,7 +71,7 @@ function ReportItem({ title, description, url, icon }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap="6" padding="6" borderSize="1" borderRadius="3" justifyContent="space-between">
+    <Column gap="6" padding="6" border borderRadius="3" justifyContent="space-between">
       <Row gap="3" alignItems="center">
         <Icon size="md">{icon}</Icon>
         <Text size="5" weight="bold">

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -1,4 +1,3 @@
-import { useContext } from 'react';
 import {
   Form,
   FormField,
@@ -10,9 +9,8 @@ import {
 } from '@umami/react-zen';
 import { Empty } from '@/components/common/Empty';
 import { Icons } from '@/components/icons';
-import { useApi, useMessages } from '@/components/hooks';
+import { useApi, useMessages, useReport } from '@/components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from '@/lib/constants';
-import { ReportContext } from '../[reportId]/Report';
 import { FieldAddForm } from '../[reportId]/FieldAddForm';
 import { ParameterList } from '../[reportId]/ParameterList';
 import { BaseParameters } from '../[reportId]/BaseParameters';
@@ -35,7 +33,7 @@ function useFields(websiteId, startDate, endDate) {
 }
 
 export function EventDataParameters() {
-  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, updateReport, isRunning } = useReport();
   const { formatMessage, labels, messages } = useMessages();
   const { id, parameters } = report || {};
   const { websiteId, dateRange, fields, filters, groups } = parameters || {};

src/app/(main)/reports/event-data/EventDataTable.tsx

@@ -1,10 +1,8 @@
-import { useContext } from 'react';
 import { DataTable, DataColumn } from '@umami/react-zen';
-import { useMessages } from '@/components/hooks';
-import { ReportContext } from '../[reportId]/Report';
+import { useMessages, useReport } from '@/components/hooks';
 
 export function EventDataTable() {
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { formatMessage, labels } = useMessages();
 
   return (

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -1,7 +1,5 @@
-import { useContext } from 'react';
 import classNames from 'classnames';
-import { useMessages } from '@/components/hooks';
-import { ReportContext } from '../[reportId]/Report';
+import { useMessages, useReport } from '@/components/hooks';
 import { formatLongNumber } from '@/lib/format';
 import styles from './FunnelChart.module.css';
 
@@ -11,7 +9,7 @@ export interface FunnelChartProps {
 }
 
 export function FunnelChart({ className }: FunnelChartProps) {
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { formatMessage, labels } = useMessages();
 
   const { data } = report || {};

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -1,5 +1,4 @@
-import { useContext } from 'react';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useReport } from '@/components/hooks';
 import {
   Icon,
   Form,
@@ -13,14 +12,12 @@ import {
 } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 import { FunnelStepAddForm } from './FunnelStepAddForm';
-import { ReportContext } from '../[reportId]/Report';
 import { BaseParameters } from '../[reportId]/BaseParameters';
 import { ParameterList } from '../[reportId]/ParameterList';
-import { PopupForm } from '../[reportId]/PopupForm';
 import styles from './FunnelParameters.module.css';
 
 export function FunnelParameters() {
-  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, updateReport, isRunning } = useReport();
   const { formatMessage, labels } = useMessages();
 
   const { id, parameters } = report || {};
@@ -66,9 +63,7 @@ export function FunnelParameters() {
           </Icon>
         </Button>
         <Popover placement="start">
-          <PopupForm>
-            <FunnelStepAddForm onChange={handleAddStep} />
-          </PopupForm>
+          <FunnelStepAddForm onChange={handleAddStep} />
         </Popover>
       </DialogTrigger>
     );
@@ -90,7 +85,6 @@ export function FunnelParameters() {
             return (
               <DialogTrigger key={index}>
                 <ParameterList.Item
-                  className={styles.item}
                   icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
                   onRemove={() => handleRemoveStep(index)}
                 >
@@ -100,13 +94,11 @@ export function FunnelParameters() {
                 </ParameterList.Item>
                 <Popover placement="start">
                   {({ close }: any) => (
-                    <PopupForm>
-                      <FunnelStepAddForm
-                        type={step.type}
-                        value={step.value}
-                        onChange={handleUpdateStep.bind(null, close, index)}
-                      />
-                    </PopupForm>
+                    <FunnelStepAddForm
+                      type={step.type}
+                      value={step.value}
+                      onChange={handleUpdateStep.bind(null, close, index)}
+                    />
                   )}
                 </Popover>
               </DialogTrigger>

src/app/(main)/reports/goals/GoalsChart.tsx

@@ -1,12 +1,10 @@
-import { useContext } from 'react';
 import classNames from 'classnames';
-import { useMessages } from '@/components/hooks';
-import { ReportContext } from '../[reportId]/Report';
+import { useMessages, useReport } from '@/components/hooks';
 import { formatLongNumber } from '@/lib/format';
 import styles from './GoalsChart.module.css';
 
 export function GoalsChart({ className }: { className?: string; isLoading?: boolean }) {
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { formatMessage, labels } = useMessages();
 
   const { data } = report || {};

src/app/(main)/reports/goals/GoalsParameters.tsx

@@ -1,7 +1,6 @@
-import { useMessages } from '@/components/hooks';
+import { useMessages, useReport } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { formatNumber } from '@/lib/format';
-import { useContext } from 'react';
 import {
   Button,
   Form,
@@ -15,12 +14,11 @@ import {
 } from '@umami/react-zen';
 import { BaseParameters } from '../[reportId]/BaseParameters';
 import { ParameterList } from '../[reportId]/ParameterList';
-import { ReportContext } from '../[reportId]/Report';
 import { GoalsAddForm } from './GoalsAddForm';
 import styles from './GoalsParameters.module.css';
 
 export function GoalsParameters() {
-  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, updateReport, isRunning } = useReport();
   const { formatMessage, labels } = useMessages();
 
   const { id, parameters } = report || {};
@@ -76,7 +74,7 @@ export function GoalsParameters() {
     <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters allowWebsiteSelect={!id} />
       <AddGoalsButton />
-      <FormField label={formatMessage(labels.goals)}>
+      <FormField name="goal" label={formatMessage(labels.goals)}>
         <ParameterList>
           {goals.map(
             (

src/app/(main)/reports/insights/InsightsParameters.tsx

@@ -1,13 +1,11 @@
-import { useMessages } from '@/components/hooks';
-import { useContext } from 'react';
+import { useMessages, useReport } from '@/components/hooks';
 import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
 import { BaseParameters } from '../[reportId]/BaseParameters';
-import { ReportContext } from '../[reportId]/Report';
 import { FieldParameters } from '../[reportId]/FieldParameters';
 import { FilterParameters } from '../[reportId]/FilterParameters';
 
 export function InsightsParameters() {
-  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, isRunning } = useReport();
   const { formatMessage, labels } = useMessages();
   const { id, parameters } = report || {};
   const { websiteId, dateRange, fields, filters } = parameters || {};
@@ -20,7 +18,7 @@ export function InsightsParameters() {
   };
 
   return (
-    <Form values={parameters} onSubmit={handleSubmit}>
+    <Form values={parameters} onSubmit={handleSubmit} gap="6">
       <BaseParameters allowWebsiteSelect={!id} />
       {parametersSelected && <FieldParameters />}
       {parametersSelected && <FilterParameters />}

src/app/(main)/reports/insights/InsightsTable.tsx

@@ -1,13 +1,12 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DataTable, DataColumn } from '@umami/react-zen';
-import { useFormat, useMessages } from '@/components/hooks';
-import { ReportContext } from '../[reportId]/Report';
+import { useFormat, useMessages, useReport } from '@/components/hooks';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { formatShortTime } from '@/lib/format';
 
 export function InsightsTable() {
   const [fields, setFields] = useState([]);
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
 

src/app/(main)/reports/journey/JourneyParameters.tsx

@@ -1,5 +1,4 @@
-import { useContext } from 'react';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useReport } from '@/components/hooks';
 import {
   Select,
   Form,
@@ -9,11 +8,10 @@ import {
   FormSubmitButton,
   TextField,
 } from '@umami/react-zen';
-import { ReportContext } from '../[reportId]/Report';
 import { BaseParameters } from '../[reportId]/BaseParameters';
 
 export function JourneyParameters() {
-  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, isRunning } = useReport();
   const { formatMessage, labels } = useMessages();
 
   const { id, parameters } = report || {};

src/app/(main)/reports/journey/JourneyView.tsx

@@ -1,10 +1,9 @@
-import { useContext, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { TooltipTrigger, Tooltip, Focusable } from '@umami/react-zen';
 import { firstBy } from 'thenby';
 import classNames from 'classnames';
-import { useEscapeKey, useMessages } from '@/components/hooks';
+import { useEscapeKey, useMessages, useReport } from '@/components/hooks';
 import { objectToArray } from '@/lib/data';
-import { ReportContext } from '../[reportId]/Report';
 import styles from './JourneyView.module.css';
 import { formatLongNumber } from '@/lib/format';
 
@@ -15,7 +14,7 @@ const LINE_WIDTH = 3;
 export function JourneyView() {
   const [selectedNode, setSelectedNode] = useState(null);
   const [activeNode, setActiveNode] = useState(null);
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { data, parameters } = report || {};
   const { formatMessage, labels } = useMessages();
 

src/app/(main)/reports/retention/RetentionParameters.tsx

@@ -1,12 +1,9 @@
-import { useContext } from 'react';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useReport } from '@/components/hooks';
 import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
-import { ReportContext } from '../[reportId]/Report';
 import { BaseParameters } from '../[reportId]/BaseParameters';
-import { parseDateRange } from '@/lib/date';
 
 export function RetentionParameters() {
-  const { report, runReport, isRunning, updateReport } = useContext(ReportContext);
+  const { report, runReport, isRunning } = useReport();
   const { formatMessage, labels } = useMessages();
 
   const { id, parameters } = report || {};

src/app/(main)/reports/retention/RetentionTable.tsx

@@ -1,8 +1,6 @@
-import { useContext } from 'react';
 import classNames from 'classnames';
-import { ReportContext } from '../[reportId]/Report';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
-import { useMessages, useLocale } from '@/components/hooks';
+import { useMessages, useLocale, useReport } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 import styles from './RetentionTable.module.css';
 
@@ -11,7 +9,7 @@ const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
 export function RetentionTable({ days = DAYS }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { data } = report || {};
 
   if (!data) {

src/app/(main)/reports/revenue/RevenueParameters.tsx

@@ -1,12 +1,10 @@
-import { useMessages } from '@/components/hooks';
+import { useMessages, useReport } from '@/components/hooks';
 import { useRevenueValuesQuery } from '@/components/hooks/queries/useRevenueValuesQuery';
-import { useContext } from 'react';
 import { Select, Form, FormButtons, FormField, ListItem, FormSubmitButton } from '@umami/react-zen';
 import { BaseParameters } from '../[reportId]/BaseParameters';
-import { ReportContext } from '../[reportId]/Report';
 
 export function RevenueParameters() {
-  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, isRunning } = useReport();
   const { formatMessage, labels } = useMessages();
   const { id, parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};

src/app/(main)/reports/revenue/RevenueTable.tsx

@@ -1,12 +1,10 @@
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
-import { useMessages } from '@/components/hooks';
-import { useContext } from 'react';
+import { useMessages, useReport } from '@/components/hooks';
 import { DataColumn, DataTable } from '@umami/react-zen';
-import { ReportContext } from '../[reportId]/Report';
 import { formatLongCurrency } from '@/lib/format';
 
 export function RevenueTable() {
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { formatMessage, labels } = useMessages();
   const { data } = report || {};
 

src/app/(main)/reports/revenue/RevenueView.tsx

@@ -3,16 +3,15 @@ import { colord } from 'colord';
 import { BarChart } from '@/components/charts/BarChart';
 import { PieChart } from '@/components/charts/PieChart';
 import { TypeIcon } from '@/components/common/TypeIcon';
-import { useCountryNames, useLocale, useMessages } from '@/components/hooks';
-import { GridRow } from '@/components/layout/GridRow';
+import { useCountryNames, useLocale, useMessages, useReport } from '@/components/hooks';
+import { GridRow } from '@/components/common/GridRow';
 import { ListTable } from '@/components/metrics/ListTable';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
 import { formatLongCurrency, formatLongNumber } from '@/lib/format';
-import { useCallback, useContext, useMemo } from 'react';
-import { ReportContext } from '../[reportId]/Report';
+import { useCallback, useMemo } from 'react';
 import { RevenueTable } from './RevenueTable';
 import styles from './RevenueView.module.css';
 
@@ -24,7 +23,7 @@ export function RevenueView({ isLoading }: RevenueViewProps) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const { countryNames } = useCountryNames(locale);
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const {
     data,
     parameters: { dateRange, currency },

src/app/(main)/reports/utm/UTMParameters.tsx

@@ -1,11 +1,9 @@
-import { useContext } from 'react';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useReport } from '@/components/hooks';
 import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
-import { ReportContext } from '../[reportId]/Report';
 import { BaseParameters } from '../[reportId]/BaseParameters';
 
 export function UTMParameters() {
-  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, isRunning } = useReport();
   const { formatMessage, labels } = useMessages();
 
   const { id, parameters } = report || {};

src/app/(main)/reports/utm/UTMView.tsx

@@ -1,7 +1,6 @@
-import { useContext } from 'react';
 import { firstBy } from 'thenby';
-import { ReportContext } from '../[reportId]/Report';
 import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
+import { useReport } from '@/components/hooks';
 import { PieChart } from '@/components/charts/PieChart';
 import { ListTable } from '@/components/metrics/ListTable';
 import styles from './UTMView.module.css';
@@ -17,7 +16,7 @@ function toArray(data: { [key: string]: number } = {}) {
 
 export function UTMView() {
   const { formatMessage, labels } = useMessages();
-  const { report } = useContext(ReportContext);
+  const { report } = useReport();
   const { data } = report || {};
 
   if (!data) {

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

@@ -2,7 +2,7 @@
 import { ReactNode } from 'react';
 import { Grid, Column } from '@umami/react-zen';
 import { useLoginQuery, useMessages } from '@/components/hooks';
-import { SideBar } from '@/components/layout/SideBar';
+import { SideBar } from '@/components/common/SideBar';
 
 export function SettingsLayout({ children }: { children: ReactNode }) {
   const { user } = useLoginQuery();

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

@@ -1,5 +1,5 @@
 import { Row } from '@umami/react-zen';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { ROLES } from '@/lib/constants';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { TeamsJoinButton } from './TeamsJoinButton';

src/app/(main)/settings/users/UsersHeader.tsx

@@ -1,4 +1,4 @@
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { useMessages } from '@/components/hooks';
 import { UserAddButton } from './UserAddButton';
 

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 import { UserEditForm } from './UserEditForm';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { useMessages } from '@/components/hooks';
 import { UserWebsites } from './UserWebsites';
 import { UserContext } from './UserProvider';

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

@@ -1,5 +1,5 @@
 import { useMessages, useNavigation } from '@/components/hooks';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { WebsiteAddButton } from './WebsiteAddButton';
 
 export interface WebsitesHeaderProps {

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

@@ -10,7 +10,7 @@ import {
 import { WebsiteDeleteForm } from './WebsiteDeleteForm';
 import { WebsiteResetForm } from './WebsiteResetForm';
 import { WebsiteTransferForm } from './WebsiteTransferForm';
-import { ActionForm } from '@/components/layout/ActionForm';
+import { ActionForm } from '@/components/common/ActionForm';
 import { ROLES } from '@/lib/constants';
 
 export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {

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

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { ShareUrl } from './ShareUrl';
 import { TrackingCode } from './TrackingCode';
 import { WebsiteData } from './WebsiteData';

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

@@ -2,7 +2,7 @@
 import { ReactNode } from 'react';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Grid, Column } from '@umami/react-zen';
-import { SideBar } from '@/components/layout/SideBar';
+import { SideBar } from '@/components/common/SideBar';
 
 export function TeamSettingsLayout({ children }: { children: ReactNode }) {
   const { formatMessage, labels } = useMessages();

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

@@ -1,7 +1,7 @@
 'use client';
 import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 import { useContext } from 'react';

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

@@ -1,14 +1,14 @@
 import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { ROLES } from '@/lib/constants';
 import { useContext, useState } from 'react';
 import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
 import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
 import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
-import { Panel } from '@/components/layout/Panel';
+import { Panel } from '@/components/common/Panel';
 
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);

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

@@ -1,7 +1,7 @@
 import { useMessages, useModified } from '@/components/hooks';
 import { useRouter } from 'next/navigation';
 import { Button, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
-import { ActionForm } from '@/components/layout/ActionForm';
+import { ActionForm } from '@/components/common/ActionForm';
 import { TeamDeleteForm } from './TeamDeleteForm';
 
 export function TeamManage({ teamId }: { teamId: string }) {

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

@@ -2,7 +2,7 @@
 import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 import { WebsiteAddButton } from '@/app/(main)/settings/websites/WebsiteAddButton';
 import { useLoginQuery, useMessages } from '@/components/hooks';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
 import { ROLES } from '@/lib/constants';
 import { useContext } from 'react';

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

@@ -1,9 +1,7 @@
 'use client';
 import { Column } from '@umami/react-zen';
-import { Panel } from '@/components/layout/Panel';
-import { FilterTags } from '@/components/metrics/FilterTags';
+import { Panel } from '@/components/common/Panel';
 import { useNavigation } from '@/components/hooks';
-import { FILTER_COLUMNS } from '@/lib/constants';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteExpandedView } from './WebsiteExpandedView';
 import { WebsiteHeader } from './WebsiteHeader';
@@ -11,21 +9,16 @@ import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { WebsiteTableView } from './WebsiteTableView';
 
 export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
-  const { query } = useNavigation();
-  const { view } = query;
-
-  const params = Object.keys(query).reduce((obj, key) => {
-    if (FILTER_COLUMNS[key]) {
-      obj[key] = query[key];
-    }
-    return obj;
-  }, {});
+  const {
+    query: { view },
+  } = useNavigation();
 
   return (
     <Column gap="3">
       <WebsiteHeader websiteId={websiteId} />
-      <FilterTags websiteId={websiteId} params={params} />
-      <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
+      <Panel>
+        <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
+      </Panel>
       <Panel>
         <WebsiteChart websiteId={websiteId} />
       </Panel>

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/layout/SideBar';
+import { SideBar } from '@/components/common/SideBar';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
 import { CountriesTable } from '@/components/metrics/CountriesTable';

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

@@ -1,31 +1,80 @@
-import { ReactNode } from 'react';
-import { Row, Heading } from '@umami/react-zen';
+import {
+  Column,
+  Row,
+  Heading,
+  MenuTrigger,
+  Button,
+  Icon,
+  Icons,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+} from '@umami/react-zen';
 import { Favicon } from '@/components/common/Favicon';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
 import { useWebsite } from '@/components/hooks/useWebsite';
+import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFilterButton';
+import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
+import { FilterTags } from '@/components/metrics/FilterTags';
+import { useMessages } from '@/components/hooks';
 
 export function WebsiteHeader({
   websiteId,
-  children,
+  showFilter = true,
+  allowEdit = true,
+  compareMode = false,
 }: {
   websiteId: string;
-  children?: ReactNode;
+  showFilter?: boolean;
+  allowEdit?: boolean;
+  compareMode?: boolean;
 }) {
   const website = useWebsite();
+  const { formatMessage, labels } = useMessages();
   const { name, domain } = website || {};
 
+  const items = [
+    { label: formatMessage(labels.previousPeriod), value: 'prev' },
+    { label: formatMessage(labels.previousYear), value: 'yoy' },
+  ];
+
   return (
-    <>
-      <Row alignItems="center" gap="3" marginY="6">
-        <Favicon domain={domain} />
-        <Heading>
-          {name}
-          <ActiveUsers websiteId={websiteId} />
-        </Heading>
-        {children}
+    <Column marginY="6" gap="6">
+      <Row alignItems="center" justifyContent="space-between" gap="3">
+        <Row alignItems="center" gap="3">
+          <Favicon domain={domain} />
+          <Heading>
+            {name}
+            <ActiveUsers websiteId={websiteId} />
+          </Heading>
+        </Row>
+        <Row alignItems="center" gap="3">
+          {showFilter && <WebsiteFilterButton websiteId={websiteId} />}
+          <WebsiteDateFilter websiteId={websiteId} />
+          {allowEdit && (
+            <MenuTrigger>
+              <Button variant="quiet">
+                <Icon>
+                  <Icons.More />
+                </Icon>
+              </Button>
+              <Popover placement="bottom end">
+                <Menu>
+                  <MenuItem>Compare dates</MenuItem>
+                  <MenuItem>Share</MenuItem>
+                  <MenuSeparator />
+                  <MenuItem>Settings</MenuItem>
+                </Menu>
+              </Popover>
+            </MenuTrigger>
+          )}
+        </Row>
       </Row>
+      {compareMode && items.map(item => <div key={item.value}>{item.label}</div>)}
+      <FilterTags websiteId={websiteId} />
       <WebsiteTabs websiteId={websiteId} />
-    </>
+    </Column>
   );
 }

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

@@ -1,24 +1,16 @@
-import { Select, ListItem } from '@umami/react-zen';
-import classNames from 'classnames';
-import { useDateRange, useMessages, useSticky } from '@/components/hooks';
-import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
+import { useDateRange, useMessages } from '@/components/hooks';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatShortTime, formatLongNumber } from '@/lib/format';
 import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
-import { useWebsites, setWebsiteDateCompare } from '@/store/websites';
-import { WebsiteFilterButton } from './WebsiteFilterButton';
-import styles from './WebsiteMetricsBar.module.css';
+import { useWebsites } from '@/store/websites';
 
 export function WebsiteMetricsBar({
   websiteId,
-  sticky,
   showChange = false,
   compareMode = false,
-  showFilter = false,
 }: {
   websiteId: string;
-  sticky?: boolean;
   showChange?: boolean;
   compareMode?: boolean;
   showFilter?: boolean;
@@ -26,7 +18,6 @@ export function WebsiteMetricsBar({
   const { dateRange } = useDateRange(websiteId);
   const { formatMessage, labels } = useMessages();
   const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
-  const { ref } = useSticky({ enabled: sticky });
   const { data, isLoading, isFetched, error } = useWebsiteStatsQuery(
     websiteId,
     compareMode && dateCompare,
@@ -76,51 +67,23 @@ export function WebsiteMetricsBar({
       ]
     : [];
 
-  const items = [
-    { label: formatMessage(labels.previousPeriod), value: 'prev' },
-    { label: formatMessage(labels.previousYear), value: 'yoy' },
-  ];
-
   return (
-    <div ref={ref} className={classNames(styles.container)}>
-      <div>
-        <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
-          {metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
-            return (
-              <MetricCard
-                key={label}
-                value={value}
-                previousValue={prev}
-                label={label}
-                change={change}
-                formatValue={formatValue}
-                reverseColors={reverseColors}
-                showChange={!isAllTime && (compareMode || showChange)}
-                showPrevious={!isAllTime && compareMode}
-              />
-            );
-          })}
-        </MetricsBar>
-      </div>
-      <div className={styles.actions}>
-        {showFilter && <WebsiteFilterButton websiteId={websiteId} />}
-        <WebsiteDateFilter websiteId={websiteId} showAllTime={!compareMode} />
-        {compareMode && (
-          <div className={styles.vs}>
-            <b>VS</b>
-            <Select
-              className={styles.dropdown}
-              items={items}
-              value={dateCompare || 'prev'}
-              onChange={(value: any) => setWebsiteDateCompare(websiteId, value)}
-            >
-              {items.map(({ label, value }) => (
-                <ListItem key={value}>{label}</ListItem>
-              ))}
-            </Select>
-          </div>
-        )}
-      </div>
-    </div>
+    <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+      {metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
+        return (
+          <MetricCard
+            key={label}
+            value={value}
+            previousValue={prev}
+            label={label}
+            change={change}
+            formatValue={formatValue}
+            reverseColors={reverseColors}
+            showChange={!isAllTime && (compareMode || showChange)}
+            showPrevious={!isAllTime && compareMode}
+          />
+        );
+      })}
+    </MetricsBar>
   );
 }

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

@@ -1,5 +1,5 @@
 import { Grid } from '@umami/react-zen';
-import { Panel } from '@/components/layout/Panel';
+import { Panel } from '@/components/common/Panel';
 import { PagesTable } from '@/components/metrics/PagesTable';
 import { ReferrersTable } from '@/components/metrics/ReferrersTable';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';

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

@@ -1,28 +1,17 @@
 'use client';
 import { Grid } from '@umami/react-zen';
-import { Panel } from '@/components/layout/Panel';
+import { Panel } from '@/components/common/Panel';
 import { WebsiteHeader } from '../WebsiteHeader';
 import { WebsiteMetricsBar } from '../WebsiteMetricsBar';
 import { FilterTags } from '@/components/metrics/FilterTags';
-import { useNavigation } from '@/components/hooks';
-import { FILTER_COLUMNS } from '@/lib/constants';
 import { WebsiteChart } from '../WebsiteChart';
 import { WebsiteCompareTables } from './WebsiteCompareTables';
 
 export function WebsiteComparePage({ websiteId }) {
-  const { query } = useNavigation();
-
-  const params = Object.keys(query).reduce((obj, key) => {
-    if (FILTER_COLUMNS[key]) {
-      obj[key] = query[key];
-    }
-    return obj;
-  }, {});
-
   return (
     <Grid gap="3">
       <WebsiteHeader websiteId={websiteId} />
-      <FilterTags websiteId={websiteId} params={params} />
+      <FilterTags websiteId={websiteId} />
       <WebsiteMetricsBar websiteId={websiteId} compareMode={true} showFilter={true} />
       <Panel>
         <WebsiteChart websiteId={websiteId} compareMode={true} />

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

@@ -1,6 +1,6 @@
 import { Grid, Heading, Column } from '@umami/react-zen';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
-import { SideBar } from '@/components/layout/SideBar';
+import { SideBar } from '@/components/common/SideBar';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import { CitiesTable } from '@/components/metrics/CitiesTable';

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

@@ -1,40 +1,35 @@
 import { useMessages } from '@/components/hooks';
 import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
-import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatLongNumber } from '@/lib/format';
-import { Flexbox } from '@umami/react-zen';
 
 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
-    <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
-      <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
-        <MetricCard
-          value={data?.visitors?.value}
-          label={formatMessage(labels.visitors)}
-          formatValue={formatLongNumber}
-        />
-        <MetricCard
-          value={data?.visits?.value}
-          label={formatMessage(labels.visits)}
-          formatValue={formatLongNumber}
-        />
-        <MetricCard
-          value={data?.pageviews?.value}
-          label={formatMessage(labels.views)}
-          formatValue={formatLongNumber}
-        />
-        <MetricCard
-          value={data?.events?.value}
-          label={formatMessage(labels.events)}
-          formatValue={formatLongNumber}
-        />
-      </MetricsBar>
-      <WebsiteDateFilter websiteId={websiteId} />
-    </Flexbox>
+    <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+      <MetricCard
+        value={data?.visitors?.value}
+        label={formatMessage(labels.visitors)}
+        formatValue={formatLongNumber}
+      />
+      <MetricCard
+        value={data?.visits?.value}
+        label={formatMessage(labels.visits)}
+        formatValue={formatLongNumber}
+      />
+      <MetricCard
+        value={data?.pageviews?.value}
+        label={formatMessage(labels.views)}
+        formatValue={formatLongNumber}
+      />
+      <MetricCard
+        value={data?.events?.value}
+        label={formatMessage(labels.events)}
+        formatValue={formatLongNumber}
+      />
+    </MetricsBar>
   );
 }

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

@@ -1,12 +1,12 @@
 'use client';
-import { TabList, Tab, Tabs, TabPanel, Grid } from '@umami/react-zen';
+import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
 import { useState } from 'react';
 import { WebsiteHeader } from '../WebsiteHeader';
 import { EventsDataTable } from './EventsDataTable';
 import { EventsMetricsBar } from './EventsMetricsBar';
-import { Panel } from '@/components/layout/Panel';
+import { Panel } from '@/components/common/Panel';
 import { EventsChart } from '@/components/metrics/EventsChart';
-import { GridRow } from '@/components/layout/GridRow';
+import { GridRow } from '@/components/common/GridRow';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { useMessages } from '@/components/hooks';
 import { EventProperties } from './EventProperties';
@@ -16,9 +16,11 @@ export function EventsPage({ websiteId }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Grid gap="3">
+    <Column gap="3">
       <WebsiteHeader websiteId={websiteId} />
-      <EventsMetricsBar websiteId={websiteId} />
+      <Panel>
+        <EventsMetricsBar websiteId={websiteId} />
+      </Panel>
       <GridRow layout="two-one">
         <Panel>
           <EventsChart websiteId={websiteId} />
@@ -46,6 +48,6 @@ export function EventsPage({ websiteId }) {
           </TabPanel>
         </Tabs>
       </Panel>
-    </Grid>
+    </Column>
   );
 }

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

@@ -1,36 +1,18 @@
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { useMessages } from '@/components/hooks';
 import { RealtimeData } from '@/lib/types';
-import styles from './RealtimeHeader.module.css';
+import { MetricsBar } from '@/components/metrics/MetricsBar';
 
 export function RealtimeHeader({ data }: { data: RealtimeData }) {
   const { formatMessage, labels } = useMessages();
   const { totals }: any = data || {};
 
   return (
-    <div className={styles.header}>
-      <div className={styles.metrics}>
-        <MetricCard
-          className={styles.card}
-          label={formatMessage(labels.views)}
-          value={totals.views}
-        />
-        <MetricCard
-          className={styles.card}
-          label={formatMessage(labels.visitors)}
-          value={totals.visitors}
-        />
-        <MetricCard
-          className={styles.card}
-          label={formatMessage(labels.events)}
-          value={totals.events}
-        />
-        <MetricCard
-          className={styles.card}
-          label={formatMessage(labels.countries)}
-          value={totals.countries}
-        />
-      </div>
-    </div>
+    <MetricsBar isFetched={true}>
+      <MetricCard label={formatMessage(labels.views)} value={totals.views} />
+      <MetricCard label={formatMessage(labels.visitors)} value={totals.visitors} />
+      <MetricCard label={formatMessage(labels.events)} value={totals.events} />
+      <MetricCard label={formatMessage(labels.countries)} value={totals.countries} />
+    </MetricsBar>
   );
 }

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/layout/Page';
-import { PageHeader } from '@/components/layout/PageHeader';
+import { Page } from '@/components/common/Page';
+import { PageHeader } from '@/components/common/PageHeader';
 import { useApi, useMessages } from '@/components/hooks';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 

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

@@ -1,9 +1,9 @@
 'use client';
 import { firstBy } from 'thenby';
 import { Grid } from '@umami/react-zen';
-import { GridRow } from '@/components/layout/GridRow';
-import { Page } from '@/components/layout/Page';
-import { Panel } from '@/components/layout/Panel';
+import { GridRow } from '@/components/common/GridRow';
+import { Page } from '@/components/common/Page';
+import { Panel } from '@/components/common/Panel';
 import { RealtimeChart } from '@/components/metrics/RealtimeChart';
 import { WorldMap } from '@/components/metrics/WorldMap';
 import { useRealtimeQuery } from '@/components/hooks';
@@ -30,7 +30,9 @@ export function WebsiteRealtimePage({ websiteId }) {
   return (
     <Grid gap="3">
       <WebsiteHeader websiteId={websiteId} />
-      <RealtimeHeader data={data} />
+      <Panel>
+        <RealtimeHeader data={data} />
+      </Panel>
       <Panel>
         <RealtimeChart data={data} unit="minute" />
       </Panel>

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

@@ -1,40 +1,35 @@
 import { useMessages } from '@/components/hooks';
 import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
-import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatLongNumber } from '@/lib/format';
-import { Flexbox } from '@umami/react-zen';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
-    <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
-      <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
-        <MetricCard
-          value={data?.visitors?.value}
-          label={formatMessage(labels.visitors)}
-          formatValue={formatLongNumber}
-        />
-        <MetricCard
-          value={data?.visits?.value}
-          label={formatMessage(labels.visits)}
-          formatValue={formatLongNumber}
-        />
-        <MetricCard
-          value={data?.pageviews?.value}
-          label={formatMessage(labels.views)}
-          formatValue={formatLongNumber}
-        />
-        <MetricCard
-          value={data?.countries?.value}
-          label={formatMessage(labels.countries)}
-          formatValue={formatLongNumber}
-        />
-      </MetricsBar>
-      <WebsiteDateFilter websiteId={websiteId} />
-    </Flexbox>
+    <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+      <MetricCard
+        value={data?.visitors?.value}
+        label={formatMessage(labels.visitors)}
+        formatValue={formatLongNumber}
+      />
+      <MetricCard
+        value={data?.visits?.value}
+        label={formatMessage(labels.visits)}
+        formatValue={formatLongNumber}
+      />
+      <MetricCard
+        value={data?.pageviews?.value}
+        label={formatMessage(labels.views)}
+        formatValue={formatLongNumber}
+      />
+      <MetricCard
+        value={data?.countries?.value}
+        label={formatMessage(labels.countries)}
+        formatValue={formatLongNumber}
+      />
+    </MetricsBar>
   );
 }

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

@@ -1,24 +1,26 @@
 'use client';
+import { useState } from 'react';
+import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
 import { WebsiteHeader } from '../WebsiteHeader';
 import { SessionsDataTable } from './SessionsDataTable';
 import { SessionsMetricsBar } from './SessionsMetricsBar';
 import { SessionProperties } from './SessionProperties';
 import { WorldMap } from '@/components/metrics/WorldMap';
-import { GridRow } from '@/components/layout/GridRow';
-import { TabList, Tab, Tabs, TabPanel } from '@umami/react-zen';
-import { useState } from 'react';
+import { GridRow } from '@/components/common/GridRow';
 import { useMessages } from '@/components/hooks';
 import { SessionsWeekly } from './SessionsWeekly';
-import { Panel } from '@/components/layout/Panel';
+import { Panel } from '@/components/common/Panel';
 
 export function SessionsPage({ websiteId }) {
   const [tab, setTab] = useState('activity');
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <Column gap="3">
       <WebsiteHeader websiteId={websiteId} />
-      <SessionsMetricsBar websiteId={websiteId} />
+      <Panel>
+        <SessionsMetricsBar websiteId={websiteId} />
+      </Panel>
       <GridRow layout="two-one">
         <Panel padding="0">
           <WorldMap websiteId={websiteId} />
@@ -41,6 +43,6 @@ export function SessionsPage({ websiteId }) {
           </TabPanel>
         </Tabs>
       </Panel>
-    </>
+    </Column>
   );
 }

src/app/share/[...shareId]/SharePage.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { WebsiteDetailsPage } from '../../(main)/websites/[websiteId]/WebsiteDetailsPage';
 import { useShareTokenQuery } from '@/components/hooks';
-import { Page } from '@/components/layout/Page';
+import { Page } from '@/components/common/Page';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import styles from './SharePage.module.css';