small change

src/app/servers/LocationSelect.tsx

@@ -5,7 +5,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 export default function MapSelect({
   setLocation,
 }: {
-  setLocation: (coors: [number, number]) => void;
+  setLocation: (coords: [number, number] | undefined) => void;
 }) {
   const mapContainer = useRef<HTMLDivElement | null>(null);
   const map = useRef<maplibregl.Map | null>(null);
@@ -39,6 +39,14 @@ export default function MapSelect({
         .addTo(map.current!);
     });
 
+    map.current.on("contextmenu", () => {
+      if (marker.current) {
+        marker.current.remove();
+        marker.current = null;
+        setLocation(undefined);
+      }
+    });
+
     return () => {
       // Clean up marker
       if (marker.current) {

src/app/servers/NewServerDialog.tsx

@@ -42,15 +42,21 @@ export default function NewServerDialog({
         <DialogHeader>
           <DialogTitle>Add Server</DialogTitle>
         </DialogHeader>
-        <Label className="mt-2">Server Name</Label>
+        <Label className="mt-2">
+          Server Name<span className="text-red-500">*</span>
+        </Label>
         <Input
           placeholder="Main Server, Database, etc"
+          required
           onInput={(e) => setName(e.currentTarget.value)}
         />
 
-        <Label className="mt-2">Server IP</Label>
+        <Label className="mt-2">
+          Server IP<span className="text-red-500">*</span>
+        </Label>
         <Input
           placeholder="10.7.1.10, etc"
+          required
           onInput={(e) => setIp(e.currentTarget.value)}
         />
 
@@ -68,6 +74,7 @@ export default function NewServerDialog({
         <MapSelect setLocation={setCoordinates} />
         <DialogFooter>
           <Button
+            disabled={name == "" || ip == ""}
             onClick={() => {
               session
                 ?.addServer({ name, ip, coordinates, location })