From 5d1e0a3599c46c1a51b5dbe420ea08251dda532d Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Mon, 20 Nov 2023 12:39:58 +0800
Subject: [PATCH 1/3] feat: add use persisted state hook

---
 frontend/src/hooks/usePersistedState.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 frontend/src/hooks/usePersistedState.ts

diff --git a/frontend/src/hooks/usePersistedState.ts b/frontend/src/hooks/usePersistedState.ts
new file mode 100644
index 0000000..1524ad7
--- /dev/null
+++ b/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 };

From 7fca5538236bc33a51b121e35f864d7ce51d91eb Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Mon, 20 Nov 2023 12:40:04 +0800
Subject: [PATCH 2/3] feat: replace setting state using persisted hook

---
 frontend/src/App.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f579882..72bd672 100644
--- a/frontend/src/App.tsx
+++ b/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";
 
 function App() {
   const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
@@ -31,11 +32,11 @@ 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,
     isImageGenerationEnabled: true,
     editorTheme: "cobalt"
-  });
+  }, 'setting');
 
   const downloadCode = () => {
     // Create a blob from the generated code

From 72645512fed196844768eb7b18eb7a4215539760 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Mon, 20 Nov 2023 12:07:40 -0500
Subject: [PATCH 3/3] update copy re: key storage

---
 frontend/src/components/OnboardingNote.tsx | 3 ++-
 frontend/src/components/SettingsDialog.tsx | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/OnboardingNote.tsx b/frontend/src/components/OnboardingNote.tsx
index 437bc1e..8cc6f11 100644
--- a/frontend/src/components/OnboardingNote.tsx
+++ b/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>
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 9b46b90..f7004d3 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/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">
-              Never stored. Overrides your .env config.
+            <div className="font-light mt-2 leading-relaxed">
+              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">
-              Never stored.{" "}
+            <div className="font-light mt-2 leading-relaxed">
+              Only stored in your browser. Never stored on servers.{" "}
               <a
                 href="https://screenshotone.com?via=screenshot-to-code"
                 className="underline"