torrent-tui 0.0.1

package/src/layout/sidebar.ts

@@ -0,0 +1,121 @@
+import { BoxRenderable, type CliRenderer, TextRenderable } from "@opentui/core";
+import { APP_NAME, SIDEBAR_ITEMS } from "../constants";
+import type { AppState, Store } from "../store";
+import { getTheme } from "../theme";
+import type { LayoutDimensions } from "../types/layout";
+
+interface SidebarItem {
+	text: TextRenderable;
+	globalIndex: number;
+}
+
+export class Sidebar {
+	private renderer: CliRenderer;
+	private store: Store;
+	private container: BoxRenderable;
+	private titleText: TextRenderable | null = null;
+	private itemTexts: SidebarItem[] = [];
+	private layout: LayoutDimensions;
+
+	constructor(renderer: CliRenderer, store: Store, layout: LayoutDimensions) {
+		this.renderer = renderer;
+		this.store = store;
+		this.layout = layout;
+		this.container = this.build();
+		this.renderer.root.add(this.container);
+	}
+
+	update(state?: AppState, focusArea: "sidebar" | "table" = "sidebar"): void {
+		const s = state ?? this.store.getState();
+		const theme = getTheme();
+		const sidebarActive = focusArea === "sidebar";
+
+		(this.container as unknown as { borderColor: string }).borderColor =
+			sidebarActive ? theme.accent : theme.border;
+
+		for (const item of this.itemTexts) {
+			const itemName = SIDEBAR_ITEMS.status[item.globalIndex] ?? "";
+			const isSelected = item.globalIndex === s.selectedIndex;
+			(item.text as unknown as { content: string }).content =
+				`${isSelected && sidebarActive ? "> " : "  "}${itemName}`;
+			(item.text as unknown as { fg: string }).fg = isSelected
+				? (sidebarActive ? theme.accent : theme.fgSecondary)
+				: theme.fgPrimary;
+		}
+	}
+
+	updateLayout(layout: LayoutDimensions): void {
+		this.layout = layout;
+		this.container.width = layout.sidebar.width;
+		this.container.height = layout.sidebar.height;
+	}
+
+	private build(): BoxRenderable {
+		const theme = getTheme();
+		const state = this.store.getState();
+
+		this.container = new BoxRenderable(this.renderer, {
+			position: "absolute",
+			left: this.layout.sidebar.x,
+			top: this.layout.sidebar.y,
+			width: this.layout.sidebar.width,
+			height: this.layout.sidebar.height,
+			border: true,
+			borderColor: theme.border,
+		});
+
+		const titleBox = new BoxRenderable(this.renderer, {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			width: this.layout.sidebar.width,
+			paddingY: 1,
+			paddingX: 1,
+		});
+
+		this.titleText = new TextRenderable(this.renderer, {
+			content: APP_NAME,
+			fg: theme.accent,
+		});
+		titleBox.add(this.titleText);
+		this.container.add(titleBox);
+
+		let yOffset = 3;
+
+		const statusTitle = new BoxRenderable(this.renderer, {
+			position: "absolute",
+			left: 1,
+			top: yOffset,
+		});
+		const statusTitleText = new TextRenderable(this.renderer, {
+			content: "Status",
+			fg: theme.fgMuted,
+		});
+		statusTitle.add(statusTitleText);
+		this.container.add(statusTitle);
+		yOffset += 2;
+
+		for (let i = 0; i < SIDEBAR_ITEMS.status.length; i++) {
+			const isSelected = i === state.selectedIndex;
+			const itemName = SIDEBAR_ITEMS.status[i];
+
+			const itemBox = new BoxRenderable(this.renderer, {
+				position: "absolute",
+				left: 1,
+				top: yOffset,
+			});
+
+			const text = new TextRenderable(this.renderer, {
+				content: `${isSelected ? "> " : "  "}${itemName}`,
+				fg: isSelected ? theme.accent : theme.fgPrimary,
+			});
+
+			itemBox.add(text);
+			this.container.add(itemBox);
+			this.itemTexts.push({ text, globalIndex: i });
+			yOffset += 1;
+		}
+
+		return this.container;
+	}
+}

package/src/layout/status-bar.ts

@@ -0,0 +1,79 @@
+import { BoxRenderable, type CliRenderer, TextRenderable } from "@opentui/core";
+import type { AppState } from "../store";
+import { getTheme } from "../theme";
+import type { LayoutDimensions } from "../types/layout";
+
+function formatSpeed(bps: number): string {
+	if (bps >= 1_000_000) return `${(bps / 1_000_000).toFixed(1)} MB/s`;
+	if (bps >= 1_000) return `${Math.round(bps / 1_000)} KB/s`;
+	return `${bps} B/s`;
+}
+
+export class StatusBar {
+	private renderer: CliRenderer;
+	private layout: LayoutDimensions;
+	private container: BoxRenderable;
+	private leftText: TextRenderable;
+	private rightText: TextRenderable;
+
+	constructor(renderer: CliRenderer, layout: LayoutDimensions) {
+		this.renderer = renderer;
+		this.layout = layout;
+		const { container, leftText, rightText } = this.build();
+		this.container = container;
+		this.leftText = leftText;
+		this.rightText = rightText;
+		this.renderer.root.add(this.container);
+	}
+
+	update(state: AppState): void {
+		const theme = getTheme();
+		const dl = formatSpeed(state.totalDownloadBps);
+		const ul = formatSpeed(state.totalUploadBps);
+		const count = state.torrents.length;
+		const status = count === 0 ? "idle" : `${count} torrent${count !== 1 ? "s" : ""}`;
+
+		(this.leftText as unknown as { content: string }).content =
+			` ↓ ${dl}  ↑ ${ul}  |  ${status}`;
+		(this.leftText as unknown as { fg: string }).fg = theme.fgPrimary;
+
+		(this.rightText as unknown as { content: string }).content =
+			"Tab focus  Space pause  d del  D del+files  a add  q quit ";
+		(this.rightText as unknown as { fg: string }).fg = theme.fgMuted;
+	}
+
+	updateLayout(layout: LayoutDimensions): void {
+		this.layout = layout;
+		(this.container as unknown as { top: number }).top = layout.statusBar.y;
+		(this.container as unknown as { width: number }).width = layout.statusBar.width;
+	}
+
+	private build(): { container: BoxRenderable; leftText: TextRenderable; rightText: TextRenderable } {
+		const theme = getTheme();
+
+		const container = new BoxRenderable(this.renderer, {
+			position: "absolute",
+			left: this.layout.statusBar.x,
+			top: this.layout.statusBar.y,
+			width: this.layout.statusBar.width,
+			height: this.layout.statusBar.height,
+			flexDirection: "row",
+			justifyContent: "space-between",
+		});
+
+		const leftText = new TextRenderable(this.renderer, {
+			content: " ↓ 0 B/s  ↑ 0 B/s  |  idle",
+			fg: theme.fgPrimary,
+		});
+
+		const rightText = new TextRenderable(this.renderer, {
+			content: "j/k nav  a add  q quit ",
+			fg: theme.fgMuted,
+		});
+
+		container.add(leftText);
+		container.add(rightText);
+
+		return { container, leftText, rightText };
+	}
+}

package/src/layout/toast-manager.ts

@@ -0,0 +1,109 @@
+import type { CliRenderer } from "@opentui/core";
+import { TOAST_MARGIN, TOAST_MAX_COUNT, TOAST_WIDTH } from "../constants";
+import type { LayoutDimensions } from "../types/layout";
+import { Toast, type ToastConfig } from "./toast";
+
+export class ToastManager {
+	private renderer: CliRenderer;
+	private layout: LayoutDimensions;
+	private toasts: Toast[] = [];
+	private dismissInterval: ReturnType<typeof setInterval>;
+
+	constructor(renderer: CliRenderer, layout: LayoutDimensions) {
+		this.renderer = renderer;
+		this.layout = layout;
+
+		this.dismissInterval = setInterval(() => {
+			this.tick();
+		}, 100);
+	}
+
+	show(config: ToastConfig): Toast {
+		const x = this.layout.terminal.width - TOAST_WIDTH - TOAST_MARGIN;
+		const y = this.calculateYPosition();
+
+		const toast = new Toast(this.renderer, config, this.layout, x, y);
+		this.toasts.push(toast);
+		toast.addToRenderer();
+		this.repositionToasts();
+
+		if (this.toasts.length > TOAST_MAX_COUNT) {
+			const oldest = this.toasts.shift();
+			if (oldest) {
+				oldest.dismiss();
+			}
+		}
+
+		return toast;
+	}
+
+	private calculateYPosition(): number {
+		let y = TOAST_MARGIN;
+		for (const toast of this.toasts) {
+			y += toast.getHeight() + TOAST_MARGIN;
+		}
+		return y;
+	}
+
+	private repositionToasts(): void {
+		let y = TOAST_MARGIN;
+		for (const toast of this.toasts) {
+			toast.setY(y);
+			y += toast.getHeight() + TOAST_MARGIN;
+		}
+	}
+
+	dismiss(id: string): void {
+		const index = this.toasts.findIndex((t) => t.getId() === id);
+		if (index !== -1) {
+			const toast = this.toasts[index];
+			if (toast) {
+				toast.dismiss();
+				this.toasts.splice(index, 1);
+				this.repositionToasts();
+			}
+		}
+	}
+
+	updateLayout(layout: LayoutDimensions): void {
+		this.layout = layout;
+		for (const toast of this.toasts) {
+			toast.updateLayout(layout);
+		}
+		this.repositionToasts();
+	}
+
+	handleInput(key: string): boolean {
+		const topToast = this.toasts[this.toasts.length - 1];
+		if (topToast) {
+			return topToast.handleInput(key);
+		}
+		return false;
+	}
+
+	tick(): void {
+		const toRemove: Toast[] = [];
+
+		for (const toast of this.toasts) {
+			if (toast.shouldAutoDismiss()) {
+				toRemove.push(toast);
+			}
+		}
+
+		for (const toast of toRemove) {
+			this.dismiss(toast.getId());
+		}
+	}
+
+	destroy(): void {
+		clearInterval(this.dismissInterval);
+		for (const toast of this.toasts) {
+			toast.dismiss();
+		}
+		this.toasts = [];
+	}
+
+	getToasts(): Toast[] {
+		return this.toasts;
+	}
+}

package/src/layout/toast.ts

@@ -0,0 +1,257 @@
+import { BoxRenderable, type CliRenderer, TextRenderable } from "@opentui/core";
+import {
+	TOAST_DEFAULT_DURATION,
+	TOAST_MARGIN,
+	TOAST_WIDTH,
+} from "../constants";
+import { getTheme } from "../theme";
+import type { LayoutDimensions } from "../types/layout";
+
+export type ToastType = "info" | "success" | "warning" | "error" | "action";
+
+export interface ToastConfig {
+	id: string;
+	type: ToastType;
+	title: string;
+	message: string;
+	duration?: number | null;
+	dismissable?: boolean;
+	onDismiss?: () => void;
+}
+
+export class Toast {
+	private renderer: CliRenderer;
+	private config: ToastConfig;
+	private x: number;
+	private y: number;
+	private height: number;
+
+	private createdAt: number;
+	private dismissed: boolean = false;
+	private addedToRenderer: boolean = false;
+
+	private layout: LayoutDimensions;
+	private container: BoxRenderable;
+	private titleLabel: TextRenderable;
+	private messageLabel: TextRenderable;
+
+	constructor(
+		renderer: CliRenderer,
+		config: ToastConfig,
+		layout: LayoutDimensions,
+		x: number,
+		y: number,
+	) {
+		this.renderer = renderer;
+		this.config = {
+			dismissable: true,
+			duration: TOAST_DEFAULT_DURATION,
+			...config,
+		};
+		this.layout = layout;
+		this.x = x;
+		this.y = y;
+		this.createdAt = Date.now();
+
+		this.height = this.calculateHeight();
+		this.container = this.createContainer();
+		this.titleLabel = this.createTitleLabel();
+		this.messageLabel = this.createMessageLabel();
+	}
+
+	private calculateHeight(): number {
+		let height = 3;
+		const maxLineWidth = TOAST_WIDTH - 4;
+		const messageLines = this.wrapText(this.config.message, maxLineWidth);
+		height += messageLines.length;
+		return height;
+	}
+
+	private wrapText(text: string, maxWidth: number): string[] {
+		const words = text.split(" ");
+		const lines: string[] = [];
+		let currentLine = "";
+
+		for (const word of words) {
+			const testLine = currentLine ? `${currentLine} ${word}` : word;
+			if (testLine.length <= maxWidth) {
+				currentLine = testLine;
+			} else {
+				if (currentLine) lines.push(currentLine);
+				currentLine = word;
+			}
+		}
+		if (currentLine) lines.push(currentLine);
+
+		return lines;
+	}
+
+	private getBorderColor(): string {
+		const theme = getTheme();
+		switch (this.config.type) {
+			case "info":
+			case "action":
+				return theme.accent;
+			case "success":
+				return theme.success;
+			case "warning":
+				return theme.warning;
+			case "error":
+				return theme.error;
+		}
+	}
+
+	private getIcon(): string {
+		switch (this.config.type) {
+			case "info":
+				return "i";
+			case "success":
+				return "+";
+			case "warning":
+				return "!";
+			case "error":
+				return "x";
+			case "action":
+				return ">";
+		}
+	}
+
+	private createContainer(): BoxRenderable {
+		const theme = getTheme();
+		return new BoxRenderable(this.renderer, {
+			position: "absolute",
+			left: this.x,
+			top: this.y,
+			width: TOAST_WIDTH,
+			height: this.height,
+			borderColor: this.getBorderColor(),
+			borderStyle: "single",
+			backgroundColor: theme.bgPrimary,
+		});
+	}
+
+	private createTitleLabel(): TextRenderable {
+		const _theme = getTheme();
+		const icon = this.getIcon();
+		return new TextRenderable(this.renderer, {
+			content: `${icon} ${this.config.title}`,
+			fg: this.getBorderColor(),
+			position: "absolute",
+			left: this.x + 2,
+			top: this.y + 1,
+		});
+	}
+
+	private createMessageLabel(): TextRenderable {
+		const theme = getTheme();
+		const messageLines = this.wrapText(this.config.message, TOAST_WIDTH - 4);
+		const messageContent = messageLines.join("\n");
+		return new TextRenderable(this.renderer, {
+			content: messageContent,
+			fg: theme.fgPrimary,
+			position: "absolute",
+			left: this.x + 2,
+			top: this.y + 2,
+		});
+	}
+
+	shouldAutoDismiss(): boolean {
+		if (this.config.duration === null || this.config.duration === undefined) {
+			return false;
+		}
+		return Date.now() - this.createdAt >= this.config.duration;
+	}
+
+	addToRenderer(): void {
+		if (this.addedToRenderer || this.dismissed) return;
+
+		this.renderer.root.add(this.container);
+		this.renderer.root.add(this.titleLabel);
+		this.renderer.root.add(this.messageLabel);
+		this.addedToRenderer = true;
+	}
+
+	removeFromRenderer(): void {
+		if (!this.addedToRenderer) return;
+
+		try {
+			this.container.destroy();
+			this.titleLabel.destroy();
+			this.messageLabel.destroy();
+		} catch {
+			// Elements might not exist
+		}
+		this.addedToRenderer = false;
+	}
+
+	updatePosition(x: number, y: number): void {
+		this.x = x;
+		this.y = y;
+
+		(this.container as unknown as { left: number }).left = x;
+		(this.container as unknown as { top: number }).top = y;
+		(this.titleLabel as unknown as { left: number }).left = x + 2;
+		(this.titleLabel as unknown as { top: number }).top = y + 1;
+		(this.messageLabel as unknown as { left: number }).left = x + 2;
+		(this.messageLabel as unknown as { top: number }).top = y + 2;
+	}
+
+	handleInput(key: string): boolean {
+		if (this.config.dismissable && key === "escape") {
+			this.dismiss();
+			return true;
+		}
+		return false;
+	}
+
+	dismiss(): void {
+		if (this.dismissed) return;
+
+		this.dismissed = true;
+		this.removeFromRenderer();
+		this.config.onDismiss?.();
+	}
+
+	getId(): string {
+		return this.config.id;
+	}
+
+	getHeight(): number {
+		return this.height;
+	}
+
+	isDismissed(): boolean {
+		return this.dismissed;
+	}
+
+	getDuration(): number | null | undefined {
+		return this.config.duration;
+	}
+
+	setY(y: number): void {
+		this.y = y;
+		this.updatePosition(this.x, y);
+	}
+
+	getY(): number {
+		return this.y;
+	}
+
+	isAddedToRenderer(): boolean {
+		return this.addedToRenderer;
+	}
+
+	updateLayout(layout: LayoutDimensions): void {
+		this.layout = layout;
+
+		const newX = layout.terminal.width - TOAST_WIDTH - TOAST_MARGIN;
+		if (newX !== this.x) {
+			this.x = newX;
+			this.updatePosition(this.x, this.y);
+		}
+	}
+
+	getWidth(): number {
+		return TOAST_WIDTH;
+	}
+}