refactor: separate AddBetterSEQTA elements into smaller functions

src/SEQTA.ts

@@ -12,8 +12,6 @@ import { MessageHandler } from './seqta/utils/listeners/MessageListener'
 import { SettingsState } from "./types/storage"
 import ShortcutLinks from './seqta/content/links.json'
 import Sortable  from 'sortablejs'
-//import StorageListener from './seqta/utils/listeners/StorageChanges'
-import { appendBackgroundToUI } from './seqta/ui/ImageBackgrounds'
 import assessmentsicon from './seqta/icons/assessmentsIcon'
 import browser from 'webextension-polyfill'
 import coursesicon from './seqta/icons/coursesIcon'
@@ -23,13 +21,13 @@ import iframeCSS from "./css/iframe.scss?raw"
 import { onError } from './seqta/utils/onError'
 import stringToHTML from './seqta/utils/stringToHTML'
 import { updateAllColors } from './seqta/ui/colors/Manager'
-import { updateBgDurations } from './seqta/ui/Animation'
 import { SettingsResizer } from "./seqta/ui/SettingsResizer";
 import documentLoadCSS from './css/documentload.scss?inline'
 import injectedCSS from './css/injected.scss?inline'
 import { injectYouTubeVideo } from './seqta/ui/VideoLoader'
 import { settingsState } from './seqta/utils/listeners/SettingsState'
 import { StorageChangeHandler } from './seqta/utils/listeners/StorageChanges'
+import { AddBetterSEQTAElements } from './seqta/ui/AddBetterSEQTAElements'
 
 declare global {
   interface Window {
@@ -40,10 +38,8 @@ declare global {
 export let isChrome = window.chrome
 let SettingsClicked = false
 export let MenuOptionsOpen = false
-let UserInitalCode = ''
 let currentSelectedDate = new Date()
 let LessonInterval: any
-export let DarkMode: boolean
 
 var MenuItemMutation = false
 var NonSEQTAPage = false
@@ -90,7 +86,7 @@ function SetDisplayNone(ElementName: string) {
   return `li[data-key=${ElementName}]{display:var(--menuHidden) !important; transition: 1s;}`
 }
 
-function animbkEnable(item: any) {
+export function enableAnimatedBackground(item: any) {
   if (item.animatedbk) {
     CreateBackground()
   } else {
@@ -640,21 +636,16 @@ function CheckNoticeTextColour(notice: any) {
     mutations_list.forEach(function (mutation) {
       mutation.addedNodes.forEach(function (added_node) {
         const node = added_node as HTMLElement
-        const result = browser.storage.local.get(['DarkMode']) 
+        if (node.classList.contains('notice')) {
-        function open (result: any) {
+          var hex = node.style.cssText.split(' ')[1]
-          DarkMode = result.DarkMode
+          if (hex) {
-          if (node.classList.contains('notice')) {
-            var hex = node.style.cssText.split(' ')[1]
-            if (hex) {
             const hex1 = hex.slice(0,-1)
             var threshold = GetThresholdOfColor(hex1)
-            if (DarkMode && threshold < 100) {
+            if (settingsState.DarkMode && threshold < 100) {
               node.style.cssText = '--color: undefined;'
             }
           }
-          }
         }
-        result.then(open, onError)
       })
     })
   })
@@ -785,14 +776,14 @@ function main(storedSetting: SettingsState) {
 
   if (storedSetting.onoff) {
     console.log('[BetterSEQTA+] Enabled')
-    if (DarkMode) document.documentElement.classList.add('dark')
+    if (settingsState.DarkMode) document.documentElement.classList.add('dark')
 
     document.querySelector('.legacy-root')?.classList.add('hidden')
 
     new StorageChangeHandler();
     new MessageHandler()
     
-    updateAllColors(storedSetting)
+    updateAllColors()
     loading()
     InjectCustomIcons()
     HideMenuItems()
@@ -874,7 +865,7 @@ export function closeSettings() {
   ExtensionSettings!.classList.add('hide')
 }
 
-function addExtensionSettings() {
+export function addExtensionSettings() {
   const extensionPopup = document.createElement('div')
   extensionPopup.classList.add('outside-container', 'hide')
   extensionPopup.id = 'ExtensionPopup'
@@ -1155,254 +1146,22 @@ function ReplaceMenuSVG(element: HTMLElement, svg: string) {
   item.insertBefore((newsvg as Node), item.firstChild)
 }
 
-async function AddBetterSEQTAElements(toggle: any) {
+export function setupSettingsButton() {
-  if (toggle) {
+  var AddedSettings = document.getElementById('AddedSettings');
-    // Creates Home menu button and appends it as the first child of the list
+  var extensionPopup = document.getElementById('ExtensionPopup');
-
-    const result = await browser.storage.local.get()
-
-    animbkEnable(result)
-    updateBgDurations(result)
-
-    DarkMode = result.DarkMode
-    if (DarkMode) {
-      document.documentElement.classList.add('dark')
-    }
-
-    const container = document.getElementById('content')!
-    const div = document.createElement('div')
-    div.classList.add('titlebar')
-    container.append(div)
-    const NewButton = stringToHTML('<li class="item" data-key="home" id="homebutton" data-path="/home" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span>Home</span></label></li>')
-
-    const menu = document.getElementById('menu')!
-    const List = menu.firstChild! as HTMLElement
-    
-    if (NewButton.firstChild) {
-      List.insertBefore(NewButton.firstChild, List.firstChild)
-    }
-
-    try {
-      // Fetch the response and wait for it
-      const response = await fetch(`${location.origin}/seqta/student/login`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify({
-          mode: 'normal',
-          query: null,
-          redirect_url: location.origin,
-        }),
-      })
-
-      // Parse the JSON response and wait for it
-      const responseData = await response.json()
-      let info = responseData.payload
-
-      // Manipulate the DOM as needed
-      const titlebar = document.getElementsByClassName('titlebar')[0]
-      const userInfo = stringToHTML(
-        /* html */`
-        <div class="userInfosvgdiv tooltip">
-          <svg class="userInfosvg" viewBox="0 0 24 24"><path fill="var(--text-primary)" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path></svg>
-          <div class="tooltiptext topmenutooltip" id="logouttooltip"></div>
-        </div>
-      `
-      ).firstChild
-      titlebar.append(userInfo!)
-
-      const userinfo = stringToHTML(/* html */
-      `<div class="userInfo">
-        <div class="userInfoText">
-          <div style="display: flex; align-items: center;">
-            <p class="userInfohouse userInfoCode"></p>
-            <p class="userInfoName">${info.userDesc}</p>
-          </div>
-          <p class="userInfoCode">${UserInitalCode}</p>
-        </div>
-      </div>`).firstChild
-      titlebar.append(userinfo!)
-
-      var logoutbutton = document.getElementsByClassName('logout')[0]
-      var userInfosvgdiv = document.getElementById('logouttooltip')!
-      userInfosvgdiv.appendChild(logoutbutton)
-
-      // Await the fetch response
-      const peopleResponse = await fetch(`${location.origin}/seqta/student/load/message/people`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify({ mode: 'student' }),
-      })
-
-      // Await the JSON parsing of the response
-      const peopleResponseData = await peopleResponse.json()
-      let students = peopleResponseData.payload
-
-      // Process the students data
-      var index = students.findIndex(function (person: any) {
-        return (
-          person.firstname == info.userDesc.split(' ')[0] &&
-          person.surname == info.userDesc.split(' ')[1]
-        )
-      })
-
-      let houseelement1 = document.getElementsByClassName('userInfohouse')[0]
-      const houseelement = houseelement1 as HTMLElement
-      if (students[index]?.house) {
-        if (students[index]?.house_colour) {
-          houseelement.style.background = students[index].house_colour
-          try {
-            let colorresult = GetThresholdOfColor(students[index]?.house_colour)
-
-            houseelement.style.color = colorresult && colorresult > 300 ? 'black' : 'white'
-            houseelement.innerText = students[index].year + students[index].house
-          } catch (error) {
-            houseelement.innerText = students[index].house
-          }
-        }
-      } else {
-        houseelement.innerText = students[index].year
-      }
-
-    } catch (error) {
-      console.error('Error fetching and processing student data:', error)
-    }
-
-    const NewsButtonStr = '<li class="item" data-key="news" id="newsbutton" data-path="/news" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M5 7H10V13H5V7M19 17H5V15H19V17M19 13H12V11H19V13M19 9H12V7H19V9Z" /></svg><span>News</span></label></li>'
-    const NewsButton = stringToHTML(NewsButtonStr)
-    List!.appendChild(NewsButton.firstChild!)
-
-    let a = document.createElement('div')
-    a.classList.add('icon-cover')
-    a.id = 'icon-cover'
-    menu!.appendChild(a)
-
-    const menuCover = document.querySelector('#icon-cover')
-    menuCover!.addEventListener('click', function () {
-      location.href = '../#?page=/home'
-      loadHomePage();
-      (document!
-        .getElementById('menu')!
-        .firstChild! as HTMLElement).classList.remove('noscroll')
-    })
-    // Creates the home container when the menu button is pressed
-    const homebutton = document.getElementById('homebutton')
-    homebutton!.addEventListener('click', function () {
-      if (!MenuOptionsOpen) {
-        loadHomePage()
-      }
-    })
-
-    // Creates the news container when the menu button is pressed
-    const newsbutton = document.getElementById('newsbutton')
-    newsbutton!.addEventListener('click', function () {
-      if (!MenuOptionsOpen) {
-        SendNewsPage()
-      }
-    })
-  }
-
-  appendBackgroundToUI()
-  addExtensionSettings()
-
-  // If betterSEQTA+ is enabled, run the code
-  if (toggle) {
-    // Creates settings and dashboard buttons next to alerts
-    let SettingsButton = stringToHTML(
-      '<button class="addedButton tooltip" id="AddedSettings""><svg width="24" height="24" viewBox="0 0 24 24"><g><g><path d="M23.182,6.923c-.29,0-3.662,2.122-4.142,2.4l-2.8-1.555V4.511l4.257-2.456a.518.518,0,0,0,.233-.408.479.479,0,0,0-.233-.407,6.511,6.511,0,1,0-3.327,12.107,6.582,6.582,0,0,0,6.148-4.374,5.228,5.228,0,0,0,.333-1.542A.461.461,0,0,0,23.182,6.923Z"></path><path d="M9.73,10.418,7.376,12.883c-.01.01-.021.016-.03.025L1.158,19.1a2.682,2.682,0,1,0,3.793,3.793l4.583-4.582,0,0,4.1-4.005-.037-.037A9.094,9.094,0,0,1,9.73,10.418ZM3.053,21.888A.894.894,0,1,1,3.946,21,.893.893,0,0,1,3.053,21.888Z"></path></g></g></svg><div class="tooltiptext topmenutooltip">BetterSEQTA+ Settings</div></button>',
-    )
-    let ContentDiv = document.getElementById('content')
-    ContentDiv!.append(SettingsButton.firstChild!)
-
-    const result: any = await new Promise(resolve => {
-      const result = browser.storage.local.get()
-      result.then(resolve, onError)
-    })
-    
-    const DarkMode = result!.DarkMode
-    const tooltipString = GetLightDarkModeString(DarkMode)
-    const svgContent = DarkMode ? '<defs><clipPath id="__lottie_element_80"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_80)"><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>' :
-      '<defs><clipPath id="__lottie_element_263"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_263)"><g style="display: block;" transform="matrix(1.5,0,0,1.5,7,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(-1,0,0,-1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>'
-    
-    const LightDarkModeButton = stringToHTML(`
-      <button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton">
-        <svg xmlns="http://www.w3.org/2000/svg">${svgContent}</svg>
-        <div class="tooltiptext topmenutooltip" id="darklighttooliptext">${tooltipString}</div>
-      </button>
-    `)
-    
-    ContentDiv!.append(LightDarkModeButton.firstChild!)
-    
-    updateAllColors(DarkMode, result.selectedColor)
-
-    document.getElementById('LightDarkModeButton')!.addEventListener('click', async () => {
-      const result: any = await new Promise(resolve => {
-        const result = browser.storage.local.get()
-        result.then(resolve, onError)
-      })
-
-      console.log(!settingsState.DarkMode)
-      settingsState.DarkMode = !settingsState.DarkMode;
-      
-      updateAllColors(!settingsState.DarkMode, result.selectedColor)
-      
-      const darklightText = document.getElementById('darklighttooliptext')
-      darklightText!.innerText = GetLightDarkModeString(!settingsState.DarkMode)
-    })
-
-    // Locate the menuToggle element
-    const menuToggle = document.getElementById('menuToggle')
-    menuToggle!.innerHTML = ''
-
-    // Create three divs to act as lines of the hamburger icon
-    for (let i = 0; i < 3; i++) {
-      const line = document.createElement('div')
-      line.className = 'hamburger-line'
-      menuToggle!.appendChild(line)
-    }
-  } else {
-    // Creates settings and dashboard buttons next to alerts
-    let SettingsButton = stringToHTML(
-      '<button class="addedButton" id="AddedSettings""><svg width="24" height="24" viewBox="0 0 24 24"><g style="fill: var(--text-color);"><g><path d="M23.182,6.923c-.29,0-3.662,2.122-4.142,2.4l-2.8-1.555V4.511l4.257-2.456a.518.518,0,0,0,.233-.408.479.479,0,0,0-.233-.407,6.511,6.511,0,1,0-3.327,12.107,6.582,6.582,0,0,0,6.148-4.374,5.228,5.228,0,0,0,.333-1.542A.461.461,0,0,0,23.182,6.923Z"></path><path d="M9.73,10.418,7.376,12.883c-.01.01-.021.016-.03.025L1.158,19.1a2.682,2.682,0,1,0,3.793,3.793l4.583-4.582,0,0,4.1-4.005-.037-.037A9.094,9.094,0,0,1,9.73,10.418ZM3.053,21.888A.894.894,0,1,1,3.946,21,.893.893,0,0,1,3.053,21.888Z"></path></g></g></svg></button>',
-    )
-    let ContentDiv = document.getElementById('content')
-    ContentDiv!.append(SettingsButton.firstChild!)
-  }
-
-  var AddedSettings = document.getElementById('AddedSettings')
-  var extensionPopup = document.getElementById('ExtensionPopup')
 
   AddedSettings!.addEventListener('click', function () {
     if (SettingsClicked) {
-      extensionPopup!.classList.add('hide')
+      extensionPopup!.classList.add('hide');
-      animate(
+      animate('#ExtensionPopup', { opacity: [1, 0], scale: [1, 0] }, { easing: spring({ stiffness: 220, damping: 18 }) });
-        '#ExtensionPopup',
+      (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*');
-        { opacity: [1, 0], scale: [1, 0] },
-        { easing: spring({ stiffness: 220, damping: 18 }) }
-      );
-      (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*')
       SettingsClicked = false;
     } else {
-      extensionPopup!.classList.remove('hide')
+      extensionPopup!.classList.remove('hide');
-      animate(
+      animate('#ExtensionPopup', { opacity: [0, 1], scale: [0, 1] }, { easing: spring({ stiffness: 260, damping: 24 }) });
-        '#ExtensionPopup',
+      SettingsClicked = true;
-        { opacity: [0, 1], scale: [0, 1] },
-        { easing: spring({ stiffness: 260, damping: 24 }) }
-      )
-      SettingsClicked = true
     }
-  })
+  });
-}
-
-function GetLightDarkModeString(darkMode: boolean) {  
-  if (darkMode) {
-    return 'Switch to light theme'
-  } else {
-    return 'Switch to dark theme'
-  }
 }
 
 async function CheckCurrentLesson(lesson: any, num: number) {
@@ -2165,7 +1924,7 @@ async function AddCustomShortcutsToPage() {
   }
 }
 
-async function loadHomePage() {
+export async function loadHomePage() {
   // Sends the html data for the home page
   console.log('[BetterSEQTA+] Started Loading Home Page')
 
@@ -2638,7 +2397,7 @@ function createNewShortcut(link: any, icon: any, viewBox: any, title: any) {
   document.getElementById('shortcuts')!.appendChild(shortcut)
 }
 
-function SendNewsPage() {
+export function SendNewsPage() {
   setTimeout(function () {
     // Sends the html data for the home page
     console.log('[BetterSEQTA+] Started Loading News Page')

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -0,0 +1,290 @@
+import browser from "webextension-polyfill";
+import { GetThresholdOfColor, SendNewsPage, addExtensionSettings, enableAnimatedBackground, loadHomePage, setupSettingsButton } from "../../SEQTA";
+import { updateBgDurations } from "./Animation";
+import { appendBackgroundToUI } from "./ImageBackgrounds";
+import stringToHTML from "../utils/stringToHTML";
+import { settingsState } from "../utils/listeners/SettingsState";
+import { updateAllColors } from "./colors/Manager";
+
+export async function AddBetterSEQTAElements(toggle: any) {
+  if (toggle) {
+    const result = await browser.storage.local.get();
+    
+    initializeSettings(result);
+    addDarkMode(result.DarkMode);
+    createHomeButton();
+    await handleUserInfo();
+    handleStudentData();
+    createNewsButton();
+    setupEventListeners();
+  }
+
+  appendBackgroundToUI();
+  addExtensionSettings();
+  if (toggle) {
+    await createSettingsButton();
+    await addDarkLightToggle();
+    customizeMenuToggle();
+  } else {
+    await createSettingsButton();
+  }
+
+  setupSettingsButton();
+}
+
+function initializeSettings(result: any) {
+  enableAnimatedBackground(result);
+  updateBgDurations(result);
+}
+
+function addDarkMode(DarkMode: boolean) {
+  if (DarkMode) {
+    document.documentElement.classList.add('dark');
+  }
+}
+
+function createHomeButton() {
+  const container = document.getElementById('content')!;
+  const div = document.createElement('div');
+  div.classList.add('titlebar');
+  container.append(div);
+  
+  const NewButton = stringToHTML('<li class="item" data-key="home" id="homebutton" data-path="/home" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span>Home</span></label></li>');
+  const menu = document.getElementById('menu')!;
+  const List = menu.firstChild! as HTMLElement;
+  
+  if (NewButton.firstChild) {
+    List.insertBefore(NewButton.firstChild, List.firstChild);
+  }
+}
+
+async function handleUserInfo() {
+  try {
+    const response = await fetch(`${location.origin}/seqta/student/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      body: JSON.stringify({
+        mode: 'normal',
+        query: null,
+        redirect_url: location.origin,
+      }),
+    });
+    
+    const responseData = await response.json();
+    let info = responseData.payload;
+    updateUserInfo(info);
+  } catch (error) {
+    console.error('Error fetching and processing student data:', error);
+  }
+}
+
+function updateUserInfo(info: {
+  basic: boolean;
+  clientIP: string[] | null;
+  email: string | null;
+  id: number | null;
+  lastAccessedTime: number | null;
+  meta: {
+    code: string | null;
+    governmentID: string | null;
+  };
+  personUUID: string | null;
+  status: number | null;
+  synergeticCommunityUrl: string | null;
+  type: string | null;
+  userCode: string | null;
+  userDesc: string | null;
+  userName: string | null;
+}) {
+  const titlebar = document.getElementsByClassName('titlebar')[0];
+  
+  const userInfo = stringToHTML(/* html */`
+    <div class="userInfosvgdiv tooltip">
+      <svg class="userInfosvg" viewBox="0 0 24 24"><path fill="var(--text-primary)" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path></svg>
+      <div class="tooltiptext topmenutooltip" id="logouttooltip"></div>
+    </div>
+  `).firstChild;
+  titlebar.append(userInfo!);
+  
+  const userinfo = stringToHTML(/* html */`
+    <div class="userInfo">
+      <div class="userInfoText">
+        <div style="display: flex; align-items: center;">
+          <p class="userInfohouse userInfoCode"></p>
+          <p class="userInfoName">${info.userDesc}</p>
+        </div>
+        <p class="userInfoCode">${info.meta.code} // ${info.meta.governmentID}</p>
+      </div>
+    </div>
+  `).firstChild;
+  titlebar.append(userinfo!);
+  
+  var logoutbutton = document.getElementsByClassName('logout')[0];
+  var userInfosvgdiv = document.getElementById('logouttooltip')!;
+  userInfosvgdiv.appendChild(logoutbutton);
+}
+
+async function handleStudentData() {
+  try {
+    const response = await fetch(`${location.origin}/seqta/student/load/message/people`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      body: JSON.stringify({ mode: 'student' }),
+    });
+    
+    const responseData = await response.json();
+    let students = responseData.payload;
+    await updateStudentInfo(students);
+  } catch (error) {
+    console.error('Error fetching and processing student data:', error);
+  }
+}
+
+async function getUserInfo() {
+  try {
+    const response = await fetch(`${location.origin}/seqta/student/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      body: JSON.stringify({
+        mode: 'normal',
+        query: null,
+        redirect_url: location.origin,
+      }),
+    });
+
+    const responseData = await response.json();
+    return responseData.payload;
+  } catch (error) {
+    console.error('Error fetching user info:', error);
+    throw error; // Rethrow the error after logging it
+  }
+}
+
+async function updateStudentInfo(students: any) {
+  const info = await getUserInfo(); // You would need to implement this to fetch or pass the user info
+  var index = students.findIndex(function (person: any) {
+    return (
+      person.firstname == info.userDesc.split(' ')[0] &&
+      person.surname == info.userDesc.split(' ')[1]
+    );
+  });
+  
+  let houseelement1 = document.getElementsByClassName('userInfohouse')[0];
+  const houseelement = houseelement1 as HTMLElement;
+  
+  if (students[index]?.house) {
+    if (students[index]?.house_colour) {
+      houseelement.style.background = students[index].house_colour;
+      try {
+        let colorresult = GetThresholdOfColor(students[index]?.house_colour);
+        houseelement.style.color = colorresult && colorresult > 300 ? 'black' : 'white';
+        houseelement.innerText = students[index].year + students[index].house;
+      } catch (error) {
+        houseelement.innerText = students[index].house;
+      }
+    }
+  } else {
+    houseelement.innerText = students[index].year;
+  }
+}
+
+function createNewsButton() {
+  const NewsButtonStr = '<li class="item" data-key="news" id="newsbutton" data-path="/news" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M5 7H10V13H5V7M19 17H5V15H19V17M19 13H12V11H19V13M19 9H12V7H19V9Z" /></svg><span>News</span></label></li>';
+  const NewsButton = stringToHTML(NewsButtonStr);
+  const menu = document.getElementById('menu')!;
+  const List = menu.firstChild! as HTMLElement;
+  
+  List!.appendChild(NewsButton.firstChild!);
+  
+  let a = document.createElement('div');
+  a.classList.add('icon-cover');
+  a.id = 'icon-cover';
+  menu!.appendChild(a);
+}
+
+function setupEventListeners() {
+  const menuCover = document.querySelector('#icon-cover');
+  menuCover!.addEventListener('click', function () {
+    location.href = '../#?page=/home';
+    loadHomePage();
+    (document!.getElementById('menu')!.firstChild! as HTMLElement).classList.remove('noscroll');
+  });
+
+  const homebutton = document.getElementById('homebutton');
+  homebutton!.addEventListener('click', function () {
+    if (!homebutton?.classList.contains('draggable') && !homebutton?.classList.contains('active')) {
+      loadHomePage();
+    }
+  });
+
+  const newsbutton = document.getElementById('newsbutton');
+  newsbutton!.addEventListener('click', function () {
+    if (!newsbutton?.classList.contains('draggable') && !newsbutton?.classList.contains('active')) {
+      SendNewsPage();
+    }
+  });
+}
+
+async function createSettingsButton() {
+  let SettingsButton = stringToHTML(
+    '<button class="addedButton tooltip" id="AddedSettings"><svg width="24" height="24" viewBox="0 0 24 24"><g><g><path d="M23.182,6.923c-.29,0-3.662,2.122-4.142,2.4l-2.8-1.555V4.511l4.257-2.456a.518.518,0,0,0,.233-.408.479.479,0,0,0-.233-.407,6.511,6.511,0,1,0-3.327,12.107,6.582,6.582,0,0,0,6.148-4.374,5.228,5.228,0,0,0,.333-1.542A.461.461,0,0,0,23.182,6.923Z"></path><path d="M9.73,10.418,7.376,12.883c-.01.01-.021.016-.03.025L1.158,19.1a2.682,2.682,0,1,0,3.793,3.793l4.583-4.582,0,0,4.1-4.005-.037-.037A9.094,9.094,0,0,1,9.73,10.418ZM3.053,21.888A.894.894,0,1,1,3.946,21,.893.893,0,0,1,3.053,21.888Z"></path></g></g></svg><div class="tooltiptext topmenutooltip">BetterSEQTA+ Settings</div></button>'
+  );
+  let ContentDiv = document.getElementById('content');
+  ContentDiv!.append(SettingsButton.firstChild!);
+}
+
+function GetLightDarkModeString(darkMode: boolean) {  
+  if (darkMode) {
+    return 'Switch to light theme'
+  } else {
+    return 'Switch to dark theme'
+  }
+}
+
+async function addDarkLightToggle() {
+  const tooltipString = GetLightDarkModeString(settingsState.DarkMode);
+  const svgContent = settingsState.DarkMode ? 
+    '<defs><clipPath id="__lottie_element_80"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_80)"><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>' : 
+    '<defs><clipPath id="__lottie_element_263"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_263)"><g style="display: block;" transform="matrix(1.5,0,0,1.5,7,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(-1,0,0,-1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>';
+  
+  const LightDarkModeButton = stringToHTML(`
+    <button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton">
+      <svg xmlns="http://www.w3.org/2000/svg">${svgContent}</svg>
+      <div class="tooltiptext topmenutooltip" id="darklighttooliptext">${tooltipString}</div>
+    </button>
+  `);
+  
+  let ContentDiv = document.getElementById('content');
+  ContentDiv!.append(LightDarkModeButton.firstChild!);
+  
+  updateAllColors();
+  
+  document.getElementById('LightDarkModeButton')!.addEventListener('click', async () => {
+    settingsState.DarkMode = !settingsState.DarkMode;
+    
+    updateAllColors();
+    
+    const darklightText = document.getElementById('darklighttooliptext');
+    darklightText!.innerText = GetLightDarkModeString(!settingsState.DarkMode);
+  });
+}
+
+function customizeMenuToggle() {
+  const menuToggle = document.getElementById('menuToggle');
+  if (menuToggle) {
+    menuToggle.innerHTML = '';
+  }
+
+  const line = document.createElement('div');
+  line.className = 'hamburger-line';
+
+  for (let i = 0; i < 3; i++) {
+    menuToggle!.appendChild(line);
+  }
+}

src/seqta/ui/colors/Manager.ts

@@ -15,11 +15,11 @@ const getChromeURL = (path: any) => browser.runtime.getURL(path);
 const applyProperties = (props: any) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
 
-export function updateAllColors(storedSetting: any, newColor = null) {
+export function updateAllColors() {
   // Determine the color to use
-  const selectedColor = newColor || (storedSetting.selectedColor !== '' ? storedSetting.selectedColor : '#007bff');
+  const selectedColor = settingsState.selectedColor !== '' ? settingsState.selectedColor : '#007bff';
 
-  if (storedSetting.transparencyEffects) {
+  if (settingsState.transparencyEffects) {
     document.documentElement.classList.add('transparencyEffects');
   }
 

src/seqta/utils/listeners/StorageChanges.ts

@@ -19,9 +19,8 @@ export class StorageChangeHandler {
   }
 
   private registerHandlers() {
-    console.log(settingsState.onoff);
+    settingsState.register('selectedColor', updateAllColors.bind(this));
-    settingsState.register('selectedColor', this.handleSelectedColorChange.bind(this));
+    settingsState.register('DarkMode', updateAllColors.bind(this));
-    settingsState.register('DarkMode', this.handleDarkModeChange.bind(this));
     settingsState.register('onoff', this.handleOnOffChange.bind(this));
     settingsState.register('shortcuts', this.handleShortcutsChange.bind(this));
     settingsState.register('customshortcuts', this.handleCustomShortcutsChange.bind(this));
@@ -31,18 +30,6 @@ export class StorageChangeHandler {
     settingsState.register('transparencyEffects', this.handleTransparencyEffectsChange.bind(this));
   }
 
-  private handleDarkModeChange() {
-    updateAllColors(settingsState.selectedColor);
-  }
-
-  private handleSelectedColorChange(newColor: any) {
-    try {
-      updateAllColors(newColor);
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
   private handleOnOffChange() {
     browser.runtime.sendMessage({ type: 'reloadTabs' });
   }