Merge pull request #65 from vagusX/feat/save-term-accpeted-in-cache

feat: add local storage functionality to track acceptance of terms

frontend/src/App.tsx

@@ -42,6 +42,7 @@ function App() {
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: EditorTheme.COBALT,
+      isTermOfServiceAccepted: false,
     },
     "setting"
   );
@@ -124,10 +125,22 @@ function App() {
     toast.success("Copied to clipboard");
   }, [generatedCode]);
 
+  const handleTermDialogOpenChange = (open: boolean) => {
+    setSettings((s) => ({
+      ...s,
+      isTermOfServiceAccepted: !open,
+    }));
+  };
+
   return (
     <div className="mt-2">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
-      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog />}
+      {IS_RUNNING_ON_CLOUD && (
+        <TermsOfServiceDialog
+          open={!settings.isTermOfServiceAccepted}
+          onOpenChange={handleTermDialogOpenChange}
+        />
+      )}
 
       <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,13 +6,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { useState } from "react";
 
-function TermsOfServiceDialog() {
-  const [isOpen, setIsOpen] = useState(true);
+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>
@@ -45,6 +46,6 @@ function TermsOfServiceDialog() {
       </DialogContent>
     </Dialog>
   );
-}
+};
 
 export default TermsOfServiceDialog;

frontend/src/types.ts

@@ -8,6 +8,7 @@ export interface Settings {
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
   editorTheme: EditorTheme;
+  isTermOfServiceAccepted: boolean; // Only relevant for hosted version
 }
 
 export enum AppState {