Merge pull request #43 from clean99/feat/use-persisted-setting

Feat: use persisted setting

frontend/src/App.tsx

@@ -21,6 +21,7 @@ import { Settings } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
+import { usePersistedState } from "./hooks/usePersistedState";
 import { UrlInputSection } from "./components/UrlInputSection";
 
 function App() {
@@ -32,12 +33,15 @@ function App() {
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [history, setHistory] = useState<string[]>([]);
-  const [settings, setSettings] = useState<Settings>({
+  const [settings, setSettings] = usePersistedState<Settings>(
+    {
       openAiApiKey: null,
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: "cobalt",
-  });
+    },
+    "setting"
+  );
 
   const downloadCode = () => {
     // Create a blob from the generated code

frontend/src/components/OnboardingNote.tsx

@@ -10,7 +10,8 @@ export function OnboardingNote() {
       credit on the Billing dashboard.
       <br />
       <span>
-        This key is never stored. This app is open source. You can{" "}
+        This key is only stored in your browser. Never stored on servers. This
+        app is open source. You can{" "}
         <a href="https://github.com/abi/screenshot-to-code" className="inline">
           check the code to confirm.
         </a>

frontend/src/components/SettingsDialog.tsx

@@ -58,8 +58,9 @@ function SettingsDialog({ settings, setSettings }: Props) {
         <div className="flex flex-col space-y-4">
           <Label htmlFor="openai-api-key">
             <div>OpenAI API key</div>
-            <div className="font-light mt-2">
+            <div className="font-light mt-2 leading-relaxed">
-              Never stored. Overrides your .env config.
+              Only stored in your browser. Never stored on servers. Overrides
+              your .env config.
             </div>
           </Label>
 
@@ -77,8 +78,8 @@ function SettingsDialog({ settings, setSettings }: Props) {
 
           <Label htmlFor="screenshot-one-api-key">
             <div>ScreenshotOne API key</div>
-            <div className="font-light mt-2">
+            <div className="font-light mt-2 leading-relaxed">
-              Never stored.{" "}
+              Only stored in your browser. Never stored on servers.{" "}
               <a
                 href="https://screenshotone.com?via=screenshot-to-code"
                 className="underline"

frontend/src/hooks/usePersistedState.ts

@@ -0,0 +1,19 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
+
+function usePersistedState<T>(defaultValue: T, key: string): PersistedState<T> {
+  const [value, setValue] = useState<T>(() => {
+    const value = window.localStorage.getItem(key);
+
+    return value ? (JSON.parse(value) as T) : defaultValue;
+  });
+
+  useEffect(() => {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+}
+
+export { usePersistedState };