feat: autocomplete tags

Author: Poggicek

src/components/Search/index.tsx

@@ -1,7 +1,8 @@
-import React, { useContext, useEffect, useRef, useState, useTransition } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { styled } from "@linaria/react";
 import { SearchContext } from "./SearchContext";
+import { DeclarationsContext } from "../Docs/DeclarationsContext";
 import { KindIcon, IconKind } from "../KindIcon";
 
 export function useCtrlFHook<T extends HTMLElement>() {
@@ -60,7 +61,7 @@ function getLastWord(input: string): string {
   return input.split(" ").at(-1) ?? "";
 }
 
-function shouldShowPopup(input: string): boolean {
+function shouldShowFirstLevelPopup(input: string): boolean {
   return !getLastWord(input).includes(":");
 }
 
@@ -76,6 +77,20 @@ function insertTag(inputValue: string, tag: string): string {
   return parts.join(" ");
 }
 
+function getSecondLevelContext(lastWord: string): { type: "module" | "metadata"; value: string } | null {
+  const lower = lastWord.toLowerCase();
+  if (lower.startsWith("module:")) return { type: "module", value: lastWord.slice(7) };
+  if (lower.startsWith("metadata:")) return { type: "metadata", value: lastWord.slice(9) };
+  return null;
+}
+
+function insertValue(inputValue: string, tagPrefix: string, value: string): string {
+  if (inputValue === "" || inputValue.endsWith(" ")) return inputValue + tagPrefix + value;
+  const parts = inputValue.split(" ");
+  parts[parts.length - 1] = tagPrefix + value;
+  return parts.join(" ");
+}
+
 const SearchBoxWrapper = styled.div`
   position: relative;
   width: 100%;
@@ -145,6 +160,39 @@ const TagItemExample = styled.span`
   flex-shrink: 0;
 `;
 
+const ValuePopupList = styled.div`
+  max-height: 200px;
+  overflow-y: auto;
+`;
+
+function ValueSuggestPopup({
+  header, values, activeIndex, onSelect,
+}: {
+  header: string;
+  values: string[];
+  activeIndex: number;
+  onSelect: (value: string) => void;
+}) {
+  return (
+    <TagPopup role="listbox" aria-label={header}>
+      <TagPopupHeader>{header}</TagPopupHeader>
+      <ValuePopupList>
+        {values.map((v, i) => (
+          <TagItem
+            key={v}
+            role="option"
+            aria-selected={i === activeIndex}
+            data-active={i === activeIndex || undefined}
+            onMouseDown={(e) => { e.preventDefault(); onSelect(v); }}
+          >
+            <TagItemName>{v}</TagItemName>
+          </TagItem>
+        ))}
+      </ValuePopupList>
+    </TagPopup>
+  );
+}
+
 function SearchTagPopup({
   tags, activeIndex, onSelect,
 }: {
@@ -185,6 +233,7 @@ export function SearchBox({
   placeholder?: string;
 }) {
   const { search, setSearch } = useContext(SearchContext);
+  const { declarations } = useContext(DeclarationsContext);
   const [inputValue, setInputValue] = useState(search);
   const [isFocused, setIsFocused] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -207,12 +256,44 @@ export function SearchBox({
     // infinite loop: setSearch triggers a navigate which changes location.search.
   }, [location.search]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const uniqueModules = useMemo(() => {
+    const set = new Set<string>();
+    for (const d of declarations) set.add(d.module);
+    return [...set].sort((a, b) => a.localeCompare(b));
+  }, [declarations]);
+
+  const uniqueMetadataKeys = useMemo(() => {
+    const set = new Set<string>();
+    for (const d of declarations) {
+      for (const m of d.metadata) set.add(m.name);
+      if (d.kind === "class") {
+        for (const f of d.fields) for (const m of f.metadata) set.add(m.name);
+      } else {
+        for (const mem of d.members) for (const m of mem.metadata) set.add(m.name);
+      }
+    }
+    return [...set].sort((a, b) => a.localeCompare(b));
+  }, [declarations]);
+
   const lastWord = getLastWord(inputValue);
   const filteredTags = filterTags(lastWord);
-  const showPopup = isFocused && shouldShowPopup(inputValue) && filteredTags.length > 0;
+  const showFirstLevel = isFocused && shouldShowFirstLevelPopup(inputValue) && filteredTags.length > 0;
 
-  const handleTagSelect = (tag: string) => {
-    const newValue = insertTag(inputValue, tag);
+  const secondLevel = getSecondLevelContext(lastWord);
+  const secondLevelValues = useMemo(() => {
+    if (!secondLevel) return [];
+    const list = secondLevel.type === "module" ? uniqueModules : uniqueMetadataKeys;
+    if (secondLevel.value === "") return list;
+    const lower = secondLevel.value.toLowerCase();
+    return list.filter(v => v.toLowerCase().startsWith(lower));
+  }, [secondLevel?.type, secondLevel?.value, uniqueModules, uniqueMetadataKeys]);
+  const isExactMatch = secondLevel != null && secondLevelValues.length === 1 && secondLevelValues[0].toLowerCase() === secondLevel.value.toLowerCase();
+  const showSecondLevel = isFocused && secondLevel != null && secondLevelValues.length > 0 && !isExactMatch;
+
+  const showPopup = showFirstLevel || showSecondLevel;
+  const popupLength = showFirstLevel ? filteredTags.length : secondLevelValues.length;
+
+  const applyNewValue = (newValue: string) => {
     setInputValue(newValue);
     ownNavigateRef.current = true;
     const replace = inputValue !== "" || newValue === "";
@@ -224,6 +305,16 @@ export function SearchBox({
     ref.current?.focus();
   };
 
+  const handleTagSelect = (tag: string) => {
+    applyNewValue(insertTag(inputValue, tag));
+  };
+
+  const handleValueSelect = (value: string) => {
+    if (!secondLevel) return;
+    const tagPrefix = secondLevel.type === "module" ? "module:" : "metadata:";
+    applyNewValue(insertValue(inputValue, tagPrefix, value));
+  };
+
   const onChange: React.ChangeEventHandler<HTMLInputElement> = ({ target: { value } }) => {
     const wasSearching = inputValue !== "";
     setInputValue(value);
@@ -242,9 +333,13 @@ export function SearchBox({
 
   const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (!showPopup) return;
-    if (e.key === "ArrowDown") { e.preventDefault(); setActiveIndex(i => Math.min(i + 1, filteredTags.length - 1)); }
+    if (e.key === "ArrowDown") { e.preventDefault(); setActiveIndex(i => Math.min(i + 1, popupLength - 1)); }
     else if (e.key === "ArrowUp") { e.preventDefault(); setActiveIndex(i => Math.max(i - 1, 0)); }
-    else if (e.key === "Enter" || e.key === "Tab") { if (filteredTags[activeIndex]) { e.preventDefault(); handleTagSelect(filteredTags[activeIndex].tag); } }
+    else if (e.key === "Enter" || e.key === "Tab") {
+      e.preventDefault();
+      if (showFirstLevel && filteredTags[activeIndex]) handleTagSelect(filteredTags[activeIndex].tag);
+      else if (showSecondLevel && secondLevelValues[activeIndex]) handleValueSelect(secondLevelValues[activeIndex]);
+    }
     else if (e.key === "Escape") { setIsFocused(false); }
   };
 
@@ -268,9 +363,17 @@ export function SearchBox({
         autoCorrect="off"
         autoCapitalize="off"
       />
-      {showPopup && (
+      {showFirstLevel && (
         <SearchTagPopup tags={filteredTags} activeIndex={activeIndex} onSelect={handleTagSelect} />
       )}
+      {showSecondLevel && secondLevel && (
+        <ValueSuggestPopup
+          header={secondLevel.type === "module" ? "Modules" : "Metadata Keys"}
+          values={secondLevelValues}
+          activeIndex={activeIndex}
+          onSelect={handleValueSelect}
+        />
+      )}
     </SearchBoxWrapper>
   );
 }