Files
transmission/web/dialogs/RemoveTorrentDialog.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

86 lines
3.2 KiB
TypeScript

import type { Torrent } from '../shared';
import { useEffect, useState } from 'react';
import { TriangleAlert } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { formatSize } from '../format';
import { useTorrentMutations } from '../useTransmissionData';
// Removing a torrent and deleting its data are one RPC apart and a very long way apart in consequence, so
// they are one dialog with an explicit opt-in rather than two menu items you can mis-click between.
type RemoveTorrentDialogProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
targets: Torrent[];
onRemoved?: () => void;
};
export const RemoveTorrentDialog = ({ open, onOpenChange, targets, onRemoved }: RemoveTorrentDialogProps) => {
const { remove } = useTorrentMutations();
const [deleteData, setDeleteData] = useState(false);
// Re-arm on every open: "also delete the files" must never be inherited from the last time.
useEffect(() => {
if (open) setDeleteData(false);
}, [open]);
const bytes = targets.reduce((sum, t) => sum + (t.totalSize ?? 0), 0);
const one = targets.length === 1 ? targets[0] : null;
const confirm = async () => {
await remove.mutateAsync({ ids: targets.map((t) => t.id), deleteLocalData: deleteData });
onOpenChange(false);
onRemoved?.();
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Remove {one ? 'torrent' : `${targets.length} torrents`}?</DialogTitle>
<DialogDescription className="break-words">
{one ? one.name : `${targets.length} torrents totalling ${formatSize(bytes)}.`}
</DialogDescription>
</DialogHeader>
<label className="flex items-start gap-2.5 rounded-lg border border-border p-3 text-sm">
<Checkbox className="mt-0.5" checked={deleteData} onCheckedChange={(v) => setDeleteData(v === true)} />
<span>
<span className="font-medium">Also delete the downloaded files</span>
<span className="mt-0.5 block text-xs text-muted-foreground">
{deleteData
? `${formatSize(bytes)} will be deleted from disk. This cannot be undone.`
: 'The files stay on disk; only the torrent is removed.'}
</span>
</span>
</label>
{deleteData && (
<div className="flex items-center gap-2 rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
<TriangleAlert className="h-4 w-4 shrink-0" />
Transmission deletes the data immediately — there is no trash.
</div>
)}
<DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button variant="destructive" onClick={confirm} disabled={remove.isPending}>
{deleteData ? 'Remove and delete' : 'Remove'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};