chore(react/ribbon): port fast search

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -19,6 +19,7 @@ import ws from "../../services/ws";
 import tree from "../../services/tree";
 import NoteAutocomplete from "../react/NoteAutocomplete";
 import FormSelect from "../react/FormSelect";
+import Icon from "../react/Icon";
 
 interface SearchOption {
   attributeName: string;
@@ -68,7 +69,8 @@ const SEARCH_OPTIONS: SearchOption[] = [
     attributeType: "label",
     icon: "bx bx-run",
     label: t("search_definition.fast_search"),
-    tooltip: t("search_definition.fast_search_description")
+    tooltip: t("search_definition.fast_search_description"),
+    component: FastSearchOption
   },
   {
     attributeName: "includeArchivedNotes",
@@ -235,10 +237,11 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
   )
 }
 
-function SearchOption({ note, title, children, help, attributeName, attributeType, additionalAttributesToDelete }: {
+function SearchOption({ note, title, titleIcon, children, help, attributeName, attributeType, additionalAttributesToDelete }: {
   note: FNote;
   title: string,
-  children: ComponentChildren,
+  titleIcon: string,
+  children?: ComponentChildren,
   help: ComponentChildren,
   attributeName: string,
   attributeType: AttributeType,
@@ -246,7 +249,10 @@ function SearchOption({ note, title, children, help, attributeName, attributeTyp
 }) {
   return (
     <tr>
-      <td className="title-column">{title}</td>
+      <td className="title-column">
+        {titleIcon && <><Icon icon={titleIcon} />{" "}</>}
+        {title}
+      </td>
       <td>{children}</td>
       <td className="button-column">
         {help && <Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>}
@@ -403,3 +409,12 @@ function AncestorOption({ note, ...restProps}: SearchOptionProps) {
     </div>
   </SearchOption>;
 }
+
+function FastSearchOption({ ...restProps }: SearchOptionProps) {
+  return <SearchOption
+    titleIcon="bx bx-run"
+    title={t("fast_search.fast_search")}
+    help={t("fast_search.description")}
+    {...restProps}
+  />
+}

apps/client/src/widgets/search_options/fast_search.ts

@@ -1,30 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="fastSearch">
-    <td colSpan="2">
-        <span class="bx bx-run"></span>
-        ${t("fast_search.fast_search")}
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                ${t("fast_search.description")}
-            </div>
-        </div>
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class FastSearch extends AbstractSearchOption {
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "fastSearch");
-    }
-
-    doRender() {
-        return $(TPL);
-    }
-}

apps/server/src/services/i18n.ts

@@ -18,7 +18,7 @@ const DAYJS_LOADER: Record<LOCALE_IDS, () => Promise<typeof import("dayjs/locale
     "he": () => import("dayjs/locale/he.js"),
     "ja": () => import("dayjs/locale/ja.js"),
     "ku": () => import("dayjs/locale/ku.js"),
-    "pt_BR": () => import("dayjs/locale/pt_BR.js"),
+    "pt_BR": () => import("dayjs/locale/pt-BR.js"),
     "ro": () => import("dayjs/locale/ro.js"),
     "ru": () => import("dayjs/locale/ru.js"),
     "tw": () => import("dayjs/locale/zh-tw.js"),