milestone 24: persist and surface the unsupported-line count

web/src/features/blocklists/BlocklistsPage.tsx

@@ -42,6 +42,10 @@ const styles = stylex.create({
 		marginTop: "1rem",
 		color: colors.textMuted,
 	},
+	note: {
+		marginTop: "0.5rem",
+		color: colors.textMuted,
+	},
 	table: {
 		width: "100%",
 		minWidth: "max-content",
@@ -155,6 +159,7 @@ export default function BlocklistsPage() {
 								<th {...stylex.props(shared.th)}>Wildcards</th>
 								<th {...stylex.props(shared.th)}>Exceptions</th>
 								<th {...stylex.props(shared.th)}>Skipped regex</th>
+								<th {...stylex.props(shared.th)}>Skipped unsupported</th>
 								<th {...stylex.props(shared.th)}>Last updated</th>
 								<th {...stylex.props(shared.th)}>
 									<span {...stylex.props(shared.srOnly)}>Actions</span>
@@ -188,6 +193,9 @@ export default function BlocklistsPage() {
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.wildcard_count}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.exception_count}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.skipped_regex_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{b.skipped_unsupported_count}
+									</td>
 									<td {...stylex.props(shared.td)}>
 										{b.last_updated === null ? "never" : formatTime(b.last_updated)}
 									</td>
@@ -221,6 +229,13 @@ export default function BlocklistsPage() {
 							))}
 						</tbody>
 					</table>
+					<p {...stylex.props(styles.note)}>
+						Both “Skipped” columns count lines nxdns read and did not take. Skipped regex lines are patterns
+						nxdns accepts only from you — adopt one you trust as a regex rule. Skipped unsupported lines are
+						syntax nxdns cannot translate into a DNS decision: cosmetic element hiding, browser-only
+						modifiers. A skipped unsupported count that dwarfs the domain count usually means the list is
+						written for a browser extension, and its DNS or hosts variant will block more here.
+					</p>
 				</div>
 			)}
 			<InlineError error={tableError} />