feat: use usePersistedState

backend/main.py

@@ -33,7 +33,7 @@ app.add_middleware(
 
 # Useful for debugging purposes when you don't want to waste GPT4-Vision credits
 # Setting to True will stream a mock response instead of calling the OpenAI API
-SHOULD_MOCK_AI_RESPONSE = False
+SHOULD_MOCK_AI_RESPONSE = True
 
 
 app.include_router(screenshot.router)

frontend/src/App.tsx

@@ -40,6 +40,7 @@ function App() {
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: "cobalt",
+      termOfServiceAccepted: false,
     },
     "setting"
   );
@@ -111,10 +112,17 @@ function App() {
     setUpdateInstruction("");
   }
 
+  const onTermDialogOpenChange = (open: boolean) => {
+    setSettings((s) => ({
+      ...s,
+      termOfServiceAccepted: !open,
+    }));
+  };
+
   return (
     <div className="mt-2">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
-      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog />}
+      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog open={!settings.termOfServiceAccepted} onOpenChange={onTermDialogOpenChange} />}
 
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
         <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">

frontend/src/components/TermsOfServiceDialog.tsx

@@ -6,15 +6,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { useState } from "react";
 
-const termAcceptedCacheKey = 'term_of_service_accepted';
-
-function TermsOfServiceDialog() {
-  const [isOpen, setIsOpen] = useState(() => !localStorage.getItem(termAcceptedCacheKey));
+const TermsOfServiceDialog: React.FC<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}> = ({ open, onOpenChange }) => {
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle className="mb-4">Terms of Service</DialogTitle>
@@ -42,13 +41,11 @@ function TermsOfServiceDialog() {
         </div>
 
         <DialogFooter>
-          <DialogClose onClick={() => {
-            localStorage.setItem(termAcceptedCacheKey, 'true');
-          }}>Agree</DialogClose>
+          <DialogClose>Agree</DialogClose>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
-}
+};
 
 export default TermsOfServiceDialog;

frontend/src/types.ts

@@ -3,4 +3,5 @@ export interface Settings {
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
   editorTheme: string;
+  termOfServiceAccepted: boolean;
 }