From 16377c30cb21cbace35be261335ed7c2354d2797 Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Fri, 1 Nov 2024 17:40:34 +0100
Subject: [PATCH 1/6] feat: render package search filters

---
 .../components/RuntimeCompatIndicator.tsx     |   2 +-
 frontend/islands/GlobalSearch.tsx             | 135 ++++++++++++++----
 frontend/static/styles.css                    |   4 +
 3 files changed, 110 insertions(+), 31 deletions(-)

diff --git a/frontend/components/RuntimeCompatIndicator.tsx b/frontend/components/RuntimeCompatIndicator.tsx
index 71ba035a..06fec054 100644
--- a/frontend/components/RuntimeCompatIndicator.tsx
+++ b/frontend/components/RuntimeCompatIndicator.tsx
@@ -17,7 +17,7 @@ export const RUNTIME_COMPAT_KEYS: [
   ["node", "Node.js", "/logos/node.svg", 256, 292],
   ["workerd", "Cloudflare Workers", "/logos/cloudflare-workers.svg", 416, 375],
   ["bun", "Bun", "/logos/bun.svg", 435, 435],
-];
+] as const;
 
 export function RuntimeCompatIndicator(
   { runtimeCompat, hideUnknown, compact }: {
diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index 4ca63792..74df27cd 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -7,7 +7,7 @@ import { Highlight } from "@orama/highlight";
 import { IS_BROWSER } from "$fresh/runtime.ts";
 import type { OramaPackageHit, SearchKind } from "../util.ts";
 import { api, path } from "../utils/api.ts";
-import { List, Package } from "../utils/api_types.ts";
+import type { List, Package, RuntimeCompat } from "../utils/api_types.ts";
 import { PackageHit } from "../components/PackageHit.tsx";
 import { useMacLike } from "../utils/os.ts";
 import type { ListDisplayItem } from "../components/List.tsx";
@@ -170,6 +170,16 @@ export function GlobalSearch(
   };
 
   function onKeyUp(e: KeyboardEvent) {
+    if (
+      e.key === "ArrowRight" &&
+      (e.currentTarget! as HTMLInputElement).selectionStart ===
+        search.value.length &&
+      tokenizeFilter(search.value).at(-1)?.kind !== "text"
+    ) {
+      search.value += " ";
+      return;
+    }
+
     if (suggestions.value === null) return;
     if (e.key === "ArrowDown") {
       selectionIdx.value = Math.min(
@@ -230,22 +240,38 @@ export function GlobalSearch(
         <label htmlFor="global-search-input" class="sr-only">
           {kindPlaceholder}
         </label>
-        <input
-          type="search"
-          name="search"
-          class={`block w-full search-input bg-white/90 input rounded-r-none ${sizeClasses} relative`}
-          placeholder={placeholder}
-          value={query}
-          onInput={onInput}
-          onKeyUp={onKeyUp}
-          onFocus={() => isFocused.value = true}
-          autoComplete="off"
-          aria-expanded={showSuggestions}
-          aria-autocomplete="list"
-          aria-controls="package-search-results"
-          role="combobox"
-          id="global-search-input"
-        />
+        <div class="relative w-full">
+          <input
+            type="search"
+            name="search"
+            class={`w-full h-full search-input bg-white/90 !text-transparent !caret-black input rounded-r-none ${sizeClasses} relative`}
+            placeholder={placeholder}
+            value={search.value}
+            onInput={onInput}
+            onKeyUp={onKeyUp}
+            onFocus={() => isFocused.value = true}
+            autoComplete="off"
+            aria-expanded={showSuggestions}
+            aria-autocomplete="list"
+            aria-controls="package-search-results"
+            role="combobox"
+            id="global-search-input"
+          />
+          {kind === "packages" && (
+            <div
+              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses}`}
+            >
+              {tokenizeFilter(search.value).map((token, i, arr) => (
+                <span>
+                  <span class={token.kind === "text" ? "" : "search-input-tag"}>
+                    {token.raw}
+                  </span>
+                  {((arr.length - 1) !== i) && " "}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
 
         <button
           type="submit"
@@ -344,11 +370,24 @@ function SuggestionList(
             })}
           </ul>
         )}
-      <div class="bg-jsr-gray-50 flex items-center justify-end py-1 px-2 gap-1">
-        <span class="text-sm text-jsr-gray-500">
-          powered by <span class="sr-only">Orama</span>
-        </span>
-        <img class="h-4" src="/logos/orama-dark.svg" alt="" />
+      <div class="bg-jsr-gray-50 flex items-center justify-between py-1 px-2 text-sm">
+        <div>
+          {kind === "packages" && (
+            <a
+              class="link"
+              href="/docs/faq#can-i-filter-packages-by-compatible-runtime-in-the-search"
+              target="_blank"
+            >
+              Search syntax
+            </a>
+          )}
+        </div>
+        <div class="flex items-center gap-1">
+          <span class="text-jsr-gray-500">
+            powered by <span class="sr-only">Orama</span>
+          </span>
+          <img class="h-4" src="/logos/orama-dark.svg" alt="" />
+        </div>
       </div>
     </div>
   );
@@ -397,21 +436,57 @@ function DocsHit(hit: OramaDocsHit, input: Signal<string>): ListDisplayItem {
   };
 }
 
-export function processFilter(
-  search: string,
-): { query: string; where: Record<string, boolean | string> | undefined } {
-  const filters: [string, boolean | string][] = [];
-  let query = "";
+interface TextToken {
+  kind: "text";
+  value: string;
+  raw: string;
+}
+interface ScopeToken {
+  kind: "scope";
+  value: string;
+  raw: string;
+}
+interface RuntimeToken {
+  kind: `runtimeCompat.${keyof RuntimeCompat}`;
+  value: true;
+  raw: string;
+}
+
+type Token = TextToken | ScopeToken | RuntimeToken;
+
+function tokenizeFilter(search: string): Token[] {
+  const tokens: Token[] = [];
+
   for (const part of search.split(" ")) {
     if (part.startsWith("scope:")) {
-      filters.push(["scope", part.slice(6)]);
+      tokens.push({ kind: "scope", value: part.slice(6), raw: part });
     } else if (part.startsWith("runtime:")) {
       const runtime = part.slice(8);
       if (RUNTIME_COMPAT_KEYS.find(([k]) => runtime == k)) {
-        filters.push([`runtimeCompat.${runtime}`, true]);
+        tokens.push({
+          kind: `runtimeCompat.${runtime as keyof RuntimeCompat}`,
+          value: true,
+          raw: part,
+        });
       }
     } else {
-      query += part + " ";
+      tokens.push({ kind: "text", value: part, raw: part });
+    }
+  }
+
+  return tokens;
+}
+
+export function processFilter(
+  search: string,
+): { query: string; where: Record<string, boolean | string> | undefined } {
+  const filters: [string, boolean | string][] = [];
+  let query = "";
+  for (const part of tokenizeFilter(search)) {
+    if (part.kind === "text") {
+      query += part.value + " ";
+    } else {
+      filters.push([part.kind, part.value]);
     }
   }
   const where = Object.fromEntries(filters);
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 32254538..2a95efb1 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -203,6 +203,10 @@
     @apply input-container border-1.5 border-jsr-cyan-900/90;
   }
 
+  .search-input-tag {
+    @apply bg-blue-300/40 rounded text-blue-500 px-0.5 -mx-0.5;
+  }
+
   .select {
     @apply appearance-none outline-none opacity-100;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')

From 7c34017ace77f4f6ee4e84ae55eed9f5d75b8c5d Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Fri, 1 Nov 2024 21:16:44 +0100
Subject: [PATCH 2/6] fix

---
 frontend/islands/GlobalSearch.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index 74df27cd..c25ee467 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -460,6 +460,7 @@ function tokenizeFilter(search: string): Token[] {
   for (const part of search.split(" ")) {
     if (part.startsWith("scope:")) {
       tokens.push({ kind: "scope", value: part.slice(6), raw: part });
+      continue;
     } else if (part.startsWith("runtime:")) {
       const runtime = part.slice(8);
       if (RUNTIME_COMPAT_KEYS.find(([k]) => runtime == k)) {
@@ -468,10 +469,11 @@ function tokenizeFilter(search: string): Token[] {
           value: true,
           raw: part,
         });
+        continue;
       }
-    } else {
-      tokens.push({ kind: "text", value: part, raw: part });
     }
+
+    tokens.push({ kind: "text", value: part, raw: part });
   }
 
   return tokens;

From a6d7c1e2ea83adf6e9682ff8f67b26d69f6c77b9 Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Fri, 1 Nov 2024 22:05:43 +0100
Subject: [PATCH 3/6] don't tokenize scope filter if it has no value

---
 frontend/islands/GlobalSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index c25ee467..1cb592b3 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -458,7 +458,7 @@ function tokenizeFilter(search: string): Token[] {
   const tokens: Token[] = [];
 
   for (const part of search.split(" ")) {
-    if (part.startsWith("scope:")) {
+    if (part.startsWith("scope:") && part.slice(6).length > 0) {
       tokens.push({ kind: "scope", value: part.slice(6), raw: part });
       continue;
     } else if (part.startsWith("runtime:")) {

From 76b3d6862828b3df450bf3ffe393389e7f318410 Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Fri, 1 Nov 2024 22:50:07 +0100
Subject: [PATCH 4/6] proper overflow handling

---
 frontend/islands/GlobalSearch.tsx | 40 ++++++++++++++++++++++++-------
 frontend/static/styles.css        |  2 +-
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index 1cb592b3..08104c36 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -47,6 +47,7 @@ export function GlobalSearch(
   const isFocused = useSignal(false);
   const search = useSignal(query ?? "");
   const btnSubmit = useSignal(false);
+  const inputOverlayContentRef = useRef<HTMLDivElement>(null);
   const sizeClasses = jumbo ? "py-3 px-4 text-lg" : "py-1 px-2 text-base";
 
   const showSuggestions = computed(() =>
@@ -90,6 +91,8 @@ export function GlobalSearch(
   const onInput = (ev: JSX.TargetedEvent<HTMLInputElement>) => {
     const value = ev.currentTarget!.value as string;
     search.value = value;
+    updateOverlayScroll(ev.currentTarget! as HTMLInputElement);
+
     if (value.length >= 1) {
       const searchN = ++searchNRef.current.started;
       const oldAborter = abort.current;
@@ -177,6 +180,7 @@ export function GlobalSearch(
       tokenizeFilter(search.value).at(-1)?.kind !== "text"
     ) {
       search.value += " ";
+      updateOverlayScroll(e.currentTarget! as HTMLInputElement);
       return;
     }
 
@@ -191,6 +195,17 @@ export function GlobalSearch(
     }
   }
 
+  function updateOverlayScroll(element: HTMLElement) {
+    if (inputOverlayContentRef.current) {
+      inputOverlayContentRef.current.style.transform = `translateX(${-element
+        .scrollLeft}px)`;
+    }
+  }
+
+  function onScroll(e: Event) {
+    updateOverlayScroll(e.currentTarget! as HTMLInputElement);
+  }
+
   function onSubmit(e: JSX.TargetedEvent<HTMLFormElement>) {
     if (
       !btnSubmit.value && selectionIdx.value > -1 && suggestions.value !== null
@@ -250,6 +265,7 @@ export function GlobalSearch(
             onInput={onInput}
             onKeyUp={onKeyUp}
             onFocus={() => isFocused.value = true}
+            onScroll={onScroll}
             autoComplete="off"
             aria-expanded={showSuggestions}
             aria-autocomplete="list"
@@ -259,16 +275,22 @@ export function GlobalSearch(
           />
           {kind === "packages" && (
             <div
-              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses}`}
+              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses} `}
             >
-              {tokenizeFilter(search.value).map((token, i, arr) => (
-                <span>
-                  <span class={token.kind === "text" ? "" : "search-input-tag"}>
-                    {token.raw}
-                  </span>
-                  {((arr.length - 1) !== i) && " "}
-                </span>
-              ))}
+              <div class="whitespace-nowrap overflow-hidden">
+                <div ref={inputOverlayContentRef}>
+                  {tokenizeFilter(search.value).map((token, i, arr) => (
+                    <span>
+                      <span
+                        class={token.kind === "text" ? "" : "search-input-tag"}
+                      >
+                        {token.raw}
+                      </span>
+                      {((arr.length - 1) !== i) && " "}
+                    </span>
+                  ))}
+                </div>
+              </div>
             </div>
           )}
         </div>
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 2a95efb1..73bfca8b 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -204,7 +204,7 @@
   }
 
   .search-input-tag {
-    @apply bg-blue-300/40 rounded text-blue-500 px-0.5 -mx-0.5;
+    @apply bg-blue-300/40 rounded-sm text-blue-500 px-0.5 -mx-0.5;
   }
 
   .select {

From 13f2afceb63a86374163e1dd4727faf05ac043f5 Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Mon, 4 Nov 2024 18:57:39 +0100
Subject: [PATCH 5/6] handle label cutoff

---
 frontend/islands/GlobalSearch.tsx | 31 ++++++++++++++++++++++++++-----
 frontend/static/styles.css        |  2 +-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index 08104c36..25c00a68 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -48,6 +48,7 @@ export function GlobalSearch(
   const search = useSignal(query ?? "");
   const btnSubmit = useSignal(false);
   const inputOverlayContentRef = useRef<HTMLDivElement>(null);
+  const inputOverlayContent2Ref = useRef<HTMLDivElement>(null);
   const sizeClasses = jumbo ? "py-3 px-4 text-lg" : "py-1 px-2 text-base";
 
   const showSuggestions = computed(() =>
@@ -196,9 +197,9 @@ export function GlobalSearch(
   }
 
   function updateOverlayScroll(element: HTMLElement) {
-    if (inputOverlayContentRef.current) {
-      inputOverlayContentRef.current.style.transform = `translateX(${-element
-        .scrollLeft}px)`;
+    if (inputOverlayContentRef.current && inputOverlayContent2Ref.current) {
+      inputOverlayContentRef.current.style.transform = `translateX(${-element.scrollLeft}px)`;
+      inputOverlayContent2Ref.current.style.transform = `translateX(${-element.scrollLeft}px)`;
     }
   }
 
@@ -275,9 +276,9 @@ export function GlobalSearch(
           />
           {kind === "packages" && (
             <div
-              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses} `}
+              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses} ${jumbo ? "!px-3.5" : "!px-1.5"}`}
             >
-              <div class="whitespace-nowrap overflow-hidden">
+              <div class="whitespace-nowrap overflow-hidden !text-transparent px-0.5">
                 <div ref={inputOverlayContentRef}>
                   {tokenizeFilter(search.value).map((token, i, arr) => (
                     <span>
@@ -293,6 +294,26 @@ export function GlobalSearch(
               </div>
             </div>
           )}
+          {kind === "packages" && (
+            <div
+              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses} `}
+            >
+              <div class="whitespace-nowrap overflow-hidden">
+                <div ref={inputOverlayContent2Ref}>
+                  {tokenizeFilter(search.value).map((token, i, arr) => (
+                    <span>
+                      <span
+                        class={token.kind === "text" ? "" : "text-blue-500"}
+                      >
+                        {token.raw}
+                      </span>
+                      {((arr.length - 1) !== i) && " "}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
         </div>
 
         <button
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 73bfca8b..919732eb 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -204,7 +204,7 @@
   }
 
   .search-input-tag {
-    @apply bg-blue-300/40 rounded-sm text-blue-500 px-0.5 -mx-0.5;
+    @apply bg-blue-300/40 rounded-sm px-0.5 -mx-0.5;
   }
 
   .select {

From a7501d6265d9ee06761852721fbfa8ed715ee98b Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Mon, 4 Nov 2024 21:08:38 +0100
Subject: [PATCH 6/6] fmt

---
 frontend/islands/GlobalSearch.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index 25c00a68..cd946b0a 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -198,8 +198,10 @@ export function GlobalSearch(
 
   function updateOverlayScroll(element: HTMLElement) {
     if (inputOverlayContentRef.current && inputOverlayContent2Ref.current) {
-      inputOverlayContentRef.current.style.transform = `translateX(${-element.scrollLeft}px)`;
-      inputOverlayContent2Ref.current.style.transform = `translateX(${-element.scrollLeft}px)`;
+      inputOverlayContentRef.current.style.transform = `translateX(${-element
+        .scrollLeft}px)`;
+      inputOverlayContent2Ref.current.style.transform = `translateX(${-element
+        .scrollLeft}px)`;
     }
   }
 
@@ -276,7 +278,9 @@ export function GlobalSearch(
           />
           {kind === "packages" && (
             <div
-              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses} ${jumbo ? "!px-3.5" : "!px-1.5"}`}
+              class={`search-input !bg-transparent !border-transparent select-none pointer-events-none inset-0 absolute ${sizeClasses} ${
+                jumbo ? "!px-3.5" : "!px-1.5"
+              }`}
             >
               <div class="whitespace-nowrap overflow-hidden !text-transparent px-0.5">
                 <div ref={inputOverlayContentRef}>