From 65ebd736b9a969645886d9f5d446f9804608c7c0 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Fri, 2 May 2025 12:32:23 -0700
Subject: [PATCH] Merged compare logic. Removed compare page.

---
 src/app/(main)/MenuBar.tsx                    |  2 +-
 src/app/(main)/Nav.tsx                        |  2 +-
 .../WebsiteCompareTables.module.css           |  0
 .../{compare => }/WebsiteCompareTables.tsx    | 42 +++++++++++--------
 .../[websiteId]/WebsiteDetailsPage.tsx        |  6 ++-
 .../websites/[websiteId]/WebsiteTabs.tsx      |  6 ---
 .../compare/WebsiteComparePage.tsx            | 24 -----------
 .../websites/[websiteId]/compare/page.tsx     | 12 ------
 8 files changed, 31 insertions(+), 63 deletions(-)
 rename src/app/(main)/websites/[websiteId]/{compare => }/WebsiteCompareTables.module.css (100%)
 rename src/app/(main)/websites/[websiteId]/{compare => }/WebsiteCompareTables.tsx (85%)
 delete mode 100644 src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
 delete mode 100644 src/app/(main)/websites/[websiteId]/compare/page.tsx

diff --git a/src/app/(main)/MenuBar.tsx b/src/app/(main)/MenuBar.tsx
index 310cbf6a..fd6486d1 100644
--- a/src/app/(main)/MenuBar.tsx
+++ b/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">
diff --git a/src/app/(main)/Nav.tsx b/src/app/(main)/Nav.tsx
index ee25a00a..0058195f 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="2" showBorder={true}>
+    <SideNav {...props} isCollapsed={isCollapsed} variant="0" showBorder={true}>
       <SideNavSection>
         <SideNavHeader label="umami" icon={<Icons.Logo />} />
       </SideNavSection>
diff --git a/src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.module.css b/src/app/(main)/websites/[websiteId]/WebsiteCompareTables.module.css
similarity index 100%
rename from src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.module.css
rename to src/app/(main)/websites/[websiteId]/WebsiteCompareTables.module.css
diff --git a/src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx b/src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
similarity index 85%
rename from src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx
rename to src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
index 1ccbbd83..851e03ea 100644
--- a/src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx
+++ b/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>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
index ba6d4362..3ad0e507 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
+++ b/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>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
index ff5269b6..53403185 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
+++ b/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),
diff --git a/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx b/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
deleted file mode 100644
index 62020b20..00000000
--- a/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/src/app/(main)/websites/[websiteId]/compare/page.tsx b/src/app/(main)/websites/[websiteId]/compare/page.tsx
deleted file mode 100644
index 56159167..00000000
--- a/src/app/(main)/websites/[websiteId]/compare/page.tsx
+++ /dev/null
@@ -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',
-};