wip event list

apps/web/src/components/overview/filters/overview-filters-buttons.tsx

@@ -1,22 +1,27 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
-import {
-  useEventFilters,
-  useEventQueryFilters,
-} from '@/hooks/useEventQueryFilters';
+import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 import { X } from 'lucide-react';
+import { Options as NuqsOptions } from 'nuqs';
 
-export function OverviewFiltersButtons() {
-  const eventQueryFilters = useEventQueryFilters();
+interface OverviewFiltersButtonsProps {
+  className?: string;
+  nuqsOptions?: NuqsOptions;
+}
+
+export function OverviewFiltersButtons({
+  className,
+  nuqsOptions,
+}: OverviewFiltersButtonsProps) {
+  const eventQueryFilters = useEventQueryFilters(nuqsOptions);
   const filters = Object.entries(eventQueryFilters).filter(
     ([, filter]) => filter.get !== null
   );
+  if (filters.length === 0) return null;
   return (
-    <div
-      className={cn('flex flex-wrap gap-2', filters.length > 0 && 'px-4 pb-4')}
-    >
+    <div className={cn('flex flex-wrap gap-2 px-4 pb-4', className)}>
       {filters.map(([key, filter]) => (
         <Button
           key={key}

apps/web/src/components/overview/filters/overview-filters-drawer-content.tsx

@@ -5,15 +5,18 @@ import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { XIcon } from 'lucide-react';
+import { Options as NuqsOptions } from 'nuqs';
 
 interface OverviewFiltersProps {
   projectId: string;
+  nuqsOptions?: NuqsOptions;
 }
 
 export function OverviewFiltersDrawerContent({
   projectId,
+  nuqsOptions,
 }: OverviewFiltersProps) {
-  const eventQueryFilters = useEventQueryFilters();
+  const eventQueryFilters = useEventQueryFilters(nuqsOptions);
 
   return (
     <div>

apps/web/src/components/overview/filters/overview-filters-drawer.tsx

@@ -3,15 +3,18 @@
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { FilterIcon } from 'lucide-react';
+import { Options as NuqsOptions } from 'nuqs';
 
 import { OverviewFiltersDrawerContent } from './overview-filters-drawer-content';
 
 interface OverviewFiltersDrawerProps {
   projectId: string;
+  nuqsOptions?: NuqsOptions;
 }
 
 export function OverviewFiltersDrawer({
   projectId,
+  nuqsOptions,
 }: OverviewFiltersDrawerProps) {
   return (
     <Sheet>
@@ -21,7 +24,10 @@ export function OverviewFiltersDrawer({
         </Button>
       </SheetTrigger>
       <SheetContent className="!max-w-lg w-full" side="right">
-        <OverviewFiltersDrawerContent projectId={projectId} />
+        <OverviewFiltersDrawerContent
+          projectId={projectId}
+          nuqsOptions={nuqsOptions}
+        />
       </SheetContent>
     </Sheet>
   );