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

pnpm-lock.yaml

@@ -90,6 +90,9 @@ importers:
       react-icons:
         specifier: ^5.5.0
         version: 5.5.0(react@19.2.4)
+      react-router:
+        specifier: ^7.13.1
+        version: 7.13.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       wanakana:
         specifier: ^5.3.1
         version: 5.3.1
@@ -1442,6 +1445,16 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  react-router@7.13.1:
+    resolution: {integrity: sha512-td+xP4X2/6BJvZoX6xw++A2DdEi++YypA69bJUV5oVvqf6/9/9nNlD70YO1e9d3MyamJEBQFEzk6mbfDYbqrSA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react@19.2.4:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
@@ -3321,6 +3334,14 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
+  react-router@7.13.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.4
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.4(react@19.2.4)
+
   react@19.2.4: {}
 
   real-require@0.2.0: {}

src-core/src/db/yomitan.rs

@@ -15,7 +15,6 @@ pub struct YomitanRow {
     rules: String,
     score: i64,
     glossary_json: String,
-    glossary_b: Vec<u8>,
     sequence: Option<i64>,
     term_tags: String,
     dict_title: String,
@@ -118,26 +117,27 @@ impl YomitanDatabase {
         "
         ))?;
         let rows = stmt.query_map(params![q_term_norm, q_reading, limit, offset], |r| {
-            Ok(YomitanRow {
+            Ok((
+                YomitanRow {
                     term: r.get(0)?,
                     reading: r.get(1)?,
                     def_tags: r.get(2)?,
                     rules: r.get(3)?,
                     score: r.get(4)?,
-                glossary_json: String::new(),
-                glossary_b: r.get(5)?,
+                    glossary_json: String::from("[]"), // a valid JSON array
                     sequence: r.get(6)?,
                     term_tags: r.get(7)?,
                     dict_title: r.get(8)?,
-            })
+                },
+                r.get::<_, Vec<u8>>(5)?,
+            ))
         })?;
 
         let mut out = Vec::new();
         for row in rows {
-            let mut r = row?;
+            let (mut r, glossary_b) = row?;
             r.glossary_json =
-                String::from_utf8(decompressor.decompress(&r.glossary_b, MAX_DECOMPRESSED_SIZE)?)?;
-            r.glossary_b = vec![];
+                String::from_utf8(decompressor.decompress(&glossary_b, MAX_DECOMPRESSED_SIZE)?)?;
 
             out.push(r);
         }

src-react/package.json

@@ -21,6 +21,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
+    "react-router": "^7.13.1",
     "wanakana": "^5.3.1",
     "zustand": "^5.0.11"
   },

src-react/src/App.tsx

@@ -1,14 +1,27 @@
 import "./App.css";
 
+import { createBrowserRouter } from "react-router";
+import { RouterProvider } from "react-router/dom";
+
 import LoadingDialog from "./components/LoadingDialog";
 import { Provider } from "./components/ui/provider";
-import SearchPage from "./pages/SearchPage";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    lazy: async () => {
+      return {
+        Component: (await import("./pages/SearchPage")).default,
+      };
+    },
+  },
+]);
 
 function App() {
   return (
     <Provider>
       <>
-        <SearchPage />
+        <RouterProvider router={router} />
         <LoadingDialog />
       </>
     </Provider>

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

@@ -5,13 +5,14 @@ import {
   useRef,
   useState,
 } from "react";
-import { toKana } from "wanakana";
+import { useSearchParams } from "react-router";
+import { toHiragana, toKana } from "wanakana";
 
 import {
   Box,
   Card,
   CloseButton,
-  Group,
+  Field,
   Input,
   InputGroup,
   Stack,
@@ -35,14 +36,27 @@ interface Entry {
 }
 
 function SearchPage() {
-  const [q, setQ] = useState("");
-  const [entries, setEntries] = useState<Entry[]>([]);
-  const [searchTimeout, setSearchTimeout] = useState(0);
-  const [furigana, setFurigana] = useState("");
+  const [searchParams, set_searchParams] = useSearchParams();
+
+  useEffect(() => {
+    let q = searchParams.get("q") || "";
+    if (q) set_q(q);
+  }, [searchParams]);
+
+  function searchParams_setQ(q: string) {
+    if (searchParams.get("q") === q) return;
+    set_searchParams({ q });
+  }
+
+  const [q, set_q] = useState("");
+  const [entries, set_entries] = useState<Entry[]>([]);
+  const [searchTimeout, set_searchTimeout] = useState(0);
+  const [furigana, set_furigana] = useState("");
   const [isAutoKana, set_isAutoKana] = useState(true);
 
   const nSearch = useRef(0);
   const searchboxRef = useRef<HTMLInputElement | null>(null);
+  const resultScrollRef = useRef<HTMLElement | null>(null);
 
   const lang = "ja-JP";
 
@@ -57,7 +71,7 @@ function SearchPage() {
 
       set_clipboardText((clipboardText) => {
         if (clipboardText !== newText) {
-          setQ(newText + " ");
+          searchParams_setQ(newText + " ");
           return newText;
         }
         return clipboardText;
@@ -73,7 +87,7 @@ function SearchPage() {
 
   function trySearch() {
     if (!q.trim()) {
-      setEntries([]);
+      set_entries([]);
       return;
     }
 
@@ -86,7 +100,7 @@ function SearchPage() {
 
     nSearch.current += 1;
 
-    setSearchTimeout(
+    set_searchTimeout(
       setTimeout(() => {
         if (nSearch.current > 1) runSearch();
       }, 250),
@@ -102,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 = "";
@@ -145,14 +160,18 @@ function SearchPage() {
             segs.map((s) => s.surface).join("") +
             " ";
 
-          setQ(newQ);
+          searchParams_setQ(newQ);
           return;
         }
       }
 
-      setEntries(result);
+      if (resultScrollRef.current) {
+        resultScrollRef.current.scrollTop = 0;
+      }
+
+      set_entries(result);
     } else {
-      setEntries([...entries, ...result]);
+      set_entries([...entries, ...result]);
     }
 
     return result;
@@ -178,14 +197,14 @@ function SearchPage() {
 
   function onSearchboxChange(q: string) {
     if (isAutoKana) {
-      q = toKana(
-        q,
-        { useObsoleteKana: true, IMEMode: true },
-        Object.fromEntries("<>[]".split("").map((c) => [c, c])),
-      );
+      q = toKana(q, {
+        useObsoleteKana: true,
+        IMEMode: true,
+        customKanaMapping: Object.fromEntries([..."<>{}"].map((c) => [c, c])),
+      });
     }
 
-    setQ(q);
+    set_q(q);
   }
 
   const FURIGANA_REGEX = /^[\p{scx=Hiragana}\p{scx=Katakana}]+$/u;
@@ -195,20 +214,23 @@ function SearchPage() {
     data: compositionData,
   }) => {
     if (FURIGANA_REGEX.test(compositionData)) {
-      setFurigana(compositionData);
+      set_furigana(compositionData);
     }
   };
 
-  const addFurigana: CompositionEventHandler = ({ data: compositionData }) => {
+  const addFurigana: CompositionEventHandler = ({
+    data: compositionData,
+    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("")}$`,
@@ -221,29 +243,47 @@ 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("");
-    setQ(markup);
-  };
 
-  function katakanaToHiragana(k: string) {
-    let c = k.charCodeAt(0);
-    return c >= 12449 && c <= 12531
-      ? String.fromCharCode(k.charCodeAt(0) - 96)
-      : k;
-  }
+    set_q((q) => {
+      if (!(target instanceof HTMLInputElement)) return markup;
+
+      let { selectionStart } = target;
+      selectionStart = selectionStart || 0;
+      if (selectionStart < compositionData.length) return markup;
+
+      return (
+        q.substring(0, selectionStart - compositionData.length) +
+        markup +
+        q.substring(selectionStart)
+      );
+    });
+  };
 
   const clearButton = q.trim() ? (
     <CloseButton
       size={"xs"}
       me={-2}
       onClick={() => {
-        setQ("");
+        searchParams_setQ(q);
+        searchParams_setQ("");
+        set_q("");
         searchboxRef.current ? searchboxRef.current.focus() : null;
       }}
     />
   ) : null;
 
+  function onTermClicked(t: string) {
+    searchParams_setQ(q);
+    searchParams_setQ(t + " ");
+  }
+
+  function JSONdumpClean(o: Record<string, any>) {
+    const p = Object.entries(o).filter(([, v]) => v || v === 0);
+    return p.length ? JSON.stringify(Object.fromEntries(p), null, 1) : null;
+  }
+
   return (
     <Stack
       style={{
@@ -261,7 +301,7 @@ function SearchPage() {
           e.preventDefault();
         }}
       >
-        <Group attached w="full">
+        <Field.Root w="full">
           <InputGroup endElement={clearButton}>
             <Input
               id="greet-input"
@@ -276,8 +316,24 @@ function SearchPage() {
               placeholder="Search..."
             />
           </InputGroup>
-          {/* <Button type="submit">Search</Button> */}
-        </Group>
+          {q.includes(" ") ? (
+            <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}
@@ -298,6 +354,7 @@ function SearchPage() {
         </div>
       </form>
       <Box
+        ref={resultScrollRef}
         as={"ol"}
         listStyleType={"number"}
         style={{ overflowY: "scroll", scrollbarWidth: "none" }}
@@ -308,10 +365,23 @@ function SearchPage() {
             <li key={i} lang={lang} style={{ marginLeft: "1.5em" }}>
               <div>
                 <Card.Root>
-                  <Card.Header>
+                  <Card.Header display={"block"}>
+                    <a
+                      onClick={() =>
+                        onTermClicked(reading ? `<${term}>{${reading}}` : term)
+                      }
+                    >
                       {term}
-                    {reading ? ` (${reading})` : ""} 【{dict_title}】
-                    {JSON.stringify(it, (_, v) => v || undefined)}
+                    </a>
+                    {reading && reading !== term ? (
+                      <>
+                        {"（"}
+                        <a onClick={() => onTermClicked(reading)}>{reading}</a>
+                        {"）"}
+                      </>
+                    ) : null}
+                    <span>【{dict_title}】</span>
+                    <span>{JSONdumpClean(it)}</span>
                   </Card.Header>
                   <Card.Body>
                     <div
@@ -325,7 +395,7 @@ function SearchPage() {
                         <Glossary
                           key={i}
                           glossary={g}
-                          onTermClicked={(t) => setQ(t + " ")}
+                          onTermClicked={onTermClicked}
                         />
                       ))}
                     </div>

src-react/vite.config.ts

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