Add search to filter the plugin list

A slim filter input in the top bar narrows the table client-side as you
type (matching plugin name and URL), with a "no matches" empty state.

Author: dsherret

homeView.tsx

@@ -44,6 +44,25 @@ export function renderHomeHtml(pluginsData: PluginsData) {
             }, 1600);
           });
         }
+
+        // live filter
+        const search = document.getElementById("plugin-search");
+        if (search != null) {
+          const rows = document.getElementsByClassName("plugin-row");
+          const table = document.getElementsByClassName("plugin-table")[0];
+          const noMatches = document.getElementById("no-matches");
+          search.addEventListener("input", () => {
+            const query = search.value.trim().toLowerCase();
+            let visible = 0;
+            for (const row of rows) {
+              const match = query === "" || (row.dataset.search || "").indexOf(query) !== -1;
+              row.hidden = !match;
+              if (match) visible++;
+            }
+            if (table != null) table.hidden = visible === 0;
+            if (noMatches != null) noMatches.hidden = visible !== 0;
+          });
+        }
       });
     </script>
   </head>
@@ -58,9 +77,19 @@ function renderPage(pluginsData: PluginsData) {
   return (
     <main class="page">
       <div class="topbar">
+        <input
+          type="search"
+          id="plugin-search"
+          class="plugin-search"
+          placeholder="Filter plugins…"
+          aria-label="Filter plugins"
+          autocomplete="off"
+          spellcheck={false}
+        />
         <a class="docs-link" href="https://dprint.dev/plugins">dprint plugin docs <span>↗</span></a>
       </div>
       {renderPlugins(pluginsData)}
+      <div id="no-matches" class="no-matches" hidden>No plugins match your filter.</div>
       {renderCommands()}
     </main>
   );
@@ -103,7 +132,7 @@ function renderPlugins(data: PluginsData) {
 
 function renderPlugin(plugin: PluginData) {
   return (
-    <div class="plugin-row" role="row" key={plugin.name}>
+    <div class="plugin-row" role="row" key={plugin.name} data-search={`${plugin.name} ${plugin.url}`.toLowerCase()}>
       <div class="col-name" role="cell">
         <span class="swatch"></span>
         <span class="name-text">{plugin.name}</span>

style.css

@@ -44,9 +44,32 @@ a {
 
 .topbar {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 14px;
   margin-bottom: 22px;
 }
+.plugin-search {
+  flex: 1;
+  min-width: 200px;
+  max-width: 360px;
+  font-family: inherit;
+  font-size: 14px;
+  color: #e8e8ea;
+  background: #181a1e;
+  border: 1px solid #33373f;
+  border-radius: 8px;
+  padding: 9px 13px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.plugin-search::placeholder {
+  color: #6e7681;
+}
+.plugin-search:focus {
+  border-color: #4d5564;
+}
 .docs-link {
   display: inline-flex;
   align-items: center;
@@ -103,6 +126,20 @@ a {
 .plugin-row:hover {
   background: #1d2025;
 }
+.plugin-row[hidden] {
+  display: none;
+}
+
+.no-matches {
+  background: #181a1e;
+  border: 1px solid #33373f;
+  border-radius: 14px;
+  padding: 30px 22px;
+  margin-top: 12px;
+  color: #6e7681;
+  font-size: 14px;
+  text-align: center;
+}
 
 .col-name {
   display: flex;