Refactor add new host form

src/components/general/grab-next-subnet-button.tsx

@@ -35,9 +35,12 @@ export default function GrabNextSubnetButton({ onGrab }: Props) {
             color="primary"
             beforeIcon={<Wand2 size={16} />}
             loading={grabbing}
-            onClick={grabNextSubnet}
+            onClick={(e) => {
+                e.preventDefault();
+                grabNextSubnet();
+            }}
         >
             Grab Next Subnet
         </Button>
     );
-}
+}

src/components/general/host-wg-ip-field.tsx

@@ -7,6 +7,9 @@ import Tag from "../twui/elements/Tag";
 import Stack from "../twui/layout/Stack";
 import fetchApi from "../twui/utils/fetch/fetchApi";
 import type { ApiReqParams } from "@/src/types";
+import GrabNextSubnetButton from "./grab-next-subnet-button";
+import type useFormInit from "@/src/hooks/use-form-init";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 
 export type HostWgIpFieldStatus =
     | "checking"
@@ -15,7 +18,7 @@ export type HostWgIpFieldStatus =
     | "invalid"
     | "current";
 
-type Props = {
+type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>> & {
     value: string;
     onChange?: (value: string) => void;
     onStatus?: (status: HostWgIpFieldStatus) => void;
@@ -37,6 +40,7 @@ export default function HostWgIpField({
     inputRef,
     current_value,
     autoFocus,
+    setForm,
 }: Props) {
     const [availability, setAvailability] = useState<AvailabilityType>();
 
@@ -82,20 +86,31 @@ export default function HostWgIpField({
 
     return (
         <Stack className="w-full gap-2">
-            <Input
-                value={value}
-                changeHandler={(v) => {
-                    onChange?.(v);
-                }}
-                prefix={<Network size={17} opacity={0.5} />}
-                suffix={
-                    <Span className="text-sm opacity-50 whitespace-nowrap">
-                        WireGuard IP Address
-                    </Span>
-                }
-                componentRef={inputRef}
-                autoFocus={autoFocus}
-            />
+            <Row className="w-full flex-nowrap">
+                <Input
+                    value={value}
+                    changeHandler={(v) => {
+                        onChange?.(v);
+                    }}
+                    prefix={<Network size={17} opacity={0.5} />}
+                    suffix={
+                        <Span className="text-sm opacity-50 whitespace-nowrap">
+                            WireGuard IP Address
+                        </Span>
+                    }
+                    componentRef={inputRef}
+                    autoFocus={autoFocus}
+                />
+
+                <GrabNextSubnetButton
+                    onGrab={(ip) => {
+                        setForm((prev) => ({
+                            ...prev,
+                            wg_ip_address: ip,
+                        }));
+                    }}
+                />
+            </Row>
 
             {ip_status === "invalid" ? (
                 <Tag