pastilhasandClaude Opus 5
17edfa9403
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>
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import type { Torrent } from '../shared';
|
|
import type { FormEvent } from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { useTorrentMutations } from '../useTransmissionData';
|
|
|
|
// torrent-rename-path renames a path *inside* the torrent, addressed by its full path relative to the
|
|
// torrent root. Renaming the root itself means passing the torrent's own name as the path — which is why
|
|
// this dialog takes a `path` as well as the new name, and why it is single-target only.
|
|
|
|
type RenameDialogProps = {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
torrent: Torrent | null;
|
|
/** The path being renamed; the torrent's own name when renaming the root. */
|
|
path: string;
|
|
};
|
|
|
|
export const RenameDialog = ({ open, onOpenChange, torrent, path }: RenameDialogProps) => {
|
|
const { rename } = useTorrentMutations();
|
|
const [name, setName] = useState('');
|
|
|
|
// Only the last segment is editable — the rest of the path is where the file lives, not what it is called.
|
|
const segments = path.split('/');
|
|
const parent = segments.slice(0, -1).join('/');
|
|
const current = segments[segments.length - 1] ?? '';
|
|
|
|
useEffect(() => {
|
|
if (open) setName(current);
|
|
}, [open, current]);
|
|
|
|
const submit = async (ev?: FormEvent) => {
|
|
ev?.preventDefault();
|
|
if (!torrent) return;
|
|
await rename.mutateAsync({ id: torrent.id, path, name: name.trim() });
|
|
onOpenChange(false);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Rename</DialogTitle>
|
|
<DialogDescription className="break-all">{parent ? `${parent}/` : path}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={submit} className="space-y-1.5">
|
|
<Label htmlFor="tr-rename">New name</Label>
|
|
<Input id="tr-rename" value={name} onChange={(ev) => setName(ev.target.value)} autoFocus />
|
|
<p className="text-xs text-muted-foreground">
|
|
This renames the file or folder on disk, not just the display name.
|
|
</p>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={!name.trim() || name.trim() === current || rename.isPending}>
|
|
Rename
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|