more formatting on the review page

src-tauri/src/srs.rs

@@ -122,6 +122,8 @@ fn default_batch_size() -> u32 {
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct SrsEntry {
+  current_grade: u32,
+  meanings: Vec<String>,
   associated_kanji: String,
 }
 
@@ -136,6 +138,7 @@ pub async fn generate_review_batch(
     r#"
     SELECT * FROM SrsEntrySet
       WHERE AssociatedKanji IS NOT NULL
+        AND CurrentGrade < 8
       ORDER BY RANDOM()
       LIMIT ?
   "#,
@@ -147,8 +150,14 @@ pub async fn generate_review_batch(
 
   let result = result
     .into_iter()
-    .map(|row| SrsEntry {
+    .map(|row| {
+      let meanings: String = row.get("Meanings");
+      let meanings = meanings.split(",").map(|s| s.to_owned()).collect();
+      SrsEntry {
+        current_grade: row.get("CurrentGrade"),
+        meanings,
         associated_kanji: row.get("AssociatedKanji"),
+      }
     })
     .collect();
 

src/App.module.scss

@@ -42,12 +42,13 @@ $navLinkColor: hsl(203, 91%, 91%);
   -webkit-user-drag: none;
 
   &:not(.link-active):hover {
-    border-top-color: transparent;
-    background-color: #f4f4f4;
+    border-top-color: #f4f4f4;
+    background: linear-gradient(#f4f4f4, transparent);
   }
 }
 
 .link-active {
   border-top-color: $navLinkAccentColor;
-  background-color: $navLinkColor;
+  // background-color: $navLinkColor;
+  background: linear-gradient($navLinkColor, transparent);
 }

src/panes/SrsReviewPane.module.scss

@@ -1,11 +1,12 @@
 .main {
   width: 100%;
+  padding-top: 40px;
 }
 
 .container {
-  margin-top: 40px;
+  margin-top: 8px;
   border-radius: 4px;
-  background-color: lighten(#0c9, 55%);
+  background-color: lighten(#393, 45%);
   padding: 16px;
 }
 
@@ -17,6 +18,5 @@
 }
 
 .input-box {
-  background-color: white;
   text-align: center;
 }

src/panes/SrsReviewPane.tsx

@@ -1,9 +1,26 @@
-import { Button, Container, Input, Progress, Spinner } from "@chakra-ui/react";
+import {
+  Button,
+  Container,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Progress,
+  Spinner,
+  useDisclosure,
+} from "@chakra-ui/react";
 import styles from "./SrsReviewPane.module.scss";
 import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/tauri";
 import { Link } from "react-router-dom";
-import { ArrowBackIcon } from "@chakra-ui/icons";
+import { ArrowBackIcon, CheckIcon } from "@chakra-ui/icons";
+import { FormEvent } from "react";
 
 export interface SrsEntry {
   associated_kanji: string;
@@ -11,20 +28,38 @@ export interface SrsEntry {
 
 const startingSize = 10;
 
+function Done() {
+  return (
+    <>
+      <p>oh Shit you're done!!! poggerse</p>
+      <Link to="/">
+        <Button colorScheme="blue">
+          <ArrowBackIcon /> Return
+        </Button>
+      </Link>
+    </>
+  );
+}
+
 export default function SrsReviewPane() {
   const [reviewBatch, setReviewBatch] = useState<SrsEntry[] | null>(null);
   const [currentAnswer, setCurrentAnswer] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   useEffect(() => {
     if (!reviewBatch) {
-      invoke<SrsEntry[]>("generate_review_batch").then((result) => {
+      invoke<SrsEntry[]>("generate_review_batch")
+        .then((result) => {
           console.log(result);
           setReviewBatch(result);
+        })
+        .catch((err) => {
+          console.error("fuck!", err);
         });
     }
   }, [reviewBatch, setReviewBatch]);
 
-  const formSubmit = (evt) => {
+  const formSubmit = (evt: FormEvent) => {
     evt.preventDefault();
     if (reviewBatch == null) return;
 
@@ -39,17 +74,7 @@ export default function SrsReviewPane() {
   const renderInside = () => {
     if (!reviewBatch) return <Spinner />;
 
-    if (reviewBatch.length == 0)
-      return (
-        <>
-          <p>oh Shit you're done!!! poggerse</p>
-          <Link to="/">
-            <Button colorScheme="blue">
-              <ArrowBackIcon /> Return
-            </Button>
-          </Link>
-        </>
-      );
+    if (reviewBatch.length == 0) return <Done />;
 
     const progressValue = startingSize - reviewBatch.length;
     const nextItem = reviewBatch[0];
@@ -66,13 +91,27 @@ export default function SrsReviewPane() {
 
         <h1 className={styles["test-word"]}>{nextItem.associated_kanji}</h1>
 
+        <details>
+          <summary>Debug</summary>
+          <pre>{JSON.stringify(nextItem, null, 2)}</pre>
+        </details>
+
         <form onSubmit={formSubmit}>
+          <InputGroup>
             <Input
+              autoFocus
               className={styles["input-box"]}
               placeholder="Enter your answer..."
               value={currentAnswer}
+              spellCheck={false}
+              backgroundColor={"white"}
               onChange={(evt) => setCurrentAnswer(evt.target.value)}
             />
+
+            <InputRightElement>
+              <CheckIcon color="green.500" />
+            </InputRightElement>
+          </InputGroup>
         </form>
       </>
     );
@@ -80,7 +119,36 @@ export default function SrsReviewPane() {
 
   return (
     <main className={styles.main}>
-      <Container className={styles.container}>{renderInside()}</Container>
+      <Container>
+        <Button onClick={onOpen}>
+          <ArrowBackIcon />
+          Back
+        </Button>
+        <div className={styles.container}>{renderInside()}</div>
+      </Container>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Confirm Quit</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            Are you sure you want to go back? Your current progress into this batch will not be
+            saved.
+          </ModalBody>
+
+          <ModalFooter>
+            <Button variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Link to="/">
+              <Button colorScheme="red" mr={3}>
+                Close
+              </Button>
+            </Link>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </main>
   );
 }