chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: help_text ordering and Input component usage in scripts components

Browse Source 
- 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>
This commit is contained in:
chihlasm
2026-03-13 02:18:13 -04:00
parent 43bccf9af1
commit 69404e0e12
2 changed files with 35 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/scripts/ScriptFilterBar.tsx
View File

@@ -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>

67
frontend/src/components/scripts/ScriptParameterField.tsx
View File

@@ -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>
)
}