replace valtio store with nuqs

package.json

@@ -30,13 +30,13 @@
     "next": "14.2.7",
     "next-themes": "^0.3.0",
     "numeral": "^2.0.6",
+    "nuqs": "^1.19.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "valtio": "^2.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/components/controls/controls-background.tsx

@@ -1,20 +1,18 @@
 "use client";
 
-import { previewStore, usePreviewStore } from "~/lib/store/preview.store";
+import { useControls } from "~/lib/params/controls.params";
 import { Tooltip } from "../ui/tooltip";
 import { ControlsToggle } from "./controls-toggle";
 
 export function ControlsBackground() {
-  const { background } = usePreviewStore();
+  const [{ background }, setControls] = useControls();
 
   return (
     <Tooltip content="Toggle Background">
       <div className="size-6">
         <ControlsToggle
           pressed={!background}
-          onPressedChange={(checked) => {
-            previewStore.background = !checked;
-          }}
+          onPressedChange={(checked) => setControls({ background: !checked })}
         >
           <svg
             width="15"

src/components/controls/controls-dark-mode.tsx

@@ -2,21 +2,19 @@
 
 import { Moon } from "lucide-react";
 
-import { previewStore, usePreviewStore } from "~/lib/store/preview.store";
+import { useControls } from "~/lib/params/controls.params";
 import { Tooltip } from "../ui/tooltip";
 import { ControlsToggle } from "./controls-toggle";
 
 export function ControlsDarkMode() {
-  const { darkMode } = usePreviewStore();
+  const [{ darkMode }, setControls] = useControls();
 
   return (
     <Tooltip content="Toggle Dark Mode">
       <div className="size-6">
         <ControlsToggle
           pressed={darkMode}
-          onPressedChange={(checked) => {
-            previewStore.darkMode = checked;
-          }}
+          onPressedChange={(checked) => setControls({ darkMode: checked })}
         >
           <Moon className="size-4" />
         </ControlsToggle>

src/components/controls/controls-download.tsx

@@ -7,7 +7,7 @@ import { toast } from "sonner";
 import { EXPORT_SIZES } from "~/lib/const/export-size.const";
 import { download } from "~/lib/download";
 import { toBlob, toPng, toSvg } from "~/lib/image";
-import { previewStore, usePreviewStore } from "~/lib/store/preview.store";
+import { useControls } from "~/lib/params/controls.params";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,
@@ -26,7 +26,7 @@ import { Tooltip } from "../ui/tooltip";
 export function ControlsDownload() {
   const params = useParams();
 
-  const { size } = usePreviewStore();
+  const [{ size }, setControls] = useControls();
 
   function savePng() {
     const node = document.getElementById("preview");
@@ -123,7 +123,7 @@ export function ControlsDownload() {
                   <DropdownMenuRadioItem
                     key={size}
                     value={size.toString()}
-                    onClick={() => (previewStore.size = size)}
+                    onClick={() => setControls({ size })}
                   >
                     {size}x
                   </DropdownMenuRadioItem>

src/components/controls/controls-padding.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { PADDING_OPTIONS } from "~/lib/const/padding.const";
-import { previewStore, usePreviewStore } from "~/lib/store/preview.store";
+import { useControls } from "~/lib/params/controls.params";
 import { cn } from "~/lib/utils";
 import { Button } from "../ui/button";
 
 export function ControlsPadding() {
-  const snapshot = usePreviewStore();
+  const [{ padding: controlsPadding }, setControls] = useControls();
 
   return (
     <div className="flex gap-2">
@@ -17,11 +17,11 @@ export function ControlsPadding() {
           size="icon"
           className={cn(
             "relative size-6 text-xs",
-            padding === snapshot.padding
+            padding === controlsPadding
               ? "text-foreground after:absolute after:-bottom-[3px] after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full after:bg-primary/20 after:content-['']"
               : null,
           )}
-          onClick={() => (previewStore.padding = padding)}
+          onClick={() => setControls({ padding })}
         >
           {padding}
         </Button>

src/components/controls/controls-theme.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import { Theme, THEME_OPTIONS } from "~/lib/const/theme.const";
-import { previewStore, usePreviewStore } from "~/lib/store/preview.store";
+import { useControls } from "~/lib/params/controls.params";
 import { themeBackground } from "~/lib/utils";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select";
 import { Tooltip } from "../ui/tooltip";
 
 export function ControlsTheme() {
-  const { theme } = usePreviewStore();
+  const [{ theme }, setControls] = useControls();
 
   return (
     <Select
       value={theme}
-      onValueChange={(theme) => (previewStore.theme = theme as Theme)}
+      onValueChange={(theme) => setControls({ theme: theme as Theme })}
     >
       <Tooltip content="Theme">
         <SelectTrigger className="h-auto rounded-full border-0 p-0">

src/components/preview.tsx

@@ -2,12 +2,12 @@
 
 import { PropsWithChildren } from "react";
 
-import { usePreviewStore } from "~/lib/store/preview.store";
+import { useControls } from "~/lib/params/controls.params";
 import { useIsSafari } from "~/lib/use-is-safari";
 import { cn, themeBackground } from "~/lib/utils";
 
 export function Preview({ children }: PropsWithChildren) {
-  const { padding, darkMode, background, theme } = usePreviewStore();
+  const [{ theme, padding, darkMode, background }] = useControls();
 
   const isSafari = useIsSafari();
 

src/lib/const/theme.const.ts

@@ -50,3 +50,5 @@ export const THEMES = {
 export type Theme = keyof typeof THEMES;
 
 export const THEME_OPTIONS = Object.values(THEMES);
+
+export const THEME_KEYS = Object.keys(THEMES) as Theme[];

src/lib/params/controls.params.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import {
+  parseAsBoolean,
+  parseAsNumberLiteral,
+  parseAsStringLiteral,
+  useQueryStates,
+} from "nuqs";
+
+import { EXPORT_SIZES } from "~/lib/const/export-size.const";
+import { PADDING_OPTIONS } from "~/lib/const/padding.const";
+import { THEME_KEYS } from "~/lib/const/theme.const";
+
+export function useControls() {
+  return useQueryStates(
+    {
+      theme: parseAsStringLiteral(THEME_KEYS).withDefault("graphite"),
+      background: parseAsBoolean.withDefault(true),
+      darkMode: parseAsBoolean.withDefault(true),
+      padding: parseAsNumberLiteral(PADDING_OPTIONS).withDefault(64),
+      size: parseAsNumberLiteral(EXPORT_SIZES).withDefault(4),
+    },
+    { clearOnDefault: true },
+  );
+}