Add Search Functionality to Filter Sample List (#524)

## Summary

This PR introduces a search bar to the WebGPU samples page, enabling
users to filter the list of available samples in real time based on
their query.

New <input type="search"> added to the page.
	•	Input value synced with the ?q= query parameter in the URL.
	•	Filtering logic applies on both initial load and live input changes.
	•	Filters against:
	•	Sample title
	•	tocName
	•	Category title

Fixes #379 

Open to suggestions on implementation, UX, or improvements!	


https://github.com/user-attachments/assets/00284135-a95e-42af-998d-11516bfaa7b6

---------

Co-authored-by: yashrajbharticybtekk <[email protected]>

Author: yashrajbharti

index.html

@@ -33,6 +33,27 @@
         <h1>
           <a href="./">WebGPU Samples</a>
         </h1>
+        <search>
+          <hr />
+          <label>
+            <svg
+              width="24px"
+              height="24px"
+              viewBox="0 0 1024 1024"
+              class="icon"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Search</title>
+              <path
+                d="M448 768A320 320 0 1 0 448 128a320 320 0 0 0 0 640z m297.344-76.992l214.592 214.592-54.336 54.336-214.592-214.592a384 384 0 1 1 54.336-54.336z"
+                fill="currentColor"
+              />
+            </svg>
+            <input type="search" name="search" />
+          </label>
+          <hr />
+        </search>
         <input type="checkbox" id="menuToggle">
         <label class="expand" for="menuToggle"></label>
         <div class="panelContents">

public/css/MainLayout.css

@@ -64,6 +64,47 @@ main {
   overflow: auto;
 }
 
+search {
+  inline-size: 100%;
+  margin-block-end: 20px;
+
+  & > hr {
+    border-color: var(--tooltip-border);
+    margin-block: 0;
+  }
+
+  & > label {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    inline-size: 100%;
+    block-size: 50px;
+
+    &:has(input:focus) > svg {
+      display: none;
+    }
+
+    & > svg {
+      margin-inline-start: 10px;
+    }
+
+    & > input {
+      opacity: 0;
+      border: none;
+      block-size: 100%;
+      flex: 1;
+      padding-inline: 20px;
+      background-color: var(--panel-background);
+      font-size: 1rem;
+
+      &:is(:focus) {
+        opacity: 1;
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 768px) {
   .wrapper {
     flex-direction: column;

src/main.ts

@@ -273,47 +273,96 @@ function setSampleIFrameURL(e: PointerEvent, sampleInfo: SampleInfo) {
   setSampleIFrame(sampleInfo);
 }
 
+const searchInput = document.querySelector(
+  'input[type="search"]'
+) as HTMLInputElement;
+
+let debounceTimer: number | undefined;
+
+searchInput.addEventListener('input', () => {
+  clearTimeout(debounceTimer);
+  debounceTimer = window.setTimeout(() => {
+    const q = searchInput.value.trim();
+    const url = new URL(window.location.href);
+
+    if (q) {
+      url.searchParams.set('q', q);
+    } else {
+      url.searchParams.delete('q');
+    }
+
+    // Do NOT touch 'sample' param — we preserve it
+    history.replaceState(null, '', url.toString());
+
+    // Re-render the list
+    sampleListElem.innerHTML = '';
+    samplesByKey.clear();
+    renderSampleList();
+  }, 200); // debounce delay
+});
+
 // Samples are looked up by `?sample=key` so this is a map
 // from those keys to each sample.
 const samplesByKey = new Map<string, SampleInfo>();
 
+renderSampleList();
+
 // Generate the list of samples
-for (const { title, description, samples } of pageCategories) {
-  for (const [key, sampleInfo] of Object.entries(samples)) {
-    samplesByKey.set(key, sampleInfo);
-  }
+function renderSampleList() {
+  const url = new URL(window.location.href);
+  const q = url.searchParams.get('q')?.toLowerCase().trim() || '';
+
+  sampleListElem.innerHTML = '';
+  samplesByKey.clear();
+
+  for (const { title, description, samples } of pageCategories) {
+    const filteredSamples = Object.entries(samples).filter(([, sample]) => {
+      if (!q) return true;
+      const name = sample.name?.toLowerCase() || '';
+      const tocName = sample.tocName?.toLowerCase() || '';
+      const titleMatch = title.toLowerCase().includes(q);
+      return name.includes(q) || tocName.includes(q) || titleMatch;
+    });
 
-  sampleListElem.appendChild(
-    el('ul', { className: 'exampleList' }, [
-      el('div', {}, [
-        el('div', { className: 'sampleCategory' }, [
-          el('h3', {
-            style: { 'margin-top': '5px' },
-            textContent: title,
-            dataset: { tooltip: description },
-          }),
-        ]),
-        ...Object.entries(samples).map(([key, sampleInfo]) =>
-          el('li', {}, [
-            el('a', {
-              href: sampleInfo.external
-                ? sampleInfo.external.url
-                : sampleInfo.filename,
-              ...(!sampleInfo.openInNewTab && {
-                onClick: (e: PointerEvent) => {
-                  setSampleIFrameURL(e, sampleInfo);
-                },
-              }),
-              textContent: `${sampleInfo.tocName || key}${
-                sampleInfo.openInNewTab ? ' ↗️' : ''
-              }`,
-              ...(sampleInfo.openInNewTab && { target: '_blank' }),
+    // Skip categories with no matches
+    if (filteredSamples.length === 0) continue;
+
+    for (const [key, sampleInfo] of filteredSamples) {
+      samplesByKey.set(key, sampleInfo);
+    }
+
+    sampleListElem.appendChild(
+      el('ul', { className: 'exampleList' }, [
+        el('div', {}, [
+          el('div', { className: 'sampleCategory' }, [
+            el('h3', {
+              style: { 'margin-top': '5px' },
+              textContent: title,
+              dataset: { tooltip: description },
             }),
-          ])
-        ),
-      ]),
-    ])
-  );
+          ]),
+          ...filteredSamples.map(([key, sampleInfo]) =>
+            el('li', {}, [
+              el('a', {
+                href: sampleInfo.external
+                  ? sampleInfo.external.url
+                  : sampleInfo.filename,
+                ...(!sampleInfo.openInNewTab && {
+                  onClick: (e: PointerEvent) => {
+                    setSampleIFrameURL(e, sampleInfo);
+                  },
+                }),
+                textContent: `${sampleInfo.tocName || key}${
+                  sampleInfo.openInNewTab ? ' ↗️' : ''
+                }`,
+                ...(sampleInfo.openInNewTab && { target: '_blank' }),
+              }),
+            ])
+          ),
+        ]),
+      ])
+    );
+  }
 }
 
 sourceLElem.addEventListener('click', () => switchToRelativeTab(-1).click());