1 files changed, 59 insertions, 3 deletions
diff --git a/src/plugin_page.js b/src/plugin_page.js
index 50dc419c..537f53a3 100644
--- a/src/plugin_page.js
+++ b/src/plugin_page.js
@@ -1,4 +1,8 @@
 (function () {
+    let plugins = [];
+
+    {{ PLUGINS }}
+
     const PLUGIN_ICON = `
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plugin" viewBox="0 0 16 16">
           <path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 
@@ -8,13 +12,65 @@
         </svg>
     `;
 
+    function createTitle(text) {
+        return `<div class="quickaccessmenu_Title_34nl5">${text}</div>`;
+    }
+
+    function createTabGroupPanel(content) {
+        return `<div class="quickaccessmenu_TabGroupPanel_1QO7b Panel Focusable">${content}</div>`;
+    }
+
+    function createPanelSelection(content) {
+        return `<div class="quickaccesscontrols_PanelSection_Ob5uo">${content}</div>`;
+    }
+
+    function createPanelSelectionRow(content) {
+        return `<div class="quickaccesscontrols_PanelSectionRow_26R5w">${content}</div>`;
+    }
+
+    function createButton(text, id) {
+        return `
+        <div class="basicdialog_Field_ugL9c basicdialog_WithChildrenBelow_1RjOd basicdialog_InlineWrapShiftsChildrenBelow_3a6QZ basicdialog_ExtraPaddingOnChildrenBelow_2-owv basicdialog_StandardPadding_1HrfN basicdialog_HighlightOnFocus_1xh2W Panel Focusable" style="--indent-level:0;">
+            <div class="basicdialog_FieldChildren_279n8">
+                <button id="${id}" type="button" tabindex="0" class="DialogButton _DialogLayout Secondary basicdialog_Button_1Ievp Focusable">${text}</button>
+            </div>    
+        </div>
+        `;
+    }
+
+    function createPluginList() {
+        let pages = document.getElementsByClassName("quickaccessmenu_AllTabContents_2yKG4 quickaccessmenu_Down_3rR0o")[0];
+        let pluginPage = pages.children[pages.children.length - 1];
+
+        pluginPage.innerHTML = createTitle("Plugins");
+
+        let buttons = "";
+        for (let i = 0; i < plugins.length; i++) {
+            buttons += createPanelSelectionRow(createButton(plugins[i].getName(), "plugin_btn_" + i))
+        }
+
+        pluginPage.innerHTML += createTabGroupPanel(createPanelSelection(buttons));
+
+        for (let i = 0; i < plugins.length; i++) {
+            document.getElementById("plugin_btn_" + i).onclick = (function(plugin, pluginPage) {
+               return function() {
+                   pluginPage.innerHTML = createButton("Back", "plugin_back") + createTitle(plugin.getName()) + createTabGroupPanel(plugin.getPageContent());
+                   plugin.runCode();
+
+                   document.getElementById("plugin_back").onclick = (e) => {
+                       createPluginList();
+                   };
+               };
+            }(plugins[i], pluginPage))
+        }
+
+    }
+
     function inject() {
         let tabs = document.getElementsByClassName("quickaccessmenu_TabContentColumn_2z5NL Panel Focusable")[0];
         tabs.children[tabs.children.length - 1].innerHTML = PLUGIN_ICON;
 
-        let pages = document.getElementsByClassName("quickaccessmenu_AllTabContents_2yKG4 quickaccessmenu_Down_3rR0o")[0];
-        let pluginPage = pages.children[pages.children.length - 1];
-        pluginPage.innerHTML = "Hello from Rust!";
+        createPluginList();
     }
 
     let injector = setInterval(function () {