Add Nuqs integration and update package dependencies

2025-01-06 22:15:09 +05:30 · 2025-01-06 22:15:09 +05:30 · 706f53f3ed
commit 706f53f3ed
parent 8247f9b4ea
4 changed files with 4964 additions and 3943 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -4,6 +4,7 @@ import 'katex/dist/katex.min.css';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { Metadata, Viewport } from "next";
 import { Instrument_Serif } from 'next/font/google';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { Toaster } from "sonner";
 import "./globals.css";
 import { Providers } from './providers';
@ -58,10 +59,12 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body className={`${GeistSans.variable} ${instrumentSerif.variable} font-sans antialiased`}>
+        <NuqsAdapter>
          <Providers>
            <Toaster position="top-center" richColors />
            {children}
          </Providers>
+        </NuqsAdapter>
        <Analytics />
      </body>
    </html>
--- a/app/page.tsx
+++ b/app/page.tsx
@ -2,137 +2,133 @@
 "use client";
 import 'katex/dist/katex.min.css';

-import
-React,
-{
-    useRef,
-    useCallback,
-    useState,
-    useEffect,
-    useMemo,
-    Suspense
-} from 'react';
-import ReactMarkdown from 'react-markdown';
-import { useTheme } from 'next-themes';
-import Marked, { ReactRenderer } from 'marked-react';
-import Latex from 'react-latex-next';
-import { useSearchParams } from 'next/navigation';
-import { useChat } from 'ai/react';
-import { ToolInvocation } from 'ai';
-import { toast } from 'sonner';
-import { motion, AnimatePresence } from 'framer-motion';
-import Image from 'next/image';
-import {
-    fetchMetadata,
-    generateSpeech,
-    suggestQuestions
-} from './actions';
-import { Wave } from "@foobar404/wave";
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight, oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import {
-    Sparkles,
-    ArrowRight,
-    Globe,
-    AlignLeft,
-    Copy,
-    Cloud,
-    Code,
-    Check,
-    Loader2,
-    User2,
-    Heart,
-    X,
-    MapPin,
-    Plus,
-    Download,
-    Flame,
-    Sun,
-    Pause,
-    Play,
-    TrendingUpIcon,
-    Calendar,
-    Calculator,
-    ChevronDown,
-    Edit2,
-    ChevronUp,
-    Moon,
-    Star,
-    YoutubeIcon,
-    LucideIcon,
-    FileText,
-    Book,
-    ExternalLink,
-    Building,
-    Users,
-    Brain,
-    TrendingUp,
-    Plane,
-    Film,
-    Tv,
-    ListTodo
-} from 'lucide-react';
-import {
-    HoverCard,
-    HoverCardContent,
-    HoverCardTrigger,
-} from "@/components/ui/hover-card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { BorderTrail } from '@/components/core/border-trail';
+import { TextShimmer } from '@/components/core/text-shimmer';
+import { FlightTracker } from '@/components/flight-tracker';
+import { InstallPrompt } from '@/components/InstallPrompt';
+import InteractiveChart from '@/components/interactive-charts';
+import { MapComponent, MapContainer } from '@/components/map-components';
+import TMDBResult from '@/components/movie-info';
+import MultiSearch from '@/components/multi-search';
+import NearbySearchMapView from '@/components/nearby-search-map-view';
+import TrendingResults from '@/components/trending-tv-movies-results';
 import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
 } from "@/components/ui/accordion";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
 } from "@/components/ui/card";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
-import { GitHubLogoIcon, TextIcon } from '@radix-ui/react-icons';
-import Link from 'next/link';
-import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
-import { cn, SearchGroupId } from '@/lib/utils';
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
+import FormComponent from '@/components/ui/form-component';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import {
  Table,
  TableBody,
  TableCell,
  TableRow,
 } from "@/components/ui/table";
-import Autoplay from 'embla-carousel-autoplay';
-import FormComponent from '@/components/ui/form-component';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import WeatherChart from '@/components/weather-chart';
-import InteractiveChart from '@/components/interactive-charts';
-import { MapComponent, MapContainer } from '@/components/map-components';
-import MultiSearch from '@/components/multi-search';
-import { CurrencyDollar, Flag, RoadHorizon, SoccerBall, TennisBall, XLogo } from '@phosphor-icons/react';
-import { BorderTrail } from '@/components/core/border-trail';
-import { TextShimmer } from '@/components/core/text-shimmer';
-import { Tweet } from 'react-tweet';
-import NearbySearchMapView from '@/components/nearby-search-map-view';
-import { Separator } from '@/components/ui/separator';
-import { TrendingQuery } from './api/trending/route';
-import { FlightTracker } from '@/components/flight-tracker';
-import { InstallPrompt } from '@/components/InstallPrompt';
-import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { useMediaQuery } from '@/hooks/use-media-query';
-import TMDBResult from '@/components/movie-info';
-import TrendingResults from '@/components/trending-tv-movies-results';
+import { cn, SearchGroupId } from '@/lib/utils';
+import { Wave } from "@foobar404/wave";
+import { CurrencyDollar, Flag, RoadHorizon, SoccerBall, TennisBall, XLogo } from '@phosphor-icons/react';
+import { GitHubLogoIcon, TextIcon } from '@radix-ui/react-icons';
+import { ToolInvocation } from 'ai';
+import { useChat } from 'ai/react';
+import Autoplay from 'embla-carousel-autoplay';
+import { AnimatePresence, motion } from 'framer-motion';
 import { GeistMono } from 'geist/font/mono';
+import {
+  AlignLeft,
+  ArrowRight,
+  Book,
+  Brain,
+  Building,
+  Calculator,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Cloud,
+  Code,
+  Copy,
+  Download,
+  Edit2,
+  ExternalLink,
+  FileText,
+  Film,
+  Flame,
+  Globe,
+  Heart,
+  ListTodo,
+  Loader2,
+  LucideIcon,
+  MapPin,
+  Moon,
+  Pause,
+  Plane,
+  Play,
+  Plus,
+  Sparkles,
+  Sun,
+  TrendingUp,
+  TrendingUpIcon,
+  Tv,
+  User2,
+  Users,
+  X,
+  YoutubeIcon
+} from 'lucide-react';
+import Marked, { ReactRenderer } from 'marked-react';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+import Link from 'next/link';
+import { parseAsString, useQueryState } from 'nuqs';
+import React, {
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import Latex from 'react-latex-next';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark, vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Tweet } from 'react-tweet';
+import { toast } from 'sonner';
+import {
+  fetchMetadata,
+  generateSpeech,
+  suggestQuestions
+} from './actions';
+import { TrendingQuery } from './api/trending/route';

 export const maxDuration = 60;

@ -563,12 +559,15 @@ const SponsorDialog = ({
 };

 const HomeContent = () => {
-    const searchParams = useSearchParams();
+    const [query] = useQueryState('query', parseAsString.withDefault(''))
+    const [q] = useQueryState('q', parseAsString.withDefault(''))
+    const [model] = useQueryState('model', parseAsString.withDefault('grok-2-1212'))

    // Memoize initial values to prevent re-calculation
    const initialState = useMemo(() => ({
-        query: searchParams.get('query') || searchParams.get('q') || '',
-        model: searchParams.get('model') || 'grok-2-1212'
+        query: query || q,
+        model: model
+    // eslint-disable-next-line react-hooks/exhaustive-deps
    }), []); // Empty dependency array as we only want this on mount

    const lastSubmittedQueryRef = useRef(initialState.query);
@ -699,6 +698,7 @@ const HomeContent = () => {
        };

        fetchTrending();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const ThemeToggle: React.FC = () => {
@ -892,10 +892,11 @@ Grok 2 models are now available for you to try out.
        const waveRef = useRef<Wave | null>(null);

        useEffect(() => {
+          const _audioRef = audioRef.current
            return () => {
-                if (audioRef.current) {
-                    audioRef.current.pause();
-                    audioRef.current.src = '';
+                if (_audioRef) {
+                    _audioRef.pause();
+                    _audioRef.src = '';
                }
            };
        }, []);
@ -2588,6 +2589,7 @@ Grok 2 models are now available for you to try out.
        <SuggestionCards
            trendingQueries={trendingQueries}
        />
+    // eslint-disable-next-line react-hooks/exhaustive-deps
    ), [trendingQueries]);

    return (
--- a/package.json
+++ b/package.json
@ -64,6 +64,7 @@
    "motion": "^11.13.5",
    "next": "^14.2.21",
    "next-themes": "^0.3.0",
+    "nuqs": "^2.3.0",
    "openai": "^4.56.0",
    "posthog-js": "^1.202.2",
    "react": "^18",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml