/** @jsxImportSource @opentui/solid */ import { TextAttributes } from "@opentui/core" import { createEffect, createMemo, createSignal, type Accessor } from "solid-js" import { transparent, type RunFooterTheme } from "./theme" export const FOOTER_MENU_ROWS = 8 export type RunFooterMenuItem = { display: string description?: string category?: string footer?: string } type RunFooterMenuRow = | { type: "header"; label: string } | { type: "item"; item: RunFooterMenuItem; index: number } | { type: "spacer" } function maxOffset(count: number, limit: number) { return Math.max(0, count - limit) } function previewMargin(limit: number) { return Math.max(0, Math.min(2, Math.floor((limit - 1) / 2))) } function revealOffset(value: number, input: { count: number; limit: number; selected: number }) { const max = maxOffset(input.count, input.limit) if (input.selected < value) { return Math.min(max, input.selected) } if (input.selected >= value + input.limit) { return Math.min(max, input.selected - input.limit + 1) } return Math.min(max, value) } function moveOffset(value: number, input: { count: number; limit: number; selected: number; dir: -1 | 1 }) { const max = maxOffset(input.count, input.limit) const margin = previewMargin(input.limit) if (input.dir < 0 && input.selected < value + margin) { return Math.max(0, Math.min(max, input.selected - margin)) } if (input.dir > 0 && input.selected > value + input.limit - margin - 1) { return Math.min(max, input.selected - input.limit + margin + 1) } return Math.min(max, value) } export function createFooterMenuState(input: { count: Accessor; limit?: number }) { const [selected, setSelected] = createSignal(0) const [offset, setOffset] = createSignal(0) const limit = () => input.limit ?? FOOTER_MENU_ROWS const rows = createMemo(() => Math.max(1, Math.min(limit(), input.count()))) const reveal = (index: number) => { const count = input.count() if (count === 0) { setSelected(0) setOffset(0) return } const next = Math.max(0, Math.min(count - 1, index)) setSelected(next) setOffset((value) => revealOffset(value, { count, limit: limit(), selected: next })) } const reset = () => { setSelected(0) setOffset(0) } createEffect(() => { const count = input.count() if (count === 0) { reset() return } if (selected() >= count) { setSelected(count - 1) } setOffset((value) => revealOffset(value, { count, limit: limit(), selected: selected() })) }) const move = (dir: -1 | 1) => { const count = input.count() if (count === 0) { reset() return } const next = Math.max(0, Math.min(count - 1, selected() + dir)) setSelected(next) setOffset((value) => moveOffset(value, { count, limit: limit(), selected: next, dir })) } return { selected, offset, rows, reveal, reset, move, } } export function RunFooterMenu(props: { id?: string theme: Accessor items: Accessor selected: Accessor offset: Accessor rows: Accessor limit?: number empty?: string border?: boolean paddingLeft?: number paddingRight?: number grouped?: boolean }) { const limit = () => props.limit ?? FOOTER_MENU_ROWS const border = () => props.border ?? true const [groupOffset, setGroupOffset] = createSignal(0) let previous = -1 const groupedRows = createMemo(() => { const all: RunFooterMenuRow[] = [] let category = "" props.items().forEach((item, index) => { if (item.category && item.category !== category) { if (all.length > 0) { all.push({ type: "spacer" }) } category = item.category all.push({ type: "header", label: item.category }) } all.push({ type: "item", item, index }) }) return all }) createEffect(() => { if (!props.grouped) { return } const all = groupedRows() const selected = all.findIndex((item) => item.type === "item" && item.index === props.selected()) if (all.length === 0 || selected === -1) { setGroupOffset(0) previous = props.selected() return } const dir = props.selected() === previous + 1 ? 1 : props.selected() === previous - 1 ? -1 : undefined setGroupOffset((value) => dir ? moveOffset(value, { count: all.length, limit: limit(), selected, dir }) : revealOffset(value, { count: all.length, limit: limit(), selected }), ) previous = props.selected() }) const rows = createMemo(() => { if (!props.grouped) { return props .items() .slice(props.offset(), props.offset() + limit()) .map((item, index) => ({ type: "item", item, index: index + props.offset(), })) } const all = groupedRows() const start = Math.max(0, Math.min(groupOffset(), all.length - limit())) return all.slice(start, start + limit()) }) const descriptionColumn = createMemo(() => { const width = Math.max( 0, ...props .items() .filter((item) => item.description) .map((item) => Bun.stringWidth(item.display)), ) return width === 0 ? 0 : width + 2 }) const descriptionPad = (item: RunFooterMenuItem) => { if (!item.description) { return "" } return " ".repeat(Math.max(1, descriptionColumn() - Bun.stringWidth(item.display))) } return ( {rows().length === 0 ? ( {border() ? ( ┃ ) : undefined} {props.empty ?? "No matching items"} ) : ( rows().map((row) => { if (row.type === "spacer") { return } if (row.type === "header") { return ( {row.label} ) } const active = () => row.index === props.selected() const inset = () => (active() ? 1 : 0) return ( {border() ? ( ┃ ) : undefined} {row.item.display} {row.item.description ? ( {descriptionPad(row.item)} {row.item.description} ) : undefined} {row.item.footer ? ( {row.item.footer} ) : undefined} ) }) )} ) }