Redesigned filter bar.

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

@@ -9,6 +9,7 @@ import WebsiteExpandedView from './WebsiteExpandedView';
 import WebsiteHeader from './WebsiteHeader';
 import WebsiteMetricsBar from './WebsiteMetricsBar';
 import WebsiteTableView from './WebsiteTableView';
+import { FILTER_COLUMNS } from 'lib/constants';
 
 export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   const { data: website, isLoading, error } = useWebsite(websiteId);
@@ -20,13 +21,20 @@ export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   }
 
   const showLinks = !pathname.includes('/share/');
-  const { view, ...params } = query;
+  const { view } = query;
+
+  const params = Object.keys(query).reduce((obj, key) => {
+    if (FILTER_COLUMNS[key]) {
+      obj[key] = query[key];
+    }
+    return obj;
+  }, {});
 
   return (
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
       <FilterTags websiteId={websiteId} params={params} />
-      <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
+      <WebsiteMetricsBar websiteId={websiteId} />
       <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}
       {website && (

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

@@ -9,9 +9,15 @@ import styles from './WebsiteFilterButton.module.css';
 export function WebsiteFilterButton({
   websiteId,
   className,
+  position = 'bottom',
+  alignment = 'end',
+  showText = true,
 }: {
   websiteId: string;
   className?: string;
+  position?: 'bottom' | 'top' | 'left' | 'right';
+  alignment?: 'end' | 'center' | 'start';
+  showText?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl, router } = useNavigation();
@@ -30,9 +36,9 @@ export function WebsiteFilterButton({
         <Icon>
           <Icons.Plus />
         </Icon>
-        <Text>{formatMessage(labels.filter)}</Text>
+        {showText && <Text>{formatMessage(labels.filter)}</Text>}
       </Button>
-      <Popup position="bottom" alignment="end">
+      <Popup position={position} alignment={alignment}>
         {(close: () => void) => {
           return (
             <PopupForm>

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

@@ -30,6 +30,11 @@ export function WebsiteHeader({
       icon: <Icons.Overview />,
       path: '',
     },
+    {
+      label: formatMessage(labels.compare),
+      icon: <Icons.Compare />,
+      path: '/compare',
+    },
     {
       label: formatMessage(labels.realtime),
       icon: <Icons.Clock />,

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

@@ -38,9 +38,3 @@
     border-bottom: 1px solid var(--base300);
   }
 }
-
-@media screen and (max-width: 768px) {
-  .button {
-    display: none;
-  }
-}

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

@@ -5,18 +5,10 @@ import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
 import { formatShortTime } from 'lib/format';
 import WebsiteFilterButton from './WebsiteFilterButton';
-import styles from './WebsiteMetricsBar.module.css';
 import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
+import styles from './WebsiteMetricsBar.module.css';
 
-export function WebsiteMetricsBar({
-  websiteId,
-  showFilter = true,
-  sticky,
-}: {
-  websiteId: string;
-  showFilter?: boolean;
-  sticky?: boolean;
-}) {
+export function WebsiteMetricsBar({ websiteId, sticky }: { websiteId: string; sticky?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { ref, isSticky } = useSticky({ enabled: sticky });
   const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
@@ -89,7 +81,7 @@ export function WebsiteMetricsBar({
         )}
       </MetricsBar>
       <div className={styles.actions}>
-        {showFilter && <WebsiteFilterButton websiteId={websiteId} className={styles.button} />}
+        <WebsiteFilterButton websiteId={websiteId} />
         <WebsiteDateFilter websiteId={websiteId} />
       </div>
     </div>

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

@@ -0,0 +1,13 @@
+import WebsiteHeader from '../WebsiteHeader';
+import WebsiteMetricsBar from '../WebsiteMetricsBar';
+
+export function WebsiteComparePage({ websiteId }) {
+  return (
+    <>
+      <WebsiteHeader websiteId={websiteId} />
+      <WebsiteMetricsBar websiteId={websiteId} />
+    </>
+  );
+}
+
+export default WebsiteComparePage;

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

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