refactor: rename localstorage vars

components/AppWorkspace.tsx

@@ -24,7 +24,7 @@ export function AppWorkspace(props: Props) {
       pb="md"
     >
       <Group align="flex-start" justify="center" h="100%" gap="xl">
-        <Box flex={{ base: 1, sm: 2 }} maw={700}>
+        <Box flex={{ base: 1, sm: 2 }} maw={640}>
           <VideoAndScript />
         </Box>
         <Box
@@ -39,8 +39,8 @@ export function AppWorkspace(props: Props) {
       </Group>
       <Group
         pos="absolute"
-        bottom={16}
-        right={24}
+        bottom={{ base: 24, md: 64 }}
+        right={{ base: 24, md: 64 }}
         style={{ display: chatOpened ? "none" : "flex" }}
       >
         <Tooltip label="Open Chat" position="top" withArrow>

components/Chat.tsx

@@ -83,7 +83,7 @@ export function Chat(props: Props) {
       radius="md"
       p="sm"
       miw={300}
-      maw={400}
+      maw={600}
       w="100%"
       styles={{
         root: {
@@ -125,7 +125,7 @@ export function Chat(props: Props) {
                 px={12}
                 withBorder
                 shadow="none"
-                maw={336}
+                maw={400}
                 w="max-content"
                 style={{
                   alignSelf: chat.sender === "user" ? "flex-end" : "flex-start",

components/NativeLanguageInput.tsx

@@ -2,12 +2,12 @@ import { Select, SelectProps } from "@mantine/core";
 import React, { useState } from "react";
 type Props = SelectProps;
 export function NativeLanguageInput(props: Props) {
-  const initLanguage = localStorage.getItem("native-language");
+  const initLanguage = localStorage.getItem("linguatube.nativeLanguage");
   const [language, setLanguage] = useState<string | null>(initLanguage);
 
   const handleChange = (value: string | null) => {
     if (value) {
-      localStorage.setItem("native-language", value);
+      localStorage.setItem("linguatube.nativeLanguage", value);
     }
     setLanguage(value);
   };

components/OpenaiApiKeyInput.tsx

@@ -3,13 +3,13 @@ import React, { useState } from "react";
 import { useOpenaiApiKey } from "@/store/openai_api_key.store";
 type Props = PasswordInputProps;
 export function OpenaiApiKeyInput(props: Props) {
-  const initKey = localStorage.getItem("openai-api-key");
+  const initKey = localStorage.getItem("linguatube.openaiApiKey");
   const [key, setKey] = useState<string>(initKey ?? "");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e?.target.value;
     if (value) {
-      localStorage.setItem("openai-api-key", value);
+      localStorage.setItem("linguatube.openaiApiKey", value);
     }
     setKey(value);
   };

components/Script.tsx

@@ -47,11 +47,13 @@ export function Script(props: Props) {
 
         if (fullWord) setSelectedFullWord(fullWord);
         if (fullSentence) setSelectedFullSentence(fullSentence);
-        if (selectionPos && containerPos)
+        if (selectionPos && containerPos) {
+          const topPos = selectionPos.top - containerPos.top;
           setHelperPos({
-            top: selectionPos.top - containerPos.top - 40,
+            top: topPos > 40 ? topPos - 40 : topPos + 30,
             right: containerPos.right - selectionPos.right,
           });
+        }
         console.log(fullWord);
         return;
       }
@@ -98,7 +100,7 @@ export function Script(props: Props) {
               }}
               onClick={() => {
                 modals.openContextModal({
-                  modal: "word-info",
+                  modal: "vocab-info",
                   title: "Word Information",
                   innerProps: {
                     word: selectedFullWord,

components/VideoAndScript.tsx

@@ -71,7 +71,7 @@ export function VideoAndScript(props: Props) {
           base: "calc(100vh - (9/16)*100vw - 60px)",
           sm:
             width > 1200
-              ? "calc(100vh - (9/16)*700px - 60px - 32px)"
+              ? "calc(100vh - (9/16)*640px - 60px - 32px)"
               : "calc(100vh - (9/16)*(3/5)*100vw - 60px - 8px)",
         }}
       >

components/VocabBook.tsx

@@ -0,0 +1,25 @@
+import { Vocab } from "@/types/vocab";
+import { Stack, Text, Table, TableData } from "@mantine/core";
+import React from "react";
+type Props = {};
+export function VocabBook(props: Props) {
+  const vocabString = localStorage.getItem("linguatube.vocab");
+  const vocab = vocabString
+    ? (JSON.parse(vocabString) as Vocab[])
+    : ([] as Vocab[]);
+  const tableData: TableData = {
+    head: ["Word", "Meaning", "Example"],
+    body: vocab.map((v) => [v.word, v.meaning, v.sentence]),
+  };
+
+  return (
+    <Stack>
+      <Table data={tableData} stickyHeader stickyHeaderOffset={60} striped />
+      {tableData.body?.length === 0 && (
+        <Text py="lg" ta="center">
+          No vocabulary entries found
+        </Text>
+      )}
+    </Stack>
+  );
+}

components/VocabularyModal.tsx → components/VocabBookModal.tsx

@@ -3,15 +3,15 @@ import React from "react";
 import { OpenaiApiKeyInput } from "./OpenaiApiKeyInput";
 import { Button, Text } from "@mantine/core";
 import { ContextModalProps, ModalsProvider } from "@mantine/modals";
-import { VocabularyBook } from "./VocabularyBook";
+import { VocabBook } from "./VocabBook";
 
-export function VocabularyModal({
+export function VocabBookModal({
   innerProps,
 }: ContextModalProps<{ modalBody?: string }>) {
   return (
     <Stack>
       {innerProps.modalBody && <Text>{innerProps.modalBody}</Text>}
-      <VocabularyBook />
+      <VocabBook />
     </Stack>
   );
 }

components/VocabInfo.tsx

@@ -22,14 +22,14 @@ export function VocabInfo(props: Props) {
   const [wordInfo, setWordInfo] = useState<WordInfo | null>(null);
 
   const handleSaveVocab = (): void => {
-    const prevVocabString = localStorage.getItem("vocab");
+    const prevVocabString = localStorage.getItem("linguatube.vocab");
     const prevVocab = prevVocabString
       ? (JSON.parse(prevVocabString) as Vocab[])
       : ([] as Vocab[]);
     const newVocab = { word: word, meaning: meaning, sentence: sentence };
     const allVocab = [...prevVocab, newVocab];
 
-    localStorage.setItem("vocab", JSON.stringify(allVocab));
+    localStorage.setItem("linguatube.vocab", JSON.stringify(allVocab));
     props.onSuccessSave?.();
   };
 

components/layouts/AppLayout.tsx

@@ -31,9 +31,10 @@ import {
 import styles from "@/styles/component.module.css";
 import { SettingModal } from "../SettingModal";
 import { modals } from "@mantine/modals";
+import { useRouter } from "next/router";
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
-  const [opened, { toggle }] = useDisclosure(true);
+  const router = useRouter();
   return (
     <AppShell
       layout="alt"
@@ -57,7 +58,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
                 color="dark"
                 onClick={() =>
                   modals.openContextModal({
-                    modal: "vocabulary",
+                    modal: "vocab-book",
                     innerProps: {},
                     title: "Vocabulary",
                     size: "xl",
@@ -68,12 +69,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
               </Button>
               <Menu shadow="sm" width={140} position="bottom-end">
                 <Menu.Target>
-                  <ActionIcon
-                    variant="subtle"
-                    color="dark"
-                    onClick={toggle}
-                    size="lg"
-                  >
+                  <ActionIcon variant="subtle" color="dark" size="lg">
                     <IconMenu4 size={22} />
                   </ActionIcon>
                 </Menu.Target>
@@ -116,8 +112,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
                         ),
                         confirmProps: { color: "red" },
                         labels: { confirm: "Reset Chat", cancel: "Cancel" },
-                        onCancel: () => console.log("Cancel"),
-                        onConfirm: () => console.log("Confirmed"),
+                        onConfirm: () => router.push("/"),
                       })
                     }
                   >

pages/_app.tsx

@@ -8,7 +8,7 @@ import { DefaultSeo } from "next-seo";
 import { defaultSeo } from "../next-seo.config";
 import { SettingModal } from "@/components/SettingModal";
 import { AboutModal } from "@/components/AboutModal";
-import { VocabularyModal } from "@/components/VocabularyModal";
+import { VocabBookModal } from "@/components/VocabBookModal";
 import { VocabInfoModal } from "@/components/VocabInfoModal";
 
 const font = Source_Sans_3({
@@ -29,8 +29,8 @@ export default function App({ Component, pageProps }: any) {
             modals={{
               setting: SettingModal,
               about: AboutModal,
-              vocabulary: VocabularyModal,
-              "word-info": VocabInfoModal,
+              "vocab-book": VocabBookModal,
+              "vocab-info": VocabInfoModal,
             }}
             modalProps={{ centered: true, size: "md" }}
           >