feat: refine ask submit screen layout

tests/render-submit.test.ts

@@ -0,0 +1,161 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createInitialState } from "../src/state/create.ts";
+import {
+	applyNumberShortcut,
+	enterOptionNoteMode,
+	enterQuestionNoteMode,
+	saveNote,
+} from "../src/state/transitions.ts";
+import { renderSubmitScreen } from "../src/ui/render-submit.ts";
+
+function mockTheme() {
+	return {
+		fg(color: string, text: string) {
+			return `<${color}>${text}</${color}>`;
+		},
+		bg(color: string, text: string) {
+			return `{${color}}${text}{/${color}}`;
+		},
+		bold(text: string) {
+			return text;
+		},
+	} as never;
+}
+
+test("submit screen uses shorter action labels without extra prompt text", () => {
+	const state = createInitialState({
+		questions: [
+			{
+				id: "q1",
+				label: "Single",
+				prompt: "Pick one primary demo style.",
+				options: [{ value: "code", label: "Code demo" }],
+			},
+		],
+	});
+
+	const lines: string[] = [];
+	renderSubmitScreen(lines, state, mockTheme(), 80);
+
+	assert(!lines.some((line) => line.includes("Submit answers?")));
+	assert(lines.some((line) => line.includes("1. Submit")));
+	assert(lines.some((line) => line.includes("2. Cancel")));
+	assert(!lines.some((line) => line.includes("1. Submit answers")));
+});
+
+test("submit screen renders indented notes before answer and separates questions", () => {
+	let state = createInitialState({
+		questions: [
+			{
+				id: "q1",
+				label: "Single",
+				prompt: "Pick one primary demo style.",
+				options: [{ value: "code", label: "Code demo" }],
+			},
+			{
+				id: "q2",
+				label: "Multi",
+				prompt: "Pick any extra things to include.",
+				options: [{ value: "extra", label: "Extra" }],
+			},
+		],
+	});
+
+	state = enterQuestionNoteMode(state, "q1");
+	state = saveNote(state, "Question note");
+	state = applyNumberShortcut(state, 1);
+	state = enterOptionNoteMode(state, "q1", "code");
+	state = saveNote(state, "Option note");
+	state = enterQuestionNoteMode(state, "q2");
+	state = saveNote(state, "Second note");
+
+	const lines: string[] = [];
+	renderSubmitScreen(lines, state, mockTheme(), 80);
+
+	const firstQuestionIndex = lines.findIndex((line) =>
+		line.includes("<text>Single</text>")
+	);
+	const firstQuestionNoteIndex = lines.findIndex((line) =>
+		line.includes("Question note")
+	);
+	const firstAnswerIndex = lines.findIndex((line) =>
+		line.includes("→ Code demo")
+	);
+	const optionNoteIndex = lines.findIndex((line) =>
+		line.includes("Option note")
+	);
+	const secondQuestionIndex = lines.findIndex((line) =>
+		line.includes("<text>Multi</text>")
+	);
+	const secondQuestionNoteIndex = lines.findIndex((line) =>
+		line.includes("Second note")
+	);
+
+	assert.notEqual(firstQuestionIndex, -1);
+	assert.notEqual(firstQuestionNoteIndex, -1);
+	assert.notEqual(firstAnswerIndex, -1);
+	assert.notEqual(optionNoteIndex, -1);
+	assert.notEqual(secondQuestionIndex, -1);
+	assert.notEqual(secondQuestionNoteIndex, -1);
+	assert(firstQuestionNoteIndex < firstAnswerIndex);
+	assert(optionNoteIndex > firstAnswerIndex);
+	assert(lines[firstQuestionNoteIndex]?.startsWith("     "));
+	assert(lines[optionNoteIndex]?.startsWith("     "));
+	assert.equal(lines[secondQuestionIndex - 1], "");
+	assert(
+		lines.some((line) => line.includes("<syntaxString>Note:</syntaxString>"))
+	);
+	assert(!lines.some((line) => line.includes("Question note:")));
+	assert(!lines.some((line) => line.includes("Code demo note:")));
+	assert(!lines.some((line) => line.includes("Pick one primary demo style.")));
+	assert(
+		!lines.some((line) => line.includes("Pick any extra things to include."))
+	);
+});
+
+test("submit screen renders multi-select option notes under their related answers", () => {
+	let state = createInitialState({
+		questions: [
+			{
+				id: "q1",
+				label: "Multi",
+				prompt: "Pick extras",
+				type: "multi",
+				options: [
+					{ value: "follow-up", label: "Follow-up action" },
+					{ value: "docs", label: "Docs demo" },
+				],
+			},
+		],
+	});
+
+	state = applyNumberShortcut(state, 1);
+	state = applyNumberShortcut(state, 2);
+	state = enterOptionNoteMode(state, "q1", "follow-up");
+	state = saveNote(state, "First note");
+	state = enterOptionNoteMode(state, "q1", "docs");
+	state = saveNote(state, "Second note");
+
+	const lines: string[] = [];
+	renderSubmitScreen(lines, state, mockTheme(), 80);
+
+	const firstAnswerIndex = lines.findIndex((line) =>
+		line.includes("→ Follow-up action")
+	);
+	const firstNoteIndex = lines.findIndex((line) => line.includes("First note"));
+	const secondAnswerIndex = lines.findIndex((line) =>
+		line.includes("→ Docs demo")
+	);
+	const secondNoteIndex = lines.findIndex((line) =>
+		line.includes("Second note")
+	);
+
+	assert.notEqual(firstAnswerIndex, -1);
+	assert.notEqual(firstNoteIndex, -1);
+	assert.notEqual(secondAnswerIndex, -1);
+	assert.notEqual(secondNoteIndex, -1);
+	assert(firstAnswerIndex < firstNoteIndex);
+	assert(firstNoteIndex < secondAnswerIndex);
+	assert(secondAnswerIndex < secondNoteIndex);
+});