From 0602500b30826915c849901d77c8d2a22bf5fb75 Mon Sep 17 00:00:00 2001
From: Elanis <elanis@hotmail.com>
Date: Sun, 27 Aug 2023 14:57:28 +0200
Subject: [PATCH] Add a way to create a new key in translation files

---
 src/components/LanguageComparator/index.css | 12 +++++++++
 src/components/LanguageComparator/view.jsx  | 27 +++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 src/components/LanguageComparator/index.css

diff --git a/src/components/LanguageComparator/index.css b/src/components/LanguageComparator/index.css
new file mode 100644
index 0000000..32fdaed
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/LanguageComparator/view.jsx b/src/components/LanguageComparator/view.jsx
index a6bd614..7358be7 100644
--- a/src/components/LanguageComparator/view.jsx
+++ b/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}