Add manual translate as default (#33)

* Added translate and switch auto buttons

* Tests updated

* Added hotkey & improved buttons visually

components/AutoTranslateButton.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect, FC } from "react";
+import { IconButton } from "@chakra-ui/react";
+import { FaBolt } from "react-icons/fa";
+
+type Props = {
+    onAuto: () => void,
+    [key: string]: any
+};
+
+const initLocalStorage = () => {
+    const initial = typeof window !== "undefined" && localStorage.getItem("isauto");
+    return initial ? initial === "true" : false;
+};
+
+const AutoTranslateButton: FC<Props> = ({ onAuto, ...props }) => {
+    const [isAuto, setIsAuto] = useState(initLocalStorage);
+
+    useEffect(() => {
+        localStorage.setItem("isauto", isAuto.toString());
+    }, [isAuto]);
+
+    useEffect(() => {
+        isAuto && onAuto();
+    }, [isAuto, onAuto]);
+
+    return (
+        <IconButton
+            aria-label="Switch auto"
+            icon={<FaBolt />}
+            colorScheme="lingva"
+            variant={isAuto ? "solid" : "outline"}
+            onClick={() => setIsAuto(current => !current)}
+            {...props}
+        />
+    );
+};
+
+export default AutoTranslateButton;

components/LangSelect.tsx

@@ -13,7 +13,7 @@ const LangSelect: FC<Props> = ({ value, onChange, langs, ...props }) => (
         value={value}
         onChange={onChange}
         variant="flushed"
-        px={2}
+        px={3}
         textAlign="center"
         style={{ textAlignLast: "center" }}
         {...props}

components/TranslationArea.tsx

@@ -1,11 +1,12 @@
-import { FC, ChangeEvent } from "react";
-import { Box, HStack, Textarea, IconButton, Tooltip, Spinner, useBreakpointValue, useColorModeValue, useClipboard } from "@chakra-ui/react";
+import { FC } from "react";
+import { Box, HStack, Textarea, IconButton, Tooltip, Spinner, TextareaProps, useBreakpointValue, useColorModeValue, useClipboard } from "@chakra-ui/react";
 import { FaCopy, FaCheck, FaPlay, FaStop } from "react-icons/fa";
 import { useAudioFromBuffer } from "@hooks";
 
 type Props =  {
     value: string,
-    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void,
+    onChange?: TextareaProps["onChange"],
+    onSubmit?: () => void,
     readOnly?: true,
     audio?: number[],
     canCopy?: boolean,
@@ -13,7 +14,7 @@ type Props =  {
     [key: string]: any
 };
 
-const TranslationArea: FC<Props> = ({ value, onChange, readOnly, audio, canCopy, isLoading, ...props }) => {
+const TranslationArea: FC<Props> = ({ value, onChange, onSubmit, readOnly, audio, canCopy, isLoading, ...props }) => {
     const { hasCopied, onCopy } = useClipboard(value);
     const { audioExists, isAudioPlaying, onAudioClick } = useAudioFromBuffer(audio);
     const spinnerProps = {
@@ -36,6 +37,7 @@ const TranslationArea: FC<Props> = ({ value, onChange, readOnly, audio, canCopy,
                 rows={useBreakpointValue([6, null, 12]) ?? undefined}
                 size="lg"
                 data-gramm_editor={false}
+                onKeyPress={e => (e.ctrlKey || e.metaKey) && e.key === "Enter" && onSubmit?.()}
                 {...props}
             />
             <HStack

components/index.tsx

@@ -6,3 +6,4 @@ export { default as Footer } from "./Footer";
 export { default as ColorModeToggler } from "./ColorModeToggler";
 export { default as LangSelect } from "./LangSelect";
 export { default as TranslationArea } from "./TranslationArea";
+export { default as AutoTranslateButton } from "./AutoTranslateButton";