wrap inputs in real forms, so enter submits instead of doing nothing

24 panel and screen files had their fields sitting in a <div> instead of a
<form> — typing a value and pressing Enter did nothing, and the button was
the only way in. Fixed the sites that are a real form, a single field with
an obvious action, or a multi-field editor; left search/filter boxes and a
few genuinely ambiguous sites alone (see TODO.md for the full breakdown).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-19 10:51:58 +00:00
co-authored by Claude Opus 5
parent 319afe2c5d
commit 994de45296
24 changed files with 510 additions and 408 deletions
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState, useEffect } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
@@ -28,7 +29,8 @@ export const STTSection = () => {
setUrl(config.url);
}, [config]);
const handleSave = async () => {
const handleSave = async (ev?: FormEvent) => {
ev?.preventDefault();
if (isSaving) return;
setIsSaving(true);
try {
@@ -69,7 +71,7 @@ export const STTSection = () => {
if (isLoading) return <p className="text-sm text-duck-dark/40">Loading...</p>;
return (
<div className="grid gap-4">
<form onSubmit={handleSave} className="grid gap-4">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Whisper Server URL</span>
<Input
@@ -82,8 +84,7 @@ export const STTSection = () => {
<div className="flex items-center gap-2">
<Button
type="button"
onClick={handleSave}
type="submit"
disabled={isSaving}
className="flex-1 h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
>
@@ -99,6 +100,6 @@ export const STTSection = () => {
{isTesting ? 'Testing...' : 'Test'}
</Button>
</div>
</div>
</form>
);
};