From 1c22c18de52aee01a911297ac1cf1e98e39f780d Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Wed, 14 May 2025 13:31:07 -0700
Subject: [PATCH] New menu layout.

---
 src/app/(main)/App.tsx                        |  4 +-
 src/app/(main)/Nav.tsx                        |  2 +-
 .../[websiteId]/WebsiteDetailsPage.tsx        |  4 +-
 .../websites/[websiteId]/WebsiteLayout.tsx    | 13 +++
 .../websites/[websiteId]/WebsiteTabs.tsx      | 86 +++++++++++++++----
 .../[websiteId]/events/EventsPage.tsx         |  2 -
 .../(main)/websites/[websiteId]/layout.tsx    |  4 +-
 .../realtime/WebsiteRealtimePage.tsx          |  2 -
 .../reports/WebsiteReportsPage.tsx            |  2 -
 .../[websiteId]/sessions/SessionsPage.tsx     |  2 -
 .../[sessionId]/SessionDetailsPage.tsx        |  2 -
 src/components/common/DateDisplay.tsx         |  4 +-
 src/components/input/DateFilter.tsx           |  1 +
 src/components/input/WebsiteDateFilter.tsx    |  4 +-
 src/components/metrics/FilterBar.tsx          | 16 ++--
 src/declaration.d.ts                          |  1 +
 src/styles/global.css                         |  1 -
 17 files changed, 103 insertions(+), 47 deletions(-)
 create mode 100644 src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx

diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index 2fe47d57..e003b213 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -19,6 +19,7 @@ export function App({ children }) {
 
   if (error) {
     window.location.href = `${process.env.basePath || ''}/login`;
+    return null;
   }
 
   if (!user || !config) {
@@ -30,7 +31,7 @@ export function App({ children }) {
   }
 
   return (
-    <Grid height="100vh" width="100%" columns="auto 1fr" rows="auto 1fr" overflow="hidden">
+    <Grid height="100vh" width="100%" columns="auto 1fr" rows="auto 1fr">
       <Nav gridColumn="1 / 2" gridRow="1 / 3" />
       <MenuBar gridColumn="2 / 3" gridRow="1 / 2" />
       <Column
@@ -39,6 +40,7 @@ export function App({ children }) {
         alignItems="center"
         overflow="auto"
         backgroundColor="2"
+        position="relative"
       >
         <Page>
           {children}
diff --git a/src/app/(main)/Nav.tsx b/src/app/(main)/Nav.tsx
index 0058195f..ee25a00a 100644
--- a/src/app/(main)/Nav.tsx
+++ b/src/app/(main)/Nav.tsx
@@ -38,7 +38,7 @@ export function Nav(props: any) {
   ].filter(n => n);
 
   return (
-    <SideNav {...props} isCollapsed={isCollapsed} variant="0" showBorder={true}>
+    <SideNav {...props} isCollapsed={isCollapsed} variant="2" showBorder={true}>
       <SideNavSection>
         <SideNavHeader label="umami" icon={<Icons.Logo />} />
       </SideNavSection>
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
index 3ad0e507..d7dda569 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
@@ -4,7 +4,6 @@ import { Panel } from '@/components/common/Panel';
 import { useNavigation } from '@/components/hooks';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteExpandedView } from './WebsiteExpandedView';
-import { WebsiteHeader } from './WebsiteHeader';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { WebsiteTableView } from './WebsiteTableView';
 import { WebsiteCompareTables } from './WebsiteCompareTables';
@@ -15,8 +14,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
   } = useNavigation();
 
   return (
-    <Column gap="3">
-      <WebsiteHeader websiteId={websiteId} />
+    <Column gap>
       <Panel>
         <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
       </Panel>
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
new file mode 100644
index 00000000..fbfd216b
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
@@ -0,0 +1,13 @@
+'use client';
+import { ReactNode } from 'react';
+import { WebsiteProvider } from './WebsiteProvider';
+import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
+
+export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
+  return (
+    <WebsiteProvider websiteId={websiteId}>
+      <WebsiteHeader websiteId={websiteId} />
+      {children}
+    </WebsiteProvider>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
index 53403185..b6cb7849 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
@@ -1,6 +1,7 @@
-import { Tabs, TabList, Tab, Icon, Text, Row } from '@umami/react-zen';
+import { Column, Icon, Text, Row } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
+import Link from 'next/link';
 
 export function WebsiteTabs({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
@@ -31,6 +32,54 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
       icon: <Icons.Clock />,
       path: '/realtime',
     },
+    {
+      id: 'insights',
+      label: formatMessage(labels.insights),
+      icon: <Icons.Lightbulb />,
+      path: '/insights',
+    },
+    {
+      id: 'goals',
+      label: formatMessage(labels.goals),
+      icon: <Icons.Target />,
+      path: '/goals',
+    },
+    {
+      id: 'funnel',
+      label: formatMessage(labels.funnel),
+      icon: <Icons.Funnel />,
+      path: '/funnels',
+    },
+    {
+      id: 'journeys',
+      label: formatMessage(labels.journey),
+      icon: <Icons.Path />,
+      path: '/goals',
+    },
+    {
+      id: 'retention',
+      label: formatMessage(labels.retention),
+      icon: <Icons.Magnet />,
+      path: '/funnels',
+    },
+    {
+      id: 'utm',
+      label: formatMessage(labels.utm),
+      icon: <Icons.Tag />,
+      path: '/utm',
+    },
+    {
+      id: 'revenue',
+      label: formatMessage(labels.revenue),
+      icon: <Icons.Money />,
+      path: '/revenue',
+    },
+    {
+      id: 'attribution',
+      label: formatMessage(labels.attribution),
+      icon: <Icons.Network />,
+      path: '/attribution',
+    },
     {
       id: 'reports',
       label: formatMessage(labels.reports),
@@ -39,24 +88,29 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
     },
   ];
 
-  const selectedKey = links
+  const selected = links
     ? links.find(({ path }) => path && pathname.endsWith(path))?.id
     : 'overview';
 
   return (
-    <Tabs selectedKey={selectedKey}>
-      <TabList items={links}>
-        {({ id, label, icon, path }) => {
-          return (
-            <Tab id={id} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
-              <Row gap="3" alignItems="center">
-                <Icon fillColor="currentColor">{icon}</Icon>
-                <Text>{label}</Text>
-              </Row>
-            </Tab>
-          );
-        }}
-      </TabList>
-    </Tabs>
+    <Column gap="2" position="absolute" padding="4" style={{ top: 0, left: 0, bottom: 0 }}>
+      {links.map(({ id, label, icon, path }) => {
+        return (
+          <Link key={id} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
+            <Row
+              alignItems="center"
+              padding
+              gap
+              hoverBackgroundColor="3"
+              borderRadius
+              width="160px"
+            >
+              <Icon fillColor="currentColor">{icon}</Icon>
+              <Text weight={selected === id ? 'bold' : undefined}>{label}</Text>
+            </Row>
+          </Link>
+        );
+      })}
+    </Column>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
index ccc84e0d..dd83fbae 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
@@ -2,7 +2,6 @@
 import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
 import { EventsTable } from '@/components/metrics/EventsTable';
 import { useState } from 'react';
-import { WebsiteHeader } from '../WebsiteHeader';
 import { EventsDataTable } from './EventsDataTable';
 import { EventsMetricsBar } from './EventsMetricsBar';
 import { Panel } from '@/components/common/Panel';
@@ -22,7 +21,6 @@ export function EventsPage({ websiteId }) {
 
   return (
     <Column gap="3">
-      <WebsiteHeader websiteId={websiteId} />
       <Panel>
         <EventsMetricsBar websiteId={websiteId} />
       </Panel>
diff --git a/src/app/(main)/websites/[websiteId]/layout.tsx b/src/app/(main)/websites/[websiteId]/layout.tsx
index 01b91377..8a3ab2a4 100644
--- a/src/app/(main)/websites/[websiteId]/layout.tsx
+++ b/src/app/(main)/websites/[websiteId]/layout.tsx
@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import { WebsiteProvider } from './WebsiteProvider';
+import { WebsiteLayout } from '@/app/(main)/websites/[websiteId]/WebsiteLayout';
 
 export default async function ({
   children,
@@ -10,7 +10,7 @@ export default async function ({
 }) {
   const { websiteId } = await params;
 
-  return <WebsiteProvider websiteId={websiteId}>{children}</WebsiteProvider>;
+  return <WebsiteLayout websiteId={websiteId}>{children}</WebsiteLayout>;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
index 5580999f..4b0424ce 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
@@ -11,7 +11,6 @@ import { RealtimeLog } from './RealtimeLog';
 import { RealtimeHeader } from './RealtimeHeader';
 import { RealtimeUrls } from './RealtimeUrls';
 import { RealtimeCountries } from './RealtimeCountries';
-import { WebsiteHeader } from '../WebsiteHeader';
 import { percentFilter } from '@/lib/filters';
 
 export function WebsiteRealtimePage({ websiteId }: { websiteId: string }) {
@@ -29,7 +28,6 @@ export function WebsiteRealtimePage({ websiteId }: { websiteId: string }) {
 
   return (
     <Grid gap="3">
-      <WebsiteHeader websiteId={websiteId} />
       <Panel>
         <RealtimeHeader data={data} />
       </Panel>
diff --git a/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
index 37429dd1..9059af74 100644
--- a/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
@@ -2,7 +2,6 @@
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { WebsiteHeader } from '../WebsiteHeader';
 import { ReportsDataTable } from '@/app/(main)/reports/ReportsDataTable';
 
 export function WebsiteReportsPage({ websiteId }) {
@@ -11,7 +10,6 @@ export function WebsiteReportsPage({ websiteId }) {
 
   return (
     <>
-      <WebsiteHeader websiteId={websiteId} />
       <Flexbox alignItems="center" justifyContent="end">
         <Link href={renderTeamUrl('/reports/create')}>
           <Button variant="primary">
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
index 959072d0..61cdcfbc 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
@@ -1,7 +1,6 @@
 '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';
@@ -17,7 +16,6 @@ export function SessionsPage({ websiteId }) {
 
   return (
     <Column gap="3">
-      <WebsiteHeader websiteId={websiteId} />
       <Panel>
         <SessionsMetricsBar websiteId={websiteId} />
       </Panel>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
index f4a1def0..2aea2023 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
@@ -3,7 +3,6 @@ import { Grid, Row, Column } from '@umami/react-zen';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useWebsiteSessionQuery } from '@/components/hooks';
-import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
 import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
@@ -21,7 +20,6 @@ export function SessionDetailsPage({
 
   return (
     <LoadingPanel {...query} loadingIcon="spinner" data={data}>
-      <WebsiteHeader websiteId={websiteId} />
       <Grid
         gap
         columns={{ xs: '1fr', sm: '1fr', md: '1fr 1fr', lg: '1fr 2fr 1fr', xl: '1fr 2fr 1fr' }}
diff --git a/src/components/common/DateDisplay.tsx b/src/components/common/DateDisplay.tsx
index 444b49f8..197adc94 100644
--- a/src/components/common/DateDisplay.tsx
+++ b/src/components/common/DateDisplay.tsx
@@ -1,7 +1,7 @@
 import { Icon, Row, Text } from '@umami/react-zen';
 import { differenceInDays, isSameDay } from 'date-fns';
 import { useLocale } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Lucide } from '@/components/icons';
 import { formatDate } from '@/lib/date';
 
 export function DateDisplay({ startDate, endDate }) {
@@ -11,7 +11,7 @@ export function DateDisplay({ startDate, endDate }) {
   return (
     <Row gap="3" alignItems="center" wrap="nowrap">
       <Icon>
-        <Icons.Calendar />
+        <Lucide.Calendar />
       </Icon>
       <Text wrap="nowrap">
         {isSingleDate ? (
diff --git a/src/components/input/DateFilter.tsx b/src/components/input/DateFilter.tsx
index 69f462d8..02ff39d1 100644
--- a/src/components/input/DateFilter.tsx
+++ b/src/components/input/DateFilter.tsx
@@ -106,6 +106,7 @@ export function DateFilter({
         placeholder={formatMessage(labels.selectDate)}
         onChange={handleChange}
         renderValue={renderValue}
+        popoverProps={{ style: { width: 200 } }}
       >
         {options.map(({ label, value, divider }: any) => {
           return (
diff --git a/src/components/input/WebsiteDateFilter.tsx b/src/components/input/WebsiteDateFilter.tsx
index a2b0bbe7..319295d5 100644
--- a/src/components/input/WebsiteDateFilter.tsx
+++ b/src/components/input/WebsiteDateFilter.tsx
@@ -85,8 +85,8 @@ export function WebsiteDateFilter({
       />
       {!isAllTime && compare && (
         <Row alignItems="center" gap>
-          <Text>VS</Text>
-          <Select selectedKey={compare} onSelectionChange={handleSelect} style={{ width: '200px' }}>
+          <Text weight="bold">VS</Text>
+          <Select value={compare} onChange={handleSelect} popoverProps={{ style: { width: 200 } }}>
             <ListItem id="prev">{formatMessage(labels.previousPeriod)}</ListItem>
             <ListItem id="yoy">{formatMessage(labels.previousYear)}</ListItem>
           </Select>
diff --git a/src/components/metrics/FilterBar.tsx b/src/components/metrics/FilterBar.tsx
index 7404352c..5c3f4440 100644
--- a/src/components/metrics/FilterBar.tsx
+++ b/src/components/metrics/FilterBar.tsx
@@ -26,16 +26,16 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
   return (
     <Row
       gap
-      backgroundColor="1"
+      backgroundColor="3"
       alignItems="center"
       justifyContent="space-between"
-      paddingY="3"
-      paddingLeft="5"
+      paddingY="2"
+      paddingLeft="3"
       paddingRight="2"
       border
       borderRadius="2"
     >
-      <Row alignItems="center" gap="3" wrap="wrap">
+      <Row alignItems="center" gap="3" wrap="wrap" paddingX="2">
         <Text color="11" weight="bold">
           {formatMessage(labels.filters)}
         </Text>
@@ -61,11 +61,9 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
                   <Text color="11">{operatorLabels[operator]}</Text>
                   <Text weight="bold">{paramValue}</Text>
                 </Row>
-                <Button variant="quiet" size="xs" style={{ left: '5px' }}>
-                  <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
-                    <Icons.Close />
-                  </Icon>
-                </Button>
+                <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
+                  <Icons.Close />
+                </Icon>
               </Row>
             </Row>
           );
diff --git a/src/declaration.d.ts b/src/declaration.d.ts
index 67c570c1..d8165bb2 100644
--- a/src/declaration.d.ts
+++ b/src/declaration.d.ts
@@ -6,3 +6,4 @@ declare module 'fs-extra';
 declare module 'jsonwebtoken';
 declare module 'md5';
 declare module 'prettier';
+declare module 'semver';
diff --git a/src/styles/global.css b/src/styles/global.css
index a7ae8720..37b16c33 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -6,7 +6,6 @@ body {
   background-color: var(--background-color);
   width: 100%;
   min-height: 100vh;
-  overflow: hidden;
 }
 
 a,