jb/pi-ask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): tighten ask layout rendering

Browse Source
This commit is contained in:
Erik Kotsiuba
2026-04-25 20:26:07 +02:00
parent 8206be370e
commit 351509838c
8 changed files with 301 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/constants.ts
+1 -1
View File
@@ -10,7 +10,7 @@ export const UI_DIMENSIONS = {
previewLeftMaxWidth: 34,
previewLeftRatio: 0.34,
submitWideMinWidth: 64,
submitActionsWidth: 24,
submitMinReviewWidth: 24,
} as const;
export const UI_TEXT = {
src/ui/render-frame.ts
+60 -64
View File
@@ -45,6 +45,10 @@ export function renderFrameFooter(args: {
add(theme.fg("accent", "─".repeat(Math.max(1, width))));
}
const TAB_PREFIX = " ← ";
const TAB_SUFFIX = " →";
const TAB_SEPARATOR_WIDTH = visibleWidth(" ");
function renderTabs(state: AskState, theme: Theme, width: number): string {
const tabs = state.questions.map((question, index) => {
const active = state.activeTabIndex === index;
@@ -70,18 +74,25 @@ function renderTabs(state: AskState, theme: Theme, width: number): string {
});
const activeIndex = Math.min(state.activeTabIndex, tabs.length - 1);
const availableTabWidth = Math.max(
1,
width - visibleWidth(TAB_PREFIX) - visibleWidth(TAB_SUFFIX)
);
const { start, end } = getVisibleTabRange(
tabs.map((tab) => tab.width),
activeIndex,
Math.max(1, width - 2)
availableTabWidth
);
const leftArrow = theme.fg("dim", "← ");
const rightArrow = theme.fg("dim", " →");
const leftArrow = theme.fg("dim", TAB_PREFIX.trimStart());
const rightArrow = theme.fg("dim", TAB_SUFFIX);
const visibleTabs = tabs
.slice(start, end + 1)
.map((tab) => tab.render)
.join(" ");
return truncateToWidth(` ${leftArrow}${visibleTabs}${rightArrow}`, width);
return truncateToWidth(
`${TAB_PREFIX[0]}${leftArrow}${visibleTabs}${rightArrow}`,
width
);
}
function getVisibleTabRange(
@@ -95,92 +106,76 @@ function getVisibleTabRange(
const totalWidth =
widths.reduce((sum, width) => sum + width, 0) +
Math.max(0, widths.length - 1);
Math.max(0, widths.length - 1) * TAB_SEPARATOR_WIDTH;
if (totalWidth <= availableWidth) {
return { start: 0, end: widths.length - 1 };
}
const zone = activeIndex / Math.max(1, widths.length - 1);
const mode = getViewportMode(zone);
return expandTabs(widths, activeIndex, availableWidth, mode);
}
function getViewportMode(zone: number): "left" | "right" | "balanced" {
if (zone <= 0.33) {
return "right";
}
if (zone >= 0.67) {
return "left";
}
return "balanced";
}
function expandTabs(
widths: number[],
activeIndex: number,
availableWidth: number,
mode: "left" | "right" | "balanced"
): { start: number; end: number } {
const range = { start: activeIndex, end: activeIndex };
let usedWidth = widths[activeIndex] ?? 0;
let preferRight = mode !== "left";
let preferRight = activeIndex <= widths.length - activeIndex - 1;
while (true) {
const directions = getGrowthDirections(mode, preferRight);
const grew = directions.some((direction) => {
const nextWidth = getNextTabWidth(widths, range, direction);
if (
nextWidth === undefined ||
usedWidth + 1 + nextWidth > availableWidth
) {
return false;
}
usedWidth += 1 + nextWidth;
growRange(range, direction);
return true;
});
if (!grew) {
const expansion = getExpandableTab(
widths,
range,
availableWidth,
usedWidth,
preferRight
);
if (!expansion) {
return range;
}
if (mode === "balanced") {
preferRight = !preferRight;
}
usedWidth += TAB_SEPARATOR_WIDTH + expansion.width;
applyTabGrowth(range, expansion.nextIndex, expansion.direction);
preferRight = !preferRight;
}
}
function getGrowthDirections(
mode: "left" | "right" | "balanced",
function getExpandableTab(
widths: number[],
range: { start: number; end: number },
availableWidth: number,
usedWidth: number,
preferRight: boolean
): Array<"left" | "right"> {
if (mode === "left") {
return ["left", "right"];
}
if (mode === "right") {
return ["right", "left"];
):
| { direction: "left" | "right"; nextIndex: number; width: number }
| undefined {
for (const direction of getGrowthDirections(preferRight)) {
const nextIndex = getNextTabIndex(range, direction);
const nextWidth = widths[nextIndex];
if (
nextWidth === undefined ||
usedWidth + TAB_SEPARATOR_WIDTH + nextWidth > availableWidth
) {
continue;
}
return { direction, nextIndex, width: nextWidth };
}
return;
}
function getGrowthDirections(preferRight: boolean): Array<"left" | "right"> {
return preferRight ? ["right", "left"] : ["left", "right"];
}
function getNextTabWidth(
widths: number[],
function getNextTabIndex(
range: { start: number; end: number },
direction: "left" | "right"
): number | undefined {
if (direction === "left") {
return widths[range.start - 1];
}
return widths[range.end + 1];
): number {
return direction === "left" ? range.start - 1 : range.end + 1;
}
function growRange(
function applyTabGrowth(
range: { start: number; end: number },
nextIndex: number,
direction: "left" | "right"
) {
if (direction === "left") {
range.start -= 1;
range.start = nextIndex;
return;
}
range.end += 1;
range.end = nextIndex;
}
function renderFooter(state: AskState, width: number): string[] {
@@ -195,10 +190,10 @@ function renderFooter(state: AskState, width: number): string[] {
const question = getCurrentQuestion(state);
footer = renderFooterText(question?.type === "multi" ? "multi" : "default");
}
return wrapFooterHints(footer, width);
return wrapDelimitedFooterHints(footer, width);
}
function wrapFooterHints(footer: string, width: number): string[] {
function wrapDelimitedFooterHints(footer: string, width: number): string[] {
return footer.split(" · ").reduce<string[]>((lines, chunk) => {
const current = lines.at(-1) ?? "";
const next = current ? `${current} · ${chunk}` : chunk;
@@ -217,6 +212,7 @@ function wrapFooterHints(footer: string, width: number): string[] {
lines.push(...wrappedChunk);
return lines;
}
lines.push(current);
lines.push(...wrappedChunk);
return lines;
}, []);
src/ui/render-helpers.ts
+13
View File
@@ -330,6 +330,19 @@ export function measurePreviewLeftWidth(
);
}
export function getSavedNotePrefixes(
theme: Theme,
args: { indent: string; label?: string }
) {
const title = args.label
? `${args.label} ${UI_TEXT.questionNoteTitle}`
: UI_TEXT.questionNoteTitle;
return {
prefix: `${args.indent}${theme.fg("syntaxString", title)} `,
continuationPrefix: `${args.indent}${" ".repeat(visibleWidth(title) + 1)}`,
};
}
export function renderFooterText(
mode: "input" | "note" | "submit" | "multi" | "default"
) {
src/ui/render-question.ts
+12 -12
View File
@@ -11,6 +11,7 @@ import {
import type { AskDisplayOption } from "../types.ts";
import { UI_DIMENSIONS, UI_TEXT } from "./constants.ts";
import {
getSavedNotePrefixes,
measurePreviewLeftWidth,
mergeColumns,
pushWrappedText,
@@ -57,14 +58,17 @@ function renderQuestionNote(context: QuestionRenderContext): boolean {
if (!existingNote) {
return false;
}
const { prefix, continuationPrefix } = getSavedNotePrefixes(theme, {
indent: " ",
});
pushWrappedText(
lines,
existingNote,
width,
theme,
"muted",
getSavedNotePrefix(theme, " "),
getSavedNoteContinuationPrefix(" ")
prefix,
continuationPrefix
);
lines.push("");
return true;
@@ -154,6 +158,7 @@ function renderPreviewQuestion(context: QuestionRenderContext) {
answer,
option: selectedOption,
selected: true,
// Custom preview options already render their inline editor/content above.
withGap: !selectedOption?.isCustomOption,
});
}
@@ -370,14 +375,17 @@ function renderSavedOptionNote(
return;
}
const { lines, theme, width } = context;
const { prefix, continuationPrefix } = getSavedNotePrefixes(theme, {
indent: " ",
});
pushWrappedText(
lines,
optionNote,
width,
theme,
"muted",
getSavedNotePrefix(theme, " "),
getSavedNoteContinuationPrefix(" ")
prefix,
continuationPrefix
);
}
@@ -429,14 +437,6 @@ function renderIndentedEditor(
});
}
function getSavedNotePrefix(theme: Theme, indent: string): string {
return `${indent}${theme.fg("syntaxString", UI_TEXT.questionNoteTitle)} `;
}
function getSavedNoteContinuationPrefix(indent: string): string {
return `${indent}${" ".repeat(visibleWidth(UI_TEXT.questionNoteTitle) + 1)}`;
}
function getOptionPrefix(
questionType: QuestionRenderContext["question"]["type"],
option: AskDisplayOption,
src/ui/render-submit.ts
+37 -28
View File
@@ -3,7 +3,11 @@ import { SUBMIT_CHOICES } from "../constants.ts";
import { serializeAnswer } from "../state/answers.ts";
import type { AskResult, AskState, AskStateAnswer } from "../types.ts";
import { UI_DIMENSIONS, UI_TEXT } from "./constants.ts";
import { mergeColumns, pushWrappedText } from "./render-helpers.ts";
import {
getSavedNotePrefixes,
mergeColumns,
pushWrappedText,
} from "./render-helpers.ts";
import type { Theme } from "./render-types.ts";
type ReviewAnswer = AskResult["answers"][string] & {
@@ -20,21 +24,21 @@ export function renderSubmitScreen(
width: number
) {
const showAllNotes = state.activeSubmitActionIndex === 1;
const actionColumnWidth = getSubmitActionColumnWidth();
if (shouldUseWideSubmitLayout(width)) {
const leftWidth = UI_DIMENSIONS.submitActionsWidth;
const rightWidth = Math.max(1, width - leftWidth - 2);
if (shouldUseWideSubmitLayout(width, actionColumnWidth)) {
const rightWidth = Math.max(1, width - actionColumnWidth - 2);
const reviewLines = renderSubmitReviewLines(
state,
theme,
rightWidth,
showAllNotes
);
const actionLines = renderSubmitActionLines(state, theme, leftWidth);
const actionLines = renderSubmitActions(state, theme, actionColumnWidth);
for (const line of mergeColumns(
actionLines,
reviewLines,
leftWidth,
actionColumnWidth,
width
)) {
lines.push(line);
@@ -48,7 +52,7 @@ export function renderSubmitScreen(
width,
showAllNotes
);
const actionLines = renderSubmitActionLines(state, theme, width);
const actionLines = renderSubmitActions(state, theme, width);
lines.push(...reviewLines);
lines.push("");
lines.push(...actionLines);
@@ -81,18 +85,22 @@ function renderSubmitReviewLines(
return lines;
}
function renderSubmitActionLines(
state: AskState,
theme: Theme,
width: number
): string[] {
const lines: string[] = [];
renderSubmitActions(lines, state, theme, width);
return lines;
function getSubmitActionColumnWidth(): number {
return Math.max(
...SUBMIT_CHOICES.map((choice, index) =>
visibleWidth(`❯ ${index + 1}. ${choice}`)
)
);
}
function shouldUseWideSubmitLayout(width: number): boolean {
return width >= UI_DIMENSIONS.submitWideMinWidth;
function shouldUseWideSubmitLayout(
width: number,
actionColumnWidth: number
): boolean {
return (
width >= UI_DIMENSIONS.submitWideMinWidth &&
width - actionColumnWidth - 2 >= UI_DIMENSIONS.submitMinReviewWidth
);
}
function renderSubmittedQuestion(
@@ -188,16 +196,16 @@ function renderSubmittedNote(
theme: Theme,
width: number
) {
const indent = " ";
const notePrefix = `${indent}${theme.fg("syntaxString", UI_TEXT.questionNoteTitle)} `;
const continuationPrefix = `${indent}${" ".repeat(visibleWidth(UI_TEXT.questionNoteTitle) + 1)}`;
const { prefix, continuationPrefix } = getSavedNotePrefixes(theme, {
indent: " ",
});
pushWrappedText(
lines,
note,
width,
theme,
"muted",
notePrefix,
prefix,
continuationPrefix
);
}
@@ -209,17 +217,17 @@ function renderLabeledSubmittedNote(
theme: Theme,
width: number
) {
const indent = " ";
const title = `${label} ${UI_TEXT.questionNoteTitle}`;
const notePrefix = `${indent}${theme.fg("syntaxString", title)} `;
const continuationPrefix = `${indent}${" ".repeat(visibleWidth(title) + 1)}`;
const { prefix, continuationPrefix } = getSavedNotePrefixes(theme, {
indent: " ",
label,
});
pushWrappedText(
lines,
note,
width,
theme,
"muted",
notePrefix,
prefix,
continuationPrefix
);
}
@@ -282,11 +290,11 @@ function toReviewAnswer(
}
function renderSubmitActions(
lines: string[],
state: AskState,
theme: Theme,
width: number
) {
): string[] {
const lines: string[] = [];
for (let index = 0; index < SUBMIT_CHOICES.length; index++) {
const selected = index === state.activeSubmitActionIndex;
const prefix = selected ? "❯ " : " ";
@@ -300,4 +308,5 @@ function renderSubmitActions(
prefix
);
}
return lines;
}