removed db from gitignore + made it so that the app cards render dynamically + delete dialog + add actually works + no crashing

components/plus-button.tsx

@@ -19,46 +19,67 @@ import { Label } from "./ui/label";
 import { Input } from "./ui/input";
 import { Textarea } from "./ui/textarea";
 import { Checkbox } from "./ui/checkbox";
-import { useState } from "react";
+import { useState, SubmitEvent } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 
 export default function PlusButton() {
   const [differentAddr, setDifferentAddr] = useState(false);
-  const [name, setName] = useState("");
-  const [address, setAddress] = useState("");
+  const [open, setOpen] = useState(false);
+  const queryclient = useQueryClient();
+
+  // 1. Properly set default values inside the initial state
+  const [name, setName] = useState("Kubernetes");
+  const [address, setAddress] = useState("192.168.1.10");
   const [description, setDescription] = useState<string>("");
-  const [sshAddr, setSSHAddr] = useState<string>("");
+  const [sshAddr, setSSHAddr] = useState<string>("192.168.1.10");
 
-  const onSubmit = async () => {
-    let tmp_description = undefined;
-    let tmp_ssh = undefined;
+  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    console.log("Form submission triggered");
+
+    if (!name.trim() || !address.trim()) return;
+
+    let tmp_description: string | undefined = undefined;
+    let tmp_ssh: string | undefined = undefined;
 
-    if (!name.trim()) return;
-    if (!address.trim()) return;
     if (description.trim()) tmp_description = description.trim();
-    if (sshAddr.trim()) tmp_ssh = sshAddr.trim();
+    if (differentAddr && sshAddr.trim()) tmp_ssh = sshAddr.trim();
 
-    await invoke("new_app", {
-      name: name,
-      address: address,
-      description: description,
-      sshAddress: sshAddr,
-    });
+    try {
+      let app = await invoke("new_app", {
+        name: name.trim(),
+        address: address.trim(),
+        description: tmp_description,
+        sshAddress: tmp_ssh,
+      });
+
+      console.log("Tauri response:", app);
+
+      setOpen(false);
+
+      queryclient.invalidateQueries({
+        queryKey: ["apps"],
+      });
+    } catch (err) {
+      console.error("Failed to invoke new_app:", err);
+    }
   };
 
   return (
-    <Dialog>
-      <form onSubmit={() => onSubmit()}>
-        <DialogTrigger asChild>
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            transition={{ type: "spring", stiffness: 300, damping: 20 }}
-            className="absolute right-3 bottom-3 bg-emerald-700 p-2 rounded-full"
-          >
-            <Plus className="w-8 h-8 text-white" />
-          </motion.button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-sm">
+    <Dialog onOpenChange={(e) => setOpen(e.valueOf())} open={open}>
+      <DialogTrigger asChild>
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          transition={{ type: "spring", stiffness: 300, damping: 20 }}
+          className="absolute right-3 bottom-3 bg-emerald-700 p-2 rounded-full"
+        >
+          <Plus className="w-8 h-8 text-white" />
+        </motion.button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-sm">
+        <form onSubmit={handleSubmit}>
           <DialogHeader>
             <DialogTitle>Create Service</DialogTitle>
             <DialogDescription>
@@ -72,8 +93,8 @@ export default function PlusButton() {
                 id="name"
                 name="name"
                 value={name}
-                onChange={(e) => setName(e.target.value.trim())}
-                defaultValue="Kubernetes"
+                // Removed trimming on change to allow spaces while typing
+                onChange={(e) => setName(e.target.value)}
               />
             </Field>
             <Field>
@@ -82,8 +103,7 @@ export default function PlusButton() {
                 id="address"
                 name="address"
                 value={address}
-                onChange={(e) => setAddress(e.target.value.trim())}
-                defaultValue="192.168.1.10"
+                onChange={(e) => setAddress(e.target.value)}
               />
             </Field>
             <Field>
@@ -94,7 +114,7 @@ export default function PlusButton() {
               <Textarea
                 id="description"
                 value={description}
-                onChange={(e) => setDescription(e.target.value.trim())}
+                onChange={(e) => setDescription(e.target.value)}
                 name="description"
               />
             </Field>
@@ -126,8 +146,7 @@ export default function PlusButton() {
                       id="ssh-addr"
                       name="ssh-addr"
                       value={sshAddr}
-                      onChange={(e) => setSSHAddr(e.target.value.trim())}
-                      defaultValue="192.168.1.10"
+                      onChange={(e) => setSSHAddr(e.target.value)}
                     />
                   </Field>
                 </motion.div>
@@ -136,12 +155,14 @@ export default function PlusButton() {
           </FieldGroup>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
             </DialogClose>
             <Button type="submit">Save changes</Button>
           </DialogFooter>
-        </DialogContent>
-      </form>
+        </form>
+      </DialogContent>
     </Dialog>
   );
 }