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
tests/render-frame.test.ts
+102 -7
View File
@@ -28,6 +28,20 @@ function mockEditor() {
} as never;
}
function plainTheme() {
return {
fg(_color: string, text: string) {
return text;
},
bg(_color: string, text: string) {
return text;
},
bold(text: string) {
return text;
},
} as never;
}
test("tab strip always shows dimmed framing arrows on wide screens", () => {
const state = createInitialState({
title: "Demo",
@@ -98,13 +112,15 @@ test("narrow tab strip keeps active middle tab visible", () => {
const lines = renderAskScreen({
state,
theme: mockTheme(),
theme: plainTheme(),
width: 28,
editor: mockEditor(),
});
assert(lines.some((line) => line.includes("Three")));
assert(!lines.some((line) => line.includes("{selectedBg}<text> One ")));
const tabLine = lines.find((line) => line.includes("← "));
assert.ok(tabLine);
assert(tabLine.includes("Three"));
assert(!tabLine.includes("One"));
});
test("narrow tab strip keeps submit tab visible when active", () => {
@@ -136,13 +152,69 @@ test("narrow tab strip keeps submit tab visible when active", () => {
const lines = renderAskScreen({
state,
theme: mockTheme(),
theme: plainTheme(),
width: 24,
editor: mockEditor(),
});
assert(lines.some((line) => line.includes("Submit")));
assert(lines.some((line) => line.includes("←") || line.includes("→")));
const tabLine = lines.find((line) => line.includes("Submit"));
assert.ok(tabLine);
assert(tabLine.includes("Submit"));
assert(tabLine.includes("←") || tabLine.includes("→"));
});
test("tab strip avoids truncation at narrow boundary widths", () => {
const state = createInitialState({
title: "Demo",
questions: [
{
id: "q1",
label: "One",
prompt: "One",
options: [{ value: "a", label: "A" }],
},
{
id: "q2",
label: "Two",
prompt: "Two",
options: [{ value: "a", label: "A" }],
},
{
id: "q3",
label: "Three",
prompt: "Three",
options: [{ value: "a", label: "A" }],
},
{
id: "q4",
label: "Four",
prompt: "Four",
options: [{ value: "a", label: "A" }],
},
{
id: "q5",
label: "Five",
prompt: "Five",
options: [{ value: "a", label: "A" }],
},
],
});
state.activeTabIndex = 2;
for (const width of [28, 29, 30, 31, 32]) {
const lines = renderAskScreen({
state,
theme: plainTheme(),
width,
editor: mockEditor(),
});
const tabLine = lines.find((line) => line.includes("← "));
assert.ok(tabLine);
assert(tabLine.includes("Three"));
assert(!tabLine.includes("..."));
assert(!tabLine.includes("Fou..."));
assert(!tabLine.includes("Fi..."));
}
});
test("footer hints wrap on narrow screens instead of truncating", () => {
@@ -160,7 +232,7 @@ test("footer hints wrap on narrow screens instead of truncating", () => {
const lines = renderAskScreen({
state,
theme: mockTheme(),
theme: plainTheme(),
width: 26,
editor: mockEditor(),
});
@@ -169,3 +241,26 @@ test("footer hints wrap on narrow screens instead of truncating", () => {
assert(lines.some((line) => line.includes("Enter continue")));
assert(lines.some((line) => line.includes("N/Shift+N note")));
});
test("footer keeps earlier hint chunks when later chunks wrap", () => {
const state = createInitialState({
questions: [
{
id: "q1",
label: "One",
prompt: "One",
options: [{ value: "a", label: "A" }],
},
],
});
const lines = renderAskScreen({
state,
theme: plainTheme(),
width: 22,
editor: mockEditor(),
});
assert(lines.some((line) => line.includes("⇆ tab · ↑↓ select")));
assert(lines.some((line) => line.includes("Enter confirm")));
});
tests/render-question.test.ts
+1 -1
View File
@@ -210,5 +210,5 @@ test("preview custom option reuses the normal inline editor", () => {
const optionIndex = lines.findIndex((line) => line.includes("Type your own"));
const inputIndex = lines.findIndex((line) => line.includes("Type answer..."));
assert.equal(inputIndex, optionIndex + 1);
assert(!lines.some((line) => line.includes("asdasddasdasdasdere")));
assert(!lines.some((line) => line.includes("Preview A")));
});
tests/render-submit.test.ts
+75 -20
View File
@@ -7,15 +7,16 @@ import {
enterQuestionNoteMode,
saveNote,
} from "../src/state/transitions.ts";
import { UI_DIMENSIONS } from "../src/ui/constants.ts";
import { renderSubmitScreen } from "../src/ui/render-submit.ts";
function mockTheme() {
function plainTheme() {
return {
fg(color: string, text: string) {
return `<${color}>${text}</${color}>`;
fg(_color: string, text: string) {
return text;
},
bg(color: string, text: string) {
return `{${color}}${text}{/${color}}`;
bg(_color: string, text: string) {
return text;
},
bold(text: string) {
return text;
@@ -36,7 +37,12 @@ test("submit screen uses shorter action labels without extra prompt text", () =>
});
const lines: string[] = [];
renderSubmitScreen(lines, state, mockTheme(), 80);
renderSubmitScreen(
lines,
state,
plainTheme(),
UI_DIMENSIONS.submitWideMinWidth + 16
);
assert(!lines.some((line) => line.includes("Submit answers?")));
assert(lines.some((line) => line.includes("1. Submit")));
@@ -58,7 +64,12 @@ test("submit screen uses side-by-side layout on wide screens", () => {
});
const lines: string[] = [];
renderSubmitScreen(lines, state, mockTheme(), 120);
renderSubmitScreen(
lines,
state,
plainTheme(),
UI_DIMENSIONS.submitWideMinWidth + 16
);
assert(
lines.some(
@@ -83,7 +94,12 @@ test("submit screen stacks review above actions on narrow screens", () => {
});
const lines: string[] = [];
renderSubmitScreen(lines, state, mockTheme(), 50);
renderSubmitScreen(
lines,
state,
plainTheme(),
UI_DIMENSIONS.submitWideMinWidth - 14
);
const reviewIndex = lines.findIndex((line) =>
line.includes("Review answers")
@@ -127,11 +143,14 @@ test("submit screen shows notes only for answered questions in submit mode", ()
state = saveNote(state, "Second note");
const lines: string[] = [];
renderSubmitScreen(lines, state, mockTheme(), 140);
const firstQuestionIndex = lines.findIndex((line) =>
line.includes("<text>Single</text>")
renderSubmitScreen(
lines,
state,
plainTheme(),
UI_DIMENSIONS.submitWideMinWidth + 76
);
const firstQuestionIndex = lines.findIndex((line) => line.includes("Single"));
const firstQuestionNoteIndex = lines.findIndex((line) =>
line.includes("Question note")
);
@@ -141,9 +160,7 @@ test("submit screen shows notes only for answered questions in submit mode", ()
const optionNoteIndex = lines.findIndex((line) =>
line.includes("Option note")
);
const secondQuestionIndex = lines.findIndex((line) =>
line.includes("<text>Multi</text>")
);
const secondQuestionIndex = lines.findIndex((line) => line.includes("Multi"));
assert.notEqual(firstQuestionIndex, -1);
assert.notEqual(firstQuestionNoteIndex, -1);
@@ -155,9 +172,7 @@ test("submit screen shows notes only for answered questions in submit mode", ()
assert(lines[firstQuestionNoteIndex]?.startsWith(" "));
assert(lines[optionNoteIndex]?.startsWith(" "));
assert.equal(lines[secondQuestionIndex - 1]?.trim(), "");
assert(
lines.some((line) => line.includes("<syntaxString>Note:</syntaxString>"))
);
assert(lines.some((line) => line.includes("Note:")));
assert(!lines.some((line) => line.includes("Second note")));
assert(!lines.some((line) => line.includes("Question note:")));
assert(!lines.some((line) => line.includes("Code demo note:")));
@@ -200,7 +215,12 @@ test("submit screen shows all notes when elaborate action is selected", () => {
state = { ...state, activeSubmitActionIndex: 1 };
const lines: string[] = [];
renderSubmitScreen(lines, state, mockTheme(), 120);
renderSubmitScreen(
lines,
state,
plainTheme(),
UI_DIMENSIONS.submitWideMinWidth + 16
);
assert(lines.some((line) => line.includes("Question note")));
assert(lines.some((line) => line.includes("Selected option note")));
@@ -233,7 +253,12 @@ test("submit screen renders multi-select option notes under their related answer
state = saveNote(state, "Second note");
const lines: string[] = [];
renderSubmitScreen(lines, state, mockTheme(), 140);
renderSubmitScreen(
lines,
state,
plainTheme(),
UI_DIMENSIONS.submitWideMinWidth + 76
);
const firstAnswerIndex = lines.findIndex((line) =>
line.includes("→ Follow-up action")
@@ -254,3 +279,33 @@ test("submit screen renders multi-select option notes under their related answer
assert(firstNoteIndex < secondAnswerIndex);
assert(secondAnswerIndex < secondNoteIndex);
});
test("submit action column fits all action labels at the wide breakpoint", () => {
const state = createInitialState({
questions: [
{
id: "q1",
label: "Color",
prompt: "Pick one color.",
options: [{ value: "blue", label: "Blue" }],
},
],
});
const lines: string[] = [];
renderSubmitScreen(
lines,
state,
plainTheme(),
UI_DIMENSIONS.submitWideMinWidth
);
assert(
lines.some(
(line) => line.includes("1. Submit") && line.includes("Review answers")
)
);
assert(lines.some((line) => line.includes("2. Elaborate")));
assert(lines.some((line) => line.includes("3. Cancel")));
assert(!lines.some((line) => line.includes("Elaborat\n")));
});