feat(app): improved input handling + better UI

feat(app): add icons to electron
feat: electron building
2026-06-13 15:14:40 +00:00 · 2024-12-11 11:44:56 +11:00 · 2024-12-05 18:11:13 +11:00 · 2024-12-05 18:09:06 +11:00
48 changed files with 1031 additions and 1746 deletions
@@ -1,414 +0,0 @@
 /** @type {import('dependency-cruiser').IConfiguration} */
 module.exports = {
  forbidden: [
    {
      name: 'no-circular',
      severity: 'warn',
      comment:
        'This dependency is part of a circular relationship. You might want to revise ' +
        'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
      from: {},
      to: {
        circular: true
      }
    },
    {
      name: 'no-orphans',
      comment:
        "This is an orphan module - it's likely not used (anymore?). Either use it or " +
        "remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
        "add an exception for it in your dependency-cruiser configuration. By default " +
        "this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
        "files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
      severity: 'warn',
      from: {
        orphan: true,
        pathNot: [
          '(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$',                  // dot files
          '[.]d[.]ts$',                                                       // TypeScript declaration files
          '(^|/)tsconfig[.]json$',                                            // TypeScript config
          '(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$' // other configs
        ]
      },
      to: {},
    },
    {
      name: 'no-deprecated-core',
      comment:
        'A module depends on a node core module that has been deprecated. Find an alternative - these are ' +
        "bound to exist - node doesn't deprecate lightly.",
      severity: 'warn',
      from: {},
      to: {
        dependencyTypes: [
          'core'
        ],
        path: [
          '^v8/tools/codemap$',
          '^v8/tools/consarray$',
          '^v8/tools/csvparser$',
          '^v8/tools/logreader$',
          '^v8/tools/profile_view$',
          '^v8/tools/profile$',
          '^v8/tools/SourceMap$',
          '^v8/tools/splaytree$',
          '^v8/tools/tickprocessor-driver$',
          '^v8/tools/tickprocessor$',
          '^node-inspect/lib/_inspect$',
          '^node-inspect/lib/internal/inspect_client$',
          '^node-inspect/lib/internal/inspect_repl$',
          '^async_hooks$',
          '^punycode$',
          '^domain$',
          '^constants$',
          '^sys$',
          '^_linklist$',
          '^_stream_wrap$'
        ],
      }
    },
    {
      name: 'not-to-deprecated',
      comment:
        'This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later ' +
        'version of that module, or find an alternative. Deprecated modules are a security risk.',
      severity: 'warn',
      from: {},
      to: {
        dependencyTypes: [
          'deprecated'
        ]
      }
    },
    {
      name: 'no-non-package-json',
      severity: 'error',
      comment:
        "This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
        "That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
        "available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " +
        "in your package.json.",
      from: {},
      to: {
        dependencyTypes: [
          'npm-no-pkg',
          'npm-unknown'
        ]
      }
    },
    {
      name: 'not-to-unresolvable',
      comment:
        "This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
        'module: add it to your package.json. In all other cases you likely already know what to do.',
      severity: 'error',
      from: {},
      to: {
        couldNotResolve: true
      }
    },
    {
      name: 'no-duplicate-dep-types',
      comment:
        "Likely this module depends on an external ('npm') package that occurs more than once " +
        "in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " +
        "maintenance problems later on.",
      severity: 'warn',
      from: {},
      to: {
        moreThanOneDependencyType: true,
        // as it's pretty common to have a type import be a type only import 
        // _and_ (e.g.) a devDependency - don't consider type-only dependency
        // types for this rule
        dependencyTypesNot: ["type-only"]
      }
    },
    /* rules you might want to tweak for your specific situation: */
    {
      name: 'not-to-spec',
      comment:
        'This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. ' +
        "If there's something in a spec that's of use to other modules, it doesn't have that single " +
        'responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.',
      severity: 'error',
      from: {},
      to: {
        path: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
      }
    },
    {
      name: 'not-to-dev-dep',
      severity: 'error',
      comment:
        "This module depends on an npm package from the 'devDependencies' section of your " +
        'package.json. It looks like something that ships to production, though. To prevent problems ' +
        "with npm packages that aren't there on production declare it (only!) in the 'dependencies'" +
        'section of your package.json. If this module is development only - add it to the ' +
        'from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration',
      from: {
        path: '^(src)',
        pathNot: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
      },
      to: {
        dependencyTypes: [
          'npm-dev',
        ],
        // type only dependencies are not a problem as they don't end up in the
        // production code or are ignored by the runtime.
        dependencyTypesNot: [
          'type-only'
        ],
        pathNot: [
          'node_modules/@types/'
        ]
      }
    },
    {
      name: 'optional-deps-used',
      severity: 'info',
      comment:
        "This module depends on an npm package that is declared as an optional dependency " +
        "in your package.json. As this makes sense in limited situations only, it's flagged here. " +
        "If you're using an optional dependency here by design - add an exception to your" +
        "dependency-cruiser configuration.",
      from: {},
      to: {
        dependencyTypes: [
          'npm-optional'
        ]
      }
    },
    {
      name: 'peer-deps-used',
      comment:
        "This module depends on an npm package that is declared as a peer dependency " +
        "in your package.json. This makes sense if your package is e.g. a plugin, but in " +
        "other cases - maybe not so much. If the use of a peer dependency is intentional " +
        "add an exception to your dependency-cruiser configuration.",
      severity: 'warn',
      from: {},
      to: {
        dependencyTypes: [
          'npm-peer'
        ]
      }
    }
  ],
  options: {
    /* Which modules not to follow further when encountered */
    doNotFollow: {
      /* path: an array of regular expressions in strings to match against */
      path: ['node_modules']
    },
    /* Which modules to exclude */
    // exclude : {
    //   /* path: an array of regular expressions in strings to match against */
    //   path: '',
    // },
    /* Which modules to exclusively include (array of regular expressions in strings)
       dependency-cruiser will skip everything not matching this pattern
    */
    // includeOnly : [''],
    /* List of module systems to cruise.
       When left out dependency-cruiser will fall back to the list of _all_
       module systems it knows of. It's the default because it's the safe option
       It might come at a performance penalty, though.
       moduleSystems: ['amd', 'cjs', 'es6', 'tsd']
       As in practice only commonjs ('cjs') and ecmascript modules ('es6')
       are widely used, you can limit the moduleSystems to those.
     */
    // moduleSystems: ['cjs', 'es6'],
    /* 
      false: don't look at JSDoc imports (the default)
      true: dependency-cruiser will detect dependencies in JSDoc-style
      import statements. Implies "parser": "tsc", so the dependency-cruiser
      will use the typescript parser for JavaScript files.
      For this to work the typescript compiler will need to be installed in the
      same spot as you're running dependency-cruiser from.
     */
    // detectJSDocImports: true,
    /* prefix for links in html and svg output (e.g. 'https://github.com/you/yourrepo/blob/main/'
       to open it on your online repo or `vscode://file/${process.cwd()}/` to 
       open it in visual studio code),
     */
    // prefix: `vscode://file/${process.cwd()}/`,
    /* false (the default): ignore dependencies that only exist before typescript-to-javascript compilation
       true: also detect dependencies that only exist before typescript-to-javascript compilation
       "specify": for each dependency identify whether it only exists before compilation or also after
     */
    tsPreCompilationDeps: true,
    /* list of extensions to scan that aren't javascript or compile-to-javascript.
       Empty by default. Only put extensions in here that you want to take into
       account that are _not_ parsable.
    */
    // extraExtensionsToScan: [".json", ".jpg", ".png", ".svg", ".webp"],
    /* if true combines the package.jsons found from the module up to the base
       folder the cruise is initiated from. Useful for how (some) mono-repos
       manage dependencies & dependency definitions.
     */
    // combinedDependencies: false,
    /* if true leave symlinks untouched, otherwise use the realpath */
    // preserveSymlinks: false,
    /* TypeScript project file ('tsconfig.json') to use for
       (1) compilation and
       (2) resolution (e.g. with the paths property)
       The (optional) fileName attribute specifies which file to take (relative to
       dependency-cruiser's current working directory). When not provided
       defaults to './tsconfig.json'.
     */
    tsConfig: {
      fileName: 'tsconfig.json'
    },
    /* Webpack configuration to use to get resolve options from.
       The (optional) fileName attribute specifies which file to take (relative
       to dependency-cruiser's current working directory. When not provided defaults
       to './webpack.conf.js'.
       The (optional) `env` and `arguments` attributes contain the parameters
       to be passed if your webpack config is a function and takes them (see 
        webpack documentation for details)
     */
    // webpackConfig: {
    //  fileName: 'webpack.config.js',
    //  env: {},
    //  arguments: {}
    // },
    /* Babel config ('.babelrc', '.babelrc.json', '.babelrc.json5', ...) to use
      for compilation
     */
    // babelConfig: {
    //   fileName: '.babelrc',
    // },
    /* List of strings you have in use in addition to cjs/ es6 requires
       & imports to declare module dependencies. Use this e.g. if you've
       re-declared require, use a require-wrapper or use window.require as
       a hack.
    */
    // exoticRequireStrings: [],
    /* options to pass on to enhanced-resolve, the package dependency-cruiser
       uses to resolve module references to disk. The values below should be
       suitable for most situations
       If you use webpack: you can also set these in webpack.conf.js. The set
       there will override the ones specified here.
     */
    enhancedResolveOptions: {
      /* What to consider as an 'exports' field in package.jsons */ 
      exportsFields: ["exports"],
      /* List of conditions to check for in the exports field.
         Only works when the 'exportsFields' array is non-empty.
      */
      conditionNames: ["import", "require", "node", "default", "types"],
      /* The extensions, by default are the same as the ones dependency-cruiser
         can access (run `npx depcruise --info` to see which ones that are in
         _your_ environment). If that list is larger than you need you can pass
         the extensions you actually use (e.g. [".js", ".jsx"]). This can speed
         up module resolution, which is the most expensive step.
       */
      // extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
      /* What to consider a 'main' field in package.json */
      mainFields: ["module", "main", "types", "typings"],
      /* A list of alias fields in package.jsons
         See [this specification](https://github.com/defunctzombie/package-browser-field-spec) and
         the webpack [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealiasfields)
         documentation.
         Defaults to an empty array (= don't use alias fields).
       */
      // aliasFields: ["browser"],
    },
    /* skipAnalysisNotInRules will make dependency-cruiser execute 
       analysis strictly necessary for checking the rule set only. 
       See https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#skipanalysisnotinrules
       for details
     */
    skipAnalysisNotInRules: true,
    /* List of built-in modules to use on top of the ones node declares.
       See https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#builtinmodules-influencing-what-to-consider-built-in--core-modules
       for details
    */
    builtInModules: { 
      add: [
        "bun",
        "bun:ffi",
        "bun:jsc",
        "bun:sqlite",
        "bun:test",
        "bun:wrap",
        "detect-libc",
        "undici",
        "ws"
      ]
    },
    reporterOptions: {
      dot: {
        /* pattern of modules that can be consolidated in the detailed
           graphical dependency graph. The default pattern in this configuration
           collapses everything in node_modules to one folder deep so you see
           the external modules, but their innards.
         */
        collapsePattern: 'node_modules/(?:@[^/]+/[^/]+|[^/]+)',
        /* Options to tweak the appearance of your graph.See
           https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#reporteroptions
           for details and some examples. If you don't specify a theme
           dependency-cruiser falls back to a built-in one.
        */
        // theme: {
        //   graph: {
        //     /* splines: "ortho" gives straight lines, but is slow on big graphs
        //        splines: "true" gives bezier curves (fast, not as nice as ortho)
        //    */
        //     splines: "true"
        //   },
        // }
      },
      archi: {
        /* pattern of modules that can be consolidated in the high level
           graphical dependency graph. If you use the high level graphical
           dependency graph reporter (`archi`) you probably want to tweak
           this collapsePattern to your situation.
        */
        collapsePattern: '^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)',
        /* Options to tweak the appearance of your graph. If you don't specify a
           theme for 'archi' dependency-cruiser will use the one specified in the
           dot section above and otherwise use the default one.
         */
        // theme: { },
      },
      "text": {
        "highlightFocused": true
      },
    }
  }
 };
 // generated: dependency-cruiser@16.10.0 on 2025-02-16T22:32:01.621Z
@@ -7,17 +7,21 @@ assignees: ''
 ---
-**Bug Description**  
+**Describe the bug**
-Please provide a clear and concise description of the bug.
+A clear and concise description of what the bug is.
-**Steps to Reproduce**  
+**To Reproduce**
-Please list the steps taken to reproduce the issue.
+Please indicate how did you make this happen.
-**Expected Behavior**  
+**Expected behaviuor**
-Please describe the expected behaviour clearly and concisely.
+Please add a clear and concise description of what you expected to happen.
-**Screenshots**  
+**Screenshots**
-If applicable, please include any screenshots that may help clarify the issue.
+If applicable, add screenshots to help explain your problem.
-**Additional Context**  
+**Desktop (please complete the following information):**
-Feel free to provide any additional context or information relevant to the problem.
+ - OS: [e.g. iOS]
 - If using Windows, the build number. Find this by using ```winver``` and copying down the build id.
 **Additional context**
 Add any other context about the problem here.
@@ -12,3 +12,9 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 **Describe alternatives you've considered**
 A clear and concise description of any alternative solutions or features you've considered.
 **Additional context**
 Add any other context or screenshots about the feature request here.
@@ -9,15 +9,15 @@ yarn.lock
 .env
 .env.submit
 dependency-graph.svg
 # Build
 extension.zip
 build/
 dist/
 betterseqtaplus-safari/
 .million/
 .vscode/
-**/.DS_Store
+**/.DS_Store
 # Electron
 electron-dist/
@@ -6,10 +6,11 @@ Below here is the supported versions of BetterSEQTA+. Anything older than this i
 | Version | Supported          |
 | ------- | ------------------ |
-| 3.4.3   | ✅ |
+| 3.4.0   | :white_check_mark: |
-| < 3.4.3   | :x:                |
+| <= 3.3   | :x:                |
 `*` May not work on other devices.
 ## Reporting a Vulnerability
 If you find vulnerabilities, REPORT IT IMMEDIATELY. Make an issue and use the template provided for vulnerabilities.
@@ -0,0 +1,162 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>BetterSEQTA Settings</title>
    <style>
        :root {
            --background-primary: #ffffff;
            --background-secondary: #e5e7eb;
            --text-primary: black;
            --theme-primary: #4F46E5;
            --theme-hover: #4338CA;
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --background-primary: #232323;
                --background-secondary: #1a1a1a;
                --text-primary: white;
                --theme-primary: #6366F1;
                --theme-hover: #818CF8;
            }
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        body {
            background: var(--background-primary);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .container {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        h1 {
            font-size: 1.75rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        .subtitle {
            color: #666;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
        label {
            display: block;
            margin-bottom: 0.25rem;
            font-weight: 500;
            color: var(--text-primary);
        }
        input[type="url"] {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--background-secondary);
            border-radius: 8px;
            font-size: 1rem;
            background: var(--background-secondary);
            color: var(--text-primary);
            transition: all 0.2s;
        }
        input[type="url"]:focus {
            outline: none;
            border-color: var(--theme-primary);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }
        button {
            margin-top: 1rem;
            width: 100%;
            padding: 0.75rem;
            border: none;
            border-radius: 8px;
            background: var(--theme-primary);
            color: white;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        button:hover {
            background: var(--theme-hover);
        }
        #error-message {
            color: #EF4444;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <h1>BetterSEQTA Settings</h1>
        <div class="subtitle">It's time to get started! To begin type in your school's SEQTA URL below.</div>
        <label for="seqtaUrl">SEQTA Website URL</label>
        <input type="url" id="seqtaUrl" placeholder="Enter your school's SEQTA URL (e.g https://seqta.school.edu.au)" required>
        <div id="error-message"></div>
        <button onclick="saveSettings()">Save Settings</button>
    </div>
    <script>
        const electron = window.require('electron');
        const { ipcRenderer } = electron;
        const Store = window.require('electron-store');
        const store = new Store();
        // Load saved URL on page load
        window.addEventListener('DOMContentLoaded', () => {
            const savedUrl = store.get('seqtaUrl') || '';
            document.getElementById('seqtaUrl').value = savedUrl;
        });
        // Handle error messages from main process
        ipcRenderer.on('seqta-url-error', (event, message) => {
            const errorElement = document.getElementById('error-message');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        });
        // Save settings
        function saveSettings() {
            const url = document.getElementById('seqtaUrl').value;
            const errorElement = document.getElementById('error-message');
            errorElement.style.display = 'none';
            if (url) {
                ipcRenderer.send('set-seqta-url', url);
            } else {
                errorElement.textContent = 'Please enter a URL';
                errorElement.style.display = 'block';
            }
        }
        // Handle enter key
        document.getElementById('seqtaUrl').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                saveSettings();
            }
        });
    </script>
 </body>
 </html> 
@@ -0,0 +1,333 @@
 import { app, BrowserWindow, ipcMain, session, Menu } from 'electron';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import Store from 'electron-store';
 // Fix for __dirname in ES modules
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const store = new Store();
 let mainWindow = null;
 let settingsWindow = null;
 // CSS to inject
 const customCSS = `
 #alertBar {
    display: none !important;
 }
 /* Match SEQTA's styling */
 body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
 }
 `;
 // Create the application menu
 function createAppMenu() {
    const isMac = process.platform === 'darwin';
    const template = [
        ...(isMac ? [{
            label: app.name,
            submenu: [
                { role: 'about' },
                { type: 'separator' },
                { role: 'services' },
                { type: 'separator' },
                { role: 'hide' },
                { role: 'hideOthers' },
                { role: 'unhide' },
                { type: 'separator' },
                { role: 'quit' }
            ]
        }] : []),
        {
            label: 'Settings',
            submenu: [
                {
                    label: 'Configure SEQTA URL',
                    accelerator: isMac ? 'Cmd+,' : 'Ctrl+,',
                    click: () => {
                        createSettingsWindow();
                    }
                }
            ]
        },
        {
            label: 'View',
            submenu: [
                { role: 'reload' },
                { role: 'forceReload' },
                { role: 'toggleDevTools' },
                { type: 'separator' },
                { role: 'resetZoom' },
                { role: 'zoomIn' },
                { role: 'zoomOut' },
                { type: 'separator' },
                { role: 'togglefullscreen' }
            ]
        }
    ];
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
 }
 // Validate SEQTA URL
 function isValidSeqtaUrl(url) {
    try {
        const urlObj = new URL(url);
        // Only ensure it's a valid HTTPS URL
        return urlObj.protocol === 'https:';
    } catch {
        return false;
    }
 }
 // Get the correct path for the extension based on whether we're in development or production
 function getExtensionPath() {
    if (app.isPackaged) {
        // In production, the extension is in the resources directory
        return path.join(process.resourcesPath, 'chrome-extension');
    } else {
        // In development, the extension is in the dist directory
        return path.join(__dirname, '..', 'dist', 'chrome');
    }
 }
 // Load the Chrome extension
 async function loadExtension() {
    try {
        const extensionPath = getExtensionPath();
        console.log('Loading extension from:', extensionPath);
        await session.defaultSession.loadExtension(extensionPath, {
            allowFileAccess: true
        });
        console.log('Extension loaded successfully!');
    } catch (err) {
        console.error('Failed to load extension:', err);
    }
 }
 function createMainWindow() {
    console.log('🚀 Creating main window...');
    if (mainWindow) {
        if (!mainWindow.isDestroyed()) {
            console.log('✨ Existing window found, focusing it');
            mainWindow.focus();
            return mainWindow;
        }
        console.log('🔄 Old window was destroyed, creating new one');
    }
    console.log('📦 Initializing new BrowserWindow');
    mainWindow = new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            backgroundThrottling: false,
            enableWebSQL: false,
            webgl: false,
            offscreen: false
        },
        show: false,
        backgroundColor: '#ffffff'
    });
    const seqtaUrl = store.get('seqtaUrl');
    console.log('📍 Stored SEQTA URL:', seqtaUrl);
    // Register keyboard shortcut for settings
    mainWindow.webContents.on('before-input-event', (event, input) => {
        if ((input.meta || input.control) && input.key === ',') {
            createSettingsWindow();
        }
    });
    // Inject CSS when the page loads
    mainWindow.webContents.on('did-finish-load', () => {
        console.log('🎨 Page loaded, injecting CSS');
        mainWindow.webContents.insertCSS(customCSS).catch(err => {
            console.error('Failed to inject CSS:', err);
        });
    });
    // Only show window when it's ready
    mainWindow.once('ready-to-show', () => {
        console.log('🎉 Window ready to show!');
        mainWindow.show();
        mainWindow.focus();
    });
    if (seqtaUrl) {
        if (!isValidSeqtaUrl(seqtaUrl)) {
            console.error('❌ Invalid SEQTA URL stored:', seqtaUrl);
            createSettingsWindow();
            return;
        }
        console.log('🌐 Loading SEQTA URL:', seqtaUrl);
        mainWindow.loadURL(seqtaUrl)
            .then(() => {
                console.log('✅ Successfully loaded SEQTA URL');
                mainWindow.show();
                mainWindow.focus();
            })
            .catch(err => {
                console.error('❌ Failed to load SEQTA URL:', err);
                createSettingsWindow();
            });
    } else {
        console.log('⚙️ No SEQTA URL found, opening settings');
        createSettingsWindow();
    }
    return mainWindow;
 }
 function createSettingsWindow() {
    if (settingsWindow) {
        settingsWindow.focus();
        return;
    }
    settingsWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
        show: false,
        backgroundColor: '#ffffff'
    });
    const settingsPath = path.join(__dirname, 'index.html');
    settingsWindow.loadFile(settingsPath);
    settingsWindow.once('ready-to-show', () => {
        settingsWindow.show();
        settingsWindow.focus();
    });
    // Only enable DevTools in development
    if (process.env.NODE_ENV === 'development') {
        settingsWindow.webContents.openDevTools();
    }
    settingsWindow.on('closed', () => {
        settingsWindow = null;
    });
 }
 // Performance optimization: Disable hardware acceleration if running on low-end device
 if (process.platform !== 'darwin') { // Skip for macOS
    app.disableHardwareAcceleration();
 }
 // Performance optimization: Disable smooth scrolling
 app.commandLine.appendSwitch('disable-smooth-scrolling');
 // Wait for app to be ready before creating windows
 app.whenReady().then(async () => {
    createAppMenu();
    await loadExtension();
    createMainWindow();
 });
 // Performance optimization: Quit immediately instead of gracefully
 app.on('window-all-closed', () => {
    app.quit();
 });
 app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createMainWindow();
    }
 });
 // Format and validate SEQTA URL
 function formatAndValidateUrl(url) {
    // Remove any whitespace
    url = url.trim();
    // If no protocol specified, add https://
    if (!url.startsWith('http://') && !url.startsWith('https://')) {
        url = 'https://' + url;
    }
    // If it's http://, upgrade to https://
    if (url.startsWith('http://')) {
        url = 'https://' + url.slice(7);
    }
    try {
        const urlObj = new URL(url);
        // Ensure it's https
        if (urlObj.protocol !== 'https:') {
            throw new Error('URL must use HTTPS');
        }
        return { isValid: true, url: url };
    } catch (error) {
        return { isValid: false, url: url, error: error.message };
    }
 }
 // Handle setting the SEQTA URL
 ipcMain.on('set-seqta-url', (event, url) => {
    console.log('🔧 Received new SEQTA URL:', url);
    const { isValid, url: formattedUrl, error } = formatAndValidateUrl(url);
    if (!isValid) {
        console.error('❌ Invalid URL format:', error);
        event.reply('seqta-url-error', 'Please enter a valid URL');
        return;
    }
    console.log('💾 Saving URL to store:', formattedUrl);
    store.set('seqtaUrl', formattedUrl);
    // Create main window if it doesn't exist
    if (!mainWindow || mainWindow.isDestroyed()) {
        console.log('🆕 Creating new main window');
        createMainWindow();
    } else {
        console.log('🔄 Loading new URL in existing window:', formattedUrl);
        mainWindow.loadURL(formattedUrl).then(() => {
            console.log('✅ URL loaded successfully');
            console.log('🎨 Injecting CSS and settings button');
            mainWindow.webContents.insertCSS(customCSS).catch(err => {
                console.error('Failed to inject CSS:', err);
            });
            mainWindow.webContents.executeJavaScript(`
                if (!document.getElementById('bsp-settings-button')) {
                    document.body.insertAdjacentHTML('beforeend', ${JSON.stringify(settingsButtonHTML)});
                    document.getElementById('bsp-settings-button').addEventListener('click', () => {
                        window.postMessage('open-settings', '*');
                    });
                }
            `).catch(err => {
                console.error('Failed to inject settings button:', err);
            });
            console.log('👀 Showing and focusing window');
            mainWindow.show();
            mainWindow.focus();
        }).catch(err => {
            console.error('❌ Failed to load SEQTA URL:', err);
            event.reply('seqta-url-error', 'Failed to load SEQTA. Please check your connection and URL.');
        });
    }
    // Close settings window if it exists
    if (settingsWindow && !settingsWindow.isDestroyed()) {
        console.log('🚪 Closing settings window');
        settingsWindow.close();
    }
 }); 
@@ -1,25 +0,0 @@
 // ref: https://stackoverflow.com/a/76920975
 import type { Plugin } from 'vite';
 export default function ClosePlugin(): Plugin {
  return {
    name: 'ClosePlugin', // required, will show up in warnings and errors
    // use this to catch errors when building
    buildEnd(error) {
      if(error) {
        console.error('Error bundling')
        console.error(error)
        process.exit(1)
      } else {
        console.log('Build ended')
      }
    },
    // use this to catch the end of a build without errors
    closeBundle() {
      console.log('Bundle closed')
      process.exit(0)
    },
  }
 }
@@ -25,32 +25,17 @@ export function updateManifestPlugin(): PluginOption {
          console.log('** updated **');
        }
-        // Implement retry mechanism for file watching
+        fs.watchFile(manifestPath, () => {
-        const watchWithRetry = () => {
+          console.log('** watchFile ** ');
-          if (!fs.existsSync(manifestPath)) {
+          const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
-            console.log('Manifest not found, retrying in 1 second...');
+          if (manifestContents.web_accessible_resources.some((resource: any) => resource.use_dynamic_url)) {
-            setTimeout(watchWithRetry, 1000);
+            const updated = forceDisableUseDynamicUrl();
-            return;
+            if (updated) {
-          }
+              server.ws.send({ type: 'full-reload' });
-
+              console.log('** updated **');
          fs.watchFile(manifestPath, () => {
            console.log('** watchFile **');
            try {
              const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
              if (manifestContents.web_accessible_resources?.some((resource: any) => resource.use_dynamic_url)) {
                const updated = forceDisableUseDynamicUrl();
                if (updated) {
                  server.ws.send({ type: 'full-reload' });
                  console.log('** updated **');
                }
              }
            } catch (error) {
              console.log('Error reading manifest, will retry on next change:', error.message);
            }
-          });
+          }
-        };
+        });
        watchWithRetry();
      });
    },
@@ -1,8 +1,9 @@
 {
  "name": "betterseqtaplus",
-  "version": "3.4.5",
+  "version": "3.4.2",
  "type": "module",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
+  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, while incorporating a plethora of new and improved features!",
  "main": "electron/main.js",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "dev": "cross-env MODE=chrome vite dev",
@@ -12,10 +13,13 @@
    "build:firefox": "cross-env MODE=firefox vite build",
    "build:safari": "cross-env MODE=safari vite build",
    "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
    "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
    "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
    "publish": "bun lib/publish.js --b",
-    "zip": "bedframe zip"
+    "zip": "bedframe zip",
    "electron-dev": "electron .",
    "electron-build": "electron-builder",
    "electron-pack": "npm run build:chrome && electron-builder --dir",
    "electron-dist": "npm run build:chrome && electron-builder"
  },
  "targets": {
    "prod": {
@@ -33,65 +37,114 @@
  "license": "MIT",
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.25.9",
-    "@babel/runtime": "^7.26.7",
+    "@babel/runtime": "^7.26.0",
    "@bedframe/cli": "^0.0.85",
    "@crxjs/vite-plugin": "2.0.0-beta.25",
    "@types/mime-types": "^2.1.4",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@vitejs/plugin-react-swc": "^3.7.0",
    "cross-env": "^7.0.3",
-    "dependency-cruiser": "^16.10.0",
+    "electron": "^33.2.1",
-    "eslint": "^8.57.1",
+    "electron-builder": "^25.1.8",
-    "glob": "^11.0.1",
+    "eslint": "^8.57.0",
    "glob": "^11.0.0",
    "mime-types": "^2.1.35",
-    "prettier": "^3.4.2",
+    "prettier": "^3.3.3",
    "process": "^0.11.10",
-    "publish-browser-extension": "^3.0.0",
+    "sass": "^1.78.0",
    "sass": "^1.83.4",
    "sass-loader": "^13.3.3",
-    "semver": "^7.7.1",
+    "semver": "^7.6.3",
    "url": "^0.11.4"
  },
  "dependencies": {
    "@bedframe/cli": "^0.0.85",
    "@codemirror/lang-css": "^6.3.0",
    "@codemirror/lang-less": "^6.0.2",
    "@codemirror/theme-one-dark": "^6.1.2",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@tailwindcss/forms": "^0.5.9",
    "@tsconfig/svelte": "^5.0.4",
    "@types/chrome": "^0.0.270",
    "@types/color": "^3.0.6",
-    "@types/dompurify": "^3.2.0",
+    "@types/dompurify": "^3.0.5",
-    "@types/lodash": "^4.17.15",
+    "@types/lodash": "^4.17.7",
-    "@types/node": "^20.17.17",
+    "@types/node": "^20.16.5",
-    "@types/react": "^17.0.83",
+    "@types/react": "17",
-    "@types/react-dom": "^17.0.26",
+    "@types/react-dom": "17",
    "@types/sortablejs": "^1.15.8",
    "@types/uuid": "^9.0.8",
    "@types/webextension-polyfill": "^0.10.7",
-    "@uiw/codemirror-extensions-color": "^4.23.8",
+    "@uiw/codemirror-extensions-color": "^4.23.3",
-    "@uiw/codemirror-theme-github": "^4.23.8",
+    "@uiw/codemirror-theme-github": "^4.23.3",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "caniuse-lite": "^1.0.30001684",
    "classnames": "^2.5.1",
    "codemirror": "^6.0.1",
    "color": "^4.2.3",
    "dompurify": "^3.1.6",
    "electron-store": "^10.0.0",
    "embla-carousel-autoplay": "^8.3.1",
    "embla-carousel-svelte": "^8.3.1",
    "fuse.js": "^7.0.0",
    "idb": "^8.0.0",
    "kolorist": "^1.8.0",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
    "million": "^3.1.11",
    "motion": "^11.12.0",
    "postcss": "^8.4.45",
    "publish-browser-extension": "^2.2.1",
    "react": "17",
    "react-best-gradient-color-picker": "^3.0.10",
    "react-dom": "17",
    "rss-parser": "^3.13.0",
    "sortablejs": "^1.15.3",
    "svelte": "^5.1.9",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.6.2",
    "uuid": "^9.0.1",
-    "vite": "^5.4.14",
+    "vite": "^5.4.4",
    "webextension-polyfill": "^0.10.0"
  },
  "build": {
    "appId": "com.betterseqta.app",
    "productName": "BetterSEQTA",
    "directories": {
      "output": "electron-dist",
      "buildResources": "build"
    },
    "files": [
      "dist/**/*",
      "electron/**/*",
      "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
      "!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",
      "!**/node_modules/*.d.ts",
      "!**/node_modules/.bin",
      "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",
      "!.editorconfig",
      "!**/._*",
      "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",
      "!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",
      "!**/{appveyor.yml,.travis.yml,circle.yml}",
      "!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"
    ],
    "extraResources": [
      {
        "from": "dist/chrome",
        "to": "chrome-extension",
        "filter": ["**/*"]
      }
    ],
    "mac": {
      "category": "public.app-category.education",
      "target": ["dmg", "zip"],
      "icon": "build/icon.icns"
    },
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png"
    }
  }
 }
@@ -13,13 +13,11 @@ import { StorageChangeHandler } from '@/seqta/utils/listeners/StorageChanges'
 import { eventManager } from '@/seqta/utils/listeners/EventManager'
 // UI and theme management
 import RegisterClickListeners from './seqta/utils/listeners/ClickListeners'
 import { AddBetterSEQTAElements } from '@/seqta/ui/AddBetterSEQTAElements'
 import { enableCurrentTheme } from '@/seqta/ui/themes/enableCurrent'
 import loading, { AppendLoadingSymbol } from '@/seqta/ui/Loading'
-import { SettingsResizer } from '@/seqta/ui/SettingsResizer'
+import { enableCurrentTheme } from '@/seqta/ui/themes/enableCurrent'
 import { updateAllColors } from '@/seqta/ui/colors/Manager'
-import pageState from '@/pageState.js?url'
+import { SettingsResizer } from '@/seqta/ui/SettingsResizer'
 import { AddBetterSEQTAElements } from '@/seqta/ui/AddBetterSEQTAElements'
 // JSON content
 import MenuitemSVGKey from '@/seqta/content/MenuItemSVGKey.json'
@@ -32,7 +30,6 @@ import LogoLightOutline from '@/resources/icons/betterseqta-light-outline.png'
 import icon48 from '@/resources/icons/icon-48.png?base64'
 import assessmentsicon from '@/seqta/icons/assessmentsIcon'
 import coursesicon from '@/seqta/icons/coursesIcon'
 import kofi from '@/resources/kofi.png'
 // Stylesheets
 import iframeCSS from '@/css/iframe.scss?raw'
@@ -41,6 +38,7 @@ import documentLoadCSS from '@/css/documentload.scss?inline'
 import renderSvelte from '@/interface/main'
 import Settings from '@/interface/pages/settings.svelte'
 import { settingsPopup } from './interface/hooks/SettingsPopup'
 import { migrateBackgrounds } from './seqta/utils/migrateBackgrounds'
 let SettingsClicked = false
 export let MenuOptionsOpen = false
@@ -76,7 +74,6 @@ async function init() {
      await initializeSettingsState();
      if (settingsState.onoff) {
        injectMainScript();
        enableCurrentTheme()
        if (typeof settingsState.assessmentsAverage == 'undefined') {
@@ -167,35 +164,7 @@ export function OpenWhatsNewPopup() {
  let text = stringToHTML(
    /* html */ `
  <div class="whatsnewTextContainer" style="height: 50%;overflow-y: scroll;">  
    <h1>3.4.5 - News, Bug Fixes, and improvements!</h1>
    <li>Added alternative news sources</li>
    <li>Notifications now open direct messages</li>
    <li>Added Toggle for Letter/Percent Grades</li>
    <li>Added fullscreen to the theme creator CSS editor</li>
    <li>Added warning if BetterSEQTA is installed</li>
    <li>Removed max width from theme creator</li>
    <li>Fixed discord icon colour in light mode</li>
    <li>Fixed subject averages not showing up with letter grades</li>
    <li>Tweaked compose UI</li>
    <h1>3.4.4 - Bug Fixes and Improvements</h1>
    <li>Added vertical zoom to the timetable</li>
    <li>Fixed theme importing failing when images were included</li>
    <li>Removed broken gradients on the backgrounds of certain buttons</li>
    <li>Fixed timetable quickbar arrow receiving the wrong colour</li>
    <li>Auto-applied selected theme after saving in theme creator</li>
    <li>Fixed a bug where timetable was clipped at certain times</li>
    <li>Fixed custom sidebar layouts not applying on page load</li>
    <li>Improved spacing of the message editor buttons</li>
    <li>Added HEX colour input to the theme creator</li>
    <li>Fixed theme application in the creator</li>
    <li>Performance improvements</li>
    <li>Other minor bug fixes</li>
    <h1>3.4.3 - Minor Bug Fixes</h1>
    <li>Fixed a bug where timetable colours couldn't be changed</li>
    <li>Other minor bug fixes</li>
    <h1>3.4.2 - Minor Bug Fixes</h1>
    <li>Fixed a bug where Assessment Average wasn't enabled by default</li>
    <li>Fixed floating menus would sometimes be placed behind other elements</li>
@@ -338,10 +307,6 @@ export function OpenWhatsNewPopup() {
  `,
  ).firstChild
  const kofi_url = browser.runtime.getURL(kofi)
  console.log(kofi_url)
  let footer = stringToHTML(
    /* html */ `
    <div class="whatsnewFooter">
@@ -359,16 +324,10 @@ export function OpenWhatsNewPopup() {
        </a>
        <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0;">
          <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
-            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="currentColor"/>
+            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="white"/>
          </svg>
        </a>
      </div>
      <div>
        <a href="https://ko-fi.com/sethburkart" target="_blank" style="background: none !important; margin:0;margin-left:6px; padding:0;">
         <img height="25" style="border:0px;height:25px;" src="chrome-extension://gkgllhboiibhncnhlijhkbnamfpomjph/resources/kofi.png" border="0" alt="Buy Me a Coffee at ko-fi.com" />
        </a>
      </div>
    </div>
  `).firstChild
@@ -426,33 +385,6 @@ export function OpenWhatsNewPopup() {
  })
 }
 function injectMainScript() {
  const mainScript = document.createElement('script')
  mainScript.src = browser.runtime.getURL(pageState)
  document.head.appendChild(mainScript)
 }
 export function hideSideBar() {
  const sidebar = document.getElementById('menu') // The sidebar element to be closed
  const main = document.getElementById('main') // The main content element that must be resized to fill the page
  const currentMenuWidth = window.getComputedStyle(sidebar!).width // Get the styles of the different elements
  const currentContentPosition = window.getComputedStyle(main!).position
  if (currentMenuWidth != "0") { // Actually modify it to collapse the sidebar
    sidebar!.style.width = "0";
  } else {
    sidebar!.style.width = "100%";
  }
  if (currentContentPosition != "relative") {
    main!.style.position = 'relative';
  } else {
    main!.style.position = 'absolute';
  }
 }
 export function OpenAboutPage() {
  const background = document.createElement('div')
  background.id = 'whatsnewbk'
@@ -499,7 +431,7 @@ export function OpenAboutPage() {
        </a>
        <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0;">
          <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
-            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="currentColor"/>
+            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="white"/>
          </svg>
        </a>
      </div>
@@ -572,7 +504,10 @@ export async function finishLoad() {
  if (settingsState.justupdated && !document.getElementById('whatsnewbk')) {
    OpenWhatsNewPopup();
    /* Background Migration script */
  }
  migrateBackgrounds();
 }
 async function DeleteWhatsNew() {
@@ -649,11 +584,10 @@ export async function waitForElm(selector: string, usePolling: boolean = false,
  } else {
    return new Promise((resolve) => {
      const registerObserver = () => {
-        const { unregister } =  eventManager.register(`${selector}`, {
+        const { unregister } = eventManager.register(`${selector}`, {
          customCheck: (element) => element.matches(selector)
-        }, async (element) => {
+        }, (element) => {
          resolve(element);
          await delay(1);
          unregister(); // Remove the listener once the element is found
        });
        return unregister;
@@ -804,7 +738,6 @@ async function LoadPageElements(): Promise<void> {
    className: 'notice',
  }, handleNotices);
  if (settingsState.assessmentsAverage) {
    eventManager.register('assessmentsAdded', {
      elementType: 'div',
@@ -812,125 +745,9 @@ async function LoadPageElements(): Promise<void> {
    }, handleAssessments);
  }
  RegisterClickListeners();
  await handleSublink(sublink);
 }
 function handleTimetableZoom(): void {
  console.log('Initializing timetable zoom controls');
  // Lazy initialize state variables only when function is first called
  let timetableZoomLevel = 1;
  let baseContainerHeight: number | null = null;
  const originalEntryPositions = new Map<Element, { topRatio: number; heightRatio: number }>();
  // Create zoom controls
  const zoomControls = document.createElement('div');
  zoomControls.className = 'timetable-zoom-controls';
  const zoomIn = document.createElement('button');
  zoomIn.className = 'uiButton timetable-zoom iconFamily';
  zoomIn.innerHTML = '&#xed93;'; // Using unicode for zoom in icon
  const zoomOut = document.createElement('button');
  zoomOut.className = 'uiButton timetable-zoom iconFamily';
  zoomOut.innerHTML = '&#xed94;'; // Using unicode for zoom out icon
  zoomControls.appendChild(zoomOut);
  zoomControls.appendChild(zoomIn);
  const toolbar = document.getElementById('toolbar');
  toolbar?.appendChild(zoomControls);
  const initializePositions = () => {
    // Get the base container height from the first TD
    const firstDayColumn = document.querySelector('.dailycal .content .days td') as HTMLElement;
    if (!firstDayColumn) return false;
    baseContainerHeight = parseInt(firstDayColumn.style.height) || firstDayColumn.offsetHeight;
    // Store original ratios
    const entries = document.querySelectorAll('.entriesWrapper .entry');
    entries.forEach((entry: Element) => {
      const entryEl = entry as HTMLElement;
      // Calculate ratios relative to detected base height
      if (baseContainerHeight === null) return;
      const topRatio = parseInt(entryEl.style.top) / baseContainerHeight;
      const heightRatio = parseInt(entryEl.style.height) / baseContainerHeight;
      originalEntryPositions.set(entry, { topRatio, heightRatio });
    });
    return true;
  };
  const updateZoom = () => {
    // Initialize positions if not already done
    if (baseContainerHeight === null && !initializePositions()) {
      console.error('Failed to initialize positions');
      return;
    }
    console.debug(`Updating zoom level to: ${timetableZoomLevel}`);
    // Calculate new container height
    if (baseContainerHeight === null) return;
    const newContainerHeight = baseContainerHeight * timetableZoomLevel;
    // Update all day columns (TDs)
    const dayColumns = document.querySelectorAll('.dailycal .content .days td');
    dayColumns.forEach((td: Element) => {
      (td as HTMLElement).style.height = `${newContainerHeight}px`;
    });
    // Update all entries using stored ratios
    const entries = document.querySelectorAll('.entriesWrapper .entry');
    entries.forEach((entry: Element) => {
      const entryEl = entry as HTMLElement;
      const originalRatios = originalEntryPositions.get(entry);
      if (originalRatios) {
        // Calculate new positions from original ratios
        const newTop = originalRatios.topRatio * newContainerHeight;
        const newHeight = originalRatios.heightRatio * newContainerHeight;
        // Apply new values
        entryEl.style.top = `${Math.round(newTop)}px`;
        entryEl.style.height = `${Math.round(newHeight)}px`;
      }
    });
    // Update time column to match
    const timeColumn = document.querySelector('.times');
    if (timeColumn) {
      const times = timeColumn.querySelectorAll('.time');
      const timeHeight = newContainerHeight / times.length;
      times.forEach((time: Element) => {
        (time as HTMLElement).style.height = `${timeHeight}px`;
      });
    }
    entries[Math.round((entries.length - 1) / 2)].scrollIntoView({ behavior: 'instant', block: 'center' });
  };
  zoomIn.addEventListener('click', () => {
    if (timetableZoomLevel < 2) {
      timetableZoomLevel += 0.2;
      updateZoom();
    }
  });
  zoomOut.addEventListener('click', () => {
    if (timetableZoomLevel > 0.6) {
      timetableZoomLevel -= 0.2;
      updateZoom();
    }
  });
 }
 async function handleNotices(node: Element): Promise<void> {
  if (!(node instanceof HTMLElement)) return;
  if (!settingsState.animations) return;
@@ -981,25 +798,15 @@ async function handleSublink(sublink: string | undefined): Promise<void> {
 }
 async function handleTimetable(): Promise<void> {
-  await waitForElm('.time', true, 10);
+  await waitForElm('.time', true, 10)
  // Store original heights when timetable loads
  const lessons = document.querySelectorAll('.dailycal .lesson');
  lessons.forEach((lesson: Element) => {
    const lessonEl = lesson as HTMLElement;
    lessonEl.setAttribute('data-original-height', lessonEl.offsetHeight.toString());
  });
  // Existing time format code
  if (settingsState.timeFormat == '12') {
-    const times = document.querySelectorAll('.timetablepage .times .time');
+    const times = document.querySelectorAll('.timetablepage .times .time')
    for (const time of times) {
-      if (!time.textContent) continue;
+      if (!time.textContent) continue
-      time.textContent = convertTo12HourFormat(time.textContent, true);
+      time.textContent = convertTo12HourFormat(time.textContent, true)
    }
  }
  handleTimetableZoom();
 }
 async function handleNewsPage(): Promise<void> {
@@ -1181,16 +988,6 @@ function ChangeMenuItemPositions(storage: any) {
  }
 }
 function ReplaceMenuSVG(element: HTMLElement, svg: string) {
  let item = element.firstChild as HTMLElement
  item!.firstChild!.remove()
  item.innerHTML = `<span>${item.innerHTML}</span>`
  let newsvg = stringToHTML(svg).firstChild
  item.insertBefore((newsvg as Node), item.firstChild)
 }
 export async function ObserveMenuItemPosition() {
  await waitForElm('#menu > ul > li')
  await delay(100)
@@ -1222,72 +1019,11 @@ export async function ObserveMenuItemPosition() {
  });
 }
-export function showConflictPopup() {
+async function main() {
  if (document.getElementById('conflict-popup')) return;
  document.body.classList.remove('hidden');
  const background = document.createElement('div');
  background.id = 'conflict-popup';
  background.classList.add('whatsnewBackground');
  background.style.zIndex = '10000000';
  const container = document.createElement('div');
  container.classList.add('whatsnewContainer');
  container.style.height = 'auto';
  const headerHTML = /* html */`
    <div class="whatsnewHeader">
      <h1>Extension Conflict Detected</h1>
      <p>Legacy BetterSEQTA Installed</p>
    </div>
  `;
  const header = stringToHTML(headerHTML).firstChild;
  const textHTML = /* html */`
    <div class="whatsnewTextContainer" style="overflow-y: auto; font-size: 1.3rem;">
      <p>
        It appears that you have the legacy BetterSEQTA extension installed alongside BetterSEQTA+.
        This conflict may cause unexpected behavior. (and breaks the extension)
      </p>
      <p>
        Please remove the older BetterSEQTA extension to ensure that BetterSEQTA+ works correctly.
      </p>
    </div>
  `;
  const text = stringToHTML(textHTML).firstChild;
  const exitButton = document.createElement('div');
  exitButton.id = 'whatsnewclosebutton';
  if (header) container.append(header);
  if (text) container.append(text);
  container.append(exitButton);
  background.append(container);
  document.getElementById('container')?.append(background);
  if (settingsState.animations) {    
    animate(
      [background as HTMLElement],
      { opacity: [0, 1] }
    );
  }
  background.addEventListener('click', (event) => {
    if (event.target === background) {
      background.remove();
    }
  });
  exitButton.addEventListener('click', () => {
    background.remove();
  });
 }
 function main() {
  if (typeof settingsState.onoff === 'undefined') {
    browser.runtime.sendMessage({ type: 'setDefaultStorage' })
    await delay(10)
  }
  const handleDisabled = () => {
@@ -1308,14 +1044,6 @@ function main() {
    InjectCustomIcons()
    HideMenuItems()
    tryLoad()
    setTimeout(() => {
      const legacyElement = document.querySelector('.outside-container .bottom-container');
      if (legacyElement) {
        console.log('Legacy extension detected');
        showConflictPopup();
      }
    }, 1000);
  } else {
    handleDisabled()
    window.addEventListener('load', handleDisabled)
@@ -1638,6 +1366,16 @@ function cloneAttributes(target: any, source: any) {
  })
 }
 function ReplaceMenuSVG(element: HTMLElement, svg: string) {
  let item = element.firstChild as HTMLElement
  item!.firstChild!.remove()
  item.innerHTML = `<span>${item.innerHTML}</span>`
  let newsvg = stringToHTML(svg).firstChild
  item.insertBefore((newsvg as Node), item.firstChild)
 }
 export function setupSettingsButton() {
  var AddedSettings = document.getElementById('AddedSettings');
  var extensionPopup = document.getElementById('ExtensionPopup');
@@ -1778,7 +1516,7 @@ function makeLessonDiv(lesson: any, num: number) {
  const { code, colour, description, staff, room, from, until, attendanceTitle, programmeID, metaID, assessments } = lesson
  // Construct the base lesson string with default values using ternary operators
-  let lessonString = /* html */`
+  let lessonString = `
    <div class="day" id="${code + num}" style="${colour}">
      <h2>${description || 'Unknown'}</h2>
      <h3>${staff || 'Unknown'}</h3>
@@ -1789,7 +1527,7 @@ function makeLessonDiv(lesson: any, num: number) {
  // Add buttons for assessments and courses if applicable
  if (programmeID !== 0) {
-    lessonString += /* html */`
+    lessonString += `
      <div class="day-button clickable" style="right: 5px;" onclick="location.href='${buildAssessmentURL(programmeID, metaID)}'">${assessmentsicon}</div>
      <div class="day-button clickable" style="right: 35px;" onclick="location.href='../#?page=/courses/${programmeID}:${metaID}'">${coursesicon}</div>
    `
@@ -1801,7 +1539,7 @@ function makeLessonDiv(lesson: any, num: number) {
      `<p onclick="location.href = '${buildAssessmentURL(programmeID, metaID, element.id)}';">${element.title}</p>`
    ).join('')
-    lessonString += /* html */`
+    lessonString += `
      <div class="tooltip assessmenttooltip">
        <svg style="width:28px;height:28px;border-radius:0;" viewBox="0 0 24 24">
          <path fill="#ed3939" d="M16 2H4C2.9 2 2 2.9 2 4V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V4C18 2.9 17.11 2 16 2M16 20H4V4H6V12L8.5 9.75L11 12V4H16V20M20 15H22V17H20V15M22 7V13H20V7H22Z" />
@@ -2461,10 +2199,10 @@ export async function loadHomePage() {
  const skeletonStructure = stringToHTML(/* html */`
    <div class="home-container" id="home-container">
-      <div class="border shortcut-container">
+      <div class="shortcut-container border">
-        <div class="border shortcuts" id="shortcuts"></div>
+        <div class="shortcuts border" id="shortcuts"></div>
      </div>
-      <div class="border timetable-container">
+      <div class="timetable-container border">
        <div class="home-subtitle">
          <h2 id="home-lesson-subtitle">Today's Lessons</h2>
          <div class="timetable-arrows">
@@ -2479,7 +2217,7 @@ export async function loadHomePage() {
        <div class="day-container loading" id="day-container">
        </div>
      </div>
-      <div class="border upcoming-container">
+      <div class="upcoming-container border">
        <div class="upcoming-title">
          <h2 class="home-subtitle">Upcoming Assessments</h2>
          <div class="upcoming-filters" id="upcoming-filters"></div>
@@ -2487,7 +2225,7 @@ export async function loadHomePage() {
        <div class="upcoming-items loading" id="upcoming-items">
        </div>
      </div>
-      <div class="border notices-container">
+      <div class="notices-container border">
        <div style="display: flex; justify-content: space-between">
          <h2 class="home-subtitle">Notices</h2>
          <input type="date" />
@@ -2519,12 +2257,7 @@ export async function loadHomePage() {
  const cleanup = setupTimetableListeners()
  // Initialize shortcuts immediately
-  try {
+  addShortcuts(settingsState.shortcuts)
    addShortcuts(settingsState.shortcuts)
  } catch(err: any) {
    console.error('[BetterSEQTA+] Error adding shortcuts:',
      err.message || err)
  }
  AddCustomShortcutsToPage()
  // Get current date
@@ -2537,6 +2270,7 @@ export async function loadHomePage() {
    assessmentsPromise,
    classesPromise,
    prefsPromise,
    noticesPromise
  ] = [
    // Timetable data
    fetch(`${location.origin}/seqta/student/load/timetable?`, {
@@ -2560,15 +2294,23 @@ export async function loadHomePage() {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ asArray: true, request: 'userPrefs' })
    }).then(res => res.json()),
    // Notices data
    fetch(`${location.origin}/seqta/student/load/notices?`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ date: TodayFormatted })
    }).then(res => res.json())
  ]
  // Process all data in parallel
-  const [timetableData, assessments, classes, prefs] = await Promise.all([
+  const [timetableData, assessments, classes, prefs, notices] = await Promise.all([
    timetablePromise,
    assessmentsPromise, 
    classesPromise,
-    prefsPromise
+    prefsPromise,
    noticesPromise
  ])
  // Process timetable data
@@ -2837,7 +2579,7 @@ export async function SendNewsPage() {
  (titlediv! as HTMLElement).innerText = 'News'
  AppendLoadingSymbol('newsloading', '#news-container')
-  const response = await browser.runtime.sendMessage({ type: 'sendNews', source: settingsState.newsSource })
+  const response = await browser.runtime.sendMessage({ type: 'sendNews' })
  const newscontainer = document.querySelector('#news-container')
  document.getElementById('newsloading')?.remove()
@@ -2854,7 +2596,7 @@ export async function SendNewsPage() {
    const articleimage = document.createElement('div')
    articleimage.classList.add('articleimage')
-    if (article.urlToImage == 'null' || article.urlToImage == null) {
+    if (article.urlToImage == 'null') {
      articleimage.style.cssText = `
        background-image: url(${browser.runtime.getURL(LogoLightOutline)});
        width: 20%;
@@ -2873,8 +2615,6 @@ export async function SendNewsPage() {
    title.target = '_blank'
    const description = document.createElement('p')
    article.description = article.description.length > 400 ? article.description.substring(0, 400) + '...' : article.description
    description.innerHTML = article.description
    articletext.append(title, description)
@@ -2898,8 +2638,9 @@ export async function SendNewsPage() {
 async function CheckForMenuList() {
  try {
-    await waitForElm('#menu > ul');
+    if (document.getElementById('menu')?.firstChild) {
-    ObserveMenuItemPosition();
+      ObserveMenuItemPosition()
    }
  } catch (error) {
    return;
  }
@@ -3003,50 +2744,6 @@ async function handleAssessments(node: Element): Promise<void> {
  const assessmentsWrapper = await waitForElm('#main > .assessmentsWrapper .assessments .AssessmentItem__AssessmentItem___2EZ95', true, 50);
  if (!assessmentsWrapper) return;
  // Grade conversion map for letter grades
  const letterGradeMap: Record<string, number> = {
    'A+': 100,
    'A': 95,
    'A-': 90,
    'B+': 85, 
    'B': 80,
    'B-': 75,
    'C+': 70,
    'C': 65,
    'C-': 60,
    'D+': 55,
    'D': 50,
    'D-': 45,
    'E+': 40,
    'E': 35,
    'E-': 30,
    'F': 0
  };
  // Function to parse grade text into a number
  function parseGrade(gradeText: string): number {
    // Remove any whitespace
    const trimmedGrade = gradeText.trim().toUpperCase();
    // Check if it is a non-percent grade
    if (trimmedGrade.includes('/')) {
      const grade = trimmedGrade.split("/");
      var a = grade[1] as unknown as number
      var b = grade[0] as unknown as number
      return ((b/a) * 100);
    }
    // Check if it's a percentage
    if (trimmedGrade.includes('%')) {
      return parseFloat(trimmedGrade.replace('%', '')) || 0;
    }
    // Check if it's a letter grade
    if (letterGradeMap.hasOwnProperty(trimmedGrade)) {
      return letterGradeMap[trimmedGrade]; 
    }
    return 0;
  }
  // Function to calculate average of grades
  function calculateAverageGrade(): number {
    const gradeElements = document.querySelectorAll('.Thermoscore__text___1NdvB');
@@ -3054,9 +2751,8 @@ async function handleAssessments(node: Element): Promise<void> {
    let count = 0;
    gradeElements.forEach(element => {
-      const gradeText = element.textContent || '';
+      const grade = parseFloat(element.textContent?.replace('%', '') || '0');
-      const grade = parseGrade(gradeText);
+      if (!isNaN(grade)) {
      if (grade > 0) {
        total += grade;
        count++;
      }
@@ -3067,49 +2763,15 @@ async function handleAssessments(node: Element): Promise<void> {
  // Function to add the average assessment item
  function addAverageAssessment() {
-    const numaverage = calculateAverageGrade();
+    const average = calculateAverageGrade();
-    if (numaverage === 0) return;
+    if (average === 0) return;
    // Remove existing average section if it exists
    const existingAverage = document.querySelector('.AssessmentItem__AssessmentItem___2EZ95:first-child');
    if (existingAverage?.querySelector('.AssessmentItem__title___2bELn')?.textContent === 'Subject Average') {
      existingAverage.remove();
    }
-    const preaverage = numaverage.toFixed(0) as unknown as number
+
    const prepaverage = Math.ceil(preaverage / 5) * 5; 
    const NumberGradeMap: Record<number, string> = {
      100: "A+",
      95: "A",
      90: "A-",
      85: "B+", 
      80: "B",
      75: "B-",
      70: "C+",
      65: "C",
      60: "C-",
      55: "D+",
      50: "D",
      45: "D-",
      40: "E+",
      35: "E",
      30: "E-",
      0: "F"
    };
    var letteraverage = "N/A"
    const check = Object.prototype.hasOwnProperty.call(NumberGradeMap, prepaverage);
    if (check) {
      console.debug("[BetterSEQTA+ Debugger] Match found")
      letteraverage = NumberGradeMap[prepaverage];
    } else {
      console.debug("[BetterSEQTA+ Debugger] No match found")
      letteraverage = "N/A"
    }
    var average = "N/A"
    if (settingsState.lettergrade) {
      average = letteraverage
    } else {
      average = `${numaverage.toFixed(2)}%`
    }
    const averageElement = stringToHTML(/* html */`
      <div class="AssessmentItem__AssessmentItem___2EZ95">
        <div class="AssessmentItem__metaContainer___dMKma">
@@ -3120,8 +2782,8 @@ async function handleAssessments(node: Element): Promise<void> {
          </div>
        </div>
        <div class="Thermoscore__Thermoscore___2tWMi">
-          <div class="Thermoscore__fill___35WjF" style="width: ${numaverage.toFixed(2)}%">
+          <div class="Thermoscore__fill___35WjF" style="width: ${average.toFixed(2)}%;">
-            <div class="Thermoscore__text___1NdvB" title="${average};">${average}</div>
+            <div class="Thermoscore__text___1NdvB" title="${average.toFixed(2)}%">${average.toFixed(2)}%</div>
          </div>
        </div>
      </div>
@@ -3136,4 +2798,4 @@ async function handleAssessments(node: Element): Promise<void> {
  // Add the average assessment item
  addAverageAssessment();
-}
+}
@@ -1,6 +1,61 @@
 import browser from 'webextension-polyfill'
 import type { SettingsState } from "@/types/storage";
-import { fetchNews } from './background/news';
+
 export const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1);
    request.onupgradeneeded = (event: any) => {
      const db = event.target.result;
      db.createObjectStore('backgrounds', { keyPath: 'id' });
    };
    request.onsuccess = () => {
      resolve(request.result);
    };
    request.onerror = (event: any) => {
      reject('Error opening database: ' + event.target.errorCode);
    };
  });
 };
 export const writeData = async (type: any, data: any) => {
  const db: any = await openDB();
  const tx = db.transaction('backgrounds', 'readwrite');
  const store = tx.objectStore('backgrounds');
  const request = await store.put({ id: 'customBackground', type, data });
  return request.result;
 };
 export const readData = () => {
  return new Promise((resolve, reject) => {
    openDB()
      .then((db: any) => {
        const tx = db.transaction('backgrounds', 'readonly');
        const store = tx.objectStore('backgrounds');
        // Retrieve the custom background
        const getRequest = store.get('customBackground');
        // Attach success and error event handlers
        getRequest.onsuccess = function(event: any) {
          resolve(event.target.result);
        };
        getRequest.onerror = function(event: any) {
          console.error('An error occurred:', event);
          reject(event);
        };
      })
      .catch(error => {
        console.error('An error occurred:', error);
        reject(error);
      });
  });
 };
 function reloadSeqtaPages() {
  const result = browser.tabs.query({})
@@ -15,49 +70,70 @@ function reloadSeqtaPages() {
 }
 // Main message listener
-browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (response?: any) => void) => {
+browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse: any) => {
  switch (request.type) {
-    case 'reloadTabs':
+  case 'reloadTabs':
-      reloadSeqtaPages();
+    reloadSeqtaPages();
-      break;
+    break;
    case 'extensionPages':
      browser.tabs.query({}).then(function (tabs) {
        for (let tab of tabs) {
          if (tab.url?.includes('chrome-extension://')) {
            browser.tabs.sendMessage(tab.id!, request);
          }
        }
      });
      break;
    case 'currentTab':
      browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
        browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
          sendResponse(response);
        });
      });
      return true; // Keep message channel open for async response
    case 'githubTab':
      browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
      break;
    case 'setDefaultStorage':
      SetStorageValue(DefaultValues);
      break;
    case 'sendNews':
      fetchNews(request.source ?? 'australia', sendResponse);
      return true;
-    default:
+  case 'extensionPages':
-      console.log('Unknown request type');
+    browser.tabs.query({}).then(function (tabs) {
      for (let tab of tabs) {
        if (tab.url?.includes('chrome-extension://')) {
          browser.tabs.sendMessage(tab.id!, request);
        }
      }
    });
    break;
  case 'currentTab':
    browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
      browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
        sendResponse(response);
      });
    });
    return true;
  case 'githubTab':
    browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
    break;
  case 'setDefaultStorage':
    SetStorageValue(DefaultValues);
    break;
  case 'sendNews':
    const date = new Date();
    const from =
      date.getFullYear() +
      '-' +
      (date.getMonth() + 1) +
      '-' +
      (date.getDate() - 5);
    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
    GetNews(sendResponse, url);
    return true;
  default:
    console.log('Unknown request type');
  }
 });
 function GetNews(sendResponse: any, url: string) {
  fetch(url)
    .then((result) => result.json())
    .then((response) => {
      if (response.code == 'rateLimited') {
        GetNews(sendResponse, url += '%00');
      } else {
        sendResponse({ news: response });
      }
    });
 }
 const DefaultValues: SettingsState = {
  onoff: true,
  animatedbk: true,
@@ -144,8 +220,6 @@ const DefaultValues: SettingsState = {
    },
  ],
  customshortcuts: [],
  lettergrade: false,
  newsSource: 'australia',
 };
 function SetStorageValue(object: any) {
@@ -1,107 +0,0 @@
 import Parser from 'rss-parser';
 const fetchAustraliaNews = async (url: string, sendResponse: any) => {
  fetch(url)
    .then((result) => result.json())
    .then((response) => {
      if (response.code == 'rateLimited') {
        fetchAustraliaNews(url += '%00', sendResponse);
      } else {
        sendResponse({ news: response });
      }
    });
 };
 const rssFeedsByCountry: Record<string, string[]> = {
  usa: [
    "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
    "https://www.huffpost.com/section/front-page/feed",
    "https://www.npr.org/rss/rss.php",
  ],
  taiwan: [
    "https://focustaiwan.tw/rss",
    "https://www.taipeitimes.com/rss/all.xml",
    "https://international.thenewslens.com/rss",
  ],
  hong_kong: [
    "https://news.rthk.hk/rthk/en/rss.htm",
    "https://www.scmp.com/rss/91/feed",
  ],
  panama: [
    "http://www.panama-guide.com/backend.php",
  ],
  canada: [
    "https://www.cbc.ca/cmlink/rss-topstories",
    "https://www.theglobeandmail.com/?service=rss",
  ],
  singapore: [
    "https://www.straitstimes.com/news/singapore/rss.xml",
    "https://www.channelnewsasia.com/rssfeeds/8395986",
  ],
  uk: [
    "http://feeds.bbci.co.uk/news/rss.xml",
    "https://www.theguardian.com/uk/rss",
  ],
  japan: [
    "https://www.japantimes.co.jp/feed/topstories.xml",
    "https://www3.nhk.or.jp/nhkworld/en/news/feeds/",
  ],
  netherlands: [
    "https://www.dutchnews.nl/feed/",
    "http://feeds.nos.nl/nosnieuwsalgemeen",
  ],
 };
 export async function fetchNews(source: string, sendResponse: any) {
  const parser = new Parser();
  let feeds: string[];
  if (source === "australia") {
    const date = new Date();
    const from =
      date.getFullYear() +
      '-' +
      (date.getMonth() + 1) +
      '-' +
      (date.getDate() - 5);
    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
    fetchAustraliaNews(url, sendResponse);
    return;
  }
  if (rssFeedsByCountry[source.toLowerCase()]) {
    // If the source is a country, fetch from predefined feeds
    feeds = rssFeedsByCountry[source.toLowerCase()];
  } else if (source.startsWith("http")) {
    // If the source is a URL, use it directly
    feeds = [source];
  } else {
    throw new Error("Invalid source. Provide a country code or a valid RSS feed URL.");
  }
  const articlesPromises = feeds.map(async (feedUrl) => {
    try {
      const response = await fetch(feedUrl);
      const feedString = await response.text();
      const feed = await parser.parseString(feedString);
      return feed.items.map((item) => ({
        title: item.title || "",
        description: item.contentSnippet || "",
        url: item.link || "",
        urlToImage: null,
      }));
    } catch (error) {
      console.error(`Failed to fetch RSS feed: ${feedUrl}`, error);
      return [];
    }
  });
  const articlesArray = await Promise.all(articlesPromises);
  const articles = articlesArray.flat();
  sendResponse({ news: { articles } });
 }
@@ -1,4 +1,5 @@
@use "sass:meta";
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
@include meta.load-css("injected/sidebar-animation.scss");
@@ -11,16 +12,10 @@
  --auto-background: var(--better-pale, var(--background-secondary)) !important;
  font-family: Rubik, sans-serif !important;
 }
 .hidden {
  display: none;
 }
 button.uiButton.timetable-zoom.iconFamily,
 .iconFamily {
  font-family: "IconFamily" !important;
 }
 body,
 .legacy-root input,
 .legacy-root textarea,
@@ -126,7 +121,6 @@ html {
 .modaliser-container {
  backdrop-filter: none !important;
  pointer-events: none !important;
 }
 .connectedNotificationsWrapper > div > button > svg > g {
@@ -209,13 +203,7 @@ html {
 .cke_panel {
  border-radius: 16px !important;
  margin-top: 8px !important;
-  background: var(--background-primary) !important;
+  background: unset;
  border: var(--background-secondary) !important;
  overflow: clip;
  iframe {
    background: transparent !important;
  }
 }
 .legacy-root button:active,
@@ -235,10 +223,6 @@ html {
  }
 }
 .timetable-zoom {
  font-size: 14px !important;
 }
 #main > .dashboard {
  grid-template-columns: repeat(autofit, minmax(200px, 400px)) !important;
  background: unset;
@@ -260,23 +244,8 @@ html {
      color: var(--text-primary);
    }
-    .ais-btnSearch {
+    .ais-btnSearch .material-icons {
-      transition: background 200ms, color 200ms, box-shadow 200ms;
+      font-size: 18px !important;
      &:hover {
        background: rgba(0, 0, 0, 0.2) !important;
        color: var(--text-primary) !important;
        box-shadow: unset !important;
      }
      .material-icons {
        font-size: 0px !important;
        font-family: Rubik, sans-serif !important;
        &::before {
          font-size: 18px !important;
          content: 'Search' !important;
        }
      }
    }
  }
@@ -490,10 +459,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
 .content [autocomplete="off"] {
  background: var(--background-primary) !important;
 }
 .coneqtMessage .body .wrapper .iframeWrapper {
  background: var(--background-primary) !important;
  border-radius: 16px;
 }
 .MessageList__MessageList___3DxoC .footer {
  background: var(--background-secondary) !important;
 }
@@ -520,24 +485,9 @@ ol:has(.MessageList__avatar___2wxyb svg) {
 }
 .singleSelect {
  border-radius: 16px !important;
-
+  padding: 4px !important;
-  &[style*="absolute"] {
+  padding-left: 12px !important;
-    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
    padding: 0 2px !important;
    outline: 2px solid rgba(0, 0, 0, 0.01) !important;
  }
  > li {
    border-radius: 12px !important;
    transition: background 150ms;
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    border-bottom: unset !important;
    &:hover {
      background: rgba(0, 0, 0, 0.1) !important;
    }
  }
 }
 .quickbar .actions a > svg {
  scale: 0.95;
@@ -590,42 +540,29 @@ ol:has(.MessageList__avatar___2wxyb svg) {
  clip-path: polygon(50% 40%, 0 100%, 100% 100%);
  border-bottom-color: transparent !important;
 }
-#main > .timetablepage > .quickbar {
+#main > .timetablepage > .quickbar.below::before {
-  &.below::before {
+  top: -23px;
-    top: -23px;
+  background-color: inherit;
-    background-color: inherit;
+  clip-path: polygon(50% 40%, 0 100%, 100% 100%);
-    clip-path: polygon(50% 40%, 0 100%, 100% 100%);
+  border-bottom-color: transparent !important;
-    border-bottom-color: transparent !important;
+}
-  }
+#main > .timetablepage > .quickbar.above::after {
-
+  content: "";
-  &.above[data-yiq="light"]::after {
+  position: absolute;
-    background-color: rgba(0, 0, 0, 0.2);
+  bottom: -23px;
-  }
+  z-index: 2;
-
+  left: 50%;
-  &.above[data-yiq="dark"]::after {
+  margin: 0 0 0 -12px;
-    background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
-  }
+  clip-path: polygon(50% 40%, 0 0, 100% 0);
-  
+  border: 12px solid rgba(255, 255, 255, 0);
-  &.above::after {
+  border-top-color: transparent;
-    content: "";
+}
-    position: absolute;
+#main > .timetablepage > .quickbar.above::before {
-    bottom: -24px;
+  border-bottom-color: transparent !important;
-    z-index: 0;
+  bottom: -23px !important;
-    left: 50%;
+  background-color: inherit;
-    margin: 0 0 0 -12px;
+  clip-path: polygon(50% 40%, 0 0, 100% 0);
    clip-path: polygon(50% 40%, 0 0, 100% 0);
    border: 12px solid rgba(255, 255, 255, 0);
    border-top-color: transparent;
  }
  &.above::before {
    border-bottom-color: transparent !important;
    border-top-color: transparent !important;
    bottom: -24px !important;
    z-index: -1 !important;
    background-color: inherit;
    clip-path: polygon(50% 40%, 0 0, 100% 0);
  }
 }
 #main .timetablepage .actions a,
 #main .timetablepage .actions button {
@@ -688,17 +625,9 @@ td.colourBar {
 #container #content .uiButton {
  border-radius: 16px;
 }
 .dark {
  #toolbar button.toggled,
  #toolbar button.depressed {
    background: #333333;
    color: white;
  }
 }
 #toolbar button.toggled,
 #toolbar button.depressed {
-  background: #f3f3f3;
+  background: var(--better-main);
  color: black;
 }
 ul.buttonChecklist {
  border-radius: 16px;
@@ -720,19 +649,14 @@ ul.buttonChecklist {
    border-radius: 8px !important;
  }
-  &:has(.item.checked) button:nth-child(1) {
+  &:has(.item.checked) button:nth-child(2) {
    background: var(--background-secondary) !important;
  }
-  &:has(.item.unchecked) button:nth-child(2) {
+  &:has(.item.unchecked) button:nth-child(1) {
    background: var(--background-secondary) !important;
  }
 }
 .dark ul.buttonChecklist {
  li.item.checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" viewBox="0 0 24 24"><path d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"/></svg>');
  }
 }
 #toolbar > span:has(input) {
  flex: 1 1 0%;
 }
@@ -1833,6 +1757,7 @@ ul {
 }
 .content > .wrapper .days tbody tr > td {
  overflow: hidden;
  height: 1440px !important;
 }
 .title {
  color: var(--text-primary) !important;
@@ -2042,11 +1967,6 @@ div.bar.flat {
  background: unset !important;
  gap: 0 8px;
 }
 .cke_toolbar:has(.cke_toolgroup) {
  .cke_combo {
    margin-right: 8px !important;
  }
 }
 .cke_toolbox > .cke_toolbar > .cke_toolgroup {
  margin: 0 !important;
 }
@@ -2063,50 +1983,23 @@ div.bar.flat {
 }
 .cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
 .cke_toolbox > .cke_toolbar .cke_button_on {
-  background-color: #d5d5d6 !important;
+  background-color: #797979 !important;
  &::after {
    background: black !important;
  }
 }
 .quicktable {
  border-radius: 12px;
 }
 .dark {
  .cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
  .cke_toolbox > .cke_toolbar .cke_button_on {
    background-color: #3d3d3e !important;
    &::after {
      background: rgb(207, 207, 207) !important;
    }
  }
 }
-.legacy-root input.singleSelect {
+.legacy-root input.singleSelect:focus {
-  padding-left: 8px;
+  background: var(--auto-background);
-
+  color: var(--text-primary) !important;
  &:focus {
    background: var(--auto-background);
    color: var(--text-primary) !important;
  }
 }
 button.buttonMenu.depressed:hover {
  border-radius: 100px;
  border-bottom-left-radius: 100px !important;
  border-bottom-right-radius: 100px !important;
 }
 ul.buttonMenu {
  border-radius: 16px;
  padding: 0 !important;
 }
 ul.singleSelect,
 ul.buttonChecklist,
 ul.buttonMenu,
 ul.colourButtonOptions,
 ul.uiSplitButtonList,
 ul.buttonMenu,
 .contactFormPanel {
  background: var(--background-primary) !important;
  border: solid 4px var(--background-primary);
@@ -2756,15 +2649,11 @@ li.MessageList__unread___3imtO {
 }
 .calendar {
-  background: var(--background-primary) !important;
+  background: var(--better-main) !important;
-  color: var(--text-primary) !important;
+  color: var(--text-color) !important;
  border-radius: 16px !important;
  margin-top: 4px;
  &.container {
    box-shadow: -2px 2px 30px 0px rgba(0,0,0,0.3) !important;
  }
  table {
    background: transparent !important;
  }
@@ -3084,6 +2973,7 @@ li.MessageList__unread___3imtO {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  animation-fill-mode: forwards;
  transform-origin: center center;
 }
 .whatsnewHeader {
@@ -3,7 +3,6 @@ declare module '*.woff';
 declare module '*.scss';
 declare module '*.png';
 declare module '*.html';
 declare module '*.svelte';
 declare module "*.png?base64" {
  const value: string;
@@ -20,7 +20,7 @@
  let editor = $state<HTMLDivElement | null>(null)
  let view: EditorView | null = null;
  let editorTheme = new Compartment();
-  let { value, onChange, className } = $props<{value: string, onChange: (value: string) => void, className?: string}>()
+  let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
  function createEditorState(initialContents: string) {
      let extensions = [
@@ -91,4 +91,4 @@
  })
 </script>
-<div class={`rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900 ${className}`} bind:this={editor}></div>
+<div class="rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900" bind:this={editor}></div>
@@ -8,13 +8,6 @@ div:has(> #rbgcp-wrapper) {
      color: white !important;
    }
    #rbgcp-inputs-wrap #rbgcp-hex-input,
    #rbgcp-inputs-wrap #rbgcp-input {
      color: white !important;
      background-color: #37373b !important;
      border: none !important;
    }
    div:has(> #rbgcp-solid-btn),
    div:has(> #rbgcp-advanced-btn),
    #rbgcp-color-model-btn > div,
@@ -93,7 +93,7 @@ export default function Picker({
    <ColorPicker
      disableDarkMode={true}
      presets={presets}
-      hideInputs={customOnChange ? false : true}
+      hideInputs={true}
      value={customThemeColor ?? ""}
      onChange={(color: string) => {
        if (customOnChange) {
@@ -1,5 +1,9 @@
 <script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import type { Background } from './types';
  export let filteredBackgrounds: Background[];
  let dispatch = createEventDispatcher();
  let filters = $state({
@@ -9,9 +13,9 @@
    orientation: [] as string[]
  });
-  $effect(() => {
+  $: {
    dispatch('filter', filters);
-  });
+  }
  function toggleFilter(category: keyof typeof filters, value: string) {
    if (filters[category].includes(value)) {
@@ -38,11 +42,11 @@
    <h3 class="mb-2 font-medium">Type</h3>
    <div class="space-y-2">
      <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('image')} onchange={() => toggleFilter('type', 'image')}>
+        <input type="checkbox" checked={filters.type.includes('image')} on:change={() => toggleFilter('type', 'image')}>
        <span class="ml-2">Image</span>
      </label>
      <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('video')} onchange={() => toggleFilter('type', 'video')}>
+        <input type="checkbox" checked={filters.type.includes('video')} on:change={() => toggleFilter('type', 'video')}>
        <span class="ml-2">Video</span>
      </label>
    </div>
@@ -52,7 +56,7 @@
  <button 
    class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
-    onclick={clearFilters}
+    on:click={clearFilters}
  >
    Clear Filters
  </button>
@@ -1,6 +1,4 @@
 <script lang="ts">
  import type { Theme } from '@/interface/types/Theme'
  let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
  import { fade } from 'svelte/transition';
@@ -8,12 +6,12 @@
 <div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
  <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
-    <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
+    <div class="absolute z-10 mb-1 text-xl font-bold text-white bottom-1 left-3">
      {theme.name}
    </div>
-    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80'></div>
+    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent'></div>
    <div class='w-full'>
-      <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
+      <img src={theme.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
    </div>
  </div>
 </div>
@@ -54,7 +54,7 @@
 </script>
 <div 
-  class="flex fixed inset-0 z-50 justify-center items-end bg-black bg-opacity-70" 
+  class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" 
  onclick={(e) => {
    if (e.target === e.currentTarget) hideModal();
  }} 
@@ -79,12 +79,12 @@
      <h2 class="mb-4 text-2xl font-bold">
        {theme.name}
      </h2>
-      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
+      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover w-full mb-4 rounded-md" />
      <p class="mb-4 text-gray-700 dark:text-gray-300">
        {theme.description}
      </p>
      {#if currentThemes.includes(theme.id)}
-        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
          {#if installing}
            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -93,7 +93,7 @@
          <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
        </button>
      {:else}
-        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
          {#if installing}
            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -112,11 +112,11 @@
        {#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
          <button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
            <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border">
-              <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5">
+              <div class="absolute z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5 bottom-1 left-3">
                {relatedTheme.name}
              </div>
-              <div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80"></div>
+              <div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent"></div>
-              <img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
+              <img src={relatedTheme.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
            </div>
          </button>
        {/each}
@@ -98,7 +98,7 @@
 </script>
 <div
-  class="pt-5 mb-1 w-full"
+  class="w-full pt-5 mb-1"
  role="list"
  tabindex="-1"
  ondragover={handleDragOver}
@@ -106,9 +106,9 @@
  ondrop={handleDrop}
 >
  <div class="{isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50">
-    <div class="sticky top-5 w-full h-64 bg-white rounded-xl shadow-xl dark:bg-zinc-900 dark:text-white outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
+    <div class="sticky w-full h-64 bg-white shadow-xl dark:bg-zinc-900 top-5 dark:text-white rounded-xl outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
-      <div class="flex justify-center items-center h-full">
+      <div class="flex items-center justify-center h-full">
-        <div class="flex flex-col justify-center items-center">
+        <div class="flex flex-col items-center justify-center">
          <svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <g fill="currentColor">
              <path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
@@ -130,7 +130,7 @@
        >
          {#if isEditMode}
            <div
-              class="flex absolute top-2 right-2 z-20 place-items-center p-2 w-6 h-6 text-white bg-red-600 rounded-full opacity-100"
+              class="absolute z-20 flex w-6 h-6 p-2 text-white bg-red-600 rounded-full opacity-100 right-2 place-items-center top-2"
              onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
              role="button"
@@ -152,7 +152,7 @@
            </div>
            <div
-              class="flex absolute right-12 top-1/4 z-20 place-items-center p-2 w-8 h-8 text-center rounded-full opacity-0 transition-all -translate-y-1/2 text-white/80 bg-black/50 group-hover:opacity-100 group-hover:top-1/2"
+              class="absolute z-20 flex w-8 h-8 p-2 text-center transition-all -translate-y-1/2 rounded-full opacity-0 text-white/80 top-1/4 right-12 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2"
              onclick={(event) => { event.stopPropagation(); handleShareTheme(theme) }}
              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleShareTheme(theme) }}
              role="button"
@@ -167,7 +167,7 @@
              <img
                src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
                alt={theme.name}
-                class="object-cover absolute inset-0 z-0 w-full h-full pointer-events-none"
+                class="absolute inset-0 z-0 object-cover w-full h-full pointer-events-none"
              />
            {/if}
            {#if !theme.hideThemeName}
@@ -179,7 +179,7 @@
    {/if}
    {#if tempTheme}
-      <div class="flex justify-center place-items-center w-full bg-gray-200 rounded-xl animate-pulse dark:bg-zinc-700/50 aspect-theme">
+      <div class="flex justify-center w-full bg-gray-200 rounded-xl dark:bg-zinc-700/50 place-items-center aspect-theme animate-pulse">
        <svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -193,7 +193,7 @@
    <button
      onclick={() => OpenStorePage()}
-      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
    >
      <span class="text-xl font-IconFamily">&#xecc5;</span>
      <span class="ml-2">Theme Store</span>
@@ -201,7 +201,7 @@
    <button
      onclick={() => { OpenThemeCreator(); closeExtensionPopup() }}
-      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
    >
      <span class="text-xl font-IconFamily">&#xec60;</span>
      <span class="ml-2">Create your own</span>
@@ -48,9 +48,5 @@ input {
 .cm-editor {
  width: 100%;
  min-height: 100px;
-  height: inherit;
+  max-height: 400px;
 }
 .editorHeight {
  height: calc(100vh - 58px);
 }
@@ -61,8 +61,8 @@
 </script>
 <div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
-  <div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
+  <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
-    <div class="grid place-items-center border-b border-b-zinc-200/40">
+    <div class="grid border-b border-b-zinc-200/40 place-items-center">
      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
      <!-- svelte-ignore a11y_click_events_have_key_events -->
      <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
@@ -71,8 +71,8 @@
      <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
      {#if !standalone}
-        <button onclick={openChangelog} class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
+        <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
-        <button onclick={openAbout} class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
+        <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
      {/if}
    </div>
@@ -15,7 +15,7 @@
 </script>
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
-<div class="flex justify-between items-center px-4 py-3">
+<div class="flex items-center justify-between px-4 py-3">
  <div class="pr-4">
    <h2 class="text-sm font-bold">{title}</h2>
    <p class="text-xs">{description}</p>
@@ -28,7 +28,6 @@
 <div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
  {#each [
    {
      title: "Transparency Effects",
      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
@@ -108,16 +107,6 @@
        onChange: (isOn: boolean) => settingsState.assessmentsAverage = isOn
      }
    },
    {
      title: "Letter Grade Averages",
      description: "Shows the letter grade instead of the percentage in subject averages.",
      id: 8,
      Component: Switch,
      props: {
        state: $settingsState.lettergrade,
        onChange: (isOn: boolean) => settingsState.lettergrade = isOn
      }
    },
    {
      title: "Lesson Alerts",
      description: "Sends a native browser notification ~5 minutes prior to lessons.",
@@ -157,32 +146,10 @@
        ]
      }
    },
    {
      title: "News Feed Source",
      description: "Choose sources of your news feed.",
      id: 11,
      Component: Select,
      props: {
        state: $settingsState.newsSource,
        onChange: (value: string) => settingsState.newsSource = value,
        options: [
          { value: "australia", label: "Australia" },
          { value: "usa", label: "USA" },
          { value: "taiwan", label: "Taiwan" },
          { value: "hong_kong", label: "Hong Kong" },
          { value: "panama", label: "Panama" },
          { value: "canada", label: "Canada" },
          { value: "singapore", label: "Singapore" },
          { value: "uk", label: "UK" },
          { value: "japan", label: "Japan" },
          { value: "netherlands", label: "Netherlands" }
        ]
      }
    },
    {
      title: "BetterSEQTA+",
      description: "Enables BetterSEQTA+ features",
-      id: 12,
+      id: 11,
      Component: Switch,
      props: {
        state: $settingsState.onoff,
@@ -203,7 +170,7 @@
        <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
      </div>
    </div>
-    <div class="flex justify-between items-center px-4 py-3">
+    <div class="flex items-center justify-between px-4 py-3">
      <div class="pr-4">
        <h2 class="text-sm font-bold">Sensitive Hider</h2>
        <p class="text-xs">Replace sensitive content with mock data</p>
@@ -216,4 +183,4 @@
      </div>
    </div>
  {/if}
-</div>
+</div>
@@ -27,7 +27,6 @@
  import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
  import { themeUpdates } from '../hooks/ThemeUpdates'
  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
  import { setTheme } from '@/seqta/ui/themes/setTheme'
  const { themeID } = $props<{ themeID: string }>()
  let theme = $state<LoadedCustomTheme>({
@@ -46,12 +45,6 @@
  })
  let closedAccordions = $state<string[]>([])
  let themeLoaded = $state(false);
  let codeEditorFullscreen = $state(false);
  function toggleCodeEditorFullscreen(e: MouseEvent) {
    e.preventDefault();
    codeEditorFullscreen = !codeEditorFullscreen;
  }
  function toggleAccordion(title: string) {
    if (closedAccordions.includes(title)) {
@@ -62,7 +55,7 @@
  }
  onMount(async () => {
-    await disableTheme();
+    disableTheme();
    if (themeID) {
      const tempTheme = await getTheme(themeID)
@@ -118,7 +111,6 @@
    ClearThemePreview();
    saveTheme(themeClone);
    setTheme(themeClone.id);
    themeUpdates.triggerUpdate();
    CloseThemeCreator();
  }
@@ -174,14 +166,7 @@
        </div>
        {#if item.direction === 'vertical'}
-          <div class="flex justify-center items-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
+          <div class="flex items-center justify-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
            {#if item.type === 'codeEditor'}
              <!-- Fullscreen toggle button -->
              <button onclick={toggleCodeEditorFullscreen} class="mr-2 text-lg font-IconFamily">
                {'\uebdb'}
              </button>
            {/if}
            <span class='font-IconFamily transition-transform duration-300 {closedAccordions.includes(item.title) ? 'rotate-180' : ''}'>{'\ue9e6'}</span>
          </div>
        {/if}
@@ -200,16 +185,13 @@
              <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
            {/key}
          {:else if item.type === 'codeEditor'}
-            {#if !codeEditorFullscreen}
+            {#key themeLoaded}
-              {#key themeLoaded}
+              <CodeEditor {...(item.props as CodeEditorProps)} />
-                <!-- Only render inline if not fullscreen -->
+            {/key}
                <CodeEditor className="h-[400px]" {...(item.props as CodeEditorProps)} />
              {/key}
            {/if}
          {:else if item.type === 'imageUpload'}
            {#each theme.CustomImages as image (image.id)}
-              <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
+              <div class="flex items-center h-16 gap-2 px-2 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
-                <div class="h-full">
+                <div class="h-full ">
                  <img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
                </div>
                <input
@@ -225,14 +207,14 @@
              </div>
            {/each}
-            <div class="flex overflow-hidden relative gap-1 justify-center place-items-center w-full h-8 rounded-lg transition bg-zinc-200 dark:bg-zinc-700">
+            <div class="relative flex justify-center w-full h-8 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-200 dark:bg-zinc-700">
              <span class='font-IconFamily'>{'\uec60'}</span>
              <span class='dark:text-white'>Add image</span>
              <input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
            </div>
          {:else if item.type === 'lightDarkToggle'}
            <button
-              class="overflow-hidden relative px-4 py-1 text-xl font-medium rounded-lg transition bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
+              class="relative px-4 py-1 overflow-hidden text-xl font-medium transition rounded-lg bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
              onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
            >
              {#key (item.props as LightDarkToggleProps).state}
@@ -254,23 +236,10 @@
 {/snippet}
 <div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
-  {#if codeEditorFullscreen}
+  <div class='flex flex-col w-full min-h-screen p-2 bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
    <div class="absolute inset-0 z-[10000] bg-white dark:bg-zinc-900 dark:text-white">
      <div class="sticky top-0 px-2 h-screen">
        <div class="flex justify-between items-center my-4">
          <h2 class="text-xl font-bold">Custom CSS</h2>
          <button onclick={toggleCodeEditorFullscreen} class="pr-14 text-xl font-IconFamily">{'\uec06'}</button>
        </div>
        <CodeEditor className="editorHeight" value={theme.CustomCSS} onChange={(value: string) => { theme = { ...theme, CustomCSS: value } }} />
      </div>
    </div>
  {/if}
  <div class='flex relative flex-col p-2 w-full min-h-screen bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
    <h1 class='text-xl font-semibold'>Theme Creator</h1>
    <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
-      <span class='pr-0.5 no-underline font-IconFamily'>{'\ueb44'}</span>
+      <span class='no-underline font-IconFamily pr-0.5'>{'\ueb44'}</span>
      <span class='underline'>
        Need help? Check out the docs!
      </span>
@@ -285,7 +254,7 @@
        type='text'
        placeholder='What is your theme called?'
        bind:value={theme.name}
-        class='p-2 mb-4 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600' />
+        class='w-full p-2 mb-4 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600' />
    </div>
    <div>
@@ -294,23 +263,23 @@
        id='themeDescription'
        placeholder="Don't worry, this one's optional!"
        bind:value={theme.description}
-        class='p-2 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
+        class='w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
    </div>
    <Divider />
-    <div class="flex overflow-hidden relative gap-1 justify-center place-items-center w-full rounded-lg transition aspect-theme group bg-zinc-200 dark:bg-zinc-700">
+    <div class="relative flex justify-center w-full gap-1 overflow-hidden transition rounded-lg aspect-theme group place-items-center bg-zinc-200 dark:bg-zinc-700">
      <div class={`transition pointer-events-none z-30 font-IconFamily ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>
        {'\uec60'}
      </div>
      <span class={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
      <input type="file" accept='image/*' onchange={onCoverImageUpload} class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer" />
      {#if !theme.hideThemeName && theme.coverImage}
-        <div class="absolute z-30 opacity-100 transition-opacity pointer-events-none group-hover:opacity-0">{theme.name}</div>
+        <div class="absolute z-30 transition-opacity opacity-100 pointer-events-none group-hover:opacity-0">{theme.name}</div>
      {/if}
      {#if theme.coverImage}
-        <div class="absolute z-20 w-full h-full opacity-0 transition-opacity pointer-events-none group-hover:opacity-100 bg-black/20"></div>
+        <div class="absolute z-20 w-full h-full transition-opacity opacity-0 pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-        <img src={theme.coverImageUrl} alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
+        <img src={theme.coverImageUrl} alt='Cover' class="absolute z-0 object-cover w-full h-full rounded" />
      {/if}
    </div>
@@ -1,9 +1,4 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const brave = createManifest({
+export const brave = createManifest(baseManifest, 'brave')
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'brave')
@@ -1,9 +1,4 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const chrome = createManifest({
+export const chrome = createManifest(baseManifest, 'chrome')
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'chrome')
@@ -1,9 +1,4 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const edge = createManifest({
+export const edge = createManifest(baseManifest, 'edge')
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'edge')
@@ -4,8 +4,6 @@ import pkg from '../../package.json'
 const updatedFirefoxManifest = {
  ...baseManifest,
  version: pkg.version,
  description: pkg.description,
  background: {
    scripts: [baseManifest.background.service_worker],
  },
@@ -1,6 +1,8 @@
 {
  "manifest_version": 3,
  "name": "BetterSEQTA+",
  "version": "3.4.2",
  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
  "icons": {
    "32": "resources/icons/icon-32.png",
    "48": "resources/icons/icon-48.png",
@@ -1,9 +1,4 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
-export const opera = createManifest({
+export const opera = createManifest(baseManifest, 'opera')
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
 }, 'opera')
@@ -1,11 +1,8 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
 const updatedSafariManifest = {
  ...baseManifest,
  version: pkg.version,
  description: pkg.description,
  browser_specific_settings: {
    safari: {
      strict_min_version: '15.4',
@@ -1,204 +0,0 @@
 class ReactFiber {
  constructor(selector, options = {}) {
    this.selector = selector;
    this.debug = options.debug || false;
    this.nodes = [...document.querySelectorAll(selector)]; // Support multiple elements
    this.fibers = this.nodes.map(node => this.getFiberNode(node));
    this.components = this.fibers.map(fiber => this.getOwnerComponent(fiber));
    if (this.debug) {
      console.log("Selected Nodes:", this.nodes);
      console.log("🔍 Found Fibers:", this.fibers);
      console.log("🛠 Found Components:", this.components);
    }
  }
  static find(selector, options = {}) {
    return new ReactFiber(selector, options);
  }
  getFiberNode(node) {
    if (!node) return null;
    const fiberKey = Object.getOwnPropertyNames(node).find(name =>
      name.startsWith('__reactFiber') || name.startsWith('__reactInternalInstance')
    );
    return fiberKey ? node[fiberKey] : null;
  }
  getOwnerComponent(fiberNode) {
    let current = fiberNode;
    while (current) {
      if (current.stateNode && (current.stateNode.setState || current.stateNode.forceUpdate)) {
        return current.stateNode;
      }
      current = current.return;
    }
    return null;
  }
  getState(key) {
    if (!this.components.length) return null;
    const state = this.components[0]?.state || null;
    if (key === undefined) {
      return state;
    } else if (typeof key === 'string') {
      return state?.[key];
    } else if (Array.isArray(key)) {
      const filteredState = {};
      for (const k of key) {
        if (state && Object.hasOwn(state, k)) {
          filteredState[k] = state[k];
        }
      }
      return filteredState;
    }
    return null;
  }
  setState(update) {
    this.components.forEach(component => {
      if (component?.setState) {
        if (typeof update === 'function') {
          // Functional update
          component.setState(prevState => {
            const newState = update(prevState);
            if (this.debug) console.log("✅ Updated State (Functional):", newState);
            return newState;
          });
        } else {
          // Object update (merge with existing state)
          component.setState(prevState => {
            const newState = {
              ...prevState,
              ...update
            };
            if (this.debug) console.log("✅ Updated State (Object Merge):", newState);
            return newState;
          });
        }
      }
    });
    return this;
  }
  getProp(propName) {
    if (!this.fibers.length) return null;
    if (propName === undefined) {
      return this.fibers[0]?.memoizedProps;
    }
    return this.fibers[0]?.memoizedProps?.[propName];
  }
  setProp(propName) {
    this.fibers.forEach(fiber => {
      if (fiber?.memoizedProps) {
        fiber.memoizedProps[propName] = value;
      }
    });
    return this; // Enable chaining
  }
  forceUpdate() {
    this.components.forEach(component => {
      if (component?.forceUpdate) {
        component.forceUpdate();
        if (this.debug) console.log("🔄 Forced React Re-render");
      }
    });
    return this; // Enable chaining
  }
 }
 function makeSerializable(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(item => makeSerializable(item));
  }
  const serializableObj = {};
  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      let value = obj[key];
      if (typeof value === 'function') {
        value = '[Function]';
      } else if (value instanceof HTMLElement) {
        value = {
          type: 'HTMLElement',
          id: value.id,
          tagName: value.tagName
        }; // Replace DOM node with ID/tag info
      } else if (typeof value === 'symbol') {
        value = value.toString();
      } else if (typeof value === 'object' && value !== null) {
        value = makeSerializable(value);
      }
      serializableObj[key] = value;
    }
  }
  return serializableObj;
 }
 window.addEventListener('message', (event) => {
  if (event.data.type === "reactFiberRequest") {
    const {
      selector,
      action,
      payload,
      debug,
      messageId
    } = event.data;
    const fiberInstance = ReactFiber.find(selector, {
      debug
    });
    let response;
    switch (action) {
      case "getState":
        response = fiberInstance.getState(payload.key);
        break;
      case "setState":
        // Handle both function and object updates
        if (payload.updateFn) {
          const updateFn = eval(`(${payload.updateFn})`);
          fiberInstance.setState(updateFn);
        } else {
          fiberInstance.setState(payload.updateObject);
        }
        response = {};
        break;
      case "getProp":
        response = fiberInstance.getProp(payload.propName);
        break;
      case "setProp":
        fiberInstance.setProp(payload.propName, payload.value);
        response = {};
        break;
      case "forceUpdate":
        fiberInstance.forceUpdate();
        response = {};
        break;
      default:
        console.warn(`[pageState] Unknown action: ${action}`);
        response = null;
    }
    if (response !== null && typeof response === 'object') {
      response = makeSerializable(response);
    }
    window.postMessage({
      type: "reactFiberResponse",
      response,
      messageId,
    }, "*");
  }
 });
@@ -55,7 +55,7 @@ export function OpenThemeCreator(themeID: string = "") {
  const mouseMoveHandler = (e: MouseEvent) => {
    if (!isDragging) return
    const windowWidth = window.innerWidth
-    const newWidth = Math.max(310, windowWidth - e.clientX)
+    const newWidth = Math.min(Math.max(310, windowWidth - e.clientX), 600)
    themeCreatorDiv.style.width = `${newWidth}px`
    mainContent.style.width = `calc(100% - ${newWidth}px)`
    resizeBar.style.right = `${newWidth - 2.5}px`
@@ -22,20 +22,8 @@ type ThemeContent = {
 };
 function stripBase64Prefix(base64String: string): string {
-  if (!base64String) return '';
+  const prefixRegex = /^data:image\/\w+;base64,/;
-  
+  return base64String.replace(prefixRegex, '');
  const prefixRegex = /^data:[^;]+;base64,/;
  try {
    // Check if the string actually has a base64 prefix
    if (prefixRegex.test(base64String)) {
      return base64String.replace(prefixRegex, '');
    }
    // If no prefix found, return the original string (assuming it's already base64)
    return base64String;
  } catch(err) {
    console.error('Error stripping base64 prefix:', err);
    return '';
  }
 }
 export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
@@ -49,12 +37,11 @@ export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
 export const InstallTheme = async (themeData: ThemeContent) => {
  const strippedCoverImage = stripBase64Prefix(themeData.coverImage);
  const coverImageBlob = base64ToBlob(strippedCoverImage);
  const images = themeData.images.map((image) => ({
    ...image,
-    blob: base64ToBlob(stripBase64Prefix(image.data))
+    blob: base64ToBlob(image.data)
  }));
  let availableThemes = await localforage.getItem('customThemes') as string[];
@@ -28,12 +28,7 @@ const shareTheme = async (themeID: string) => {
    // Helper function to convert Blob to Base64
    const blobToBase64 = (blob: Blob) => new Promise<string>((resolve, reject) => {
      const reader = new FileReader();
-      reader.onloadend = () => {
+      reader.onloadend = () => resolve(reader.result as string);
        const base64String = reader.result as string;
        // Extract just the base64 data without the data URL prefix
        const base64Data = base64String.split(',')[1];
        resolve(base64Data);
      };
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
@@ -1,84 +0,0 @@
 class ReactFiber {
  private selector: string;
  private debug: boolean;
  private messageIdCounter: number = 0; // Counter for unique message IDs
  constructor(selector: string, options: {
    debug ? : boolean
  } = {}) {
    this.selector = selector;
    this.debug = options.debug || false;
  }
  static find(selector: string, options: {
    debug ? : boolean
  } = {}) {
    return new ReactFiber(selector, options);
  }
  private async sendMessage(action: string, payload: any = {}): Promise < any > {
    return new Promise((resolve, _) => {
      const messageId = this.messageIdCounter++;
      const message = {
        type: "reactFiberRequest",
        selector: this.selector,
        action,
        payload,
        debug: this.debug,
        messageId,
      };
      const listener = (response: any) => {
        if (response.data?.type === 'reactFiberResponse' && response.data?.messageId === messageId) {
          if (this.debug) {
            console.log("Content Received Response:", response.data.response);
          }
          resolve(response.data.response);
          window.removeEventListener("message", listener)
        }
      };
      window.addEventListener('message', listener);
      window.postMessage(message, "*");
    });
  }
  async getState(key ? : string | string[]): Promise < any > {
    return this.sendMessage("getState", {
      key
    });
  }
  async setState(update: any | ((prevState: any) => any)): Promise < ReactFiber > {
    const updateFnString = typeof update === 'function' ? update.toString() : null;
    const updateObject = typeof update !== 'function' ? update : null;
    await this.sendMessage("setState", {
      updateFn: updateFnString,
      updateObject
    });
    return this;
  }
  async getProps(propName ? : string): Promise < any > {
    return this.sendMessage("getProp", {
      propName
    });
  }
  async setProp(propName: string, value: any): Promise < ReactFiber > {
    await this.sendMessage("setProp", {
      propName,
      value
    });
    return this;
  }
  async forceUpdate(): Promise < ReactFiber > {
    await this.sendMessage("forceUpdate");
    return this;
  }
 }
 export default ReactFiber;
@@ -1,48 +0,0 @@
 import { waitForElm } from "@/SEQTA";
 import ReactFiber from "../ReactFiber";
 const handleNotificationClick = async (target: HTMLElement) => {
  const notificationItem = target.closest('.notifications__item___2ErJN') as HTMLElement | null;
  if (!notificationItem) return;
  const buttonType = notificationItem.getAttribute('data-type');
  if (buttonType !== 'message') return;
  const notificationList = await ReactFiber.find('.notifications__list___rp2L2').getState();
  const buttonId = notificationItem.getAttribute('data-id');
  if (!buttonId) return;
  const matchingNotification = notificationList.storeState.notifications.items.find(
    (item: any) => item.notificationID === parseInt(buttonId)
  );
  await waitForElm('.Viewer__Viewer___32BH-', true, 20);
  // Select the specific direct message
  ReactFiber.find('.Viewer__Viewer___32BH-').setState({ selected: new Set([matchingNotification.message.messageID]) });
  // Close the notifications panel
  const notificationButton = document.querySelector('.notifications__notifications___3mmLY > button') as HTMLButtonElement | null;
  notificationButton?.click();
 };
 const clickListeners = [
  {
    selector: '.notifications__item___2ErJN',
    handler: handleNotificationClick,
  },
 ];
 const registerClickListeners = () => {  
  document.addEventListener('click', (e) => {
    const target = e.target as HTMLElement;
    clickListeners.forEach(({ selector, handler }) => {
      if (target.closest(selector)) {
        handler(target);
      }
    });
  });
 };
 export default registerClickListeners;
@@ -136,10 +136,11 @@ class EventManager {
  }
  private async checkElement(element: Element): Promise<void> {
    if (element.classList.contains('code')) console.log('Code Detected!');
    for (const [event, listeners] of this.listeners.entries()) {
      for (const { id, options, callback } of listeners) {
        if (this.matchesOptions(element, options)) {
-          callback(element);
+          await callback(element);
          if (options.once) {
            this.unregisterById(event, id);
          }
@@ -0,0 +1,127 @@
 import browser from 'webextension-polyfill';
 import base64ToBlob from './base64ToBlob';
 import { openDatabase, writeData } from '@/interface/hooks/BackgroundDataLoader';
 import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates';
 import { loadBackground } from '@/seqta/ui/ImageBackgrounds';
 const MIGRATION_STATE_KEY = 'background_migration_state';
 interface MigrationState {
  lastProcessedId: string | null;
  total: number;
  processed: number;
  completed: boolean;
 }
 export const migrateBackgrounds = async (): Promise<void> => {
  console.info('Migrating backgrounds...');
  const savedState = localStorage.getItem(MIGRATION_STATE_KEY);
  const migrationState: MigrationState = savedState 
    ? JSON.parse(savedState)
    : { lastProcessedId: null, total: 0, processed: 0, completed: false };
  if (migrationState.completed) {
    console.info('Migration already completed');
    return;
  }
  return new Promise((resolve, reject) => {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    const handleMessage = async (event: MessageEvent) => {
      if (event.source !== iframe.contentWindow) return;
      switch (event.data.type) {
        case 'GET_LAST_PROCESSED_ID':
          iframe.contentWindow?.postMessage({
            type: 'LAST_PROCESSED_ID',
            id: migrationState.lastProcessedId
          }, '*');
          break;
        case 'BACKGROUND_DATA':
          try {
            const { id, data, mediaType, total, processed, isSelected } = event.data.payload;
            const mimeType = mediaType === 'image' ? 'image/png' : 'video/mp4';
            const blob = base64ToBlob(data, mimeType);
            await storeBackground({
              id,
              blob,
              type: mediaType
            });
            if (isSelected) {
              localStorage.setItem('selectedBackground', id);
              await loadBackground();
            }
            migrationState.lastProcessedId = id;
            migrationState.total = total;
            migrationState.processed = processed;
            localStorage.setItem(MIGRATION_STATE_KEY, JSON.stringify(migrationState));
            console.log(`Migrated background: ${id} (${processed}/${total})`);
          } catch (error) {
            console.error('Error handling background data:', error);
          }
          break;
        case 'MIGRATION_COMPLETE':
          console.info('Migration completed successfully');
          migrationState.completed = true;
          localStorage.setItem(MIGRATION_STATE_KEY, JSON.stringify(migrationState));
          window.removeEventListener('message', handleMessage);
          iframe.remove();
          backgroundUpdates.triggerUpdate();
          resolve();
          break;
        case 'MIGRATION_ERROR':
          console.error('Migration failed:', event.data.error);
          window.removeEventListener('message', handleMessage);
          iframe.remove();
          reject(new Error(event.data.error));
          break;
      }
    };
    window.addEventListener('message', handleMessage);
    const startPinging = () => {
      const pingInterval = setInterval(() => {
        iframe.contentWindow?.postMessage({ type: 'PING' }, '*');
      }, 500);
      const messageHandler = (event: MessageEvent) => {
        if (event.source === iframe.contentWindow) {
          clearInterval(pingInterval);
          window.removeEventListener('message', messageHandler);
          iframe.contentWindow?.postMessage({ type: 'START_MIGRATION' }, '*');
        }
      };
      window.addEventListener('message', messageHandler);
    };
    iframe.src = browser.runtime.getURL('seqta/utils/migration/migrate.html');
    document.body.appendChild(iframe);
    startPinging();
  });
 };
 const storeBackground = async (data: {
  id: string;
  blob: Blob;
  type: 'image' | 'video';
 }): Promise<void> => {
  try {
    await openDatabase();
    await writeData(data.id, data.type, data.blob);
  } catch (error) {
    console.error('Error storing background:', error);
    throw error;
  }
 };
@@ -1,20 +1,12 @@
 import DOMPurify from 'dompurify';
 export default function stringToHTML(str: string, styles = false) {
-  const parser = new DOMParser();
+  var parser = new DOMParser();
-
+  str = DOMPurify.sanitize(str, { ADD_ATTR: ['onclick'] });
-
+  var doc = parser.parseFromString(str, 'text/html');
  str = DOMPurify.sanitize(str, {
    ADD_ATTR: ['onclick'],
    ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|chrome-extension):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
  });
  const doc = parser.parseFromString(str, 'text/html');
  if (styles) {
    doc.body.style.cssText =
      'height: auto; overflow: scroll; margin: 0px; background: var(--background-primary);';
  }
  return doc.body;
 }
@@ -39,8 +39,6 @@ export interface SettingsState {
  devMode?: boolean;
  originalDarkMode?: boolean;
  assessmentsAverage?: boolean;
  lettergrade: boolean;
  newsSource?: string;
 }
 interface ToggleItem {
@@ -4,7 +4,6 @@ import { join, resolve } from 'path';
 import { updateManifestPlugin } from './lib/patchPackage';
 import { base64Loader } from './lib/base64loader';
 import type { BuildTarget } from './lib/types';
 import ClosePlugin from './lib/closePlugin';
 import react from '@vitejs/plugin-react';
 import million from "million/compiler";
@@ -26,7 +25,7 @@ const targets: BuildTarget[] = [
 const mode = process.env.MODE || 'chrome';
-export default defineConfig(({ command }) => ({
+export default defineConfig({
  plugins: [
    base64Loader,
    react(),
@@ -39,8 +38,7 @@ export default defineConfig(({ command }) => ({
      manifest: targets.find(t => t.browser === mode.toLowerCase())?.manifest ?? chrome.manifest,
      browser: mode.toLowerCase() === "firefox" ? "firefox" : "chrome"
    }),
-    updateManifestPlugin(),
+    updateManifestPlugin()
    ...(command === 'build' ? [ClosePlugin()] : [])
  ],
  root: resolve(__dirname, './src'),
  resolve: {
@@ -66,9 +64,6 @@ export default defineConfig(({ command }) => ({
  optimizeDeps: {
    include: ['@babel/runtime/helpers/extends', '@babel/runtime/helpers/interopRequireDefault'],
  },
  legacy: {
    skipWebSocketTokenCheck: true,
  },
  build: {
    outDir: resolve(__dirname, 'dist', mode),
    emptyOutDir: false,
@@ -76,9 +71,8 @@ export default defineConfig(({ command }) => ({
    rollupOptions: {
      input: {
        settings: join(__dirname, 'src', 'interface', 'index.html'),
-        migration: join(__dirname, 'src', 'seqta', 'utils', 'migration', 'migrate.html'),
+        migration: join(__dirname, 'src', 'seqta', 'utils', 'migration', 'migrate.html')
        pageState: join(__dirname, 'src', 'pageState.js'),
      }
    }
  }
-}));
+});
Author	SHA1	Message	Date
SethBurkart123	51c265400c	feat(app): improved input handling + better UI	2024-12-11 11:44:56 +11:00
SethBurkart123	6209b65afe	feat(app): add icons to electron	2024-12-05 18:11:13 +11:00
SethBurkart123	bb388ab000	feat: electron building	2024-12-05 18:09:06 +11:00