From f67aa94808319974fafe3193f86165034e3b8ce4 Mon Sep 17 00:00:00 2001
From: Alvinn8 <42838560+Alvinn8@users.noreply.github.com>
Date: Mon, 3 Jul 2023 22:54:07 +0200
Subject: [PATCH] Show open editors in bottom right

---
 README.md                            |  2 +-
 src/common/ui/App.tsx                |  6 ++++-
 src/common/ui/editor/OpenEditors.tsx | 36 ++++++++++++++++++++++++++++
 src/common/ui/editor/editor.tsx      | 30 +++++++++++++++++++----
 src/common/ui/task/Tasks.tsx         |  2 +-
 5 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 src/common/ui/editor/OpenEditors.tsx

diff --git a/README.md b/README.md
index 0e74107..2a609c2 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ Mobile
 - [x] Reconnecting
 - [x] Folder deleting
 - [x] Viewing gzipped files
-- [ ] Current Open Editors window on the bottom right.
+- [x] Current Open Editors window on the bottom right.
 - [x] Nicer dialogs
 - [x] Prevent saving gzipped files.
 - [ ] Nbt reading and writing
diff --git a/src/common/ui/App.tsx b/src/common/ui/App.tsx
index 0f37265..07cb59c 100644
--- a/src/common/ui/App.tsx
+++ b/src/common/ui/App.tsx
@@ -13,6 +13,7 @@ import DirectoryPath from "../ftp/DirectoryPath";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "./style.css";
+import OpenEditors from "./editor/OpenEditors";
 
 let app: App;
 
@@ -260,7 +261,10 @@ export class App extends React.Component<AppProps, AppState> {
                     </div>
                 }
                 <Messages />
-                <Tasks />
+                <div className="position-absolute bottom-0 end-0 p-3 d-flex flex-column" style={{ gap: "8px" }}>
+                    <Tasks />
+                    <OpenEditors />
+                </div>
             </div>
         );
     }
diff --git a/src/common/ui/editor/OpenEditors.tsx b/src/common/ui/editor/OpenEditors.tsx
new file mode 100644
index 0000000..7928080
--- /dev/null
+++ b/src/common/ui/editor/OpenEditors.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { editorWindowsStore } from "./editor";
+import { isDarkTheme } from "../theme";
+
+const OpenEditors = () => {
+    const [editorWindows, setEditorWindows] = useState<Window[]>([]);
+
+    editorWindowsStore.on("change", (editorWindows) => {
+        setEditorWindows(editorWindows);
+    });
+
+    const openWindows = editorWindows.filter(wind => !wind.closed);
+
+    if (openWindows.length === 0) {
+        return null;
+    }
+
+    const darkThemeClasses = isDarkTheme ? " bg-secondary text-white" : "";
+
+    return (
+        <div className={"card" + darkThemeClasses}>
+            <div className="card-header px-3 py-2 bg-primary text-light">
+                <span className="card-title">Open Editors</span>
+            </div>
+            <ul className="list-group list-group-flush">
+                {openWindows.map((editorWindow, index) => (
+                    <li key={index} onClick={() => editorWindow.focus()} className={"list-group-item cursor-pointer" + darkThemeClasses}>
+                        { editorWindow.name }
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default OpenEditors;
\ No newline at end of file
diff --git a/src/common/ui/editor/editor.tsx b/src/common/ui/editor/editor.tsx
index fb31faf..e6623df 100644
--- a/src/common/ui/editor/editor.tsx
+++ b/src/common/ui/editor/editor.tsx
@@ -7,9 +7,28 @@ import NbtData, { BedrockEdition, BedrockLevelDat } from "../../nbt/NbtData";
 import { FileType, getFileType } from "../FileFormats";
 import { getApp } from "../App";
 import { addMessage } from "../messages";
+import { EventEmitter } from "eventemitter3";
 
-// @ts-ignore
-window.editorWindows = [];
+class EditorWindowsStore extends EventEmitter {
+    editorWindows: Window[] = [];
+
+    setEditorWindows(editorWindows: Window[]) {
+        this.editorWindows = editorWindows;
+        this.emit("change", this.editorWindows);
+    }
+}
+export const editorWindowsStore = new EditorWindowsStore();
+
+window.addEventListener("beforeunload", (event) => {
+    if (editorWindowsStore.editorWindows.filter(wind => !wind.closed).length > 0) {
+        event.preventDefault();
+        return (event.returnValue = "");
+    }
+});
+
+window.addEventListener("unload", () => {
+    editorWindowsStore.editorWindows.forEach(wind => wind.close());
+});
 
 /**
  * Create a window where an editor can be contained.
@@ -41,10 +60,13 @@ function openWindow(name: string, url: string): Window {
         wind = iframe.contentWindow;
         wind["doClose"] = function() {
             iframe.remove();
+            editorWindowsStore.setEditorWindows(editorWindowsStore.editorWindows.filter(w => wind !== w));
         };
     }
-    // @ts-ignore
-    window.editorWindows.push(wind);
+    editorWindowsStore.setEditorWindows([...editorWindowsStore.editorWindows, wind]);
+    wind.addEventListener("beforeunload", () => {
+        editorWindowsStore.setEditorWindows(editorWindowsStore.editorWindows.filter(w => wind !== w));
+    });
     return wind;
 }
 
diff --git a/src/common/ui/task/Tasks.tsx b/src/common/ui/task/Tasks.tsx
index c61fcf3..45140aa 100644
--- a/src/common/ui/task/Tasks.tsx
+++ b/src/common/ui/task/Tasks.tsx
@@ -36,7 +36,7 @@ export default class Tasks extends React.Component<{}, TasksState> {
 
     render() {
         return (
-            <div className="toast-container position-absolute bottom-0 end-0 p-3">
+            <div>
                 {this.state.task != null && (
                     <TaskComponent task={this.state.task} />
                 )}