check images and dark mode

src-react/src/App.css

@@ -43,4 +43,14 @@ body {
 html {
   height: 100vh;
   overflow-y: hidden;
+}
+
+html.dark .glossaries {
+  span {
+    word-break: keep-all;
+  }
+
+  img {
+    filter: invert(1) hue-rotate(180deg);
+  }
 }

src-react/src/components/Glossary.tsx

@@ -57,14 +57,13 @@ export default function Glossary({
 function GlossaryImage({ img, yomitanURL }: { img: any; yomitanURL: string }) {
   return (
     <img
+      className="glossary-image"
       src={`${yomitanURL || ""}/${img.path}`}
-      width={img.width}
-      height={img.height}
       title={img.title}
       alt={img.alt}
       style={{
         imageRendering: img.imageRendering || "auto",
-        width: `${img.width}em`,
+        width: `${img.width}em`, // unit seems to be em, not px
         height: `${img.height}em`,
       }}
     />

src-react/src/components/LoadingDialog.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { Dialog, Portal } from "@chakra-ui/react";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
+import { fetch } from "@tauri-apps/plugin-http";
 
 import { supabase } from "../lib/supabaseClient";
 
@@ -13,6 +14,13 @@ interface YomitanDictEntry {
   lang: string;
 }
 
+interface YomitanStorageWorkerDictEntry {
+  key: string;
+  size: number;
+  uploaded: string;
+  url: string;
+}
+
 interface YomitanDownloadDictEntry {
   url: string;
   filepath: string;
@@ -119,6 +127,52 @@ function LoadingDialog() {
             });
           }
         }
+
+        const { VITE_STORAGE_WORKER_URL, VITE_STORAGE_WORKER_TOKEN } =
+          import.meta.env;
+
+        try {
+          const prefix = `${lang}/`;
+
+          let entries: YomitanStorageWorkerDictEntry[] = [];
+
+          const LAST_API_CALL_KEY = "LAST_API_CALL_KEY_storageWorkerURL";
+          const LAST_API_JSON_KEY = "LAST_API_JSON_KEY_storageWorkerURL";
+
+          const lastCall = localStorage.getItem(LAST_API_CALL_KEY);
+          const lastJSON = localStorage.getItem(LAST_API_JSON_KEY);
+
+          if (lastJSON && lastCall) {
+            const d = new Date(lastCall);
+            d.setDate(d.getDate() + 1);
+            if (d > new Date()) {
+              entries = JSON.parse(lastJSON);
+            }
+          }
+          if (!entries.length) {
+            console.log(`visiting ${VITE_STORAGE_WORKER_URL}`);
+
+            entries = await fetch(VITE_STORAGE_WORKER_URL + "/files", {
+              headers: {
+                Authorization: `Bearer ${VITE_STORAGE_WORKER_TOKEN}`,
+              },
+            }).then((r) => r.json());
+
+            localStorage.setItem(LAST_API_CALL_KEY, new Date().toISOString());
+            localStorage.setItem(LAST_API_JSON_KEY, JSON.stringify(entries));
+          }
+
+          dicts.push(
+            ...entries
+              .filter((o) => o.key.startsWith(prefix))
+              .map((o) => ({
+                filepath: `yomitan/${lang}/${o.key.substring(prefix.length)}`,
+                url: o.url,
+              })),
+          );
+        } catch (e) {
+          console.error(e);
+        }
       }
 
       await invoke("init_yomitan", { dicts, lang });

src-react/src/pages/SearchPage.tsx

@@ -412,6 +412,7 @@ function SearchPage() {
                   </Card.Header>
                   <Card.Body>
                     <div
+                      className="glossaries"
                       style={{
                         display: "flex",
                         flexDirection: "column",