Add a way to create a new key in translation files

src/components/LanguageComparator/index.css

@@ -0,0 +1,12 @@
+.translation-key-add {
+  margin-top: 2rem;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+}
+.translation-key-add input[type="text"] {
+  min-width: 40%;
+}
+.translation-key-add input[type="button"] {
+  min-width: calc(10% - 1.5rem);
+  margin-left: 0.5rem;
+}

src/components/LanguageComparator/view.jsx

@@ -1,5 +1,11 @@
+import { useState } from 'react';
+
 import TranslationList from '../TranslationList';
 
+import saveTranslation from '../../events/saveTranslation';
+
+import './index.css';
+
 export default function LanguageComparator({
 	useTranslation,
 	leftLanguage,
@@ -9,11 +15,32 @@ export default function LanguageComparator({
 	setRightLanguage,
 	selectedFolder
 }) {
+	const [inputText, setInputText] = useState('');
+
 	const leftTranslations = useTranslation(selectedFolder, currentFile, leftLanguage);
 	const rightTranslations = useTranslation(selectedFolder, currentFile, rightLanguage);
 
 	return (
 		<>
+			<div className="translation-key-add">
+				<input
+					type="text"
+					placeholder="New translation key"
+					value={inputText}
+					onChange={(e) => setInputText(e.target.value)}
+				/>
+				<input type="button" value="Add key" onClick={async() => {
+					try {
+						leftTranslations[inputText] = '';
+						rightTranslations[inputText] = '';
+						await saveTranslation(selectedFolder, currentFile, leftLanguage, leftTranslations);
+						setInputText('');
+					} catch(e) {
+						console.error(e);
+					}
+				}} />
+			</div>
+
 			<TranslationList
 				file={currentFile}
 				list={leftTranslations}