furigana format is now <>{} and add input message for glob

src-react/src/components/LoadingDialog.tsx

@@ -38,7 +38,7 @@ interface Progress {
 }
 
 function LoadingDialog() {
-  const [messages, setMessages] = useState<Progress[]>([]);
+  const [messages, set_messages] = useState<Progress[]>([]);
 
   const isInit = useRef(false);
 
@@ -106,11 +106,11 @@ function LoadingDialog() {
       }
 
       await invoke("init_yomitan", { dicts, lang });
-      setMessages([]);
+      set_messages([]);
     }
 
     listen<LoadYomitanZipDirResult>("load-yomitan-dir", ({ payload }) => {
-      setMessages((messages) => {
+      set_messages((messages) => {
         if (payload.new_dicts.length > 0) {
           messages = [
             ...messages,
@@ -149,7 +149,7 @@ function LoadingDialog() {
   }, []);
 
   function updateProgress(payload: Progress) {
-    setMessages((messages) => {
+    set_messages((messages) => {
       const prev = messages[messages.length - 1];
       if (prev?.message === payload.message) {
         messages = messages.slice(0, messages.length - 1);

src-react/src/pages/SearchPage.tsx

@@ -6,13 +6,13 @@ import {
   useState,
 } from "react";
 import { useSearchParams } from "react-router";
-import { toKana } from "wanakana";
+import { toHiragana, toKana } from "wanakana";
 
 import {
   Box,
   Card,
   CloseButton,
-  Group,
+  Field,
   Input,
   InputGroup,
   Stack,
@@ -116,9 +116,10 @@ function SearchPage() {
     }
     if (!norm_q) return;
 
-    const ender = /\p{Z}$/u.test(q) ? "" : "*";
+    const ender =
+      /\p{Z}$/u.test(q) || [..."*?[]"].some((c) => q.includes(c)) ? "" : "*";
 
-    const re = /\<(.+?)\>\[(.+?)\]/g;
+    const re = /\<(.+?)\>{(.+?)}/g;
 
     let qTerm = "";
     let qReading = "";
@@ -199,9 +200,7 @@ function SearchPage() {
       q = toKana(q, {
         useObsoleteKana: true,
         IMEMode: true,
-        customKanaMapping: Object.fromEntries(
+        customKanaMapping: Object.fromEntries([..."<>{}"].map((c) => [c, c])),
-          "<>[]".split("").map((c) => [c, c]),
-        ),
       });
     }
 
@@ -224,14 +223,14 @@ function SearchPage() {
     target,
   }) => {
     const cleanedFuri = [...furigana.replace(/ｎ/g, "ん")]
-      .map((c) => katakanaToHiragana(c))
+      .map((c) => toHiragana(c, { passRomaji: true }))
       .join("");
 
     let parts = compositionData.split(KANJI_REGEX);
     if (parts.length === 1) return;
 
     const hiraganaParts = parts.map((p) =>
-      [...p].map((c) => katakanaToHiragana(c)).join(""),
+      [...p].map((c) => toHiragana(c, { passRomaji: true })).join(""),
     );
     const regex = new RegExp(
       `^${hiraganaParts.map((p, idx) => `(${idx & 1 ? ".+" : p})`).join("")}$`,
@@ -244,7 +243,7 @@ function SearchPage() {
     rt.shift();
 
     const markup = parts
-      .map((p, idx) => (idx & 1 ? `<${p}>[${rt[idx]}]` : p))
+      .map((p, idx) => (idx & 1 ? `<${p}>{${rt[idx]}}` : p))
       .join("");
 
     set_q((q) => {
@@ -262,13 +261,6 @@ function SearchPage() {
     });
   };
 
-  function katakanaToHiragana(k: string) {
-    let c = k.charCodeAt(0);
-    return c >= 12449 && c <= 12531
-      ? String.fromCharCode(k.charCodeAt(0) - 96)
-      : k;
-  }
-
   const clearButton = q.trim() ? (
     <CloseButton
       size={"xs"}
@@ -309,7 +301,7 @@ function SearchPage() {
           e.preventDefault();
         }}
       >
-        <Group attached w="full">
+        <Field.Root w="full">
           <InputGroup endElement={clearButton}>
             <Input
               id="greet-input"
@@ -324,8 +316,24 @@ function SearchPage() {
               placeholder="Search..."
             />
           </InputGroup>
-          {/* <Button type="submit">Search</Button> */}
+          {q.includes(" ") ? (
-        </Group>
+            <Field.HelperText>
+              Space (" ") to mark word boundary for search
+            </Field.HelperText>
+          ) : null}
+          {[..."*?[]"].some((c) => q.includes(c)) ? (
+            <Field.HelperText>
+              <code>{"*?[]"}</code> can be used as
+              <a
+                href="https://en.wikipedia.org/wiki/Glob_(programming)#Syntax"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                glob
+              </a>
+            </Field.HelperText>
+          ) : null}
+        </Field.Root>
         <div style={{ marginTop: "0.5em", display: "flex", gap: "1em" }}>
           <Switch.Root
             checked={isAutoKana}
@@ -357,18 +365,23 @@ function SearchPage() {
             <li key={i} lang={lang} style={{ marginLeft: "1.5em" }}>
               <div>
                 <Card.Root>
-                  <Card.Header flexDirection={"row"} gap={0}>
+                  <Card.Header display={"block"}>
-                    <a onClick={() => onTermClicked(term + " ")}>{term}</a>
+                    <a
+                      onClick={() =>
+                        onTermClicked(reading ? `<${term}>{${reading}}` : term)
+                      }
+                    >
+                      {term}
+                    </a>
                     {reading && reading !== term ? (
                       <>
                         {"（"}
-                        <a onClick={() => onTermClicked(reading + " ")}>
+                        <a onClick={() => onTermClicked(reading)}>{reading}</a>
-                          {reading}
-                        </a>
                         {"）"}
                       </>
                     ) : null}
-                    【{dict_title}】{JSONdumpClean(it)}
+                    <span>【{dict_title}】</span>
+                    <span>{JSONdumpClean(it)}</span>
                   </Card.Header>
                   <Card.Body>
                     <div

src-react/vite.config.ts

@@ -29,4 +29,7 @@ export default defineConfig(async () => ({
       ignored: ["**/src-tauri/**"],
     },
   },
+  build: {
+    chunkSizeWarningLimit: 1024, // default = 500 kB
+  },
 }));