Merge pull request #61 from SethBurkart123/firefox-mv2-crazypersonalph

Firefox MV2 crazypersonalph

.eslintrc.json

@@ -10,9 +10,5 @@
     "ecmaVersion": "latest",
     "sourceType": "module" // add this line to allow 'import' and 'export' statements
   },
-  "rules": {
+  "rules": {}
-    "indent": ["error", 2],
-    "quotes": ["error", "single"],
-    "semi": ["error", "always"]
-  }
 }

README.md

@@ -2,7 +2,7 @@
 ![Logo](https://raw.githubusercontent.com/SethBurkart123/EvenBetterSEQTA/master/public/icons/betterseqta-dark-full.png#gh-light-mode-only)
 
 <p align="center">
-  A beautiful 🤩 Chrome Extension that adds additional features and gives an overall better experience for [SEQTA Learn.](https://seqta.com.au/) **Currently looking for contributors** 🔥
+  A beautiful 🤩 Chrome Extension that adds additional features and gives an overall better experience for <a href="https://seqta.com.au">SEQTA Learn.</a> <strong>Currently looking for contributors</strong> 🔥
 </p>
 
 <p align="center">
@@ -37,7 +37,7 @@
   - Opera Supported
   - Vivaldi Supported
   - Firefox (currently not supported, plans for it in future though [manifest v3 problems])
-  - Safari (Experimental)
+  - Safari (Experimental - only available via compilation)
 
 ## Getting started
 
@@ -52,19 +52,26 @@ git clone https://github.com/SethBurkart123/EvenBetterSEQTA
 ```
 npm install
 ```
-OR
+
+3. Install webpack
+
 ```
-bun install
+npm install -g webpack
 ```
 
-3. Run the dev script (it updates as you save files)
+4. Run the dev script (it updates as you save files)
 
 ```
 npm run dev
 ```
-OR
+
+5. Install and run the dev script for the interface **at the same time** (all custom react components are a separate sub-repository)
+
 ```
-bun run dev
+cd interface
+
+npm install
+npm run dev
 ```
 
 ## Folder Structure
@@ -79,10 +86,6 @@ The folder structure is as follows:
 
 - The `safari` folder is an Xcode project, building it for MacOS does work, IOS needs a few modifications to the manifest to work, but I have managed to get it working (but because of the styling not being designed for phone, its basically useless for now).
 
-## Contributing
-
-If you would like to contribute to this project, please read the [contributing guidelines](CONTRIBUTING.md).
-
 ## Credits
 
-This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [OG-RandomTechChannel](https://github.com/OG-RandomTechChannel) and is currently under active development by [SethBurkart](https://github.com/SethBurkart123)
+This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development by [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph)

interface/package.json

@@ -13,8 +13,10 @@
     "@types/chrome": "^0.0.246",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
-    "react-best-gradient-color-picker": "^2.2.24",
+    "react-best-gradient-color-picker": "2.2.24",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "latest",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

interface/src/SettingsContext.tsx

@@ -1,4 +1,3 @@
-// SettingsContext.tsx
 import React, { createContext, useContext, useState, ReactNode } from 'react';
 import { SettingsState } from './types/AppProps';
 import useSettingsState from './hooks/settingsState';

interface/src/SettingsPage.tsx

@@ -1,26 +1,16 @@
-import React, { useEffect } from 'react';
 import TabbedContainer from './components/TabbedContainer';
 import Settings from './pages/Settings';
 import logo from './assets/betterseqta-dark-full.png';
 import logoDark from './assets/betterseqta-light-full.png';
 import Shortcuts from './pages/Shortcuts';
-import { useSettingsContext } from './SettingsContext';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
-//import About from './pages/About';
-//import About from './pages/About';
 
-const App: React.FC = () => {
+interface SettingsPage {
-  const { standalone, setStandalone } = useSettingsContext();
+  standalone: boolean;
-
+}
-  useEffect(() => {
-    // if body has class standalone
-    if (document.body.classList.contains('standalone')) {
-      // set settingsContext standalone to true
-      setStandalone(true);
-    }
-  })
 
+const SettingsPage = ({ standalone }: SettingsPage) => {
   const tabs = [
     {
       title: 'Settings',
@@ -48,4 +38,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default SettingsPage;

interface/src/components/BackgroundSelector.tsx

@@ -136,7 +136,7 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
           </div>
         ))}
         {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (
-          <div key={bg.id}
+          <button key={bg.id}
             onClick={() => handlePresetClick(bg)}
             className={`relative w-16 h-16 transition cursor-pointer rounded-xl duration-300 ${ isEditMode ? 'opacity-0 pointer-events-none hidden' : 'opacity-100'}`}>
             {bg.isPreset && downloadProgress[bg.id] !== undefined && (
@@ -156,7 +156,7 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
               className="absolute top-0 object-cover w-full h-full rounded-xl" 
               src={bg.isPreset ? bg.previewUrl : bg.url}  // Use preview for preset backgrounds
               alt="swatch" />
-          </div>
+          </button>
         ))}
       </div>
 

interface/src/components/ThemeSelector.tsx

@@ -22,14 +22,18 @@ const ThemeSelector = ({ selectedType, setSelectedType, isEditMode }: ThemeSelec
 
   useEffect(() => {
     const initializeThemes = async () => {
-      const downloaded = (await listThemes()).themes;
+      const downloaded = (await listThemes());
 
       const initializedThemes = themesList.map(theme => ({
         ...theme,
-        isDownloaded: downloaded.includes(theme.name),
+        isDownloaded: downloaded.themes.includes(theme.name),
         isLoading: false
       }));
 
+      if (downloaded.selectedTheme !== '') {
+        setEnabledThemeName(downloaded.selectedTheme);
+      }
+
       initializedThemes.sort((a, b) => Number(b.isDownloaded) - Number(a.isDownloaded));
 
       setThemes(initializedThemes);

interface/src/main.tsx

@@ -1,11 +1,9 @@
-import React from 'react'
+import React from 'react';
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
-import App from './App.js'
+import { HashRouter, Routes, Route } from 'react-router-dom';
-import './index.css'
+import './index.css';
 import { SettingsContextProvider } from './SettingsContext.js';
-
+import SettingsPage from './SettingsPage.js';
-const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
-
 const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
 
 const style = document.createElement("style");
@@ -19,10 +17,17 @@ style.innerHTML = `
 }`;
 document.head.appendChild(style);
 
+const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
+
 root.render(
   <React.StrictMode>
     <SettingsContextProvider>
-      <App />
+      <HashRouter>
+        <Routes>
+          <Route path="/settings" element={<SettingsPage standalone={true} />} />
+          <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
+        </Routes>
+      </HashRouter>
     </SettingsContextProvider>
   </React.StrictMode>,
 );

interface/src/pages/Settings.tsx

@@ -51,7 +51,7 @@ const Settings: React.FC = () => {
     {
       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>
+      modifyElement: <button onClick={() => chrome.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' })} className='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>Edit</button>
     },
     {
       title: "Transparency Effects",

interface/src/pages/Shortcuts.tsx

@@ -4,6 +4,18 @@ import { useSettingsContext } from "../SettingsContext";
 import { motion, AnimatePresence } from "framer-motion";
 import { CustomShortcut } from "../types/AppProps";
 
+function formatUrl (inputUrl: string) {
+  // Regular expression to check if the URL starts with http://, https://, or ftp://
+  const protocolRegex = /^(http:\/\/|https:\/\/|ftp:\/\/)/;
+
+  // Check if the URL starts with one of the protocols
+  if (protocolRegex.test(inputUrl)) {
+      return inputUrl;  // The URL is fine as is
+  } else {
+      return `https://${inputUrl}`;  // Prepend https:// to the URL
+  }
+}
+
 export default function Shortcuts() {
   const { settingsState, setSettingsState } = useSettingsContext();
 
@@ -30,7 +42,7 @@ export default function Shortcuts() {
 
   const addNewCustomShortcut = (): void => {
     if (isValidTitle(newTitle) && isValidURL(newURL)) {
-      const newShortcut: CustomShortcut = { name: newTitle.trim(), url: newURL.trim(), icon: newTitle[0] };
+      const newShortcut: CustomShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
       const updatedCustomShortcuts = [...settingsState.customshortcuts, newShortcut];
       setSettingsState({ ...settingsState, customshortcuts: updatedCustomShortcuts });
       setNewTitle("");

package.json

@@ -2,7 +2,7 @@
   "name": "betterseqtaplus",
   "version": "1.0.0",
   "type": "module",
-  "description": "![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-light-full.png#gh-dark-mode-only) ![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-dark-full.png#gh-light-mode-only)",
+  "description": "BetterSEQTA+ is a browser extension that adds features to SEQTA.",
   "main": "webpack.config.js",
   "scripts": {
     "build": "webpack --config webpack.config.js --mode production && sh ./package.sh",
@@ -11,7 +11,7 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
@@ -40,6 +40,7 @@
     "npm": "^10.1.0",
     "postcss": "^8.4.29",
     "react": "^18.2.0",
+    "sortablejs": "^1.15.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2"
   }

public/manifest.json

@@ -1,49 +1,49 @@
 {
   "manifest_version": 2,
   "name": "BetterSEQTA+",
-  "version": "3.2.0",
+  "version": "3.2.2",
-  "description": "A dark-themed Firefox/Chrome Extension that adds additional features and gives an overall better experience for SEQTA Learn.",
+  "description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
   "icons": {
       "48": "icons/icon-48.png"
   },
   "browser_action": {
-      "browser_style": true,
+    "browser_style": true,
-      "default_popup": "popup/info.html",
+    "default_popup": "interface/index.html#settings",
-      "default_icon": {
+    "default_icon": {
-          "32": "icons/icon-32.png",
+      "32": "icons/icon-32.png",
-          "64": "icons/icon-64.png"
+      "48": "icons/icon-48.png",
-      }
+      "64": "icons/icon-64.png"
+    }
   },
-  "permissions": [
+  "permissions": ["tabs", "notifications", "storage", "https://newsapi.org/"],
-      "tabs",
-      "notifications",
-      "storage",
-      "https://newsapi.org/"
-  ],
   "background": {
-      "scripts": [
+    "scripts": [
-          "background.js"
+        "browser-polyfill.js",
-      ]
+        "background.js"
-  },
+    ]
+},
   "optional_permissions": [
-      "*://*/*",
+    "*://*/*",
-      "declarativeContent"
+    "declarativeContent"
   ],
   "content_scripts": [
-      {
+    {
-          "matches": [
+      "matches": ["*://*/*"],
-              "https://*.edu.au/*"
+      "js": ["browser-polyfill.js", "purify.min.js", "SEQTA.js"],
-          ],
+      "run_at": "document_start"
-          "js": [
+    }
-              "SEQTA.js"
-          ],
-          "run_at": "document_start"
-      }
   ],
   "web_accessible_resources": [
-      "icons/*",
+    "icons/*",
-      "images/*",
+    "fonts/*",
-      "inject/*",
+    "images/*",
-      "popup/*"
+    "css/*",
+    "popup/*",
+    "client.js",
+    "index.css",
+    "interface/*",
+    "client/*",
+    "resources/*",
+    "backgrounds/*"
   ]
 }

public/popup/info.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/client/public/client.js"></script>
-    <link rel="stylesheet" href="/client/rsc/css/index.css">
-  </head>
-  <body class="standalone">
-    <div id="ExtensionPopup"></div>
-    
-  </body>
-</html>

src/background.js

@@ -1,5 +1,6 @@
-import browser from 'webextension-polyfill';
 
+import browser from 'webextension-polyfill'
+import { onError } from './seqta/utils/onError.js';
 export const openDB = () => {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open('MyDatabase', 1);
@@ -57,13 +58,15 @@ export const readData = () => {
 };
 
 function reloadSeqtaPages() {
-  browser.tabs.query({}, function (tabs) {
+  const result = browser.tabs.query({})
+    function open (tabs) {
     for (let tab of tabs) {
       if (tab.title.includes('SEQTA Learn')) {
         browser.tabs.reload(tab.id);
       }
     }
-  });
+  }
+  result.then(open, onError)
 }
 
 // Helper function to handle setting permissions
@@ -98,8 +101,8 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     break;
   
   case 'currentTab':
-    browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+    browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
-      browser.tabs.sendMessage(tabs[0].id, request, function (response) {
+      browser.tabs.sendMessage(tabs[0].id, request).then(function (response) {
         sendResponse(response);
       });
     });
@@ -224,7 +227,8 @@ function SetStorageValue(object) {
 }
 
 function UpdateCurrentValues() {
-  browser.storage.local.get(null, function (items) {
+  const result = browser.storage.local.get()
+  function open (items) {
     var CurrentValues = items;
 
     const NewValue = Object.assign({}, DefaultValues, CurrentValues);
@@ -254,11 +258,13 @@ function UpdateCurrentValues() {
     }
 
     SetStorageValue(NewValue);
-  });
+  }
+  result.then(open, onError)
 }
 
 function migrateOldStorage() {
-  browser.storage.local.get(null, function (items) {
+  const result = browser.storage.local.get()
+  function open (items) {
     let shouldUpdate = false; // Flag to check if there is anything to update
     
     // Check for the old "Name" field and convert it to "name"
@@ -284,11 +290,11 @@ function migrateOldStorage() {
 
     // If there"s something to update, set the new values in storage
     if (shouldUpdate) {
-      browser.storage.local.set({ shortcuts: items.shortcuts }, function() {
+      const setting = browser.storage.local.set({ shortcuts: items.shortcuts })
-        console.log('Migration completed.');
+      setting.then(() => console.log('Migration Completed.'))
-      });
     }
-  });
+  }
+  result.then(open, onError)
 }
 
 browser.runtime.onInstalled.addListener(function (event) {

src/css/iframe.scss

@@ -65,4 +65,35 @@ table th {
 .preamble {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
+}
+
+html, p, div, span {
+  color: white !important;
+  background-color: #232323;
+}
+body {
+  background-color: #232323;
+}
+blockquote.forward > .preamble {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+blockquote.forward > .preamble > .date > .value,
+blockquote.forward > .preamble > .sender > .value {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+blockquote.forward > .preamble > .date > .label,
+blockquote.forward > .preamble > .sender > .label {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+#backgroundTable > * {
+  background-color: #161616;
+  border: none;
+}
+
+.userHTML>div>a:not(.resource) {
+	color: #06b4fc;
+	text-decoration: underline;
+	transition: text-shadow 0.5s;
 }

src/css/injected.scss

@@ -11,7 +11,8 @@
   --navy: #1a1a1a !important;
   --auto-background: var(--better-pale, var(--background-secondary)) !important;
 }
-body, html {
+body,
+html {
   font-family: Rubik, sans-serif !important;
 }
 #container {
@@ -22,7 +23,9 @@ body, html {
   font-family: Rubik, sans-serif !important;
   --theme-fg-parts: white;
 
-  transition: background-color 200ms ease-in-out, backdrop-filter 200ms ease-in-out;
+  transition:
+    background-color 200ms ease-in-out,
+    backdrop-filter 200ms ease-in-out;
 }
 @media (min-width: 900px) {
   #title > span {
@@ -62,7 +65,52 @@ body, html {
   justify-content: center;
   width: 35px !important;
 }
+[style="background-color: rgb(255, 255, 255);"] {
+  color: black;
+}
+.pillbox {
+  border-radius: 1rem;
+  overflow: clip;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary) !important;
+
+  button {
+    background: var(--background-primary) !important;
+    height: auto;
+    padding: 4px 16px !important;
+    overflow: clip !important;
+
+    &.depressed {
+      height: auto !important;
+      color: var(--text-primary) !important;
+      background: var(--background-secondary) !important;
+    }
+  }
+}
+
+.PillBox__PillBox___3GjAk {
+  border-radius: 1rem;
+  overflow: hidden;
+  border: var(--background-secondary) 1px solid;
+
+  .PillBox__active___3Qpi9 {
+    background: var(--background-secondary) !important;
+  }
+}
+
+.legacy-root button:active, .legacy-root a:active {
+  background-image: unset !important;
+}
+
+.ace_editor {
+  border-radius: 1rem;
+  border-top: none !important;
+}
+
 #main > .dashboard {
+  grid-template-columns: repeat(autofit, minmax(200px, 400px)) !important;
   background: unset;
 
   // TODO: Make this only opacity 0 when the animation will be played to stop a flash of the original
@@ -75,8 +123,26 @@ body, html {
     background: var(--background-primary);
     border-radius: 1rem;
     //opacity: 0;
+
+    &[data-ident="timetable"] {
+      grid-row: span 2 / auto !important;
+    }
+
+    .header {
+      min-height: unset !important;
+
+      .title {
+        padding: 1rem 1rem !important;
+      }
+    }
   }
 }
+.dashlet-summary-homework > .summary > .subject > .item {
+  color: var(--text-primary) !important;
+}
+.dashlet-summary-homework > .summary > .subject > .item {
+  color: var(--text-primary) !important;
+}
 .dashlet-notes > ul {
   background: var(--background-primary);
 }
@@ -96,7 +162,9 @@ ul.magicDelete > li.deleting {
   margin: 6px;
   fill: var(--theme-primary);
 }
-#menu, .sub, .nav {
+#menu,
+.sub,
+.nav {
   background: transparent !important;
   color: var(--text-color) !important;
 }
@@ -107,8 +175,10 @@ ul.magicDelete > li.deleting {
   width: 0px !important;
   background: none;
 }
-#menu li, #menu section {
+#menu li,
-  margin-right: 8px !important;
+#menu section {
+  margin: 8px auto !important;
+  width: 85% !important;
   border-bottom: none;
   box-shadow: none;
   border-radius: 12px;
@@ -139,7 +209,8 @@ ul.magicDelete > li.deleting {
   border-right: none;
   font-family: Rubik, sans-serif !important;
 }
-#menu li > label > svg, #menu section > label > svg {
+#menu li > label > svg,
+#menu section > label > svg {
   margin: 0 10px 0 4px;
   width: 28px !important;
   height: 28px !important;
@@ -151,8 +222,18 @@ ul.magicDelete > li.deleting {
   margin-bottom: 8px !important;
   width: 85% !important;
 }
-li.item.draggable {
+.item.draggable {
   width: 100% !important;
+  cursor: grab;
+
+  > .sub {
+    display: none !important;
+  }
+
+  &:before {
+    top: 1.1rem;
+    left: -0.5rem;
+  }
 }
 #menu li.active > .sub > ul > .item {
   box-shadow: inset 3px 0 var(--item-colour, transparent);
@@ -168,7 +249,8 @@ li.item.draggable {
   transition: 100ms;
   background: rgba(0, 0, 0, 0.3) !important;
 }
-#menu li > label, #menu section > label {
+#menu li > label,
+#menu section > label {
   text-transform: none;
   font-size: 16px;
 }
@@ -182,10 +264,12 @@ html {
 .menuShown .content .anyoneSelect .listWrapper .list:has(.item) {
   width: 100% !important;
 }
-.listWrapper:not(:has(.list *)) + .functions, .listWrapper:not(:has(.list *)) {
+.listWrapper:not(:has(.list *)) + .functions,
+.listWrapper:not(:has(.list *)) {
   opacity: 0 !important;
 }
-.listWrapper + .functions, .listWrapper {
+.listWrapper + .functions,
+.listWrapper {
   transition: opacity 500ms;
 }
 [data-type="student"] .header {
@@ -245,10 +329,12 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   padding-left: 12px !important;
   box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
 }
-[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --betterseqta-logo: url(chrome-extension://boikofabjaholheekefimfojfncpjfib/icons/betterseqta-light-full.png); --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child {
+[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --betterseqta-logo: url(chrome-extension://boikofabjaholheekefimfojfncpjfib/icons/betterseqta-light-full.png); --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
+{
   top: 14% !important;
 }
-[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --betterseqta-logo: url(chrome-extension://boikofabjaholheekefimfojfncpjfib/icons/betterseqta-light-full.png); --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child {
+[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --betterseqta-logo: url(chrome-extension://boikofabjaholheekefimfojfncpjfib/icons/betterseqta-light-full.png); --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
+{
   top: 18% !important;
 }
 .singleSelect > li {
@@ -298,7 +384,8 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   bottom: -1.75rem !important;
   clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
 }
-#main .timetablepage .actions a, #main .timetablepage .actions button {
+#main .timetablepage .actions a,
+#main .timetablepage .actions button {
   background-color: transparent;
   border: none;
 }
@@ -358,12 +445,37 @@ td.colourBar {
 #container #content .uiButton {
   border-radius: 16px;
 }
-#toolbar button.toggled, #toolbar button.depressed {
+#toolbar button.toggled,
+#toolbar button.depressed {
   background: var(--better-main);
 }
-.buttonChecklist {
+ul.buttonChecklist {
-  border-radius: 16px;
+  border-radius: 1rem;
   margin-top: 4px;
+  padding-left: 0 !important;
+  box-shadow: 0 0 10px -5px black;
+
+  > li {
+    border-radius: 0.5rem;
+    border-bottom: unset !important;
+
+    > button {
+      border-radius: 0.5rem;
+      border: unset !important;
+    }
+  }
+
+  button {
+    border-radius: 0.5rem !important;
+  }
+
+  &:has(.item.checked) button:nth-child(2) {
+    background: var(--background-secondary) !important;
+  }
+
+  &:has(.item.unchecked) button:nth-child(1) {
+    background: var(--background-secondary) !important;
+  }
 }
 #toolbar > span:has(input) {
   flex: 1 1 0%;
@@ -412,7 +524,8 @@ ol > [data-label] {
 [data-type="student"] [style="z-index: 30;"] .header:has(h1) {
   color: black !important;
 }
-.uiFile.rows>.name, .uiResource.rows>.name {
+.uiFile.rows > .name,
+.uiResource.rows > .name {
   padding: 2px;
 }
 div > ol:has(.uiFileHandlerWrapper) {
@@ -485,7 +598,13 @@ div > ol:has(.uiFileHandlerWrapper) {
     transform: translatex(270px);
   }
 }
-.welcome > .portalPageView > .powerPortalPage > .Body__body___3pGxr > .Container__container___33GlY > .Document__document___1KJCG > .Canvas__canvas___OBdCZ {
+.welcome
+  > .portalPageView
+  > .powerPortalPage
+  > .Body__body___3pGxr
+  > .Container__container___33GlY
+  > .Document__document___1KJCG
+  > .Canvas__canvas___OBdCZ {
   background-color: unset !important;
   background-image: unset !important;
   background-size: unset;
@@ -506,16 +625,38 @@ div > ol:has(.uiFileHandlerWrapper) {
   background: transparent !important;
   overflow: hidden;
 }
-.composer > .Body__body___3pGxr > .Container__container___33GlY > .Document__document___1KJCG > .Canvas__canvas___OBdCZ {
+.composer
+  > .Body__body___3pGxr
+  > .Container__container___33GlY
+  > .Document__document___1KJCG
+  > .Canvas__canvas___OBdCZ {
   background-color: transparent !important;
   background-image: unset !important;
   color: white !important;
 }
-#main > .notices > .notice > .label, #main > .notices > .notice > .staff, #main > .notices > .notice > h2 {
+.notices-container {
+  input {
+    border: none;
+
+    &:hover {
+      border: none;
+    }
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+      -webkit-appearance: none;
+    }
+  }
+}
+#main > .notices > .notice > .label,
+#main > .notices > .notice > .staff,
+#main > .notices > .notice > h2 {
   color: var(--text-primary);
   color: var(--colour);
 }
-#main > .course > .content > .homework > .content, #main > .course > .content > .resources > .content {
+#main > .course > .content > .homework > .content,
+#main > .course > .content > .resources > .content {
   color: var(--text-primary);
   opacity: 0.8;
 }
@@ -810,7 +951,8 @@ div > ol:has(.uiFileHandlerWrapper) {
 .ais-btnSearch i {
   padding-left: 8px;
 }
-.ais-input-container select, .ais-input-container input {
+.ais-input-container select,
+.ais-input-container input {
   border-radius: 1rem;
 }
 .notice h3 {
@@ -939,7 +1081,8 @@ div > ol:has(.uiFileHandlerWrapper) {
 .notifications__notifications___3mmLY > button {
   padding: 8px;
 }
-.legacy-root button > svg, .legacy-root a > svg {
+.legacy-root button > svg,
+.legacy-root a > svg {
   height: 25px;
   width: 24px;
 }
@@ -948,9 +1091,13 @@ div > ol:has(.uiFileHandlerWrapper) {
   width: 25px;
   height: 25px;
 }
-.legacy-root button::after {
+.dark .legacy-root button::after {
   background: white;
 }
+
+.legacy-root button::after {
+  background: var(--better-main);
+}
 .legacy-root button:not([disabled]):focus {
   border-color: var(--better-sub);
 }
@@ -962,9 +1109,16 @@ div > ol:has(.uiFileHandlerWrapper) {
   background: var(--background-primary) !important;
   border-left: 4px solid var(--better-main) !important;
   margin-bottom: 4px !important;
-}
+
-.notifications__item___2ErJN:hover {
+  > .notifications__dismiss___zveKV {
-  background: var(--auto-background) !important;
+    background: rgba(0, 0, 0, 0.1) !important;
+    color: var(--text-primary);
+    margin: auto 0;
+  }
+
+  &:hover {
+    background: var(--auto-background) !important;
+  }
 }
 .connectedNotificationsWrapper > div > button + div {
   color: var(--text-primary);
@@ -976,6 +1130,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 #ExtensionPopup {
   border-radius: 1rem;
   box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
+  transform-origin: 70% 0;
 }
 #menu li.active {
   color: #ffffff !important;
@@ -986,6 +1141,11 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 .notifications__actions___1UX7r {
   background: var(--auto-background);
+
+  button {
+    background: none !important;
+    border: 1px solid white;
+  }
 }
 .notifications__items___2hCdv {
   border-bottom: none;
@@ -993,11 +1153,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   display: flex;
   flex-direction: column;
 }
-.notifications__item___2ErJN > .notifications__dismiss___zveKV {
-  background: rgba(0, 0, 0, 0.1) !important;
-  color: var(--text-primary);
-  margin: auto 0;
-}
 .notifications__details___193F4 {
   max-width: 80%;
   overflow: clip;
@@ -1015,9 +1170,11 @@ div > ol:has(.uiFileHandlerWrapper) {
 .Viewer__sidebar___1Btu4 {
   color: var(--text-primary);
   border-right: unset;
-}
-.Viewer__sidebar___1Btu4 > header {
   background: unset;
+
+  > header {
+    background: unset;
+  }
 }
 .MessageList__MessageList___3DxoC ::-webkit-scrollbar {
   width: 0px;
@@ -1031,7 +1188,8 @@ div > ol:has(.uiFileHandlerWrapper) {
 .MessageList__MessageList___3DxoC {
   background: var(--background-primary);
 }
-.Input__Input___3RSTI::before, .ais-btnSearch::before {
+.Input__Input___3RSTI::before,
+.ais-btnSearch::before {
   content: "";
   /* Unicode for the search icon */
   transform: translateY(-50%);
@@ -1043,7 +1201,9 @@ div > ol:has(.uiFileHandlerWrapper) {
   pointer-events: none;
 }
 .Input__Input___3RSTI {
-  transition: background-color 0.5s, border-color 0.5s;
+  transition:
+    background-color 0.5s,
+    border-color 0.5s;
   background: var(--auto-background);
   position: relative;
   padding: 0.5rem 0.75rem;
@@ -1138,23 +1298,31 @@ iframe.userHTML {
 .navigator {
   border-top-right-radius: 1rem;
 }
-.programmeNavigator > .navigator, .programmeNavigator > .navigator > li > ul {
+.programmeNavigator > .navigator,
+.programmeNavigator > .navigator > li > ul {
   background: var(--background-primary);
   color: var(--text-primary);
 }
 .programmeNavigator > .navigator > .week > .lessons > .lesson:hover {
   background: var(--auto-background);
 }
-.programmeNavigator > .navigator > .week > .lessons > .lesson.selected, .programmeNavigator > .navigator > .cover.selected {
+.programmeNavigator > .navigator > .week > .lessons > .lesson.selected,
+.programmeNavigator > .navigator > .cover.selected {
   background: transparent;
   color: var(--text-primary) !important;
 }
+.dark #main > .course > .content > h1 {
+  text-shadow: 0 0 10px black;
+}
+
 #main > .course > .content > h1 {
   color: var(--text-primary);
   border-bottom: none;
-  text-shadow: 0 0 10px black;
 }
-#main > .course > .content > .outline > h2, #main > .course > .content > .homework > h2, #main > .course > .content > .resources > h2 {
+
+#main > .course > .content > .outline > h2,
+#main > .course > .content > .homework > h2,
+#main > .course > .content > .resources > h2 {
   color: var(--text-primary);
 }
 ::-webkit-scrollbar {
@@ -1169,7 +1337,12 @@ iframe.userHTML {
 ::-webkit-scrollbar-corner {
   background: none;
 }
-:root, html, body, div, ol, ul {
+:root,
+html,
+body,
+div,
+ol,
+ul {
   scrollbar-width: thin !important;
   scrollbar-color: var(--better-light) var(--better-sub) !important;
 }
@@ -1188,7 +1361,9 @@ iframe.userHTML {
 .SelectedAssessment__SelectedAssessment___3Bu5D {
   color: var(--text-primary);
 }
-.SelectedAssessment__SelectedAssessment___3Bu5D > .SelectedAssessment__meta___1gq_y > .SelectedAssessment__clearBtn___21D85 {
+.SelectedAssessment__SelectedAssessment___3Bu5D
+  > .SelectedAssessment__meta___1gq_y
+  > .SelectedAssessment__clearBtn___21D85 {
   background: var(--better-main);
 }
 .SelectedAssessment__SelectedAssessment___3Bu5D > .SelectedAssessment__meta___1gq_y {
@@ -1219,7 +1394,9 @@ iframe.userHTML {
   margin: 0 !important;
   border-radius: 1rem;
 }
-.mediaWrapper, .mediaRecorder, .MediaRecorder__MediaRecorder___2c2_M {
+.mediaWrapper,
+.mediaRecorder,
+.MediaRecorder__MediaRecorder___2c2_M {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
   overflow: hidden;
@@ -1260,16 +1437,27 @@ iframe.userHTML {
 .title {
   color: var(--text-primary) !important;
 }
-.dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="light"], .dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="light"] .title {
+.dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="light"],
+.dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="light"] .title {
   color: #fff !important;
 }
-.dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="dark"], .dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="dark"] .title {
+.dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="dark"],
+.dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry[data-yiq="dark"] .title {
   color: #000 !important;
 }
 div.entry.class {
-  width: 100% !important;
   border-radius: 0.25rem;
 }
+
+div.entry.class {
+  width: 100% !important;
+}
+div.entry.class[style*="left: 46.5%"] {
+  left: 50% !important;
+}
+div.entry.class[style*="width: 46.5%"] {
+  width: 50% !important;
+}
 .timetablepage .dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper {
   min-width: 0;
   width: auto !important;
@@ -1286,9 +1474,6 @@ div.entry.class {
 .uiButton:hover {
   box-shadow: none !important;
 }
-.uiButton:not([disabled]):hover {
-  transform: scale(1.01) !important;
-}
 .uiFileHandlerPanel {
   background: var(--background-primary);
   color: var(--text-primary);
@@ -1297,7 +1482,8 @@ div.entry.class {
 .sources .uiButton {
   border-radius: 1rem;
 }
-.MediaRecorder__preview___1hQqY, .MediaRecorder__actions___3Jjvp {
+.MediaRecorder__preview___1hQqY,
+.MediaRecorder__actions___3Jjvp {
   background: var(--background-primary);
 }
 .Rubric__Rubric___2AAKS > .Rubric__line___JCC3Y {
@@ -1309,7 +1495,8 @@ div.entry.class {
   height: 0px;
   width: 0px;
 }
-.coverImage, blurred {
+.coverImage,
+blurred {
   display: none;
 }
 .icon-cover {
@@ -1374,17 +1561,23 @@ div.bar.flat {
   color: var(--text-primary);
   background: var(--auto-background);
   transform: translateY(100%);
-  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out, opacity 0.2s ease-out;
+  transition:
+    transform 0.5s ease-out,
+    -webkit-transform 0.5s ease-out,
+    opacity 0.2s ease-out;
   transition-delay: 0 !important;
   border-radius: 1rem !important;
   opacity: 0;
 }
-.document-width-micro .RootModule__root-module___2wT52, .document-width-nano .RootModule__root-module___2wT52 {
+.document-width-micro .RootModule__root-module___2wT52,
+.document-width-nano .RootModule__root-module___2wT52 {
   padding: 1rem;
   box-sizing: border-box;
 }
 .anyoneSelect.filterBox {
   background: transparent;
+  margin: 0;
+  padding: 0;
 }
 .cke_toolbox {
   background: unset !important;
@@ -1396,25 +1589,37 @@ div.bar.flat {
 #cke_1_top a:hover {
   background: #5a5a5a;
 }
-.legacy-root button.depressed, .legacy-root button.toggled {
+.legacy-root button.depressed,
+.legacy-root button.toggled {
   background: #797979;
 }
-.legacy-root button, .legacy-root a {
+.legacy-root button,
+.legacy-root a {
   background: var(--background-primary);
 }
-.cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button, .cke_toolbox > .cke_toolbar .cke_button_on {
+.cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
+.cke_toolbox > .cke_toolbar .cke_button_on {
   background-color: #797979 !important;
 }
 .legacy-root input.singleSelect:focus {
   background: var(--auto-background);
   color: var(--text-primary) !important;
 }
-ul.singleSelect, ul.buttonChecklist, ul.buttonMenu, ul.colourButtonOptions, ul.uiSplitButtonList, .contactFormPanel {
+ul.singleSelect,
+ul.buttonChecklist,
+ul.buttonMenu,
+ul.colourButtonOptions,
+ul.uiSplitButtonList,
+.contactFormPanel {
   background: var(--background-primary) !important;
   border: solid 4px var(--background-primary);
   color: var(--text-primary);
 }
-.legacy-root input, .legacy-root textarea, .legacy-root select, .legacy-root option, .legacy-root .input {
+.legacy-root input,
+.legacy-root textarea,
+.legacy-root select,
+.legacy-root option,
+.legacy-root .input {
   background: transparent;
   color: var(--text-primary);
 }
@@ -1434,7 +1639,11 @@ body {
   background-repeat: no-repeat;
   background-size: contain;
 }
-.forumView > .messages > .thread, .forumView > .messages > .deletedPlaceholder, .forumView > .addMessage, .forumView .greeting, .forumView .assessment {
+.forumView > .messages > .thread,
+.forumView > .messages > .deletedPlaceholder,
+.forumView > .addMessage,
+.forumView .greeting,
+.forumView .assessment {
   background: var(--better-main);
 }
 .dailycal > .content > .wrapper > .days > tbody > tr > td > .entriesWrapper > .entry {
@@ -1501,7 +1710,9 @@ body {
 .defaultWelcomeWrapper {
   background: unset !important;
 }
-.clr-swatches button::after, .clr-dark .clr-preview::after, .clr-field button::after {
+.clr-swatches button::after,
+.clr-dark .clr-preview::after,
+.clr-field button::after {
   opacity: unset;
   padding-top: unset;
   -webkit-transform: unset;
@@ -1522,7 +1733,8 @@ body {
 .clr-clear {
   display: none !important;
 }
-.clr-preview::before, .clr-preview::after {
+.clr-preview::before,
+.clr-preview::after {
   visibility: unset;
   -webkit-transform-origin: unset;
   transform-origin: unset;
@@ -1613,10 +1825,11 @@ body {
   --menuHidden: none;
 }
 .editmenuoption {
-  padding: 8px;
+  background: var(--background-primary);
-  background: var(--better-light);
+  color: var(--text-primary);
   border-radius: 5px;
   margin: 0 10px;
+  padding: 8px;
   cursor: pointer;
 }
 .editmenuoption-container {
@@ -1658,10 +1871,12 @@ body {
   animation: spin 3s linear infinite;
   -moz-animation: spin 3s linear infinite;
 }
+.dark .LabelList__name___-CHgq {
+  text-shadow: 0 0 5px black;
+}
 .LabelList__name___-CHgq {
   display: flex;
   align-items: center;
-  text-shadow: 0 0 5px black;
 }
 [data-label="inbox"] > .LabelList__name___-CHgq::before {
   content: "\eb70";
@@ -1763,11 +1978,10 @@ body {
   opacity: 1;
   visibility: visible;
 }
-.draggable::before {
+
-  top: 1.1rem;
+.sortable-ghost {
-  left: -0.5rem;
+  opacity: 0;
 }
-/* Style the main element as the middle line of the hamburger */
 #menuToggle {
   width: 36px;
   position: fixed;
@@ -1788,9 +2002,7 @@ body {
   background-color: var(--text-primary);
   margin: 3px 0;
   transition: all 0.3s ease;
-  /* Step 3: Add transition */
 }
-/* Step 4: Parent Class Check */
 .menuShown #menuToggle .hamburger-line:nth-child(1) {
   transform: translateY(6px) rotate(45deg);
 }
@@ -1808,17 +2020,15 @@ body {
   font-size: 30px;
   display: flex;
   align-items: center;
-}
+
-.day-empty img {
+  img {
-  margin: 20px;
+    margin: 20px;
-  height: 50%;
+    height: 50%;
-}
+  }
-.day-empty p {
+
-  margin: 0;
+  p {
-}
+    margin: 0;
-.notifications__actions___1UX7r > button {
+  }
-  background: none !important;
-  border: 1px solid white;
 }
 .upcoming-submittedtext {
   align-self: center;
@@ -2318,6 +2528,16 @@ body {
   right: -70px !important;
   top: -2px !important;
 }
+.userInfosvgdiv::before {
+  content: "";
+  width: 70%;
+  height: 70%;
+  background: var(--theme-primary);
+  position: absolute;
+  border-radius: 1000rem;
+  top: 15%;
+  left: 15%;
+}
 .userInfosvg::after {
   width: 35px;
   height: 35px;
@@ -2386,6 +2606,9 @@ body {
   transform-origin: top;
   transition: transform 0.2s;
 }
+body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltiptext {
+  transform: scale(0);
+}
 .assessmenttooltip svg {
   fill: var(--text-primary);
 }

src/css/injected/transparency.scss

@@ -22,6 +22,7 @@ html.transparencyEffects {
   }
 
   /* Blurs */
+  .draggable,
   .BasicPanel__BasicPanel___1GP6s,
   .message.addMessage,
   .singleSelect,

src/seqta/ui/ImageBackgrounds.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 export async function appendBackgroundToUI() {
   console.log('Starting appendBackgroundToUI...');
@@ -10,6 +10,6 @@ export async function appendBackgroundToUI() {
   background.id = 'background';
   background.classList.add('imageBackground');
   background.setAttribute('excludeDarkCheck', 'true');
-  background.src = chrome.runtime.getURL('backgrounds/background.html');
+  background.src = browser.runtime.getURL('backgrounds/background.html');
   parent.appendChild(background);
 }

src/seqta/ui/Loading.js

@@ -1,4 +1,4 @@
-/*global chrome*/
+import browser from 'webextension-polyfill'
 import stringToHTML from '../utils/stringToHTML.js';
 
 const loadingSpinner = `
@@ -27,6 +27,7 @@ export default function loading() {
         position: absolute;
         top: 50%;
         left: 50%;
+        will-change: transform;
       }
       .logo {
         transform: translate(-50%, -50%);
@@ -74,7 +75,7 @@ export default function loading() {
       </style>
     ${loadingSpinner}
   <div style="position: absolute;bottom: 0;right: 0;padding: 10px;color: #4f4f4f;text-anchor: middle;font-size: 20px;">v${
-  chrome.runtime.getManifest().version
+  browser.runtime.getManifest().version
 }</div></div>`,
   );
   var html = document.getElementsByTagName('html')[0];

src/seqta/ui/Themes.js

@@ -1,5 +1,5 @@
+import browser from 'webextension-polyfill'
 import localforage from 'localforage';
-import { updateAllColors } from '../ui/colors/Manager.js';
 
 let currentThemeClass = '';
 
@@ -77,8 +77,7 @@ const applyTheme = async (themeName) => {
     );
   }
 
-  // Update colors based on theme settings
+  browser.storage.local.set({ DarkMode: darkMode, selectedColor: defaultColour });
-  updateAllColors(darkMode, defaultColour);
 };
 
 export const listThemes = async () => {

src/seqta/ui/colors/Manager.js

@@ -1,11 +1,12 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
-import { GetThresholdOfColor, GetiFrameCSSElement } from '../../../SEQTA.js';
+import { GetThresholdOfColor, GetCSSElement } from '../../../SEQTA.js';
 import { lightenAndPaleColor } from './lightenAndPaleColor.js';
 import ColorLuminance from './ColorLuminance.js';
+import { onError } from '../../utils/onError.js';
 
 // Helper functions
 const setCSSVar = (varName, value) => document.documentElement.style.setProperty(varName, value);
-const getChromeURL = (path) => chrome.runtime.getURL(path);
+const getChromeURL = (path) => browser.runtime.getURL(path);
 const applyProperties = (props) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
 let DarkMode = null;
@@ -66,7 +67,7 @@ export function updateAllColors(storedSetting, newColor = null) {
   }
 
   let alliframes = document.getElementsByTagName('iframe');
-  let fileref = GetiFrameCSSElement();
+  let fileref = GetCSSElement('css/iframe.css');
 
   for (let i = 0; i < alliframes.length; i++) {
     const element = alliframes[i];
@@ -79,7 +80,7 @@ export function updateAllColors(storedSetting, newColor = null) {
     console.log(element.contentDocument.documentElement);
 
     element.contentDocument.documentElement.childNodes[1].style.color =
-      DarkMode ? 'black' : 'white';
+      DarkMode ? 'white' : 'black';
     element.contentDocument.documentElement.firstChild.appendChild(
       fileref,
     );
@@ -88,11 +89,13 @@ export function updateAllColors(storedSetting, newColor = null) {
 
 export function getDarkMode() {
   return new Promise((resolve, reject) => {
-    chrome.storage.local.get('DarkMode', (result) => {
+    const result = browser.storage.local.get('DarkMode')
-      if (chrome.runtime.lastError) {
+    function open (result) {
-        return reject(chrome.runtime.lastError);
+      if (browser.runtime.lastError) {
+        return reject(browser.runtime.lastError);
       }
       resolve(result.DarkMode);
-    });
+    }
+    result.then(open, onError)
   });
 }

src/seqta/utils/FileUpload.js

@@ -0,0 +1,43 @@
+/**
+ * Uploads an image file to a specified endpoint using a POST request.
+ *
+ * @param {File} file - The image file to be uploaded.
+ * @returns {Promise} A promise that resolves to the response from the server.
+ * @throws {Error} If no file is provided or if there is an error during upload.
+ */
+export async function UploadImage(file) {
+  // Ensuring that file is provided
+  if (!file) {
+    throw new Error("No file provided");
+  }
+
+  // Extracting the filename
+  const fileName = file.name;
+
+  // Assuming 'document.cookie' contains all the cookies in the format you provided
+  const cookies = document.cookie;
+
+  // Setting up the request options
+  const requestOptions = {
+    method: 'POST',
+    headers: {
+      'Cookie': cookies,
+      'X-File-Name': fileName
+    },
+    body: file // Binary file data
+  };
+
+  // Making the fetch request and returning the promise
+  return fetch('/seqta/student/file/upload/xhr2', requestOptions)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      const json = response.json();
+      return `/seqta/student/load/file?type=message&file=${json.uuid}`;
+    })
+    .catch(error => {
+      console.error('Error during file upload:', error);
+      throw error;
+    });
+}

src/seqta/utils/GetPrefs.js

@@ -0,0 +1,6 @@
+const GetPrefs = await fetch(`${location.origin}/seqta/student/load/prefs?`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ asArray: true, request: 'userPrefs' })
+  })
+  export const response = await GetPrefs.json()

src/seqta/utils/MessageListener.js

@@ -1,11 +1,11 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 import { MenuOptionsOpen, OpenMenuOptions, closeSettings } from '../../SEQTA.js';
 import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from '../ui/Themes.js';
 
 export class MessageHandler {
   constructor() {
-    chrome.runtime.onMessage.addListener(this.routeMessage.bind(this));
+    browser.runtime.onMessage.addListener(this.routeMessage.bind(this));
   }
 
   routeMessage(request, sender, sendResponse) {

src/seqta/utils/StorageListener.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 import {
   CreateBackground,
@@ -15,7 +15,7 @@ import { getDarkMode, updateAllColors } from '../ui/colors/Manager.js';
 export default class StorageListener {
   constructor() {
     this.darkMode = getDarkMode();
-    chrome.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
+    browser.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
   }
 
   handleStorageChanges(changes) {

src/seqta/utils/onError.js

@@ -0,0 +1 @@
+export function onError (error) { console.log(`Error: ${error}`) }

sweep.yaml

@@ -1,45 +0,0 @@
-# Sweep AI turns bugs & feature requests into code changes (https://sweep.dev)
-# For details on our config file, check out our docs at https://docs.sweep.dev/usage/config
-
-# This setting contains a list of rules that Sweep will check for. If any of these rules are broken in a new commit, Sweep will create an pull request to fix the broken rule.
-rules:
-  - "All docstrings and comments should be up to date."
-  - "Use meaningful variable and function names that accurately describe their purpose."
-  - "Avoid using magic numbers or hard-coded values. Instead, use constants or variables to improve code readability and maintainability."
-  - "Remove commented-out code and unused imports to keep the codebase clean and organized."
-  - "Follow a consistent naming convention for files, functions, and variables to improve code readability and maintainability."
-
-# This is the branch that Sweep will develop from and make pull requests to. Most people use 'main' or 'master' but some users also use 'dev' or 'staging'.
-branch: 'main'
-
-# By default Sweep will read the logs and outputs from your existing Github Actions. To disable this, set this to false.
-gha_enabled: True
-
-# This is the description of your project. It will be used by sweep when creating PRs. You can tell Sweep what's unique about your project, what frameworks you use, or anything else you want.
-#
-# Example:
-#
-# description: sweepai/sweep is a python project. The main api endpoints are in sweepai/api.py. Write code that adheres to PEP8.
-description: ''
-
-# This sets whether to create pull requests as drafts. If this is set to True, then all pull requests will be created as drafts and GitHub Actions will not be triggered.
-draft: False
-
-# This is a list of directories that Sweep will not be able to edit.
-blocked_dirs: []
-
-# This is a list of documentation links that Sweep will use to help it understand your code. You can add links to documentation for any packages you use here.
-#
-# Example:
-#
-# docs:
-#   - PyGitHub: ["https://pygithub.readthedocs.io/en/latest/", "We use pygithub to interact with the GitHub API"]
-docs: []
-
-# Sandbox executes commands in a sandboxed environment to validate code changes after every edit to guarantee pristine code. For more details, see the [Sandbox](./sandbox) page.
-sandbox:
-  install:
-    - trunk init
-  check:
-    - trunk fmt {file_path} || return 0
-    - trunk check --fix --print-failures {file_path}

webpack.config.js

@@ -64,7 +64,7 @@ export default {
       patterns: [
         { from: 'public', to: '.' },
         { from: 'src/css/preview', to: 'css/preview' },
-        { from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js', to: '.'},
+        { from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js' },
         { from: 'interface/dist/client', to: 'client' },
         { from: 'interface/dist/index.html', to: 'interface/index.html' }
       ],