format: run prettify

2026-06-06 11:44:40 +00:00 · 2025-05-05 18:04:10 +10:00
parent 771169348f
commit 0f9f618164
142 changed files with 28768 additions and 20790 deletions
@@ -3,7 +3,6 @@ import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
 import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
 import { setupSettingsButton } from "@/seqta/utils/setupSettingsButton";

-
 import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import { appendBackgroundToUI } from "./ImageBackgrounds";
 import stringToHTML from "@/seqta/utils/stringToHTML";
@@ -15,15 +14,15 @@ let cachedUserInfo: any = null;

 async function getUserInfo() {
  if (cachedUserInfo) return cachedUserInfo;
-  
+
  try {
    const response = await fetch(`${location.origin}/seqta/student/login`, {
-      method: 'POST',
+      method: "POST",
      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
+        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify({
-        mode: 'normal',
+        mode: "normal",
        query: null,
        redirect_url: location.origin,
      }),
@@ -33,36 +32,36 @@ async function getUserInfo() {
    cachedUserInfo = responseData.payload;
    return cachedUserInfo;
  } catch (error) {
-    console.error('Error fetching user info:', error);
+    console.error("Error fetching user info:", error);
    throw error;
  }
 }

 export async function AddBetterSEQTAElements() {
-  if (settingsState.onoff) {    
+  if (settingsState.onoff) {
    if (settingsState.DarkMode) {
-      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add("dark");
    }
-    
+
    const fragment = document.createDocumentFragment();
-    const menu = document.getElementById('menu')!;
+    const menu = document.getElementById("menu")!;
    const menuList = menu.firstChild as HTMLElement;
-    
+
    createHomeButton(fragment, menuList);
    createNewsButton(fragment, menu);
-    
+
    menuList.insertBefore(fragment, menuList.firstChild);
-    
+
    try {
      await Promise.all([
        appendBackgroundToUI(),
        handleUserInfo(),
-        handleStudentData()
+        handleStudentData(),
      ]);
    } catch (error) {
-      console.error('Error initializing UI elements:', error);
+      console.error("Error initializing UI elements:", error);
    }
-    
+
    setupEventListeners();
    await addDarkLightToggle();
    customizeMenuToggle();
@@ -74,12 +73,14 @@ export async function AddBetterSEQTAElements() {
 }

 function createHomeButton(fragment: DocumentFragment, menuList: HTMLElement) {
-  const container = document.getElementById('content')!;
-  const div = document.createElement('div');
-  div.classList.add('titlebar');
+  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 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>',
+  );
  if (NewButton.firstChild) {
    fragment.appendChild(NewButton.firstChild);
  }
@@ -90,7 +91,7 @@ async function handleUserInfo() {
    const info = await getUserInfo();
    updateUserInfo(info);
  } catch (error) {
-    console.error('Error fetching and processing student data:', error);
+    console.error("Error fetching and processing student data:", error);
  }
 }

@@ -112,17 +113,17 @@ function updateUserInfo(info: {
  userDesc: string | null;
  userName: string | null;
 }) {
-  const titlebar = document.getElementsByClassName('titlebar')[0];
-  
-  const userInfo = stringToHTML(/* html */`
+  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 */`
+
+  const userinfo = stringToHTML(/* html */ `
    <div class="userInfo">
      <div class="userInfoText">
        <div style="display: flex; align-items: center;">
@@ -134,27 +135,30 @@ function updateUserInfo(info: {
    </div>
  `).firstChild;
  titlebar.append(userinfo!);
-  
-  var logoutbutton = document.getElementsByClassName('logout')[0];
-  var userInfosvgdiv = document.getElementById('logouttooltip')!;
+
+  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',
+    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" }),
      },
-      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);
+    console.error("Error fetching and processing student data:", error);
  }
 }

@@ -162,20 +166,21 @@ async function updateStudentInfo(students: any) {
  const info = await getUserInfo();
  var index = students.findIndex(function (person: any) {
    return (
-      person.firstname == info.userDesc.split(' ')[0] &&
-      person.surname == info.userDesc.split(' ')[1]
+      person.firstname == info.userDesc.split(" ")[0] &&
+      person.surname == info.userDesc.split(" ")[1]
    );
  });
-  
-  let houseelement1 = document.getElementsByClassName('userInfohouse')[0];
+
+  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.style.color =
+          colorresult && colorresult > 300 ? "black" : "white";
        houseelement.innerText = students[index].year + students[index].house;
      } catch (error) {
        houseelement.innerText = students[index].house;
@@ -184,120 +189,133 @@ async function updateStudentInfo(students: any) {
  } else {
    try {
      houseelement.innerText = students[index].year;
-    } catch(err) {
-      houseelement.innerText = 'N/A';
+    } catch (err) {
+      houseelement.innerText = "N/A";
    }
  }
 }

 function createNewsButton(fragment: DocumentFragment, menu: HTMLElement) {
-  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 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);
-  
+
  if (NewsButton.firstChild) {
    fragment.appendChild(NewsButton.firstChild);
  }
-  
-  let iconCover = document.createElement('div');
-  iconCover.classList.add('icon-cover');
-  iconCover.id = 'icon-cover';
+
+  let iconCover = document.createElement("div");
+  iconCover.classList.add("icon-cover");
+  iconCover.id = "icon-cover";
  menu.appendChild(iconCover);
 }

 function setupEventListeners() {
-  const menuCover = document.querySelector('#icon-cover');
-  const homebutton = document.getElementById('homebutton');
-  const newsbutton = document.getElementById('newsbutton');
-  
-  homebutton?.addEventListener('click', function() {
-    if (!homebutton.classList.contains('draggable') && !homebutton.classList.contains('active')) {
+  const menuCover = document.querySelector("#icon-cover");
+  const homebutton = document.getElementById("homebutton");
+  const newsbutton = document.getElementById("newsbutton");
+
+  homebutton?.addEventListener("click", function () {
+    if (
+      !homebutton.classList.contains("draggable") &&
+      !homebutton.classList.contains("active")
+    ) {
      loadHomePage();
    }
  });

-  newsbutton?.addEventListener('click', function() {
-    if (!newsbutton.classList.contains('draggable') && !newsbutton.classList.contains('active')) {
+  newsbutton?.addEventListener("click", function () {
+    if (
+      !newsbutton.classList.contains("draggable") &&
+      !newsbutton.classList.contains("active")
+    ) {
      SendNewsPage();
    }
  });

-  menuCover?.addEventListener('click', function() {
-    location.href = '../#?page=/home';
+  menuCover?.addEventListener("click", function () {
+    location.href = "../#?page=/home";
    loadHomePage();
-    (document.getElementById('menu')!.firstChild! as HTMLElement).classList.remove('noscroll');
+    (
+      document.getElementById("menu")!.firstChild! as HTMLElement
+    ).classList.remove("noscroll");
  });
 }

 async function createSettingsButton() {
-  let SettingsButton = stringToHTML( /* html */`
+  let SettingsButton = stringToHTML(/* html */ `
    <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>
-      ${settingsState.onoff ? '<div class="tooltiptext topmenutooltip">BetterSEQTA+ Settings</div>' : ''}
+      ${settingsState.onoff ? '<div class="tooltiptext topmenutooltip">BetterSEQTA+ Settings</div>' : ""}
    </button>
  `);
-  let ContentDiv = document.getElementById('content');
+  let ContentDiv = document.getElementById("content");
  ContentDiv!.append(SettingsButton.firstChild!);
 }

-function GetLightDarkModeString() {  
+function GetLightDarkModeString() {
  if (settingsState.DarkMode) {
-    return 'Switch to light theme'
+    return "Switch to light theme";
  } else {
-    return 'Switch to dark theme'
+    return "Switch to dark theme";
  }
 }

 async function addDarkLightToggle() {
  const tooltipString = GetLightDarkModeString();
-  const svgContent = settingsState.DarkMode ? 
-    /* html */`<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>` : 
-    /* html */`<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(/* html */`
+  const svgContent = settingsState.DarkMode
+    ? /* html */ `<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>`
+    : /* html */ `<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(/* html */ `
    <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');
+
+  let ContentDiv = document.getElementById("content");
  ContentDiv!.append(LightDarkModeButton.firstChild!);
-  
+
  updateAllColors();
-  
-  document.getElementById('LightDarkModeButton')!.addEventListener('click', async () => {
-    const darklightText = document.getElementById('darklighttooliptext');

-    if (settingsState.originalDarkMode != undefined && settingsState.selectedTheme) {
-      darklightText!.innerText = 'Locked by current theme';
+  document
+    .getElementById("LightDarkModeButton")!
+    .addEventListener("click", async () => {
+      const darklightText = document.getElementById("darklighttooliptext");

-      await delay(1000)
+      if (
+        settingsState.originalDarkMode != undefined &&
+        settingsState.selectedTheme
+      ) {
+        darklightText!.innerText = "Locked by current theme";
+
+        await delay(1000);
+
+        darklightText!.innerText = GetLightDarkModeString();
+
+        return;
+      }
+
+      settingsState.DarkMode = !settingsState.DarkMode;
+
+      updateAllColors();

      darklightText!.innerText = GetLightDarkModeString();
-
-      return
-    }
-    
-    settingsState.DarkMode = !settingsState.DarkMode;
-    
-    updateAllColors();
-    
-    darklightText!.innerText = GetLightDarkModeString();
-  });
+    });
 }

 function customizeMenuToggle() {
-  const menuToggle = document.getElementById('menuToggle');
+  const menuToggle = document.getElementById("menuToggle");
  if (menuToggle) {
-    menuToggle.innerHTML = '';
+    menuToggle.innerHTML = "";
  }

-  
  for (let i = 0; i < 3; i++) {
-    const line = document.createElement('div');
-    line.className = 'hamburger-line';
+    const line = document.createElement("div");
+    line.className = "hamburger-line";
    menuToggle!.appendChild(line);
  }
-}
+}
@@ -1,15 +1,18 @@
-import { getDataById, isIndexedDBSupported } from '@/interface/hooks/BackgroundDataLoader';
+import {
+  getDataById,
+  isIndexedDBSupported,
+} from "@/interface/hooks/BackgroundDataLoader";

 export async function appendBackgroundToUI() {
-  const parent = document.getElementById('container');
+  const parent = document.getElementById("container");
  if (!parent) return;

-  const backgroundContainer = document.createElement('div');
-  backgroundContainer.classList.add('imageBackground');
-  backgroundContainer.setAttribute('excludeDarkCheck', 'true');
+  const backgroundContainer = document.createElement("div");
+  backgroundContainer.classList.add("imageBackground");
+  backgroundContainer.setAttribute("excludeDarkCheck", "true");

-  const mediaContainer = document.createElement('div');
-  mediaContainer.id = 'media-container';
+  const mediaContainer = document.createElement("div");
+  mediaContainer.id = "media-container";
  backgroundContainer.appendChild(mediaContainer);

  parent.appendChild(backgroundContainer);
@@ -24,9 +27,9 @@ export async function loadBackground() {
  }

  try {
-    const selectedBackgroundId = localStorage.getItem('selectedBackground');
+    const selectedBackgroundId = localStorage.getItem("selectedBackground");
    if (!selectedBackgroundId) {
-      const backgroundContainer = document.querySelector('.imageBackground');
+      const backgroundContainer = document.querySelector(".imageBackground");
      if (backgroundContainer) {
        backgroundContainer.remove();
      }
@@ -36,35 +39,36 @@ export async function loadBackground() {
    const background = await getDataById(selectedBackgroundId);
    if (!background) return;

-    let backgroundContainer = document.querySelector('.imageBackground');
+    let backgroundContainer = document.querySelector(".imageBackground");
    if (!backgroundContainer) {
-      backgroundContainer = document.createElement('div');
-      backgroundContainer.classList.add('imageBackground');
-      backgroundContainer.setAttribute('excludeDarkCheck', 'true');
-      const parent = document.getElementById('container');
+      backgroundContainer = document.createElement("div");
+      backgroundContainer.classList.add("imageBackground");
+      backgroundContainer.setAttribute("excludeDarkCheck", "true");
+      const parent = document.getElementById("container");
      if (parent) {
        parent.appendChild(backgroundContainer);
      }
    }

-    let mediaContainer = document.getElementById('media-container');
+    let mediaContainer = document.getElementById("media-container");
    if (!mediaContainer) {
-      mediaContainer = document.createElement('div');
-      mediaContainer.id = 'media-container';
+      mediaContainer = document.createElement("div");
+      mediaContainer.id = "media-container";
      backgroundContainer.appendChild(mediaContainer);
    }

-    mediaContainer = document.getElementById('media-container');
+    mediaContainer = document.getElementById("media-container");
    if (!mediaContainer) return;

-    mediaContainer.innerHTML = '';
+    mediaContainer.innerHTML = "";

-    const mediaElement = background.type === 'video' 
-      ? document.createElement('video')
-      : document.createElement('img');
+    const mediaElement =
+      background.type === "video"
+        ? document.createElement("video")
+        : document.createElement("img");

    mediaElement.src = URL.createObjectURL(background.blob);
-    mediaElement.classList.add('background');
+    mediaElement.classList.add("background");

    if (mediaElement instanceof HTMLVideoElement) {
      mediaElement.loop = true;
@@ -74,6 +78,6 @@ export async function loadBackground() {

    mediaContainer.appendChild(mediaElement);
  } catch (error) {
-    console.error('Error loading background:', error);
+    console.error("Error loading background:", error);
  }
-}
+}
@@ -6,21 +6,24 @@ import { debounce } from "lodash";
 export class SettingsResizer {
  constructor() {
    this.adjustPopupHeight();
-    window.addEventListener('resize', debounce(this.adjustPopupHeight, 250) as EventListener);
-    document.addEventListener('DOMContentLoaded', this.adjustPopupHeight);
+    window.addEventListener(
+      "resize",
+      debounce(this.adjustPopupHeight, 250) as EventListener,
+    );
+    document.addEventListener("DOMContentLoaded", this.adjustPopupHeight);
  }

  private adjustPopupHeight() {
-    const iframePopup = document.getElementById('ExtensionPopup');
+    const iframePopup = document.getElementById("ExtensionPopup");
    if (!iframePopup) return;

    const viewportHeight = window.innerHeight;
    const idealHeight = viewportHeight - 80 - 15; // -80px for the top of the popup

    if (idealHeight > 600) {
-      iframePopup.style.height = '600px';
+      iframePopup.style.height = "600px";
    } else {
      iframePopup.style.height = `${idealHeight}px`;
    }
  }
-}
+}
@@ -1,45 +1,48 @@
-import Color from 'color';
+import Color from "color";

 function adjustLuminance(color: any, lum: any) {
  let adjustedColor = Color(color.toLowerCase());
  const rgbObj = adjustedColor.rgb().object();
-  
+
  // Adjust luminance
  adjustedColor = Color.rgb(
    Math.min(Math.max(0, rgbObj.r + rgbObj.r * lum), 255),
    Math.min(Math.max(0, rgbObj.g + rgbObj.g * lum), 255),
-    Math.min(Math.max(0, rgbObj.b + rgbObj.b * lum), 255)
+    Math.min(Math.max(0, rgbObj.b + rgbObj.b * lum), 255),
  );
-  
+
  return adjustedColor.string();
 }

 export default function ColorLuminance(color: any, lum = 0) {
-  if (color == '' || color == null) {
+  if (color == "" || color == null) {
    // light cyan blue
-    return '#00bfff';
+    return "#00bfff";
  }
-  const colorRegex = /rgba?\(([^)]+)\)/gi;  // Case-insensitive match for rgb() or rgba()
-  
-  if (color.toLowerCase().includes('gradient')) {
+  const colorRegex = /rgba?\(([^)]+)\)/gi; // Case-insensitive match for rgb() or rgba()
+
+  if (color.toLowerCase().includes("gradient")) {
    let gradient = color;
-    
+
    let uniqueColorSet = new Set();
-    
+
    // Extract all unique color stops
    let match;
    while ((match = colorRegex.exec(color)) !== null) {
      uniqueColorSet.add(match[0]);
    }
-    
+
    // Adjust luminance for each unique color stop
    for (let colorStop of uniqueColorSet) {
      const adjustedColor = adjustLuminance(colorStop, lum);
-      gradient = gradient.replace(new RegExp(colorStop as string, 'gi'), adjustedColor);
+      gradient = gradient.replace(
+        new RegExp(colorStop as string, "gi"),
+        adjustedColor,
+      );
    }
-    
+
    return gradient;
  } else {
    return adjustLuminance(color, lum);
  }
-}
+}
@@ -1,72 +1,81 @@
-import browser from 'webextension-polyfill'
-import { GetThresholdOfColor } from '@/seqta/ui/colors/getThresholdColour';
-import { lightenAndPaleColor } from './lightenAndPaleColor';
-import ColorLuminance from './ColorLuminance';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
+import browser from "webextension-polyfill";
+import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
+import { lightenAndPaleColor } from "./lightenAndPaleColor";
+import ColorLuminance from "./ColorLuminance";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";

-import darkLogo from '@/resources/icons/betterseqta-light-full.png';
-import lightLogo from '@/resources/icons/betterseqta-dark-full.png';
+import darkLogo from "@/resources/icons/betterseqta-light-full.png";
+import lightLogo from "@/resources/icons/betterseqta-dark-full.png";

 // Helper functions
-const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);
-const applyProperties = (props: any) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
-
+const setCSSVar = (varName: any, value: any) =>
+  document.documentElement.style.setProperty(varName, value);
+const applyProperties = (props: any) =>
+  Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));

 export function updateAllColors() {
  // Determine the color to use
-  const selectedColor = settingsState.selectedColor !== '' ? settingsState.selectedColor : '#007bff';
+  const selectedColor =
+    settingsState.selectedColor !== ""
+      ? settingsState.selectedColor
+      : "#007bff";

  if (settingsState.transparencyEffects) {
-    document.documentElement.classList.add('transparencyEffects');
+    document.documentElement.classList.add("transparencyEffects");
  }

  // Common properties, always applied
  const commonProps = {
-    '--better-sub': '#161616',
-    '--better-alert-highlight': '#c61851',
-    '--better-main': settingsState.selectedColor
+    "--better-sub": "#161616",
+    "--better-alert-highlight": "#c61851",
+    "--better-main": settingsState.selectedColor,
  };

  // Mode-based properties, applied if storedSetting is provided
  let modeProps = {};
-  modeProps = settingsState.DarkMode ? {
-    '--betterseqta-logo': `url(${browser.runtime.getURL(darkLogo)})`
-  } : {
-    '--better-pale': lightenAndPaleColor(selectedColor),
-    '--betterseqta-logo': `url(${browser.runtime.getURL(lightLogo)})`
-  };
+  modeProps = settingsState.DarkMode
+    ? {
+        "--betterseqta-logo": `url(${browser.runtime.getURL(darkLogo)})`,
+      }
+    : {
+        "--better-pale": lightenAndPaleColor(selectedColor),
+        "--betterseqta-logo": `url(${browser.runtime.getURL(lightLogo)})`,
+      };

  if (settingsState.DarkMode) {
-    document.documentElement.style.removeProperty('--better-pale');
-    document.documentElement.classList.add('dark');
+    document.documentElement.style.removeProperty("--better-pale");
+    document.documentElement.classList.add("dark");
  } else {
-    document.documentElement.classList.remove('dark');
+    document.documentElement.classList.remove("dark");
  }

  // Dynamic properties, always applied
  const rgbThreshold = GetThresholdOfColor(selectedColor);
  const isBright = rgbThreshold > 210;
  const dynamicProps = {
-    '--text-color': isBright ? 'black' : 'white',
-    '--better-light': selectedColor === '#ffffff' ? '#b7b7b7' : ColorLuminance(selectedColor, 0.95)
+    "--text-color": isBright ? "black" : "white",
+    "--better-light":
+      selectedColor === "#ffffff"
+        ? "#b7b7b7"
+        : ColorLuminance(selectedColor, 0.95),
  };

  // Apply all the properties
  applyProperties({ ...commonProps, ...modeProps, ...dynamicProps });

-  let alliframes = document.getElementsByTagName('iframe');
+  let alliframes = document.getElementsByTagName("iframe");

  for (let i = 0; i < alliframes.length; i++) {
    const element = alliframes[i];
-    
-    if (element.getAttribute('excludeDarkCheck') == 'true') {
+
+    if (element.getAttribute("excludeDarkCheck") == "true") {
      continue;
    }
-    
+
    if (settingsState.DarkMode) {
-      element.contentDocument?.documentElement.classList.add('dark');
+      element.contentDocument?.documentElement.classList.add("dark");
    } else {
-      element.contentDocument?.documentElement.classList.remove('dark');
+      element.contentDocument?.documentElement.classList.remove("dark");
    }
  }
-}
+}
@@ -1,38 +1,38 @@
-import Color from "color"
+import Color from "color";
 export function GetThresholdOfColor(color: any) {
-    if (!color) return 0
-    // Case-insensitive regular expression for matching RGBA colors
-    const rgbaRegex = /rgba?\(([^)]+)\)/gi
-  
-    // Check if the color string is a gradient (linear or radial)
-    if (color.includes("gradient")) {
-      let gradientThresholds = []
-  
-      // Find and replace all instances of RGBA in the gradient
-      let match
-      while ((match = rgbaRegex.exec(color)) !== null) {
-        // Extract the individual components (r, g, b, a)
-        const rgbaString = match[1]
-        const [r, g, b] = rgbaString.split(",").map((str) => str.trim())
-  
-        // Compute the threshold using your existing algorithm
-        const threshold = Math.sqrt(
-          parseInt(r) ** 2 + parseInt(g) ** 2 + parseInt(b) ** 2,
-        )
-  
-        // Store the computed threshold
-        gradientThresholds.push(threshold)
-      }
-  
-      // Calculate the average threshold
-      const averageThreshold =
-        gradientThresholds.reduce((acc, val) => acc + val, 0) /
-        gradientThresholds.length
-  
-      return averageThreshold
-    } else {
-      // Handle the color as a simple RGBA (or hex, or whatever the Color library supports)
-      const rgb = Color.rgb(color).object()
-      return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2)
+  if (!color) return 0;
+  // Case-insensitive regular expression for matching RGBA colors
+  const rgbaRegex = /rgba?\(([^)]+)\)/gi;
+
+  // Check if the color string is a gradient (linear or radial)
+  if (color.includes("gradient")) {
+    let gradientThresholds = [];
+
+    // Find and replace all instances of RGBA in the gradient
+    let match;
+    while ((match = rgbaRegex.exec(color)) !== null) {
+      // Extract the individual components (r, g, b, a)
+      const rgbaString = match[1];
+      const [r, g, b] = rgbaString.split(",").map((str) => str.trim());
+
+      // Compute the threshold using your existing algorithm
+      const threshold = Math.sqrt(
+        parseInt(r) ** 2 + parseInt(g) ** 2 + parseInt(b) ** 2,
+      );
+
+      // Store the computed threshold
+      gradientThresholds.push(threshold);
    }
-  }
+
+    // Calculate the average threshold
+    const averageThreshold =
+      gradientThresholds.reduce((acc, val) => acc + val, 0) /
+      gradientThresholds.length;
+
+    return averageThreshold;
+  } else {
+    // Handle the color as a simple RGBA (or hex, or whatever the Color library supports)
+    const rgb = Color.rgb(color).object();
+    return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2);
+  }
+}
@@ -1,9 +1,13 @@
-import Color from 'color';
+import Color from "color";

-export function lightenAndPaleColor(inputColor: any, lightenFactor = 0.75, paleFactor = 0.55) {
+export function lightenAndPaleColor(
+  inputColor: any,
+  lightenFactor = 0.75,
+  paleFactor = 0.55,
+) {
  if (!inputColor) return;

-  if (inputColor.includes('gradient')) {
+  if (inputColor.includes("gradient")) {
    const baseColor = findMatchingColor(inputColor);

    return lightenAndPaleColor(baseColor, lightenFactor, paleFactor);
@@ -29,27 +33,38 @@ export function lightenAndPaleColor(inputColor: any, lightenFactor = 0.75, paleF
 }
 // Utility function to average an array of Color objects
 function averageColors(colors: any) {
-  let avgR = 0, avgG = 0, avgB = 0;
+  let avgR = 0,
+    avgG = 0,
+    avgB = 0;
  colors.forEach((color: any) => {
    avgR += color.red();
    avgG += color.green();
    avgB += color.blue();
  });
-  return Color.rgb(avgR / colors.length, avgG / colors.length, avgB / colors.length);
+  return Color.rgb(
+    avgR / colors.length,
+    avgG / colors.length,
+    avgB / colors.length,
+  );
 }
 // Main function to find a matching color for a CSS gradient
 function findMatchingColor(cssGradient: any) {
  try {
    // Step 1: Parse the gradient to extract color stops (case-insensitive)
-    const regex = /#[0-9a-fA-F]{6}|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)/gi;
+    const regex =
+      /#[0-9a-fA-F]{6}|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)/gi;
    const colorStops = cssGradient.match(regex);

    if (!colorStops) {
-      throw new Error('No valid color stops found in the provided CSS gradient.');
+      throw new Error(
+        "No valid color stops found in the provided CSS gradient.",
+      );
    }

    // Normalize and trim the color stops
-    const normalizedColorStops = colorStops.map((color: any) => color.toLowerCase().replace(/\s+/g, ''));
+    const normalizedColorStops = colorStops.map((color: any) =>
+      color.toLowerCase().replace(/\s+/g, ""),
+    );

    // Convert the color stops to Color objects
    const colorObjects = normalizedColorStops.map((color: any) => Color(color));
@@ -57,11 +72,10 @@ function findMatchingColor(cssGradient: any) {
    // Step 2: Average the color stops
    const baseColor = averageColors(colorObjects);

-
    // Step 4: Return the matching color in HEX format
    return baseColor.hex();
  } catch (err: any) {
    console.error(`Error: ${err.message}`);
    return null;
  }
-}
+}
@@ -20,191 +20,356 @@ function generateMockUserCode(): string {
 function getRandomDate(): Date {
  const start = new Date();
  const end = new Date(start.getTime() + 60 * 24 * 60 * 60 * 1000); // 60 days from now
-  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+  return new Date(
+    start.getTime() + Math.random() * (end.getTime() - start.getTime()),
+  );
 }

 const contentConfig: ContentConfig = {
-  lessonTitle: { 
-    selector: '.day h2', 
-    action: (element) => { element.textContent = getRandomElement(mockData.subjects); }
+  lessonTitle: {
+    selector: ".day h2",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.subjects);
+    },
  },
-  teacher: { 
-    selector: '.day h3:first-of-type', 
-    action: (element) => { element.textContent = getRandomElement(mockData.teachers); }
+  teacher: {
+    selector: ".day h3:first-of-type",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.teachers);
+    },
  },
-  classroom: { 
-    selector: '.day h3:last-of-type', 
-    action: (element) => { element.textContent = getRandomElement(mockData.classrooms); }
+  classroom: {
+    selector: ".day h3:last-of-type",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.classrooms);
+    },
  },
-  userName: { 
-    selector: '.userInfoName, .name', 
-    action: (element) => { element.textContent = getRandomElement(mockData.names); }
+  userName: {
+    selector: ".userInfoName, .name",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.names);
+    },
  },
-  userCode: { 
-    selector: '.userInfoText > .userInfoCode', 
-    action: (element) => { element.textContent = generateMockUserCode(); }
+  userCode: {
+    selector: ".userInfoText > .userInfoCode",
+    action: (element) => {
+      element.textContent = generateMockUserCode();
+    },
  },
-  assessmentTitle: { 
-    selector: '.upcoming-assessment .upcoming-assessment-title', 
-    action: (element) => { element.textContent = getRandomElement(mockData.assessmentTitles); }
+  assessmentTitle: {
+    selector: ".upcoming-assessment .upcoming-assessment-title",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.assessmentTitles);
+    },
  },
-  assessmentSubject: { 
-    selector: '.upcoming-assessment .upcoming-details h5', 
-    action: (element) => { element.textContent = getRandomElement(mockData.subjects); }
+  assessmentSubject: {
+    selector: ".upcoming-assessment .upcoming-details h5",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.subjects);
+    },
  },
-  noticeTitle: { 
-    selector: '.notice h3', 
-    action: (element) => { element.textContent = getRandomElement(mockData.notices); }
+  noticeTitle: {
+    selector: ".notice h3",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.notices);
+    },
  },
-  noticeContent: { 
-    selector: '.notice .contents', 
-    action: (element) => { element.textContent = 'Content has been redacted for privacy.'; }
+  noticeContent: {
+    selector: ".notice .contents",
+    action: (element) => {
+      element.textContent = "Content has been redacted for privacy.";
+    },
  },
  upcomingCheckboxes: {
-    selector: '.upcoming-checkbox-container',
-    action: (element) => { element.firstChild!.textContent = 'SUBJ'; }
+    selector: ".upcoming-checkbox-container",
+    action: (element) => {
+      element.firstChild!.textContent = "SUBJ";
+    },
  },
-  dates: { 
-    selector: '.upcoming-date-title h5, input[type="date"]', 
+  dates: {
+    selector: '.upcoming-date-title h5, input[type="date"]',
    action: (element) => {
      const randomDate = getRandomDate();
      if (element instanceof HTMLInputElement) {
-        element.value = randomDate.toISOString().split('T')[0];
+        element.value = randomDate.toISOString().split("T")[0];
      } else {
-        element.textContent = randomDate.toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'long' });
+        element.textContent = randomDate.toLocaleDateString("en-US", {
+          weekday: "long",
+          day: "numeric",
+          month: "long",
+        });
      }
-    }
+    },
  },

  messageSubject: {
    selector: '[class*="MessageList__subject___"]',
-    action: (element) => { element.textContent = getRandomElement(mockData.messages.subjects); }
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.messages.subjects);
+    },
  },

  messageSender: {
    selector: '[class*="MessageList__value___"]',
-    action: (element) => { element.textContent = getRandomElement(mockData.messages.sender); }
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.messages.sender);
+    },
  },

  messageRecipients: {
-    selector: '[class*="MessageList__recipients___"] [class*="MessageList__value___"]',
-    action: (element) => { element.textContent = 'Recipient(s) Redacted'; }
+    selector:
+      '[class*="MessageList__recipients___"] [class*="MessageList__value___"]',
+    action: (element) => {
+      element.textContent = "Recipient(s) Redacted";
+    },
  },

  messageDate: {
    selector: '[class*="MessageList__date___"]',
-    action: (element) => { element.textContent = getRandomDate().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'long' }); }
+    action: (element) => {
+      element.textContent = getRandomDate().toLocaleDateString("en-US", {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+      });
+    },
  },
  avatarImage: {
    selector: '[class*="Avatar__Avatar___"]',
-    action: (element) => { 
+    action: (element) => {
      if (element instanceof HTMLElement) {
-        element.style.removeProperty('background-image');
-        element.firstChild!.firstChild!.textContent = getRandomElement(mockData.names)[0];
+        element.style.removeProperty("background-image");
+        element.firstChild!.firstChild!.textContent = getRandomElement(
+          mockData.names,
+        )[0];
      }
-    }
+    },
  },
  notificationCount: {
    selector: '[class*="notifications__bubble___"]',
-    action: (element) => { element.textContent = Math.floor(Math.random() * 100).toString(); }
+    action: (element) => {
+      element.textContent = Math.floor(Math.random() * 100).toString();
+    },
  },
  schoolName: {
-    selector: 'title',
-    action: (element) => { element.textContent = 'School Portal'; }
+    selector: "title",
+    action: (element) => {
+      element.textContent = "School Portal";
+    },
  },
  documentNames: {
-    selector: '.document td.title',
-    action: (element) => { element.textContent = 'Document Name Redacted'; }
+    selector: ".document td.title",
+    action: (element) => {
+      element.textContent = "Document Name Redacted";
+    },
  },
  forumTopics: {
-    selector: '#menu .sub ul li label',
-    action: (element) => { element.textContent = 'Forum Topic Redacted'; }
+    selector: "#menu .sub ul li label",
+    action: (element) => {
+      element.textContent = "Forum Topic Redacted";
+    },
  },
  courseNames: {
-    selector: '#menu .sub ul li[data-colour] label',
-    action: (element) => { element.textContent = 'Course Name Redacted'; }
+    selector: "#menu .sub ul li[data-colour] label",
+    action: (element) => {
+      element.textContent = "Course Name Redacted";
+    },
  },
  yearGroups: {
-    selector: '#menu .sub > ul > li > label',
-    action: (element) => { element.textContent = 'Year Group Redacted'; }
+    selector: "#menu .sub > ul > li > label",
+    action: (element) => {
+      element.textContent = "Year Group Redacted";
+    },
  },
  newsArticleTitle: {
-    selector: '.ArticleText a',
-    action: (element) => { element.textContent = 'News Article Title Redacted'; }
+    selector: ".ArticleText a",
+    action: (element) => {
+      element.textContent = "News Article Title Redacted";
+    },
  },
  newsArticleContent: {
-    selector: '.ArticleText p',
-    action: (element) => { element.textContent = 'News Article Content Redacted'; }
+    selector: ".ArticleText p",
+    action: (element) => {
+      element.textContent = "News Article Content Redacted";
+    },
  },
  userHouse: {
-    selector: '.userInfohouse',
-    action: (element) => { element.textContent = 'House'; }
-  }
+    selector: ".userInfohouse",
+    action: (element) => {
+      element.textContent = "House";
+    },
+  },
 };

 const mockData = {
  subjects: [
-    "Mathematics", "English", "Science", "History", "Geography", 
-    "Art", "Music", "Physical Education", "Chemistry", "Physics", 
-    "Biology", "Economics", "Business Studies", "French", "Spanish", 
-    "Computer Science", "Literature", "Environmental Studies", 
-    "Political Science", "Sociology"
+    "Mathematics",
+    "English",
+    "Science",
+    "History",
+    "Geography",
+    "Art",
+    "Music",
+    "Physical Education",
+    "Chemistry",
+    "Physics",
+    "Biology",
+    "Economics",
+    "Business Studies",
+    "French",
+    "Spanish",
+    "Computer Science",
+    "Literature",
+    "Environmental Studies",
+    "Political Science",
+    "Sociology",
  ],
  teachers: [
-    "Mr. Smith", "Mrs. Johnson", "Ms. Williams", "Dr. Brown", 
-    "Mr. Davis", "Mrs. Miller", "Mr. Wilson", "Ms. Moore", 
-    "Dr. Taylor", "Mrs. Anderson", "Mr. Garcia", "Mrs. Martinez", 
-    "Ms. Thompson", "Dr. Lee", "Mr. Robinson", "Mrs. Hall", 
-    "Ms. White", "Dr. Clark", "Mr. Lewis", "Mrs. King"
+    "Mr. Smith",
+    "Mrs. Johnson",
+    "Ms. Williams",
+    "Dr. Brown",
+    "Mr. Davis",
+    "Mrs. Miller",
+    "Mr. Wilson",
+    "Ms. Moore",
+    "Dr. Taylor",
+    "Mrs. Anderson",
+    "Mr. Garcia",
+    "Mrs. Martinez",
+    "Ms. Thompson",
+    "Dr. Lee",
+    "Mr. Robinson",
+    "Mrs. Hall",
+    "Ms. White",
+    "Dr. Clark",
+    "Mr. Lewis",
+    "Mrs. King",
  ],
  classrooms: [
-    "A101", "B205", "C304", "D102", "E201", 
-    "F103", "G204", "H301", "I202", "J105", 
-    "K107", "L206", "M303", "N104", "O209"
+    "A101",
+    "B205",
+    "C304",
+    "D102",
+    "E201",
+    "F103",
+    "G204",
+    "H301",
+    "I202",
+    "J105",
+    "K107",
+    "L206",
+    "M303",
+    "N104",
+    "O209",
  ],
  names: [
-    "John Doe", "Jane Smith", "Michael Johnson", "Emily Brown", 
-    "David Lee", "Sarah Davis", "Robert Wilson", "Lisa Taylor", 
-    "William Moore", "Jennifer Anderson", "Thomas Garcia", 
-    "Olivia Martinez", "Daniel Thompson", "Sophia Lee", 
-    "Matthew Robinson", "Ava Hall", "Jacob White", 
-    "Mia Clark", "James Lewis", "Lily King"
+    "John Doe",
+    "Jane Smith",
+    "Michael Johnson",
+    "Emily Brown",
+    "David Lee",
+    "Sarah Davis",
+    "Robert Wilson",
+    "Lisa Taylor",
+    "William Moore",
+    "Jennifer Anderson",
+    "Thomas Garcia",
+    "Olivia Martinez",
+    "Daniel Thompson",
+    "Sophia Lee",
+    "Matthew Robinson",
+    "Ava Hall",
+    "Jacob White",
+    "Mia Clark",
+    "James Lewis",
+    "Lily King",
  ],
  assessmentTitles: [
-    "Mid-term Exam", "Final Project", "Research Paper", 
-    "Oral Presentation", "Lab Report", "Essay", 
-    "Group Assignment", "Portfolio Review", "Quiz", 
-    "Practical Test", "Class Presentation", 
-    "Online Assessment", "Case Study", "Field Report", 
-    "Peer Review", "Coding Challenge", "Math Test", 
-    "Literary Analysis", "Debate", "Design Project"
+    "Mid-term Exam",
+    "Final Project",
+    "Research Paper",
+    "Oral Presentation",
+    "Lab Report",
+    "Essay",
+    "Group Assignment",
+    "Portfolio Review",
+    "Quiz",
+    "Practical Test",
+    "Class Presentation",
+    "Online Assessment",
+    "Case Study",
+    "Field Report",
+    "Peer Review",
+    "Coding Challenge",
+    "Math Test",
+    "Literary Analysis",
+    "Debate",
+    "Design Project",
  ],
  notices: [
-    "School Assembly", "Excursion Reminder", "Fundraising Event", 
-    "Parent-Teacher Meetings", "Sports Day", "Book Fair", 
-    "Career Day", "Music Concert", "Art Exhibition", 
-    "Science Fair", "Holiday Celebration", "Community Service Day", 
-    "Graduation Ceremony", "Award Ceremony", "Workshop", 
-    "Open House", "Seminar", "Club Meeting", 
-    "Field Trip", "Cultural Festival"
+    "School Assembly",
+    "Excursion Reminder",
+    "Fundraising Event",
+    "Parent-Teacher Meetings",
+    "Sports Day",
+    "Book Fair",
+    "Career Day",
+    "Music Concert",
+    "Art Exhibition",
+    "Science Fair",
+    "Holiday Celebration",
+    "Community Service Day",
+    "Graduation Ceremony",
+    "Award Ceremony",
+    "Workshop",
+    "Open House",
+    "Seminar",
+    "Club Meeting",
+    "Field Trip",
+    "Cultural Festival",
  ],
  messages: {
    subjects: [
-      "Mid-year Exams", "Science project due soon", "Mufti Day coming up!",
-      "School Assembly", "Excursion Reminder", "Fundraising Event",
-      "Parent-Teacher Meetings", "Sports Day", "Book Fair",
-      "Career Day", "Music Concert", "Art Exhibition",
-      "Science Fair", "Holiday Celebration", "Community Service Day",
-      "Graduation Ceremony", "Award Ceremony", "Workshop",
-      "Open House", "Seminar", "Club Meeting",
-      "Field Trip", "Cultural Festival"
+      "Mid-year Exams",
+      "Science project due soon",
+      "Mufti Day coming up!",
+      "School Assembly",
+      "Excursion Reminder",
+      "Fundraising Event",
+      "Parent-Teacher Meetings",
+      "Sports Day",
+      "Book Fair",
+      "Career Day",
+      "Music Concert",
+      "Art Exhibition",
+      "Science Fair",
+      "Holiday Celebration",
+      "Community Service Day",
+      "Graduation Ceremony",
+      "Award Ceremony",
+      "Workshop",
+      "Open House",
+      "Seminar",
+      "Club Meeting",
+      "Field Trip",
+      "Cultural Festival",
    ],
    sender: [
-      "Mr. Smith", "Mrs. Johnson", "Ms. Williams", "Dr. Brown", 
-      "Mr. Davis", "Mrs. Miller", "Mr. Wilson", "Ms. Moore", 
-      "Dr. Taylor", "Mrs. Anderson", "Mr. Garcia", "Mrs. Martinez", 
-    ]
-  }
+      "Mr. Smith",
+      "Mrs. Johnson",
+      "Ms. Williams",
+      "Dr. Brown",
+      "Mr. Davis",
+      "Mrs. Miller",
+      "Mr. Wilson",
+      "Ms. Moore",
+      "Dr. Taylor",
+      "Mrs. Anderson",
+      "Mr. Garcia",
+      "Mrs. Martinez",
+    ],
+  },
 };

 export default function hideSensitiveContent() {
@@ -214,4 +379,4 @@ export default function hideSensitiveContent() {
      action(element);
    });
  });
-}
+}
@@ -1,35 +1,35 @@
-import renderSvelte from '@/interface/main';
-import Store from '@/interface/pages/store.svelte'
+import renderSvelte from "@/interface/main";
+import Store from "@/interface/pages/store.svelte";

-import { unmount } from 'svelte'
+import { unmount } from "svelte";

-let remove: () => void
+let remove: () => void;

 export function OpenStorePage() {
-  remove = renderStore()
+  remove = renderStore();
 }

 export function renderStore() {
-  const container = document.querySelector('#container');
+  const container = document.querySelector("#container");
  if (!container) {
-    throw new Error('Container not found');
+    throw new Error("Container not found");
  }
-  
-  const child = document.createElement('div');
-  child.id = 'store';
+
+  const child = document.createElement("div");
+  child.id = "store";
  container!.appendChild(child);

-  const shadow = child.attachShadow({ mode: 'open' });
+  const shadow = child.attachShadow({ mode: "open" });
  const app = renderSvelte(Store, shadow);

-  return () => unmount(app)
+  return () => unmount(app);
 }

 export function closeStore() {
-  document.getElementById('store')!.classList.add('hide')
+  document.getElementById("store")!.classList.add("hide");

-    setTimeout(() => {
-      remove()
-      document.getElementById('store')!.remove()
-    }, 500)
+  setTimeout(() => {
+    remove();
+    document.getElementById("store")!.remove();
+  }, 500);
 }