Show open editors in bottom right

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

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>
         );
     }

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;

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;
 }
 

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} />
                 )}