kajji 0.1.0

package/src/components/modals/DescribeModal.tsx

@@ -0,0 +1,124 @@
+import {
+	type InputRenderable,
+	RGBA,
+	type TextareaRenderable,
+} from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
+import { createSignal, onMount } from "solid-js"
+import { useDialog } from "../../context/dialog"
+import { useTheme } from "../../context/theme"
+
+interface DescribeModalProps {
+	initialSubject: string
+	initialBody: string
+	onSave: (subject: string, body: string) => void
+}
+
+export function DescribeModal(props: DescribeModalProps) {
+	const dialog = useDialog()
+	const { colors, style } = useTheme()
+
+	const [subject, setSubject] = createSignal(props.initialSubject)
+	const [body, setBody] = createSignal(props.initialBody)
+	const [focusedField, setFocusedField] = createSignal<"subject" | "body">(
+		"subject",
+	)
+
+	let subjectRef: InputRenderable | undefined
+	let bodyRef: TextareaRenderable | undefined
+
+	const focusInputAtEnd = (ref: InputRenderable | undefined) => {
+		if (!ref) return
+		ref.focus()
+		ref.cursorPosition = ref.value.length
+	}
+
+	const focusTextareaAtEnd = (ref: TextareaRenderable | undefined) => {
+		if (!ref) return
+		ref.focus()
+		ref.gotoBufferEnd()
+	}
+
+	onMount(() => {
+		setTimeout(() => focusInputAtEnd(subjectRef), 1)
+	})
+
+	const handleSave = () => {
+		dialog.close()
+		props.onSave(subject(), body())
+	}
+
+	useKeyboard((evt) => {
+		if (evt.name === "tab") {
+			evt.preventDefault()
+			if (focusedField() === "subject") {
+				setFocusedField("body")
+				focusTextareaAtEnd(bodyRef)
+			} else {
+				setFocusedField("subject")
+				focusInputAtEnd(subjectRef)
+			}
+		}
+	})
+
+	const charCount = () => subject().length
+
+	return (
+		<box flexDirection="column" width="60%" gap={0}>
+			<box
+				flexDirection="column"
+				border
+				borderStyle={style().panel.borderStyle}
+				borderColor={
+					focusedField() === "subject"
+						? colors().borderFocused
+						: colors().border
+				}
+				backgroundColor={colors().background}
+				height={3}
+				padding={0}
+				title={`Subject─[${charCount()}]`}
+			>
+				<input
+					ref={subjectRef}
+					value={props.initialSubject}
+					onInput={(value) => setSubject(value)}
+					onSubmit={handleSave}
+					cursorColor={colors().primary}
+					textColor={colors().text}
+					focusedTextColor={colors().text}
+					focusedBackgroundColor={RGBA.fromInts(0, 0, 0, 0)}
+					flexGrow={1}
+				/>
+			</box>
+
+			<box
+				flexDirection="column"
+				border
+				borderStyle={style().panel.borderStyle}
+				borderColor={
+					focusedField() === "body" ? colors().borderFocused : colors().border
+				}
+				backgroundColor={colors().background}
+				height={10}
+				padding={0}
+				title="Body"
+			>
+				<textarea
+					ref={(r) => {
+						bodyRef = r
+					}}
+					initialValue={props.initialBody}
+					onContentChange={() => {
+						if (bodyRef) setBody(bodyRef.plainText)
+					}}
+					cursorColor={colors().primary}
+					textColor={colors().text}
+					focusedTextColor={colors().text}
+					focusedBackgroundColor={RGBA.fromInts(0, 0, 0, 0)}
+					flexGrow={1}
+				/>
+			</box>
+		</box>
+	)
+}

package/src/components/modals/HelpModal.tsx

@@ -0,0 +1,372 @@
+import { type InputRenderable, RGBA } from "@opentui/core"
+import { useKeyboard, useRenderer } from "@opentui/solid"
+import fuzzysort from "fuzzysort"
+import {
+	type Accessor,
+	For,
+	Show,
+	createEffect,
+	createMemo,
+	createSignal,
+	onCleanup,
+	onMount,
+} from "solid-js"
+import {
+	type CommandOption,
+	type Context,
+	useCommand,
+} from "../../context/command"
+import { useDialog } from "../../context/dialog"
+import { useFocus } from "../../context/focus"
+import { useKeybind } from "../../context/keybind"
+import { useTheme } from "../../context/theme"
+import type { KeybindConfigKey } from "../../keybind"
+
+type ContextGroup =
+	| "navigation"
+	| "revisions"
+	| "files"
+	| "bookmarks"
+	| "oplog"
+	| "detail"
+	| "git"
+	| "global"
+
+interface ContextGroupData {
+	context: ContextGroup
+	label: string
+	commands: CommandOption[]
+}
+
+const GROUP_ORDER: ContextGroup[] = [
+	"revisions",
+	"files",
+	"bookmarks",
+	"oplog",
+	"detail",
+	"navigation",
+	"git",
+	"global",
+]
+
+const GROUP_LABELS: Record<ContextGroup, string> = {
+	navigation: "navigation",
+	revisions: "revisions",
+	files: "files",
+	bookmarks: "bookmarks",
+	oplog: "oplog",
+	detail: "detail",
+	git: "git",
+	global: "global",
+}
+
+const NAVIGATION_KEYBINDS = new Set([
+	"nav_down",
+	"nav_up",
+	"nav_page_up",
+	"nav_page_down",
+	"next_tab",
+	"prev_tab",
+	"focus_next",
+	"focus_prev",
+	"focus_panel_1",
+	"focus_panel_2",
+	"focus_panel_3",
+])
+
+function contextToGroup(context: Context): ContextGroup {
+	if (context === "log.revisions" || context === "refs.revisions")
+		return "revisions"
+	if (context === "log.files" || context === "refs.files") return "files"
+	if (context === "refs.bookmarks") return "bookmarks"
+	if (context === "log.oplog") return "oplog"
+	if (context === "detail") return "detail"
+	return "global"
+}
+
+function contextMatches(
+	commandContext: Context,
+	activeContext: Context,
+): boolean {
+	if (commandContext === "global") return true
+	if (commandContext === activeContext) return true
+	return activeContext.startsWith(`${commandContext}.`)
+}
+
+const NARROW_THRESHOLD = 100
+
+export function HelpModal() {
+	const renderer = useRenderer()
+	const command = useCommand()
+	const keybind = useKeybind()
+	const dialog = useDialog()
+	const focus = useFocus()
+	const { colors, style } = useTheme()
+	const [filter, setFilter] = createSignal("")
+	const [selectedIndex, setSelectedIndex] = createSignal(-1)
+	const [terminalWidth, setTerminalWidth] = createSignal(renderer.width)
+
+	onMount(() => {
+		const handleResize = (width: number) => setTerminalWidth(width)
+		renderer.on("resize", handleResize)
+		onCleanup(() => renderer.off("resize", handleResize))
+	})
+
+	const columnCount = () => (terminalWidth() < NARROW_THRESHOLD ? 1 : 3)
+
+	type SearchableCommand = CommandOption & { keybindStr: string }
+
+	const isVisibleInHelp = (cmd: CommandOption) => {
+		const v = cmd.visibility ?? "all"
+		return v === "all" || v === "help-only"
+	}
+
+	const allCommands = createMemo((): SearchableCommand[] => {
+		return command
+			.all()
+			.filter(isVisibleInHelp)
+			.map((cmd) => ({
+				...cmd,
+				keybindStr: cmd.keybind ? keybind.print(cmd.keybind) : "",
+			}))
+	})
+
+	const matchedCommands = createMemo(() => {
+		const all = allCommands()
+		const filterText = filter().trim()
+
+		if (!filterText) {
+			return all
+		}
+
+		const results = fuzzysort.go(filterText, all, {
+			keys: ["title", "context", "keybindStr"],
+			threshold: -10000,
+		})
+
+		return results.map((r) => r.obj)
+	})
+
+	const matchedIds = createMemo(() => {
+		return new Set(matchedCommands().map((cmd) => cmd.id))
+	})
+
+	createEffect(() => {
+		const filterText = filter().trim()
+		if (filterText) {
+			setSelectedIndex(0)
+		} else {
+			setSelectedIndex(-1)
+		}
+	})
+
+	const selectedCommand = createMemo(() => {
+		const idx = selectedIndex()
+		if (idx < 0) return null
+		return matchedInColumnOrder()[idx] ?? null
+	})
+
+	const groupedCommands = createMemo((): ContextGroupData[] => {
+		const all = allCommands()
+		const seenKeybinds = new Set<string>()
+
+		const groups = new Map<ContextGroup, CommandOption[]>()
+		const navCommands: CommandOption[] = []
+
+		for (const cmd of all) {
+			if (NAVIGATION_KEYBINDS.has(cmd.keybind ?? "")) {
+				if (!seenKeybinds.has(cmd.keybind ?? "")) {
+					navCommands.push(cmd)
+					seenKeybinds.add(cmd.keybind ?? "")
+				}
+				continue
+			}
+
+			const group = cmd.type === "git" ? "git" : contextToGroup(cmd.context)
+			const existing = groups.get(group) || []
+			groups.set(group, [...existing, cmd])
+		}
+
+		if (navCommands.length > 0) {
+			groups.set("navigation", navCommands)
+		}
+
+		const result: ContextGroupData[] = []
+		for (const group of GROUP_ORDER) {
+			const commands = groups.get(group)
+			if (commands && commands.length > 0) {
+				result.push({ context: group, label: GROUP_LABELS[group], commands })
+			}
+		}
+
+		return result
+	})
+
+	const columns = createMemo(() => {
+		const groups = groupedCommands()
+		const numCols = columnCount()
+		const cols: ContextGroupData[][] = Array.from({ length: numCols }, () => [])
+
+		let colIndex = 0
+		for (const group of groups) {
+			const col = cols[colIndex]
+			if (col) col.push(group)
+			colIndex = (colIndex + 1) % numCols
+		}
+
+		return cols
+	})
+
+	const commandsInColumnOrder = createMemo(() => {
+		const cols = columns()
+		const result: CommandOption[] = []
+		for (const column of cols) {
+			for (const group of column) {
+				for (const cmd of group.commands) {
+					result.push(cmd)
+				}
+			}
+		}
+		return result
+	})
+
+	const matchedInColumnOrder = createMemo(() => {
+		const matched = matchedIds()
+		return commandsInColumnOrder().filter((cmd) => matched.has(cmd.id))
+	})
+
+	const move = (direction: 1 | -1) => {
+		const matched = matchedInColumnOrder()
+		if (matched.length === 0) return
+
+		setSelectedIndex((prev) => {
+			if (prev < 0) return 0
+			let next = prev + direction
+			if (next < 0) next = matched.length - 1
+			if (next >= matched.length) next = 0
+			return next
+		})
+	}
+
+	const executeSelected = () => {
+		const cmd = selectedCommand()
+		if (cmd) {
+			dialog.close()
+			cmd.onSelect()
+		}
+	}
+
+	useKeyboard((evt) => {
+		if (evt.name === "j" || evt.name === "down") {
+			evt.preventDefault()
+			move(1)
+		} else if (evt.name === "k" || evt.name === "up") {
+			evt.preventDefault()
+			move(-1)
+		} else if (evt.name === "return") {
+			evt.preventDefault()
+			executeSelected()
+		}
+	})
+
+	const separator = () => style().statusBar.separator
+	const gap = () => (separator() ? 0 : 3)
+
+	const isMatched = (cmd: CommandOption) => matchedIds().has(cmd.id)
+	const isSelected = (cmd: CommandOption) => selectedCommand()?.id === cmd.id
+	const isActive = (cmd: CommandOption) => {
+		if (!contextMatches(cmd.context, focus.activeContext())) return false
+		if (cmd.panel && cmd.panel !== focus.panel()) return false
+		return true
+	}
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle={style().panel.borderStyle}
+			borderColor={colors().borderFocused}
+			backgroundColor={colors().background}
+			padding={1}
+			width="80%"
+			height="80%"
+			title="[esc / ?]─Commands"
+		>
+			<box flexDirection="row" marginBottom={2} paddingLeft={4}>
+				<input
+					ref={(r: InputRenderable) => setTimeout(() => r.focus(), 1)}
+					onInput={(value) => setFilter(value)}
+					onSubmit={() => executeSelected()}
+					placeholder="Search"
+					flexGrow={1}
+					cursorColor={colors().primary}
+					textColor={colors().textMuted}
+					focusedTextColor={colors().text}
+					focusedBackgroundColor={RGBA.fromInts(0, 0, 0, 0)}
+				/>
+			</box>
+
+			<box flexDirection="row" flexGrow={1} gap={1}>
+				<For each={columns()}>
+					{(column) => (
+						<box flexDirection="column" flexGrow={1} flexBasis={0}>
+							<For each={column}>
+								{(group) => (
+									<box flexDirection="column" marginBottom={1}>
+										<box flexDirection="row">
+											<box width={10} flexShrink={0} />
+											<text fg={colors().primary}> {group.label}</text>
+										</box>
+										<For each={group.commands}>
+											{(cmd) => (
+												<box
+													flexDirection="row"
+													backgroundColor={
+														isSelected(cmd)
+															? colors().selectionBackground
+															: undefined
+													}
+												>
+													<box width={10} flexShrink={0}>
+														<Show when={cmd.keybind}>
+															{(kb: Accessor<KeybindConfigKey>) => (
+																<text
+																	fg={
+																		isSelected(cmd)
+																			? colors().selectionText
+																			: isMatched(cmd) && isActive(cmd)
+																				? colors().info
+																				: colors().textMuted
+																	}
+																	wrapMode="none"
+																>
+																	{keybind.print(kb()).padStart(9)}
+																</text>
+															)}
+														</Show>
+													</box>
+													<text
+														fg={
+															isSelected(cmd)
+																? colors().selectionText
+																: isMatched(cmd) && isActive(cmd)
+																	? colors().text
+																	: colors().textMuted
+														}
+													>
+														{" "}
+														{cmd.title}
+													</text>
+												</box>
+											)}
+										</For>
+									</box>
+								)}
+							</For>
+						</box>
+					)}
+				</For>
+			</box>
+		</box>
+	)
+}

package/src/components/modals/RevisionPickerModal.tsx

@@ -0,0 +1,70 @@
+import { useKeyboard } from "@opentui/solid"
+import { createSignal } from "solid-js"
+import type { Commit } from "../../commander/types"
+import { useDialog } from "../../context/dialog"
+import { useTheme } from "../../context/theme"
+import { RevisionPicker } from "../RevisionPicker"
+
+interface RevisionPickerModalProps {
+	title: string
+	commits: Commit[]
+	defaultRevision?: string
+	width?: number | "auto" | `${number}%`
+	height?: number
+	onSelect: (revision: string) => void
+}
+
+export function RevisionPickerModal(props: RevisionPickerModalProps) {
+	const dialog = useDialog()
+	const { colors, style } = useTheme()
+
+	const [selectedRevision, setSelectedRevision] = createSignal(
+		props.defaultRevision ?? props.commits[0]?.changeId ?? "",
+	)
+
+	const handleConfirm = () => {
+		const rev = selectedRevision()
+		if (!rev) return
+		dialog.close()
+		props.onSelect(rev)
+	}
+
+	useKeyboard((evt) => {
+		if (evt.name === "escape") {
+			evt.preventDefault()
+			dialog.close()
+		} else if (evt.name === "return") {
+			evt.preventDefault()
+			handleConfirm()
+		}
+	})
+
+	const handleRevisionSelect = (commit: Commit) => {
+		setSelectedRevision(commit.changeId)
+	}
+
+	const pickerHeight = () => props.height ?? 12
+
+	return (
+		<box flexDirection="column" width={props.width ?? "60%"} gap={0}>
+			<box
+				flexDirection="column"
+				border
+				borderStyle={style().panel.borderStyle}
+				borderColor={colors().borderFocused}
+				backgroundColor={colors().background}
+				height={pickerHeight()}
+				padding={0}
+				title={props.title}
+			>
+				<RevisionPicker
+					commits={props.commits}
+					defaultRevision={props.defaultRevision}
+					focused={true}
+					onSelect={handleRevisionSelect}
+					height={pickerHeight() - 2}
+				/>
+			</box>
+		</box>
+	)
+}

package/src/components/modals/UndoModal.tsx

@@ -0,0 +1,75 @@
+import { useKeyboard } from "@opentui/solid"
+import { Show, createResource } from "solid-js"
+import { fetchOpLog } from "../../commander/operations"
+import { useTheme } from "../../context/theme"
+import { AnsiText } from "../AnsiText"
+import { BorderBox } from "../BorderBox"
+
+interface UndoModalProps {
+	type: "undo" | "redo" | "restore"
+	operationLines?: string[]
+	onConfirm: () => void
+	onCancel: () => void
+}
+
+export function UndoModal(props: UndoModalProps) {
+	const { colors, style } = useTheme()
+
+	const [fetchedDetails] = createResource(
+		() => !props.operationLines,
+		async () => {
+			const lines = await fetchOpLog(1)
+			return lines.join("\n")
+		},
+	)
+
+	const opDetails = () =>
+		props.operationLines?.join("\n") ?? fetchedDetails() ?? ""
+
+	useKeyboard((evt) => {
+		if (evt.name === "y" || evt.name === "return") {
+			evt.preventDefault()
+			props.onConfirm()
+		} else if (evt.name === "n" || evt.name === "escape") {
+			evt.preventDefault()
+			props.onCancel()
+		}
+	})
+
+	const title = () => {
+		if (props.type === "restore") return "Restore to this operation?"
+		return props.type === "undo"
+			? "Undo last operation?"
+			: "Redo last operation?"
+	}
+
+	const hints = () => (
+		<text>
+			<span style={{ fg: colors().primary }}>y</span>
+			<span style={{ fg: colors().textMuted }}> confirm </span>
+			<span style={{ fg: colors().primary }}>n</span>
+			<span style={{ fg: colors().textMuted }}> cancel</span>
+		</text>
+	)
+
+	return (
+		<BorderBox
+			border
+			borderStyle={style().panel.borderStyle}
+			borderColor={colors().borderFocused}
+			backgroundColor={colors().background}
+			width="60%"
+			topLeft={<text fg={colors().text}>{title()}</text>}
+			bottomRight={hints()}
+			paddingLeft={1}
+			paddingRight={1}
+		>
+			<Show when={fetchedDetails.loading && !props.operationLines}>
+				<text fg={colors().textMuted}>Loading...</text>
+			</Show>
+			<Show when={!fetchedDetails.loading || props.operationLines}>
+				<AnsiText content={opDetails()} wrapMode="none" />
+			</Show>
+		</BorderBox>
+	)
+}