fix

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "houhou",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "houhou",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "@chakra-ui/react": "^2.7.0",
         "@emotion/react": "^11.11.1",
@@ -29,6 +29,7 @@
         "@vitejs/plugin-react": "^3.0.0",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.24",
+        "prettier": "^2.8.8",
         "sass": "^1.62.1",
         "tailwindcss": "^3.3.2",
         "typescript": "^4.9.5",
@@ -3289,6 +3290,21 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6355,6 +6371,12 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true
+    },
     "prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "houhou",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -31,6 +31,7 @@
     "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
     "sass": "^1.62.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^4.9.5",

src-tauri/Cargo.lock

@@ -1376,7 +1376,7 @@ checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
 
 [[package]]
 name = "houhou"
-version = "0.0.0"
+version = "0.1.0"
 dependencies = [
  "anyhow",
  "clap",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "houhou"
-version = "0.0.0"
+version = "0.1.0"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

src-tauri/src/kanji.rs

@@ -24,14 +24,16 @@ pub struct GetKanjiResult {
   kanji: Vec<Kanji>,
 }
 
-fn build_kanji(row: SqliteRow) -> Kanji {
+impl Kanji {
-  let character = row.get("Character");
+  fn from_sqlite_row(row: SqliteRow) -> Self {
-  let meaning = row.get("Meaning");
+    let character = row.get("Character");
-  let most_used_rank = row.get("MostUsedRank");
+    let meaning = row.get("Meaning");
-  Kanji {
+    let most_used_rank = row.get("MostUsedRank");
-    character,
+    Kanji {
-    meaning,
+      character,
-    most_used_rank,
+      meaning,
+      most_used_rank,
+    }
   }
 }
 
@@ -57,7 +59,7 @@ pub async fn get_kanji(
   .await
   .map_err(|_| ())?;
 
-  let kanji = result.into_iter().map(build_kanji).collect();
+  let kanji = result.into_iter().map(Kanji::from_sqlite_row).collect();
 
   let count = sqlx::query("SELECT COUNT(*) FROM KanjiSet")
     .fetch_one(&db.0)
@@ -79,7 +81,7 @@ pub async fn get_single_kanji(
         LEFT JOIN KanjiMeaningSet ON KanjiSet.ID = KanjiMeaningSet.Kanji_ID
         GROUP BY KanjiSet.ID
         HAVING MostUsedRank IS NOT NULL
-          AND Kanji.Character = ?
+          AND KanjiSet.Character = ?
     "#,
   )
   .bind(character)
@@ -87,5 +89,7 @@ pub async fn get_single_kanji(
   .await
   .map_err(|_| ())?;
 
-  Ok(Some(build_kanji(result)))
+  let kanji = Kanji::from_sqlite_row(result);
+
+  Ok(Some(kanji))
 }

src-tauri/src/main.rs

@@ -11,10 +11,7 @@ mod kanji;
 use std::str::FromStr;
 
 use anyhow::{Context, Result};
-use sqlx::{
+use sqlx::sqlite::{SqliteConnectOptions, SqlitePoolOptions};
-  sqlite::{SqliteConnectOptions, SqlitePoolOptions},
-  SqlitePool,
-};
 use tauri::SystemTray;
 
 use crate::kanji::KanjiDb;

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "houhou",
-    "version": "0.0.0"
+    "version": "0.1.0"
   },
   "tauri": {
     "allowlist": {

src/components/KanjiDisplay.tsx

@@ -4,28 +4,28 @@ import { Kanji } from "../types/Kanji";
 import styles from "./KanjiDisplay.module.scss";
 import useSWR from "swr";
 
+type GetSingleKanjiResult = Kanji;
+
 interface KanjiDisplayProps {
   kanjiCharacter: string;
 }
 
 export default function KanjiDisplay({ kanjiCharacter }: KanjiDisplayProps) {
-  const { data, error, isLoading } = useSWR(["get_single_kanji", kanjiCharacter], ([command, character]) => invoke<GetKanjiResult>(command, { character }));
+  const {
+    data: kanji,
+    error,
+    isLoading,
+  } = useSWR(["get_single_kanji", kanjiCharacter], ([command, character]) =>
+    invoke<GetSingleKanjiResult>(command, { character }),
+  );
+
+  if (!kanji) return <>Loading...</>;
 
   return (
     <>
-      <div className={styles.display}>{kanjiCharacter}</div>
+      <div className={styles.display}>{kanji.character}</div>
 
-      {JSON.stringify(isLoading)}
+      {kanji.meaning}
-
-      <p>
-        data:
-        {JSON.stringify(data)}
-      </p>
-
-      <p>
-        error:
-        {JSON.stringify(error)}
-      </p>
     </>
   );
 }

src/panes/KanjiPane.module.scss

@@ -8,3 +8,10 @@
   padding: 4px 8px;
   border: 1px solid lightgray;
 }
+
+.kanji-list-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: scroll;
+}

src/panes/KanjiPane.tsx

@@ -20,22 +20,27 @@ interface KanjiListProps {
 function KanjiList({ data, selectedCharacter }: KanjiListProps) {
   return (
     <>
-      Displaying {data.kanji.length} of {data.count} results.
+      <small>
-      {data.kanji.map((kanji) => (
+        Displaying {data.kanji.length} of {data.count} results.
-        <Link
+      </small>
-          key={kanji.character}
+
-          className={styles["kanji-link"]}
+      <div className={styles["kanji-list-scroll"]}>
-          to={`/kanji/${kanji.character}`}
+        {data.kanji.map((kanji) => (
-        >
+          <Link
-          <Grid templateRows="repeat(2, 1fr)" templateColumns="1fr 3fr">
+            key={kanji.character}
-            <GridItem rowSpan={2} style={{ fontSize: "24px", textAlign: "center" }}>
+            className={styles["kanji-link"]}
-              {kanji.character}
+            to={`/kanji/${kanji.character}`}
-            </GridItem>
+          >
-            <GridItem>{kanji.meaning}</GridItem>
+            <Grid templateRows="repeat(2, 1fr)" templateColumns="1fr 3fr">
-            <GridItem>#{kanji.most_used_rank} most used</GridItem>
+              <GridItem rowSpan={2} style={{ fontSize: "24px", textAlign: "center" }}>
-          </Grid>
+                {kanji.character}
-        </Link>
+              </GridItem>
-      ))}
+              <GridItem>{kanji.meaning}</GridItem>
+              <GridItem>#{kanji.most_used_rank} most used</GridItem>
+            </Grid>
+          </Link>
+        ))}
+      </div>
     </>
   );
 }
@@ -46,9 +51,6 @@ export default function KanjiPane() {
 
   return (
     <>
-      {JSON.stringify(error)}
-      {JSON.stringify(selectedKanji)}
-
       <Stack spacing={7} direction="row">
         <Box p={2} className={styles["kanji-list"]}>
           {data && <KanjiList data={data} selectedCharacter={selectedKanji} />}

src/styles.css

@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+body {
+  overflow: hidden;
+}