persist user preferences between sessions

src/app/(tools)/rounded-border/rounded-tool.tsx

@@ -2,6 +2,7 @@
 import { usePlausible } from "next-plausible";
 import { useMemo, useState } from "react";
 import type { ChangeEvent } from "react";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 import React from "react";
 
 type Radius = 2 | 4 | 8 | 16 | 32 | 64;
@@ -188,8 +189,11 @@ export function RoundedTool() {
   const { imageContent, imageMetadata, handleFileUpload, cancel } =
     useFileUploader();
 
-  const [radius, setRadius] = useState<Radius>(2);
-  const [background, setBackground] = useState<BackgroundOption>("transparent");
+  const [radius, setRadius] = useLocalStorage<Radius>("roundedTool_radius", 2);
+  const [background, setBackground] = useLocalStorage<BackgroundOption>(
+    "roundedTool_background",
+    "transparent"
+  );
 
   if (!imageMetadata)
     return (

src/app/(tools)/square-image/square-tool.tsx

@@ -2,12 +2,14 @@
 
 import React, { useState, useEffect, type ChangeEvent } from "react";
 import { usePlausible } from "next-plausible";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 
 export const SquareTool: React.FC = () => {
   const [imageFile, setImageFile] = useState<File | null>(null);
-  const [backgroundColor, setBackgroundColor] = useState<"black" | "white">(
-    "white",
-  );
+  const [backgroundColor, setBackgroundColor] = useLocalStorage<
+    "black" | "white"
+  >("squareTool_backgroundColor", "white");
+
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [canvasDataUrl, setCanvasDataUrl] = useState<string | null>(null);
   const [imageMetadata, setImageMetadata] = useState<{

src/app/(tools)/svg-to-png/svg-tool.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { usePlausible } from "next-plausible";
 import { useMemo, useState } from "react";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 
 import { type ChangeEvent } from "react";
 
@@ -175,7 +176,7 @@ export function SVGTool() {
   const { svgContent, imageMetadata, handleFileUpload, cancel } =
     useFileUploader();
 
-  const [scale, setScale] = useState<Scale>(1);
+  const [scale, setScale] = useLocalStorage<Scale>("svgTool_scale", 1);
 
   if (!imageMetadata)
     return (

src/hooks/use-local-storage.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") return initialValue;
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      console.warn(`Error setting localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+}