@f0rbit/overview 0.2.0 → 0.2.1

package/packages/render/src/components/stats-panel.tsx

@@ -1,116 +0,0 @@
-import { Show } from "solid-js";
-import type { RepoStatus } from "@overview/core";
-import { theme } from "../theme";
-import { formatRelativeTime } from "../lib/format";
-
-interface StatsPanelProps {
-	status: RepoStatus | null;
-	repoName: string;
-	loading: boolean;
-	focused: boolean;
-	height: number | `${number}%` | "auto";
-}
-
-function StatRow(props: { label: string; value: string; color?: string }) {
-	return (
-		<box flexDirection="row" height={1}>
-			<text fg={theme.fg_dim} content={props.label.padEnd(12)} />
-			<text fg={props.color ?? theme.fg} content={props.value} />
-		</box>
-	);
-}
-
-function CleanState(props: { status: RepoStatus }) {
-	return (
-		<box flexDirection="column" gap={1}>
-			<text fg={theme.status.clean} content="✓ Everything clean & up to date" />
-			<box flexDirection="column">
-				<StatRow label="branch" value={props.status.current_branch} />
-				<StatRow label="last commit" value={formatRelativeTime(props.status.head_time)} />
-			</box>
-		</box>
-	);
-}
-
-function StatusDetails(props: { status: RepoStatus }) {
-	return (
-		<box flexDirection="column" gap={1}>
-			<box flexDirection="column">
-				<StatRow label="branch" value={props.status.current_branch} />
-				<StatRow label="remote" value={props.status.remote_url ?? "(none)"} />
-			</box>
-
-			<Show when={props.status.ahead > 0 || props.status.behind > 0}>
-				<box flexDirection="row" height={1} gap={2}>
-					<text fg={theme.status.ahead} content={`↑ ${props.status.ahead} ahead`} />
-					<text fg={theme.status.behind} content={`↓ ${props.status.behind} behind`} />
-				</box>
-			</Show>
-
-			<Show
-				when={
-					props.status.modified_count > 0 ||
-					props.status.staged_count > 0 ||
-					props.status.untracked_count > 0 ||
-					props.status.conflict_count > 0
-				}
-			>
-				<box flexDirection="column">
-					<Show when={props.status.modified_count > 0 || props.status.staged_count > 0}>
-						<box flexDirection="row" height={1} gap={2}>
-							<text fg={theme.status.modified} content={`~ ${props.status.modified_count} modified`} />
-							<text fg={theme.green} content={`+ ${props.status.staged_count} staged`} />
-						</box>
-					</Show>
-					<Show when={props.status.untracked_count > 0 || props.status.conflict_count > 0}>
-						<box flexDirection="row" height={1} gap={2}>
-							<text fg={theme.status.untracked} content={`? ${props.status.untracked_count} untracked`} />
-							<text fg={theme.status.conflict} content={`! ${props.status.conflict_count} conflicts`} />
-						</box>
-					</Show>
-				</box>
-			</Show>
-
-			<Show when={props.status.stash_count > 0}>
-				<text fg={theme.status.stash} content={`✂ ${props.status.stash_count} stashes`} />
-			</Show>
-
-			<StatRow label="last commit" value={formatRelativeTime(props.status.head_time)} />
-		</box>
-	);
-}
-
-export function StatsPanel(props: StatsPanelProps) {
-	return (
-		<box
-			borderStyle="rounded"
-			borderColor={props.focused ? theme.border_highlight : theme.border}
-			title={`stats: ${props.repoName}`}
-			titleAlignment="left"
-			flexDirection="column"
-			flexGrow={1}
-			height={props.height}
-			padding={1}
-			gap={1}
-		>
-			<Show
-				when={!props.loading}
-				fallback={<text fg={theme.fg_dim}>loading...</text>}
-			>
-				<Show
-					when={props.status}
-					fallback={<text fg={theme.fg_dim}>(select a repo)</text>}
-				>
-					{(status) => (
-						<Show
-							when={!status().is_clean}
-							fallback={<CleanState status={status()} />}
-						>
-							<StatusDetails status={status()} />
-						</Show>
-					)}
-				</Show>
-			</Show>
-		</box>
-	);
-}

package/packages/render/src/components/status-badge.tsx

@@ -1,70 +0,0 @@
-import { For } from "solid-js";
-import type { RepoStatus } from "@overview/core";
-import { theme } from "../theme";
-
-interface StatusBadgeProps {
-	status: RepoStatus | null;
-}
-
-interface BadgePart {
-	text: string;
-	color: string;
-}
-
-function buildBadgeParts(status: RepoStatus): BadgePart[] {
-	const parts: BadgePart[] = [];
-
-	if (status.ocn_status) {
-		switch (status.ocn_status.status) {
-			case "busy":
-				parts.push({ text: "*", color: theme.yellow });
-				break;
-			case "prompting":
-				parts.push({ text: ">", color: theme.magenta });
-				break;
-			case "error":
-				parts.push({ text: "!", color: theme.red });
-				break;
-		}
-	}
-
-	if (status.health === "conflict") {
-		parts.push({ text: "!", color: theme.status.conflict });
-	} else if (status.health === "clean" && status.modified_count === 0 && status.untracked_count === 0) {
-		parts.push({ text: "✓", color: theme.status.clean });
-	} else {
-		if (status.modified_count > 0) {
-			parts.push({ text: `~${status.modified_count}`, color: theme.status.modified });
-		}
-
-		if (status.untracked_count > 0 && status.modified_count === 0 && status.ahead === 0 && status.behind === 0) {
-			parts.push({ text: "?", color: theme.status.untracked });
-		}
-
-		if (status.ahead > 0) {
-			parts.push({ text: `↑${status.ahead}`, color: theme.status.ahead });
-		}
-
-		if (status.behind > 0) {
-			parts.push({ text: `↓${status.behind}`, color: theme.status.behind });
-		}
-	}
-
-	return parts;
-}
-
-export function StatusBadge(props: StatusBadgeProps) {
-	const parts = () => {
-		const s = props.status;
-		if (!s) return [{ text: "…", color: theme.fg_dim }] as BadgePart[];
-		return buildBadgeParts(s);
-	};
-
-	return (
-		<box flexDirection="row">
-			<For each={parts()}>
-				{(p) => <text fg={p.color} content={p.text} />}
-			</For>
-		</box>
-	);
-}

package/packages/render/src/components/status-bar.tsx

@@ -1,56 +0,0 @@
-import { createMemo, Show } from "solid-js";
-import { theme } from "../theme";
-
-export type AppMode = "NORMAL" | "DETAIL" | "SEARCH" | "HELP";
-
-interface StatusBarProps {
-	mode: AppMode;
-	repoCount: number;
-	dirtyCount: number;
-	aheadCount: number;
-	scanning: boolean;
-	message: string | null;
-	widgetSummary?: string;
-}
-
-const KEY_HINTS: Record<AppMode, string> = {
-	NORMAL: "j/k:nav  Enter:expand  g:ggi  r:refresh  q:quit  ?:help",
-	DETAIL: "j/k:scroll  h/l:panel  g:ggi  r:refresh  q:back",
-	SEARCH: "type to filter  Esc:cancel",
-	HELP: "q:close",
-};
-
-export function StatusBar(props: StatusBarProps) {
-	const keyHints = createMemo(() => KEY_HINTS[props.mode]);
-
-	const summaryColor = createMemo(() => {
-		if (props.scanning) return theme.fg_dim;
-		if (props.dirtyCount === 0 && props.aheadCount === 0) return theme.green;
-		return theme.yellow;
-	});
-
-	const summaryText = createMemo(() => {
-		if (props.scanning) return "scanning...";
-		if (props.dirtyCount === 0 && props.aheadCount === 0) {
-			return `✓ all ${props.repoCount} repos clean`;
-		}
-		const parts: string[] = [];
-		if (props.dirtyCount > 0) parts.push(`${props.dirtyCount} dirty`);
-		if (props.aheadCount > 0) parts.push(`${props.aheadCount} ahead`);
-		return parts.join(", ");
-	});
-
-	return (
-		<box height={1} width="100%" backgroundColor={theme.bg_dark} flexDirection="row" paddingLeft={1} paddingRight={1}>
-			<text fg={theme.blue} content={`[${props.mode}]`} />
-			<Show when={props.message} fallback={<text fg={theme.fg_dim} content={` ${keyHints()}`} />}>
-				<text fg={theme.yellow} content={` ${props.message}`} />
-			</Show>
-			<box flexGrow={1} />
-			<Show when={props.widgetSummary}>
-				<text fg={theme.fg_dim} content={`${props.widgetSummary}  `} />
-			</Show>
-			<text fg={summaryColor()} content={summaryText()} />
-		</box>
-	);
-}

package/packages/render/src/components/widget-container.tsx

@@ -1,286 +0,0 @@
-import { For, Show, createMemo, createSignal, createEffect, on } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
-import type { ScrollBoxRenderable, Renderable } from "@opentui/core";
-import type { RepoStatus, WidgetConfig, WidgetId } from "@overview/core";
-import { getWidget } from "./widgets/registry";
-import "./widgets/index";
-import { theme } from "../theme";
-import {
-	computeGridLayout,
-	buildBorderLine,
-	buildBorderLineWithTitle,
-	getWidgetBorderSides,
-	type GridWidget,
-	type GridRow,
-} from "../lib/widget-grid";
-
-interface WidgetContainerProps {
-	status: RepoStatus | null;
-	repoName: string;
-	loading: boolean;
-	focused: boolean;
-	height: number | `${number}%` | "auto";
-	availableWidth: number;
-	widgetConfigs: WidgetConfig[];
-	onWidgetConfigChange?: (configs: WidgetConfig[]) => void;
-}
-
-export function WidgetContainer(props: WidgetContainerProps) {
-	const [focused_idx, setFocusedIdx] = createSignal(0);
-	let scrollbox_ref: ScrollBoxRenderable | undefined;
-	const row_refs = new Map<number, Renderable>();
-
-	const enabled_widgets = createMemo(() => {
-		const configs = props.widgetConfigs
-			.filter((c) => c.enabled)
-			.sort((a, b) => a.priority - b.priority);
-		return configs
-			.map((c): GridWidget | null => {
-				const def = getWidget(c.id);
-				if (!def) return null;
-				return { id: c.id, size_hint: def.size_hint, config: c };
-			})
-			.filter((gw): gw is GridWidget => gw !== null);
-	});
-
-	const content_width = createMemo(() => props.availableWidth - 1);
-
-	const grid_layout = createMemo(() =>
-		computeGridLayout(enabled_widgets(), content_width()),
-	);
-
-	const flat_widget_ids = createMemo(() => {
-		const rows = grid_layout().rows;
-		const ids: WidgetId[] = [];
-		for (const row of rows) {
-			for (const w of row.widgets) {
-				ids.push(w.id);
-			}
-		}
-		return ids;
-	});
-
-	function scrollToFocused() {
-		if (!scrollbox_ref) return;
-		const focused_id = flat_widget_ids()[focused_idx()];
-		if (!focused_id) return;
-
-		const rows = grid_layout().rows;
-
-		// Find which row contains the focused widget
-		let target_row_index = -1;
-		for (let i = 0; i < rows.length; i++) {
-			if (rows[i]!.widgets.some((w) => w.id === focused_id)) {
-				target_row_index = i;
-				break;
-			}
-		}
-		if (target_row_index < 0) return;
-
-		// Get the rendered element for this row
-		const row_el = row_refs.get(target_row_index);
-		if (!row_el) return;
-
-		// el.y is screen-absolute, not relative to scrollbox content.
-		// Use content.y as origin — both are screen-absolute and shift together,
-		// so their difference gives stable content-relative position.
-		const scroll_top = scrollbox_ref.scrollTop;
-		const content_y = row_el.y - scrollbox_ref.content.y;
-		const content_h = row_el.height;
-
-		// The region we want fully visible (in content-space):
-		// - 1 line above for the border/title text
-		// - the row box itself
-		// - 1 line below for the bottom border (only last row)
-		const region_top = content_y - 1;
-		const is_last = target_row_index === rows.length - 1;
-		const region_bottom = content_y + content_h + (is_last ? 1 : 0);
-
-		// Viewport bounds (in content-space)
-		const vp_top = scroll_top;
-		const vp_height = scrollbox_ref.viewport?.height ?? scrollbox_ref.height;
-		const vp_bottom = vp_top + vp_height;
-
-		const top_visible = region_top >= vp_top;
-		const bottom_visible = region_bottom <= vp_bottom;
-		const region_height = region_bottom - region_top;
-
-		// Already fully in view — do nothing
-		if (top_visible && bottom_visible) {
-			return;
-		}
-
-		// Region fits within viewport — scroll minimally
-		if (region_height <= vp_height) {
-			if (!top_visible) {
-				// Top is clipped — align top of region with top of viewport
-				const target = Math.max(0, region_top);
-				scrollbox_ref.scrollTo({ x: 0, y: target });
-			} else {
-				// Bottom is clipped — align bottom of region with bottom of viewport
-				const target = region_bottom - vp_height;
-				scrollbox_ref.scrollTo({ x: 0, y: target });
-			}
-		} else {
-			// Region taller than viewport — show the top
-			const target = Math.max(0, region_top);
-			scrollbox_ref.scrollTo({ x: 0, y: target });
-		}
-	}
-
-	createEffect(on(focused_idx, () => scrollToFocused()));
-
-	useKeyboard((key) => {
-		if (!props.focused) return;
-
-		const ids = flat_widget_ids();
-		if (ids.length === 0) return;
-
-		switch (key.name) {
-			case "j":
-				setFocusedIdx(Math.min(focused_idx() + 1, ids.length - 1));
-				return;
-			case "k":
-				setFocusedIdx(Math.max(focused_idx() - 1, 0));
-				return;
-		}
-
-		if (key.raw === "c") {
-			const widget_id = ids[focused_idx()];
-			if (widget_id) {
-				const updated = props.widgetConfigs.map((c) =>
-					c.id === widget_id ? { ...c, collapsed: !c.collapsed } : c,
-				);
-				props.onWidgetConfigChange?.(updated);
-			}
-			return;
-		}
-
-		if (key.raw === "C") {
-			const all_collapsed = props.widgetConfigs.every((c) => !c.enabled || c.collapsed);
-			const updated = props.widgetConfigs.map((c) => ({ ...c, collapsed: !all_collapsed }));
-			props.onWidgetConfigChange?.(updated);
-			return;
-		}
-	});
-
-	function flatIndexOf(widget_id: WidgetId): number {
-		return flat_widget_ids().indexOf(widget_id);
-	}
-
-	function isFocused(widget_id: WidgetId): boolean {
-		return props.focused && flatIndexOf(widget_id) === focused_idx();
-	}
-
-	function borderLine(type: "top" | "mid" | "bottom", prev: GridRow | null, next: GridRow | null): string {
-		return buildBorderLine(type, content_width(), prev, next);
-	}
-
-	return (
-		<box flexDirection="column" width={props.availableWidth} height={props.height}>
-			<Show
-				when={!props.loading}
-				fallback={<text fg={theme.fg_dim} content="loading..." />}
-			>
-				<Show
-					when={props.status}
-					fallback={<text fg={theme.fg_dim} content="(select a repo)" />}
-				>
-					<scrollbox ref={scrollbox_ref} flexGrow={1}>
-						<box flexDirection="column" width={content_width()} flexShrink={0}>
-							<For each={grid_layout().rows}>
-								{(row, row_index) => {
-									const rows = grid_layout().rows;
-									const prev_row = () => row_index() > 0 ? rows[row_index() - 1]! : null;
-									const is_first = () => row_index() === 0;
-									const is_last = () => row_index() === rows.length - 1;
-
-									const top_line = () => {
-										const type = is_first() ? "top" : "mid";
-										const line = borderLine(type, prev_row(), row);
-										if (is_first()) {
-											return buildBorderLineWithTitle(line, `widgets: ${props.repoName}`);
-										}
-										return line;
-									};
-
-									return (
-										<>
-											<text fg={props.focused && is_first() ? theme.border_highlight : theme.border} content={top_line()} />
-
-											<box ref={(el: Renderable) => { row_refs.set(row_index(), el); }} flexDirection="row" alignItems="stretch" width={content_width()}>
-												<For each={row.widgets}>
-													{(gw, widget_idx) => {
-														const def = getWidget(gw.id);
-														if (!def) return null;
-
-														const focused = () => isFocused(gw.id);
-														const box_width = () => {
-															if (row.columns === 1) return content_width();
-															if (row.columns === 2) {
-																const junction = Math.floor(content_width() / 2);
-																if (widget_idx() === 0) return junction;
-																return content_width() - junction;
-															}
-															// 3-column
-															const j1 = Math.floor(content_width() / 3);
-															const j2 = Math.floor(2 * content_width() / 3);
-															if (widget_idx() === 0) return j1;
-															if (widget_idx() === 1) return j2 - j1;
-															return content_width() - j2;
-														};
-														const widget_content_width = () => {
-															const sides = getWidgetBorderSides(row, widget_idx());
-															return Math.max(1, box_width() - sides.length);
-														};
-
-														return (
-															<box
-																width={box_width()}
-																border={getWidgetBorderSides(row, widget_idx())}
-																borderStyle="rounded"
-																borderColor={(focused() || (props.focused && (widget_idx() === 0 || widget_idx() === row.columns - 1))) ? theme.border_highlight : theme.border}
-																backgroundColor={focused() ? theme.bg_highlight : undefined}
-																flexDirection="column"
-																minHeight={gw.size_hint.min_height}
-																overflow="hidden"
-															>
-																<Show
-																	when={!gw.config.collapsed}
-																	fallback={
-																		<text
-																			fg={focused() ? theme.yellow : theme.fg_dim}
-																			content={focused() ? `▸ [>] ${def.label} (collapsed)` : `[>] ${def.label} (collapsed)`}
-																		/>
-																	}
-																>
-																	<text
-																		fg={focused() ? theme.yellow : theme.fg_dim}
-																		content={focused() ? `▸ ${def.label}` : `  ${def.label}`}
-																	/>
-																	<def.component
-																		width={widget_content_width()}
-																		focused={focused()}
-																		status={props.status}
-																	/>
-																</Show>
-															</box>
-														);
-													}}
-												</For>
-											</box>
-
-											<Show when={is_last()}>
-												<text fg={props.focused ? theme.border_highlight : theme.border} content={borderLine("bottom", row, null)} />
-											</Show>
-										</>
-									);
-								}}
-							</For>
-						</box>
-					</scrollbox>
-				</Show>
-			</Show>
-		</box>
-	);
-}