feat(app): improved input handling + better UI

Add mention for grades calc in readme

.github/workflows/mvp.yml

@@ -1,73 +1,38 @@
-name: MVP - make, version & publish
+name: NodeJS Build
 
 on:
   push:
-    branches:
-      - main
-  workflow_dispatch: # This line adds manual triggering from the GitHub UI
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
 
 jobs:
-  make_version_publish:
-    name: Make, Version & Publish
+  build:
     runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v4
 
-      - name: Setup Node 20.x
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
       with:
-          node-version: 20.x
+        node-version: ${{ matrix.node-version }}
 
-      - name: Install bun & Deps
+    - name: Build
       run: |
-          npm install bun -g
-          bun install
+        npm install --legacy-peer-deps
+        npm run build
 
-      - name: 'Build - all browsers'
-        id: buildProject
-        run: MODE=chrome vite build && MODE=firefox vite build
+    - name: Zip dist folder
+      run: |
+        zip -r dist.zip dist
 
-      - name: '[ V E R S I O N ] : Create or Update Release Pull Request - Version Changes'
-        id: changesets
-        uses: changesets/action@v1
+    - name: Upload artifact
+      uses: actions/upload-artifact@v4
       with:
-          version: bun run version
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: 'Get current version info from package.json'
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        id: package
-        run: |
-          echo "::set-output name=PACKAGE_NAME::$(jq -r .name package.json)"
-          echo "::set-output name=PACKAGE_VERSION::$(jq -r .version package.json)"
-        working-directory: ${{ github.workspace }}
-
-      - name: 'Check if a git release already exists for current version'
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        id: checkRelease
-        run: |
-          TAG_NAME=${{ steps.package.outputs.PACKAGE_NAME }}@${{ steps.package.outputs.PACKAGE_VERSION }}
-          if gh release view $TAG_NAME &>/dev/null; then
-            echo "Release $TAG_NAME already exists."
-            echo "RELEASE_EXISTS=true" >> $GITHUB_ENV
-          else
-            echo "RELEASE_EXISTS=false" >> $GITHUB_ENV
-          fi
-
-      - name: 'Create Release Archive(s) - zip 🫰 it 🫰 up 🫰 !'
-        id: zip
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        run: bun run zip
-
-      - name: 'Create a git release w/ notes & release archive(s)'
-        id: gitRelease
-        if: steps.changesets.outputs.hasChangesets == 'false' && env.RELEASE_EXISTS != 'true'
-        run: bun run release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PACKAGE_NAME: ${{ steps.package.outputs.PACKAGE_NAME }}
-          PACKAGE_VERSION: ${{ steps.package.outputs.PACKAGE_VERSION }}
+        name: dist-zip
+        path: dist.zip

.github/workflows/testing.yml

@@ -1,38 +0,0 @@
-name: NodeJS Build
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-    - uses: actions/checkout@v4
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Build
-      run: |
-        npm install
-        npm run build
-
-    - name: Zip dist folder
-      run: |
-        zip -r dist.zip dist
-
-    - name: Upload artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: dist-zip
-        path: dist.zip

.gitignore

@@ -11,7 +11,6 @@ yarn.lock
 
 # Build
 extension.zip
-build/
 dist/
 betterseqtaplus-safari/
 
@@ -19,3 +18,6 @@ betterseqtaplus-safari/
 .vscode/
 
 **/.DS_Store
+
+# Electron
+electron-dist/

README.md

@@ -43,6 +43,7 @@
   - Easier Access Notices
   - Assessments
 - Options to remove certain items from the side menu
+- Grades calculator
 - Fully customisable themes and an offical theme store
 - Notification for next lesson (sent 5 minutes before end of the lesson)
 - Browser Support

electron/index.html

@@ -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> 

electron/main.js

@@ -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();
+    }
+}); 

package.json

@@ -1,8 +1,9 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "type": "module",
   "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",
@@ -14,7 +15,11 @@
     "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
     "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": {
@@ -31,10 +36,14 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/runtime": "^7.26.0",
     "@crxjs/vite-plugin": "2.0.0-beta.25",
     "@types/mime-types": "^2.1.4",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "cross-env": "^7.0.3",
+    "electron": "^33.2.1",
+    "electron-builder": "^25.1.8",
     "eslint": "^8.57.0",
     "glob": "^11.0.0",
     "mime-types": "^2.1.35",
@@ -67,10 +76,12 @@
     "@uiw/codemirror-theme-github": "^4.23.3",
     "@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",
@@ -79,7 +90,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "million": "^3.1.11",
-    "motion": "^10.18.0",
+    "motion": "^11.12.0",
     "postcss": "^8.4.45",
     "publish-browser-extension": "^2.2.1",
     "react": "17",
@@ -92,5 +103,48 @@
     "uuid": "^9.0.1",
     "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"
+    }
   }
 }

src/background.ts

@@ -167,6 +167,7 @@ const DefaultValues: SettingsState = {
   originalSelectedColor: '',
   DarkMode: true,
   animations: true,
+  assessmentsAverage: true,
   defaultPage: 'home',
   shortcuts: [
     {

src/css/documentload.scss

@@ -15,7 +15,7 @@
  * along with EvenBetterSEQTA.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import './injected/popup.scss';
+@use 'injected/popup.scss';
 
 html {
   background: #161616 !important;

src/css/injected.scss

@@ -1,9 +1,10 @@
+@use "sass:meta";
 @charset "UTF-8";
 @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
 
-@import "./injected/sidebar-animation.scss";
-@import "./injected/theme.scss";
-@import "./injected/transparency.scss";
+@include meta.load-css("injected/sidebar-animation.scss");
+@include meta.load-css("injected/theme.scss");
+@include meta.load-css("injected/transparency.scss");
 
 :root {
   background: var(--better-main) !important;
@@ -1110,9 +1111,9 @@ div > ol:has(.uiFileHandlerWrapper) {
   display: flex;
   flex-direction: column;
   background: var(--background-primary);
-  transition: 200ms;
   box-shadow: inset 0px 5px 20px 1px rgba(0, 0, 0, 0.3);
   padding-bottom: 25px;
+  transition: none;
   color: var(--text-primary);
 }
 .dummynotice {
@@ -1551,6 +1552,10 @@ iframe.userHTML {
 .Collapsible__Collapsible___3O8P3 > .Collapsible__header___-Afvq {
   background: none;
 }
+.Collapsible__Collapsible___3O8P3 > .Collapsible__content___2c6of.Collapsible__enterActive___3b2ow,
+.Collapsible__Collapsible___3O8P3 > .Collapsible__content___2c6of.Collapsible__exitActive___3rFL1 {
+  animation-timing-function: ease-out !important;
+}
 .AssessmentList__AssessmentList___1GdCl
   > .AssessmentList__searchFilter___3N70o
   + .AssessmentList__items___3LcmQ {
@@ -1928,6 +1933,7 @@ div.bar.flat {
   transition: background-color 0.5s ease-in-out;
   background-color: rgba(0, 0, 0, 0);
   transition-duration: 500ms !important;
+  z-index: 22 !important;
 }
 .uiSlidePane.shown > .pane {
   transform: translatey(0%) !important;
@@ -2188,44 +2194,55 @@ li.MessageList__unread___3imtO {
   overflow: hidden;
   width: 100%;
   padding: 0 !important;
-  margin: 0px auto 30px !important;
   background: var(--background-primary) !important;
   color: var(--text-primary);
   display: flex;
   flex-direction: row;
   -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3);
-}
-.articleimage {
-  width: 35%;
-  background-position: center;
-  background-size: cover;
-  min-height: 18em;
-  background-repeat: no-repeat;
-}
-.NewsArticle img {
-  width: 35%;
-}
-.ArticleText a {
+
+  &:hover {
+    .ArticleText a {
+      text-decoration: underline;
+    }
+  }
+  
+  .ArticleText a {
     padding: 10px 20px;
     margin: 0;
     font-weight: 800;
     font-size: 2em;
     background: none;
-}
-.NewsArticle:hover > .ArticleText a {
-  text-decoration: underline;
-}
-.ArticleText p {
+  }
+
+  .ArticleText p {
     padding: 10px 20px;
     margin: 0;
     font-size: 1.5em;
-}
-.ArticleText {
+  }
+
+  .ArticleText {
     display: flex;
     flex-direction: column;
     width: 65%;
     height: 100%;
+  }
+
+  .articleimage {
+    width: 35%;
+    background-position: center;
+    background-size: cover;
+    min-height: 18em;
+    background-repeat: no-repeat;
+  }
+}
+
+#news-container {
+  gap: 16px;
+
+  > h1 {
+    margin-bottom: 12px;
+  }
 }
 .editmenu {
   position: absolute;
@@ -2712,7 +2729,7 @@ li.MessageList__unread___3imtO {
   display: flex;
   flex-direction: column;
   color: var(--text-primary);
-  transition: 200ms;
+  transition: 200ms, background-color 0s;
   border-radius: 16px;
 }
 .dark .upcoming-items {
@@ -2989,7 +3006,6 @@ li.MessageList__unread___3imtO {
   width: 96%;
   display: flex;
   margin: 0 auto;
-  padding-bottom: 16px;
 }
 .whatsnewImg {
   margin: 8px auto;
@@ -3082,3 +3098,29 @@ li.MessageList__unread___3imtO {
   object-fit: cover;
   margin-bottom: 12px;
 }
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.loading {
+  &.upcoming-items,
+  &.day-container {
+    background: linear-gradient(90deg, 
+      var(--background-primary) 0%, 
+      var(--background-secondary) 50%, 
+      var(--background-primary) 100%
+    );
+    background-size: 1000px 100%;
+    animation: shimmer 2s infinite linear;
+  }
+
+  &.upcoming-items {
+    height: 35em;
+  }
+}

src/interface/components/ColourPicker.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte'
   import ColourPicker from './ColourPicker.tsx';
   import ReactAdapter from './utils/ReactAdapter.svelte';
-  import { animate, spring } from 'motion';
+  import { animate } from 'motion';
   import { delay } from '@/seqta/utils/delay.ts'
 
   const { hidePicker, standalone = false, savePresets = true, customOnChange = null, customState = null } = $props<{
@@ -23,13 +23,17 @@
     animate(
       content,
       { scale: [1, 0.4], opacity: [1, 0] },
-      { easing: spring({ stiffness: 400, damping: 30 }) }
+      {
+        type: 'spring',
+        stiffness: 400,
+        damping: 30
+      }
     );
 
     animate(
       background,
       { opacity: [1, 0] },
-      { easing: [0.4, 0, 0.2, 1] }
+      { ease: [0.4, 0, 0.2, 1] }
     );
 
     await delay(400);
@@ -43,13 +47,17 @@
     animate(
       background,
       { opacity: [0, 1] },
-      { duration: 0.3, easing: [0.4, 0, 0.2, 1] }
+      { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
     );
 
     animate(
       content,
       { scale: [0.4, 1], opacity: [0, 1] },
-      { easing: spring({ stiffness: 400, damping: 30 }) }
+      {
+        type: 'spring',
+        stiffness: 400,
+        damping: 30
+      }
     );
 
     const handleEscapeKey = (e: KeyboardEvent) => {

src/interface/components/MotionDiv.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { animate as motionAnimate, spring } from 'motion';
+  import { onMount, onDestroy } from 'svelte';
+  import { animate as motionAnimate } from 'motion';
 
   let { initial, animate, exit, transition, children, class: className } = $props<{ 
     initial?: any, 
@@ -12,11 +12,9 @@
   }>();
 
   let divElement: HTMLElement;
-  const dispatch = createEventDispatcher();
 
   const playAnimation = (keyframe: any) => {
     if (divElement && keyframe) {
-      let animationOptions = transition;
       let finalKeyframe = { ...keyframe };
 
       if (finalKeyframe.height === 'auto') {
@@ -36,16 +34,18 @@
         finalKeyframe.height = `${autoHeight}px`;
       }
 
-      if (!transition || transition.type === 'spring') {
-        const springConfig = transition?.config || { stiffness: 250, damping: 25 };
-        animationOptions = {
-          ...transition,
-          easing: spring(springConfig)
-        };
-      }
+      const defaultSpringConfig = { stiffness: 250, damping: 25 };
 
-      const animation = motionAnimate(divElement, finalKeyframe, animationOptions);
-      return animation.finished;
+      const animation = motionAnimate(
+        [divElement],
+        finalKeyframe,
+        {
+          type: 'spring',
+          stiffness: transition?.stiffness || defaultSpringConfig.stiffness,
+          damping: transition?.damping || defaultSpringConfig.damping
+        }
+      );
+      return animation;
     }
     return Promise.resolve();
   };
@@ -57,16 +57,12 @@
     } else if (animate) {
       await playAnimation(animate);
     }
-
-    dispatch('animationend');
   });
   
   $effect(() => {
     if (animate) {
       playAnimation(animate);
     }
-
-    dispatch('animationend');
   });
 
   onDestroy(async () => {

src/interface/components/Switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { animate, spring } from 'motion';
+  import { animate } from 'motion';
   import { standalone } from '../utils/standalone.svelte'
 
   let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
@@ -18,7 +18,9 @@
         x: enabled ? (standalone.standalone ? 24 : 20) : 0,
       },
       {
-        easing: spring(springParams),
+        type: 'spring',
+        stiffness: springParams.stiffness,
+        damping: springParams.damping,
       }
     );
   };

src/interface/components/store/ThemeModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Theme } from '@/interface/types/Theme'
   import { fade } from 'svelte/transition';
-  import { animate, spring } from 'motion';
+  import { animate } from 'motion';
 
   let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme } = $props<{
     theme: Theme | null;
@@ -28,7 +28,11 @@
       animate(
         modalElement,
         { y: [500, 0], opacity: [0, 1] },
-        { easing: spring({ stiffness: 150, damping: 20 }) }
+        {
+          type: 'spring',
+          stiffness: 150,
+          damping: 20
+        }
       );
     }
   });
@@ -37,7 +41,11 @@
     animate(
       modalElement,
       { y: [10, 500], opacity: [1, 0] },
-      { easing: spring({ stiffness: 150, damping: 20 }) }
+      {
+        type: 'spring',
+        stiffness: 150,
+        damping: 20
+      }
     );
     setTimeout(() => {
       setDisplayTheme(relatedTheme ?? null);

src/interface/pages/settings/general.svelte

@@ -97,6 +97,16 @@
         onChange: (isOn: boolean) => settingsState.notificationcollector = isOn
       }
     },
+    {
+      title: "Assessment Average",
+      description: "Shows your subject average for assessments.",
+      id: 8,
+      Component: Switch,
+      props: {
+        state: $settingsState.assessmentsAverage,
+        onChange: (isOn: boolean) => settingsState.assessmentsAverage = isOn
+      }
+    },
     {
       title: "Lesson Alerts",
       description: "Sends a native browser notification ~5 minutes prior to lessons.",

src/manifests/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "BetterSEQTA+",
-  "version": "3.4.0",
+  "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",
@@ -40,6 +40,10 @@
     {
       "resources": ["resources/icons/*"],
       "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["seqta/utils/migration/migrate.html"],
+      "matches": ["*://*/*"]
     }
   ]
 }

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -6,17 +6,59 @@ import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { updateAllColors } from "./colors/Manager";
 import { delay } from "@/seqta/utils/delay";
 
+let cachedUserInfo: any = null;
+
+async function getUserInfo() {
+  if (cachedUserInfo) return cachedUserInfo;
+  
+  try {
+    const response = await fetch(`${location.origin}/seqta/student/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      body: JSON.stringify({
+        mode: 'normal',
+        query: null,
+        redirect_url: location.origin,
+      }),
+    });
+
+    const responseData = await response.json();
+    cachedUserInfo = responseData.payload;
+    return cachedUserInfo;
+  } catch (error) {
+    console.error('Error fetching user info:', error);
+    throw error;
+  }
+}
+
 export async function AddBetterSEQTAElements() {
   if (settingsState.onoff) {    
     initializeSettings();
     if (settingsState.DarkMode) {
       document.documentElement.classList.add('dark');
     }
-    createHomeButton();
-    await appendBackgroundToUI();
-    await handleUserInfo();
-    handleStudentData();
-    createNewsButton();
+    
+    const fragment = document.createDocumentFragment();
+    const menu = document.getElementById('menu')!;
+    const menuList = menu.firstChild as HTMLElement;
+    
+    createHomeButton(fragment, menuList);
+    createNewsButton(fragment, menu);
+    
+    menuList.insertBefore(fragment, menuList.firstChild);
+    
+    try {
+      await Promise.all([
+        appendBackgroundToUI(),
+        handleUserInfo(),
+        handleStudentData()
+      ]);
+    } catch (error) {
+      console.error('Error initializing UI elements:', error);
+    }
+    
     setupEventListeners();
     await addDarkLightToggle();
     customizeMenuToggle();
@@ -24,7 +66,6 @@ export async function AddBetterSEQTAElements() {
 
   addExtensionSettings();
   await createSettingsButton();
-
   setupSettingsButton();
 }
 
@@ -33,18 +74,15 @@ function initializeSettings() {
   updateBgDurations();
 }
 
-function createHomeButton() {
+function createHomeButton(fragment: DocumentFragment, menuList: HTMLElement) {
   const container = document.getElementById('content')!;
   const div = document.createElement('div');
   div.classList.add('titlebar');
   container.append(div);
   
   const NewButton = stringToHTML('<li class="item" data-key="home" id="homebutton" data-path="/home" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span>Home</span></label></li>');
-  const menu = document.getElementById('menu')!;
-  const List = menu.firstChild! as HTMLElement;
-  
   if (NewButton.firstChild) {
-    List.insertBefore(NewButton.firstChild, List.firstChild);
+    fragment.appendChild(NewButton.firstChild);
   }
 }
 
@@ -121,30 +159,8 @@ async function handleStudentData() {
   }
 }
 
-async function getUserInfo() {
-  try {
-    const response = await fetch(`${location.origin}/seqta/student/login`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
-      },
-      body: JSON.stringify({
-        mode: 'normal',
-        query: null,
-        redirect_url: location.origin,
-      }),
-    });
-
-    const responseData = await response.json();
-    return responseData.payload;
-  } catch (error) {
-    console.error('Error fetching user info:', error);
-    throw error; // Rethrow the error after logging it
-  }
-}
-
 async function updateStudentInfo(students: any) {
-  const info = await getUserInfo(); // You would need to implement this to fetch or pass the user info
+  const info = await getUserInfo();
   var index = students.findIndex(function (person: any) {
     return (
       person.firstname == info.userDesc.split(' ')[0] &&
@@ -167,45 +183,50 @@ async function updateStudentInfo(students: any) {
       }
     }
   } else {
+    try {
       houseelement.innerText = students[index].year;
+    } catch(err) {
+      houseelement.innerText = 'N/A';
+    }
   }
 }
 
-function createNewsButton() {
+function createNewsButton(fragment: DocumentFragment, menu: HTMLElement) {
   const NewsButtonStr = '<li class="item" data-key="news" id="newsbutton" data-path="/news" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M5 7H10V13H5V7M19 17H5V15H19V17M19 13H12V11H19V13M19 9H12V7H19V9Z" /></svg><span>News</span></label></li>';
   const NewsButton = stringToHTML(NewsButtonStr);
-  const menu = document.getElementById('menu')!;
-  const List = menu.firstChild! as HTMLElement;
   
-  List!.appendChild(NewsButton.firstChild!);
+  if (NewsButton.firstChild) {
+    fragment.appendChild(NewsButton.firstChild);
+  }
   
-  let a = document.createElement('div');
-  a.classList.add('icon-cover');
-  a.id = 'icon-cover';
-  menu!.appendChild(a);
+  let iconCover = document.createElement('div');
+  iconCover.classList.add('icon-cover');
+  iconCover.id = 'icon-cover';
+  menu.appendChild(iconCover);
 }
 
 function setupEventListeners() {
   const menuCover = document.querySelector('#icon-cover');
-  menuCover!.addEventListener('click', function () {
-    location.href = '../#?page=/home';
-    loadHomePage();
-    (document!.getElementById('menu')!.firstChild! as HTMLElement).classList.remove('noscroll');
-  });
-
   const homebutton = document.getElementById('homebutton');
-  homebutton!.addEventListener('click', function () {
-    if (!homebutton?.classList.contains('draggable') && !homebutton?.classList.contains('active')) {
+  const newsbutton = document.getElementById('newsbutton');
+  
+  homebutton?.addEventListener('click', function() {
+    if (!homebutton.classList.contains('draggable') && !homebutton.classList.contains('active')) {
       loadHomePage();
     }
   });
 
-  const newsbutton = document.getElementById('newsbutton');
-  newsbutton!.addEventListener('click', function () {
-    if (!newsbutton?.classList.contains('draggable') && !newsbutton?.classList.contains('active')) {
+  newsbutton?.addEventListener('click', function() {
+    if (!newsbutton.classList.contains('draggable') && !newsbutton.classList.contains('active')) {
       SendNewsPage();
     }
   });
+
+  menuCover?.addEventListener('click', function() {
+    location.href = '../#?page=/home';
+    loadHomePage();
+    (document.getElementById('menu')!.firstChild! as HTMLElement).classList.remove('noscroll');
+  });
 }
 
 async function createSettingsButton() {

src/seqta/ui/themes/downloadTheme.ts

@@ -1,7 +1,14 @@
 import localforage from 'localforage';
-import type { Theme } from '@/old-interface/pages/Store';
 import base64ToBlob from '@/seqta/utils/base64ToBlob';
 
+type Theme = {
+  name: string;
+  description: string;
+  coverImage: string;
+  marqueeImage: string;
+  id: string;
+}
+
 type ThemeContent = {
   id: string;
   name: string;
@@ -14,6 +21,11 @@ type ThemeContent = {
   images: { id: string, variableName: string, data: string }[]; // data: base64
 };
 
+function stripBase64Prefix(base64String: string): string {
+  const prefixRegex = /^data:image\/\w+;base64,/;
+  return base64String.replace(prefixRegex, '');
+}
+
 export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
   if (!theme.themeContent.id) return;
 
@@ -24,7 +36,8 @@ export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
 };
 
 export const InstallTheme = async (themeData: ThemeContent) => {
-  const coverImageBlob = base64ToBlob(themeData.coverImage);
+  const strippedCoverImage = stripBase64Prefix(themeData.coverImage);
+  const coverImageBlob = base64ToBlob(strippedCoverImage);
 
   const images = themeData.images.map((image) => ({
     ...image,

src/seqta/utils/listeners/EventManager.ts

@@ -46,10 +46,27 @@ class EventManager {
     }
     const unregister = () => this.unregisterById(event, id);
     this.listeners.get(event)!.push({ id, options, callback, unregister });
+    
+    this.scanExistingElements(options, callback);
+    
     this.startObserving(options.parentElement);
     return { unregister };
   }
 
+  private async scanExistingElements(options: EventListenerOptions, callback: (element: Element) => void): Promise<void> {
+    const root = options.parentElement || document.documentElement;
+    const elements = Array.from(root.getElementsByTagName('*'));
+    elements.unshift(root);
+    
+    for (let i = 0; i < elements.length; i += this.chunkSize) {
+      const chunk = elements.slice(i, i + this.chunkSize);
+      const filteredChunk = chunk.filter(element => this.matchesOptions(element, options));
+      for (const element of filteredChunk) {
+        callback(element);
+      }
+    }
+  }
+
   public unregister(event: string): void {
     if (this.listeners.has(event)) {
       this.listeners.delete(event);

src/seqta/utils/migration/migration-iframe.ts

@@ -44,7 +44,23 @@ const getSelectedBackground = (): string | null => {
 const startMigration = async () => {
   try {
     console.info('Starting background extraction...');
-    const backgrounds = await getAllBackgrounds();
+    let backgrounds: Data[];
+    try {
+      backgrounds = await getAllBackgrounds();
+      if (!backgrounds || backgrounds.length === 0) {
+        console.info('No backgrounds to migrate');
+        window.parent.postMessage({ type: 'MIGRATION_COMPLETE' }, '*');
+        return;
+      }
+    } catch (error: any) {
+      if (error.name === 'NotFoundError' && error.message.includes('object stores was not found')) {
+        console.info('No backgrounds to migrate: object store not found');
+        window.parent.postMessage({ type: 'MIGRATION_COMPLETE' }, '*');
+        return;
+      }
+      console.error('Error fetching backgrounds:', error);
+      throw new Error('Failed to fetch backgrounds');
+    }
     const selectedBackground = getSelectedBackground();
     console.info(`Found ${backgrounds.length} backgrounds`);
 

src/types/storage.ts

@@ -38,6 +38,7 @@ export interface SettingsState {
   defaultPage: string;
   devMode?: boolean;
   originalDarkMode?: boolean;
+  assessmentsAverage?: boolean;
 }
 
 interface ToggleItem {

tailwind.config.js

@@ -1,17 +1,10 @@
-const {
-  default: flattenColorPalette,
-} = require("tailwindcss/lib/util/flattenColorPalette");
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
 
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./src/**/*.{js,ts,jsx,tsx,html,svelte}",
   ],
-  //safelist: [
-    //{
-    //  pattern: / */,
-    //}
-  //],
   darkMode: "class",
   theme: {
     fontSize: {

vite.config.ts

@@ -54,6 +54,16 @@ export default defineConfig({
       port: 5173
     }
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern'
+      }
+    }
+  },
+  optimizeDeps: {
+    include: ['@babel/runtime/helpers/extends', '@babel/runtime/helpers/interopRequireDefault'],
+  },
   build: {
     outDir: resolve(__dirname, 'dist', mode),
     emptyOutDir: false,