plugins/transmission
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

real forms across the plugin, so enter submits instead of doing nothing

Browse Source 
connection settings, add/move/rename/options dialogs and daemon settings all
put their fields in a div, so the button was the only way to submit and enter
silently did nothing — a keyboard trap wearing a layout. wrapped each in a
<form onSubmit>, made every non-submit button in those forms type="button"
(test port, update blocklist, discard, cancel, remove-file, known-dir
shortcuts), and dropped RenameDialog's manual onKeyDown enter check now that
the form handles it natively. the toolbar's filter box is left alone — it has
no submit action.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-19 10:52:36 +00:00
co-authored by Claude Opus 5
parent b26aefd085
commit 17edfa9403
6 changed files with 76 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/ConnectionView.tsx
+7 -5
View File
@@ -1,4 +1,5 @@
import type { ServiceConnection } from 'officerdev'; import type { ServiceConnection } from 'officerdev';
import type { FormEvent } from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { CheckCircle2, Loader2, Plug, Trash2, TriangleAlert } from 'lucide-react'; import { CheckCircle2, Loader2, Plug, Trash2, TriangleAlert } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -89,7 +90,8 @@ export const ConnectionView = () => {
setShowAdvanced(!!connection?.username); setShowAdvanced(!!connection?.username);
}, [connection?.id]); }, [connection?.id]);
const submit = async () => { const submit = async (ev?: FormEvent) => {
ev?.preventDefault();
setError(''); setError('');
try { try {
await save.mutateAsync({ url: url.trim(), username: username.trim(), password, rpcPath: rpcPath.trim() }); await save.mutateAsync({ url: url.trim(), username: username.trim(), password, rpcPath: rpcPath.trim() });
@@ -135,7 +137,7 @@ export const ConnectionView = () => {
{connection && <StatusRow connection={connection} health={health} />} {connection && <StatusRow connection={connection} health={health} />}
<div className="flex flex-col gap-4 rounded-xl border p-4"> <form onSubmit={submit} className="flex flex-col gap-4 rounded-xl border p-4">
<Field <Field
label="Server URL" label="Server URL"
hint={URL_HINT} hint={URL_HINT}
@@ -181,18 +183,18 @@ export const ConnectionView = () => {
)} )}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button size="sm" onClick={submit} disabled={!url.trim() || save.isPending}> <Button type="submit" size="sm" disabled={!url.trim() || save.isPending}>
{save.isPending && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />} {save.isPending && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
{connection ? 'Save' : 'Connect'} {connection ? 'Save' : 'Connect'}
</Button> </Button>
{connection && ( {connection && (
<Button size="sm" variant="ghost" onClick={remove} disabled={forget.isPending}> <Button type="button" size="sm" variant="ghost" onClick={remove} disabled={forget.isPending}>
<Trash2 className="mr-2 h-3.5 w-3.5" /> <Trash2 className="mr-2 h-3.5 w-3.5" />
Disconnect Disconnect
</Button> </Button>
)} )}
</div> </div>
</div> </form>
</div> </div>
</div> </div>
); );
web/SettingsView.tsx
+15 -7
View File
@@ -1,4 +1,4 @@
import type { ReactNode } from 'react'; import type { FormEvent, ReactNode } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { Loader2, Plug, ShieldCheck } from 'lucide-react'; import { Loader2, Plug, ShieldCheck } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -45,7 +45,8 @@ export const SettingsView = () => {
const dirty = Object.keys(draft).length > 0; const dirty = Object.keys(draft).length > 0;
const apply = async () => { const apply = async (ev?: FormEvent) => {
ev?.preventDefault();
await save.mutateAsync(draft); await save.mutateAsync(draft);
setDraft({}); setDraft({});
}; };
@@ -80,7 +81,7 @@ export const SettingsView = () => {
); );
return ( return (
<div className="flex h-full min-h-0 flex-col"> <form onSubmit={apply} className="flex h-full min-h-0 flex-col">
<Tabs defaultValue="download" className="flex min-h-0 flex-1 flex-col"> <Tabs defaultValue="download" className="flex min-h-0 flex-1 flex-col">
<TabsList className="mx-4 mt-3 w-fit shrink-0"> <TabsList className="mx-4 mt-3 w-fit shrink-0">
<TabsTrigger value="download">Downloads</TabsTrigger> <TabsTrigger value="download">Downloads</TabsTrigger>
@@ -167,7 +168,13 @@ export const SettingsView = () => {
{bool('peer-port-random-on-start', 'Pick a random port on each start')} {bool('peer-port-random-on-start', 'Pick a random port on each start')}
{bool('port-forwarding-enabled', 'Ask the router to forward it (UPnP / NAT-PMP)')} {bool('port-forwarding-enabled', 'Ask the router to forward it (UPnP / NAT-PMP)')}
<div> <div>
<Button size="sm" variant="outline" onClick={() => portTest.mutate()} disabled={portTest.isPending}> <Button
type="button"
size="sm"
variant="outline"
onClick={() => portTest.mutate()}
disabled={portTest.isPending}
>
{portTest.isPending ? ( {portTest.isPending ? (
<Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
) : ( ) : (
@@ -207,6 +214,7 @@ export const SettingsView = () => {
{text('blocklist-url', 'Blocklist URL')} {text('blocklist-url', 'Blocklist URL')}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button <Button
type="button"
size="sm" size="sm"
variant="outline" variant="outline"
onClick={() => updateBlocklist.mutate()} onClick={() => updateBlocklist.mutate()}
@@ -284,16 +292,16 @@ export const SettingsView = () => {
<span className="flex-1 text-xs text-muted-foreground"> <span className="flex-1 text-xs text-muted-foreground">
{Object.keys(draft).length} unsaved change{Object.keys(draft).length === 1 ? '' : 's'} {Object.keys(draft).length} unsaved change{Object.keys(draft).length === 1 ? '' : 's'}
</span> </span>
<Button size="sm" variant="ghost" onClick={() => setDraft({})}> <Button type="button" size="sm" variant="ghost" onClick={() => setDraft({})}>
Discard Discard
</Button> </Button>
<Button size="sm" onClick={apply} disabled={save.isPending}> <Button type="submit" size="sm" disabled={save.isPending}>
{save.isPending && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />} {save.isPending && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />}
Save Save
</Button> </Button>
</div> </div>
)} )}
</div> </form>
); );
}; };
web/dialogs/AddTorrentDialog.tsx
+14 -13
View File
@@ -1,4 +1,4 @@
import type { ChangeEvent, DragEvent } from 'react'; import type { ChangeEvent, DragEvent, FormEvent } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { FileUp, Loader2, X } from 'lucide-react'; import { FileUp, Loader2, X } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
@@ -98,7 +98,8 @@ export const AddTorrentDialog = ({ open, onOpenChange }: AddTorrentDialogProps)
const canSubmit = (files.length > 0 || urlList.length > 0) && !busy; const canSubmit = (files.length > 0 || urlList.length > 0) && !busy;
const submit = async () => { const submit = async (ev?: FormEvent) => {
ev?.preventDefault();
const common = { const common = {
downloadDir: downloadDir.trim() || undefined, downloadDir: downloadDir.trim() || undefined,
labels: labels labels: labels
@@ -148,7 +149,7 @@ export const AddTorrentDialog = ({ open, onOpenChange }: AddTorrentDialogProps)
<DialogDescription>Paste magnet links or drop .torrent files.</DialogDescription> <DialogDescription>Paste magnet links or drop .torrent files.</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <form onSubmit={submit} className="space-y-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label htmlFor="tr-add-urls">Magnet links or URLs</Label> <Label htmlFor="tr-add-urls">Magnet links or URLs</Label>
<Textarea <Textarea
@@ -245,17 +246,17 @@ export const AddTorrentDialog = ({ open, onOpenChange }: AddTorrentDialogProps)
Sequential download Sequential download
</label> </label>
</div> </div>
</div>
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={close} disabled={busy}> <Button type="button" variant="ghost" onClick={close} disabled={busy}>
Cancel Cancel
</Button> </Button>
<Button onClick={submit} disabled={!canSubmit}> <Button type="submit" disabled={!canSubmit}>
{busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} {busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Add {files.length + urlList.length || ''} Add {files.length + urlList.length || ''}
</Button> </Button>
</DialogFooter> </DialogFooter>
</form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
web/dialogs/MoveTorrentDialog.tsx
+13 -11
View File
@@ -1,4 +1,5 @@
import type { Torrent } from '../shared'; import type { Torrent } from '../shared';
import type { FormEvent } from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
@@ -41,7 +42,8 @@ export const MoveTorrentDialog = ({ open, onOpenChange, targets, knownDirs }: Mo
setMove(true); setMove(true);
}, [open, targets]); }, [open, targets]);
const submit = async () => { const submit = async (ev?: FormEvent) => {
ev?.preventDefault();
await setLocation.mutateAsync({ ids: targets.map((t) => t.id), location: location.trim(), move }); await setLocation.mutateAsync({ ids: targets.map((t) => t.id), location: location.trim(), move });
onOpenChange(false); onOpenChange(false);
}; };
@@ -56,7 +58,7 @@ export const MoveTorrentDialog = ({ open, onOpenChange, targets, knownDirs }: Mo
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <form onSubmit={submit} className="space-y-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label htmlFor="tr-move-path">Destination</Label> <Label htmlFor="tr-move-path">Destination</Label>
<Input <Input
@@ -111,16 +113,16 @@ export const MoveTorrentDialog = ({ open, onOpenChange, targets, knownDirs }: Mo
</span> </span>
</label> </label>
</div> </div>
</div>
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)}> <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
Cancel Cancel
</Button> </Button>
<Button onClick={submit} disabled={!location.trim() || setLocation.isPending}> <Button type="submit" disabled={!location.trim() || setLocation.isPending}>
Apply Apply
</Button> </Button>
</DialogFooter> </DialogFooter>
</form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
web/dialogs/RenameDialog.tsx
+14 -18
View File
@@ -1,4 +1,5 @@
import type { Torrent } from '../shared'; import type { Torrent } from '../shared';
import type { FormEvent } from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
@@ -38,7 +39,8 @@ export const RenameDialog = ({ open, onOpenChange, torrent, path }: RenameDialog
if (open) setName(current); if (open) setName(current);
}, [open, current]); }, [open, current]);
const submit = async () => { const submit = async (ev?: FormEvent) => {
ev?.preventDefault();
if (!torrent) return; if (!torrent) return;
await rename.mutateAsync({ id: torrent.id, path, name: name.trim() }); await rename.mutateAsync({ id: torrent.id, path, name: name.trim() });
onOpenChange(false); onOpenChange(false);
@@ -52,28 +54,22 @@ export const RenameDialog = ({ open, onOpenChange, torrent, path }: RenameDialog
<DialogDescription className="break-all">{parent ? `${parent}/` : path}</DialogDescription> <DialogDescription className="break-all">{parent ? `${parent}/` : path}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-1.5"> <form onSubmit={submit} className="space-y-1.5">
<Label htmlFor="tr-rename">New name</Label> <Label htmlFor="tr-rename">New name</Label>
<Input <Input id="tr-rename" value={name} onChange={(ev) => setName(ev.target.value)} autoFocus />
id="tr-rename"
value={name}
onChange={(ev) => setName(ev.target.value)}
onKeyDown={(ev) => ev.key === 'Enter' && name.trim() && void submit()}
autoFocus
/>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
This renames the file or folder on disk, not just the display name. This renames the file or folder on disk, not just the display name.
</p> </p>
</div>
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)}> <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
Cancel Cancel
</Button> </Button>
<Button onClick={submit} disabled={!name.trim() || name.trim() === current || rename.isPending}> <Button type="submit" disabled={!name.trim() || name.trim() === current || rename.isPending}>
Rename Rename
</Button> </Button>
</DialogFooter> </DialogFooter>
</form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
web/dialogs/TorrentOptionsDialog.tsx
+13 -11
View File
@@ -1,4 +1,5 @@
import type { Torrent } from '../shared'; import type { Torrent } from '../shared';
import type { FormEvent } from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
@@ -67,7 +68,8 @@ export const TorrentOptionsDialog = ({ open, onOpenChange, targets }: TorrentOpt
const patch = (next: Partial<FormState>) => setForm((prev) => (prev ? { ...prev, ...next } : prev)); const patch = (next: Partial<FormState>) => setForm((prev) => (prev ? { ...prev, ...next } : prev));
const submit = async () => { const submit = async (ev?: FormEvent) => {
ev?.preventDefault();
await set.mutateAsync({ await set.mutateAsync({
ids: targets.map((t) => t.id), ids: targets.map((t) => t.id),
bandwidthPriority: Number(form.bandwidthPriority), bandwidthPriority: Number(form.bandwidthPriority),
@@ -98,7 +100,7 @@ export const TorrentOptionsDialog = ({ open, onOpenChange, targets }: TorrentOpt
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-5"> <form onSubmit={submit} className="space-y-5">
<section className="space-y-3"> <section className="space-y-3">
<h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Bandwidth</h3> <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Bandwidth</h3>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
@@ -206,16 +208,16 @@ export const TorrentOptionsDialog = ({ open, onOpenChange, targets }: TorrentOpt
/> />
</div> </div>
</section> </section>
</div>
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)}> <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
Cancel Cancel
</Button> </Button>
<Button onClick={submit} disabled={set.isPending}> <Button type="submit" disabled={set.isPending}>
Save Save
</Button> </Button>
</DialogFooter> </DialogFooter>
</form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );