From 69404e0e126a04cb9360dd7b0f74afc48866c86d Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 13 Mar 2026 02:18:13 -0400
Subject: [PATCH] fix: help_text ordering and Input component usage in scripts
 components

- ScriptParameterField: extract error <p> from select/boolean input blocks and remove error prop from Input/Textarea components so all types render help_text before error via unified bottom rendering
- ScriptFilterBar: replace native <input> with shared <Input> component from @/components/ui/Input, preserving search icon via absolute positioning wrapper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/scripts/ScriptFilterBar.tsx    |  9 +--
 .../scripts/ScriptParameterField.tsx          | 67 +++++++++----------
 2 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/scripts/ScriptFilterBar.tsx b/frontend/src/components/scripts/ScriptFilterBar.tsx
index 3bbfea3d..e894dbcb 100644
--- a/frontend/src/components/scripts/ScriptFilterBar.tsx
+++ b/frontend/src/components/scripts/ScriptFilterBar.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { Search } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/Input'
 import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
 
 interface Props {
@@ -61,13 +62,13 @@ export function ScriptFilterBar({ inputValue, setInputValue }: Props) {
 
       {/* Search input */}
       <div className="relative ml-auto">
-        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
-        <input
+        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none z-10" />
+        <Input
           type="text"
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
-          placeholder="Search templates…"
-          className="pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)] w-52"
+          placeholder="Search templates..."
+          className="pl-8 w-52"
         />
       </div>
     </div>
diff --git a/frontend/src/components/scripts/ScriptParameterField.tsx b/frontend/src/components/scripts/ScriptParameterField.tsx
index 5e2bf98a..d3c62f6e 100644
--- a/frontend/src/components/scripts/ScriptParameterField.tsx
+++ b/frontend/src/components/scripts/ScriptParameterField.tsx
@@ -41,7 +41,6 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
             : (param.placeholder ?? undefined)
         }
         disabled={disabled}
-        error={error}
       />
     )
   } else if (param.type === 'password') {
@@ -54,7 +53,6 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
           onChange={handleChange}
           placeholder={param.placeholder ?? undefined}
           disabled={disabled}
-          error={error}
         />
         <button
           type="button"
@@ -75,48 +73,41 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
         onChange={handleChange}
         placeholder={param.placeholder ?? undefined}
         disabled={disabled}
-        error={error}
         rows={4}
       />
     )
   } else if (param.type === 'select') {
     input = (
-      <>
-        <select
-          id={id}
-          value={value}
-          onChange={handleChange}
-          disabled={disabled}
-          className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          <option value="">Select…</option>
-          {(param.options ?? []).map(opt => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-        {error && <p className="mt-1.5 text-xs text-red-400">{error}</p>}
-      </>
+      <select
+        id={id}
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <option value="">Select…</option>
+        {(param.options ?? []).map(opt => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
     )
   } else if (param.type === 'boolean') {
     input = (
-      <>
-        <div className="flex items-center gap-2">
-          <input
-            id={id}
-            type="checkbox"
-            checked={value === 'true'}
-            onChange={handleCheckbox}
-            disabled={disabled}
-            className="rounded border-border disabled:cursor-not-allowed disabled:opacity-50"
-          />
-          <label htmlFor={id} className="text-sm text-foreground">
-            {param.label}
-          </label>
-        </div>
-        {error && <p className="mt-1.5 text-xs text-red-400">{error}</p>}
-      </>
+      <div className="flex items-center gap-2">
+        <input
+          id={id}
+          type="checkbox"
+          checked={value === 'true'}
+          onChange={handleCheckbox}
+          disabled={disabled}
+          className="rounded border-border disabled:cursor-not-allowed disabled:opacity-50"
+        />
+        <label htmlFor={id} className="text-sm text-foreground">
+          {param.label}
+        </label>
+      </div>
     )
   } else {
     // Fallback for unknown types
@@ -126,7 +117,6 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
         value={value}
         onChange={handleChange}
         disabled={disabled}
-        error={error}
       />
     )
   }
@@ -146,6 +136,9 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
       {param.help_text && (
         <p className="text-xs text-muted-foreground mt-1">{param.help_text}</p>
       )}
+      {error && (
+        <p className="mt-1.5 text-xs text-red-400">{error}</p>
+      )}
     </div>
   )
 }