dsh-plugin-term-dictionary 1.0.0 → 1.1.1

package/lib/core/views.js

@@ -69,6 +69,13 @@ const Icons = {
 			{ width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
 			h("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })
 		),
+	// The group row's icon: the one thing on screen that is not an entry, so it says so without a label.
+	folder: (size) =>
+		h(
+			"svg",
+			{ width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+			h("path", { d: "M1.5 3.5A1 1 0 0 1 2.5 2.5h3.2l1.3 1.6h6.5a1 1 0 0 1 1 1v6.4a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z", stroke: "currentColor", strokeWidth: "1.2", fill: "none" })
+		),
 	pin: (size) =>
 		h(
 			"svg",
@@ -142,11 +149,11 @@ const Icons = {
 };
 
 /** Settings used when the panel is rendered without a settings store (tests, odd hosts). */
-const FALLBACK_SETTINGS = { autoCollect: true, autoAnnotate: true, autoExplain: true, explainLang: "auto", explainDepth: "normal", explainParagraph: true, collectMinLength: 4, collectIdentifiers: false, collectCjk: true };
+const FALLBACK_SETTINGS = { autoCollect: true, autoAnnotate: true, autoExplain: true, explainLang: "auto", explainDepth: "normal", explainParagraph: true, collectMinLength: 4, collectIdentifiers: false, collectCjk: true, entryColumns: "auto", entryRows: "uniform", packSources: [] };
 
 /** The accepted preference values, so the page offers exactly what the store validates. */
-const { EXPLAIN_LANGS, EXPLAIN_DEPTHS, COLLECT_LENGTHS, HOVER_DELAY_MIN, HOVER_DELAY_MAX, HOVER_DELAY_STEP } = require("./settings.js");
-const { buildExport, buildFeedbackReport, parseImport, planImport, domainsIn } = require("./transfer.js");
+const { EXPLAIN_LANGS, EXPLAIN_DEPTHS, COLLECT_LENGTHS, HOVER_DELAY_MIN, HOVER_DELAY_MAX, HOVER_DELAY_STEP, DEFAULT_PACK_SOURCE, ENTRY_COLUMNS, ENTRY_ROWS, MIN_COLUMN_PX } = require("./settings.js");
+const { buildExport, buildFeedbackReport, parseImport, collectFolderImport, planImport, domainsIn } = require("./transfer.js");
 const { FEEDBACK_KINDS, isFlagged, entryAsText } = require("./entries.js");
 const { refuseUrl } = require("./pack.js");
 const { selectionInside } = require("./selection.js");
@@ -320,13 +327,20 @@ async function importEntries(store, incoming, options) {
 	const plan = planImport(store.getState().entries ?? [], incoming, store.getState().deletedKeys ?? new Set(), {
 		includeDeleted: options?.includeDeleted === true
 	});
+	// Two different acts, deliberately: a term the dictionary never had is a WRITE, while a term the user
+	// deleted is a RESTORATION. `store.restoreEntry` withdraws the tombstone and records the decision; a
+	// write would instead have to BEAT the tombstone in a merge, and it can lose that comparison — which is
+	// exactly "a term that was collected and then deleted could not be restored".
+	const revived = new Set((plan.revived ?? []).map((entry) => entry.key));
 	for (const entry of plan.accepted) {
-		await store.saveEntry(entry.term, {
+		const patch = {
 			definition: entry.definition,
 			domain: entry.domain,
 			aliases: entry.aliases,
 			pinned: entry.pinned
-		});
+		};
+		if (revived.has(entry.key)) await store.restoreEntry(entry.term, patch);
+		else await store.saveEntry(entry.term, patch);
 	}
 	return {
 		imported: plan.accepted.length,
@@ -434,6 +448,21 @@ function TransferPage(props) {
 	 * choice this page offers.
 	 */
 	const [includeGloss, setIncludeGloss] = React.useState(false);
+	/**
+	 * A file that has been read but not imported yet: `{ name, entries, skippedCount, plan }`.
+	 *
+	 * Reading a file and writing it are two decisions, and this state is the gap between them. It exists
+	 * because the second decision used to have no moment of its own: picking a file imported it outright,
+	 * so the only way to see what was in it was the report afterwards.
+	 */
+	const [pending, setPending] = React.useState(null);
+	/**
+	 * Whether a folder import names each entry's category after the folder it came from.
+	 *
+	 * Off by default: it writes a value the user did not type. On is for the shape people actually keep —
+	 * one folder per topic.
+	 */
+	const [useFolderAsGroup, setUseFolderAsGroup] = React.useState(true);
 	/**
 	 * What came back from the host's own feedback channel, or null when nothing was sent yet.
 	 *
@@ -518,7 +547,7 @@ function TransferPage(props) {
 	/** Save the export as a file. */
 	const download = () => downloadText(textOf(), `term-dictionary-${new Date().toISOString().slice(0, 10)}.json`);
 
-	/** Take a file, and say what came of it. */
+	/** Take a file: read it, show what is in it, and write nothing until the user says so. */
 	const takeFile = async (event) => {
 		const file = event?.target?.files?.[0];
 		if (file === undefined || file === null) return;
@@ -529,9 +558,76 @@ function TransferPage(props) {
 				setReport({ failed: parsed.error });
 				return;
 			}
-			// Through the shared path, so a file and a pack cannot diverge in what they do with an
-			// entry — including the crafted revival that makes a term the user deleted stay revived.
-			setReport(await importEntries(store, parsed.entries, { includeDeleted, skipped: parsed.skipped ?? 0 }));
+			// The previous import's report goes away when a new file is read: it describes something that
+			// has already happened, and leaving it under a fresh confirmation reads as if it described
+			// this one.
+			setReport(null);
+			// The plan is a DRY RUN: `planImport` is pure, so the page can say what would happen without
+			// any of it happening. The write path recomputes it at the moment of the write, so a preview
+			// that went stale (another window deleted something) cannot import the stale answer.
+			setPending({ name: file.name, entries: parsed.entries, skippedCount: parsed.skipped ?? 0, plan: planFor(parsed.entries, includeDeleted) });
+		} catch (error) {
+			setReport({ failed: String(error?.message ?? error) });
+		} finally {
+			setBusy(false);
+		}
+	};
+
+	/** The dry-run plan for a set of incoming records, used by the preview and by the write. */
+	function planFor(incoming, withDeleted) {
+		return planImport(store.getState().entries ?? [], incoming, store.getState().deletedKeys ?? new Set(), { includeDeleted: withDeleted === true });
+	}
+
+	/** The confirmation the user actually presses. */
+	const confirmImport = async () => {
+		if (pending === null || busy) return;
+		setBusy(true);
+		try {
+			const result = await importEntries(store, pending.entries, { includeDeleted, skipped: pending.skippedCount });
+			// The panel owns the view, so IT decides what has to move to show what was just written — and
+			// says whether it had to. An import that lands while the list is filtered to 「已删除」 or
+			// narrowed by a search looks exactly like an import that did nothing, which is how this was
+			// reported once ("the imported entries do not appear").
+			const moved = typeof props.onImported === "function" && props.onImported() === true;
+			setReport(moved ? { ...result, moved: true } : result);
+			setPending(null);
+		} catch (error) {
+			setReport({ failed: String(error?.message ?? error) });
+		} finally {
+			setBusy(false);
+		}
+	};
+
+	/**
+	 * Read a whole folder: every `*.json` in it, as one import.
+	 *
+	 * A directory reaches the page through `webkitdirectory`, which is the OS's own directory browser —
+	 * so this needs no new service dependency, and nothing can park the plugin waiting for one. The
+	 * browser supplies `webkitRelativePath`, which is what names a category after its folder.
+	 */
+	const takeFolder = async (event) => {
+		const files = [...(event?.target?.files ?? [])];
+		if (files.length === 0) return;
+		setBusy(true);
+		try {
+			const read = [];
+			for (const file of files) {
+				const path = typeof file.webkitRelativePath === "string" && file.webkitRelativePath !== "" ? file.webkitRelativePath : file.name;
+				read.push({ path, text: await file.text() });
+			}
+			const collected = collectFolderImport(read, { useFolderAsGroup });
+			if (collected.entries.length === 0) {
+				setReport({ failed: collected.skipped.length === 0 ? t("transferNoJson") : t("transferFolderAllSkipped", { count: String(collected.skipped.length) }) });
+				return;
+			}
+			setReport(null);
+			setPending({
+				name: t("transferFolderLabel", { count: String(collected.used) }),
+				entries: collected.entries,
+				skippedCount: 0,
+				plan: planFor(collected.entries, includeDeleted),
+				folder: { files: collected.files, used: collected.used, skipped: collected.skipped }
+			});
 		} catch (error) {
 			setReport({ failed: String(error?.message ?? error) });
 		} finally {
@@ -642,7 +738,13 @@ function TransferPage(props) {
 				type: "checkbox",
 				style: applyStyles.checkbox,
 				checked: includeDeleted,
-				onChange: () => setIncludeDeleted(!includeDeleted)
+				// Toggling this re-plans the preview rather than leaving it: the number the user is about
+				// to confirm is the number this opt-in produces, or the confirmation is a lie.
+				onChange: () => {
+					const next = !includeDeleted;
+					setIncludeDeleted(next);
+					setPending((current) => (current === null ? null : { ...current, plan: planFor(current.entries, next) }));
+				}
 			}),
 			h("span", { style: applyStyles.transferName }, t("transferIncludeDeleted"))
 		),
@@ -655,19 +757,114 @@ function TransferPage(props) {
 			onChange: (event) => void takeFile(event),
 			style: applyStyles.transferFile
 		}),
+		// The folder half. `webkitdirectory` opens the OS's directory browser and hands over every file
+		// inside it, with the path — which is the only directory browser a page needs, and the one that
+		// arrives without a service the plugin could end up parked on.
+		h("p", { style: applyStyles.settingLabel }, t("transferFolderTitle")),
+		h("p", { style: applyStyles.settingHint }, t("transferFolderHint")),
+		h("input", {
+			type: "file",
+			webkitdirectory: "true",
+			directory: "true",
+			multiple: true,
+			"aria-label": t("transferFolderTitle"),
+			disabled: busy,
+			onChange: (event) => void takeFolder(event),
+			style: applyStyles.transferFile,
+			"data-term-dictionary": "transfer-folder"
+		}),
+		h(
+			"label",
+			{ style: applyStyles.transferItem, "data-term-dictionary": "transfer-folder-group" },
+			h("input", { type: "checkbox", style: applyStyles.checkbox, checked: useFolderAsGroup, onChange: () => setUseFolderAsGroup(!useFolderAsGroup) }),
+			h("span", { style: applyStyles.transferName }, t("transferFolderAsGroup"))
+		),
+		// The confirmation. Picking a file used to import it, which made "what is in this file" a
+		// question you could only answer afterwards; the plan below is a dry run, so the answer comes
+		// first and the write waits for a second press.
+		pending === null
+			? null
+			: h(
+				"div",
+				{ style: applyStyles.notice, "data-term-import-pending": "true" },
+				h("p", { style: applyStyles.settingLabel }, t("transferConfirmTitle", { name: pending.name })),
+				h(
+					"p",
+					{ style: applyStyles.settingHint },
+					[
+						t("transferWillImport", { count: String(pending.plan.accepted.length) }),
+						pending.plan.existing.length > 0 ? t("transferWillSkipExisting", { count: String(pending.plan.existing.length) }) : "",
+						pending.plan.deleted.length > 0 ? t("transferWillSkipDeleted", { count: String(pending.plan.deleted.length) }) : "",
+						pending.plan.duplicates + pending.skippedCount > 0 ? t("transferDuplicates", { count: String(pending.plan.duplicates + pending.skippedCount) }) : ""
+					]
+						.filter((part) => part !== "")
+						.join(" · ")
+				),
+				// A folder says what it found and what it had to pass over — by name, because "one file was
+				// skipped" with twenty files in the folder is not an answer.
+				pending.folder === undefined
+					? null
+					: h(
+						"div",
+						null,
+						h("p", { style: applyStyles.settingHint }, t("transferFolderFound", { files: String(pending.folder.files), used: String(pending.folder.used) })),
+						pending.folder.skipped.length === 0
+							? null
+							: h("p", { style: applyStyles.error }, `${t("transferFolderSkipped", { count: String(pending.folder.skipped.length) })} ${pending.folder.skipped.map((each) => `${each.name}（${each.error}）`).join("、")}`)
+					),
+				h(
+					"div",
+					{ style: applyStyles.transferRow },
+					h(Button, { label: t("transferConfirm"), disabled: busy, onClick: () => void confirmImport() }, t("transferConfirm")),
+					h(Button, { label: t("cancel"), onClick: () => setPending(null) }, t("cancel"))
+				)
+			),
 		report === null
 			? null
 			: h(
 				"p",
-				{ style: report.failed === undefined ? applyStyles.settingHint : applyStyles.error },
+				{ style: report.failed === undefined ? applyStyles.settingHint : applyStyles.error, "data-term-report": "true" },
 				report.failed === undefined
-					? t("transferReport", { imported: report.imported, existing: report.existing, deleted: report.deleted, duplicates: report.duplicates })
+					? [t("transferReport", { imported: report.imported, existing: report.existing, deleted: report.deleted, duplicates: report.duplicates }), report.moved === true ? t("transferShown") : ""]
+							.filter((part) => part !== "")
+							.join(" ")
 					: t("transferFailed", { message: report.failed })
 			)
 		//#endregion
 	);
 }
 
+/**
+ * The entry list's layout, given the column preference.
+ *
+ * A module-level function rather than an inline style, and pure, so the rule can be asserted without a
+ * browser: `auto` asks the grid for as many columns as fit at a readable width, a number pins the
+ * layout, and `1` is the plain column the panel had before any of this existed.
+ *
+ * @param columns - `"auto"`, `"1"`, `"2"` or `"3"` (anything else behaves as `auto`).
+ * @returns the style for the list container.
+ */
+function listStyle(columns, rowLayout) {
+	const fixed = Number.parseInt(String(columns), 10);
+	const gridTemplateColumns =
+		Number.isFinite(fixed) && fixed > 1
+			? `repeat(${fixed}, minmax(0, 1fr))`
+			: `repeat(auto-fill, minmax(${MIN_COLUMN_PX}px, 1fr))`;
+	// `stretch` is the default because the complaint was the GAPS: with each cell as tall as its track,
+	// cards line up and no empty strip appears under the short ones. `compact` lets every card keep its
+	// own height instead, which is tidier in a column but leaves those strips — so it is a choice.
+	return {
+		...applyStyles.list,
+		display: "grid",
+		// Rows are as tall as their content, and the leftover height stays at the bottom. Without this a
+		// grid STRETCHES its rows to fill the container, so two cards in a tall panel became two 700px
+		// boxes — the opposite of what "equal cards" was asking for.
+		alignContent: "start",
+		alignItems: rowLayout === "compact" ? "start" : "stretch",
+		gridTemplateColumns
+	};
+}
+
 /**
  * Term packs: hand this dictionary to somebody, or take theirs.
  *
@@ -710,6 +907,7 @@ function PacksPage(props) {
 	/** One row per source after a refresh: `{ url, ok, stale, error, index }`. */
 	const [listing, setListing] = React.useState(null);
 	const [packNote, setPackNote] = React.useState({});
+	const [autoRefreshed, setAutoRefreshed] = React.useState(false);
 	/** Say something in the page's one notice line rather than in a dialog. */
 	const say = (message) => setNotice(message);
 
@@ -786,6 +984,25 @@ function PacksPage(props) {
 		}
 	};
 
+	/**
+	 * Ask the reader's own sources what they hold, once, when the page first opens.
+	 *
+	 * Without it a fresh install shows a configured source and nothing else, and "press 刷新" is a step
+	 * whose purpose nobody can guess. The request goes to the sources THEY have (the shipped default
+	 * included), the host does the fetching and caches it for an hour, and the list stays theirs to clear
+	 * — a source removed here is not added back, which is why this looks at the length rather than at
+	 * whether the list is the default one.
+	 *
+	 * Declared after `refresh` on purpose: the effect callback runs on the first render in some
+	 * harnesses (and in React's own test renderers), and a callback closing over a `const` below it
+	 * would read an uninitialised binding.
+	 */
+	React.useEffect(() => {
+		if (autoRefreshed || sources.length === 0) return;
+		setAutoRefreshed(true);
+		void refresh();
+	}, [autoRefreshed, sources.length]);
+
 	/** Fetch one listed pack and offer it for import. */
 	const preview = async (row, listed) => {
 		if (typeof packApi?.fetch !== "function") return say(t("packNoHost"));
@@ -957,6 +1174,9 @@ function PacksPage(props) {
 					h(
 						"div",
 						{ key: url, style: applyStyles.transferItem, "data-term-source": url },
+						// The shipped one says so: a source nobody remembers adding is a source nobody dares
+						// remove, and this one is removable like any other.
+						url === DEFAULT_PACK_SOURCE ? h("span", { style: applyStyles.badge }, t("packBuiltInSource")) : null,
 						h("span", { style: applyStyles.transferName }, url),
 						h(Button, { label: t("packRemoveSource"), onClick: () => settingsStore?.set?.("packSources", sources.filter((each) => each !== url)) }, t("packRemoveSource"))
 					)
@@ -965,7 +1185,7 @@ function PacksPage(props) {
 		h(
 			"div",
 			{ style: applyStyles.transferRow },
-			h(Field, { label: t("packAddSourceLabel"), value: sourceDraft, placeholder: t("packAddSourcePlaceholder"), onChange: setSourceDraft }),
+			h(Field, { label: t("packAddSourceLabel"), value: sourceDraft, placeholder: t("packAddSourcePlaceholder"), width: "30em", onChange: setSourceDraft }),
 			h(Button, { label: t("packAddSource"), disabled: busy, onClick: addSource }, t("packAddSource")),
 			h(Button, { label: t("packRefresh"), disabled: busy || sources.length === 0, onClick: () => void refresh() }, t("packRefresh"))
 		),
@@ -1169,6 +1389,28 @@ function SettingsPage(props) {
 				onSelect: (value) => setSwitch("explainDepth", value)
 			})
 		),
+		row(
+			"rows",
+			t("entryRowsName"),
+			t("entryRowsHint"),
+			h(OptionBar, {
+				label: t("entryRowsName"),
+				value: ENTRY_ROWS.includes(settings.entryRows) ? settings.entryRows : "uniform",
+				options: ENTRY_ROWS.map((value) => ({ value, label: t(`entryRows_${value}`) })),
+				onSelect: (value) => setSwitch("entryRows", value)
+			})
+		),
+		row(
+			"columns",
+			t("entryColumnsName"),
+			t("entryColumnsHint"),
+			h(OptionBar, {
+				label: t("entryColumnsName"),
+				value: ENTRY_COLUMNS.includes(settings.entryColumns) ? settings.entryColumns : "auto",
+				options: ENTRY_COLUMNS.map((value) => ({ value, label: t(`entryColumns_${value}`) })),
+				onSelect: (value) => setSwitch("entryColumns", value)
+			})
+		),
 		flag(
 			"identifiers",
 			t("collectIdentifiersOn"),
@@ -1243,6 +1485,15 @@ function IconButton(props) {
 }
 
 /** A labelled text input. */
+/**
+ * A labelled text field.
+ *
+ * One width for every single-line field, because a form of differently-sized boxes reads as a mistake
+ * rather than as a decision. `width` overrides the cap for the rare field whose content really is longer
+ * (a URL, a path), and a multi-line field is an {@link Area} and takes the full width instead.
+ */
+const FIELD_WIDTH = "22em";
+
 function Field(props) {
 	return h(
 		"label",
@@ -1253,7 +1504,7 @@ function Field(props) {
 			value: props.value,
 			placeholder: props.placeholder,
 			onChange: (event) => props.onChange(event.target.value),
-			style: applyStyles.input,
+			style: { ...applyStyles.input, maxWidth: props.width ?? FIELD_WIDTH },
 			"aria-label": props.label
 		})
 	);
@@ -1317,6 +1568,8 @@ function DictionaryPanel(props) {
 	);
 	const [query, setQuery] = React.useState("");
 	const [filter, setFilter] = React.useState("all");
+	/** How the entry list is laid out; the settings store owns the value, this only reads it. */
+	const columns = settings.entryColumns ?? FALLBACK_SETTINGS.entryColumns;
 	const [editing, setEditing] = React.useState(null);
 	/** Whether the panel is showing its settings page instead of the entry list. */
 	const [settingsOpen, setSettingsOpen] = React.useState(false);
@@ -1363,7 +1616,28 @@ function DictionaryPanel(props) {
 		};
 	}, [store]);
 
-	const visible = React.useMemo(() => store.list(query, filter), [view, query, filter]);
+	/**
+	 * Which group the list is showing: `""` is the top level, otherwise a path like `backend/net`.
+	 *
+	 * Standing somewhere is a property of the VIEW, not of the dictionary — nothing about an entry changes
+	 * because you looked at it — so it is panel state, next to the search box and the tab.
+	 */
+	const [group, setGroup] = React.useState("");
+	/**
+	 * The group being renamed or moved, as `{ group, value }`, or null.
+	 *
+	 * An inline form rather than `prompt()`: Electron does not implement `prompt`, so a rename dialog
+	 * built on it would do nothing at all in the app this plugin runs in.
+	 */
+	const [renaming, setRenaming] = React.useState(null);
+	const visible = React.useMemo(() => store.list(query, filter, group), [view, query, filter, group]);
+	/**
+	 * The groups directly inside the current one, each with how many entries it holds.
+	 *
+	 * They are ROWS of the list rather than a sidebar or a header: a group is the same kind of thing as an
+	 * entry — something you open — and the point of the shape is that both are the same size on screen.
+	 */
+	const subGroups = React.useMemo(() => store.groups(group), [view, group]);
 	const current = view.state.entries;
 	/**
 	 * Whether the panel is showing what was deleted.
@@ -1382,6 +1656,59 @@ function DictionaryPanel(props) {
 	 */
 	const showingFlagged = filter === "flagged";
 
+	/**
+	 * Make what an import just wrote visible.
+	 *
+	 * The panel owns the view, so this is the panel's job and not the import page's. It returns whether it
+	 * had to move anything, because a report that says "12 imported" while the list is still filtered to
+	 * 「已删除」 is a report nobody can check.
+	 *
+	 * @returns true when the search box or the tab had to change.
+	 */
+	const showImported = () => {
+		const moved = query !== "" || filter !== "all";
+		setQuery("");
+		setFilter("all");
+		return moved;
+	};
+
+	/**
+	 * Rename or move a group, and follow it if the panel was standing inside it.
+	 *
+	 * Following is the point: a reader who renames the folder they are in must still be looking at it
+	 * afterwards, not dropped back at the top wondering where it went.
+	 */
+	const commitRename = async () => {
+		if (renaming === null) return;
+		const result = await store.renameGroup(renaming.group, renaming.value);
+		if (result.error !== null) {
+			props.setToast?.(t(`groupError_${result.error}`));
+			return;
+		}
+		const target = renaming.value.replace(/^\/+|\/+$/g, "");
+		if (group === renaming.group || group.startsWith(`${renaming.group}/`)) {
+			setGroup(group === renaming.group ? target : `${target}${group.slice(renaming.group.length)}`);
+		}
+		setRenaming(null);
+		props.setToast?.(t("groupRenamed", { count: String(result.moved) }));
+	};
+
+	/**
+	 * Delete a group by deleting what is in it, after saying how much that is.
+	 *
+	 * The entries go to 「已删除」 rather than away, so this is reversible — and the count is in the
+	 * question, because "delete this group?" and "delete 12 entries?" are different offers.
+	 */
+	const removeGroup = async (sub) => {
+		if (globalThis.confirm?.(t("groupDeleteConfirm", { name: sub.name, count: String(sub.count) })) !== true) return;
+		const result = await store.deleteGroup(sub.group);
+		if (result.error !== null) {
+			props.setToast?.(t(`groupError_${result.error}`));
+			return;
+		}
+		props.setToast?.(t("groupDeleted", { count: String(result.removed) }));
+	};
+
 	/** Open the editor for a blank entry, prefilled from an optional term. */
 	const startCreate = (term = "", context = "") => {
 		setEditing({
@@ -1391,6 +1718,9 @@ function DictionaryPanel(props) {
 			usage: "",
 			notes: "",
 			domain: "",
+			// A new entry made while standing in a group belongs to that group: that is what standing there
+			// meant, and asking again in the form would be a question with one sensible answer.
+			group,
 			aliases: "",
 			pinned: false,
 			// Nothing to say yet, and `feedbackTouched` is what tells a save apart from a retraction:
@@ -1414,6 +1744,7 @@ function DictionaryPanel(props) {
 			usage: entry.definition.usage,
 			notes: entry.definition.notes,
 			domain: entry.domain,
+			group: entry.group,
 			aliases: entry.aliases.join(", "),
 			pinned: entry.pinned,
 			// Seeded from the entry, and `touched` starts true when there is already a remark: saving
@@ -1475,6 +1806,7 @@ function DictionaryPanel(props) {
 			await store.saveEntry(editing.term, {
 				definition: { zh: editing.zh, gloss: editing.gloss, usage: editing.usage, notes: editing.notes },
 				domain: editing.domain,
+				group: editing.group,
 				aliases: editing.aliases
 					.split(",")
 					.map((alias) => alias.trim())
@@ -1632,6 +1964,12 @@ function DictionaryPanel(props) {
 					placeholder: t("zhPlaceholder"),
 					onChange: (value) => setEditing({ ...editing, zh: value })
 				}),
+				h(Field, {
+					label: t("groupLabel"),
+					value: editing.group,
+					placeholder: t("groupPlaceholder"),
+					onChange: (value) => setEditing({ ...editing, group: value })
+				}),
 				h(Area, {
 					label: t("glossLabel"),
 					value: editing.gloss,
@@ -1764,7 +2102,7 @@ function DictionaryPanel(props) {
 				),
 				h(Button, { label: t("settingsBack"), onClick: () => setTransferOpen(false) }, t("settingsBack"))
 			),
-			h(TransferPage, { store, t, setToast: props.setToast })
+			h(TransferPage, { store, t, setToast: props.setToast, onImported: showImported })
 		);
 	}
 
@@ -1892,14 +2230,118 @@ function DictionaryPanel(props) {
 		) : null,
 		h(
 			"div",
-			{ style: applyStyles.list },
-			showingDeleted
-				? h(DeletedList, { entries: visible, t, onRevive: (entry) => void revive(entry) })
-				: showingFlagged
-				? h(FlaggedList, { entries: visible, t, onClear: (entry) => void clearFlag(entry) })
-				: visible.length === 0
-				? h("p", { style: applyStyles.blank }, current.length === 0 ? t("empty") : t("searchEmpty"))
-				: visible.map((entry) =>
+			// The entry list is the one that gets columns. The deleted and flagged views are lists of
+			// DECISIONS rather than of terms — shorter rows, read one at a time — and the picking mode
+			// pairs every row with a checkbox, so laying those out in a grid would be a change nobody
+			// asked for.
+			{
+				style: showingDeleted || showingFlagged || picking ? applyStyles.list : listStyle(columns, settings.entryRows),
+				"data-term-columns": showingDeleted || showingFlagged || picking ? undefined : columns
+			},
+			// The groups come first, then the entries at this level — one list, one scroll area, one kind of
+			// row. A breadcrumb says where you are and is the way back up, because a directory you can only
+			// enter is a trap.
+			[
+				renaming === null ? null : h(
+					"div",
+					{ style: { ...applyStyles.transferRow, gridColumn: "1 / -1" }, "data-term-group-form": renaming.group },
+					h("span", { style: applyStyles.fieldLabel }, t("groupRenameTo")),
+					h("input", {
+						type: "text",
+						value: renaming.value,
+						"aria-label": t("groupRename"),
+						onChange: (event) => setRenaming({ ...renaming, value: event.target.value }),
+						onKeyDown: (event) => {
+							if (event.key === "Enter") void commitRename();
+							if (event.key === "Escape") setRenaming(null);
+						},
+						style: { ...applyStyles.input, maxWidth: "18em" }
+					}),
+					h(Button, { label: t("groupRenameApply"), onClick: () => void commitRename() }, t("groupRenameApply")),
+					h(Button, { label: t("cancel"), onClick: () => setRenaming(null) }, t("cancel"))
+				),
+				group === "" ? null : h(
+					"div",
+					{ style: { ...applyStyles.breadcrumb, gridColumn: "1 / -1" }, "data-term-breadcrumb": group },
+					[
+						{ path: "", label: t("filterAll") },
+						...group.split("/").map((name, index, all) => ({ path: all.slice(0, index + 1).join("/"), label: name }))
+					].map((crumb, index) =>
+						h(
+							"span",
+							{ key: crumb.path === "" ? "root" : crumb.path, style: applyStyles.breadcrumbPart },
+							index === 0 ? null : h("span", { style: applyStyles.breadcrumbSep }, "›"),
+							h(
+								"button",
+								{
+									type: "button",
+									style: index === group.split("/").length ? applyStyles.breadcrumbHere : applyStyles.breadcrumbButton,
+									onClick: () => setGroup(crumb.path),
+									title: t("groupGo", { name: crumb.label })
+								},
+								crumb.label
+							)
+						)
+					)
+				),
+				...subGroups.map((sub) =>
+					h(
+						"article",
+						{
+						key: `group:${sub.group}`,
+						// It fills its row again, now that the height carries something: with the preview below, the
+						// space that used to be emptiness is the first thing you would see on opening it.
+						style: applyStyles.row,
+						"data-term-group": sub.group,
+						// The WHOLE row opens the group, exactly as the whole row of an entry opens the entry.
+						// Only the label being live is what "the group cannot be clicked into" meant: a reader
+						// clicks the row, the same gesture that works one line below, and nothing happened.
+						// The label stays a button so it is reachable by keyboard and named for a screen reader.
+						onClick: (event) => {
+							// The buttons inside keep their own meaning, exactly as they do on an entry row.
+							if (typeof event?.target?.closest === "function" && event.target.closest("button") !== null) return;
+							setGroup(sub.group);
+						}
+					},
+						h("div", { style: applyStyles.rowHead },
+							h("div", { style: applyStyles.groupIcon, "aria-hidden": "true" }, Icons.folder(14)),
+							h("button", {
+								type: "button",
+								style: applyStyles.termButton,
+								onClick: () => setGroup(sub.group),
+								title: t("groupOpen")
+							}, sub.name),
+							h("span", { style: applyStyles.badge }, t("groupCount", { count: String(sub.count) })),
+							h("span", { style: applyStyles.spacer }),
+							h("span", { style: applyStyles.groupEnter, "aria-hidden": "true" }, "›")
+						),
+						// The same shape an entry row has: a title line, a line of actions, then the body.
+						h(
+							"div",
+							{ style: applyStyles.rowActions, "data-term-group-actions": sub.group },
+							h(IconButton, { title: t("groupRename"), onClick: () => setRenaming({ group: sub.group, value: sub.group }) }, Icons.edit(13)),
+							h(IconButton, { title: t("groupDelete"), onClick: () => void removeGroup(sub) }, Icons.trash(13))
+						),
+						// What is inside, in one line: the row stops being a name over a blank card.
+						h(
+							"p",
+							{ style: applyStyles.groupPreview, "data-term-group-sample": sub.group },
+							[
+								sub.sample.join(t("groupSampleJoin")),
+								sub.count > sub.sample.length ? t("groupSampleMore", { count: String(sub.count - sub.sample.length) }) : ""
+							]
+								.filter((part) => part !== "")
+								.join("")
+						)
+					)
+				),
+				showingDeleted
+					? h(DeletedList, { entries: visible, t, onRevive: (entry) => void revive(entry) })
+					: showingFlagged
+					? h(FlaggedList, { entries: visible, t, onClear: (entry) => void clearFlag(entry) })
+					: visible.length === 0
+					? h("p", { style: { ...applyStyles.blank, gridColumn: "1 / -1" } }, current.length === 0 ? t("empty") : subGroups.length > 0 ? t("groupEmpty") : t("searchEmpty"))
+					: visible.map((entry) =>
 					picking
 						? h(
 							"article",
@@ -1955,6 +2397,10 @@ function DictionaryPanel(props) {
 						h(
 							"div",
 							{ style: applyStyles.rowHead },
+							// The pin comes FIRST, on the title line: it is a state of the entry rather than an
+							// action on it, and the list no longer re-sorts when it changes, so this is where
+							// the state has to be readable.
+							h(IconButton, { title: entry.pinned ? t("unpin") : t("pin"), pressed: entry.pinned, onClick: () => store.togglePinned(entry.id) }, Icons.pin(13)),
 							h("button", {
 								type: "button",
 								style: applyStyles.termButton,
@@ -1971,8 +2417,16 @@ function DictionaryPanel(props) {
 								: null,
 							entry.untrusted === true ? h("span", { style: applyStyles.badgeWarn, "data-term-badge": "untrusted" }, t("flaggedUntrusted")) : null,
 							h("span", { style: applyStyles.spacer }),
-							entry.domain !== "" ? h("span", { style: applyStyles.domain }, entry.domain) : null,
-							h(IconButton, { title: entry.pinned ? t("unpin") : t("pin"), pressed: entry.pinned, onClick: () => store.togglePinned(entry.id) }, Icons.pin(13)),
+							entry.domain !== "" ? h("span", { style: applyStyles.domain }, entry.domain) : null
+						),
+						// Every action on its own line, and always in the same place.
+						//
+						// The title line used to carry them, so their position depended on how long the term
+						// was, which badges it had and whether it had a domain — the controls wandered from
+						// row to row. A toolbar that is always the second line does not.
+						h(
+							"div",
+							{ style: applyStyles.rowActions, "data-term-actions": entry.key },
 							h(IconButton, { title: t("copyEntry"), onClick: () => void copyEntry(entry) }, Icons.copy(13)),
 							h(IconButton, { title: t("feedbackTitle"), pressed: entry.feedback !== null && entry.feedback !== undefined, onClick: () => startEdit(entry) }, Icons.flag(13)),
 							h(IconButton, { title: t("edit"), onClick: () => startEdit(entry) }, Icons.edit(13)),
@@ -1991,6 +2445,7 @@ function DictionaryPanel(props) {
 						)
 					)
 				)
+			]
 		),
 		storageNote(view.hostInfo, t),
 		h(