add export/import settings form

.editorconfig

@@ -0,0 +1,32 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 4
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[*.js]
+indent_style = space
+indent_size = 2
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

rocketchat.css

@@ -189,6 +189,13 @@ html[data-palette-dark="palette-darker"] {
 */
 
 /* buttons (general) */
+.theme-dark-button {
+    /* margin: 0 auto !important; */
+    padding: 5px 20px !important;
+    background-color: #54657c !important;
+    border-color: #566482 !important;
+}
+
 button.rcx-button--primary {
 	background-color: var(--button-bg-color-main);
 	border: none;
@@ -1309,6 +1316,13 @@ p.add-folder-button {
 	margin-right: 6px;
 	text-align: center;
 }
+[folder-label-area="settings"] form input[type="file"] {
+    background-color: #fff;
+    margin: 5px 0;
+    border-radius: 4px;
+    border: none;
+    padding: 4px;
+}
 [folder-label-area="settings"] form .big-radio {
 	background-color: #8bdcff17;
 	border: 1px solid #4e4e4e29;

rocketchat.js

@@ -32,6 +32,9 @@ const preparedFolders = {};
 const generalFolderUnreadChats = {};
 let loaderTimeout;
 
+const buttonDarkClassName = "theme-dark-button";
+const buttonClassName = "rcx-box rcx-box--full rcx-box--animated rcx-button--small rcx-button--primary rcx-button add-folder-button";
+
 
 function delay(time) {
 	return new Promise((resolve) => setTimeout(resolve, time));
@@ -204,6 +207,59 @@ function handlePopups() {
 }
 
 
+function exportSettingsHandler() {
+  const exportSettingsLink = document.getElementById("export-settings-link");
+  exportSettingsLink.addEventListener("click", function (e) {
+    e.preventDefault();
+    const settings = {
+      foldersSettings: getLocalStorageChatFolders(),
+      themeSettings: getLocalStorageThemeSettings(),
+    };
+    const link = document.createElement("a");
+    link.href = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(settings))}`;
+    link.download = "settings.json";
+    link.click();
+  });
+}
+
+
+function importSettingsHandler() {
+  const importSettingsForm = document.getElementById("import-settings-form");
+  importSettingsForm.addEventListener("submit", function (e) {
+    e.preventDefault();
+    const files = document.getElementById("selectFiles").files;
+    if (files.length <= 0) {
+      alert("Choose settings file to upload.");
+      return false;
+    }
+    // read file.
+    const fr = new FileReader();
+    fr.onload = function (e) {
+      let settings;
+      try {
+        settings = JSON.parse(e.target.result);
+        if (settings["foldersSettings"] === undefined) throw new Error("Incorrect settings file.");
+        if (settings["themeSettings"] === undefined) throw new Error("Incorrect settings file.");
+      } catch (err) {
+        alert("Incorrect settings file.");
+        return false;
+      }
+      // save new settings.
+      setLocalStorageThemeSettings(settings["themeSettings"]);
+      for (let [folderName, chatsList] of Object.entries(settings["foldersSettings"])) {
+        setLocalStorageChatFolder(folderName);
+        for (chatName of chatsList) {
+          addChatToLocalStorageChatFolder(folderName, chatName);
+        }
+      }
+      // reload window.
+      location.reload();
+    };
+    fr.readAsText(files.item(0));
+  });
+}
+
+
 function changeFolder(folderName) {
 	// scroll main section on top to listen events
 	const mainFolderArea = document.querySelector("div[style*='box-sizing']");
@@ -381,10 +437,10 @@ function setupFolderArea(folderName, items) {
 
 
 function setupThemeSettingsArea() {
-	const folderItemsContainer = document.createElement("div");
-	folderItemsContainer.style.display = "none";
-	folderItemsContainer.classList.add("sidebar-folder-container");
-	folderItemsContainer.setAttribute("folder-label-area", settingsLabel);
+	const settingsContainer = document.createElement("div");
+	settingsContainer.style.display = "none";
+	settingsContainer.classList.add("sidebar-folder-container");
+	settingsContainer.setAttribute("folder-label-area", settingsLabel);
 
 	const themeSettings = getLocalStorageThemeSettings();
 	updateThemeSettingsHtml(themeSettings);
@@ -397,7 +453,7 @@ function setupThemeSettingsArea() {
 				<input placeholder="Folder name" name="folder-name" class="add-folder-input" id="add-folder-input">
 			</div>
 			<div>
-				<input type="submit" value="Add folder" class="rcx-box rcx-box--full rcx-box--animated rcx-button--small rcx-button--primary rcx-button add-folder-button">
+				<input type="submit" value="Add folder" class="${buttonDarkClassName} ${buttonClassName} add-folder-button">
 			</div>
 		</form>
 	`;
@@ -468,10 +524,27 @@ function setupThemeSettingsArea() {
 			</fieldset>
 		</form>
 	`;
-	folderItemsContainer.innerHTML = addFolderFormHtml + settingsFormHtml;
+
+  let exportImportSettingsFormHtml = `
+  	<form id="import-settings-form">
+  		<h2>Export settings</h2>
+  		<a href="#" id="export-settings-link" class="${buttonClassName} ${buttonDarkClassName}">Export settings file</a>
+      <br>
+  		<h2>Import settings</h2>
+      <input type="file" id="selectFiles" value="Import" />
+      <button id="import" class="${buttonClassName} ${buttonDarkClassName}">Import settings file</button>
+  	</form>
+  `;
+
+	settingsContainer.innerHTML += addFolderFormHtml;
+	settingsContainer.innerHTML += settingsFormHtml;
+	settingsContainer.innerHTML += exportImportSettingsFormHtml;
 
 	const defaultChatsContainer = document.querySelector('nav.rcx-sidebar div[aria-label][role="region"]');
-	defaultChatsContainer.append(folderItemsContainer);
+	defaultChatsContainer.append(settingsContainer);
+
+  exportSettingsHandler();
+  importSettingsHandler();
 
 	// ----------- Settings form form handler -----------
 	const settingsForm = document.querySelector("#form-theme-settings");
@@ -805,6 +878,17 @@ function countFolderUnreadedChats(folderContainer, isGeneralFolder) {
 	// set counter
 	let folderName = isGeneralFolder ? allChatsLabel : folderContainer.getAttribute("folder-label-area");
 	let folderBadge = document.querySelector(`div[folder-label="${folderName}"] span.unread-chats-counter`);
+
+
+
+
+  // FIXME
+  if (!folderBadge) return;
+
+
+
+
+
 	if (folderUnreadedChats == 0) {
 		folderBadge.style.display = "none";
 	} else {