implement exclude bounces feature

src/components/hooks/useFilterParameters.ts

@@ -24,6 +24,7 @@ export function useFilterParameters() {
       search,
       segment,
       cohort,
+      excludeBounce,
     },
   } = useNavigation();
 
@@ -47,6 +48,7 @@ export function useFilterParameters() {
       search,
       segment,
       cohort,
+      excludeBounce,
     };
   }, [
     path,
@@ -69,5 +71,6 @@ export function useFilterParameters() {
     search,
     segment,
     cohort,
+    excludeBounce,
   ]);
 }

src/components/input/BounceFilter.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { Checkbox, Row } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks/useMessages';
+import { useNavigation } from '@/components/hooks/useNavigation';
+
+export function BounceFilter() {
+  const { router, query, updateParams } = useNavigation();
+  const { formatMessage, labels } = useMessages();
+  const isSelected = query.excludeBounce === 'true';
+
+  const handleChange = (value: boolean) => {
+    if (value) {
+      router.push(updateParams({ excludeBounce: 'true' }));
+    } else {
+      router.push(updateParams({ excludeBounce: undefined }));
+    }
+  };
+
+  return (
+    <Row alignItems="center" gap>
+      <Checkbox isSelected={isSelected} onChange={handleChange}>
+        {formatMessage(labels.excludeBounce)}
+      </Checkbox>
+    </Row>
+  );
+}

src/components/messages.ts

@@ -111,6 +111,7 @@ export const labels = defineMessages({
   event: { id: 'label.event', defaultMessage: 'Event' },
   events: { id: 'label.events', defaultMessage: 'Events' },
   eventName: { id: 'label.event-name', defaultMessage: 'Event name' },
+  excludeBounce: { id: 'label.exclude-bounce', defaultMessage: 'Exclude bounces' },
   query: { id: 'label.query', defaultMessage: 'Query' },
   queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
   back: { id: 'label.back', defaultMessage: 'Back' },