Help users find a feature with an interactive binary search (#4119)

Co-authored-by: Federico <me@fregante.com>

1 files changed, 18 insertions, 3 deletions

diff --git a/source/options.tsx b/source/options.tsx
index 87d412cb..27414276 100644
--- a/source/options.tsx
+++ b/source/options.tsx
@@ -16,6 +16,9 @@ interface Status {
 	scopes?: string[];
 }
 
+// Don't repeat the magic variable, or its content will be inlined multiple times
+const features = __featuresMeta__;
+
 function reportStatus({error, text, scopes}: Status): void {
 	const tokenStatus = select('#validation')!;
 	tokenStatus.textContent = text ?? '';
@@ -129,6 +132,18 @@ async function clearCacheHandler(event: Event): Promise<void> {
 	}, 2000);
 }
 
+async function findFeatureHandler(event: Event): Promise<void> {
+	await cache.set<FeatureID[]>('bisect', features.map(({id}) => id), {minutes: 5});
+
+	const button = event.target as HTMLButtonElement;
+	button.disabled = true;
+	setTimeout(() => {
+		button.disabled = false;
+	}, 10_000);
+
+	select('#find-feature-message')!.hidden = false;
+}
+
 function featuresFilterHandler(event: Event): void {
 	const keywords = (event.currentTarget as HTMLInputElement).value.toLowerCase()
 		.replace(/\W/g, ' ')
@@ -158,9 +173,6 @@ async function highlightNewFeatures(): Promise<void> {
 }
 
 async function generateDom(): Promise<void> {
-	// Don't repeat the magic variable, the content will be injected multiple times
-	const features = __featuresMeta__;
-
 	// Generate list
 	select('.js-features')!.append(...features.map(buildFeatureCheckbox));
 
@@ -208,6 +220,9 @@ function addEventListeners(): void {
 	// Add cache clearer
 	select('#clear-cache')!.addEventListener('click', clearCacheHandler);
 
+	// Add bisect tool
+	select('#find-feature')!.addEventListener('click', findFeatureHandler);
+
 	// Add token validation
 	select('[name="personalToken"]')!.addEventListener('input', validateToken);