From 4a085680ed4c1e81bb91d23dab9f6edd1f613b75 Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Mon, 6 Oct 2025 21:28:25 -0400
Subject: [PATCH] submission form cleanup

---
 components/forms/SettingsSubmit.tsx | 77 +++++++++++++++++++----------
 1 file changed, 52 insertions(+), 25 deletions(-)

diff --git a/components/forms/SettingsSubmit.tsx b/components/forms/SettingsSubmit.tsx
index fc15609d..2b163c17 100644
--- a/components/forms/SettingsSubmit.tsx
+++ b/components/forms/SettingsSubmit.tsx
@@ -262,7 +262,6 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
 
     const hydrate = (name: string, currentId: string | null | undefined, opts: Opt[]) => {
       if (!currentId || !opts.length) return;
-      // Always nudge value back to the current id after options load
       setValue(name as any, String(currentId), { shouldDirty: false, shouldValidate: false });
     };
 
@@ -412,8 +411,8 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
 
     <div className="grid md:grid-cols-3 gap-3">
     <Select label="Lens Configuration" {...{ name: "lens_conf", register, options: conf.opts, required: true }} />
-    <Select label="Scan Head Aperture" {...{ name: "lens_apt", register, options: apt.opts, required: true }} />
-    <Select label="Beam Expander" {...{ name: "lens_exp", register, options: exp.opts, required: true }} />
+    <Select label="Scan Head Aperture (mm)" {...{ name: "lens_apt", register, options: apt.opts, required: true }} />
+    <Select label="Beam Expander (X Magnification)" {...{ name: "lens_exp", register, options: exp.opts, required: true }} />
     </div>
 
     <div className="grid md:grid-cols-3 gap-3">
@@ -436,7 +435,9 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
     render={(i) => {
       const autoRotate = !!useWatch({ control, name: `fill_settings.${i}.auto` });
       return (
-        <div className="grid md:grid-cols-4 gap-2">
+        <>
+        {/* Base fields */}
+        <div className="grid md:grid-cols-4 gap-3">
         <Text label="Name" name={`fill_settings.${i}.name`} register={register} />
         <Select label="Type" name={`fill_settings.${i}.type`} register={register} options={FILL_TYPES} />
         <Number label="Frequency (kHz)" name={`fill_settings.${i}.frequency`} register={register} step="0.1" />
@@ -446,14 +447,23 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         <Number label="Interval (mm)" name={`fill_settings.${i}.interval`} register={register} step="0.001" />
         <Number label="Pass" name={`fill_settings.${i}.pass`} register={register} step="1" />
         <Number label="Angle (°)" name={`fill_settings.${i}.angle`} register={register} step="1" />
+        </div>
+
+        {/* Auto rotate row */}
+        <div className="grid md:grid-cols-2 gap-3 items-center">
         <Check label="Auto Rotate" name={`fill_settings.${i}.auto`} register={register} />
         {autoRotate && (
           <Number label="Auto Rotate Increment (°)" name={`fill_settings.${i}.increment`} register={register} step="0.001" />
         )}
+        </div>
+
+        {/* Simple toggles row */}
+        <div className="flex flex-wrap gap-6">
         <Check label="Crosshatch" name={`fill_settings.${i}.cross`} register={register} />
         <Check label="Flood Fill" name={`fill_settings.${i}.flood`} register={register} />
         <Check label="Air Assist" name={`fill_settings.${i}.air`} register={register} />
         </div>
+        </>
       );
     }}
     />
@@ -468,29 +478,36 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
       const perf = !!useWatch({ control, name: `line_settings.${i}.perf` });
       const wobble = !!useWatch({ control, name: `line_settings.${i}.wobble` });
       return (
-        <div className="grid md:grid-cols-4 gap-2">
+        <>
+        {/* Base fields */}
+        <div className="grid md:grid-cols-4 gap-3">
         <Text label="Name" name={`line_settings.${i}.name`} register={register} />
         <Number label="Frequency (kHz)" name={`line_settings.${i}.frequency`} register={register} step="0.1" />
         <Number label="Pulse (ns)" name={`line_settings.${i}.pulse`} register={register} step="0.1" />
         <Number label="Power (%)" name={`line_settings.${i}.power`} register={register} step="0.1" />
         <Number label="Speed (mm/s)" name={`line_settings.${i}.speed`} register={register} step="0.1" />
         <Number label="Pass" name={`line_settings.${i}.pass`} register={register} step="1" />
+        </div>
+
+        {/* Perforation row */}
+        <div className="grid md:grid-cols-3 gap-3 items-center">
         <Check label="Perforation Mode" name={`line_settings.${i}.perf`} register={register} />
-        {perf && (
-          <>
-          <Number label="Cut (mm)" name={`line_settings.${i}.cut`} register={register} step="0.001" />
-          <Number label="Skip (mm)" name={`line_settings.${i}.skip`} register={register} step="0.001" />
-          </>
-        )}
+        {perf && <Number label="Cut (mm)" name={`line_settings.${i}.cut`} register={register} step="0.001" />}
+        {perf && <Number label="Skip (mm)" name={`line_settings.${i}.skip`} register={register} step="0.001" />}
+        </div>
+
+        {/* Wobble row */}
+        <div className="grid md:grid-cols-3 gap-3 items-center">
         <Check label="Wobble" name={`line_settings.${i}.wobble`} register={register} />
-        {wobble && (
-          <>
-          <Number label="Step (mm)" name={`line_settings.${i}.step`} register={register} step="0.001" />
-          <Number label="Size (mm)" name={`line_settings.${i}.size`} register={register} step="0.001" />
-          </>
-        )}
+        {wobble && <Number label="Step (mm)" name={`line_settings.${i}.step`} register={register} step="0.001" />}
+        {wobble && <Number label="Size (mm)" name={`line_settings.${i}.size`} register={register} step="0.001" />}
+        </div>
+
+        {/* Simple toggle */}
+        <div className="flex flex-wrap gap-6">
         <Check label="Air Assist" name={`line_settings.${i}.air`} register={register} />
         </div>
+        </>
       );
     }}
     />
@@ -505,7 +522,9 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
       const ditherVal = useWatch({ control, name: `raster_settings.${i}.dither` }) || "";
       const isHalftone = ditherVal === "halftone";
       return (
-        <div className="grid md:grid-cols-4 gap-2">
+        <>
+        {/* Base fields */}
+        <div className="grid md:grid-cols-4 gap-3">
         <Text label="Name" name={`raster_settings.${i}.name`} register={register} />
         <Number label="Frequency (kHz)" name={`raster_settings.${i}.frequency`} register={register} step="0.1" />
         <Number label="Pulse (ns)" name={`raster_settings.${i}.pulse`} register={register} step="0.1" />
@@ -513,19 +532,27 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         <Select label="Dither" name={`raster_settings.${i}.dither`} register={register} options={RASTER_DITHER} />
         <Number label="Power (%)" name={`raster_settings.${i}.power`} register={register} step="0.1" />
         <Number label="Speed (mm/s)" name={`raster_settings.${i}.speed`} register={register} step="0.1" />
+        <Number label="Interval (mm)" name={`raster_settings.${i}.interval`} register={register} step="0.001" />
+        {/* allow two decimals */}
+        <Number label="Dot Width Adjustment (mm)" name={`raster_settings.${i}.dot`} register={register} step="0.01" />
+        <Number label="Pass" name={`raster_settings.${i}.pass`} register={register} step="1" />
+        </div>
+
+        {/* Halftone row */}
         {isHalftone && (
-          <>
+          <div className="grid md:grid-cols-2 gap-3">
           <Number label="Halftone Cell" name={`raster_settings.${i}.halftone_cell`} register={register} step="1" />
           <Number label="Halftone Angle" name={`raster_settings.${i}.halftone_angle`} register={register} step="1" />
-          </>
+          </div>
         )}
-        <Number label="Interval (mm)" name={`raster_settings.${i}.interval`} register={register} step="0.001" />
-        <Number label="Dot Width Adjustment (mm)" name={`raster_settings.${i}.dot`} register={register} step="0.1" />
-        <Number label="Pass" name={`raster_settings.${i}.pass`} register={register} step="1" />
+
+        {/* Simple toggles row */}
+        <div className="flex flex-wrap gap-6">
         <Check label="Crosshatch" name={`raster_settings.${i}.cross`} register={register} />
         <Check label="Inverted" name={`raster_settings.${i}.inversion`} register={register} />
         <Check label="Air Assist" name={`raster_settings.${i}.air`} register={register} />
         </div>
+        </>
       );
     }}
     />
@@ -594,9 +621,9 @@ function Repeater({ title, fields, onAdd, onRemove, render }: any) {
 
     <div className="space-y-3">
     {fields.map((_: any, i: number) => (
-      <div key={i} className="rounded-lg border bg-muted/20 p-3">
+      <div key={i} className="rounded-lg border bg-muted/20 p-3 space-y-3">
       {render(i)}
-      <div className="pt-2">
+      <div className="pt-1">
       <button type="button" className="px-2 py-1 border rounded" onClick={() => onRemove(i)}>Remove</button>
       </div>
       </div>