kajji 0.1.0 → 0.1.1

package/src/components/FileTreeList.tsx

@@ -1,105 +0,0 @@
-import { For, Show } from "solid-js"
-import { useFocus } from "../context/focus"
-import { useTheme } from "../context/theme"
-import { createDoubleClickDetector } from "../utils/double-click"
-import type { FlatFileNode } from "../utils/file-tree"
-
-const STATUS_CHARS: Record<string, string> = {
-	added: "A",
-	modified: "M",
-	deleted: "D",
-	renamed: "R",
-	copied: "C",
-}
-
-export interface FileTreeListProps {
-	files: () => FlatFileNode[]
-	selectedIndex: () => number
-	setSelectedIndex: (index: number) => void
-	collapsedPaths: () => Set<string>
-	toggleFolder: (path: string) => void
-}
-
-export function FileTreeList(props: FileTreeListProps) {
-	const focus = useFocus()
-	const { colors } = useTheme()
-
-	const statusColors = () => ({
-		added: colors().success,
-		modified: colors().warning,
-		deleted: colors().error,
-		renamed: colors().info,
-		copied: colors().info,
-	})
-
-	return (
-		<For each={props.files()}>
-			{(item, index) => {
-				const isSelected = () => index() === props.selectedIndex()
-				const node = item.node
-				const indent = "  ".repeat(item.visualDepth)
-				const isCollapsed = props.collapsedPaths().has(node.path)
-
-				const icon = node.isDirectory ? (isCollapsed ? "▶" : "▼") : " "
-
-				const statusChar = node.status
-					? (STATUS_CHARS[node.status] ?? " ")
-					: " "
-				const statusColor = node.status
-					? (statusColors()[
-							node.status as keyof ReturnType<typeof statusColors>
-						] ?? colors().text)
-					: colors().text
-
-				const handleDoubleClick = createDoubleClickDetector(() => {
-					if (node.isDirectory) {
-						props.toggleFolder(node.path)
-					} else {
-						focus.setPanel("detail")
-					}
-				})
-
-				const handleMouseDown = (e: { stopPropagation: () => void }) => {
-					e.stopPropagation()
-					props.setSelectedIndex(index())
-					if (node.isDirectory) {
-						props.toggleFolder(node.path)
-					} else {
-						handleDoubleClick()
-					}
-				}
-
-				return (
-					<box
-						backgroundColor={
-							isSelected() ? colors().selectionBackground : undefined
-						}
-						overflow="hidden"
-						onMouseDown={handleMouseDown}
-					>
-						<text>
-							<span style={{ fg: colors().textMuted }}>{indent}</span>
-							<span
-								style={{
-									fg: node.isDirectory ? colors().info : colors().textMuted,
-								}}
-							>
-								{icon}{" "}
-							</span>
-							<Show when={!node.isDirectory}>
-								<span style={{ fg: statusColor }}>{statusChar} </span>
-							</Show>
-							<span
-								style={{
-									fg: node.isDirectory ? colors().info : colors().text,
-								}}
-							>
-								{node.name}
-							</span>
-						</text>
-					</box>
-				)
-			}}
-		</For>
-	)
-}

package/src/components/Layout.tsx

@@ -1,48 +0,0 @@
-import type { JSX } from "solid-js"
-import { useTheme } from "../context/theme"
-import { StatusBar } from "./StatusBar"
-import { CommandLogPanel } from "./panels/CommandLogPanel"
-
-interface LayoutProps {
-	top: JSX.Element
-	bottom: JSX.Element
-	right: JSX.Element
-}
-
-export function Layout(props: LayoutProps) {
-	const { colors, style } = useTheme()
-
-	return (
-		<box
-			flexGrow={1}
-			flexDirection="column"
-			width="100%"
-			height="100%"
-			backgroundColor={colors().background}
-			padding={style().adaptToTerminal ? 0 : 1}
-			gap={0}
-		>
-			<box flexGrow={1} flexDirection="row" width="100%" gap={0}>
-				<box
-					flexGrow={1}
-					flexBasis={0}
-					height="100%"
-					flexDirection="column"
-					gap={0}
-				>
-					<box flexGrow={3} flexBasis={0}>
-						{props.top}
-					</box>
-					<box flexGrow={1} flexBasis={0}>
-						{props.bottom}
-					</box>
-				</box>
-				<box flexGrow={2} flexBasis={0} height="100%" flexDirection="column">
-					<box flexGrow={1}>{props.right}</box>
-					<CommandLogPanel />
-				</box>
-			</box>
-			<StatusBar />
-		</box>
-	)
-}

package/src/components/Panel.tsx

@@ -1,143 +0,0 @@
-import { For, type JSX, Show } from "solid-js"
-import { useCommand } from "../context/command"
-import { useFocus } from "../context/focus"
-import { useTheme } from "../context/theme"
-import type { Context, Panel as PanelType } from "../context/types"
-import { BorderBox } from "./BorderBox"
-
-interface Tab {
-	id: string
-	label: string
-	context: Context
-}
-
-interface PanelProps {
-	title?: string
-	tabs?: Tab[]
-	activeTab?: string
-	onTabChange?: (tabId: string) => void
-	panelId?: PanelType
-	hotkey: string
-	focused: boolean
-	children: JSX.Element
-}
-
-export function Panel(props: PanelProps) {
-	const { colors, style } = useTheme()
-	const command = useCommand()
-	const focus = useFocus()
-
-	const hasTabs = () => props.tabs && props.tabs.length > 1
-
-	const cycleTab = (direction: 1 | -1) => {
-		if (!props.tabs || props.tabs.length <= 1 || !props.onTabChange) return
-		const currentIndex = props.tabs.findIndex((t) => t.id === props.activeTab)
-		const nextIndex =
-			(currentIndex + direction + props.tabs.length) % props.tabs.length
-		const nextTab = props.tabs[nextIndex]
-		if (nextTab) props.onTabChange(nextTab.id)
-	}
-
-	command.register(() => {
-		if (!hasTabs() || !props.panelId) return []
-
-		return [
-			{
-				id: `${props.panelId}.next_tab`,
-				title: "next tab",
-				keybind: "next_tab",
-				context: props.panelId,
-				type: "navigation",
-				panel: props.panelId,
-				visibility: "help-only" as const,
-				onSelect: () => cycleTab(1),
-			},
-			{
-				id: `${props.panelId}.prev_tab`,
-				title: "previous tab",
-				keybind: "prev_tab",
-				context: props.panelId,
-				type: "navigation",
-				panel: props.panelId,
-				visibility: "help-only" as const,
-				onSelect: () => cycleTab(-1),
-			},
-		]
-	})
-
-	const renderTitle = () => {
-		if (hasTabs()) {
-			return (
-				<text>
-					<Show
-						when={props.focused}
-						fallback={
-							<span style={{ fg: colors().textMuted }}>[{props.hotkey}]</span>
-						}
-					>
-						<span style={{ fg: colors().primary }}>[{props.hotkey}]</span>
-					</Show>
-					<span style={{ fg: colors().textMuted }}>─</span>
-					<For each={props.tabs}>
-						{(tab, i) => (
-							<>
-								<Show when={i() > 0}>
-									<span style={{ fg: colors().textMuted }}> </span>
-								</Show>
-								<span
-									style={{
-										fg:
-											tab.id === props.activeTab
-												? colors().primary
-												: colors().textMuted,
-									}}
-								>
-									{tab.label}
-								</span>
-							</>
-						)}
-					</For>
-				</text>
-			)
-		}
-
-		return (
-			<text>
-				<Show
-					when={props.focused}
-					fallback={
-						<span style={{ fg: colors().textMuted }}>
-							[{props.hotkey}]─{props.title}
-						</span>
-					}
-				>
-					<span style={{ fg: colors().primary }}>
-						[{props.hotkey}]─{props.title}
-					</span>
-				</Show>
-			</text>
-		)
-	}
-
-	const handleMouseDown = () => {
-		if (props.panelId) {
-			focus.setPanel(props.panelId)
-		}
-	}
-
-	return (
-		<BorderBox
-			topLeft={renderTitle}
-			border
-			borderStyle={style().panel.borderStyle}
-			borderColor={props.focused ? colors().borderFocused : colors().border}
-			flexGrow={1}
-			height="100%"
-			overflow="hidden"
-			gap={0}
-			onMouseDown={handleMouseDown}
-		>
-			{props.children}
-		</BorderBox>
-	)
-}

package/src/components/RevisionPicker.tsx

@@ -1,165 +0,0 @@
-import type { ScrollBoxRenderable } from "@opentui/core"
-import { useKeyboard } from "@opentui/solid"
-import { For, Show, createEffect, createSignal, onMount } from "solid-js"
-import type { Commit } from "../commander/types"
-import { useTheme } from "../context/theme"
-import { AnsiText } from "./AnsiText"
-
-export interface RevisionPickerProps {
-	commits: Commit[]
-	defaultRevision?: string
-	selectedRevision?: string
-	onSelect?: (commit: Commit) => void
-	focused?: boolean
-	height?: number
-}
-
-export function RevisionPicker(props: RevisionPickerProps) {
-	const { colors } = useTheme()
-
-	const findDefaultIndex = () => {
-		if (props.defaultRevision) {
-			const idx = props.commits.findIndex(
-				(c) => c.changeId === props.defaultRevision,
-			)
-			return idx >= 0 ? idx : 0
-		}
-		return 0
-	}
-
-	const [selectedIndex, setSelectedIndex] = createSignal(findDefaultIndex())
-
-	let scrollRef: ScrollBoxRenderable | undefined
-	const [scrollTop, setScrollTop] = createSignal(0)
-
-	const scrollToIndex = (index: number, force = false) => {
-		const commitList = props.commits
-		if (!scrollRef || commitList.length === 0) return
-
-		let lineOffset = 0
-		const clampedIndex = Math.min(index, commitList.length)
-		for (const commit of commitList.slice(0, clampedIndex)) {
-			lineOffset += commit.lines.length
-		}
-
-		const margin = 2
-		const refAny = scrollRef as unknown as Record<string, unknown>
-		const viewportHeight =
-			(typeof refAny.height === "number" ? refAny.height : null) ??
-			(typeof refAny.rows === "number" ? refAny.rows : null) ??
-			10
-		const currentScrollTop = scrollTop()
-
-		if (force) {
-			const targetScroll = Math.max(0, lineOffset - margin)
-			scrollRef.scrollTo(targetScroll)
-			setScrollTop(targetScroll)
-			return
-		}
-
-		const visibleStart = currentScrollTop
-		const visibleEnd = currentScrollTop + viewportHeight - 1
-		const safeStart = visibleStart + margin
-		const safeEnd = visibleEnd - margin
-
-		let newScrollTop = currentScrollTop
-		if (lineOffset < safeStart) {
-			newScrollTop = Math.max(0, lineOffset - margin)
-		} else if (lineOffset > safeEnd) {
-			newScrollTop = Math.max(0, lineOffset - viewportHeight + margin + 1)
-		}
-
-		if (newScrollTop !== currentScrollTop) {
-			scrollRef.scrollTo(newScrollTop)
-			setScrollTop(newScrollTop)
-		}
-	}
-
-	createEffect(() => {
-		const _ = props.commits
-		const __ = props.defaultRevision
-		setSelectedIndex(findDefaultIndex())
-	})
-
-	onMount(() => {
-		setTimeout(() => scrollToIndex(selectedIndex(), true), 1)
-	})
-
-	createEffect(() => {
-		scrollToIndex(selectedIndex())
-	})
-
-	const selectPrev = () => {
-		setSelectedIndex((i) => {
-			const newIndex = Math.max(0, i - 1)
-			const commit = props.commits[newIndex]
-			if (commit) props.onSelect?.(commit)
-			return newIndex
-		})
-	}
-
-	const selectNext = () => {
-		setSelectedIndex((i) => {
-			const newIndex = Math.min(props.commits.length - 1, i + 1)
-			const commit = props.commits[newIndex]
-			if (commit) props.onSelect?.(commit)
-			return newIndex
-		})
-	}
-
-	useKeyboard((evt) => {
-		if (!props.focused) return
-
-		if (evt.name === "j" || evt.name === "down") {
-			evt.preventDefault()
-			selectNext()
-		} else if (evt.name === "k" || evt.name === "up") {
-			evt.preventDefault()
-			selectPrev()
-		}
-	})
-
-	createEffect(() => {
-		const commit = props.commits[selectedIndex()]
-		if (commit) props.onSelect?.(commit)
-	})
-
-	return (
-		<Show
-			when={props.commits.length > 0}
-			fallback={<text fg={colors().textMuted}>No commits</text>}
-		>
-			<scrollbox
-				ref={scrollRef}
-				focused={props.focused}
-				flexGrow={1}
-				height={props.height}
-				scrollbarOptions={{ visible: false }}
-			>
-				<For each={props.commits}>
-					{(commit, index) => {
-						const isSelected = () => index() === selectedIndex()
-						return (
-							<For each={commit.lines}>
-								{(line) => (
-									<box
-										backgroundColor={
-											isSelected() ? colors().selectionBackground : undefined
-										}
-										overflow="hidden"
-									>
-										<AnsiText
-											content={line}
-											bold={commit.isWorkingCopy}
-											wrapMode="none"
-										/>
-									</box>
-								)}
-							</For>
-						)
-					}}
-				</For>
-			</scrollbox>
-		</Show>
-	)
-}

package/src/components/StatusBar.tsx

@@ -1,158 +0,0 @@
-import { For, Show, createMemo, createSignal, onCleanup } from "solid-js"
-import { useCommand } from "../context/command"
-import { useDialog } from "../context/dialog"
-import { useFocus } from "../context/focus"
-import { useKeybind } from "../context/keybind"
-import { useLoading } from "../context/loading"
-import { useTheme } from "../context/theme"
-import type { Context } from "../context/types"
-
-function contextMatches(
-	commandContext: Context,
-	activeContext: Context,
-): boolean {
-	if (commandContext === "global") return true
-	return commandContext === activeContext
-}
-
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
-
-export function StatusBar() {
-	const command = useCommand()
-	const dialog = useDialog()
-	const focus = useFocus()
-	const keybind = useKeybind()
-	const loading = useLoading()
-	const { colors, style } = useTheme()
-
-	const [spinnerFrame, setSpinnerFrame] = createSignal(0)
-
-	let spinnerInterval: ReturnType<typeof setInterval> | null = null
-	const startSpinner = () => {
-		if (spinnerInterval) return
-		spinnerInterval = setInterval(() => {
-			setSpinnerFrame((f) => (f + 1) % SPINNER_FRAMES.length)
-		}, 80)
-	}
-	const stopSpinner = () => {
-		if (spinnerInterval) {
-			clearInterval(spinnerInterval)
-			spinnerInterval = null
-		}
-	}
-
-	createMemo(() => {
-		if (loading.isLoading()) {
-			startSpinner()
-		} else {
-			stopSpinner()
-		}
-	})
-
-	onCleanup(() => stopSpinner())
-
-	const relevantCommands = createMemo(() => {
-		const all = command.all()
-		const activeCtx = focus.activeContext()
-		const activePanel = focus.panel()
-
-		const isRelevant = (cmd: (typeof all)[0]) => {
-			if (!cmd.keybind) return false
-			if (!contextMatches(cmd.context, activeCtx)) return false
-			if (cmd.panel && cmd.panel !== activePanel) return false
-			return true
-		}
-
-		const isVisibleInStatusBar = (cmd: (typeof all)[0]) => {
-			const v = cmd.visibility ?? "all"
-			return v === "all" || v === "status-only"
-		}
-
-		const contextCmds = all.filter(
-			(cmd) => isRelevant(cmd) && cmd.context !== "global",
-		)
-		const globalCmds = all.filter(
-			(cmd) => isRelevant(cmd) && cmd.context === "global",
-		)
-
-		const seen = new Set<string>()
-		return [...contextCmds, ...globalCmds].filter((cmd) => {
-			if (!isVisibleInStatusBar(cmd)) return false
-			if (seen.has(cmd.id)) return false
-			seen.add(cmd.id)
-			return true
-		})
-	})
-
-	const separator = () => style().statusBar.separator
-	const gap = () => (separator() ? 0 : 3)
-
-	const dialogHints = createMemo(() => {
-		const hints = dialog.hints()
-		if (hints.length === 0) return []
-		return [
-			...hints,
-			{ key: "esc", label: "close" },
-			{ key: "?", label: "help" },
-		]
-	})
-
-	return (
-		<box
-			height={1}
-			flexShrink={0}
-			paddingLeft={1}
-			paddingRight={1}
-			flexDirection="row"
-			gap={gap()}
-		>
-			<Show when={loading.isLoading()}>
-				<text>
-					<span style={{ fg: colors().warning }}>
-						{SPINNER_FRAMES[spinnerFrame()]}
-					</span>{" "}
-					<span style={{ fg: colors().text }}>{loading.loadingText()}</span>
-					<Show when={separator()}>
-						<span style={{ fg: colors().textMuted }}>{` ${separator()} `}</span>
-					</Show>
-				</text>
-			</Show>
-			<Show
-				when={dialog.isOpen() && dialogHints().length > 0}
-				fallback={
-					<For each={relevantCommands()}>
-						{(cmd, index) => (
-							<text>
-								<span style={{ fg: colors().primary }}>
-									{cmd.keybind ? keybind.print(cmd.keybind) : ""}
-								</span>{" "}
-								<span style={{ fg: colors().text }}>{cmd.title}</span>
-								<Show
-									when={separator() && index() < relevantCommands().length - 1}
-								>
-									<span style={{ fg: colors().textMuted }}>
-										{` ${separator()} `}
-									</span>
-								</Show>
-							</text>
-						)}
-					</For>
-				}
-			>
-				<For each={dialogHints()}>
-					{(hint, index) => (
-						<text>
-							<span style={{ fg: colors().primary }}>{hint.key}</span>{" "}
-							<span style={{ fg: colors().text }}>{hint.label}</span>
-							<Show when={separator() && index() < dialogHints().length - 1}>
-								<span style={{ fg: colors().textMuted }}>
-									{` ${separator()} `}
-								</span>
-							</Show>
-						</text>
-					)}
-				</For>
-			</Show>
-		</box>
-	)
-}