Merged compare logic. Removed compare page.

src/app/(main)/MenuBar.tsx

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

src/app/(main)/Nav.tsx

@@ -38,7 +38,7 @@ export function Nav(props: any) {
   ].filter(n => n);
 
   return (
-    <SideNav {...props} isCollapsed={isCollapsed} variant="2" showBorder={true}>
+    <SideNav {...props} isCollapsed={isCollapsed} variant="0" showBorder={true}>
       <SideNavSection>
         <SideNavHeader label="umami" icon={<Icons.Logo />} />
       </SideNavSection>

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

@@ -20,6 +20,7 @@ import { getCompareDate } from '@/lib/date';
 import { formatNumber } from '@/lib/format';
 import { useState } from 'react';
 import { useWebsites } from '@/store/websites';
+import { Panel } from '@/components/common/Panel';
 
 const views = {
   url: PagesTable,
@@ -142,22 +143,29 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
   };
 
   return (
-    <Grid columns="300px 1fr 1fr" gap="3">
-      <SideBar items={items} selectedKey={view} />
-      <Column>
-        <Heading>{formatMessage(labels.previous)}</Heading>
-        <Component
-          websiteId={websiteId}
-          limit={20}
-          showMore={false}
-          onDataLoad={setData}
-          params={params}
-        />
-      </Column>
-      <Column>
-        <Heading> {formatMessage(labels.current)}</Heading>
-        <Component websiteId={websiteId} limit={20} showMore={false} renderChange={renderChange} />
-      </Column>
-    </Grid>
+    <Panel>
+      <Grid columns="200px 1fr 1fr" gap="6">
+        <SideBar items={items} selectedKey={view} />
+        <Column>
+          <Heading size="1">{formatMessage(labels.previous)}</Heading>
+          <Component
+            websiteId={websiteId}
+            limit={20}
+            showMore={false}
+            onDataLoad={setData}
+            params={params}
+          />
+        </Column>
+        <Column>
+          <Heading size="1"> {formatMessage(labels.current)}</Heading>
+          <Component
+            websiteId={websiteId}
+            limit={20}
+            showMore={false}
+            renderChange={renderChange}
+          />
+        </Column>
+      </Grid>
+    </Panel>
   );
 }

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

@@ -7,6 +7,7 @@ import { WebsiteExpandedView } from './WebsiteExpandedView';
 import { WebsiteHeader } from './WebsiteHeader';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { WebsiteTableView } from './WebsiteTableView';
+import { WebsiteCompareTables } from './WebsiteCompareTables';
 
 export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
   const {
@@ -22,8 +23,9 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
       <Panel>
         <WebsiteChart websiteId={websiteId} compareMode={compare} />
       </Panel>
-      {!view && <WebsiteTableView websiteId={websiteId} />}
-      {view && <WebsiteExpandedView websiteId={websiteId} />}
+      {!view && !compare && <WebsiteTableView websiteId={websiteId} />}
+      {view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
+      {compare && <WebsiteCompareTables websiteId={websiteId} />}
     </Column>
   );
 }

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

@@ -31,12 +31,6 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
       icon: <Icons.Clock />,
       path: '/realtime',
     },
-    {
-      id: 'compare',
-      label: formatMessage(labels.compare),
-      icon: <Icons.Compare />,
-      path: '/compare',
-    },
     {
       id: 'reports',
       label: formatMessage(labels.reports),

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

@@ -1,24 +0,0 @@
-'use client';
-import { Grid } from '@umami/react-zen';
-import { Panel } from '@/components/common/Panel';
-import { WebsiteHeader } from '../WebsiteHeader';
-import { WebsiteMetricsBar } from '../WebsiteMetricsBar';
-import { FilterBar } from '@/components/metrics/FilterBar';
-import { WebsiteChart } from '../WebsiteChart';
-import { WebsiteCompareTables } from './WebsiteCompareTables';
-
-export function WebsiteComparePage({ websiteId }) {
-  return (
-    <Grid gap="3">
-      <WebsiteHeader websiteId={websiteId} />
-      <FilterBar websiteId={websiteId} />
-      <WebsiteMetricsBar websiteId={websiteId} compareMode={true} showFilter={true} />
-      <Panel>
-        <WebsiteChart websiteId={websiteId} compareMode={true} />
-      </Panel>
-      <Panel>
-        <WebsiteCompareTables websiteId={websiteId} />
-      </Panel>
-    </Grid>
-  );
-}

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

@@ -1,12 +0,0 @@
-import { WebsiteComparePage } from './WebsiteComparePage';
-import { Metadata } from 'next';
-
-export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
-  const { websiteId } = await params;
-
-  return <WebsiteComparePage websiteId={websiteId} />;
-}
-
-export const metadata: Metadata = {
-  title: 'Website Comparison',
-};