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>
86 lines
3.2 KiB
TypeScript
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>
|
|
);
|
|
};
|