feat: hash verdict, built filters, unbroken flags

Tables of four columns stack on a phone, and a long table's filter box is written at build time, which ends the layout shift on gaps-files-to-source. Find a file names its counts, its emulators and accepts md5=, crc32= and sha256=, hashes a chosen file on the device and points an unknown hash to contributing. A hash typed in the search folds the pages that only mention it. Words holding a hyphen in command blocks no longer break across lines.

website/src/components/FilePicker.astro

@@ -66,6 +66,25 @@ const packs = Object.fromEntries(
 
 	const INSTALL = 'curl -fsSL https://raw.githubusercontent.com/Abdess/retrobios/main/install.sh | sh -s --';
 	const MAX_ROWS = 500;
+	// A word that holds a hyphen (--platform, nintendo-64dd) never breaks
+	// inside: the same rule as the command blocks (ec-unbroken-tokens.mjs).
+	// Only spans are added, the text copied is the command itself.
+	const UNBROKEN = /(?<!\S)(?=\S*-)\S{1,48}(?!\S)/g;
+
+	const showCommand = (target: HTMLElement, command: string) => {
+		const nodes: (Node | string)[] = [];
+		let last = 0;
+		for (const match of command.matchAll(UNBROKEN)) {
+			nodes.push(command.slice(last, match.index));
+			const word = document.createElement('span');
+			word.className = 'rb-nb';
+			word.textContent = match[0];
+			nodes.push(word);
+			last = match.index! + match[0].length;
+		}
+		nodes.push(command.slice(last));
+		target.replaceChildren(...nodes);
+	};
 
 	const size = (bytes: number) =>
 		bytes >= 1024 ** 3 ? `${(bytes / 1024 ** 3).toFixed(1)} GB`
@@ -107,7 +126,7 @@ const packs = Object.fromEntries(
 				? `${count(files.length)} files, ${size(total)}, for ${count(picked.length)} of ${count(data.systems.length + (data.other ? 1 : 0))} choices. Folder: ${data.folder || 'the setup BIOS folder'}.`
 				: 'Choose at least one system.';
 			output.hidden = !picked.length;
-			cmd.textContent = `${INSTALL} --platform ${data.platform}${all ? '' : ` --system ${picked.join(',')}`}`;
+			showCommand(cmd, `${INSTALL} --platform ${data.platform}${all ? '' : ` --system ${picked.join(',')}`}`);
 			tbody.replaceChildren(...files.slice(0, MAX_ROWS).map(([dest, bytes]) => {
 				const row = document.createElement('tr');
 				const where = document.createElement('td');
@@ -221,7 +240,8 @@ const packs = Object.fromEntries(
 	.rb-picker .rb-pick-systems-head { display: flex; gap: 0.5rem; align-items: center; }
 	.rb-picker .rb-pick-systems-head > * { margin: 0; }
 	.rb-picker .rb-pick-filter { width: 100%; margin: 0.5rem 0; }
-	.rb-picker .rb-pick-cmd code { white-space: pre-wrap; overflow-wrap: anywhere; }
+	.rb-picker .rb-pick-cmd code { white-space: pre-wrap; overflow-wrap: break-word; }
+	.rb-picker .rb-pick-cmd .rb-nb { white-space: nowrap; }
 	.rb-picker .rb-pick-result { margin-top: 1rem; font-weight: 600; }
 	.rb-picker fieldset {
 		flex-direction: column;

website/src/components/Header.astro

@@ -38,7 +38,24 @@ const topics = Astro.locals.starlightSidebarTopics?.topics ?? [];
 		border-radius: 0.5rem;
 		overflow-wrap: anywhere;
 	}
+	.rb-search-hash p { margin: 0; }
 	.rb-search-hash a { font-weight: 600; }
+	/* Under a hash, the pages that only mention its characters stay folded. */
+	.pagefind-ui__drawer[data-rb-hash]:not([data-rb-pages-shown]) .pagefind-ui__results-area { display: none; }
+	.rb-search-hash .rb-search-pages {
+		min-height: 24px;
+		margin-top: 0.5rem;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: var(--sl-color-gray-2);
+		font: inherit;
+		font-size: var(--sl-text-sm);
+		text-decoration: underline;
+		cursor: pointer;
+	}
+	.rb-search-hash .rb-search-pages::before { content: '+ '; }
+	.rb-search-hash .rb-search-pages[aria-expanded='true']::before { content: '- '; }
 	/* Pagefind's own display rules would show what site.ts hides. */
 	#starlight__search [hidden] { display: none !important; }
 

website/src/components/MarkdownContent.astro

@@ -30,4 +30,25 @@ const { searchWeight } = Astro.locals.starlightRoute.entry.data;
 		max-width: 40rem;
 		box-sizing: border-box;
 	}
+	/* The file chooser site.ts adds under the form, and the four hashes it
+	   shows once the file is read. */
+	.sl-markdown-content .rb-file-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; margin-top: 1rem; }
+	.sl-markdown-content .rb-file-pick > * { margin: 0; }
+	.sl-markdown-content .rb-file-pick label { font-weight: 600; }
+	.sl-markdown-content .rb-file-pick input { width: 100%; min-width: 0; font: inherit; }
+	.sl-markdown-content .rb-file-pick input::file-selector-button {
+		min-height: 44px;
+		margin-inline-end: 0.75rem;
+		padding: 0 1rem;
+		border: 1px solid var(--rb-border-strong);
+		border-radius: 4px;
+		background: var(--sl-color-bg);
+		color: var(--sl-color-text);
+		font: inherit;
+		font-weight: 600;
+		cursor: pointer;
+	}
+	.sl-markdown-content .rb-file-pick-note { color: var(--sl-color-gray-3); font-size: var(--sl-text-sm); }
+	.sl-markdown-content .rb-file-pick-hashes code { overflow-wrap: anywhere; }
+	.sl-markdown-content .rb-file-pick-hashes[hidden] { display: none; }
 </style>