officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
pastilhas
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
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/CapabilityPage.tsx
+10 -8
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState, useEffect, useRef } from 'react';
import { Link, useNavigate, useParams, useSearchParams } from 'react-router';
import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -344,7 +345,8 @@ export const CapabilityList = ({
queryFn: () => client.get<CapabilitySummary[]>(endpoint),
});
const handleCreate = async () => {
const handleCreate = async (ev?: FormEvent) => {
ev?.preventDefault();
const name = newName.trim();
if (!name) return;
try {
@@ -382,16 +384,15 @@ export const CapabilityList = ({
)}
</div>
{creating && (
<div className="shrink-0 px-3 py-2 border-b border-duck-dark/10 bg-duck-teal/5 flex items-center gap-1.5">
<form
onSubmit={handleCreate}
className="shrink-0 px-3 py-2 border-b border-duck-dark/10 bg-duck-teal/5 flex items-center gap-1.5"
>
<input
ref={newNameRef}
value={newName}
onChange={(ev) => setNewName(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') {
ev.preventDefault();
handleCreate();
}
if (ev.key === 'Escape') {
setCreating(false);
setNewName('');
@@ -401,13 +402,14 @@ export const CapabilityList = ({
className="flex-1 min-w-0 rounded border border-duck-dark/20 bg-background px-2 py-1 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
/>
<button
onClick={handleCreate}
type="submit"
disabled={!newName.trim()}
className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors disabled:opacity-30"
>
<Check className="h-3.5 w-3.5 text-duck-teal" />
</button>
<button
type="button"
onClick={() => {
setCreating(false);
setNewName('');
@@ -416,7 +418,7 @@ export const CapabilityList = ({
>
<X className="h-3.5 w-3.5 text-duck-dark/50" />
</button>
</div>
</form>
)}
{externalSearch === undefined && (
<div className="shrink-0 px-3 py-2 border-b border-duck-dark/10">
src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/ApiKeys.tsx
+6 -5
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
@@ -61,7 +62,8 @@ export const ApiKeys = () => {
const refresh = () => queryClient.invalidateQueries({ queryKey: API_KEYS_QUERY_KEY });
const create = async () => {
const create = async (ev?: FormEvent) => {
ev?.preventDefault();
const trimmed = name.trim();
if (!trimmed || isCreating) return;
setIsCreating(true);
@@ -130,22 +132,21 @@ export const ApiKeys = () => {
</div>
)}
<div className="flex items-end gap-2">
<form onSubmit={create} className="flex items-end gap-2">
<Label className="grid flex-1 gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">New key</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20"
value={name}
onChange={(ev) => setName(ev.target.value)}
onKeyDown={(ev) => ev.key === 'Enter' && create()}
placeholder="iPhone, Music app, laptop CLI…"
/>
</Label>
<Button onClick={create} disabled={!name.trim() || isCreating} className="h-11">
<Button type="submit" disabled={!name.trim() || isCreating} className="h-11">
<Plus className="mr-1.5 h-4 w-4" />
Create
</Button>
</div>
</form>
{keys.length === 0 ? (
<div className="rounded-lg border border-dashed border-duck-dark/15 dark:border-foreground/15 p-6 text-center text-sm text-duck-dark/40 dark:text-foreground/40">
src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/ApifyConfig.tsx
+6 -5
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState, useEffect } from 'react';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
@@ -31,7 +32,8 @@ export const ApifyConfig = () => {
.finally(() => setIsLoading(false));
}, []);
const handleSave = async () => {
const handleSave = async (ev?: FormEvent) => {
ev?.preventDefault();
if (isSaving) return;
setIsSaving(true);
try {
@@ -60,7 +62,7 @@ export const ApifyConfig = () => {
</div>
)}
<div className="grid gap-5">
<form onSubmit={handleSave} className="grid gap-5">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">API Token</span>
<Input
@@ -84,14 +86,13 @@ export const ApifyConfig = () => {
</Label>
<Button
type="button"
onClick={handleSave}
type="submit"
disabled={isSaving || !apiToken.trim()}
className="w-full 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"
>
{isSaving ? 'Saving...' : 'Save'}
</Button>
</div>
</form>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/DavAppPasswords.tsx
+6 -5
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { toast } from 'sonner';
import { Copy, Trash2, Ban, Plus, Smartphone } from 'lucide-react';
@@ -59,7 +60,8 @@ export const DavAppPasswords = () => {
useEffect(load, [load]);
const create = async () => {
const create = async (ev?: FormEvent) => {
ev?.preventDefault();
const trimmed = label.trim();
if (!trimmed || isCreating) return;
setIsCreating(true);
@@ -142,22 +144,21 @@ export const DavAppPasswords = () => {
</div>
)}
<div className="flex items-end gap-2">
<form onSubmit={create} className="flex items-end gap-2">
<Label className="grid flex-1 gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">New device</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20"
value={label}
onChange={(ev) => setLabel(ev.target.value)}
onKeyDown={(ev) => ev.key === 'Enter' && create()}
placeholder="Pixel 9, iPad, Thunderbird…"
/>
</Label>
<Button onClick={create} disabled={!label.trim() || isCreating} className="h-11">
<Button type="submit" disabled={!label.trim() || isCreating} className="h-11">
<Plus className="mr-1.5 h-4 w-4" />
Create
</Button>
</div>
</form>
{passwords.length === 0 ? (
<div className="rounded-lg border border-dashed border-duck-dark/15 dark:border-foreground/15 p-6 text-center text-sm text-duck-dark/40 dark:text-foreground/40">
src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/GoogleOAuthConfig.tsx
+6 -5
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState, useEffect } from 'react';
import { toast } from 'sonner';
import { ChevronDown } from 'lucide-react';
@@ -266,7 +267,8 @@ export const GoogleOAuthConfig = () => {
if (!isLoading && clientId && clientSecret) verify();
}, [isLoading]);
const handleSave = async () => {
const handleSave = async (ev?: FormEvent) => {
ev?.preventDefault();
if (isSaving) return;
setIsSaving(true);
try {
@@ -290,7 +292,7 @@ export const GoogleOAuthConfig = () => {
<SetupGuide redirectUri={redirectUri} />
<div className="border-t border-duck-dark/10 dark:border-foreground/10 pt-5 grid gap-5">
<form onSubmit={handleSave} className="border-t border-duck-dark/10 dark:border-foreground/10 pt-5 grid gap-5">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Client ID</span>
<Input
@@ -327,14 +329,13 @@ export const GoogleOAuthConfig = () => {
</Label>
<Button
type="button"
onClick={handleSave}
type="submit"
disabled={isSaving || !clientId.trim() || !clientSecret.trim()}
className="w-full 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"
>
{isSaving ? 'Saving...' : 'Save'}
</Button>
</div>
</form>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/ServerSettings/AIHarnessesSection.tsx
+82 -68
View File
@@ -226,6 +226,23 @@ export const AIHarnessesSection = () => {
}
};
const submitLocalUrl = (ev?: React.FormEvent) => {
ev?.preventDefault();
if (probeState.step === 'url' && localUrl.trim()) handleProbe();
};
const submitAuth = (ev?: React.FormEvent) => {
ev?.preventDefault();
if (probeState.step !== 'auth') return;
const ready = probeState.probe.authType === 'basic' ? authUsername && authPassword : authApiKey;
if (ready) handleAuthSubmit(probeState.probe);
};
const submitApiKey = (ev: React.FormEvent, providerId: string) => {
ev.preventDefault();
if (keyInputs[providerId]) saveApiKey(providerId);
};
const removeLocalProvider = async (id: string) => {
await client.delete(`/server-settings/chat-providers/local-providers/${id}`);
queryClient.invalidateQueries({ queryKey: ['CHAT_PROVIDERS_LOCAL_PROVIDERS'] });
@@ -291,57 +308,60 @@ export const AIHarnessesSection = () => {
{addingLocal ? (
<div className="flex flex-col gap-2 max-w-sm">
{/* Step 1: Name + URL inputs stacked */}
<Input
type="text"
className="h-8 text-xs"
placeholder="Name (e.g. My Ollama)"
value={localName}
onChange={(ev) => setLocalName(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Escape') resetLocalForm();
}}
disabled={probeState.step !== 'url'}
autoFocus
/>
<Input
type="url"
className="h-8 text-xs"
placeholder="http://localhost:11434"
value={localUrl}
onChange={(ev) => setLocalUrl(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Escape') resetLocalForm();
if (ev.key === 'Enter' && localUrl.trim() && probeState.step === 'url') handleProbe();
}}
disabled={probeState.step !== 'url'}
/>
<div className="flex items-center gap-2">
{probeState.step === 'url' && (
<Button
<form onSubmit={submitLocalUrl} className="contents">
<Input
type="text"
className="h-8 text-xs"
placeholder="Name (e.g. My Ollama)"
value={localName}
onChange={(ev) => setLocalName(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Escape') resetLocalForm();
}}
disabled={probeState.step !== 'url'}
autoFocus
/>
<Input
type="url"
className="h-8 text-xs"
placeholder="http://localhost:11434"
value={localUrl}
onChange={(ev) => setLocalUrl(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Escape') resetLocalForm();
}}
disabled={probeState.step !== 'url'}
/>
<div className="flex items-center gap-2">
{probeState.step === 'url' && (
<Button
type="submit"
size="sm"
className="h-7 text-xs bg-duck-dark text-white hover:bg-duck-dark/90 dark:bg-foreground dark:text-background dark:hover:bg-foreground/90 cursor-pointer disabled:opacity-40"
disabled={!localUrl.trim()}
>
Connect
</Button>
)}
{(probeState.step === 'probing' || probeState.step === 'saving') && (
<Loader2 className="h-4 w-4 animate-spin text-duck-teal shrink-0" />
)}
<button
type="button"
size="sm"
className="h-7 text-xs bg-duck-dark text-white hover:bg-duck-dark/90 dark:bg-foreground dark:text-background dark:hover:bg-foreground/90 cursor-pointer disabled:opacity-40"
disabled={!localUrl.trim()}
onClick={() => handleProbe()}
onClick={resetLocalForm}
className="text-duck-dark/40 hover:text-duck-dark/70 dark:text-foreground/40 dark:hover:text-foreground/70 cursor-pointer transition-colors text-xs"
>
Connect
</Button>
)}
{(probeState.step === 'probing' || probeState.step === 'saving') && (
<Loader2 className="h-4 w-4 animate-spin text-duck-teal shrink-0" />
)}
<button
type="button"
onClick={resetLocalForm}
className="text-duck-dark/40 hover:text-duck-dark/70 dark:text-foreground/40 dark:hover:text-foreground/70 cursor-pointer transition-colors text-xs"
>
Cancel
</button>
</div>
Cancel
</button>
</div>
</form>
{/* Step 2: Auth form (if needed) */}
{probeState.step === 'auth' && (
<div className="flex flex-col gap-2 rounded-md border border-duck-dark/10 dark:border-foreground/10 p-3">
<form
onSubmit={submitAuth}
className="flex flex-col gap-2 rounded-md border border-duck-dark/10 dark:border-foreground/10 p-3"
>
<span className="text-duck-dark/70 dark:text-foreground/70 font-medium">
{probeState.probe.name} requires authentication
</span>
@@ -361,17 +381,12 @@ export const AIHarnessesSection = () => {
placeholder="Password"
value={authPassword}
onChange={(ev) => setAuthPassword(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter' && authUsername && authPassword)
handleAuthSubmit(probeState.probe);
}}
/>
<Button
type="button"
type="submit"
size="sm"
className="h-7 text-xs w-fit bg-duck-dark text-white hover:bg-duck-dark/90 dark:bg-foreground dark:text-background dark:hover:bg-foreground/90 cursor-pointer disabled:opacity-40"
disabled={!authUsername || !authPassword}
onClick={() => handleAuthSubmit(probeState.probe)}
>
Authenticate
</Button>
@@ -384,23 +399,19 @@ export const AIHarnessesSection = () => {
placeholder="API Key"
value={authApiKey}
onChange={(ev) => setAuthApiKey(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter' && authApiKey) handleAuthSubmit(probeState.probe);
}}
autoFocus
/>
<Button
type="button"
type="submit"
size="sm"
className="h-7 text-xs w-fit bg-duck-dark text-white hover:bg-duck-dark/90 dark:bg-foreground dark:text-background dark:hover:bg-foreground/90 cursor-pointer disabled:opacity-40"
disabled={!authApiKey}
onClick={() => handleAuthSubmit(probeState.probe)}
>
Authenticate
</Button>
</>
)}
</div>
</form>
)}
</div>
) : (
@@ -460,7 +471,10 @@ export const AIHarnessesSection = () => {
</button>
</div>
{editingProvider === provider.key && (
<div className="flex items-center gap-2 pl-4">
<form
onSubmit={(ev) => submitApiKey(ev, provider.providerId)}
className="flex items-center gap-2 pl-4"
>
<Input
type="password"
className="h-7 text-xs flex-1"
@@ -470,15 +484,13 @@ export const AIHarnessesSection = () => {
setKeyInputs((prev) => ({ ...prev, [provider.providerId]: ev.target.value }))
}
onKeyDown={(ev) => {
if (ev.key === 'Enter' && keyInputs[provider.providerId]) saveApiKey(provider.providerId);
if (ev.key === 'Escape') setEditingProvider(null);
}}
autoFocus
/>
<button
type="button"
type="submit"
disabled={keyInputs[provider.providerId] === undefined || savingKey === provider.providerId}
onClick={() => saveApiKey(provider.providerId)}
className="shrink-0 p-1 rounded hover:bg-duck-teal/10 cursor-pointer transition-colors disabled:opacity-30 disabled:cursor-default"
title="Save key"
>
@@ -491,7 +503,7 @@ export const AIHarnessesSection = () => {
>
Cancel
</button>
</div>
</form>
)}
</div>
))}
@@ -501,7 +513,11 @@ export const AIHarnessesSection = () => {
if (!provider || connectedProviders.some((cp) => cp.providerId === provider.providerId))
return null;
return (
<div key={provider.providerId} className="flex items-center gap-2">
<form
key={provider.providerId}
onSubmit={(ev) => submitApiKey(ev, provider.providerId)}
className="flex items-center gap-2"
>
<label className="w-36 text-duck-dark/70 dark:text-foreground/70 shrink-0 truncate font-medium text-[11px]">
{provider.key}
</label>
@@ -514,15 +530,13 @@ export const AIHarnessesSection = () => {
setKeyInputs((prev) => ({ ...prev, [provider.providerId]: ev.target.value }))
}
onKeyDown={(ev) => {
if (ev.key === 'Enter' && keyInputs[provider.providerId]) saveApiKey(provider.providerId);
if (ev.key === 'Escape') setEditingProvider(null);
}}
autoFocus
/>
<button
type="button"
type="submit"
disabled={keyInputs[provider.providerId] === undefined || savingKey === provider.providerId}
onClick={() => saveApiKey(provider.providerId)}
className="shrink-0 p-1 rounded hover:bg-duck-teal/10 cursor-pointer transition-colors disabled:opacity-30 disabled:cursor-default"
title="Save key"
>
@@ -535,7 +549,7 @@ export const AIHarnessesSection = () => {
>
Cancel
</button>
</div>
</form>
);
})()}
{unconnectedProviders.length > 0 && (
src/apps/officer-web/Screens/Dashboard/Settings/ServerSettings/OCRSection.tsx
+6 -5
View File
@@ -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';
@@ -51,7 +52,8 @@ export const OCRSection = () => {
fetchModels(config.url);
}, [config]);
const handleSave = async () => {
const handleSave = async (ev?: FormEvent) => {
ev?.preventDefault();
if (isSaving) return;
setIsSaving(true);
try {
@@ -92,7 +94,7 @@ export const OCRSection = () => {
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">Vision Model Server URL</span>
<Input
@@ -143,8 +145,7 @@ export const OCRSection = () => {
<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"
>
@@ -160,6 +161,6 @@ export const OCRSection = () => {
{isTesting ? 'Testing...' : 'Test'}
</Button>
</div>
</div>
</form>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/ServerSettings/SMTPSection.tsx
+122 -122
View File
@@ -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';
@@ -84,7 +85,8 @@ export const SMTPSection = () => {
...(provider === 'resend' ? { apiKey } : { host, port: parseInt(port) || 587, username, password, secure }),
});
const handleSave = async () => {
const handleSave = async (ev?: FormEvent) => {
ev?.preventDefault();
if (isSaving) return;
setIsSaving(true);
try {
@@ -118,7 +120,8 @@ export const SMTPSection = () => {
}
};
const handleTest = async () => {
const handleTest = async (ev?: FormEvent) => {
ev?.preventDefault();
if (isTesting || !testEmail) return;
setIsTesting(true);
try {
@@ -151,150 +154,147 @@ export const SMTPSection = () => {
return (
<div className="grid gap-4">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Provider</span>
<Select value={provider} onValueChange={(v) => handleProviderChange(v as Provider)}>
<SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground">
<SelectValue />
</SelectTrigger>
<SelectContent className="z-[600]">
<SelectItem value="mailhog">MailHog (local testing)</SelectItem>
<SelectItem value="resend">Resend</SelectItem>
<SelectItem value="smtp">Custom SMTP</SelectItem>
</SelectContent>
</Select>
</Label>
{provider === 'resend' && (
<form onSubmit={handleSave} className="grid gap-4">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">API Key</span>
<Input
type="password"
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
placeholder="re_..."
value={apiKey}
onChange={(ev) => setApiKey(ev.target.value)}
/>
<span className="text-duck-dark/70 dark:text-foreground/70">Provider</span>
<Select value={provider} onValueChange={(v) => handleProviderChange(v as Provider)}>
<SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground">
<SelectValue />
</SelectTrigger>
<SelectContent className="z-[600]">
<SelectItem value="mailhog">MailHog (local testing)</SelectItem>
<SelectItem value="resend">Resend</SelectItem>
<SelectItem value="smtp">Custom SMTP</SelectItem>
</SelectContent>
</Select>
</Label>
)}
{showSmtpFields && (
<>
<div className="grid grid-cols-[1fr_auto] gap-2">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Host</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
placeholder="smtp.example.com"
value={host}
onChange={(ev) => setHost(ev.target.value)}
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Port</span>
<Input
type="number"
className="h-11 w-24 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
value={port}
onChange={(ev) => setPort(ev.target.value)}
/>
</Label>
</div>
{provider === 'smtp' && (
<>
<div className="grid grid-cols-2 gap-2">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Username</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
placeholder="user@example.com"
value={username}
onChange={(ev) => setUsername(ev.target.value)}
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Password</span>
<Input
type="password"
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
value={password}
onChange={(ev) => setPassword(ev.target.value)}
/>
</Label>
</div>
<Label className="flex items-center gap-3">
<Switch checked={secure} onCheckedChange={setSecure} />
<span className="text-duck-dark/70 dark:text-foreground/70">TLS / SSL</span>
{provider === 'resend' && (
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">API Key</span>
<Input
type="password"
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
placeholder="re_..."
value={apiKey}
onChange={(ev) => setApiKey(ev.target.value)}
/>
</Label>
)}
{showSmtpFields && (
<>
<div className="grid grid-cols-[1fr_auto] gap-2">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Host</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
placeholder="smtp.example.com"
value={host}
onChange={(ev) => setHost(ev.target.value)}
/>
</Label>
</>
)}
</>
)}
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Port</span>
<Input
type="number"
className="h-11 w-24 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
value={port}
onChange={(ev) => setPort(ev.target.value)}
/>
</Label>
</div>
{provider === 'smtp' && (
<>
<div className="grid grid-cols-2 gap-2">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Username</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
placeholder="user@example.com"
value={username}
onChange={(ev) => setUsername(ev.target.value)}
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">Password</span>
<Input
type="password"
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground"
value={password}
onChange={(ev) => setPassword(ev.target.value)}
/>
</Label>
</div>
<Label className="flex items-center gap-3">
<Switch checked={secure} onCheckedChange={setSecure} />
<span className="text-duck-dark/70 dark:text-foreground/70">TLS / SSL</span>
</Label>
</>
)}
</>
)}
<div className="grid grid-cols-2 gap-2">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">From Name</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
value={fromName}
onChange={(ev) => setFromName(ev.target.value)}
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">From Email</span>
<Input
type="email"
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
value={fromEmail}
onChange={(ev) => setFromEmail(ev.target.value)}
/>
</Label>
</div>
<div className="grid grid-cols-2 gap-2">
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">From Name</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
value={fromName}
onChange={(ev) => setFromName(ev.target.value)}
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70 dark:text-foreground/70">From Email</span>
<Input
type="email"
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
value={fromEmail}
onChange={(ev) => setFromEmail(ev.target.value)}
/>
</Label>
</div>
<div className="flex items-center gap-2">
<Button
type="button"
onClick={handleSave}
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"
>
{isSaving ? 'Saving...' : 'Save'}
</Button>
<Button
type="button"
variant="outline"
onClick={handleTestConnection}
disabled={isTestingConnection}
className="h-11 cursor-pointer disabled:opacity-50"
>
{isTestingConnection ? 'Testing...' : 'Test'}
</Button>
</div>
<div className="flex items-center gap-2">
<Button
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"
>
{isSaving ? 'Saving...' : 'Save'}
</Button>
<Button
type="button"
variant="outline"
onClick={handleTestConnection}
disabled={isTestingConnection}
className="h-11 cursor-pointer disabled:opacity-50"
>
{isTestingConnection ? 'Testing...' : 'Test'}
</Button>
</div>
</form>
<div className="border-t border-duck-dark/10 dark:border-foreground/10 pt-4 mt-1">
<span className="text-sm font-medium text-duck-dark dark:text-foreground">Send Test Email</span>
<div className="flex items-center gap-2 mt-2">
<form onSubmit={handleTest} className="flex items-center gap-2 mt-2">
<Input
type="email"
className="h-9 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40 flex-1"
placeholder="recipient@example.com"
value={testEmail}
onChange={(ev) => setTestEmail(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') handleTest();
}}
/>
<Button
type="button"
type="submit"
variant="outline"
size="sm"
onClick={handleTest}
disabled={isTesting || !testEmail}
className="h-9 cursor-pointer disabled:opacity-50"
>
{isTesting ? 'Sending...' : 'Send'}
</Button>
</div>
</form>
</div>
</div>
);
src/apps/officer-web/Screens/Dashboard/Settings/ServerSettings/STTSection.tsx
+6 -5
View File
@@ -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>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/ServerSettings/TTSSection.tsx
+6 -5
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState, useEffect, useRef } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
@@ -102,7 +103,8 @@ export const TTSSection = () => {
...(apiKey ? { apiKey } : {}),
});
const handleSave = async () => {
const handleSave = async (ev?: FormEvent) => {
ev?.preventDefault();
if (isSaving) return;
setIsSaving(true);
try {
@@ -152,7 +154,7 @@ export const TTSSection = () => {
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">Provider</span>
<Select value={provider} onValueChange={(v) => handleProviderChange(v as Provider)}>
@@ -255,8 +257,7 @@ export const TTSSection = () => {
<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"
>
@@ -272,6 +273,6 @@ export const TTSSection = () => {
{isTesting ? 'Testing...' : 'Test'}
</Button>
</div>
</div>
</form>
);
};
src/workspaces/officerdev/src/apps/AppStore/AppStoreDetail.tsx
+6 -4
View File
@@ -60,7 +60,8 @@ export const AppStoreDetail = () => {
const fields = chosen === 'existing' ? (item.existingFields ?? []) : (item.configFields ?? []);
const isInstalled = item.install.status === 'installed' || item.install.status === 'blocked';
const run = async (replace = false) => {
const run = async (ev?: React.FormEvent, replace = false) => {
ev?.preventDefault();
setLog([]);
const result = await install.mutateAsync({
id: item.id,
@@ -118,7 +119,8 @@ export const AppStoreDetail = () => {
</p>
</div>
) : (
<div className="flex flex-col gap-3">
// A real <form>, so pressing Enter in a field installs — the div it used to be silently ate it.
<form onSubmit={run} className="flex flex-col gap-3">
{item.modes.length > 1 && (
<div className="flex flex-col gap-2">
{item.modes.map((m) => (
@@ -142,11 +144,11 @@ export const AppStoreDetail = () => {
/>
))}
<Button className="self-start" disabled={install.isPending} onClick={() => run()}>
<Button type="submit" className="self-start" disabled={install.isPending}>
{install.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Install
</Button>
</div>
</form>
)}
{/* The install log. Streaming it into a terminal panel is the intended shape; until then it is
src/workspaces/officerdev/src/apps/Chat/ChatHeader.tsx
+12 -5
View File
@@ -89,24 +89,31 @@ export const ChatHeader = ({ panelId }: { panelId?: string }) => {
renaming === s.id ? (
// Inline, because the alternative is a modal over a panel header — and the only thing being
// asked for is one line of text.
<div key={s.id} className="flex items-center gap-1 px-2 py-1.5" onClick={(ev) => ev.stopPropagation()}>
<form
key={s.id}
className="flex items-center gap-1 px-2 py-1.5"
onClick={(ev) => ev.stopPropagation()}
onSubmit={(ev) => {
ev.preventDefault();
void commitRename(s.id);
}}
>
<input
autoFocus
value={draft}
onChange={(ev) => setDraft(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') void commitRename(s.id);
if (ev.key === 'Escape') setRenaming(null);
}}
className="min-w-0 flex-1 rounded border border-duck-dark/20 bg-transparent px-1.5 py-0.5 text-xs"
/>
<button onClick={() => void commitRename(s.id)} className="p-0.5 cursor-pointer" title="Save">
<button type="submit" className="p-0.5 cursor-pointer" title="Save">
<Check className="h-3.5 w-3.5" />
</button>
<button onClick={() => setRenaming(null)} className="p-0.5 cursor-pointer" title="Cancel">
<button type="button" onClick={() => setRenaming(null)} className="p-0.5 cursor-pointer" title="Cancel">
<X className="h-3.5 w-3.5" />
</button>
</div>
</form>
) : (
<DropdownMenuItem
key={s.id}
src/workspaces/officerdev/src/apps/Chat/components/BackgroundJobDialog.tsx
+13 -11
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useEffect, useState } from 'react';
import { CirclePlay } from 'lucide-react';
import { toneText } from '@/components/Data';
@@ -91,7 +92,8 @@ export const BackgroundJobDialog = ({
// the job, so it is required.
const canSubmit = watching ? condition.trim().length > 0 : body.trim().length > 0;
const submit = () => {
const submit = (ev?: FormEvent) => {
ev?.preventDefault();
if (!canSubmit) return;
const spec: BackgroundJobSpec = {
mode,
@@ -123,7 +125,7 @@ export const BackgroundJobDialog = ({
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<form onSubmit={submit} className="space-y-4">
<div className="space-y-2">
<label className="flex items-center gap-2 text-sm">
<input
@@ -202,16 +204,16 @@ export const BackgroundJobDialog = ({
{timed ? 'Exits when the time is up, whether or not it fired.' : 'Runs until you stop it.'}
</p>
</div>
</div>
<DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button onClick={submit} disabled={!canSubmit}>
Start
</Button>
</DialogFooter>
<DialogFooter>
<Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!canSubmit}>
Start
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
src/workspaces/officerdev/src/apps/Chat/components/QuestionActivity.tsx
+10 -12
View File
@@ -163,31 +163,29 @@ export const QuestionActivity = ({ message, onAnswer }: QuestionActivityProps) =
{/* "Other" — provided by the client on purpose. Both schemas say the model must NOT offer one
as an option, precisely because the escape hatch is the UI's job. */}
{!done && (
<div className="flex gap-2">
<form
className="flex gap-2"
onSubmit={(ev) => {
ev.preventDefault();
const text = (otherText[qi] ?? '').trim();
if (text) record(qi, text);
}}
>
<input
type="text"
value={otherText[qi] ?? ''}
onChange={(ev) => setOtherText((prev) => ({ ...prev, [qi]: ev.target.value }))}
onKeyDown={(ev) => {
if (ev.key !== 'Enter') return;
ev.preventDefault();
const text = (otherText[qi] ?? '').trim();
if (text) record(qi, text);
}}
placeholder="Other..."
className="flex-1 px-3 py-1.5 rounded-lg border border-border text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-duck-teal/40"
/>
<button
onClick={() => {
const text = (otherText[qi] ?? '').trim();
if (text) record(qi, text);
}}
type="submit"
disabled={!(otherText[qi] ?? '').trim()}
className="px-3 py-1.5 rounded-lg bg-duck-teal text-white text-sm font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-duck-teal/90 transition-colors cursor-pointer"
>
Send
</button>
</div>
</form>
)}
{multi && !done && (
src/workspaces/officerdev/src/apps/Chat/components/WebpageDialog.tsx
+6 -10
View File
@@ -1,3 +1,4 @@
import type { FormEvent } from 'react';
import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
@@ -11,7 +12,8 @@ type WebpageDialogProps = {
export function WebpageDialog({ open, onOpenChange, onSubmit }: WebpageDialogProps) {
const [urlInput, setUrlInput] = useState('');
const handleSubmit = () => {
const handleSubmit = (ev?: FormEvent) => {
ev?.preventDefault();
const url = urlInput.trim();
if (!url) return;
onSubmit(url);
@@ -26,29 +28,23 @@ export function WebpageDialog({ open, onOpenChange, onSubmit }: WebpageDialogPro
<DialogTitle>Attach Webpage</DialogTitle>
<DialogDescription>Enter a URL to scrape and attach as context.</DialogDescription>
</DialogHeader>
<div className="flex gap-2">
<form onSubmit={handleSubmit} className="flex gap-2">
<input
type="url"
value={urlInput}
onChange={(ev) => setUrlInput(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') {
ev.preventDefault();
handleSubmit();
}
}}
placeholder="https://example.com"
className="flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
autoFocus
/>
<Button
onClick={handleSubmit}
type="submit"
disabled={!urlInput.trim()}
className="bg-duck-teal hover:bg-duck-teal/90 cursor-pointer disabled:opacity-40"
>
Attach
</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx
+5 -5
View File
@@ -40,7 +40,8 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
const goto = (idx: number) => setPath(idx < 0 ? '/' : `/${segments.slice(0, idx + 1).join('/')}`);
const enter = (name: string) => setPath(path === '/' ? `/${name}` : `${path}/${name}`);
const createFolder = async () => {
const createFolder = async (ev?: React.FormEvent) => {
ev?.preventDefault();
const n = newName.trim();
if (!n) return;
await api.createDir(path === '/' ? `/${n}` : `${path}/${n}`);
@@ -104,25 +105,24 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
{/* Footer */}
<div className="flex flex-col gap-2 border-t border-border px-4 py-3">
{creating ? (
<div className="flex items-center gap-1">
<form onSubmit={createFolder} className="flex items-center gap-1">
<input
autoFocus
value={newName}
onChange={(ev) => setNewName(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') createFolder();
if (ev.key === 'Escape') setCreating(false);
}}
placeholder="New folder name"
className="min-w-0 flex-1 rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
/>
<button
onClick={createFolder}
type="submit"
className="rounded px-2 py-1 text-xs text-duck-teal hover:bg-duck-teal/10 cursor-pointer"
>
Create
</button>
</div>
</form>
) : (
<div className="flex items-center justify-between gap-2">
<button
src/workspaces/officerdev/src/apps/ChatHistory/SessionRow.tsx
+10 -4
View File
@@ -183,13 +183,18 @@ export const SessionRow = ({
if (isEditing) {
return (
<div className="flex min-w-0 items-center gap-2 px-4 py-3">
<form
onSubmit={(ev) => {
ev.preventDefault();
void actions.commitRename();
}}
className="flex min-w-0 items-center gap-2 px-4 py-3"
>
<input
autoFocus
value={actions.editValue}
onChange={(ev) => actions.setEditValue(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') void actions.commitRename();
if (ev.key === 'Escape') actions.setEditingId(null);
}}
onBlur={() => void actions.commitRename()}
@@ -197,8 +202,8 @@ export const SessionRow = ({
className="min-w-0 flex-1 border-b border-primary/40 bg-transparent text-sm outline-none"
/>
<button
type="submit"
onMouseDown={(ev) => ev.preventDefault()}
onClick={() => void actions.commitRename()}
className="cursor-pointer p-1 text-success hover:opacity-80"
title="Save"
aria-label="Save title"
@@ -206,6 +211,7 @@ export const SessionRow = ({
<Check className="h-3.5 w-3.5" />
</button>
<button
type="button"
onMouseDown={(ev) => ev.preventDefault()}
onClick={() => actions.setEditingId(null)}
className="cursor-pointer p-1 opacity-50 hover:opacity-100"
@@ -214,7 +220,7 @@ export const SessionRow = ({
>
<X className="h-3.5 w-3.5" />
</button>
</div>
</form>
);
}
src/workspaces/officerdev/src/apps/CommandHQ/CommandHqCategories.tsx
+19 -16
View File
@@ -38,7 +38,8 @@ export const CommandHqCategories = () => {
const [adding, setAdding] = useState(false);
const [name, setName] = useState('');
const submitNew = async () => {
const submitNew = async (ev?: React.FormEvent) => {
ev?.preventDefault();
const trimmed = name.trim();
if (!trimmed) {
setAdding(false);
@@ -92,21 +93,23 @@ export const CommandHqCategories = () => {
/>
))}
{adding && (
<input
autoFocus
value={name}
onChange={(ev) => setName(ev.target.value)}
onBlur={submitNew}
onKeyDown={(ev) => {
if (ev.key === 'Enter') submitNew();
if (ev.key === 'Escape') {
setName('');
setAdding(false);
}
}}
placeholder="Category name"
className="mx-1 rounded-lg border border-border bg-background px-2 py-1.5 text-sm outline-none focus:border-primary"
/>
// No submit button — a form with exactly one text field still submits on Enter.
<form onSubmit={submitNew}>
<input
autoFocus
value={name}
onChange={(ev) => setName(ev.target.value)}
onBlur={() => void submitNew()}
onKeyDown={(ev) => {
if (ev.key === 'Escape') {
setName('');
setAdding(false);
}
}}
placeholder="Category name"
className="mx-1 rounded-lg border border-border bg-background px-2 py-1.5 text-sm outline-none focus:border-primary"
/>
</form>
)}
{!adding && categories.length === 0 && (
<div className="px-3 py-1 text-xs text-muted-foreground">No categories yet</div>
src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/FileItem.tsx
+23 -14
View File
@@ -503,22 +503,31 @@ const InlineRenameInput = ({
};
return (
<input
ref={inputRef}
value={value}
onChange={(ev) => setValue(ev.target.value)}
onBlur={() => {
// Ignore blur before the input is ready (context menu closing steals focus)
if (!ready.current) return;
// A real <form> so Enter commits the rename — this was a bare input relying on a manual keydown
// check. `contents` keeps the extra element invisible to the surrounding flex/grid layout.
<form
onSubmit={(ev) => {
ev.preventDefault();
commit();
}}
onKeyDown={(ev) => {
if (ev.key === 'Enter') commit();
if (ev.key === 'Escape') onCancel();
}}
onClick={(ev) => ev.stopPropagation()}
className="text-sm font-medium text-duck-dark bg-background border border-duck-teal/50 rounded px-1 py-0.5 outline-none max-w-full text-left"
/>
className="contents"
>
<input
ref={inputRef}
value={value}
onChange={(ev) => setValue(ev.target.value)}
onBlur={() => {
// Ignore blur before the input is ready (context menu closing steals focus)
if (!ready.current) return;
commit();
}}
onKeyDown={(ev) => {
if (ev.key === 'Escape') onCancel();
}}
onClick={(ev) => ev.stopPropagation()}
className="text-sm font-medium text-duck-dark bg-background border border-duck-teal/50 rounded px-1 py-0.5 outline-none max-w-full text-left"
/>
</form>
);
};
src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/NewEntryDialog.tsx
+35 -35
View File
@@ -104,7 +104,8 @@ export const NewEntryDialog = ({ kind, onClose, onSubmit, existingNames }: NewEn
const problem = kind === 'clone' ? urlProblem(name) : nameProblem(name, existingNames);
const canSubmit = name.trim().length > 0 && problem === null;
const commit = () => {
const commit = (ev?: React.FormEvent) => {
ev?.preventDefault();
if (!canSubmit) return;
onSubmit(name.trim());
onClose();
@@ -113,42 +114,41 @@ export const NewEntryDialog = ({ kind, onClose, onSubmit, existingNames }: NewEn
return (
<Dialog open onOpenChange={(open) => !open && onClose()}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Icon className="h-4 w-4" />
{title}
</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
{/* A real <form> so Enter submits — this was a div with a manual keydown check for Enter, the
button was the only way in. `grid gap-4` replaces DialogContent's own gap now that the form
is the single child spanning header/fields/footer. */}
<form onSubmit={commit} className="grid gap-4">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Icon className="h-4 w-4" />
{title}
</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<div className="space-y-2">
<Label htmlFor="new-entry-name">{label}</Label>
<Input
id="new-entry-name"
autoFocus
value={name}
placeholder={placeholder}
onChange={(ev) => setName(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') {
ev.preventDefault();
commit();
}
}}
/>
{/* Reserves its own line whether or not there is a problem, so the dialog does not jump as you
type past a colliding name. */}
<p className="min-h-[1.25rem] text-xs text-destructive">{problem ?? ''}</p>
</div>
<div className="space-y-2">
<Label htmlFor="new-entry-name">{label}</Label>
<Input
id="new-entry-name"
autoFocus
value={name}
placeholder={placeholder}
onChange={(ev) => setName(ev.target.value)}
/>
{/* Reserves its own line whether or not there is a problem, so the dialog does not jump as you
type past a colliding name. */}
<p className="min-h-[1.25rem] text-xs text-destructive">{problem ?? ''}</p>
</div>
<DialogFooter>
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>
<Button onClick={commit} disabled={!canSubmit}>
{submit}
</Button>
</DialogFooter>
<DialogFooter>
<Button type="button" variant="ghost" onClick={onClose}>
Cancel
</Button>
<Button type="submit" disabled={!canSubmit}>
{submit}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/TaskRunnerModal.tsx
+37 -23
View File
@@ -157,7 +157,8 @@ const AgenticTaskRunner = ({
wasGenerating.current = chat.isGenerating;
}, [chat.isGenerating]);
const handleRun = () => {
const handleRun = (ev?: React.FormEvent) => {
ev?.preventDefault();
// Build prompt from task body + input values, or fall back to generic prompt
let prompt = defaultInput;
if (taskBody && inputDefs) {
@@ -182,24 +183,29 @@ const AgenticTaskRunner = ({
if (phase === 'ready') {
return (
<>
{hasConfigurableInputs && (
<TaskInputForm
inputDefs={inputDefs}
values={formValues}
onChange={handleInputChange}
autoFilledKeys={new Set()}
/>
)}
<div className="flex-1 flex items-center justify-center">
<button
onClick={handleRun}
disabled={!chat.isConnected || !inputDefs}
className="flex items-center gap-2 px-6 py-2.5 rounded-lg bg-duck-teal text-white font-medium text-sm hover:bg-duck-teal/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
>
<Play className="h-4 w-4" />
Run
</button>
</div>
{/* A real <form> so Enter runs the task — this was a div with no submit path. `contents` keeps
the wrapper invisible to the flex layout; the ModelSelector stays a sibling, outside the
form, since it renders its own untyped buttons that must not become submit buttons. */}
<form onSubmit={handleRun} className="contents">
{hasConfigurableInputs && (
<TaskInputForm
inputDefs={inputDefs}
values={formValues}
onChange={handleInputChange}
autoFilledKeys={new Set()}
/>
)}
<div className="flex-1 flex items-center justify-center">
<button
type="submit"
disabled={!chat.isConnected || !inputDefs}
className="flex items-center gap-2 px-6 py-2.5 rounded-lg bg-duck-teal text-white font-medium text-sm hover:bg-duck-teal/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
>
<Play className="h-4 w-4" />
Run
</button>
</div>
</form>
<div className="shrink-0 px-4 py-3 border-t border-duck-dark/10">
<ModelSelector
messages={[]}
@@ -451,13 +457,17 @@ export const TaskInputForm = ({
</span>
</div>
<div className="flex items-center gap-1 shrink-0 bg-duck-dark/5 dark:bg-foreground/5 rounded-lg p-0.5">
{/* type="button": this form's toggles must never submit it, since they now live inside a
real <form> (Agentic/Pipeline ready phases). */}
<button
type="button"
onClick={() => onChange(key, 'false')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors cursor-pointer ${!isTrue ? 'bg-background shadow-sm text-duck-dark dark:text-foreground' : 'text-duck-dark/50 dark:text-foreground/50 hover:text-duck-dark dark:hover:text-foreground'}`}
>
No
</button>
<button
type="button"
onClick={() => onChange(key, 'true')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors cursor-pointer ${isTrue ? 'bg-background shadow-sm text-duck-dark dark:text-foreground' : 'text-duck-dark/50 dark:text-foreground/50 hover:text-duck-dark dark:hover:text-foreground'}`}
>
@@ -493,6 +503,7 @@ export const TaskInputForm = ({
{def.options.map((opt) => (
<button
key={opt}
type="button"
onClick={() => onChange(key, opt)}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors cursor-pointer ${selected === opt ? 'bg-duck-teal text-white' : 'bg-duck-dark/5 dark:bg-foreground/5 text-duck-dark/60 dark:text-foreground/60 hover:text-duck-dark dark:hover:text-foreground hover:bg-duck-dark/10 dark:hover:bg-foreground/10'}`}
>
@@ -1404,7 +1415,8 @@ const PipelineRunner = ({ taskDirName, context, cwd, onClose }: PipelineRunnerPr
prevPhaseRef.current = pipeline.phase;
}, [pipeline.phase]);
const handleRun = () => {
const handleRun = (ev?: React.FormEvent) => {
ev?.preventDefault();
const allInputs = { ...formValues };
if (hasConcurrentSteps && parseInt(concurrency, 10) > 1) {
allInputs._concurrency = concurrency;
@@ -1416,7 +1428,8 @@ const PipelineRunner = ({ taskDirName, context, cwd, onClose }: PipelineRunnerPr
if (pipeline.phase === 'ready') {
return (
<div className="flex-1 flex flex-col">
// A real <form> so Enter runs the pipeline — this was a div with no submit path.
<form onSubmit={handleRun} className="flex-1 flex flex-col">
{hasConfigurableInputs && (
<TaskInputForm
inputDefs={inputDefs}
@@ -1462,6 +1475,7 @@ const PipelineRunner = ({ taskDirName, context, cwd, onClose }: PipelineRunnerPr
{pipelineSteps.map((step, i) => (
<button
key={i}
type="button"
onClick={() => setStartAt(i)}
className={`text-left text-xs px-2.5 py-1.5 rounded-md transition-colors cursor-pointer flex items-center gap-2 ${
i < startAt
@@ -1482,7 +1496,7 @@ const PipelineRunner = ({ taskDirName, context, cwd, onClose }: PipelineRunnerPr
)}
<div className="flex-1 flex items-center justify-center">
<button
onClick={handleRun}
type="submit"
disabled={!pipeline.isConnected || !inputDefs}
className="flex items-center gap-2 px-6 py-2.5 rounded-lg bg-duck-teal text-white font-medium text-sm hover:bg-duck-teal/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
>
@@ -1490,7 +1504,7 @@ const PipelineRunner = ({ taskDirName, context, cwd, onClose }: PipelineRunnerPr
{startAt > 0 ? `Run from step ${startAt + 1}` : 'Run Pipeline'}
</button>
</div>
</div>
</form>
);
}
src/workspaces/officerdev/src/apps/Preview/PreviewHeader.tsx
+11 -6
View File
@@ -26,7 +26,8 @@ export const PreviewHeader = ({ panelId }: { panelId?: string }) => {
if (!editing) setDraft(display);
}, [display, editing]);
const commit = () => {
const commit = (ev?: React.FormEvent) => {
ev?.preventDefault();
const next = normalizeUrl(draft);
if (next) setUrl(next);
setEditing(false);
@@ -34,25 +35,29 @@ export const PreviewHeader = ({ panelId }: { panelId?: string }) => {
if (editing) {
return (
<>
<form onSubmit={commit} className="contents">
<Globe className="h-3.5 w-3.5 shrink-0 text-duck-teal" />
<input
autoFocus
value={draft}
onChange={(ev) => setDraft(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') commit();
if (ev.key === 'Escape') setEditing(false);
}}
className="min-w-0 flex-1 rounded border border-duck-dark/20 bg-transparent px-1.5 py-0.5 text-xs"
/>
<button onClick={commit} title="Save" className="p-0.5 cursor-pointer shrink-0">
<button type="submit" title="Save" className="p-0.5 cursor-pointer shrink-0">
<Check className="h-3 w-3" />
</button>
<button onClick={() => setEditing(false)} title="Cancel" className="p-0.5 cursor-pointer shrink-0">
<button
type="button"
onClick={() => setEditing(false)}
title="Cancel"
className="p-0.5 cursor-pointer shrink-0"
>
<X className="h-3 w-3" />
</button>
</>
</form>
);
}
src/workspaces/widgets/DailyGoals/index.tsx
+16 -13
View File
@@ -85,7 +85,8 @@ export const DailyGoals = () => {
const [newGoal, setNewGoal] = useState('');
const inputRef = useRef<HTMLInputElement>(null);
const addGoal = () => {
const addGoal = (ev?: React.FormEvent) => {
ev?.preventDefault();
const text = newGoal.trim();
if (!text) return;
nextGoalId++;
@@ -131,13 +132,22 @@ export const DailyGoals = () => {
<button
type="button"
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border cursor-pointer transition-colors ${
goal.done ? 'border-primary bg-primary text-primary-foreground' : 'border-border hover:border-primary'
goal.done
? 'border-primary bg-primary text-primary-foreground'
: 'border-border hover:border-primary'
}`}
onClick={() => toggleGoal(goal.id)}
>
{goal.done && (
<svg width="10" height="10" viewBox="0 0 10 10">
<path d="M2 5l2.5 2.5L8 3" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M2 5l2.5 2.5L8 3"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)}
</button>
@@ -162,29 +172,22 @@ export const DailyGoals = () => {
</div>
)}
<div className="flex items-center gap-1">
<form onSubmit={addGoal} className="flex items-center gap-1">
<input
ref={inputRef}
type="text"
placeholder="Add a goal..."
value={newGoal}
onChange={(ev) => setNewGoal(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') {
ev.preventDefault();
addGoal();
}
}}
className="flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
/>
<button
type="button"
type="submit"
className="flex h-6 w-6 items-center justify-center rounded-md border border-border hover:bg-accent transition-colors cursor-pointer"
onClick={addGoal}
>
<Plus size={12} />
</button>
</div>
</form>
</div>
</Widget>
);
src/workspaces/widgets/Pomodoro/index.tsx
+51 -17
View File
@@ -79,14 +79,14 @@ function usePomodoroState() {
type Phase = 'focus' | 'break' | 'long-break';
const phaseLabel: Record<Phase, string> = {
'focus': 'Focus',
'break': 'Break',
focus: 'Focus',
break: 'Break',
'long-break': 'Long Break',
};
const phaseColor: Record<Phase, string> = {
'focus': 'text-destructive',
'break': 'text-success',
focus: 'text-destructive',
break: 'text-success',
'long-break': 'text-accent',
};
@@ -116,7 +116,8 @@ const SoundPicker = ({ label, value, onChange }: SoundPickerProps) => {
const audioRef = useRef<HTMLAudioElement | null>(null);
const filtered = useMemo(() => {
const source = activeCategory === 'all' ? allSounds : (categories.find((c) => c.id === activeCategory)?.sounds ?? []);
const source =
activeCategory === 'all' ? allSounds : (categories.find((c) => c.id === activeCategory)?.sounds ?? []);
if (!search) return source;
const q = search.toLowerCase();
return source.filter((s) => s.name.toLowerCase().includes(q));
@@ -165,7 +166,10 @@ const SoundPicker = ({ label, value, onChange }: SoundPickerProps) => {
<button
type="button"
className="text-[10px] text-muted-foreground hover:text-foreground cursor-pointer"
onClick={() => { stopPreview(); setOpen(false); }}
onClick={() => {
stopPreview();
setOpen(false);
}}
>
Done
</button>
@@ -175,6 +179,11 @@ const SoundPicker = ({ label, value, onChange }: SoundPickerProps) => {
placeholder="Search sounds..."
value={search}
onChange={(ev) => setSearch(ev.target.value)}
// This is a filter, not a submit — but it now lives inside SettingsPanel's <form>, so without
// this it would submit the settings on Enter instead of just narrowing the list.
onKeyDown={(ev) => {
if (ev.key === 'Enter') ev.preventDefault();
}}
className="w-full rounded border border-border bg-background px-2 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
/>
<div className="flex flex-wrap gap-1">
@@ -199,23 +208,31 @@ const SoundPicker = ({ label, value, onChange }: SoundPickerProps) => {
className={`flex items-center gap-1.5 rounded px-2 py-1 text-left text-xs cursor-pointer transition-colors ${
value === null ? 'bg-primary/10 text-primary' : 'hover:bg-accent'
}`}
onClick={() => { stopPreview(); onChange(null); }}
onClick={() => {
stopPreview();
onChange(null);
}}
>
None (silent)
</button>
{filtered.map((s) => (
<div key={s.name} className={`flex items-center gap-1 rounded px-2 py-1 text-xs ${value === s.name ? 'bg-primary/10 text-primary' : ''}`}>
<div
key={s.name}
className={`flex items-center gap-1 rounded px-2 py-1 text-xs ${value === s.name ? 'bg-primary/10 text-primary' : ''}`}
>
<button
type="button"
className="shrink-0 cursor-pointer text-muted-foreground hover:text-foreground"
onClick={() => previewName === s.name ? stopPreview() : preview(s)}
onClick={() => (previewName === s.name ? stopPreview() : preview(s))}
>
{previewName === s.name ? <Square size={10} /> : <Play size={10} />}
</button>
<button
type="button"
className="flex-1 text-left cursor-pointer hover:text-foreground transition-colors truncate"
onClick={() => { onChange(s.name); }}
onClick={() => {
onChange(s.name);
}}
>
{formatSoundName(s.name)}
</button>
@@ -229,15 +246,23 @@ const SoundPicker = ({ label, value, onChange }: SoundPickerProps) => {
const SettingsPanel = ({ settings, onSave }: { settings: PomodoroSettings; onSave: (s: PomodoroSettings) => void }) => {
const [draft, setDraft] = useState(settings);
const numericFields: { key: 'focusMinutes' | 'breakMinutes' | 'longBreakMinutes' | 'sessionsBeforeLong'; label: string }[] = [
const numericFields: {
key: 'focusMinutes' | 'breakMinutes' | 'longBreakMinutes' | 'sessionsBeforeLong';
label: string;
}[] = [
{ key: 'focusMinutes', label: 'Focus (min)' },
{ key: 'breakMinutes', label: 'Break (min)' },
{ key: 'longBreakMinutes', label: 'Long break (min)' },
{ key: 'sessionsBeforeLong', label: 'Sessions before long' },
];
const save = (ev: React.FormEvent) => {
ev.preventDefault();
onSave(draft);
};
return (
<div className="flex flex-col gap-2 px-4 pb-4">
<form onSubmit={save} className="flex flex-col gap-2 px-4 pb-4">
{numericFields.map(({ key, label }) => (
<div key={key} className="flex items-center justify-between gap-2">
<span className="text-xs text-muted-foreground">{label}</span>
@@ -262,14 +287,13 @@ const SettingsPanel = ({ settings, onSave }: { settings: PomodoroSettings; onSav
onChange={(name) => setDraft((d) => ({ ...d, breakEndSound: name }))}
/>
<button
type="button"
type="submit"
className="mt-1 flex items-center justify-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
onClick={() => onSave(draft)}
>
<Check size={12} />
Save
</button>
</div>
</form>
);
};
@@ -363,7 +387,15 @@ export const Pomodoro = () => {
<div className="flex flex-col items-center gap-3 px-4 pb-4">
<div className="relative flex items-center justify-center">
<svg width="100" height="100" className="-rotate-90">
<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="4" className="text-muted/30" />
<circle
cx="50"
cy="50"
r="40"
fill="none"
stroke="currentColor"
strokeWidth="4"
className="text-muted/30"
/>
<circle
cx="50"
cy="50"
@@ -407,7 +439,9 @@ export const Pomodoro = () => {
</div>
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
<span>{completedToday} session{completedToday !== 1 ? 's' : ''} today</span>
<span>
{completedToday} session{completedToday !== 1 ? 's' : ''} today
</span>
</div>
</div>
</Widget>