feat: Integrate NuqsAdapter for improved state management and query handling

apps/web/src/pages/_app.tsx

@@ -5,6 +5,7 @@ import React, {useEffect} from 'react';
 import {Toaster} from 'sonner';
 import {SWRConfig} from 'swr';
 import {DefaultSeo} from 'next-seo';
+import {NuqsAdapter} from 'nuqs/adapters/next/pages';
 import {Loader} from '@plunk/ui';
 import {ActiveProjectProvider} from '../lib/contexts/ActiveProjectProvider';
 import {useProjects} from '../lib/hooks/useProject';
@@ -103,17 +104,19 @@ function ProjectGuard({children}: {children: React.ReactNode}) {
  */
 export default function WithProviders(props: AppProps) {
   return (
-    <SWRConfig
-      value={{
-        fetcher: (url: string) => network.fetch('GET', url),
-        shouldRetryOnError: false,
-      }}
-    >
-      <DefaultSeo titleTemplate="%s | Plunk" defaultTitle="Plunk | Email Platform Dashboard" />
-      <ActiveProjectProvider>
-        <Root {...props} />
-      </ActiveProjectProvider>
-    </SWRConfig>
+    <NuqsAdapter>
+      <SWRConfig
+        value={{
+          fetcher: (url: string) => network.fetch('GET', url),
+          shouldRetryOnError: false,
+        }}
+      >
+        <DefaultSeo titleTemplate="%s | Plunk" defaultTitle="Plunk | Email Platform Dashboard" />
+        <ActiveProjectProvider>
+          <Root {...props} />
+        </ActiveProjectProvider>
+      </SWRConfig>
+    </NuqsAdapter>
   );
 }
 

apps/web/src/pages/activity/index.tsx

@@ -14,7 +14,7 @@ import {DashboardLayout} from '../../components/DashboardLayout';
 import {ActivityFeed} from '../../components/ActivityFeed';
 import {Eye, MousePointerClick, Send, Zap} from 'lucide-react';
 import {NextSeo} from 'next-seo';
-import {useState} from 'react';
+import {useQueryState, parseAsString} from 'nuqs';
 import useSWR from 'swr';
 
 interface ActivityStats {
@@ -28,8 +28,8 @@ interface ActivityStats {
 }
 
 export default function ActivityPage() {
-  const [typeFilter, setTypeFilter] = useState<string>('ALL');
-  const [dateRange, setDateRange] = useState<string>('30');
+  const [typeFilter, setTypeFilter] = useQueryState('type', parseAsString.withDefault('ALL'));
+  const [dateRange, setDateRange] = useQueryState('days', parseAsString.withDefault('30'));
 
   // Fetch activity stats
   const {data: stats} = useSWR<ActivityStats>(`/activity/stats`, {