pastilhasandClaude Opus 5
864dd16355
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>
58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
import type { Torrent } from '../shared';
|
|
import { Lock } from 'lucide-react';
|
|
import { describePeerFlags, formatPercent, formatSpeed } from '../format';
|
|
|
|
// Connected peers. Not sortable and not virtualised on purpose: the list is capped by the torrent's peer
|
|
// limit (50 by default), it churns every poll, and a sort you have to re-establish every five seconds is
|
|
// worse than no sort.
|
|
|
|
type PeersTabProps = { torrent: Torrent };
|
|
|
|
const HEAD = 'px-3 py-1.5 text-left text-[11px] font-medium uppercase tracking-wide text-muted-foreground';
|
|
|
|
export const PeersTab = ({ torrent }: PeersTabProps) => {
|
|
const peers = torrent.peers ?? [];
|
|
|
|
if (!peers.length) {
|
|
return <p className="p-6 text-center text-sm text-muted-foreground">No peers connected.</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-auto">
|
|
<table className="w-full border-collapse text-xs">
|
|
<thead className="sticky top-0 bg-background/95 backdrop-blur">
|
|
<tr className="border-b border-border">
|
|
<th className={HEAD}>Address</th>
|
|
<th className={HEAD}>Client</th>
|
|
<th className={`${HEAD} text-right`}>Progress</th>
|
|
<th className={`${HEAD} text-right`}>Down</th>
|
|
<th className={`${HEAD} text-right`}>Up</th>
|
|
<th className={HEAD}>Flags</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{peers.map((peer) => (
|
|
<tr key={`${peer.address}:${peer.port}`} className="border-b border-border/40 hover:bg-muted/40">
|
|
<td className="px-3 py-1.5 font-mono">
|
|
<span className="flex items-center gap-1.5">
|
|
{peer.isEncrypted && <Lock className="h-3 w-3 shrink-0 text-success" aria-label="Encrypted" />}
|
|
{peer.address}:{peer.port}
|
|
</span>
|
|
</td>
|
|
<td className="max-w-[200px] truncate px-3 py-1.5" title={peer.clientName}>
|
|
{peer.clientName || '—'}
|
|
</td>
|
|
<td className="px-3 py-1.5 text-right tabular-nums">{formatPercent(peer.progress)}</td>
|
|
<td className="px-3 py-1.5 text-right tabular-nums text-info">{formatSpeed(peer.rateToClient)}</td>
|
|
<td className="px-3 py-1.5 text-right tabular-nums text-success">{formatSpeed(peer.rateToPeer)}</td>
|
|
<td className="px-3 py-1.5 font-mono text-muted-foreground" title={describePeerFlags(peer.flagStr)}>
|
|
{peer.flagStr}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|