#212 Complete the insert tag dialog

src/ts/content/adapters/tags/getTags.ts

@@ -40,7 +40,7 @@ const rowToSheetDescriptor = ([sheet, topLeft, width, cwColumn, userMapper, as]:
 	const range: Range = `${sheet}!${topLeft}:${right}`;
 	const cwRange: Range = cwColumn ? `${sheet}!${cwColumn}${top}:${cwColumn}` : undefined;
 	const mapper: TagMapper = (userMapper ?? "").includes("$TAG") ? (userMapper as TagMapper) : "$TAG";
-	return {range, mapper, cwRange, name: as ?? sheet};
+	return {range, mapper, cwRange, height: Number(width), name: as ?? sheet};
 };
 
 const getSheetDescriptors = async (): Promise<TagSheetDescriptor[]> => {

src/ts/content/adapters/tags/parseTags.ts

@@ -13,7 +13,7 @@ const parseRows = ({rows, fromRow, depth, nodes, parent}: ParserOptions): number
 	while (row < rows.length) {
 		const {tag, warning} = rows[row][depth] ?? {};
 		if (tag) {
-			const node = {name: tag, parent, warning, children: []};
+			const node = {name: tag, parent, warning, children: [], height: parent.height - 1};
 			parent.children.push(node);
 			// TODO if nodes already contains this tag, we need to emit a warning somehow!!! see #214
 			// Keys in the tag nodes map are lowercase for ez lookup later
@@ -29,8 +29,8 @@ const parseRows = ({rows, fromRow, depth, nodes, parent}: ParserOptions): number
 const parseTags = (sheets: RawTagSheet[]) => {
 	const nodes: TagNodes = new Map();
 	const roots = sheets.map((sheet) => {
-		const rows = sheet.values;
-		const parent = {...sheet, children: []};
+		const {values: rows, ...rest} = sheet;
+		const parent: TagRoot = {...rest, children: []};
 		for (let fromRow = 0; fromRow < rows.length; fromRow = parseRows({rows, fromRow, depth: 0, nodes, parent}) + 1);
 		return parent;
 	});

src/ts/content/adapters/tags/types.ts

@@ -1,17 +1,17 @@
 import {Range} from "../sheets";
 
 type TagMapper = `${string}$TAG${string}`;
-type TagSheetDescriptor = {range: Range; mapper: TagMapper; name: string; cwRange?: Range};
+type TagSheetDescriptor = {range: Range; mapper: TagMapper; name: string; cwRange?: Range; height: number};
 
 type RawTagSheet = TagSheetDescriptor & {values: WarnedTag[][]};
 
-type TagRoot = RawTagSheet & {children: TagTree[]};
+type TagRoot = TagSheetDescriptor & {children: TagTree[]};
 
 /**
  * A tag tree contains the properly cased tag at the root,
  * and a pointer to its parent in the tree
  */
-type TagTree = {name: string; parent: TagTree | TagRoot; warning: boolean; children: TagTree[]};
+type TagTree = {name: string; parent: TagTree | TagRoot; warning: boolean; children: TagTree[]; height: number};
 
 /**
  * TagNodes is a map of lowercase tag to the tag subtree at that tag

src/ts/content/extensions/util/tagValidation/dialogs/insertTags.ts

@@ -38,33 +38,31 @@ const nodeToInsertionButton =
 		onClick: async () => resolve(confirm(tag, remainingTags, node)),
 	});
 
-const confirm = (tag: string, remainingTags: string[], node: TagRoot | TagTree) =>
-	new Promise<string[]>((resolve) =>
+const confirm = (tag: string, remainingTags: string[], node: TagRoot | TagTree) => {
+	const hasSubTag = node.height > 1 && node.children.length > 0;
+	const hasMultipleSubTags = hasSubTag && node.children.length > 1;
+	const oneOf = hasMultipleSubTags ? "one of " : "";
+	const s = hasMultipleSubTags ? "s" : "";
+	const subTagMessage = `Or as a sub tag under ${oneOf}the following existing tag${s}?`;
+	return new Promise<string[]>((resolve) =>
 		createModal({
 			text: `Insert "${tag}" under "${node.name}"?`,
+			subText: hasSubTag ? [subTagMessage] : [],
 			elements: [
 				{
 					kind: "button",
-					text: "Yes",
-					colour: UIColour.GREY,
+					text: `Yes! Insert it under "${node.name}"`,
+					colour: UIColour.GREEN,
 					onClick: async () => resolve(remainingTags.filter((otherTag) => otherTag !== tag)),
 				},
-				...(node.children.length // TODO this kinda but better and checking for depth
-					? [
-							{
-								kind: "button" as const,
-								text: "Deeper",
-								colour: UIColour.BLUE,
-								onClick: async () => resolve(insertTagIntoOneOf(tag, remainingTags, node.children)),
-							},
-					  ]
-					: []),
+				...(hasSubTag ? node.children.map(nodeToInsertionButton(tag, remainingTags, resolve)) : []),
 				{kind: "button", text: "Back", colour: UIColour.RED, onClick: async () => resolve(remainingTags)},
 			],
 			colour: UIColour.BLUE,
 			onCancel: async () => resolve(remainingTags),
 		})
 	);
+};
 
 const insertTagIntoOneOf = (tag: string, remainingTags: string[], options: Array<TagRoot | TagTree>) =>
 	new Promise<string[]>((resolve) =>