From 877b45357731cd81250bf90b3cf3cc9413345606 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Wed, 4 Feb 2026 09:34:32 -0800
Subject: [PATCH] Moved bounce filter to filter form.

---
 .../websites/[websiteId]/WebsiteControls.tsx  |  3 ---
 src/components/input/WebsiteFilterButton.tsx  | 25 ++++++++++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx b/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
index ea993ac0..86394afa 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
@@ -1,5 +1,4 @@
 import { Column, Grid, Row } from '@umami/react-zen';
-import { BounceFilter } from '@/components/input/BounceFilter';
 import { ExportButton } from '@/components/input/ExportButton';
 import { FilterBar } from '@/components/input/FilterBar';
 import { MonthFilter } from '@/components/input/MonthFilter';
@@ -9,7 +8,6 @@ import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton';
 export function WebsiteControls({
   websiteId,
   allowFilter = true,
-  allowBounceFilter = false,
   allowDateFilter = true,
   allowMonthFilter,
   allowDownload = false,
@@ -28,7 +26,6 @@ export function WebsiteControls({
       <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap>
         <Row alignItems="center" justifyContent="flex-start" gap="4">
           {allowFilter && <WebsiteFilterButton websiteId={websiteId} />}
-          {allowBounceFilter && <BounceFilter />}
         </Row>
         <Row alignItems="center" justifyContent={{ xs: 'flex-start', md: 'flex-end' }}>
           {allowDateFilter && (
diff --git a/src/components/input/WebsiteFilterButton.tsx b/src/components/input/WebsiteFilterButton.tsx
index 7db850a1..99d4a5fd 100644
--- a/src/components/input/WebsiteFilterButton.tsx
+++ b/src/components/input/WebsiteFilterButton.tsx
@@ -1,3 +1,5 @@
+import { Checkbox, Row } from '@umami/react-zen';
+import { useState } from 'react';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { ListFilter } from '@/components/icons';
 import { DialogButton } from '@/components/input/DialogButton';
@@ -12,12 +14,18 @@ export function WebsiteFilterButton({
   alignment?: 'end' | 'center' | 'start';
 }) {
   const { formatMessage, labels } = useMessages();
-  const { updateParams, router } = useNavigation();
+  const { updateParams, router, query } = useNavigation();
+  const [excludeBounce, setExcludeBounce] = useState(!!query.excludeBounce);
 
   const handleChange = ({ filters, segment, cohort }: any) => {
     const params = filtersArrayToObject(filters);
 
-    const url = updateParams({ ...params, segment, cohort });
+    const url = updateParams({
+      ...params,
+      segment,
+      cohort,
+      excludeBounce: excludeBounce ? 'true' : undefined,
+    });
 
     router.push(url);
   };
@@ -25,7 +33,18 @@ export function WebsiteFilterButton({
   return (
     <DialogButton icon={<ListFilter />} label={formatMessage(labels.filter)} variant="outline">
       {({ close }) => {
-        return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;
+        return (
+          <>
+            <Row position="absolute" top="30px" right="30px">
+              <Row alignItems="center" gap>
+                <Checkbox value={excludeBounce ? 'true' : ''} onChange={setExcludeBounce}>
+                  {formatMessage(labels.excludeBounce)}
+                </Checkbox>
+              </Row>
+            </Row>
+            <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />
+          </>
+        );
       }}
     </DialogButton>
   );