torrent-tui 0.0.2 → 0.0.3

package/src/layout/add-torrent-dialog.ts

@@ -1,22 +1,23 @@
-import { readdirSync, existsSync } from "node:fs";
+import { existsSync, readdirSync } from "node:fs";
 import { join } from "node:path";
 import { BoxRenderable, type CliRenderer, TextRenderable } from "@opentui/core";
 import { getTheme } from "../theme";
 import type { LayoutDimensions } from "../types/layout";
 import { resolvePath } from "../utils/paths";
 
-const DIALOG_WIDTH  = 60;
+const DIALOG_WIDTH = 60;
 const DIALOG_HEIGHT = 16;
-const INNER_W       = DIALOG_WIDTH - 2;
-const MARGIN        = 2;
+const INNER_W = DIALOG_WIDTH - 2;
+const MARGIN = 2;
 
 function truncateName(name: string): string {
 	const max = INNER_W - MARGIN * 2;
-	return name.length > max ? name.slice(0, max - 1) + "…" : name;
+	return name.length > max ? `${name.slice(0, max - 1)}…` : name;
 }
 
 function setBg(node: BoxRenderable, bg: string | undefined): void {
-	(node as unknown as { backgroundColor: string | undefined }).backgroundColor = bg;
+	(node as unknown as { backgroundColor: string | undefined }).backgroundColor =
+		bg;
 }
 
 export class AddTorrentDialog {
@@ -31,7 +32,11 @@ export class AddTorrentDialog {
 
 	onSelect?: (filePath: string) => void;
 
-	constructor(renderer: CliRenderer, layout: LayoutDimensions, torrentFolder: string) {
+	constructor(
+		renderer: CliRenderer,
+		layout: LayoutDimensions,
+		torrentFolder: string,
+	) {
 		this.renderer = renderer;
 		this.layout = layout;
 		this.torrentFolder = resolvePath(torrentFolder);
@@ -93,14 +98,23 @@ export class AddTorrentDialog {
 	private updateHighlight(): void {
 		const theme = getTheme();
 		for (let i = 0; i < this.itemRows.length; i++) {
-			setBg(this.itemRows[i]!, i === this.selectedIndex ? theme.bgTertiary : undefined);
+			setBg(
+				this.itemRows[i]!,
+				i === this.selectedIndex ? theme.bgTertiary : undefined,
+			);
 		}
 	}
 
 	private build(): void {
 		const theme = getTheme();
-		const left = Math.max(0, Math.floor((this.layout.terminal.width  - DIALOG_WIDTH)  / 2));
-		const top  = Math.max(0, Math.floor((this.layout.terminal.height - DIALOG_HEIGHT) / 2));
+		const left = Math.max(
+			0,
+			Math.floor((this.layout.terminal.width - DIALOG_WIDTH) / 2),
+		);
+		const top = Math.max(
+			0,
+			Math.floor((this.layout.terminal.height - DIALOG_HEIGHT) / 2),
+		);
 
 		const container = new BoxRenderable(this.renderer, {
 			position: "absolute",
@@ -122,8 +136,18 @@ export class AddTorrentDialog {
 			paddingLeft: MARGIN,
 			paddingRight: MARGIN,
 		});
-		titleRow.add(new TextRenderable(this.renderer, { content: "Add Torrent", fg: theme.accent }));
-		titleRow.add(new TextRenderable(this.renderer, { content: "Esc to close", fg: theme.fgMuted }));
+		titleRow.add(
+			new TextRenderable(this.renderer, {
+				content: "Add Torrent",
+				fg: theme.accent,
+			}),
+		);
+		titleRow.add(
+			new TextRenderable(this.renderer, {
+				content: "Esc to close",
+				fg: theme.fgMuted,
+			}),
+		);
 		container.add(titleRow);
 
 		// Spacer
@@ -132,22 +156,27 @@ export class AddTorrentDialog {
 		this.itemRows = [];
 
 		if (this.files.length === 0) {
-			container.add(new TextRenderable(this.renderer, {
-				content: " ".repeat(MARGIN) + `No .torrent files in ${this.torrentFolder}`,
-				fg: theme.fgMuted,
-			}));
+			container.add(
+				new TextRenderable(this.renderer, {
+					content: `${" ".repeat(MARGIN)}No .torrent files in ${this.torrentFolder}`,
+					fg: theme.fgMuted,
+				}),
+			);
 		} else {
 			for (let i = 0; i < this.files.length; i++) {
 				const file = this.files[i]!;
 				const row = new BoxRenderable(this.renderer, {
 					width: INNER_W,
 					height: 1,
-					backgroundColor: i === this.selectedIndex ? theme.bgTertiary : undefined,
+					backgroundColor:
+						i === this.selectedIndex ? theme.bgTertiary : undefined,
 				});
-				row.add(new TextRenderable(this.renderer, {
-					content: " ".repeat(MARGIN) + truncateName(file.name),
-					fg: i === this.selectedIndex ? theme.fgPrimary : theme.fgSecondary,
-				}));
+				row.add(
+					new TextRenderable(this.renderer, {
+						content: " ".repeat(MARGIN) + truncateName(file.name),
+						fg: i === this.selectedIndex ? theme.fgPrimary : theme.fgSecondary,
+					}),
+				);
 				container.add(row);
 				this.itemRows.push(row);
 			}

package/src/layout/confirm-dialog.ts

@@ -2,7 +2,7 @@ import { BoxRenderable, type CliRenderer, TextRenderable } from "@opentui/core";
 import { getTheme } from "../theme";
 import type { LayoutDimensions } from "../types/layout";
 
-const DIALOG_WIDTH  = 38;
+const DIALOG_WIDTH = 38;
 const DIALOG_HEIGHT = 7;
 
 export class ConfirmDialog {
@@ -44,7 +44,13 @@ export class ConfirmDialog {
 
 	handleInput(key: string): boolean {
 		if (!this.isOpen) return false;
-		if (key === "tab" || key === "h" || key === "l" || key === "left" || key === "right") {
+		if (
+			key === "tab" ||
+			key === "h" ||
+			key === "l" ||
+			key === "left" ||
+			key === "right"
+		) {
 			this.focusedBtn = this.focusedBtn === "confirm" ? "cancel" : "confirm";
 			this.updateButtons();
 			return true;
@@ -85,8 +91,14 @@ export class ConfirmDialog {
 
 	private build(message: string): void {
 		const theme = getTheme();
-		const left = Math.max(0, Math.floor((this.layout.terminal.width  - DIALOG_WIDTH)  / 2));
-		const top  = Math.max(0, Math.floor((this.layout.terminal.height - DIALOG_HEIGHT) / 2));
+		const left = Math.max(
+			0,
+			Math.floor((this.layout.terminal.width - DIALOG_WIDTH) / 2),
+		);
+		const top = Math.max(
+			0,
+			Math.floor((this.layout.terminal.height - DIALOG_HEIGHT) / 2),
+		);
 
 		const container = new BoxRenderable(this.renderer, {
 			position: "absolute",
@@ -101,17 +113,27 @@ export class ConfirmDialog {
 
 		const inner = DIALOG_WIDTH - 2;
 
-		container.add(new TextRenderable(this.renderer, { content: " ".repeat(inner) }));
-		container.add(new TextRenderable(this.renderer, {
-			content: ("  " + message).padEnd(inner),
-			fg: theme.fgPrimary,
-		}));
-		container.add(new TextRenderable(this.renderer, { content: " ".repeat(inner) }));
-		container.add(new TextRenderable(this.renderer, {
-			content: "  Files will be deleted from disk.".padEnd(inner),
-			fg: theme.fgSecondary,
-		}));
-		container.add(new TextRenderable(this.renderer, { content: " ".repeat(inner) }));
+		container.add(
+			new TextRenderable(this.renderer, { content: " ".repeat(inner) }),
+		);
+		container.add(
+			new TextRenderable(this.renderer, {
+				content: `  ${message}`.padEnd(inner),
+				fg: theme.fgPrimary,
+			}),
+		);
+		container.add(
+			new TextRenderable(this.renderer, { content: " ".repeat(inner) }),
+		);
+		container.add(
+			new TextRenderable(this.renderer, {
+				content: "  Files will be deleted from disk.".padEnd(inner),
+				fg: theme.fgSecondary,
+			}),
+		);
+		container.add(
+			new TextRenderable(this.renderer, { content: " ".repeat(inner) }),
+		);
 
 		const btnRow = new BoxRenderable(this.renderer, {
 			width: inner,

package/src/layout/content-window.ts

@@ -3,56 +3,95 @@ import type { Store } from "../store";
 import { getTheme } from "../theme";
 import type { LayoutDimensions } from "../types/layout";
 import { filterTorrents } from "../utils/filter";
+import { DetailPanel, type DetailTab } from "./detail-panel";
 import { TorrentTable } from "./torrent-view";
 
-function innerLayout(layout: LayoutDimensions): LayoutDimensions {
-	return {
-		...layout,
-		content: {
-			...layout.content,
-			width: layout.content.width - 2,
-			height: layout.content.height - 2,
-		},
-	};
-}
+export type FocusArea = "sidebar" | "table" | "details";
 
 export class ContentWindow {
 	private renderer: CliRenderer;
 	private store: Store;
 	private layout: LayoutDimensions;
 	private container: BoxRenderable;
+	private tableFrame: BoxRenderable;
+	private tableInner!: BoxRenderable;
 	private torrentTable: TorrentTable;
+	private detailPanel: DetailPanel;
 
 	constructor(renderer: CliRenderer, store: Store, layout: LayoutDimensions) {
 		this.renderer = renderer;
 		this.store = store;
 		this.layout = layout;
-		this.torrentTable = new TorrentTable(renderer, innerLayout(layout));
-		this.container = this.build();
+		this.torrentTable = new TorrentTable(renderer, tableLayout(layout));
+		this.detailPanel = new DetailPanel(renderer, detailLayout(layout));
+		const built = this.build();
+		this.container = built.container;
+		this.tableFrame = built.tableFrame;
 		this.renderer.root.add(this.container);
 	}
 
-	update(focusArea: "sidebar" | "table", selectedIndex: number): void {
+	update(
+		focusArea: FocusArea,
+		selectedIndex: number,
+		detailTab: DetailTab = "Pieces",
+		detailScrollOffset = 0,
+	): void {
 		const theme = getTheme();
 		const state = this.store.getState();
-		(this.container as unknown as { borderColor: string }).borderColor =
+		(this.tableFrame as unknown as { borderColor: string }).borderColor =
 			focusArea === "table" ? theme.accent : theme.border;
 		const visible = filterTorrents(state.torrents, state.selectedView);
 		this.torrentTable.update(visible, selectedIndex, focusArea);
+		const selectedTorrent =
+			focusArea === "sidebar" ? null : (visible[selectedIndex] ?? null);
+		const detailPlaceholder = resolveDetailPlaceholder(
+			focusArea,
+			state.torrents.length,
+			visible.length,
+			selectedTorrent !== null,
+		);
+		this.detailPanel.update(
+			selectedTorrent,
+			detailTab,
+			focusArea === "details",
+			detailScrollOffset,
+			detailPlaceholder,
+		);
+	}
+
+	getDetailBodyRowCount(): number {
+		return this.detailPanel.getBodyRowCount();
 	}
 
 	updateLayout(layout: LayoutDimensions): void {
 		this.layout = layout;
 		(this.container as unknown as { left: number }).left = layout.content.x;
 		(this.container as unknown as { top: number }).top = layout.content.y;
-		(this.container as unknown as { width: number }).width = layout.content.width;
-		(this.container as unknown as { height: number }).height = layout.content.height;
-		this.torrentTable.updateLayout(innerLayout(layout));
+		(this.container as unknown as { width: number }).width =
+			layout.content.width;
+		(this.container as unknown as { height: number }).height =
+			layout.content.height;
+
+		const table = tableFrameLayout(layout);
+		(this.tableFrame as unknown as { left: number }).left = table.content.x;
+		(this.tableFrame as unknown as { top: number }).top = table.content.y;
+		(this.tableFrame as unknown as { width: number }).width =
+			table.content.width;
+		(this.tableFrame as unknown as { height: number }).height =
+			table.content.height;
+		(this.tableInner as unknown as { width: number }).width =
+			table.content.width - 2;
+		(this.tableInner as unknown as { height: number }).height =
+			table.content.height - 2;
+
+		this.torrentTable.updateLayout(tableLayout(layout));
+		this.detailPanel.updateLayout(detailLayout(layout));
 	}
 
-	private build(): BoxRenderable {
+	private build(): { container: BoxRenderable; tableFrame: BoxRenderable } {
 		const theme = getTheme();
 		const layout = this.layout;
+		const table = tableFrameLayout(layout);
 
 		const container = new BoxRenderable(this.renderer, {
 			position: "absolute",
@@ -60,21 +99,87 @@ export class ContentWindow {
 			top: layout.content.y,
 			width: layout.content.width,
 			height: layout.content.height,
+		});
+
+		const tableFrame = new BoxRenderable(this.renderer, {
+			position: "absolute",
+			left: table.content.x,
+			top: table.content.y,
+			width: table.content.width,
+			height: table.content.height,
 			border: true,
 			borderColor: theme.border,
 		});
 
-		// Inner wrapper offset by 1 on each side to sit inside the border
-		const inner = new BoxRenderable(this.renderer, {
+		this.tableInner = new BoxRenderable(this.renderer, {
 			position: "absolute",
 			left: 1,
 			top: 1,
-			width: layout.content.width - 2,
-			height: layout.content.height - 2,
+			width: table.content.width - 2,
+			height: table.content.height - 2,
 		});
-		inner.add(this.torrentTable.getContainer());
-		container.add(inner);
+		this.tableInner.add(this.torrentTable.getContainer());
+		tableFrame.add(this.tableInner);
+
+		container.add(tableFrame);
+		container.add(this.detailPanel.getContainer());
 
-		return container;
+		return { container, tableFrame };
 	}
 }
+
+function resolveDetailPlaceholder(
+	focusArea: FocusArea,
+	totalTorrents: number,
+	visibleTorrents: number,
+	hasSelectedTorrent: boolean,
+): string | null {
+	if (hasSelectedTorrent) return null;
+	if (totalTorrents === 0) return "No torrents added yet";
+	if (visibleTorrents === 0) return "Select a torrent to inspect details";
+	if (focusArea === "sidebar") return "Select a torrent to inspect details";
+	return "No torrent selected";
+}
+
+function tableLayout(layout: LayoutDimensions): LayoutDimensions {
+	const frame = tableFrameLayout(layout);
+	return {
+		...layout,
+		content: {
+			x: 0,
+			y: 0,
+			width: frame.content.width - 2,
+			height: frame.content.height - 2,
+		},
+	};
+}
+
+function detailLayout(layout: LayoutDimensions): LayoutDimensions {
+	const detailHeight = getDetailHeight(layout.content.height);
+	return {
+		...layout,
+		content: {
+			x: 0,
+			y: layout.content.height - detailHeight,
+			width: layout.content.width,
+			height: detailHeight,
+		},
+	};
+}
+
+function tableFrameLayout(layout: LayoutDimensions): LayoutDimensions {
+	const detailHeight = getDetailHeight(layout.content.height);
+	return {
+		...layout,
+		content: {
+			x: 0,
+			y: 0,
+			width: layout.content.width,
+			height: Math.max(5, layout.content.height - detailHeight),
+		},
+	};
+}
+
+function getDetailHeight(contentHeight: number): number {
+	return Math.max(6, Math.min(10, Math.floor(contentHeight * 0.35)));
+}