Merge pull request 'UI/chore: init typography xxs body' (#2627) from hsjobeki/clan-core:hsjobeki-main into main

2024-12-17 18:43:06 +00:00
parent 5893a53089 f7ddc4c26d
commit 8be3e41663
14 changed files with 359 additions and 181 deletions
--- a/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
+++ b/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
@@ -1,6 +1,8 @@
 import { createEffect, Show, type JSX } from "solid-js";
 import cx from "classnames";
 import { Label } from "../base/label";
+import { InputBase, InputLabel } from "@/src/components/inputBase";
+import { Typography } from "@/src/components/Typography";

 interface TextInputProps {
  value: string;
@@ -22,49 +24,39 @@ interface TextInputProps {
 }

 export function TextInput(props: TextInputProps) {
-  const value = () => props.value;
-
+  // createEffect(() => {
+  //   console.log("TextInput", props.error, props.value);
+  // });
  return (
-    <label
-      class={cx("form-control w-full", props.class)}
-      aria-disabled={props.disabled}
-    >
-      <div class="label">
-        <Label label={props.label} required={props.required} />
-        <span class="label-text-alt block">{props.altLabel}</span>
-      </div>
-
-      <div class="input input-bordered flex items-center gap-2">
-        <Show when={props.adornment && props.adornment.position === "start"}>
-          {props.adornment?.content}
-        </Show>
-        {props.inlineLabel}
-        <input
-          {...props.inputProps}
-          value={value()}
-          type={props.type ? props.type : "text"}
-          class="grow"
+    <div
+      class="grid grid-cols-12"
      classList={{
-            "input-disabled": props.disabled,
+        "mb-[14.5px]": !props.error,
      }}
-          placeholder={`${props.placeholder || props.label}`}
-          required
-          disabled={props.disabled}
+    >
+      <InputLabel
+        class="col-span-2"
+        required={props.required}
+        error={!!props.error}
+      >
+        {props.label}
+      </InputLabel>
+      <InputBase
+        error={!!props.error}
+        class="col-span-10"
+        {...props.inputProps}
+        value={props.value}
      />
-        <Show when={props.adornment && props.adornment.position === "end"}>
-          {props.adornment?.content}
-        </Show>
-      </div>
-      <div class="label">
-        {props.helperText && (
-          <span class="label-text text-neutral">{props.helperText}</span>
-        )}
      {props.error && (
-          <span class="label-text-alt font-bold text-error-700">
+        <Typography
+          hierarchy="body"
+          size="xxs"
+          weight="medium"
+          class="col-span-full px-1 !fg-semantic-4"
+        >
          {props.error}
-          </span>
+        </Typography>
      )}
    </div>
-    </label>
  );
 }
--- a/pkgs/webview-ui/app/src/api_test.tsx
+++ b/pkgs/webview-ui/app/src/api_test.tsx
@@ -4,7 +4,7 @@ import {
  getValues,
  SubmitHandler,
 } from "@modular-forms/solid";
-import { TextInput } from "./components/TextInput";
+import { TextInput } from "@/src/Form/fields/TextInput";
 import { Button } from "./components/button";
 import { callApi } from "./api";
 import { API } from "@/api/API";
@@ -68,7 +68,6 @@ export const ApiTester = () => {
                label={"endpoint"}
                value={field.value || ""}
                inputProps={fieldProps}
-                formStore={formStore}
              />
            )}
          </Field>
@@ -78,7 +77,6 @@ export const ApiTester = () => {
                label={"payload"}
                value={field.value || ""}
                inputProps={fieldProps}
-                formStore={formStore}
              />
            )}
          </Field>
--- a/pkgs/webview-ui/app/src/components/TextInput.tsx
+++ b/pkgs/webview-ui/app/src/components/TextInput.tsx
@@ -1,72 +0,0 @@
-import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
-import { Show, type JSX } from "solid-js";
-import cx from "classnames";
-
-interface TextInputProps<T extends FieldValues, R extends ResponseData> {
-  formStore: FormStore<T, R>;
-  value: string;
-  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  label: JSX.Element;
-  error?: string;
-  required?: boolean;
-  type?: string;
-  inlineLabel?: JSX.Element;
-  class?: string;
-  adornment?: {
-    position: "start" | "end";
-    content: JSX.Element;
-  };
-  placeholder?: string;
-}
-
-export function TextInput<T extends FieldValues, R extends ResponseData>(
-  props: TextInputProps<T, R>,
-) {
-  const value = () => props.value;
-
-  return (
-    <label
-      class={cx("form-control w-full", props.class)}
-      aria-disabled={props.formStore.submitting}
-    >
-      <div class="label">
-        <span
-          class="label-text block"
-          classList={{
-            "after:ml-0.5 after:text-primary after:content-['*']":
-              props.required,
-          }}
-        >
-          {props.label}
-        </span>
-      </div>
-
-      <div class="input input-bordered flex items-center gap-2">
-        <Show when={props.adornment && props.adornment.position === "start"}>
-          {props.adornment?.content}
-        </Show>
-        {props.inlineLabel}
-        <input
-          {...props.inputProps}
-          value={value()}
-          type={props.type ? props.type : "text"}
-          class="grow"
-          classList={{
-            "input-disabled": props.formStore.submitting,
-          }}
-          placeholder={`${props.placeholder || props.label}`}
-          required
-          disabled={props.formStore.submitting}
-        />
-        <Show when={props.adornment && props.adornment.position === "end"}>
-          {props.adornment?.content}
-        </Show>
-      </div>
-      {props.error && (
-        <span class="label-text-alt font-bold text-error-700">
-          {props.error}
-        </span>
-      )}
-    </label>
-  );
-}
--- a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
+++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
@@ -15,3 +15,9 @@
  line-height: 132%;
  letter-spacing: 3%;
 }
+
+.fnt-body-xxs {
+  font-size: 0.6875rem;
+  line-height: 132%;
+  letter-spacing: 0.00688rem;
+}
--- a/pkgs/webview-ui/app/src/components/Typography/index.tsx
+++ b/pkgs/webview-ui/app/src/components/Typography/index.tsx
@@ -24,6 +24,7 @@ interface SizeForHierarchy {
  body: {
    default: string;
    xs: string;
+    xxs: string;
    s: string;
  };
  headline: {
@@ -43,10 +44,9 @@ type AllowedSizes<H extends Hierarchy> = keyof SizeForHierarchy[H];
 const sizeHierarchyMap: SizeForHierarchy = {
  body: {
    default: cx("fnt-body-default"),
-    xs: cx("fnt-body-xs"),
    s: cx("fnt-body-s"),
-    // m: cx("fnt-body-m"),
-    // l: cx("fnt-body-l"),
+    xs: cx("fnt-body-xs"),
+    xxs: cx("fnt-body-xxs"),
  },
  headline: {
    default: cx("fnt-headline-default"),
--- a/pkgs/webview-ui/app/src/components/inputBase/index.tsx
+++ b/pkgs/webview-ui/app/src/components/inputBase/index.tsx
@@ -0,0 +1,146 @@
+import cx from "classnames";
+import { createEffect, JSX, splitProps } from "solid-js";
+import Icon, { IconVariant } from "../icon";
+import { Typography } from "../Typography";
+
+type Variants = "outlined" | "ghost";
+interface InputBaseProps {
+  variant?: Variants;
+  value?: string;
+  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
+  required?: boolean;
+  type?: string;
+  inlineLabel?: JSX.Element;
+  class?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  error?: boolean;
+  icon?: IconVariant;
+}
+
+const variantBorder: Record<Variants, string> = {
+  outlined: "border border-inv-3",
+  ghost: "",
+};
+
+const fgStateClasses = cx("aria-disabled:fg-def-4 aria-readonly:fg-def-3");
+
+export const InputBase = (props: InputBaseProps) => {
+  const [, inputProps] = splitProps(props, ["class"]);
+
+  createEffect(() => {
+    console.log("InputBase", props.value, props.variant);
+  });
+  return (
+    <div
+      class={cx(
+        // Layout
+        "flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6",
+
+        // Background
+        "bg-def-1 hover:bg-acc-1",
+
+        // Text
+        "fg-def-1",
+        fgStateClasses,
+        // Border
+        variantBorder[props.variant || "outlined"],
+        "rounded-sm",
+        "hover:border-inv-4",
+        "aria-disabled:border-def-2 aria-disabled:border",
+        // Outline
+        "outline-offset-1 outline-1",
+        "active:outline active:outline-inv-3",
+        "focus-visible:outline-double  focus-visible:outline-int-1",
+
+        // Cursor
+        "aria-readonly:cursor-no-drop",
+        props.class,
+      )}
+      classList={{
+        [cx("!border !border-semantic-1 !outline-semantic-1")]: !!props.error,
+      }}
+      aria-invalid={props.error}
+      aria-disabled={props.disabled}
+      aria-readonly={props.readonly}
+      tabIndex={0}
+      role="textbox"
+    >
+      {props.icon && (
+        <i
+          class={cx("inline-flex fg-def-2", fgStateClasses)}
+          aria-invalid={props.error}
+          aria-disabled={props.disabled}
+          aria-readonly={props.readonly}
+        >
+          <Icon icon={props.icon} font-size="inherit" color="inherit" />
+        </i>
+      )}
+      <input
+        tabIndex={-1}
+        class="w-full bg-transparent outline-none aria-readonly:cursor-no-drop"
+        value={props.value}
+        type={props.type ? props.type : "text"}
+        readOnly={props.readonly}
+        placeholder={`${props.placeholder || ""}`}
+        required={props.required}
+        disabled={props.disabled}
+        aria-invalid={props.error}
+        aria-disabled={props.disabled}
+        aria-readonly={props.readonly}
+        {...inputProps}
+      />
+    </div>
+  );
+};
+
+interface InputLabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
+  description?: string;
+  required?: boolean;
+  error?: boolean;
+  help?: string;
+}
+export const InputLabel = (props: InputLabelProps) => {
+  const [labelProps, forwardProps] = splitProps(props, ["class"]);
+  return (
+    <label
+      class={cx("flex items-center gap-1", labelProps.class)}
+      {...forwardProps}
+    >
+      <Typography
+        hierarchy="label"
+        size="default"
+        weight="bold"
+        class="!fg-def-1"
+        classList={{
+          [cx("!fg-semantic-1")]: !!props.error,
+        }}
+        aria-invalid={props.error}
+      >
+        {props.children}
+        {props.required && (
+          <span class="inline-flex px-1 align-bottom leading-[0.5] fg-def-3">
+            {"*"}
+          </span>
+        )}
+        {props.help && (
+          <span
+            class="tooltip tooltip-bottom inline px-2"
+            data-tip={props.help}
+            style={{
+              "--tooltip-color": "#EFFFFF",
+              "--tooltip-text-color": "#0D1416",
+              "--tooltip-tail": "0.8125rem",
+            }}
+          >
+            <Icon class="inline fg-def-3" icon={"Info"} width={"0.8125rem"} />
+          </span>
+        )}
+      </Typography>
+      <Typography hierarchy="body" size="xs" weight="normal" color="secondary">
+        {props.description}
+      </Typography>
+    </label>
+  );
+};
--- a/pkgs/webview-ui/app/src/index.tsx
+++ b/pkgs/webview-ui/app/src/index.tsx
@@ -20,6 +20,7 @@ import { ModuleDetails } from "./routes/modules/details";
 import { ModuleDetails as AddModule } from "./routes/modules/add";
 import { ApiTester } from "./api_test";
 import { IconVariant } from "./components/icon";
+import { Components } from "./routes/components";

 export const client = new QueryClient();

@@ -157,6 +158,12 @@ export const routes: AppRoute[] = [
        hidden: false,
        component: () => <ApiTester />,
      },
+      {
+        path: "/components",
+        label: "Components",
+        hidden: false,
+        component: () => <Components />,
+      },
    ],
  },
 ];
--- a/pkgs/webview-ui/app/src/routes/clans/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/create.tsx
@@ -8,7 +8,7 @@ import {
 } from "@modular-forms/solid";
 import toast from "solid-toast";
 import { setActiveURI, setClanList } from "@/src/App";
-import { TextInput } from "@/src/components/TextInput";
+import { TextInput } from "@/src/Form/fields/TextInput";
 import { useNavigate } from "@solidjs/router";
 import { Button } from "@/src/components/button";
 import Icon from "@/src/components/icon";
@@ -165,7 +165,6 @@ export const CreateClan = () => {
                      ),
                      position: "start",
                    }}
-                    formStore={formStore}
                    inputProps={props}
                    label="Template to use"
                    value={field.value ?? ""}
--- a/pkgs/webview-ui/app/src/routes/clans/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/details.tsx
@@ -11,7 +11,7 @@ import {
  setValue,
  SubmitHandler,
 } from "@modular-forms/solid";
-import { TextInput } from "@/src/components/TextInput";
+import { TextInput } from "@/src/Form/fields/TextInput";
 import toast from "solid-toast";
 import { set_single_service } from "@/src/api/inventory";
 import { Button } from "@/src/components/button";
@@ -215,7 +215,6 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
                <Field name={`allowedKeys.${idx()}.name`}>
                  {(field, props) => (
                    <TextInput
-                      formStore={formStore}
                      inputProps={props}
                      label={"Name"}
                      adornment={{
@@ -235,7 +234,6 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
                  {(field, props) => (
                    <>
                      <TextInput
-                        formStore={formStore}
                        inputProps={props}
                        label={"Value"}
                        value={field.value ?? ""}
@@ -243,7 +241,10 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
                        class="col-span-6"
                        required
                      />
-                      <span class="tooltip mt-auto" data-tip="Select file">
+                      <span
+                        class="tooltip col-span-12 mt-auto"
+                        data-tip="Select file"
+                      >
                        <label
                          class={"form-control w-full"}
                          aria-disabled={formStore.submitting}
--- a/pkgs/webview-ui/app/src/routes/components/index.tsx
+++ b/pkgs/webview-ui/app/src/routes/components/index.tsx
@@ -0,0 +1,118 @@
+import { Button } from "@/src/components/button";
+import { InputBase, InputLabel } from "@/src/components/inputBase";
+import { TextInput } from "@/src/Form/fields";
+import { Header } from "@/src/layout/header";
+import { createForm, required } from "@modular-forms/solid";
+
+const disabled = [false, true];
+const readOnly = [false, true];
+const error = [false, true];
+
+export const Components = () => {
+  const [formStore, { Form, Field }] = createForm<{ ef: string }>({});
+  return (
+    <>
+      <Header title="Components" />
+
+      <div class="grid grid-cols-2 gap-4 p-4">
+        <span class="col-span-2">Input </span>
+
+        <span>Default</span>
+        <span>Size S</span>
+
+        {disabled.map((disabled) =>
+          readOnly.map((readOnly) =>
+            error.map((hasError) => (
+              <>
+                <span>
+                  {[
+                    disabled ? "Disabled" : "(default)",
+                    readOnly ? "ReadOnly" : "",
+                    hasError ? "Error" : "",
+                  ]
+                    .filter(Boolean)
+                    .join(" + ")}
+                </span>
+                <InputBase
+                  variant="outlined"
+                  value="The Fox jumps!"
+                  disabled={disabled}
+                  error={hasError}
+                  readonly={readOnly}
+                />
+              </>
+            )),
+          ),
+        )}
+        <span class="col-span-2">Input Ghost</span>
+        {disabled.map((disabled) =>
+          readOnly.map((readOnly) =>
+            error.map((hasError) => (
+              <>
+                <span>
+                  {[
+                    disabled ? "Disabled" : "(default)",
+                    readOnly ? "ReadOnly" : "",
+                    hasError ? "Error" : "",
+                  ]
+                    .filter(Boolean)
+                    .join(" + ")}
+                </span>
+                <InputBase
+                  variant="ghost"
+                  value="The Fox jumps!"
+                  disabled={disabled}
+                  error={hasError}
+                  readonly={readOnly}
+                />
+              </>
+            )),
+          ),
+        )}
+        <span class="col-span-2">Input Label</span>
+        <span>Default</span>
+        <InputLabel>Labeltext</InputLabel>
+        <span>Required</span>
+        <InputLabel required>Labeltext</InputLabel>
+        <span>Error</span>
+        <InputLabel error>Labeltext</InputLabel>
+        <span>Error + Reuired</span>
+        <InputLabel error required>
+          Labeltext
+        </InputLabel>
+        <span>Icon</span>
+        <InputLabel help="Some Info">Labeltext</InputLabel>
+        <span>Description</span>
+        <InputLabel description="Some more words">Labeltext</InputLabel>
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="col-span-full gap-4">Form Layout</span>
+        <TextInput label="Label" value="Value" />
+        <Form
+          onSubmit={() => {
+            console.log("Nothing");
+          }}
+        >
+          <Field
+            name="ef"
+            validate={required(
+              "This field is required very long descriptive error message",
+            )}
+          >
+            {(field, inputProps) => (
+              <TextInput
+                label="Write something"
+                error={field.error}
+                required
+                value={field.value || ""}
+                inputProps={inputProps}
+              />
+            )}
+          </Field>
+          <Button>Submit</Button>
+        </Form>
+        <TextInput label="Label" required value="Value" />
+      </div>
+    </>
+  );
+};
--- a/pkgs/webview-ui/app/src/routes/flash/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/flash/view.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/src/components/button";
 import { FileInput } from "@/src/components/FileInput";
 import Icon from "@/src/components/icon";
 import { SelectInput } from "@/src/components/SelectInput";
-import { TextInput } from "@/src/components/TextInput";
+import { TextInput } from "@/src/Form/fields/TextInput";
 import { Typography } from "@/src/components/Typography";
 import { Header } from "@/src/layout/header";
 import {
@@ -269,7 +269,6 @@ export const Flash = () => {
                  >
                    {(field, props) => (
                      <TextInput
-                        formStore={formStore}
                        inputProps={props}
                        label="SSID"
                        value={field.value ?? ""}
@@ -286,7 +285,6 @@ export const Flash = () => {
                    {(field, props) => (
                      <div class="relative col-span-3 w-full">
                        <TextInput
-                          formStore={formStore}
                          inputProps={props}
                          type={
                            passwordVisibility()[index()] ? "text" : "password"
@@ -357,7 +355,6 @@ export const Flash = () => {
                {(field, props) => (
                  <>
                    <TextInput
-                      formStore={formStore}
                      inputProps={props}
                      label="Source (flake URL)"
                      value={String(field.value)}
@@ -377,7 +374,6 @@ export const Flash = () => {
                {(field, props) => (
                  <>
                    <TextInput
-                      formStore={formStore}
                      inputProps={props}
                      label="Image Name (attribute name)"
                      value={String(field.value)}
--- a/pkgs/webview-ui/app/src/routes/machines/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/create.tsx
@@ -2,7 +2,7 @@ import { callApi, OperationArgs } from "@/src/api";
 import { activeURI } from "@/src/App";
 import { Button } from "@/src/components/button";
 import Icon from "@/src/components/icon";
-import { TextInput } from "@/src/components/TextInput";
+import { TextInput } from "@/src/Form/fields/TextInput";
 import { Header } from "@/src/layout/header";
 import { createForm, required, reset } from "@modular-forms/solid";
 import { useNavigate } from "@solidjs/router";
@@ -73,7 +73,7 @@ export function CreateMachine() {
      <Header title="Create Machine" />
      <div class="flex w-full p-4">
        <div class="mt-4 w-full self-stretch px-2">
-          <Form onSubmit={handleSubmit}>
+          <Form onSubmit={handleSubmit} class="">
            <Field
              name="opts.machine.name"
              validate={[required("This field is required")]}
@@ -85,7 +85,6 @@ export function CreateMachine() {
                  </div>
                  <TextInput
                    inputProps={props}
-                    formStore={formStore}
                    value={`${field.value}`}
                    label={"name"}
                    error={field.error}
@@ -99,7 +98,6 @@ export function CreateMachine() {
              {(field, props) => (
                <TextInput
                  inputProps={props}
-                  formStore={formStore}
                  value={`${field.value}`}
                  label={"description"}
                  error={field.error}
@@ -143,7 +141,6 @@ export function CreateMachine() {
                    <>
                      <TextInput
                        inputProps={props}
-                        formStore={formStore}
                        value={`${field.value}`}
                        label={"Target"}
                        error={field.error}
--- a/pkgs/webview-ui/app/src/routes/machines/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx
@@ -3,7 +3,7 @@ import { activeURI } from "@/src/App";
 import { Button } from "@/src/components/button";
 import { FileInput } from "@/src/components/FileInput";
 import Icon from "@/src/components/icon";
-import { TextInput } from "@/src/components/TextInput";
+import { TextInput } from "@/src/Form/fields/TextInput";
 import { selectSshKeys } from "@/src/hooks";
 import {
  createForm,
@@ -17,6 +17,7 @@ import { createSignal, For, Show } from "solid-js";
 import toast from "solid-toast";
 import { MachineAvatar } from "./avatar";
 import { Header } from "@/src/layout/header";
+import { InputLabel } from "@/src/components/inputBase";

 type MachineFormInterface = MachineData & {
  sshKey?: File;
@@ -302,14 +303,13 @@ const MachineForm = (props: MachineDetailsProps) => {
  };
  return (
    <>
-      <Form onSubmit={handleSubmit}>
      <div class="card-body">
        <span class="text-xl text-primary-800">General</span>
        <MachineAvatar name={machineName()} />
+        <Form onSubmit={handleSubmit} class="grid grid-cols-12 gap-y-4">
          <Field name="machine.name">
            {(field, props) => (
              <TextInput
-                formStore={formStore}
                inputProps={props}
                label="Name"
                value={field.value ?? ""}
@@ -321,22 +321,23 @@ const MachineForm = (props: MachineDetailsProps) => {
          </Field>
          <Field name="machine.tags" type="string[]">
            {(field, props) => (
+              <>
+                <InputLabel class="col-span-2">Tags</InputLabel>
+                <span class="col-span-10">
                  <For each={field.value}>
                    {(tag) => (
-                  <label class="p-1">
-                    Tags
                      <span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
                        {tag}
                      </span>
-                  </label>
                    )}
                  </For>
+                </span>
+              </>
            )}
          </Field>
          <Field name="machine.description">
            {(field, props) => (
              <TextInput
-                formStore={formStore}
                inputProps={props}
                label="Description"
                value={field.value ?? ""}
@@ -348,16 +349,24 @@ const MachineForm = (props: MachineDetailsProps) => {
          </Field>
          <Field name="hw_config">
            {(field, props) => (
-              <label>Hardware report: {field.value || "None"}</label>
+              <>
+                <InputLabel class="col-span-2">
+                  Hardware Configuration
+                </InputLabel>
+                <span class="col-span-10">{field.value || "None"}</span>
+              </>
            )}
          </Field>
          <Field name="disk_schema">
            {(field, props) => (
-              <span>Disk schema: {field.value || "None"}</span>
+              <>
+                <InputLabel class="col-span-2">Disk schema</InputLabel>
+                <span class="col-span-10">{field.value || "None"}</span>
+              </>
            )}
          </Field>

-          <div class="collapse collapse-arrow" tabindex="0">
+          <div class="collapse collapse-arrow col-span-full" tabindex="0">
            <input type="checkbox" />
            <div class="collapse-title link px-0 text-xl ">
              Connection Settings
@@ -366,7 +375,6 @@ const MachineForm = (props: MachineDetailsProps) => {
              <Field name="machine.deploy.targetHost">
                {(field, props) => (
                  <TextInput
-                    formStore={formStore}
                    inputProps={props}
                    label="Target Host"
                    value={field.value ?? ""}
@@ -411,7 +419,7 @@ const MachineForm = (props: MachineDetailsProps) => {
          </div>

          {
-            <div class="card-actions justify-end">
+            <div class="card-actions col-span-full justify-end">
              <Button
                type="submit"
                disabled={formStore.submitting || !formStore.dirty}
@@ -420,8 +428,8 @@ const MachineForm = (props: MachineDetailsProps) => {
              </Button>
            </div>
          }
-        </div>
        </Form>
+      </div>

      <div class="card-body">
        <div class="divider"></div>
@@ -579,11 +587,10 @@ function WifiModule(props: MachineWifiProps) {
      <span class="text-neutral">Preconfigure wireless networks</span>
      <For each={nets()}>
        {(_, idx) => (
-          <div class="flex gap-4">
+          <div class="grid grid-cols-2">
            <Field name={`networks.${idx()}.ssid`}>
              {(field, props) => (
                <TextInput
-                  formStore={formStore}
                  inputProps={props}
                  label="Name"
                  value={field.value ?? ""}
@@ -595,7 +602,6 @@ function WifiModule(props: MachineWifiProps) {
            <Field name={`networks.${idx()}.password`}>
              {(field, props) => (
                <TextInput
-                  formStore={formStore}
                  inputProps={props}
                  label="Password"
                  value={field.value ?? ""}
--- a/pkgs/webview-ui/app/src/routes/modules/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/modules/details.tsx
@@ -1,29 +1,13 @@
-import { callApi } from "@/src/api";
 import { activeURI } from "@/src/App";
 import { BackButton } from "@/src/components/BackButton";
 import { createModulesQuery } from "@/src/queries";
 import { useParams, useNavigate } from "@solidjs/router";
-import {
-  createEffect,
-  createSignal,
-  For,
-  JSX,
-  Match,
-  Show,
-  Switch,
-} from "solid-js";
+import { createEffect, For, Match, Switch } from "solid-js";
 import { SolidMarkdown } from "solid-markdown";
-import toast from "solid-toast";
 import { ModuleInfo } from "./list";
 import { createQuery } from "@tanstack/solid-query";
 import { JSONSchema7 } from "json-schema";
-import { TextInput } from "@/src/components/TextInput";
-import {
-  createForm,
-  getValue,
-  setValue,
-  SubmitHandler,
-} from "@modular-forms/solid";
+import { SubmitHandler } from "@modular-forms/solid";
 import { DynForm } from "@/src/Form/form";
 import { Button } from "@/src/components/button";
 import Icon from "@/src/components/icon";