From 0af23308e840650daff1c23ede8964b41f58cf33 Mon Sep 17 00:00:00 2001
From: sphinxrave <62570796+sphinxrave@users.noreply.github.com>
Date: Thu, 26 Oct 2023 21:33:08 -0700
Subject: [PATCH] search bar finished

---
 .../react/src/components/header/header.tsx    |   4 +-
 .../src/components/header/searchbar/README.md | 118 ------------------
 .../components/AutocompleteDropdownItem.tsx   |  65 ++++++++++
 .../searchbar/{ => components}/QueryBadge.tsx |  35 +++++-
 .../searchbar/{ => components}/SearchBar.tsx  |  94 +++++++-------
 .../useAutocomplete.tsx}                      |   4 +-
 .../{ => hooks}/useClientAutocomplete.tsx     |   4 +-
 .../{ => hooks}/useServerAutocomplete.tsx     |   2 +-
 packages/react/src/shadcn/ui/command.tsx      |   2 +-
 9 files changed, 150 insertions(+), 178 deletions(-)
 delete mode 100644 packages/react/src/components/header/searchbar/README.md
 create mode 100644 packages/react/src/components/header/searchbar/components/AutocompleteDropdownItem.tsx
 rename packages/react/src/components/header/searchbar/{ => components}/QueryBadge.tsx (50%)
 rename packages/react/src/components/header/searchbar/{ => components}/SearchBar.tsx (56%)
 rename packages/react/src/components/header/searchbar/{SearchBarAtoms.tsx => hooks/useAutocomplete.tsx} (96%)
 rename packages/react/src/components/header/searchbar/{ => hooks}/useClientAutocomplete.tsx (96%)
 rename packages/react/src/components/header/searchbar/{ => hooks}/useServerAutocomplete.tsx (96%)

diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
index 7624784c4..9716a47ba 100644
--- a/packages/react/src/components/header/header.tsx
+++ b/packages/react/src/components/header/header.tsx
@@ -13,7 +13,7 @@ import {
   DropdownMenuItem,
 } from "@/shadcn/ui/dropdown-menu";
 import { useAuth } from "@/hooks/useAuth";
-import { SearchBar } from "./searchbar/SearchBar";
+import { SearchBar } from "./searchbar/components/SearchBar";
 
 interface HeaderProps
   extends React.DetailedHTMLProps<
@@ -41,7 +41,7 @@ export function Header({ id }: HeaderProps) {
         <div className="i-heroicons:bars-3 rounded-md p-3" />
       </Button>
       <div className="hidden grow md:flex" />
-      <SearchBar className="max-w-lg" />
+      <SearchBar className="mt-3 max-w-lg self-start" />
       <Button
         size="icon"
         variant="ghost"
diff --git a/packages/react/src/components/header/searchbar/README.md b/packages/react/src/components/header/searchbar/README.md
deleted file mode 100644
index 4a189b46b..000000000
--- a/packages/react/src/components/header/searchbar/README.md
+++ /dev/null
@@ -1,118 +0,0 @@
-## search bar design doc:
-
-Basically it's a multi-select with validation and autocomplete given typed information.
-
-```js
-watch(search, (newValue) => {
-      // reflect value back to input
-      for (const _key of ["has_song", "type", "lang", "other"] as const)
-        ac_opts[_key] = [];
-      // clear ^
-      const [search_class, search_term] = splitSearchClassTerms(
-        newValue,
-        langCategoryReversemapClass.value
-      );
-      console.log(search_class, search_term);
-
-      if (search_class === "org" || search_class === undefined) {
-        const lower_search_term = search_term.toLowerCase();
-        ac_opts.org =
-          orgs.data.value
-            ?.filter(
-              (x) =>
-                x.name.toLowerCase().includes(lower_search_term) ||
-                x.name_jp?.toLowerCase().includes(lower_search_term)
-            )
-            ?.slice(0, search_class === "org" ? 20 : 5) // only give 5 suggestions when searching broadly.
-            ?.map((x) => ({
-              type: "org",
-              value: x.name,
-              text: langPrefs.preferredLocaleFn(x.name, x.name_jp) || x.name,
-            })) || [];
-      } else {
-        ac_opts.org = []; // clear
-      }
-
-      if (search_class === undefined) {
-        const categoryAutofill = FIRST_SEARCH.filter((x) =>
-          t(`search.class.${x.type}`, x.type).startsWith(search_term)
-        );
-
-        const ok = JSON_SCHEMA.search.suggestionOK?.(query.value);
-        ac_opts.other = ok
-          ? [
-              {
-                type: "search",
-                value: search_term,
-                text: "?",
-                replace: ok === "replace",
-              },
-              ...categoryAutofill,
-            ]
-          : categoryAutofill;
-        return;
-      }
-
-      // everything else only gets autocompleted when needed:
-      switch (search_class) {
-        case "has_song":
-          const ok = JSON_SCHEMA.has_song.suggestionOK?.(query.value);
-          if (ok) {
-            ac_opts.has_song = [
-              {
-                type: "has_song",
-                value: "none",
-                text: "$t",
-                replace: ok === "replace",
-              },
-              {
-                type: "has_song",
-                value: "non-zero",
-                text: "$t",
-                replace: ok === "replace",
-              },
-              {
-                type: "has_song",
-                value: "one",
-                text: "$t",
-                replace: ok === "replace",
-              },
-              {
-                type: "has_song",
-                value: "many",
-                text: "$t",
-                replace: ok === "replace",
-              },
-            ];
-          }
-          return;
-        case "lang":
-          ac_opts.lang = CLIPPER_LANGS.map((x) => ({ ...x, type: "lang" }));
-          return;
-        case "type":
-          ac_opts.type = [
-            { type: "type", value: "clip", text: "$t" },
-            { type: "type", value: "stream", text: "$t" },
-            { type: "type", value: "placeholder", text: "$t" },
-          ];
-          return;
-        case "org":
-        case "topic":
-        case "vtuber":
-          return;
-        default:
-          const ok2 = JSON_SCHEMA[search_class].suggestionOK?.(query.value);
-          if (ok2 ?? true) {
-            ac_opts.other = [
-              {
-                type: search_class,
-                value: search_term,
-                text: "?",
-                replace: ok2 === "replace",
-              },
-            ];
-          }
-      }
-    })
-
-```
diff --git a/packages/react/src/components/header/searchbar/components/AutocompleteDropdownItem.tsx b/packages/react/src/components/header/searchbar/components/AutocompleteDropdownItem.tsx
new file mode 100644
index 000000000..d35b107d6
--- /dev/null
+++ b/packages/react/src/components/header/searchbar/components/AutocompleteDropdownItem.tsx
@@ -0,0 +1,65 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { CommandItem } from "@/shadcn/ui/command";
+import { QueryItem } from "../types";
+import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
+
+interface AutocompleteDropdownItemProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> {
+  item: QueryItem;
+  onSelect: (_: string) => void;
+}
+export function AutocompleteDropdownItem({
+  item,
+  onSelect,
+  ...rest
+}: AutocompleteDropdownItemProps) {
+  const { t } = useTranslation();
+  const categoryName = useCallback(
+    (query: QueryItem) => {
+      return t(`search.class.${query.type}`, query.type);
+    },
+    [t],
+  );
+
+  const categoryExplanation = useCallback(
+    (query: QueryItem) => {
+      return t(`search.class_explanation.${query.type}`, " ");
+    },
+    [t],
+  );
+
+  const categoryValue = useCallback(
+    (query: QueryItem) => {
+      return query.text === "$t"
+        ? t(`search.class_values.${query.type}.${query.value}`, " ")
+        : query.text === "?"
+        ? query.value
+        : query.text;
+    },
+    [t],
+  );
+
+  return (
+    <CommandItem
+      key={item.type + item.value}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      value={item.type + item.value}
+      onSelect={onSelect}
+      className={"cursor-pointer"}
+      {...rest}
+    >
+      <b>{categoryName(item)}:&nbsp;</b>
+      {item.incomplete ? (
+        <span className="font-light opacity-60">
+          {categoryExplanation(item)}
+        </span>
+      ) : (
+        <span>{categoryValue(item)}</span>
+      )}
+    </CommandItem>
+  );
+}
diff --git a/packages/react/src/components/header/searchbar/QueryBadge.tsx b/packages/react/src/components/header/searchbar/components/QueryBadge.tsx
similarity index 50%
rename from packages/react/src/components/header/searchbar/QueryBadge.tsx
rename to packages/react/src/components/header/searchbar/components/QueryBadge.tsx
index 087814022..bcab97551 100644
--- a/packages/react/src/components/header/searchbar/QueryBadge.tsx
+++ b/packages/react/src/components/header/searchbar/components/QueryBadge.tsx
@@ -1,16 +1,43 @@
 import * as React from "react";
 import { X } from "lucide-react";
 import { Badge } from "@/shadcn/ui/badge";
-import { QueryItem } from "./types";
+import { QueryItem } from "../types";
 import { PrimitiveAtom, useAtomValue, useSetAtom } from "jotai";
-import { splitQueryAtom } from "./SearchBarAtoms";
+import { splitQueryAtom } from "../hooks/useAutocomplete";
+import { useTranslation } from "react-i18next";
 
 export function QueryBadge({ item }: { item: PrimitiveAtom<QueryItem> }) {
   const queryItem = useAtomValue(item);
   const querySplitItemAction = useSetAtom(splitQueryAtom);
+  const { t } = useTranslation();
+  const categoryName = React.useCallback(
+    (query: QueryItem) => {
+      return t(`search.class.${query.type}`, query.type);
+    },
+    [t],
+  );
+
+  // const categoryExplanation = React.useCallback(
+  //   (query: QueryItem) => {
+  //     return t(`search.class_explanation.${query.type}`, " ");
+  //   },
+  //   [t],
+  // );
+
+  const categoryValue = React.useCallback(
+    (query: QueryItem) => {
+      return query.text === "$t"
+        ? t(`search.class_values.${query.type}.${query.value}`, " ")
+        : query.text === "?"
+        ? query.value
+        : query.text;
+    },
+    [t],
+  );
+
   return (
-    <Badge key={queryItem.value} variant="primary">
-      {queryItem.text}
+    <Badge key={queryItem.type + queryItem.value} variant="primary">
+      {categoryName(queryItem)}: {categoryValue(queryItem)}
       <button
         className="ml-1 rounded-full outline-none ring-offset-base-2 focus:ring-2 focus:ring-primary-9 focus:ring-offset-2"
         onKeyDown={(e) => {
diff --git a/packages/react/src/components/header/searchbar/SearchBar.tsx b/packages/react/src/components/header/searchbar/components/SearchBar.tsx
similarity index 56%
rename from packages/react/src/components/header/searchbar/SearchBar.tsx
rename to packages/react/src/components/header/searchbar/components/SearchBar.tsx
index 629348f28..102d211ef 100644
--- a/packages/react/src/components/header/searchbar/SearchBar.tsx
+++ b/packages/react/src/components/header/searchbar/components/SearchBar.tsx
@@ -3,16 +3,20 @@ import {
   Command,
   CommandEmpty,
   CommandGroup,
-  CommandItem,
   CommandSeparator,
 } from "@/shadcn/ui/command";
 import { cn } from "@/lib/utils";
-import { queryAtom, splitQueryAtom, useAutocomplete } from "./SearchBarAtoms";
+import {
+  queryAtom,
+  splitQueryAtom,
+  useAutocomplete,
+} from "../hooks/useAutocomplete";
 import { useAtom } from "jotai";
-import { JSON_SCHEMA, QueryItem } from "./types";
+import { JSON_SCHEMA, QueryItem } from "../types";
 import { QueryBadge } from "./QueryBadge";
 import { useTranslation } from "react-i18next";
 import { HTMLAttributes, useRef, useState, useCallback } from "react";
+import { AutocompleteDropdownItem } from "./AutocompleteDropdownItem";
 
 export function SearchBar({ className }: HTMLAttributes<HTMLDivElement>) {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -44,10 +48,39 @@ export function SearchBar({ className }: HTMLAttributes<HTMLDivElement>) {
     [setQuery],
   );
 
+  const handleItemSelect = useCallback(
+    (item: QueryItem) => {
+      if (item.incomplete) {
+        console.log("autocompleteItem - incomplete", item);
+        updateSearch(t(`search.class.${item.type}`, item.type) + ":");
+        return;
+      }
+
+      if (
+        JSON_SCHEMA[item.type].validation === undefined ||
+        JSON_SCHEMA[item.type].validation?.(item, query)
+      ) {
+        console.log("autocompleteItem - trigger", item);
+        if (item.replace) {
+          setQuery((q) => q.filter((i) => i.type !== item.type).concat(item));
+        } else {
+          setQueryPieces({
+            type: "insert",
+            value: item,
+          });
+        }
+
+        updateSearch("");
+      } // onClick?.(e);
+    },
+    [query, updateSearch, t, setQuery, setQueryPieces],
+  );
+
   return (
     <Command
       onKeyDown={handleKeyDown}
       className={cn("overflow-visible bg-transparent", className)}
+      shouldFilter={false}
     >
       <div className="group rounded-md border border-base px-3 py-2 text-sm ring-offset-base-2 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">
         <div className="flex flex-wrap gap-1">
@@ -61,61 +94,26 @@ export function SearchBar({ className }: HTMLAttributes<HTMLDivElement>) {
             onValueChange={updateSearch}
             onBlur={() => setOpen(false)}
             onFocus={() => setOpen(true)}
-            placeholder="Select frameworks..."
+            placeholder={t("component.search.searchLabel")}
             className="ml-2 flex-1 bg-transparent outline-none placeholder:text-base-8"
           />
         </div>
       </div>
-      <div className="relative mt-2">
+      <div className="relative">
         {open && autocomplete.length > 0 ? (
           <>
-            <div className="absolute top-0 z-10 w-full rounded-md border border-base bg-base-1 text-base-11 shadow-md outline-none animate-in">
-              <CommandGroup heading="Search Options" />
+            <div className="absolute top-2 z-10 w-full rounded-md border border-base bg-base-1 text-base-11 shadow-md outline-none animate-in">
+              <CommandGroup
+                heading={<div>{t("search.menu_header_text")}</div>}
+              />
               <CommandSeparator />
               <CommandGroup className="h-full overflow-auto">
                 {autocomplete.map((item) => {
                   return (
-                    <CommandItem
-                      key={item.type + item.value}
-                      onMouseDown={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                      }}
-                      value={JSON.stringify(item)}
-                      onSelect={(_) => {
-                        if (item.incomplete) {
-                          console.log("autocompleteItem - incomplete", item);
-                          updateSearch(
-                            t(`search.class.${item.type}`, item.type) + ":",
-                          );
-                          return;
-                        }
-
-                        if (
-                          JSON_SCHEMA[item.type].validation === undefined ||
-                          JSON_SCHEMA[item.type].validation?.(item, query)
-                        ) {
-                          console.log("autocompleteItem - trigger", item);
-                          if (item.replace) {
-                            setQuery((q) =>
-                              q
-                                .filter((i) => i.type !== item.type)
-                                .concat(item),
-                            );
-                          } else {
-                            setQueryPieces({
-                              type: "insert",
-                              value: item,
-                            });
-                          }
-
-                          updateSearch("");
-                        } // onClick?.(e);
-                      }}
-                      className={"cursor-pointer"}
-                    >
-                      {item.type} : {item.text}
-                    </CommandItem>
+                    <AutocompleteDropdownItem
+                      item={item}
+                      onSelect={() => handleItemSelect(item)}
+                    />
                   );
                 })}
               </CommandGroup>
diff --git a/packages/react/src/components/header/searchbar/SearchBarAtoms.tsx b/packages/react/src/components/header/searchbar/hooks/useAutocomplete.tsx
similarity index 96%
rename from packages/react/src/components/header/searchbar/SearchBarAtoms.tsx
rename to packages/react/src/components/header/searchbar/hooks/useAutocomplete.tsx
index 22acab2ec..d60631065 100644
--- a/packages/react/src/components/header/searchbar/SearchBarAtoms.tsx
+++ b/packages/react/src/components/header/searchbar/hooks/useAutocomplete.tsx
@@ -2,8 +2,8 @@ import { atom, useAtomValue } from "jotai";
 import { splitAtom } from "jotai/utils";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { splitSearchClassTerms } from "./helper";
-import { JSON_SCHEMA, QueryItem } from "./types";
+import { splitSearchClassTerms } from "../helper";
+import { JSON_SCHEMA, QueryItem } from "../types";
 import { useClientAutocomplete } from "./useClientAutocomplete";
 import { useServerAutocomplete } from "./useServerAutocomplete";
 
diff --git a/packages/react/src/components/header/searchbar/useClientAutocomplete.tsx b/packages/react/src/components/header/searchbar/hooks/useClientAutocomplete.tsx
similarity index 96%
rename from packages/react/src/components/header/searchbar/useClientAutocomplete.tsx
rename to packages/react/src/components/header/searchbar/hooks/useClientAutocomplete.tsx
index 26dcc55ae..4d3eff43d 100644
--- a/packages/react/src/components/header/searchbar/useClientAutocomplete.tsx
+++ b/packages/react/src/components/header/searchbar/hooks/useClientAutocomplete.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
-import { JSON_SCHEMA, QueryItem, VideoQueryModel } from "./types";
+import { JSON_SCHEMA, QueryItem, VideoQueryModel } from "../types";
 import { useOrgs } from "@/services/orgs.service";
-import { FIRST_SEARCH } from "./helper";
+import { FIRST_SEARCH } from "../helper";
 import type { TFunction } from "i18next";
 import { CLIPPER_LANGS } from "@/lib/consts";
 
diff --git a/packages/react/src/components/header/searchbar/useServerAutocomplete.tsx b/packages/react/src/components/header/searchbar/hooks/useServerAutocomplete.tsx
similarity index 96%
rename from packages/react/src/components/header/searchbar/useServerAutocomplete.tsx
rename to packages/react/src/components/header/searchbar/hooks/useServerAutocomplete.tsx
index 5686ead05..960ca828d 100644
--- a/packages/react/src/components/header/searchbar/useServerAutocomplete.tsx
+++ b/packages/react/src/components/header/searchbar/hooks/useServerAutocomplete.tsx
@@ -1,4 +1,4 @@
-import { AC_Response, QueryItem, VideoQueryModel } from "./types";
+import { AC_Response, QueryItem, VideoQueryModel } from "../types";
 import { useQuery } from "@tanstack/react-query";
 import { useClient } from "@/hooks/useClient";
 
diff --git a/packages/react/src/shadcn/ui/command.tsx b/packages/react/src/shadcn/ui/command.tsx
index 93f533754..7f1044201 100644
--- a/packages/react/src/shadcn/ui/command.tsx
+++ b/packages/react/src/shadcn/ui/command.tsx
@@ -13,7 +13,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "flex w-full flex-col overflow-hidden rounded-md bg-popover text-base-11",
       className,
     )}
     {...props}