add TermsOfServiceDialog for hosted version

frontend/src/App.tsx

@@ -23,6 +23,7 @@ import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
 import { usePersistedState } from "./hooks/usePersistedState";
 import { UrlInputSection } from "./components/UrlInputSection";
+import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 
 function App() {
   const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
@@ -113,6 +114,7 @@ function App() {
   return (
     <div className="mt-2">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
+      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog />}
 
       <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

@@ -0,0 +1,50 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useState } from "react";
+
+function TermsOfServiceDialog() {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="mb-4">Terms of Service</DialogTitle>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <span>
+            By using this website, you agree to the{" "}
+            <a
+              href="https://a.picoapps.xyz/camera-write"
+              target="_blank"
+              className="underline"
+            >
+              terms of service
+            </a>
+            . This project is MIT licensed.{" "}
+            <a
+              href="https://github.com/abi/screenshot-to-code"
+              target="_blank"
+              className="underline"
+            >
+              You can run this app locally by downloading the source code from
+              Github.
+            </a>
+          </span>
+        </div>
+
+        <DialogFooter>
+          <DialogClose>Agree</DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default TermsOfServiceDialog;