add fav words page

src/views/Options/FavWords.js

@@ -0,0 +1,90 @@
+import Stack from "@mui/material/Stack";
+import { OPT_TRANS_BAIDU } from "../../config";
+import { useEffect, useState } from "react";
+import Typography from "@mui/material/Typography";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import CircularProgress from "@mui/material/CircularProgress";
+import Alert from "@mui/material/Alert";
+import { apiTranslate } from "../../apis";
+import Box from "@mui/material/Box";
+import { useFavWords } from "../../hooks/FavWords";
+import { DictCont } from "../Selection/TranCont";
+
+function DictField({ word }) {
+  const [dictResult, setDictResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        setError("");
+        const dictRes = await apiTranslate({
+          text: word,
+          translator: OPT_TRANS_BAIDU,
+          fromLang: "en",
+          toLang: "zh-CN",
+        });
+        setDictResult(dictRes[2].dict_result);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [word]);
+
+  if (loading) {
+    return <CircularProgress size={24} />;
+  }
+
+  if (error) {
+    return <Alert severity="error">{error}</Alert>;
+  }
+
+  return <DictCont dictResult={dictResult} />;
+}
+
+function FavAccordion({ word }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleChange = (e) => {
+    setExpanded((pre) => !pre);
+  };
+
+  return (
+    <Accordion expanded={expanded} onChange={handleChange}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        {/* <Typography>{`[${new Date(
+          createdAt
+        ).toLocaleString()}] ${word}`}</Typography> */}
+        <Typography>{word}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {expanded && <DictField word={word} />}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default function FavWords() {
+  const { favWords } = useFavWords();
+  const favList = Object.entries(favWords).sort((a, b) =>
+    a[0].localeCompare(b[0])
+  );
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <Box>
+          {favList.map(([word, { createdAt }]) => (
+            <FavAccordion key={word} word={word} createdAt={createdAt} />
+          ))}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

src/views/Options/Navigator.js

@@ -14,6 +14,7 @@ import ApiIcon from "@mui/icons-material/Api";
 import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
 import InputIcon from "@mui/icons-material/Input";
 import SelectAllIcon from '@mui/icons-material/SelectAll';
+import EventNoteIcon from '@mui/icons-material/EventNote';
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);
@@ -70,6 +71,12 @@ export default function Navigator(props) {
       url: "/webfix",
       icon: <SendTimeExtensionIcon />,
     },
+    {
+      id: "words",
+      label: i18n("favorite_words"),
+      url: "/words",
+      icon: <EventNoteIcon />,
+    },
     { id: "about", label: i18n("about"), url: "/about", icon: <InfoIcon /> },
   ];
   return (

src/views/Options/index.js

@@ -21,6 +21,7 @@ import Apis from "./Apis";
 import Webfix from "./Webfix";
 import InputSetting from "./InputSetting";
 import Tranbox from "./Tranbox";
+import FavWords from "./FavWords";
 
 export default function Options() {
   const [error, setError] = useState("");
@@ -125,6 +126,7 @@ export default function Options() {
                 <Route path="apis" element={<Apis />} />
                 <Route path="sync" element={<SyncSetting />} />
                 <Route path="webfix" element={<Webfix />} />
+                <Route path="words" element={<FavWords />} />
                 <Route path="about" element={<About />} />
               </Route>
             </Routes>

src/views/Selection/FavBtn.js

@@ -0,0 +1,31 @@
+import IconButton from "@mui/material/IconButton";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import { useState } from "react";
+import { useFavWords } from "../../hooks/FavWords";
+
+export default function FavBtn({ word }) {
+  const { favWords, toggleFav } = useFavWords();
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    try {
+      setLoading(true);
+      await toggleFav(word);
+    } catch (err) {
+      console.log("[set fav]", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <IconButton disabled={loading} size="small" onClick={handleClick}>
+      {favWords[word] ? (
+        <FavoriteIcon fontSize="inherit" />
+      ) : (
+        <FavoriteBorderIcon fontSize="inherit" />
+      )}
+    </IconButton>
+  );
+}

src/views/Selection/TranCont.js

@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 import { apiTranslate } from "../../apis";
 import { isValidWord } from "../../libs/utils";
 import CopyBtn from "./CopyBtn";
+import FavBtn from "./FavBtn";
 
 const exchangeMap = {
   word_third: "第三人称单数",
@@ -20,16 +21,24 @@ const exchangeMap = {
   word_proto: "原词",
 };
 
-function DictCont({ dictResult }) {
+export function DictCont({ dictResult }) {
   if (!dictResult) {
     return;
   }
 
   return (
     <Box>
-      <div style={{ fontWeight: "bold" }}>
-        {dictResult.simple_means?.word_name}
-      </div>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="flex-start"
+      >
+        <div style={{ fontWeight: "bold" }}>
+          {dictResult.simple_means?.word_name}
+        </div>
+        <FavBtn word={dictResult.simple_means?.word_name} />
+      </Stack>
+
       {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
         <div key={idx}>
           <div>{`英[${ph_en}] 美[${ph_am}]`}</div>
@@ -42,11 +51,13 @@ function DictCont({ dictResult }) {
           </ul>
         </div>
       ))}
+
       <div>
         {Object.entries(dictResult.simple_means?.exchange || {})
           .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
           .join("; ")}
       </div>
+
       <Stack direction="row" spacing={1}>
         {Object.values(dictResult.simple_means?.tags || {})
           .flat()