add back edit sidebar button

interface/src/pages/Settings.tsx

@@ -48,6 +48,11 @@ const Settings: React.FC = () => {
       description: "Customise the overall theme colour of SEQTA Learn.",
       modifyElement: <PickerSwatch />
     },
+    {
+      title: "Edit Sidebar Layout",
+      description: "Customise the sidebar layout.",
+      modifyElement: <button onClick={() => chrome.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' })} className='px-4 py-1 text-[0.75rem] bg-blue-500 rounded-md'>Edit</button>
+    },
     {
       title: "Transparency Effects",
       description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",

src/SEQTA.js

@@ -11,13 +11,14 @@ import loading, { AppendLoadingSymbol } from "./seqta/ui/Loading.js";
 import assessmentsicon from "./seqta/icons/assessmentsIcon.js";
 import coursesicon from "./seqta/icons/coursesIcon.js";
 import StorageListener from "./seqta/utils/StorageListener.js";
+import { MessageHandler } from "./seqta/utils/MessageListener.js";
 import { updateBgDurations } from "./seqta/ui/Animation.js";
 import { updateAllColors } from "./seqta/ui/colors/Manager.js";
 import { appendBackgroundToUI } from "./seqta/ui/ImageBackgrounds.js";
 
 export let isChrome = window.chrome;
 let SettingsClicked = false;
-let MenuOptionsOpen = false;
+export let MenuOptionsOpen = false;
 let UserInitalCode = "";
 let currentSelectedDate = new Date();
 let LessonInterval;
@@ -717,6 +718,7 @@ export function AppendElementsToDisabledPage() {
 }
 
 new StorageListener();
+new MessageHandler();
 
 var PageLoaded = false;
 async function CheckLoadOnPeriods() {
@@ -771,6 +773,13 @@ document.addEventListener(
   true,
 );
 
+export function closeSettings() {
+  var extensionsettings = document.getElementById("ExtensionPopup");
+
+  extensionsettings.classList.add("hide");
+  SettingsClicked = false;
+}
+
 function addExtensionSettings() {
   let link = document.createElement("link");
   link.href = chrome.runtime.getURL("popup/popup.css");
@@ -893,7 +902,7 @@ function cloneAttributes(target, source) {
   });
 }
 
-function OpenMenuOptions() {
+export function OpenMenuOptions() {
   chrome.storage.local.get(null, function (result) {
     var container = document.getElementById("container");
     var menu = document.getElementById("menu");

src/background.js

@@ -101,6 +101,15 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     HandleIntexedDB(request, sendResponse);
     return true;
   
+  case "currentTab":
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, request, function (response) {
+        // send response from current tab to popup
+        sendResponse(response);
+      });
+    });
+    return true;
+  
   case "githubTab":
     chrome.tabs.create({ url: "github.com/SethBurkart123/EvenBetterSEQTA" });
     break;

src/seqta/utils/MessageListener.js

@@ -0,0 +1,33 @@
+/* global chrome */
+
+import { MenuOptionsOpen, OpenMenuOptions, closeSettings } from "../../SEQTA.js";
+
+export class MessageHandler {
+  constructor() {
+    // Register this class as the message handler for the Chrome extension
+    chrome.runtime.onMessage.addListener(this.routeMessage.bind(this));
+  }
+
+  routeMessage(request) {
+    // You can use a switch-case or an object to route the message to the correct handler
+    switch (request.info) {
+
+    case "EditSidebar":
+      this.editSidebar();
+      break;
+    // Add more cases as needed
+    default:
+      console.log("Unknown request info:", request.info);
+    
+    }
+  }
+
+  editSidebar() {
+    if (!MenuOptionsOpen) {
+      OpenMenuOptions();
+      closeSettings();
+    }
+  }
+
+  // Add more methods for handling other message types
+}