From bfb22228cc97f315f360ded477fd8ef0b956ff28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Rodr=C3=ADguez?= <send.email@netux.site>
Date: Fri, 13 Sep 2024 16:59:23 -0300
Subject: [PATCH] Add a search bar to the REPL Reference tab (#1165)

* Add a search bar to the REPL Reference tab
Simple text input that sticks to the top.
Filters by just checking if the search term is in the entry name or synonyms, if available.
---
 .../src/repl/components/panel/Reference.jsx   | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 04297c0b..6411ea7b 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -1,5 +1,7 @@
+import { useMemo, useState } from 'react';
+
 import jsdocJson from '../../../../../doc.json';
-const visibleFunctions = jsdocJson.docs
+const availableFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
 
@@ -10,9 +12,29 @@ const getInnerText = (html) => {
 };
 
 export function Reference() {
+  const [search, setSearch] = useState('');
+
+  const visibleFunctions = useMemo(() => {
+    return availableFunctions.filter((entry) => {
+      if (!search) {
+        return true;
+      }
+
+      return entry.name.includes(search) || (entry.synonyms?.some((s) => s.includes(search)) ?? false);
+    });
+  }, [search]);
+
   return (
     <div className="flex h-full w-full pt-2 text-foreground overflow-hidden">
       <div className="w-42 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
+        <div class="w-full ml-2 mb-2 top-0 sticky">
+          <input
+            className="w-full p-1 bg-background rounded-md"
+            placeholder="Search"
+            value={search}
+            onInput={(event) => setSearch(event.target.value)}
+          />
+        </div>
         {visibleFunctions.map((entry, i) => (
           <a
             key={i}