Enable adding files

website/package-lock.json

@@ -8,8 +8,10 @@
       "name": "website",
       "version": "0.0.0",
       "dependencies": {
+        "@sweetalert2/themes": "^5.0.15",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "sweetalert2": "^11.7.3"
       },
       "devDependencies": {
         "@types/node": "^18.15.10",
@@ -760,6 +762,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/@sweetalert2/themes": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/@sweetalert2/themes/-/themes-5.0.15.tgz",
+      "integrity": "sha512-uGU7CynpjRc3cllTqZEvXiZTpfQ6MN4faG+Tf0VFW81bLysCQm00iHS3NJLZx5STRfxpM5SzqeVXpAzJyTG/WA==",
+      "peerDependencies": {
+        "sweetalert2": "^11.0.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3389,6 +3399,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.7.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz",
+      "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/terser": {
       "version": "5.16.8",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
@@ -4063,6 +4082,12 @@
       "dev": true,
       "optional": true
     },
+    "@sweetalert2/themes": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/@sweetalert2/themes/-/themes-5.0.15.tgz",
+      "integrity": "sha512-uGU7CynpjRc3cllTqZEvXiZTpfQ6MN4faG+Tf0VFW81bLysCQm00iHS3NJLZx5STRfxpM5SzqeVXpAzJyTG/WA==",
+      "requires": {}
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -5935,6 +5960,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "sweetalert2": {
+      "version": "11.7.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz",
+      "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w=="
+    },
     "terser": {
       "version": "5.16.8",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",

website/package.json

@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@sweetalert2/themes": "^5.0.15",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sweetalert2": "^11.7.3"
   },
   "devDependencies": {
     "@types/node": "^18.15.10",

website/src/playground/FileSystem.ts

@@ -25,7 +25,7 @@ export default class FileSystem {
     return this.files[file];
   }
 
-  write(file: string, content: string | nil): void {
+  write(file: string, content: string | nil, afterFile?: string): void {
     if (content === nil) {
       this.list = this.list.filter((f) => f !== file);
       localStorage.setItem('fs-list', JSON.stringify(this.list));
@@ -33,7 +33,13 @@ export default class FileSystem {
       delete this.files[file];
     } else {
       if (!this.list.includes(file)) {
-        this.list.push(file);
+        if (afterFile === nil) {
+          this.list.push(file);
+        } else {
+          const index = this.list.indexOf(afterFile);
+          this.list.splice(index + 1, 0, file);
+        }
+
         localStorage.setItem('fs-list', JSON.stringify(this.list));
       }
   

website/src/playground/Swal.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import Swal from 'sweetalert2/dist/sweetalert2.js';
+
+import type SwalType from 'sweetalert2';
+
+export default Swal as typeof SwalType;

website/src/playground/index.html

@@ -11,15 +11,15 @@
       <div id="editor-loading"></div>
     </div>
     <div id="file-menu">
-      <div id="list-button" class="icon-btn ph-list"></div>
+      <div id="list-btn" class="icon-btn ph-list"></div>
       <div id="file-location">
         Loading...
       </div>
-      <div id="rename-button" class="icon-btn ph-pencil-simple"></div>
+      <div id="rename-btn" class="icon-btn disabled ph-pencil-simple"></div>
       <div class="grow-spacer"></div>
-      <div id="add-button" class="icon-btn ph-file-plus"></div>
-      <div id="restore-button" class="icon-btn ph-clock-counter-clockwise"></div>
-      <div id="delete-button" class="icon-btn ph-trash"></div>
+      <div id="add-btn" class="icon-btn ph-file-plus"></div>
+      <div id="restore-btn" class="icon-btn ph-clock-counter-clockwise"></div>
+      <div id="delete-btn" class="icon-btn disabled ph-trash"></div>
     </div>
 
     <div id="footer-buttons">

website/src/playground/index.ts

@@ -10,6 +10,7 @@ import VslibPool, {
 } from './vslib/VslibPool';
 import FileSystem from './FileSystem';
 import monaco from './monaco';
+import Swal from './Swal';
 
 function domQuery<T = HTMLElement>(query: string): T {
   return <T> <unknown> notNil(document.querySelector(query) ?? nil);
@@ -18,6 +19,13 @@ function domQuery<T = HTMLElement>(query: string): T {
 const editorEl = domQuery('#editor');
 
 const fileLocation = domQuery<HTMLSelectElement>('#file-location');
+
+const listBtn = domQuery('#list-btn');
+const renameBtn = domQuery('#rename-btn');
+const addBtn = domQuery('#add-btn');
+const restoreBtn = domQuery('#restore-btn');
+const deleteBtn = domQuery('#delete-btn');
+
 const filePreviousEl = domQuery('#file-previous');
 const fileNextEl = domQuery('#file-next');
 const outcomeEl = domQuery('#outcome');
@@ -91,7 +99,7 @@ editorEl.innerHTML = '';
       newFile = Object.keys(files)[0];
     }
 
-    const fileIdx = Object.keys(files).indexOf(newFile);
+    const fileIdx = fs.list.indexOf(newFile);
 
     if (fileIdx !== -1) {
       currentFile = newFile;
@@ -256,6 +264,20 @@ editorEl.innerHTML = '';
       return monaco.MarkerSeverity.Info;
     }
   }
+
+  addBtn.onclick = async () => {
+    const popup = await Swal.fire({
+      title: 'New File',
+      input: 'text',
+      inputPlaceholder: 'Enter name',
+    });
+
+    if (typeof popup.value === 'string' && popup.value !== '') {
+      const newFile = popup.value.endsWith('.ts') ? popup.value : `${popup.value}.ts`;
+      fs.write(newFile, '', currentFile);
+      changeFile(newFile);
+    }
+  };
 })();
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

website/src/playground/styles.scss

@@ -1,3 +1,5 @@
+@import '@sweetalert2/themes/dark/dark.scss';
+
 body {
   background-color: #1e1e1e;
   color: #d4d4d4;
@@ -29,8 +31,12 @@ a, a:visited {
     padding: 0.5em 0;
   }
 
-  #list-button {
-    padding: 0 0.7em;
+  #list-btn {
+    padding: 0 0.75em;
+  }
+
+  #delete-btn {
+    padding-right: 0.75em;
   }
 
   .icon-btn {
@@ -39,6 +45,11 @@ a, a:visited {
     justify-content: center;
     align-items: center;
     cursor: pointer;
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
   }
 }