Refactor website addition logic to use modal and form validation

src/App.tsx

@@ -94,6 +94,9 @@ export default function App() {
 
   const [priorModalOpen, setPriorModalOpen] = useState(false);
   const [priorData, setPriorData] = useState<PriorArtResponse | null>(null);
+  const [websiteModalOpen, setWebsiteModalOpen] = useState(false);
+  const [websiteInput, setWebsiteInput] = useState("");
+  const [websiteError, setWebsiteError] = useState("");
   const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const menuActionRef = useRef<(action: string) => void>(() => undefined);
 
@@ -222,17 +225,24 @@ export default function App() {
   };
 
   const onAddWebsite = () => {
-    const url = window.prompt("Enter a URL (starting with http:// or https://):");
+    setWebsiteInput("");
-    if (!url) return;
+    setWebsiteError("");
-    const trimmed = url.trim();
+    setWebsiteModalOpen(true);
+  };
+
+  const onSubmitWebsite = () => {
+    const trimmed = websiteInput.trim();
     if (!/^https?:\/\//i.test(trimmed)) {
-      window.alert("Please enter a valid http(s) URL.");
+      setWebsiteError("Enter a valid http(s) URL.");
       return;
     }
-    setWebsites((prev) => {
+    if (websites.some((w) => w.url === trimmed)) {
-      if (prev.some((w) => w.url === trimmed)) return prev;
+      setWebsiteError("This website is already in the table.");
+      return;
+    }
+
     const name = trimmed.replace(/^https?:\/\//, "").slice(0, 60);
-      return [
+    setWebsites((prev) => [
       ...prev,
       {
         kind: "url",
@@ -241,7 +251,18 @@ export default function App() {
         type: "url",
         size: "web",
       },
-      ];
+    ]);
+    setWebsiteModalOpen(false);
+    setWebsiteInput("");
+    setWebsiteError("");
+    setStatus(`Added ${name}`);
+  };
+
+  const closeWebsiteModal = () => {
+    setWebsiteModalOpen(false);
+    setWebsiteInput("");
+    setWebsiteError("");
+  };
     });
   };