feat(custom text): add text file opening (Shuja-Mahmood) (#4596)

frontend/src/styles/popups.scss

@@ -90,7 +90,7 @@
 
     .buttonsTop {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
       gap: 1rem;
     }
 

frontend/src/styles/z_media-queries.scss

@@ -63,6 +63,9 @@
   // .pageSettings .section.themes .buttons {
   //   grid-template-columns: 1fr 1fr 1fr;
   // }
+  #customTextPopupWrapper #customTextPopup .buttonsTop {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 //1050px

frontend/src/ts/popups/custom-text-popup.ts

@@ -384,4 +384,30 @@ $(`#customTextPopupWrapper .longCustomTextWarning .button`).on("click", () => {
   $(`#customTextPopup .longCustomTextWarning`).addClass("hidden");
 });
 
+$(`#fileInput`).on("change", () => {
+  const file = ($(`#fileInput`)[0] as HTMLInputElement).files?.[0];
+  if (file) {
+    if (file.type !== "text/plain") {
+      Notifications.add("File is not a text file", -1, {
+        duration: 5,
+      });
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.readAsText(file, "UTF-8");
+
+    reader.onload = (readerEvent): void => {
+      const content = readerEvent.target?.result as string;
+      $(`${popup} textarea`).val(content);
+      $(`#fileInput`).val("");
+    };
+    reader.onerror = (): void => {
+      Notifications.add("Failed to read file", -1, {
+        duration: 5,
+      });
+    };
+  }
+});
+
 Skeleton.save(skeletonId);

frontend/static/html/popups.html

@@ -435,6 +435,11 @@
         <i class="fas fa-folder"></i>
         Show saved texts
       </div>
+      <input id="fileInput" type="file" class="hidden" accept=".txt" />
+      <label for="fileInput" class="button importText">
+        <i class="fas fa-file-import"></i>
+        Open file
+      </label>
       <div class="button wordfilter">
         <i class="fas fa-filter"></i>
         Words filter