feat(app): rought our url persistence

src/state/atoms.ts

@@ -1,25 +1,65 @@
 import { atom } from "recoil";
+import { syncEffect } from "recoil-sync";
+import { custom, number, string, stringLiterals } from "@recoiljs/refine";
 import { IconStyle } from "@phosphor-icons/core";
 import { IconEntry } from "@/lib";
 
 export const searchQueryAtom = atom<string>({
   key: "searchQuery",
   default: "",
+  effects: [
+    syncEffect({
+      itemKey: "q",
+      refine: custom((q) => {
+        return (q as string) ?? "";
+      }),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconWeightAtom = atom<IconStyle>({
   key: "iconWeight",
   default: IconStyle.REGULAR,
+  effects: [
+    syncEffect<IconStyle>({
+      itemKey: "weight",
+      refine: custom((w) => {
+        const isWeight = (w as string)?.toUpperCase?.() in IconStyle;
+        return isWeight ? (w as IconStyle) : IconStyle.REGULAR;
+      }, `Unrecognized weight`),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconSizeAtom = atom<number>({
   key: "iconSize",
   default: 32,
+  effects: [
+    syncEffect({
+      itemKey: "size",
+      refine: custom((s) => {
+        const size = Number.isFinite(Number(s)) ? Number(s) : 32;
+        return Math.min(Math.max(size, 16), 96);
+      }),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconColorAtom = atom<string>({
   key: "iconColor",
   default: "#000000",
+  effects: [
+    syncEffect({
+      itemKey: "color",
+      refine: custom((c) => {
+        return (c as string) ?? "#000000";
+      }),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconPreviewOpenAtom = atom<string | false>({