Add Nuqs for state management and update ScriptContent to utilize query state for improved parameter handling

package.json

@@ -37,6 +37,7 @@
     "mini-svg-data-uri": "^1.4.4",
     "next": "15.0.2",
     "next-themes": "^0.3.0",
+    "nuqs": "^2.1.1",
     "pocketbase": "^0.21.4",
     "prettier-plugin-organize-imports": "^4.1.0",
     "react": "19.0.0-rc-02c0e824-20241028",

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { Toaster } from "@/components/ui/sonner";
 import "@/styles/globals.css";
 import { Inter } from "next/font/google";
 import React from "react";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -72,7 +73,7 @@ export default function RootLayout({
             <div className="flex min-h-screen flex-col justify-center">
               <div className="flex w-full justify-center">
                 <div className="w-full max-w-7xl ">
-                  {children}
+                  <NuqsAdapter>{children}</NuqsAdapter>
                   <Toaster richColors />
                 </div>
               </div>

src/app/scripts/page.tsx

@@ -5,14 +5,13 @@ export const dynamic = "force-static";
 import ScriptItem from "@/app/scripts/_components/ScriptItem";
 import { Category } from "@/lib/types";
 import { Loader2 } from "lucide-react";
-import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import Sidebar from "./_components/Sidebar";
+import { useQueryState } from "nuqs";
 
 function ScriptContent() {
-  const [selectedScript, setSelectedScript] = useState<string | null>(null);
+  const [selectedScript, setSelectedScript] = useQueryState("id");
   const [links, setLinks] = useState<Category[]>([]);
-  const searchParams = useSearchParams();
 
   const sortCategories = (categories: Category[]): Category[] => {
     return categories.sort((a: Category, b: Category) => {
@@ -42,15 +41,6 @@ function ScriptContent() {
       .catch(error => console.error(error));
   }, []);
 
-  useEffect(() => {
-    const id = searchParams.get("id");
-    if (id) {
-      setSelectedScript(id);
-    } else {
-      setSelectedScript(null);
-    }
-  }, [searchParams, setSelectedScript]);
-
   return (
     <div className="mb-3">
       <div className="mt-20 flex sm:px-4 xl:px-0">