feat: nuqs query string tabs

apps/web/package.json

@@ -51,6 +51,7 @@
     "next": "^15.3.4",
     "next-themes": "^0.4.4",
     "node-cron": "^3.0.3",
+    "nuqs": "^2.4.3",
     "pg": "^8.14.1",
     "pg-boss": "^10.1.6",
     "react": "19",

apps/web/src/app/(protected)/settings/channel/[channelName]/page.client.tsx

@@ -40,6 +40,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { UserCombobox } from '@/components/app/UserCombobox/UserCombobox';
+import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs';
 
 interface ChannelSettingsClientProps {
   channel: Channel & {
@@ -66,6 +67,7 @@ export default function ChannelSettingsClient({
   const [streamKey, setStreamKey] = useState(channel.streamKey?.key || '');
   const [keyVisible, setKeyVisible] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [selTab, setSelTab] = useQueryState('tabs', parseAsString.withDefault('general'));
 
   const copyStreamKey = async () => {
     if (streamKey) {
@@ -118,7 +120,7 @@ export default function ChannelSettingsClient({
         </div>
       </div>
 
-      <Tabs defaultValue="general" className="w-full">
+      <Tabs className="w-full" value={selTab} onValueChange={setSelTab}>
         <TabsList className={`grid w-full ${isPersonal ? 'grid-cols-3' : 'grid-cols-4'}`}>
           <TabsTrigger value="general" className="flex items-center gap-2">
             <Settings className="h-4 w-4" />

apps/web/src/app/layout.tsx

@@ -14,6 +14,7 @@ import { StreamInfoProvider } from '@/lib/providers/StreamInfoProvider';
 import { NextSSRPlugin } from "@uploadthing/react/next-ssr-plugin";
 import { extractRouterConfig } from 'uploadthing/server';
 import { ourFileRouter } from '@/lib/services/uploadthing/fileRouter';
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -41,18 +42,20 @@ export default async function RootLayout({
             <NextSSRPlugin
               routerConfig={extractRouterConfig(ourFileRouter)}
             />
-            <SidebarProvider>
-              <StreamInfoProvider>
-                {/* this promise is ugly but i'm lazy to fix the type errors */}
-                <Navbar editLivestream={Promise.resolve(<EditLivestream />)} />
-                <div className="flex flex-1 pt-16">
-                  {/* pt-16 for navbar height */}
-                  <Sidebar className="pt-16" />
-                  <main className="flex-1 overflow-auto">{children}</main>
-                </div>
-                <Toaster />
-              </StreamInfoProvider>
-            </SidebarProvider>
+            <NuqsAdapter>
+              <SidebarProvider>
+                <StreamInfoProvider>
+                  {/* this promise is ugly but i'm lazy to fix the type errors */}
+                  <Navbar editLivestream={Promise.resolve(<EditLivestream />)} />
+                  <div className="flex flex-1 pt-16">
+                    {/* pt-16 for navbar height */}
+                    <Sidebar className="pt-16" />
+                    <main className="flex-1 overflow-auto">{children}</main>
+                  </div>
+                  <Toaster />
+                </StreamInfoProvider>
+              </SidebarProvider>
+            </NuqsAdapter>
           </ThemeProvider>
         </SessionProvider>
       </body>

yarn.lock

@@ -4433,6 +4433,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 mkdirp@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-2.1.6.tgz#964fbcb12b2d8c5d6fbc62a963ac95a273e2cc19"
@@ -4573,6 +4578,13 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
+nuqs@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/nuqs/-/nuqs-2.4.3.tgz#4d0713f44822ae64145740d013c074e1d1523b6d"
+  integrity sha512-BgtlYpvRwLYiJuWzxt34q2bXu/AIS66sLU1QePIMr2LWkb+XH0vKXdbLSgn9t6p7QKzwI7f38rX3Wl9llTXQ8Q==
+  dependencies:
+    mitt "^3.0.1"
+
 object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"