Files
transmission/web/dialogs/RenameDialog.tsx
T
pastilhasandClaude Opus 5 864dd16355 transmission, extracted from the platform into its own repository
The sixth plugin out, immediately after photos. A sidecar, a proxy router and
29 web files; no db/ directory, because there are no tables.

── The one thing that is not self-contained ──

The connection lives in `service_connections`, a CORE table, reached through
getServiceConnection/saveServiceConnection/getServiceCredentials. This plugin
declares no schema.

Deliberate: that table is the app store's shared credential store, keyed on
(user_id, service), already encrypted at rest and already read by
app-store/effects.ts. A private copy of the same three columns would be a
second place the same fact could live, and the runbook is explicit that a move
plus a data-format change gives any failure two causes.

The cost, stated rather than hidden: this plugin depends on a core facility it
does not own, and would break if that table changed shape. Photos, by contrast,
owns photos_config outright.

── 38 palette classes paid down, mapped by meaning ──

  blue     downloading / download speed  -> info
  cyan     checking (verifying)          -> busy
  emerald  seeding / complete            -> success
  amber    queued / stalled / warnings   -> warning

Collapsing blue and cyan into one tone would have lost a real distinction in
the status dot, so `checking` went to `busy` — in-progress work, which is what
that tone is for.

── A near-miss worth recording ──

The first copy globbed *.tsx and *.ts and silently missed detail/ and dialogs/
— ten components. tsgo caught it as ten "cannot find module" errors. Worth
stating because it is quiet in the other direction: had those been imported
lazily, the typecheck would have passed and the panels would have broken at
runtime. Check the directory tree, not the file glob.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-18 19:19:30 +00:00

81 lines
2.7 KiB
TypeScript

import type { Torrent } from '../shared';
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 () => {
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>
<div className="space-y-1.5">
<Label htmlFor="tr-rename">New name</Label>
<Input
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">
This renames the file or folder on disk, not just the display name.
</p>
</div>
<DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button onClick={submit} disabled={!name.trim() || name.trim() === current || rename.isPending}>
Rename
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};