feat: finish custom message folders

update video (and edit notes)

.gitignore

@@ -4,12 +4,11 @@ package-lock.json
 bun.lockb
 pnpm-lock.yaml
 yarn.lock
+bun.lock
 
-.parcel-cache
+# PDF.js extension assets (copied by postinstall from pdfjs-dist)
-.env
+src/public/resources/pdfjs/pdf.worker.min.mjs
-.env.submit
+src/public/resources/pdfjs/pdf.legacy.min.mjs
-
-dependency-graph.svg
 
 # Build
 extension.zip
@@ -19,5 +18,8 @@ betterseqtaplus-safari/
 
 .million/
 .vscode/
-
 **/.DS_Store
+.parcel-cache
+.env
+.env.submit
+dependency-graph.svg

CONTRIBUTING.md

@@ -6,9 +6,9 @@ Hey there! 👋 Thanks for your interest in contributing to BetterSEQTA+! We're
 
 **Never contributed to an open source project before?** No worries! We've made it super easy to get started:
 
-- **📖 Read our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
+- **📖 Read our [contributing guide](https://docs.betterseqta.org/contributing/)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
-- **🏗️ Understand the codebase** with our [Architecture Guide](./docs/ARCHITECTURE.md)
+- **🏗️ Understand the codebase** with the [architecture guide](https://docs.betterseqta.org/architecture/)
-- **🔧 Having issues?** Check our [Troubleshooting Guide](./docs/TROUBLESHOOTING.md)
+- **🔧 Having issues?** Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
 
 We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels that are perfect for beginners!
 
@@ -33,8 +33,8 @@ Join our community channels to discuss the project, get help, and connect with o
 
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
 
-- [Creating Your First Plugin](./docs/plugins/creating-plugins.md)
+- [Plugin development](https://docs.betterseqta.org/plugin-development/)
-- [Plugin API Reference](./docs/advanced/plugin-api.md)
+- [Plugin API](https://docs.betterseqta.org/plugin-api/)
 
 ## Pull Request Process
 

README.md

@@ -16,17 +16,15 @@
   <img src="https://img.shields.io/chrome-web-store/rating/afdgaoaclhkhemfkkkonemoapeinchel" />
 </div>
 
-## Table of contents
+## 📚 Documentation
+All documentation has been moved to the [official docs site](https://docs.betterseqta.org):
 
-- [Features](#features)
+Includes:
-- [Creating Custom Themes](#creating-custom-themes)
+- Getting started
-- [Getting Started](#getting-started)
+- Development setup
-  - [Running Development](#running-development)
+- Architecture
-  - [Building for production](#building-for-production)
+- Plugin system
-  - [Folder Structure](#folder-structure)
+- Theme creation
-- [Contributors](#contributors)
-- [Credits](#credits)
-- [Star History](#star-history)
 
 ## Features
 
@@ -50,64 +48,32 @@
 
 ## Creating Custom Themes
 
-If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://betterseqta.gitbook.io/betterseqta-docs). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
+If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://docs.betterseqta.org/theme-creation/). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
 
 Don't worry- if you get stuck feel free to ask around in the [discord](https://discord.gg/YzmbnCDkat). We're open and happy to help out! Happy creating :)
 
-## 🚀 Want to Contribute?
+## 🚀 Contributing
+**New contributors welcome!**
+- 📖 Start here: https://docs.betterseqta.org/install/
+- 🧠 Architecture: https://docs.betterseqta.org/architecture/
+- 🧩 Plugins: https://docs.betterseqta.org/plugins/
+- 💬 Discord: https://discord.gg/YzmbnCDkat
 
-**New contributors welcome!** 🎉 We've made it easy to get started:
 
-- **👋 New to the project?** Start with our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)
+## ⚡ Quick Start
-- **🏗️ Want to understand the code?** Check out our [Architecture Guide](./docs/ARCHITECTURE.md)
-- **🧩 Interested in plugins?** Read our [Plugin Development Guide](./docs/plugins/README.md)
-- **🐛 Found a bug?** Open an [issue](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) or fix it yourself!
-- **💬 Need help?** Join our [Discord community](https://discord.gg/YzmbnCDkat)
 
-We have lots of https://github.com/BetterSEQTA/BetterSEQTA-Plus/labels/good%20first%20issue labels perfect for beginners!
-
-## Quick Development Setup
-
-&nbsp;&nbsp;&nbsp; **1. Fork & Clone**
 ```bash
-git clone https://github.com/YOUR_USERNAME/BetterSEQTA-Plus
+git clone https://github.com/YOUR_USERNAME_FORKED_WITH/BetterSEQTA-Plus
 cd BetterSEQTA-Plus
-```
-
-&nbsp;&nbsp;&nbsp; **2. Install & Run**
-```bash
 npm install --legacy-peer-deps
 npm run dev
-```
+````
 
-&nbsp;&nbsp;&nbsp; **3. Load in Browser**
+Then load `dist` in `chrome://extensions` (Developer Mode → Load unpacked).
-1. Go to `chrome://extensions`
-2. Enable "Developer mode"
-3. Click "Load unpacked" → Select `dist` folder
-4. Visit a SEQTA page to see it work! 🎉
-> [!WARNING]
-> Whenever you update the extension while not in dev mode, you will need to use the reload button on the extension page.
 
-📚 **Need more details?** Check our [detailed setup guide](./docs/GETTING_STARTED_CONTRIBUTING.md#your-first-30-minutes)
 
-### Building for Production
+Full setup guide:
-
+[https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment](https://betterseqta.github.io/BetterSEQTA-Docs/install/#for-developers-development-environment)
-```bash
-npm run build     # Build for all browsers
-npm run zip       # Package for distribution (requires 7-Zip)
-```
-
-## Folder Structure
-
-The folder structure is as follows:
-
-- The `src` folder contains source files that are compiled to the build directory.
-
-- The `src/plugins` folder contains vital loaders required for BetterSEQTA+ functionality.
-
-- The `src/interface` folder contains source React & Svelte files that are required for the Settings page.
-
-- The `dist` folder is where the compiled code ends up, this is the folder what you need to load into chrome as an unpacked extension for development.
 
 ## Contributors
 
@@ -115,11 +81,14 @@ The folder structure is as follows:
   <img src="https://contrib.rocks/image?repo=betterseqta/betterseqta-plus" />
 </a>
 
-Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
+Want to contribute? [Click Here!](https://docs.betterseqta.org/contributing/)
 
 ## Credits
 
 This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development from lead developers [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph) with help from other volunteers.
+Originally developed by [Nulkem](https://github.com/Nulkem/betterseqta)
+Ported to Manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68)
+Maintained by [SethBurkart123](https://github.com/SethBurkart123), [Crazypersonalph](https://github.com/Crazypersonalph) & the rest of the BetterSEQTA team!
 
 ## Star History
 

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "betterseqtaplus",
@@ -19,6 +20,7 @@
         "@types/color": "^4.2.0",
         "@types/lodash": "^4.17.16",
         "@types/node": "^24.3.0",
+        "@types/qrcode": "^1.5.6",
         "@types/sortablejs": "^1.15.8",
         "@types/uuid": "^10.0.0",
         "@types/webextension-polyfill": "^0.12.3",
@@ -44,6 +46,7 @@
         "motion": "^12.4.12",
         "pdfjs-dist": "^5.4.530",
         "postcss": "^8.5.3",
+        "qrcode": "^1.5.4",
         "react": "17",
         "react-best-gradient-color-picker": "3.0.11",
         "react-dom": "17",
@@ -70,7 +73,7 @@
         "mime-types": "^3.0.1",
         "prettier": "^3.5.3",
         "process": "^0.11.10",
-        "publish-browser-extension": "^4.0.0",
+        "publish-browser-extension": "^4.0.4",
         "sass": "^1.85.1",
         "sass-loader": "^16.0.5",
         "semver": "^7.7.1",
@@ -448,6 +451,8 @@
 
     "@types/node": ["@types/node@24.3.0", "", { "dependencies": { "undici-types": "7.10.0" } }, "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow=="],
 
+    "@types/qrcode": ["@types/qrcode@1.5.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw=="],
+
     "@types/react": ["@types/react@19.1.12", "", { "dependencies": { "csstype": "3.1.3" } }, "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w=="],
 
     "@types/react-dom": ["@types/react-dom@19.1.8", "", { "peerDependencies": { "@types/react": "19.1.12" } }, "sha512-xG7xaBMJCpcK0RpN8jDbAACQo54ycO6h4dSSmgv8+fu6ZIAdANkx/WsawASUjVXYfy+J9AbUpRMNNEsXCDfDBQ=="],
@@ -506,7 +511,7 @@
 
     "ajv": ["ajv@8.17.1", "", { "dependencies": { "fast-deep-equal": "3.1.3", "fast-uri": "3.1.0", "json-schema-traverse": "1.0.0", "require-from-string": "2.0.2" } }, "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g=="],
 
-    "ansi-escapes": ["ansi-escapes@7.0.0", "", { "dependencies": { "environment": "1.1.0" } }, "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw=="],
+    "ansi-escapes": ["ansi-escapes@7.3.0", "", { "dependencies": { "environment": "^1.0.0" } }, "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg=="],
 
     "ansi-regex": ["ansi-regex@2.1.1", "", {}, "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="],
 
@@ -568,6 +573,8 @@
 
     "buffer": ["buffer@5.7.1", "", { "dependencies": { "base64-js": "1.5.1", "ieee754": "1.2.1" } }, "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ=="],
 
+    "buffer-equal-constant-time": ["buffer-equal-constant-time@1.0.1", "", {}, "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="],
+
     "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
 
     "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "1.3.0", "function-bind": "1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
@@ -576,6 +583,8 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
+    "camelcase": ["camelcase@5.3.1", "", {}, "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="],
+
     "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
 
     "caniuse-lite": ["caniuse-lite@1.0.30001737", "", {}, "sha512-BiloLiXtQNrY5UyF0+1nSJLXUENuhka2pzy2Fx5pGxqavdrxSCW4U6Pn/PoG3Efspi2frRbHpBV2XsrPE6EDlw=="],
@@ -598,9 +607,9 @@
 
     "cli-cursor": ["cli-cursor@2.1.0", "", { "dependencies": { "restore-cursor": "2.0.0" } }, "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw=="],
 
-    "cli-truncate": ["cli-truncate@4.0.0", "", { "dependencies": { "slice-ansi": "5.0.0", "string-width": "7.2.0" } }, "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA=="],
+    "cli-truncate": ["cli-truncate@5.1.1", "", { "dependencies": { "slice-ansi": "^7.1.0", "string-width": "^8.0.0" } }, "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A=="],
 
-    "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "4.2.3", "strip-ansi": "6.0.1", "wrap-ansi": "7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+    "cliui": ["cliui@6.0.0", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^6.2.0" } }, "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="],
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
@@ -664,6 +673,8 @@
 
     "debug": ["debug@4.4.1", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
 
+    "decamelize": ["decamelize@1.2.0", "", {}, "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="],
+
     "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
@@ -686,6 +697,8 @@
 
     "diff-sequences": ["diff-sequences@29.6.3", "", {}, "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q=="],
 
+    "dijkstrajs": ["dijkstrajs@1.0.3", "", {}, "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="],
+
     "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
 
     "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "2.3.0", "domhandler": "5.0.3", "entities": "4.5.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
@@ -698,12 +711,14 @@
 
     "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "2.0.0", "domelementtype": "2.3.0", "domhandler": "5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
 
-    "dotenv": ["dotenv@17.2.3", "", {}, "sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w=="],
+    "dotenv": ["dotenv@17.3.1", "", {}, "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "1.0.2", "es-errors": "1.3.0", "gopd": "1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
     "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
 
+    "ecdsa-sig-formatter": ["ecdsa-sig-formatter@1.0.11", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ=="],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.211", "", {}, "sha512-IGBvimJkotaLzFnwIVgW9/UD/AOJ2tByUmeOrtqBfACSbAw5b1G0XpvdaieKyc7ULmbwXVx+4e4Be8pOPBrYkw=="],
 
     "elegant-spinner": ["elegant-spinner@1.0.1", "", {}, "sha512-B+ZM+RXvRqQaAmkMlO/oSe5nMUOaUnyfGYCEHoR8wrXsZR2mA0XVibsxV1bvTwxdRWah1PkQqso2EzhILGHtEQ=="],
@@ -838,7 +853,7 @@
 
     "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
 
-    "get-east-asian-width": ["get-east-asian-width@1.3.0", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="],
+    "get-east-asian-width": ["get-east-asian-width@1.5.0", "", {}, "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA=="],
 
     "get-func-name": ["get-func-name@2.0.2", "", {}, "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ=="],
 
@@ -964,6 +979,12 @@
 
     "jsonfile": ["jsonfile@6.2.0", "", { "dependencies": { "universalify": "2.0.1" }, "optionalDependencies": { "graceful-fs": "4.2.11" } }, "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg=="],
 
+    "jsonwebtoken": ["jsonwebtoken@9.0.3", "", { "dependencies": { "jws": "^4.0.1", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g=="],
+
+    "jwa": ["jwa@2.0.1", "", { "dependencies": { "buffer-equal-constant-time": "^1.0.1", "ecdsa-sig-formatter": "1.0.11", "safe-buffer": "^5.0.1" } }, "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg=="],
+
+    "jws": ["jws@4.0.1", "", { "dependencies": { "jwa": "^2.0.1", "safe-buffer": "^5.0.1" } }, "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA=="],
+
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
 
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
@@ -986,7 +1007,7 @@
 
     "listr-verbose-renderer": ["listr-verbose-renderer@0.5.0", "", { "dependencies": { "chalk": "2.4.2", "cli-cursor": "2.1.0", "date-fns": "1.30.1", "figures": "2.0.0" } }, "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw=="],
 
-    "listr2": ["listr2@8.3.3", "", { "dependencies": { "cli-truncate": "4.0.0", "colorette": "2.0.20", "eventemitter3": "5.0.1", "log-update": "6.1.0", "rfdc": "1.4.1", "wrap-ansi": "9.0.0" } }, "sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ=="],
+    "listr2": ["listr2@10.1.0", "", { "dependencies": { "cli-truncate": "^5.0.0", "colorette": "^2.0.20", "eventemitter3": "^5.0.1", "log-update": "^7.0.2", "rfdc": "^1.4.1", "wrap-ansi": "^9.0.0" } }, "sha512-/6t2KgDYIcCjhELwvrRxi1gaJ4xCGLTjNvh6mSjYenBkrZxggek8EwCbwBU33GMUCpyyrOzz2TzylrO5mTiI1w=="],
 
     "local-pkg": ["local-pkg@0.4.3", "", {}, "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g=="],
 
@@ -1002,15 +1023,29 @@
 
     "lodash.get": ["lodash.get@4.4.2", "", {}, "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="],
 
+    "lodash.includes": ["lodash.includes@4.3.0", "", {}, "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="],
+
+    "lodash.isboolean": ["lodash.isboolean@3.0.3", "", {}, "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="],
+
     "lodash.isequal": ["lodash.isequal@4.5.0", "", {}, "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="],
 
+    "lodash.isinteger": ["lodash.isinteger@4.0.4", "", {}, "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="],
+
+    "lodash.isnumber": ["lodash.isnumber@3.0.3", "", {}, "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="],
+
+    "lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],
+
+    "lodash.isstring": ["lodash.isstring@4.0.1", "", {}, "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="],
+
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
+    "lodash.once": ["lodash.once@4.1.1", "", {}, "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="],
+
     "lodash.throttle": ["lodash.throttle@4.1.1", "", {}, "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="],
 
     "log-symbols": ["log-symbols@1.0.2", "", { "dependencies": { "chalk": "1.1.3" } }, "sha512-mmPrW0Fh2fxOzdBbFv4g1m6pR72haFLPJ2G5SJEELf1y+iaQrDG6cWCPjy54RHYbZAt7X+ls690Kw62AdWXBzQ=="],
 
-    "log-update": ["log-update@6.1.0", "", { "dependencies": { "ansi-escapes": "7.0.0", "cli-cursor": "5.0.0", "slice-ansi": "7.1.0", "strip-ansi": "7.1.0", "wrap-ansi": "9.0.0" } }, "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w=="],
+    "log-update": ["log-update@7.1.0", "", { "dependencies": { "ansi-escapes": "^7.1.0", "cli-cursor": "^5.0.0", "slice-ansi": "^7.1.2", "strip-ansi": "^7.1.2", "wrap-ansi": "^9.0.2" } }, "sha512-y9pi/ZOQQVvTgfRDEHV1Cj4zQUkJZPipEUNOxhn1R6KgmdMs7LKvXWCd9eMVPGJgvYzFLCenecWr0Ps8ChVv2A=="],
 
     "long": ["long@4.0.0", "", {}, "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="],
 
@@ -1108,7 +1143,7 @@
 
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
 
-    "ofetch": ["ofetch@1.4.1", "", { "dependencies": { "destr": "2.0.5", "node-fetch-native": "1.6.7", "ufo": "1.6.1" } }, "sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw=="],
+    "ofetch": ["ofetch@1.5.1", "", { "dependencies": { "destr": "^2.0.5", "node-fetch-native": "^1.6.7", "ufo": "^1.6.1" } }, "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA=="],
 
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1.0.2" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
@@ -1132,6 +1167,8 @@
 
     "p-map": ["p-map@2.1.0", "", {}, "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw=="],
 
+    "p-try": ["p-try@2.2.0", "", {}, "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="],
+
     "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
 
     "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "3.1.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
@@ -1174,6 +1211,8 @@
 
     "platform": ["platform@1.3.6", "", {}, "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="],
 
+    "pngjs": ["pngjs@5.0.0", "", {}, "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="],
+
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "3.3.11", "picocolors": "1.1.1", "source-map-js": "1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
     "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "4.2.0", "read-cache": "1.0.0", "resolve": "1.22.10" }, "peerDependencies": { "postcss": "8.5.6" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
@@ -1204,12 +1243,14 @@
 
     "protobufjs": ["protobufjs@6.11.4", "", { "dependencies": { "@protobufjs/aspromise": "1.1.2", "@protobufjs/base64": "1.1.2", "@protobufjs/codegen": "2.0.4", "@protobufjs/eventemitter": "1.1.0", "@protobufjs/fetch": "1.1.0", "@protobufjs/float": "1.0.2", "@protobufjs/inquire": "1.1.0", "@protobufjs/path": "1.1.2", "@protobufjs/pool": "1.1.0", "@protobufjs/utf8": "1.1.0", "@types/long": "4.0.2", "@types/node": "24.3.0", "long": "4.0.0" }, "bin": { "pbjs": "bin/pbjs", "pbts": "bin/pbts" } }, "sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw=="],
 
-    "publish-browser-extension": ["publish-browser-extension@4.0.0", "", { "dependencies": { "cac": "^6.7.14", "consola": "^3.4.2", "dotenv": "^17.2.3", "form-data-encoder": "^4.1.0", "formdata-node": "^6.0.3", "listr2": "^8.3.3", "ofetch": "^1.4.1", "zod": "^3.25.76 || ^4.0.0" }, "bin": { "publish-extension": "bin/publish-extension.mjs" } }, "sha512-2bsHf2m+ivNyDa67YdVhcxpF3wjWzVTqG5JWQYwi6by47XyA7jf43A9S7+UBULM/d2f82fPUGnRuecMK1CgEPA=="],
+    "publish-browser-extension": ["publish-browser-extension@4.0.4", "", { "dependencies": { "cac": "^6.7.14", "consola": "^3.4.2", "dotenv": "^17.2.4", "form-data-encoder": "^4.1.0", "formdata-node": "^6.0.3", "jsonwebtoken": "^9.0.3", "listr2": "^10.1.0", "ofetch": "^1.5.1", "zod": "3.25.76 || ^4.3.6" }, "bin": { "publish-extension": "bin/publish-extension.mjs" } }, "sha512-QMQbWL0FWgBfnkJ6w8HOJoIPaWLE7vTpewM4ae2vLs7SrD4eKdAk+SxOzqAICwbhEPuaLAOA+XkT9sZS5R0PmA=="],
 
     "pump": ["pump@3.0.3", "", { "dependencies": { "end-of-stream": "1.4.5", "once": "1.4.0" } }, "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA=="],
 
     "punycode": ["punycode@1.4.1", "", {}, "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="],
 
+    "qrcode": ["qrcode@1.5.4", "", { "dependencies": { "dijkstrajs": "^1.0.1", "pngjs": "^5.0.0", "yargs": "^15.3.1" }, "bin": { "qrcode": "bin/qrcode" } }, "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg=="],
+
     "qs": ["qs@6.14.0", "", { "dependencies": { "side-channel": "1.1.0" } }, "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w=="],
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
@@ -1240,6 +1281,8 @@
 
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
+    "require-main-filename": ["require-main-filename@2.0.0", "", {}, "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="],
+
     "resolve": ["resolve@1.22.10", "", { "dependencies": { "is-core-module": "2.16.1", "path-parse": "1.0.7", "supports-preserve-symlinks-flag": "1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w=="],
 
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -1276,6 +1319,8 @@
 
     "semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
+    "set-blocking": ["set-blocking@2.0.0", "", {}, "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="],
+
     "sharp": ["sharp@0.32.6", "", { "dependencies": { "color": "4.2.3", "detect-libc": "2.0.4", "node-addon-api": "6.1.0", "prebuild-install": "7.1.3", "semver": "7.7.2", "simple-get": "4.0.1", "tar-fs": "3.1.0", "tunnel-agent": "0.6.0" } }, "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w=="],
 
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
@@ -1304,7 +1349,7 @@
 
     "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
 
-    "slice-ansi": ["slice-ansi@5.0.0", "", { "dependencies": { "ansi-styles": "6.2.1", "is-fullwidth-code-point": "4.0.0" } }, "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ=="],
+    "slice-ansi": ["slice-ansi@7.1.0", "", { "dependencies": { "ansi-styles": "6.2.1", "is-fullwidth-code-point": "5.0.0" } }, "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg=="],
 
     "sortablejs": ["sortablejs@1.15.6", "", {}, "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A=="],
 
@@ -1464,6 +1509,8 @@
 
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
+    "which-module": ["which-module@2.0.1", "", {}, "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="],
+
     "why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
@@ -1478,15 +1525,15 @@
 
     "xmlbuilder": ["xmlbuilder@11.0.1", "", {}, "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="],
 
-    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+    "y18n": ["y18n@4.0.3", "", {}, "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="],
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "yaml": ["yaml@2.8.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw=="],
 
-    "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "8.0.1", "escalade": "3.2.0", "get-caller-file": "2.0.5", "require-directory": "2.1.1", "string-width": "4.2.3", "y18n": "5.0.8", "yargs-parser": "21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+    "yargs": ["yargs@15.4.1", "", { "dependencies": { "cliui": "^6.0.0", "decamelize": "^1.2.0", "find-up": "^4.1.0", "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", "yargs-parser": "^18.1.2" } }, "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A=="],
 
-    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+    "yargs-parser": ["yargs-parser@18.1.3", "", { "dependencies": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" } }, "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ=="],
 
     "yocto-queue": ["yocto-queue@1.2.1", "", {}, "sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg=="],
 
@@ -1564,14 +1611,16 @@
 
     "cheerio/undici": ["undici@7.15.0", "", {}, "sha512-7oZJCPvvMvTd0OlqWsIxTuItTpJBpU1tcbVl24FMn3xt3+VSunwUasmfPJRE57oNO1KsZ4PgA1xTdAX4hq8NyQ=="],
 
-    "cli-truncate/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "10.4.0", "get-east-asian-width": "1.3.0", "strip-ansi": "7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+    "cli-truncate/string-width": ["string-width@8.2.0", "", { "dependencies": { "get-east-asian-width": "^1.5.0", "strip-ansi": "^7.1.2" } }, "sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw=="],
 
     "cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
-    "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "4.3.0", "string-width": "4.2.3", "strip-ansi": "6.0.1" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+    "cliui/wrap-ansi": ["wrap-ansi@6.2.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="],
 
     "concurrently/rxjs": ["rxjs@7.8.2", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA=="],
 
+    "concurrently/yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "8.0.1", "escalade": "3.2.0", "get-caller-file": "2.0.5", "require-directory": "2.1.1", "string-width": "4.2.3", "y18n": "5.0.8", "yargs-parser": "21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+
     "dom-serializer/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
 
     "eslint/ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "3.1.3", "fast-json-stable-stringify": "2.1.0", "json-schema-traverse": "0.4.1", "uri-js": "4.4.1" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
@@ -1606,9 +1655,11 @@
 
     "log-update/cli-cursor": ["cli-cursor@5.0.0", "", { "dependencies": { "restore-cursor": "5.1.0" } }, "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw=="],
 
-    "log-update/slice-ansi": ["slice-ansi@7.1.0", "", { "dependencies": { "ansi-styles": "6.2.1", "is-fullwidth-code-point": "5.0.0" } }, "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg=="],
+    "log-update/slice-ansi": ["slice-ansi@7.1.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "is-fullwidth-code-point": "^5.0.0" } }, "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w=="],
 
-    "log-update/strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "6.2.0" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
+    "log-update/strip-ansi": ["strip-ansi@7.1.2", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA=="],
+
+    "log-update/wrap-ansi": ["wrap-ansi@9.0.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "string-width": "^7.0.0", "strip-ansi": "^7.1.0" } }, "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww=="],
 
     "mathjs/fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
 
@@ -1650,7 +1701,7 @@
 
     "slice-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
 
-    "slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@4.0.0", "", {}, "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ=="],
+    "slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@5.0.0", "", { "dependencies": { "get-east-asian-width": "1.3.0" } }, "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA=="],
 
     "string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
@@ -1686,6 +1737,8 @@
 
     "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
+
     "z-schema/commander": ["commander@9.5.0", "", {}, "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="],
 
     "@eslint/eslintrc/ajv/json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
@@ -1714,12 +1767,16 @@
 
     "any-observable/rxjs/tslib": ["tslib@1.14.1", "", {}, "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="],
 
-    "cli-truncate/string-width/emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
+    "cli-truncate/string-width/strip-ansi": ["strip-ansi@7.1.2", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA=="],
-
-    "cli-truncate/string-width/strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "6.2.0" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
 
     "cliui/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
+    "concurrently/yargs/cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "4.2.3", "strip-ansi": "6.0.1", "wrap-ansi": "7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+
+    "concurrently/yargs/y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "concurrently/yargs/yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
     "eslint/ajv/json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
 
     "listr-update-renderer/chalk/ansi-styles": ["ansi-styles@2.2.1", "", {}, "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="],
@@ -1762,6 +1819,10 @@
 
     "log-update/strip-ansi/ansi-regex": ["ansi-regex@6.2.0", "", {}, "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg=="],
 
+    "log-update/wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
+
+    "log-update/wrap-ansi/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "10.4.0", "get-east-asian-width": "1.3.0", "strip-ansi": "7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
     "million/@rollup/pluginutils/rollup": ["rollup@4.49.0", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.49.0", "@rollup/rollup-android-arm64": "4.49.0", "@rollup/rollup-darwin-arm64": "4.49.0", "@rollup/rollup-darwin-x64": "4.49.0", "@rollup/rollup-freebsd-arm64": "4.49.0", "@rollup/rollup-freebsd-x64": "4.49.0", "@rollup/rollup-linux-arm-gnueabihf": "4.49.0", "@rollup/rollup-linux-arm-musleabihf": "4.49.0", "@rollup/rollup-linux-arm64-gnu": "4.49.0", "@rollup/rollup-linux-arm64-musl": "4.49.0", "@rollup/rollup-linux-loongarch64-gnu": "4.49.0", "@rollup/rollup-linux-ppc64-gnu": "4.49.0", "@rollup/rollup-linux-riscv64-gnu": "4.49.0", "@rollup/rollup-linux-riscv64-musl": "4.49.0", "@rollup/rollup-linux-s390x-gnu": "4.49.0", "@rollup/rollup-linux-x64-gnu": "4.49.0", "@rollup/rollup-linux-x64-musl": "4.49.0", "@rollup/rollup-win32-arm64-msvc": "4.49.0", "@rollup/rollup-win32-ia32-msvc": "4.49.0", "@rollup/rollup-win32-x64-msvc": "4.49.0", "fsevents": "2.3.3" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-3IVq0cGJ6H7fKXXEdVt+RcYvRCt8beYY9K1760wGQwSAHZcS9eot1zDG5axUbcp/kWRi5zKIIDX8MoKv/TzvZA=="],
 
     "p-locate/p-limit/yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
@@ -1782,6 +1843,8 @@
 
     "sharp/color/color-string": ["color-string@1.9.1", "", { "dependencies": { "color-name": "1.1.4", "simple-swizzle": "0.2.2" } }, "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="],
 
+    "slice-ansi/is-fullwidth-code-point/get-east-asian-width": ["get-east-asian-width@1.3.0", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="],
+
     "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "string-width/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
@@ -1810,14 +1873,22 @@
 
     "wrap-ansi/string-width/emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
 
+    "wrap-ansi/string-width/get-east-asian-width": ["get-east-asian-width@1.3.0", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="],
+
     "wrap-ansi/strip-ansi/ansi-regex": ["ansi-regex@6.2.0", "", {}, "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg=="],
 
+    "yargs/find-up/locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
+
     "@microsoft/api-extractor/semver/lru-cache/yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
 
     "@rushstack/node-core-library/semver/lru-cache/yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
 
     "cli-truncate/string-width/strip-ansi/ansi-regex": ["ansi-regex@6.2.0", "", {}, "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg=="],
 
+    "concurrently/yargs/cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "concurrently/yargs/cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "4.3.0", "string-width": "4.2.3", "strip-ansi": "6.0.1" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
     "listr-update-renderer/cli-truncate/string-width/is-fullwidth-code-point": ["is-fullwidth-code-point@1.0.0", "", { "dependencies": { "number-is-nan": "1.0.1" } }, "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw=="],
 
     "listr-update-renderer/log-update/wrap-ansi/string-width": ["string-width@2.1.1", "", { "dependencies": { "is-fullwidth-code-point": "2.0.0", "strip-ansi": "4.0.0" } }, "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw=="],
@@ -1830,6 +1901,14 @@
 
     "log-update/cli-cursor/restore-cursor/onetime": ["onetime@7.0.0", "", { "dependencies": { "mimic-function": "5.0.1" } }, "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ=="],
 
+    "log-update/slice-ansi/is-fullwidth-code-point/get-east-asian-width": ["get-east-asian-width@1.3.0", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="],
+
+    "log-update/wrap-ansi/string-width/emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
+
+    "log-update/wrap-ansi/string-width/get-east-asian-width": ["get-east-asian-width@1.3.0", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="],
+
+    "log-update/wrap-ansi/string-width/strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "6.2.0" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
+
     "pkg-install/execa/cross-spawn/path-key": ["path-key@2.0.1", "", {}, "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw=="],
 
     "pkg-install/execa/cross-spawn/semver": ["semver@5.7.2", "", { "bin": { "semver": "bin/semver" } }, "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="],
@@ -1940,12 +2019,20 @@
 
     "vitest/vite/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.21.5", "", { "os": "win32", "cpu": "x64" }, "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw=="],
 
+    "yargs/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
+
+    "concurrently/yargs/cliui/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
     "listr-update-renderer/log-update/wrap-ansi/string-width/is-fullwidth-code-point": ["is-fullwidth-code-point@2.0.0", "", {}, "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="],
 
     "listr-update-renderer/log-update/wrap-ansi/strip-ansi/ansi-regex": ["ansi-regex@3.0.1", "", {}, "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw=="],
 
     "listr-verbose-renderer/chalk/ansi-styles/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
 
+    "log-update/wrap-ansi/string-width/strip-ansi/ansi-regex": ["ansi-regex@6.2.0", "", {}, "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg=="],
+
     "pkg-install/execa/cross-spawn/shebang-command/shebang-regex": ["shebang-regex@1.0.0", "", {}, "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ=="],
+
+    "yargs/find-up/locate-path/p-locate/p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
   }
 }

docs/ARCHITECTURE.md

@@ -1,5 +1,7 @@
 # BetterSEQTA+ Architecture
 
+**Published version:** [docs.betterseqta.org/architecture/](https://docs.betterseqta.org/architecture/)
+
 Hey there! 👋 New to the codebase and feeling a bit lost? Don't worry - this guide will help you understand how everything fits together!
 
 ## Table of Contents
@@ -221,7 +223,7 @@ console.log(settingsState.[the setting name])
 Ready to contribute? Here's what to do next:
 
 1. **Read the code**: Start with `src/SEQTA.ts` and follow the flow
-2. **Try creating a simple plugin**: Follow our [plugin guide](./plugins/README.md)
+2. **Try creating a simple plugin**: Follow the [plugin documentation](https://docs.betterseqta.org/plugins/)
 3. **Look at existing issues**: Check our [GitHub issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) for "good first issue" labels
 4. **Join our Discord**: Get help from the community!
 

docs/CLOUD_SETTINGS_SYNC_SERVER.md

@@ -0,0 +1,133 @@
+# BetterSEQTA Cloud — settings sync (server specification)
+
+This document describes the HTTP API the BetterSEQTA+ extension expects for **cloud backup of extension settings**. The client is implemented in the extension repo; the accounts service (`accounts.betterseqta.org`) must implement these endpoints.
+
+## Purpose
+
+- Store **one JSON document per authenticated BetterSEQTA Cloud user** representing a snapshot of the extension’s `chrome.storage.local` data (theme, layout, plugin settings, `plugin.*` keys, etc.).
+- The extension **does not upload OAuth tokens** (`bsplus_token`, `bsplus_refresh_token`, `bsplus_client_id`, `bsplus_user`). Those remain only on the client.
+- **Download** replaces local storage with the stored snapshot, then the client reapplies the current device’s session tokens so the user stays signed in.
+
+## Base URL
+
+All routes below are relative to:
+
+`https://accounts.betterseqta.org`
+
+## Authentication
+
+Every request must include:
+
+```http
+Authorization: Bearer <access_token>
+```
+
+Use the same **access tokens** issued by the existing BetterSEQTA+ OAuth flows (`/api/bsplus/login`, `/api/bsplus/refresh`). Resolve the user from the token; the document is scoped to that user.
+
+## Endpoints
+
+### `PUT /api/bsplus/settings/sync`
+
+Upserts the caller’s settings backup.
+
+**Request body (JSON):**
+
+```json
+{
+  "schemaVersion": 1,
+  "data": {
+    "...": "flat key-value map mirroring extension storage (see Payload shape)"
+  }
+}
+```
+
+- **`schemaVersion`**: integer. The extension currently sends `1`. The server may reject unknown major versions or store it for future migrations.
+- **`data`**: object whose keys are storage keys (strings) and values are JSON-serializable values (same types as stored in `chrome.storage.local`).
+
+**Success response:** HTTP `200` (or `201` if you prefer create semantics). Example:
+
+```json
+{
+  "updated_at": "2026-04-07T12:00:00.000Z"
+}
+```
+
+`updated_at` should be an ISO 8601 timestamp of the save time. The extension displays success without requiring extra fields.
+
+**Error responses:** Standard JSON error body if applicable, e.g. `{ "error": "message" }`, with appropriate HTTP status (`401`, `413`, `422`, etc.).
+
+---
+
+### `GET /api/bsplus/settings/sync`
+
+Returns the caller’s latest settings backup.
+
+**Success response:** HTTP `200` with body:
+
+```json
+{
+  "schemaVersion": 1,
+  "data": { },
+  "updated_at": "2026-04-07T12:00:00.000Z"
+}
+```
+
+- **`data`**: required for restore; must be the same shape as accepted in `PUT` (flat map of storage keys).
+- **`schemaVersion`**: optional but recommended; should match what was stored.
+- **`updated_at`**: optional; included for UX if the client shows “last backup” time.
+
+**No backup yet:** HTTP **`404`**. The extension treats this as “nothing in the cloud” and shows an error to the user.
+
+**Error responses:** `401` if the token is invalid, etc.
+
+---
+
+## Suggested database shape
+
+Example relational layout:
+
+| Column        | Type        | Notes |
+|---------------|-------------|--------|
+| `user_id`     | FK → users  | Unique per backup row (one row per user). |
+| `payload`     | JSON / JSONB| Store `{ "schemaVersion", "data" }` or only `data` + separate `schema_version` column. |
+| `updated_at`  | timestamptz | Set on each successful `PUT`. |
+
+Unique constraint on `user_id`.
+
+## Semantics
+
+- **Last write wins:** each `PUT` replaces the stored backup for that user.
+- **Optional later:** `If-Unmodified-Since` or a `revision` field for conflict detection (not required for v1).
+
+## Security and privacy
+
+- **Encryption at rest** for `payload` is recommended.
+- Payload may contain **school-related UI preferences** and plugin data; treat as **user data** under your privacy policy.
+- **Do not require or store** refresh/access tokens in the payload; the extension already strips them on upload.
+
+### Never included in the sync payload (`chrome.storage.local` only)
+
+The backup is a flat JSON map of **`chrome.storage.local`** keys. It does **not** include:
+
+- **IndexedDB** — e.g. the Global Search index (`betterseqta-index` and related DBs) lives outside extension storage and is never serialized here.
+- **OAuth / session keys** — `bsplus_token`, `bsplus_refresh_token`, `bsplus_client_id`, `bsplus_user`, plus legacy `cloudAccessToken` / `cloudUsername`.
+- **Assessment Averages caches** — `plugin.assessments-average.storage.assessments`, `plugin.assessments-average.storage.weightings` (school assessment data).
+- **Keys under** `plugin.global-search.storage.*` — reserved so any future plugin storage cache there is not synced.
+- **`bsplus_cloud_settings_known_remote_updated_at`** — client-only watermark for auto-sync (not part of the cloud backup blob).
+
+On restore, those keys are **not** taken from the server; the device keeps its current local values.
+
+## Related endpoint: `GET /api/user/cloud-summary`
+
+The extension may call **`GET /api/user/cloud-summary`** (same host, `Authorization: Bearer`) for a **small** JSON summary (e.g. whether DesQTA / BetterSEQTA+ cloud settings exist and **`bsplus.updated_at`** / **`schemaVersion`**). It does **not** return the large settings `data` blob.
+
+- **Auto-sync flow:** compare `bsplus.updated_at` to a **client-only** watermark stored in extension storage as **`bsplus_cloud_settings_known_remote_updated_at`** (never uploaded, never applied from the server payload; preserved on restore).
+- If the server timestamp is newer (and `schemaVersion` is not ahead of the client), the client then calls **`GET /api/bsplus/settings/sync`** and applies the full envelope as usual.
+
+This uses standard **WebExtension** APIs (`browser.alarms`, `runtime` messages, `storage`) and works on **Chromium and Firefox** builds (see `webextension-polyfill`).
+
+## Client reference (extension)
+
+- Upload / dev export: `buildUploadPayload` / `getSnapshotForUpload` in `src/seqta/utils/cloudSettingsSync.ts` (strips OAuth-related keys, sensitive device keys, and **`bsplus_cloud_settings_known_remote_updated_at`**).
+- Download: `applyDownloadedEnvelope` after `GET`; local auth keys, sensitive device keys, and the client-only watermark key are merged back after `chrome.storage.local.clear()`.
+- Auto sync (summary, debounced upload, alarms): `src/background/cloudSettingsAutoSync.ts`; content script triggers a poll on each verified SEQTA Learn/Engage page load (top frame) via `cloudSettingsPoll`.

docs/GETTING_STARTED_CONTRIBUTING.md

@@ -1,5 +1,7 @@
 # Getting Started as a Contributor
 
+**Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
+
 Welcome to BetterSEQTA+! 🎉 This guide will walk you through making your first contribution, even if you're completely new to the project.
 
 ## Table of Contents
@@ -222,7 +224,7 @@ git push origin your-branch-name
 
 ### Stuck? Here's How to Get Unstuck
 
-1. **Check the docs** - [Architecture guide](./ARCHITECTURE.md) explains everything
+1. **Check the docs** - The [architecture guide](https://docs.betterseqta.org/architecture/) explains everything
 2. **Search existing issues** - Someone might have had the same problem
 3. **Ask in Discord** - Our community is super helpful
 4. **Create an issue** - If you found a bug or need help

docs/README.md

@@ -1,30 +1,36 @@
 # BetterSEQTA+ Documentation
 
-🚧 DOCS UNDER CONSTRUCTION! 🚧
+**Canonical documentation lives at [docs.betterseqta.org](https://docs.betterseqta.org/).** The pages below are the same topics; use the site for search, navigation, and the latest updates.
-
-Welcome to the BetterSEQTA+ documentation! This documentation will help you understand how BetterSEQTA+ works and how to extend it with plugins and new features.
 
 ## Table of Contents
 
 ### Getting Started
 
-- [Project Overview](./README.md) - This file
+- [Documentation home](https://docs.betterseqta.org/)
-- [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
+- [Installation](https://docs.betterseqta.org/install/)
-- [Getting Started Contributing](./GETTING_STARTED_CONTRIBUTING.md) - **Start here!** Complete beginner-friendly guide
+- [Contributing](https://docs.betterseqta.org/contributing/)
-- [Architecture Guide](./ARCHITECTURE.md) - How BetterSEQTA+ works under the hood
+- [Architecture](https://docs.betterseqta.org/architecture/)
-- [Contributing Guide](../CONTRIBUTING.md) - Official contribution guidelines
+- [Contribution guidelines (repository)](../CONTRIBUTING.md)
-- [Troubleshooting](./TROUBLESHOOTING.md) - Common issues and solutions
+- [Troubleshooting](https://docs.betterseqta.org/troubleshooting/)
 
-### Plugin System
+### Features & customization
 
-- [Creating Your First Plugin](./plugins/README.md) - A comprehensive, beginner-friendly guide to creating plugins
+- [Features](https://docs.betterseqta.org/features/)
-- [Plugin API Reference](./plugins/api-reference.md) - Detailed technical documentation of the plugin APIs
+- [Themes & customization](https://docs.betterseqta.org/customization/)
+- [Theme creation](https://docs.betterseqta.org/theme-creation/)
+
+### Plugin system
+
+- [Plugins overview](https://docs.betterseqta.org/plugins/)
+- [Plugin development](https://docs.betterseqta.org/plugin-development/)
+- [Plugin API](https://docs.betterseqta.org/plugin-api/)
+- [Example plugin](https://docs.betterseqta.org/example-plugin/)
 
 ## Core Concepts
 
 BetterSEQTA+ is built around several core concepts:
 
-1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. Check out our [plugin guide](./plugins/README.md) to learn how to create your own!
+1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. See the [plugins documentation](https://docs.betterseqta.org/plugins/).
 
 2. **Type-Safe Settings**: Each plugin can define settings that are type-safe and automatically rendered in the settings UI. The settings system uses TypeScript decorators to make it easy to define settings with proper typing.
 
@@ -36,19 +42,13 @@ BetterSEQTA+ is built around several core concepts:
 
 If you need help with BetterSEQTA+, you can:
 
-- [Open an Issue](https://github.com/SeqtaLearning/betterseqta-plus/issues) - Report bugs or request features
+- [Open an Issue](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) - Report bugs or request features
 - [Join the Discord](https://discord.gg/YzmbnCDkat) - Chat with the community
 - [Email the Maintainers](mailto:betterseqta.plus@gmail.com) - Contact the maintainers directly
 
 ## Contributing to the Documentation
 
-We welcome contributions to the documentation! If you find something unclear or missing, please open an issue or submit a pull request.
+We welcome contributions to the documentation. The published site is built from the documentation repository; see [Contributing](https://docs.betterseqta.org/contributing/) for how to help.
-
-To contribute to the documentation:
-
-1. Fork the repository
-2. Make your changes to the documentation files
-3. Submit a pull request with a clear description of your changes
 
 ## License
 

docs/THEME_CREATION.md

@@ -1,5 +1,7 @@
 # Theme Creation Guide
 
+**Published version:** [docs.betterseqta.org/theme-creation/](https://docs.betterseqta.org/theme-creation/)
+
 This guide covers everything you need to know about creating custom themes for BetterSEQTA+.
 
 ## Table of Contents

docs/TROUBLESHOOTING.md

@@ -1,5 +1,7 @@
 # Troubleshooting Guide
 
+**Published version:** [docs.betterseqta.org/troubleshooting/](https://docs.betterseqta.org/troubleshooting/)
+
 Having issues with BetterSEQTA+ development? This guide covers the most common problems and their solutions.
 
 ## Table of Contents

docs/contributing.md

@@ -1,5 +1,7 @@
 # Contributing to BetterSEQTA+
 
+**Published version:** [docs.betterseqta.org/contributing/](https://docs.betterseqta.org/contributing/)
+
 Thank you for your interest in contributing to BetterSEQTA+! This document provides guidelines and instructions for contributing to the project.
 
 ## Table of Contents
@@ -57,7 +59,7 @@ Key points:
 
 5. **Install in Chrome/Firefox**
 
-   Follow the [installation instructions](./installation.md#development-installation) to load the development version into your browser.
+   Follow the [installation instructions](https://docs.betterseqta.org/install/) to load the development version into your browser.
 
 ### Project Structure
 
@@ -246,8 +248,8 @@ Join our community channels to discuss the project, get help, and connect with o
 
 If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
 
-- [Creating Your First Plugin](./plugins/creating-plugins.md)
+- [Plugin development](https://docs.betterseqta.org/plugin-development/)
-- [Plugin API Reference](./advanced/plugin-api.md)
+- [Plugin API](https://docs.betterseqta.org/plugin-api/)
 
 ## Recognition
 

docs/installation.md

@@ -1,5 +1,7 @@
 # Installing BetterSEQTA+
 
+**Published version:** [docs.betterseqta.org/install/](https://docs.betterseqta.org/install/)
+
 This guide will walk you through the process of installing and setting up BetterSEQTA+ for development or usage.
 
 ## Prerequisites
@@ -178,5 +180,5 @@ bun run dev
 
 Now that you have BetterSEQTA+ installed, you can:
 
-- [Getting Started with Plugins](./plugins/getting-started.md)
+- [Plugins](https://docs.betterseqta.org/plugins/)
-- [Contribute to the project](../CONTRIBUTING.md)
+- [Contribute to the project](https://docs.betterseqta.org/contributing/) · [Repository CONTRIBUTING.md](../CONTRIBUTING.md)

docs/plugins/EXAMPLE_PLUGIN.md

@@ -1,5 +1,7 @@
 # Example Plugin Template
 
+**Published version:** [docs.betterseqta.org/example-plugin/](https://docs.betterseqta.org/example-plugin/)
+
 This is a complete, working example of a simple BetterSEQTA+ plugin. You can copy this code and modify it to create your own plugin!
 
 ## What This Example Does
@@ -328,8 +330,8 @@ Once you've got this working:
 ## Need Help?
 
 - 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
-- 📚 Read our [Plugin Development Guide](./README.md)
+- 📚 Read the [plugin documentation](https://docs.betterseqta.org/plugins/)
-- 🐛 Check the [Troubleshooting Guide](../TROUBLESHOOTING.md)
+- 🐛 Check the [troubleshooting guide](https://docs.betterseqta.org/troubleshooting/)
 - 📝 Open an issue on GitHub
 
 Happy coding! 🎉 

docs/plugins/README.md

@@ -1,5 +1,7 @@
 # Creating Plugins for BetterSEQTA+
 
+**Published version:** [docs.betterseqta.org/plugins/](https://docs.betterseqta.org/plugins/) · [Plugin development](https://docs.betterseqta.org/plugin-development/) · [Plugin API](https://docs.betterseqta.org/plugin-api/)
+
 Hey there! 👋 So you want to create a plugin for BetterSEQTA+? That's awesome! This guide will walk you through everything you need to know, from the very basics to more advanced features. Don't worry if you're new to this - we'll explain everything step by step.
 
 ## What is a Plugin?
@@ -294,4 +296,4 @@ Got stuck? No worries! Here's where you can get help:
 - Check out the built-in plugins in the `src/plugins/built-in` folder
 - Open an issue on our [GitHub page](https://github.com/betterseqta/betterseqta-plus/issues)
 
-Happy coding and feel free to checkout the api reference [here](./api-reference.md)
+Happy coding and feel free to check out the [plugin API](https://docs.betterseqta.org/plugin-api/) on the documentation site.

docs/plugins/api-reference.md

@@ -1,6 +1,8 @@
 # Plugin API Reference
 
-This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see [Creating Your First Plugin](./README.md).
+**Published version:** [docs.betterseqta.org/plugin-api/](https://docs.betterseqta.org/plugin-api/)
+
+This document provides detailed technical information about BetterSEQTA+'s plugin APIs. For a beginner-friendly introduction, see the [plugins section](https://docs.betterseqta.org/plugins/) at [docs.betterseqta.org](https://docs.betterseqta.org/).
 
 ## Plugin Structure
 

lib/firefoxStripFunctionProbe.ts

@@ -0,0 +1,43 @@
+import type { Plugin } from "vite";
+
+/**
+ * Firefox extension pages forbid eval / `Function` constructor. Some deps still emit:
+ * - `Function(\`return this\`)()` (lodash-style global)
+ * - `try { return Function(\`\`) / new Function("") … }` (feature probes, e.g. PDF.js / ORT)
+ */
+export function firefoxStripFunctionProbe(): Plugin {
+  return {
+    name: "firefox-strip-function-probe",
+    apply: "build",
+    enforce: "post",
+    generateBundle(_options, bundle) {
+      if ((process.env.MODE || "chrome").toLowerCase() !== "firefox") return;
+
+      const literalReplacements: [string, string][] = [
+        ['try{return new Function(""),!0}catch{return!1}', "return!1"],
+        ["try{return new Function(''),!0}catch{return!1}", "return!1"],
+        ['try{return new Function(""),true}catch{return false}', "return false"],
+        ["try{return new Function(''),true}catch{return false}", "return false"],
+        // Empty template literal probe (minifier output)
+        ["try{return Function(``),!0}catch{return!1}", "return!1"],
+      ];
+
+      for (const chunk of Object.values(bundle)) {
+        if (chunk.type !== "chunk" || typeof chunk.code !== "string") continue;
+        let { code } = chunk;
+
+        code = code.replace(/Function\(`return this`\)\(\)/g, "(globalThis)");
+        code = code.replace(/Function\("return this"\)\(\)/g, "(globalThis)");
+        code = code.replace(/Function\('return this'\)\(\)/g, "(globalThis)");
+
+        for (const [from, to] of literalReplacements) {
+          if (code.includes(from)) {
+            code = code.split(from).join(to);
+          }
+        }
+
+        chunk.code = code;
+      }
+    },
+  };
+}

package.json

@@ -1,10 +1,11 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.4.14",
+  "version": "3.6.0",
   "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 and add heaps more features!",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
+    "postinstall": "node scripts/copy-pdfjs-assets.mjs",
     "autoaudit": "npm audit && npm audit fix && npm run build",
     "dev": "cross-env MODE=chrome vite dev",
     "dev:firefox": "cross-env MODE=firefox vite build --watch",
@@ -31,14 +32,14 @@
   "author": {
     "name": "SethBurkart123",
     "email": "betterseqta.plus@gmail.com",
-    "url": "https://github.com/BetterSEQTA/BetterSEQTA-plus"
+    "url": "https://github.com/BetterSEQTA/BetterSEQTA-Plus"
   },
   "license": "MIT",
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.26.9",
     "@babel/runtime": "^7.26.9",
-    "@bedframe/cli": "^0.0.95",
+    "@bedframe/cli": "^0.1.2",
-    "@crxjs/vite-plugin": "^2.2.0",
+    "@crxjs/vite-plugin": "^2.4.0",
     "@types/mime-types": "^3.0.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -49,7 +50,7 @@
     "mime-types": "^3.0.1",
     "prettier": "^3.5.3",
     "process": "^0.11.10",
-    "publish-browser-extension": "^4.0.0",
+    "publish-browser-extension": "^4.0.4",
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
     "semver": "^7.7.1",
@@ -57,7 +58,7 @@
     "url": "^0.11.4"
   },
   "dependencies": {
-    "@bedframe/core": "^0.0.46",
+    "@bedframe/core": "^0.1.0",
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-css": "^6.3.1",
@@ -65,13 +66,14 @@
     "@codemirror/search": "^6.5.10",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.4",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tsconfig/svelte": "^5.0.4",
     "@types/chrome": "^0.1.4",
     "@types/color": "^4.2.0",
     "@types/lodash": "^4.17.16",
     "@types/node": "^24.3.0",
+    "@types/qrcode": "^1.5.6",
     "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^10.0.0",
     "@types/webextension-polyfill": "^0.12.3",
@@ -97,15 +99,16 @@
     "motion": "^12.4.12",
     "pdfjs-dist": "^5.4.530",
     "postcss": "^8.5.3",
+    "qrcode": "^1.5.4",
     "react": "17",
     "react-best-gradient-color-picker": "3.0.11",
     "react-dom": "17",
     "rss-parser": "^3.13.0",
     "sortablejs": "^1.15.6",
-    "svelte": "^5.22.6",
+    "svelte": "^5.46.4",
     "typescript": "^5.8.2",
     "uuid": "^11.1.0",
-    "vite": "^6.2.1",
+    "vite": "^8.0.5",
     "webextension-polyfill": "^0.12.0"
   }
 }

scripts/copy-pdfjs-assets.mjs

@@ -0,0 +1,17 @@
+import { copyFileSync, mkdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const pdfjsRoot = join(root, "node_modules", "pdfjs-dist");
+const outDir = join(root, "src", "public", "resources", "pdfjs");
+
+mkdirSync(outDir, { recursive: true });
+copyFileSync(
+  join(pdfjsRoot, "build", "pdf.worker.min.mjs"),
+  join(outDir, "pdf.worker.min.mjs"),
+);
+copyFileSync(
+  join(pdfjsRoot, "legacy", "build", "pdf.min.mjs"),
+  join(outDir, "pdf.legacy.min.mjs"),
+);

src/SEQTA.ts

@@ -11,6 +11,30 @@ import { main } from "@/seqta/main";
 import { delay } from "./seqta/utils/delay";
 import { initializeHideSensitiveToggle } from "@/seqta/utils/hideSensitiveToggle";
 
+function registerFetchSeqtaAppLinkListener() {
+  browser.runtime.onMessage.addListener((request, _sender, sendResponse) => {
+    if (request?.type !== "fetchSeqtaAppLink") return false;
+    void (async () => {
+      try {
+        const res = await fetch(`${location.origin}/seqta/student/load/profile`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({}),
+        });
+        const data = await res.json();
+        const statusOk = data?.status === "200" || data?.status === 200;
+        const raw = data?.payload?.app_link;
+        const appLink = typeof raw === "string" && raw.length > 0 ? raw : null;
+        sendResponse({ appLink: statusOk ? appLink : null });
+      } catch {
+        sendResponse({ appLink: null });
+      }
+    })();
+    return true;
+  });
+}
+
 export let MenuOptionsOpen = false;
 
 var IsSEQTAPage = false;
@@ -26,10 +50,21 @@ if (document.childNodes[1]) {
 }
 
 async function init() {
-  if (hasSEQTAText && document.title.includes("SEQTA Learn") && !IsSEQTAPage) {
+  if (
+    hasSEQTAText &&
+    (document.title.includes("SEQTA Learn") ||
+      document.title.includes("SEQTA Engage")) &&
+    !IsSEQTAPage
+  ) {
     IsSEQTAPage = true;
     console.info("[BetterSEQTA+] Verified SEQTA Page");
 
+    if (typeof window !== "undefined" && window === window.top) {
+      void browser.runtime.sendMessage({ type: "cloudSettingsPoll" }).catch(() => {});
+    }
+
+    registerFetchSeqtaAppLinkListener();
+
     const documentLoadStyle = document.createElement("style");
     documentLoadStyle.textContent = documentLoadCSS;
     document.head.appendChild(documentLoadStyle);

src/background.ts

@@ -1,12 +1,21 @@
 import browser from "webextension-polyfill";
 import type { SettingsState } from "@/types/storage";
 import { fetchNews } from "./background/news";
+import {
+  initCloudSettingsAutoSync,
+  performCloudSettingsDownloadWithRetry,
+  performCloudSettingsUploadWithRetry,
+  runCloudSettingsPoll,
+} from "./background/cloudSettingsAutoSync";
 
 function reloadSeqtaPages() {
   const result = browser.tabs.query({});
   function open(tabs: any) {
     for (let tab of tabs) {
-      if (tab.title.includes("SEQTA Learn")) {
+      if (
+        tab.title?.includes("SEQTA Learn") ||
+        tab.title?.includes("SEQTA Engage")
+      ) {
         browser.tabs.reload(tab.id);
       }
     }
@@ -14,52 +23,307 @@ function reloadSeqtaPages() {
   result.then(open, console.error);
 }
 
-// @ts-ignore
+/** Callback for sending a response back to the message sender */
+type MessageSender = { (response?: unknown): void };
+
+function handleFetchThemes(request: any, sendResponse: MessageSender): boolean {
+  const { token } = request;
+  const apiUrl = `https://betterseqta.org/api/themes?type=betterseqta&limit=100&nocache=${Date.now()}`;
+  const githubUrl = `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${Date.now()}`;
+  const headers: Record<string, string> = {};
+  if (token) headers["Authorization"] = `Bearer ${token}`;
+  fetch(apiUrl, { cache: "no-store", headers })
+    .then((r) => r.json())
+    .then(sendResponse)
+    .catch((err) => {
+      console.warn("[Background] fetchThemes API failed, trying GitHub fallback:", err?.message);
+      fetch(githubUrl, { cache: "no-store" })
+        .then((r) => r.json())
+        .then((data) => sendResponse({ success: true, data: { themes: data.themes ?? [] } }))
+        .catch((fallbackErr) => {
+          console.error("[Background] fetchThemes GitHub fallback error:", fallbackErr);
+          sendResponse({ success: false, error: fallbackErr?.message });
+        });
+    });
+  return true;
+}
+
+function handleFetchThemeDetails(request: any, sendResponse: MessageSender): boolean {
+  const { themeId, token } = request;
+  if (!themeId || typeof themeId !== "string") {
+    sendResponse({ success: false, error: "Missing themeId" });
+    return false;
+  }
+  const headers: Record<string, string> = {};
+  if (token) headers["Authorization"] = `Bearer ${token}`;
+  fetch(`https://betterseqta.org/api/themes/${themeId}`, { cache: "no-store", headers })
+    .then((r) => r.json())
+    .then(sendResponse)
+    .catch((err) => {
+      console.error("[Background] fetchThemeDetails error:", err);
+      sendResponse({ success: false, error: err?.message });
+    });
+  return true;
+}
+
+function handleFetchFromUrl(request: any, sendResponse: MessageSender): boolean {
+  const { url } = request;
+  if (!url || typeof url !== "string") {
+    sendResponse({ error: "Missing url" });
+    return false;
+  }
+  fetch(url, { cache: "no-store" })
+    .then((r) => r.json())
+    .then((data) => sendResponse({ data }))
+    .catch((err) => {
+      console.error("[Background] fetchFromUrl error:", err);
+      sendResponse({ error: err?.message });
+    });
+  return true;
+}
+
+async function parseJsonResponse(r: Response): Promise<any> {
+  const text = await r.text();
+  try {
+    return text ? JSON.parse(text) : {};
+  } catch {
+    return {};
+  }
+}
+
+function handleCloudReserveClient(request: any, sendResponse: MessageSender): boolean {
+  const redirect_uri = request.redirect_uri ?? "https://accounts.betterseqta.org/auth/bsplus/callback";
+  fetch("https://accounts.betterseqta.org/api/bsplus/client/reserve", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ redirect_uri }),
+  })
+    .then(async (r) => {
+      const data = await parseJsonResponse(r);
+      if (!r.ok) sendResponse({ error: data?.error ?? `Reserve failed (${r.status})` });
+      else sendResponse(data);
+    })
+    .catch((err) => {
+      console.error("[Background] cloudReserveClient error:", err);
+      sendResponse({ error: err?.message ?? "Network error" });
+    });
+  return true;
+}
+
+function handleCloudLogin(request: any, sendResponse: MessageSender): boolean {
+  const { client_id, redirect_uri, login, password } = request;
+  if (!client_id || !redirect_uri || !login || !password) {
+    sendResponse({ error: "Missing client_id, redirect_uri, login, or password" });
+    return false;
+  }
+  fetch("https://accounts.betterseqta.org/api/bsplus/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ client_id, redirect_uri, login, password }),
+  })
+    .then(async (r) => {
+      const data = await parseJsonResponse(r);
+      if (!r.ok) sendResponse({ error: data?.error ?? "Login failed" });
+      else sendResponse(data);
+    })
+    .catch((err) => {
+      console.error("[Background] cloudLogin error:", err);
+      sendResponse({ error: err?.message ?? "Network error" });
+    });
+  return true;
+}
+
+function handleCloudRefresh(request: any, sendResponse: MessageSender): boolean {
+  const { refresh_token, client_id } = request;
+  if (!refresh_token || !client_id) {
+    sendResponse({ error: "Missing refresh_token or client_id" });
+    return false;
+  }
+  fetch("https://accounts.betterseqta.org/api/bsplus/refresh", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ refresh_token, client_id }),
+  })
+    .then(async (r) => {
+      const data = await parseJsonResponse(r);
+      if (!r.ok) sendResponse({ error: data?.error ?? "Refresh failed" });
+      else sendResponse(data);
+    })
+    .catch((err) => {
+      console.error("[Background] cloudRefresh error:", err);
+      sendResponse({ error: err?.message ?? "Network error" });
+    });
+  return true;
+}
+
+function handleCloudSettingsUpload(request: any, sendResponse: MessageSender): boolean {
+  void (async () => {
+    try {
+      const token = request.token as string | undefined;
+      if (!token) {
+        sendResponse({ success: false, error: "Not authenticated" });
+        return;
+      }
+      const res = await performCloudSettingsUploadWithRetry(token);
+      sendResponse({
+        success: res.success,
+        error: res.error,
+        updated_at: res.updated_at,
+      });
+    } catch (err) {
+      console.error("[Background] cloudSettingsUpload error:", err);
+      sendResponse({
+        success: false,
+        error: err instanceof Error ? err.message : "Upload failed",
+      });
+    }
+  })();
+  return true;
+}
+
+function handleCloudSettingsDownload(request: any, sendResponse: MessageSender): boolean {
+  void (async () => {
+    try {
+      const token = request.token as string | undefined;
+      if (!token) {
+        sendResponse({ success: false, error: "Not authenticated" });
+        return;
+      }
+      const res = await performCloudSettingsDownloadWithRetry(token);
+      sendResponse({
+        success: res.success,
+        notFound: res.notFound,
+        error: res.error,
+        updated_at: res.updated_at,
+      });
+    } catch (err) {
+      console.error("[Background] cloudSettingsDownload error:", err);
+      sendResponse({
+        success: false,
+        error: err instanceof Error ? err.message : "Download failed",
+      });
+    }
+  })();
+  return true;
+}
+
+function handleCloudFavorite(request: any, sendResponse: MessageSender): boolean {
+  const { themeId, token, action } = request;
+  if (!themeId || !token) {
+    sendResponse({ success: false, error: "Theme ID and token required" });
+    return false;
+  }
+  const isFavorite = action === "favorite";
+  fetch(`https://betterseqta.org/api/themes/${themeId}/favorite`, {
+    method: isFavorite ? "POST" : "DELETE",
+    headers: { Authorization: `Bearer ${token}` },
+  })
+    .then((r) => r.json())
+    .then(sendResponse)
+    .catch((err) => {
+      console.error("[Background] cloudFavorite error:", err);
+      sendResponse({ success: false, error: err?.message });
+    });
+  return true;
+}
+
+/** Handler for a message type; receives request, sendResponse, and optional sender (for tab routing) */
+type MessageHandler = {
+  (request: any, sendResponse: MessageSender, sender?: browser.Runtime.MessageSender): boolean | void;
+};
+
+function isSeqtaOrigin(origin: string): boolean {
+  try {
+    const u = new URL(origin);
+    return u.hostname.includes("seqta") || u.hostname.endsWith(".edu.au");
+  } catch {
+    return false;
+  }
+}
+
+const MESSAGE_HANDLERS: Record<string, MessageHandler> = {
+  reloadTabs: () => reloadSeqtaPages(),
+  extensionPages: (req) => {
+    browser.tabs.query({}).then((tabs) => {
+      for (const tab of tabs) {
+        if (tab.url?.includes("chrome-extension://")) browser.tabs.sendMessage(tab.id!, req);
+      }
+    });
+  },
+  currentTab: (req, sendResponse) => {
+    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+      browser.tabs.sendMessage(tabs[0].id!, req).then(sendResponse);
+    });
+    return true;
+  },
+  githubTab: () => {
+    void browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
+  },
+  setDefaultStorage: () => SetStorageValue(getDefaultValues()),
+  sendNews: (req, sendResponse) => {
+    fetchNews(req.source ?? "australia", sendResponse);
+    return true;
+  },
+  fetchThemes: handleFetchThemes,
+  fetchThemeDetails: handleFetchThemeDetails,
+  fetchFromUrl: handleFetchFromUrl,
+  cloudReserveClient: handleCloudReserveClient,
+  cloudLogin: handleCloudLogin,
+  cloudRefresh: handleCloudRefresh,
+  cloudFavorite: handleCloudFavorite,
+  cloudSettingsUpload: handleCloudSettingsUpload,
+  cloudSettingsDownload: handleCloudSettingsDownload,
+  cloudSettingsPoll: () => {
+    void runCloudSettingsPoll();
+    return false;
+  },
+  getSeqtaSession: (req: { baseUrl?: string }, sendResponse: MessageSender, sender?: browser.Runtime.MessageSender) => {
+    (async () => {
+      try {
+        let tabId = sender?.tab?.id;
+        let originForCheck: string | undefined = req.baseUrl;
+
+        if (tabId == null) {
+          const tabs = await browser.tabs.query({ active: true, lastFocusedWindow: true });
+          const tab = tabs[0];
+          if (!tab?.id || !tab.url) {
+            sendResponse({ appLink: null });
+            return;
+          }
+          tabId = tab.id;
+          if (!originForCheck) originForCheck = new URL(tab.url).origin;
+        } else if (!originForCheck && sender?.tab?.url) {
+          originForCheck = new URL(sender.tab.url).origin;
+        }
+
+        if (!originForCheck || !isSeqtaOrigin(originForCheck)) {
+          sendResponse({ appLink: null });
+          return;
+        }
+
+        const reply = (await browser.tabs.sendMessage(tabId, { type: "fetchSeqtaAppLink" })) as
+          | { appLink?: string | null }
+          | undefined;
+        const appLink = typeof reply?.appLink === "string" && reply.appLink.length > 0 ? reply.appLink : null;
+        sendResponse({ appLink });
+      } catch (err) {
+        console.error("[Background] getSeqtaSession error:", err);
+        sendResponse({ appLink: null });
+      }
+    })();
+    return true;
+  },
+};
+
 browser.runtime.onMessage.addListener(
-  (request: any, _: any, sendResponse: (response?: any) => void) => {
+  // @ts-ignore - OnMessageListener expects literal true for async, we return boolean
-    switch (request.type) {
+  (request: any, sender: browser.Runtime.MessageSender, sendResponse: MessageSender) => {
-      case "reloadTabs":
+    const handler = MESSAGE_HANDLERS[request.type];
-        reloadSeqtaPages();
+    if (handler) {
-        break;
+      const result = handler(request, sendResponse, sender);
-
+      return result === true;
-      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;
-
-      case "githubTab":
-        browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
-        break;
-
-      case "setDefaultStorage":
-        SetStorageValue(getDefaultValues());
-        break;
-
-      case "sendNews":
-        fetchNews(request.source ?? "australia", sendResponse);
-        return true;
-
-      default:
     console.log("Unknown request type");
-    }
-
     return false;
   },
 );
@@ -127,6 +391,11 @@ function getDefaultValues(): SettingsState {
     customshortcuts: [],
     lettergrade: false,
     newsSource: "australia",
+    iconOnlySidebar: false,
+    adaptiveThemeColour: false,
+    adaptiveThemeGradient: false,
+    adaptiveThemeColourTransition: true,
+    autoCloudSettingsSync: true,
   };
 }
 
@@ -144,3 +413,5 @@ browser.runtime.onInstalled.addListener(function (event) {
     browser.storage.local.set({ justupdated: true });
   }
 });
+
+initCloudSettingsAutoSync({ reloadSeqtaPages });

src/background/cloudSettingsAutoSync.ts

@@ -0,0 +1,406 @@
+import browser from "webextension-polyfill";
+import {
+  applyDownloadedEnvelope,
+  buildUploadPayload,
+  BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY,
+  CLOUD_SETTINGS_SYNC_SCHEMA_VERSION,
+  isKeyIncludedInCloudUploadPayload,
+  setKnownRemoteUpdatedAt,
+} from "@/seqta/utils/cloudSettingsSync";
+
+const ACCOUNTS_BASE = "https://accounts.betterseqta.org";
+export const CLOUD_SUMMARY_URL = `${ACCOUNTS_BASE}/api/user/cloud-summary`;
+const CLOUD_SETTINGS_SYNC_URL = `${ACCOUNTS_BASE}/api/bsplus/settings/sync`;
+const REFRESH_URL = `${ACCOUNTS_BASE}/api/bsplus/refresh`;
+
+const ALARM_NAME = "bsplus_cloud_settings_auto_sync";
+const PERIOD_MINUTES = 60;
+const UPLOAD_DEBOUNCE_MS = 2000;
+
+type CloudSummaryResponse = {
+  desqta?: unknown;
+  bsplus?: { updated_at: string; schemaVersion: number } | null;
+};
+
+let reloadSeqtaPagesFn: (() => void) | null = null;
+let suppressAutoUploadDuringRestore = false;
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+let pollInFlight: Promise<void> | null = null;
+
+function isAutoCloudSyncEnabled(all: Record<string, unknown>): boolean {
+  return all.autoCloudSettingsSync !== false;
+}
+
+async function parseJsonResponse(r: Response): Promise<any> {
+  const text = await r.text();
+  try {
+    return text ? JSON.parse(text) : {};
+  } catch {
+    return {};
+  }
+}
+
+async function getAccessToken(): Promise<string | null> {
+  const { bsplus_token } = await browser.storage.local.get("bsplus_token");
+  return typeof bsplus_token === "string" && bsplus_token.length > 0 ? bsplus_token : null;
+}
+
+async function tryRefreshTokens(): Promise<boolean> {
+  const result = await browser.storage.local.get([
+    "bsplus_refresh_token",
+    "bsplus_client_id",
+    "bsplus_user",
+  ]);
+  const refresh_token = result.bsplus_refresh_token as string | undefined;
+  const client_id = result.bsplus_client_id as string | undefined;
+  if (!refresh_token || !client_id) return false;
+
+  try {
+    const r = await fetch(REFRESH_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refresh_token, client_id }),
+    });
+    const data = await parseJsonResponse(r);
+    if (!r.ok || !data.access_token || !data.refresh_token) return false;
+
+    await browser.storage.local.set({
+      bsplus_token: data.access_token,
+      bsplus_refresh_token: data.refresh_token,
+      bsplus_user: data.user ?? result.bsplus_user,
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function isServerTimestampNewer(serverIso: string, localIso: string | undefined): boolean {
+  const a = Date.parse(serverIso);
+  if (Number.isNaN(a)) return false;
+  if (localIso === undefined || localIso === "") return true;
+  const b = Date.parse(localIso);
+  if (Number.isNaN(b)) return true;
+  return a > b;
+}
+
+async function fetchCloudSummaryOnce(
+  token: string,
+): Promise<
+  | { ok: true; data: CloudSummaryResponse }
+  | { ok: false; unauthorized: boolean; error?: string }
+> {
+  try {
+    const r = await fetch(CLOUD_SUMMARY_URL, {
+      headers: { Authorization: `Bearer ${token}` },
+      cache: "no-store",
+    });
+    const data = (await parseJsonResponse(r)) as CloudSummaryResponse;
+    if (r.status === 401) return { ok: false, unauthorized: true };
+    if (!r.ok) {
+      return {
+        ok: false,
+        unauthorized: false,
+        error: (data as { error?: string })?.error ?? `Summary failed (${r.status})`,
+      };
+    }
+    return { ok: true, data };
+  } catch (e) {
+    return {
+      ok: false,
+      unauthorized: false,
+      error: e instanceof Error ? e.message : "Network error",
+    };
+  }
+}
+
+async function fetchCloudSummaryWithAuthRetry(
+  token: string,
+): Promise<CloudSummaryResponse | null> {
+  let t = token;
+  for (let attempt = 0; attempt < 2; attempt++) {
+    const res = await fetchCloudSummaryOnce(t);
+    if (res.ok) return res.data;
+    if (res.unauthorized && attempt === 0) {
+      const refreshed = await tryRefreshTokens();
+      if (!refreshed) break;
+      const next = await getAccessToken();
+      if (!next) break;
+      t = next;
+      continue;
+    }
+    if (res.error) console.warn("[BS+ cloud sync] cloud-summary:", res.error);
+    break;
+  }
+  return null;
+}
+
+type PutResult =
+  | { ok: true; updated_at?: string }
+  | { ok: false; unauthorized: boolean; error?: string };
+
+async function putSettingsOnce(token: string): Promise<PutResult> {
+  try {
+    const all = await browser.storage.local.get();
+    const payload = buildUploadPayload(all as Record<string, unknown>);
+    const r = await fetch(CLOUD_SETTINGS_SYNC_URL, {
+      method: "PUT",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+    const data = await parseJsonResponse(r);
+    if (r.status === 401) return { ok: false, unauthorized: true };
+    if (!r.ok) {
+      return {
+        ok: false,
+        unauthorized: false,
+        error: data?.error ?? `Upload failed (${r.status})`,
+      };
+    }
+    const updated_at = data?.updated_at as string | undefined;
+    await setKnownRemoteUpdatedAt(updated_at);
+    return { ok: true, updated_at };
+  } catch (e) {
+    return {
+      ok: false,
+      unauthorized: false,
+      error: e instanceof Error ? e.message : "Upload failed",
+    };
+  }
+}
+
+export async function performCloudSettingsUploadWithRetry(
+  token: string,
+): Promise<{ success: boolean; error?: string; updated_at?: string }> {
+  let t = token;
+  for (let attempt = 0; attempt < 2; attempt++) {
+    const res = await putSettingsOnce(t);
+    if (res.ok) return { success: true, updated_at: res.updated_at };
+    if (res.unauthorized && attempt === 0) {
+      const refreshed = await tryRefreshTokens();
+      if (!refreshed) return { success: false, error: "Not authenticated" };
+      const next = await getAccessToken();
+      if (!next) return { success: false, error: "Not authenticated" };
+      t = next;
+      continue;
+    }
+    return { success: false, error: res.error ?? "Upload failed" };
+  }
+  return { success: false, error: "Upload failed" };
+}
+
+type GetResult =
+  | { ok: true; updated_at?: string }
+  | { ok: false; notFound?: boolean; unauthorized: boolean; error?: string };
+
+async function getSettingsAndApplyOnce(token: string): Promise<GetResult> {
+  try {
+    const r = await fetch(CLOUD_SETTINGS_SYNC_URL, {
+      method: "GET",
+      headers: { Authorization: `Bearer ${token}` },
+      cache: "no-store",
+    });
+    const data = await parseJsonResponse(r);
+    if (r.status === 401) return { ok: false, unauthorized: true };
+    if (r.status === 404) {
+      return {
+        ok: false,
+        notFound: true,
+        unauthorized: false,
+        error: "No settings backup found in the cloud",
+      };
+    }
+    if (!r.ok) {
+      return {
+        ok: false,
+        unauthorized: false,
+        error: data?.error ?? `Download failed (${r.status})`,
+      };
+    }
+    await applyDownloadedEnvelope(data);
+    reloadSeqtaPagesFn?.();
+    const updated_at = data?.updated_at as string | undefined;
+    await setKnownRemoteUpdatedAt(updated_at);
+    return { ok: true, updated_at };
+  } catch (e) {
+    return {
+      ok: false,
+      unauthorized: false,
+      error: e instanceof Error ? e.message : "Download failed",
+    };
+  }
+}
+
+export async function performCloudSettingsDownloadWithRetry(
+  token: string,
+): Promise<{ success: boolean; notFound?: boolean; error?: string; updated_at?: string }> {
+  suppressAutoUploadDuringRestore = true;
+  try {
+    let t = token;
+    for (let attempt = 0; attempt < 2; attempt++) {
+      const res = await getSettingsAndApplyOnce(t);
+      if (res.ok) return { success: true, updated_at: res.updated_at };
+      if (res.unauthorized && attempt === 0) {
+        const refreshed = await tryRefreshTokens();
+        if (!refreshed) return { success: false, error: "Not authenticated" };
+        const next = await getAccessToken();
+        if (!next) return { success: false, error: "Not authenticated" };
+        t = next;
+        continue;
+      }
+      return {
+        success: false,
+        notFound: res.notFound,
+        error: res.error ?? "Download failed",
+      };
+    }
+    return { success: false, error: "Download failed" };
+  } finally {
+    suppressAutoUploadDuringRestore = false;
+  }
+}
+
+async function maybeUploadBaseline(token: string): Promise<void> {
+  const res = await performCloudSettingsUploadWithRetry(token);
+  if (!res.success) {
+    console.warn("[BS+ cloud sync] Baseline upload failed:", res.error);
+  }
+}
+
+async function downloadIfNeeded(token: string): Promise<void> {
+  const res = await performCloudSettingsDownloadWithRetry(token);
+  if (!res.success && !res.notFound) {
+    console.warn("[BS+ cloud sync] Auto-download failed:", res.error);
+  }
+}
+
+async function runCloudSettingsPollInner(): Promise<void> {
+  const all = (await browser.storage.local.get()) as Record<string, unknown>;
+  if (!isAutoCloudSyncEnabled(all)) return;
+
+  let token = await getAccessToken();
+  if (!token) return;
+
+  const summary = await fetchCloudSummaryWithAuthRetry(token);
+  if (!summary) return;
+
+  const bsplus = summary.bsplus;
+  const watermark = all[BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY] as string | undefined;
+
+  if (
+    bsplus &&
+    typeof bsplus.schemaVersion === "number" &&
+    bsplus.schemaVersion > CLOUD_SETTINGS_SYNC_SCHEMA_VERSION
+  ) {
+    console.warn(
+      "[BS+ cloud sync] Server schemaVersion newer than client; skip auto-download",
+    );
+    return;
+  }
+
+  token = (await getAccessToken()) ?? token;
+
+  if (!watermark) {
+    if (!bsplus?.updated_at) {
+      await maybeUploadBaseline(token);
+      return;
+    }
+    await downloadIfNeeded(token);
+    return;
+  }
+
+  if (!bsplus?.updated_at) return;
+
+  if (isServerTimestampNewer(bsplus.updated_at, watermark)) {
+    await downloadIfNeeded(token);
+  }
+}
+
+export function runCloudSettingsPoll(): Promise<void> {
+  if (pollInFlight) return pollInFlight;
+  pollInFlight = (async () => {
+    try {
+      await runCloudSettingsPollInner();
+    } catch (e) {
+      console.error("[BS+ cloud sync] Poll error:", e);
+    } finally {
+      pollInFlight = null;
+    }
+  })();
+  return pollInFlight;
+}
+
+function clearUploadDebounce(): void {
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+    debounceTimer = null;
+  }
+}
+
+function scheduleDebouncedUpload(): void {
+  if (suppressAutoUploadDuringRestore) return;
+  clearUploadDebounce();
+  debounceTimer = setTimeout(() => {
+    debounceTimer = null;
+    void runDebouncedUploadJob();
+  }, UPLOAD_DEBOUNCE_MS);
+}
+
+async function runDebouncedUploadJob(): Promise<void> {
+  const all = (await browser.storage.local.get()) as Record<string, unknown>;
+  if (!isAutoCloudSyncEnabled(all)) return;
+  const token = await getAccessToken();
+  if (!token) return;
+  const res = await performCloudSettingsUploadWithRetry(token);
+  if (!res.success) {
+    console.warn("[BS+ cloud sync] Auto-upload failed:", res.error);
+  }
+}
+
+async function syncAlarmWithStorage(): Promise<void> {
+  const all = (await browser.storage.local.get()) as Record<string, unknown>;
+  if (!isAutoCloudSyncEnabled(all)) {
+    await browser.alarms.clear(ALARM_NAME);
+    clearUploadDebounce();
+    return;
+  }
+  await browser.alarms.create(ALARM_NAME, { periodInMinutes: PERIOD_MINUTES });
+}
+
+function onStorageChanged(
+  changes: Record<string, browser.storage.StorageChange>,
+  area: string,
+): void {
+  if (area !== "local") return;
+
+  if (Object.prototype.hasOwnProperty.call(changes, "autoCloudSettingsSync")) {
+    void syncAlarmWithStorage();
+  }
+
+  const keys = Object.keys(changes);
+  if (!keys.some((k) => isKeyIncludedInCloudUploadPayload(k))) return;
+
+  void (async () => {
+    const all = (await browser.storage.local.get()) as Record<string, unknown>;
+    if (!isAutoCloudSyncEnabled(all)) return;
+    if (suppressAutoUploadDuringRestore) return;
+    if (!(await getAccessToken())) return;
+    scheduleDebouncedUpload();
+  })();
+}
+
+function onAlarm(alarm: browser.Alarms.Alarm): void {
+  if (alarm.name !== ALARM_NAME) return;
+  void runCloudSettingsPoll();
+}
+
+export function initCloudSettingsAutoSync(deps: { reloadSeqtaPages: () => void }): void {
+  reloadSeqtaPagesFn = deps.reloadSeqtaPages;
+  browser.alarms.onAlarm.addListener(onAlarm);
+  browser.storage.onChanged.addListener(onStorageChanged);
+  void syncAlarmWithStorage();
+}
+

src/background/news.ts

@@ -92,8 +92,12 @@ const rssFeedsByCountry: Record<string, string[]> = {
  *                           used to send the fetched news data back to the caller.
  *                           It's called with an object like `{ news: { articles: [...] } }`.
  */
-export async function fetchNews(source: string, sendResponse: any) {
+export async function fetchNews(source: string | undefined, sendResponse: any) {
-  if (source === "australia") {
+  const normalizedSource = typeof source === "string" && source.trim()
+    ? source.trim()
+    : "australia";
+
+  if (normalizedSource === "australia") {
     const date = new Date();
 
     const from =
@@ -111,18 +115,15 @@ export async function fetchNews(source: string, sendResponse: any) {
 
   const parser = new Parser();
   let feeds: string[];
-  console.log("fetchNews", source);
+  console.log("fetchNews", normalizedSource);
 
-  if (rssFeedsByCountry[source.toLowerCase()]) {
+  if (rssFeedsByCountry[normalizedSource.toLowerCase()]) {
-    // If the source is a country, fetch from predefined feeds
+    feeds = rssFeedsByCountry[normalizedSource.toLowerCase()];
-    feeds = rssFeedsByCountry[source.toLowerCase()];
+  } else if (normalizedSource.startsWith("http")) {
-  } else if (source.startsWith("http")) {
+    feeds = [normalizedSource];
-    // If the source is a URL, use it directly
-    feeds = [source];
   } else {
-    throw new Error(
+    console.warn("[BetterSEQTA+] Invalid news source, falling back to Australia", normalizedSource);
-      "Invalid source. Provide a country code or a valid RSS feed URL.",
+    return fetchNews("australia", sendResponse);
-    );
   }
 
   const articlesPromises = feeds.map(async (feedUrl) => {

src/css/documentload.scss

@@ -17,10 +17,42 @@
 
 @use "injected/popup.scss";
 
+@font-face {
+  font-family: "Roboto";
+  src: url("https://fonts.gstatic.com/s/roboto/v50/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IconFamily";
+  src: url("@/resources/fonts/IconFamily.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@layer base, override;
+
+@layer override {
+  * {
+    font-family: Rubik, sans-serif !important;
+  }
+
+  .iconFamily,
+  .iconFamily *,
+  [class~="iconFamily"],
+  [class~="iconFamily"] * {
+    font-family: "IconFamily" !important;
+  }
+}
+
 html {
   background: #161616 !important;
   background-color: #161616;
-  font-family: Rubik, Roboto !important;
+  font-family: Roboto, system-ui, -apple-system, sans-serif !important;
 }
 
 .tooltip svg {

src/css/injected.scss

@@ -1,5 +1,15 @@
 @use "sass:meta";
-@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
+@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700");
+
+/* Force Roboto for legacy-root - SEQTA UI update overrides fonts */
+@font-face {
+  font-family: "Roboto";
+  src: url("https://fonts.gstatic.com/s/roboto/v50/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 
 @include meta.load-css("injected/sidebar-animation.scss");
 @include meta.load-css("injected/theme.scss");
@@ -9,7 +19,7 @@
   background: var(--better-main) !important;
   --navy: #1a1a1a !important;
   --auto-background: var(--better-pale, var(--background-secondary)) !important;
-  font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-family: Rubik, sans-serif !important;
 }
 
 ::view-transition-old(root),
@@ -36,27 +46,80 @@ body,
 .legacy-root option,
 .legacy-root .input,
 html {
-  font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-family: Rubik, sans-serif !important;
 }
 
-select option {
+.legacy-root {
-  background-color: #ffffff !important;
+  color: rgb(var(--theme-fg-parts));
-  color: #111827 !important;
+  cursor: default;
+  font-family: Rubik, sans-serif !important;
+  text-rendering: optimizeLegibility;
 }
-.dark select option {
+
-  background-color: #1f2937 !important;
+body {
-  color: #ffffff !important;
+  font-family: Rubik, sans-serif !important;
 }
 
 select {
-  border-radius: 8px !important;
+  border-radius: 16px !important;
+  border: 1px solid color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 78%, transparent) !important;
+  background: color-mix(in srgb, var(--background-primary) 90%, transparent) !important;
+  color: var(--text-primary) !important;
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease !important;
+}
+
+select:hover {
+  background: color-mix(in srgb, var(--background-primary) 94%, var(--background-secondary) 6%) !important;
+  border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 92%, transparent) !important;
+}
+
+select:focus {
+  outline: none !important;
+  background: color-mix(in srgb, var(--background-primary) 96%, var(--background-secondary) 4%) !important;
+  border-color: color-mix(in srgb, var(--text-primary) 18%, var(--theme-offset-bg, var(--background-secondary)) 82%) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
+}
+
+select:not([multiple]):not([size]),
+select[size="1"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
+  background-position: right 0.9rem center !important;
+  background-repeat: no-repeat !important;
+  background-size: 1rem !important;
+  padding-right: 2.6rem !important;
+  color-scheme: light;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select option {
+  background: var(--background-primary) !important;
+  color: var(--text-primary) !important;
+}
+
+.dark select:not([multiple]):not([size]),
+.dark select[size="1"] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c9c9c9'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
+  color-scheme: dark;
+}
+
+.dark select option {
+  background: var(--background-primary) !important;
+  color: var(--text-primary) !important;
 }
 #container {
-  transition: 200ms;
   background: var(--auto-background) !important;
 }
 :root * {
-  font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-family: Rubik, sans-serif !important;
   --theme-fg-parts: white;
 }
 .extension-editor {
@@ -265,8 +328,13 @@ select {
   }
 }
 
-.timetable-zoom {
+.timetable-zoom,
+.timetable-hide {
   font-size: 14px !important;
+  line-height: 1 !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
 }
 
 #main > .dashboard {
@@ -302,7 +370,7 @@ select {
 
       .material-icons {
         font-size: 0px !important;
-        font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+        font-family: Rubik, sans-serif !important;
         &::before {
           font-size: 18px !important;
           content: "Search" !important;
@@ -407,13 +475,23 @@ ul.magicDelete > li.deleting {
   hyphens: auto;
   line-height: 1.2;
 }
+#menu,
+#menu li,
+#menu section,
+#menu li > label,
+#menu section > label {
+  font-family: Rubik, sans-serif !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+}
+
 #menu {
   width: 270px;
   z-index: 19;
   background: var(--better-main) !important;
   color: var(--text-color);
   border-right: none;
-  font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 #menu li > label > svg,
 #menu section > label > svg {
@@ -421,6 +499,88 @@ ul.magicDelete > li.deleting {
   width: 28px !important;
   height: 28px !important;
 }
+
+/* Icon Only Sidebar - compact mode. When submenu is open, all styles are disabled so it behaves as normal sidebar. */
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
+  #menu {
+    width: 70px !important;
+    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: visible !important;
+  }
+
+  #menu > ul {
+    min-width: 0 !important;
+    overflow-x: visible !important;
+  }
+
+  #content {
+    left: 70px !important;
+    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  #menu .sub {
+    left: 70px !important;
+    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  #menu li > label span,
+  #menu section > label span {
+    display: none !important;
+  }
+
+  #menu ul > li > svg {
+    display: none !important;
+  }
+
+  #menu ul li,
+  #menu ul section {
+    min-width: 0 !important;
+    max-width: 100% !important;
+    padding: 8px !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
+  }
+
+  #menu li > label,
+  #menu section > label {
+    flex: 0 0 auto !important;
+    min-width: 0 !important;
+    justify-content: center !important;
+    overflow: visible !important;
+  }
+
+  #menu li > label > svg,
+  #menu section > label > svg {
+    margin: 0 auto !important;
+    flex-shrink: 0 !important;
+  }
+
+  /* Engage: hide text nodes in labels via font-size trick, restore SVG size */
+  #menu .logo-link li > label,
+  #menu .logo-link section > label {
+    font-size: 0 !important;
+    justify-content: center !important;
+
+    svg {
+      width: 24px !important;
+      height: 24px !important;
+      font-size: initial !important;
+      flex-shrink: 0 !important;
+      margin: 0 auto !important;
+    }
+  }
+
+  /* Engage: hide chevron arrows on hasChildren items */
+  #menu .logo-link li > svg {
+    display: none !important;
+  }
+
+  /* Engage: hide the name/details in #userActions */
+  #menu #userActions .details {
+    display: none !important;
+  }
+
+}
 [class*="notifications__items___"] {
   -ms-overflow-style: none !important;
   scrollbar-width: none !important;
@@ -488,6 +648,7 @@ ul.magicDelete > li.deleting {
   display: none;
 }
 html {
+  font-family: Rubik, sans-serif !important;
   background: var(--better-main) !important;
 }
 .menuShown .content .anyoneSelect .listWrapper .list:has(.item) {
@@ -836,14 +997,22 @@ html.transparencyEffects
   display: none;
 }
 #menu li:hover {
-  background: rgba(0, 0, 0, 0.15);
+  background: rgba(0, 0, 0, 0.15) !important;
 }
+
+#menu li:focus-visible,
+#menu section:focus-visible {
+  outline: 1px solid rgb(from currentColor r g b / 0.55);
+  outline-offset: -1px;
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
 #main > .timetablepage > .container {
   background: var(--background-primary);
 }
 
 #content {
-  transition: 0.4s;
+  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease;
   left: 270px;
   background: unset;
 }
@@ -886,6 +1055,17 @@ html.transparencyEffects
     -webkit-transform: translatex(270px);
     transform: translatex(270px);
   }
+
+  body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
+    #menu {
+      -webkit-transform: translatex(-70px);
+      transform: translatex(-70px);
+    }
+    .menuShown #content {
+      -webkit-transform: translatex(70px);
+      transform: translatex(70px);
+    }
+  }
 }
 
 @media (max-width: 1145px) {
@@ -1149,9 +1329,12 @@ html.transparencyEffects
   transition: 200ms;
   width: 100%;
   height: 15em;
+  font-family: Rubik, sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: minmax(142px, 1fr);
+  grid-auto-columns: minmax(100px, 1fr);
   border-radius: 16px;
   overflow-x: auto;
 
@@ -1344,8 +1527,8 @@ html.transparencyEffects
   margin: 0;
   padding: 8px;
   padding-top: 14px;
-  font-size: 20px !important;
+  font-size: 14px !important;
-  font-weight: 500;
+  font-weight: 700;
   min-height: 46px;
   height: auto;
   line-height: 1.2;
@@ -1372,8 +1555,8 @@ html.transparencyEffects
   margin: 0;
   padding: 2px;
   padding-left: 8px;
-  font-size: 16px !important;
+  font-size: 13px !important;
-  font-weight: 500;
+  font-weight: 700;
 }
 .day h5 {
   margin: 0;
@@ -1383,7 +1566,7 @@ html.transparencyEffects
   bottom: 0;
   right: 0;
   font-size: 10px !important;
-  font-weight: 500;
+  font-weight: 700;
 }
 .waitWindow {
   background: var(--better-main);
@@ -1639,6 +1822,22 @@ iframe.userHTML {
   background-image: unset;
   background-color: var(--auto-background);
 }
+[class*="OverallResult__OverallResult___"] {
+  --fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
+}
+[class*="OverallResult__OverallResult___"] [class*="Thermoscore__Thermoscore___"],
+[class*="OverallResult__OverallResult___"] [class*="Thermoscore__fill___"],
+[class*="OverallResult__OverallResult___"] > div > div {
+  --fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
+}
+[class*="AssessableCriterion__header___"] {
+  --fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
+}
+[class*="AssessableCriterion__header___"] [class*="Thermoscore__Thermoscore___"],
+[class*="AssessableCriterion__header___"] [class*="Thermoscore__fill___"],
+[class*="AssessableCriterion__header___"] > div > div > div {
+  --fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
+}
 .dark [class*="Thermoscore__Thermoscore___"] {
   border: 2px solid rgba(255, 255, 255, 0.3);
 }
@@ -2252,7 +2451,7 @@ div.bar.flat {
   padding: 0 !important;
   padding-left: 8px !important;
   gap: 0 8px;
-  background: var(--better-main);
+  background: transparent !important;
 }
 .cke_toolbar:has(.cke_toolgroup) {
   .cke_combo {
@@ -2651,20 +2850,25 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
+  will-change: transform;
 }
 .logo {
   transform: translate(-50%, -50%);
 }
 .big-circle {
   margin: -88px;
-  animation: spin 3s ease infinite;
+  will-change: transform;
-  -moz-animation: spin 3s ease infinite;
+  animation-timing-function: linear;
+  animation: spin 3s linear infinite;
+  -moz-animation: spin 3s linear infinite;
 }
 
 .small-circle {
   margin: -66px;
-  animation: spin 3s ease infinite;
+  will-change: transform;
-  -moz-animation: spin 3s ease infinite;
+  animation-timing-function: linear;
+  animation: spin 3s linear infinite;
+  -moz-animation: spin 3s linear infinite;
 }
 
 .dark [class*="LabelList__name___"] {
@@ -2708,8 +2912,10 @@ body {
 }
 .outer-circle {
   margin: -108px;
-  animation: spinback 1s linear infinite alternate-reverse;
+  will-change: transform;
-  -moz-animation: spinback 1s linear infinite alternate-reverse;
+  animation-direction: alternate-reverse;
+  animation: spinback 1s linear infinite;
+  -moz-animation: spinback 1s linear infinite;
 }
 @-moz-keyframes spin {
   100% {
@@ -2817,8 +3023,14 @@ div.day-empty {
   p {
     margin: 0;
     font-size: 30px;
+    font-weight: 400;
   }
 }
+
+#notice-container.day-empty,
+#notice-container .day-empty {
+  font-size: 14px !important;
+}
 .upcoming-submittedtext {
   align-self: center;
   padding: 8px 25px;
@@ -2843,7 +3055,8 @@ div.day-empty {
 .upcoming-subject-title {
   color: var(--text-primary);
   width: 15%;
-  font-size: 20px;
+  font-size: 20px !important;
+  font-weight: 700 !important;
   text-align: center;
   padding: 5px;
   display: flex;
@@ -2856,13 +3069,17 @@ div.day-empty {
   border: 2px solid var(--item-colour);
   margin: 5px 50px;
   height: 6em;
+  font-family: Rubik, sans-serif !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
   padding: 0px;
   border-radius: 10px;
   display: flex;
 }
 .upcoming-date-title {
   padding: 12px;
-  font-size: 20px;
+  font-size: 20px !important;
+  font-weight: 700 !important;
 }
 .upcoming-details p:hover {
   cursor: pointer;
@@ -2962,7 +3179,9 @@ div.day-empty {
   height: 15em;
   color: var(--text-primary);
   background: var(--background-primary);
-  font-family: Rubik, sans-serif;
+  font-family: Rubik, sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 700 !important;
 }
 .dark .day {
   box-shadow:
@@ -2989,6 +3208,9 @@ div.day-empty {
     200ms,
     background-color 0s;
   border-radius: 16px;
+  font-family: Rubik, sans-serif !important;
+  font-size: 20px !important;
+  font-weight: 500 !important;
 }
 .dark .upcoming-items {
   box-shadow: inset 0px 40px 80px -40px rgba(0, 0, 0, 0.6);
@@ -2996,7 +3218,8 @@ div.day-empty {
 .upcoming-assessment-title {
   color: var(--text-primary);
   transition: 200ms;
-  font-size: 10px;
+  font-size: 20px !important;
+  font-weight: 700 !important;
   margin: 0;
 }
 .upcoming-date-container {
@@ -3004,7 +3227,7 @@ div.day-empty {
 }
 .upcoming-date-title h5 {
   margin: 0;
-  font-weight: 500;
+  font-weight: 700;
 }
 .upcoming-details {
   width: 60%;
@@ -3012,6 +3235,7 @@ div.day-empty {
   flex-direction: column;
   justify-content: center;
   padding: 0px 12px;
+  font-size: 15px;
 }
 .upcoming-details h5 {
   text-transform: uppercase;
@@ -3020,7 +3244,8 @@ div.day-empty {
   margin: 0;
 }
 .upcoming-details p {
-  font-size: 15px;
+  font-size: 15px !important;
+  font-weight: 700 !important;
   padding: 4px;
 }
 .upcoming-special-day {
@@ -3096,6 +3321,88 @@ div.day-empty {
   position: absolute;
   right: 250px;
 }
+.engage-titlebar {
+  right: 250px;
+  top: 0;
+}
+
+/* Engage parent home: same timetable DOM as Learn; title+student replace the lone h2 — give the cluster Learn’s h2 margin/inset. */
+.timetable-container .home-subtitle > .engage-timetable-title-cluster {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  margin: 20px;
+  min-width: 0;
+}
+
+.timetable-container .engage-timetable-title-cluster > h2 {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 0 !important;
+}
+
+#engage-home-root.home-root {
+  box-sizing: border-box;
+  min-height: 100%;
+}
+
+.engage-child-select {
+  background: var(--background-primary);
+  border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.35));
+  border-radius: 0.5rem;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  max-width: 16rem;
+  min-width: 10rem;
+  padding: 0.35rem 0.6rem;
+  transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.engage-child-select:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 4px rgba(59, 130, 246, 0.45);
+}
+
+#engage-day-container:has(> .day-empty) {
+  align-content: center;
+  display: flex;
+  grid-auto-columns: unset;
+  grid-auto-flow: unset;
+  justify-content: center;
+  min-height: 12rem;
+  padding: 1.5rem;
+}
+
+#engage-day-container .day-empty {
+  text-align: center;
+}
+
+#engage-logouttooltip {
+  width: 50px !important;
+  margin-left: -28px !important;
+  top: 105% !important;
+
+  .engage-logout {
+    background: none !important;
+    border: none;
+    cursor: pointer;
+    color: var(--background-primary) !important;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+
+    svg {
+      fill: var(--background-primary) !important;
+    }
+  }
+}
 .pagename {
   align-items: center;
   display: flex;
@@ -3121,7 +3428,7 @@ div.day-empty {
 .userInfoName {
   margin: 0 !important;
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 700;
 }
 .userInfoCode {
   margin: 0 !important;
@@ -3217,6 +3524,26 @@ div.day-empty {
   font-size: 1em;
   color: var(--text-primary);
 }
+.whatsnewHeader.engageParentsAnnouncementHeader {
+  height: auto;
+  min-height: unset;
+}
+.whatsnewHeader.engageParentsAnnouncementHeader h1 {
+  line-height: 1.2;
+}
+.whatsnewHeader.engageParentsAnnouncementHeader .engageParentsSubheading {
+  margin-top: 0.35rem;
+  font-size: 1.05rem;
+  font-weight: 600;
+  opacity: 0.92;
+}
+.seqtaEngageAccent {
+  color: #ea580c;
+  font-weight: 700;
+}
+.dark .seqtaEngageAccent {
+  color: #fb923c;
+}
 .whatsnewBackground {
   width: 100%;
   height: 100%;
@@ -3237,7 +3564,7 @@ div.day-empty {
 .whatsnewImg {
   margin: 0 auto;
   width: 90%;
-  aspect-ratio: 16 / 10;
+  aspect-ratio: 16 / 9;
   border-radius: 16px;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
 }
@@ -3262,7 +3589,7 @@ div.day-empty {
   padding-bottom: 0.125rem;
   margin-left: 2px;
   font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: 700;
   color: #9a3412;
   border-radius: 9999px;
   border: 1px solid rgba(253, 186, 140, 0.3);
@@ -3345,6 +3672,138 @@ div.day-empty {
   object-fit: cover;
   margin-bottom: 12px;
 }
+.whatsnewTextContainer .engageParentsPromoWrap {
+  width: 100%;
+  margin-bottom: 12px;
+  border-radius: 16px;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);
+  background: color-mix(in srgb, var(--background-secondary) 88%, var(--text-primary) 12%);
+}
+.whatsnewTextContainer .engageParentsPromoWrap .engageParentsPromoImg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: 0;
+  aspect-ratio: unset;
+  object-fit: contain;
+  object-position: center;
+}
+
+.whatsnewHeader.bsCloudAutoSyncAnnouncementHeader {
+  height: auto;
+  min-height: unset;
+}
+.whatsnewHeader.bsCloudAutoSyncAnnouncementHeader h1 {
+  line-height: 1.2;
+}
+.bsCloudAccent {
+  color: #059669;
+  font-weight: 700;
+}
+.dark .bsCloudAccent {
+  color: #34d399;
+}
+.whatsnewTextContainer .bsCloudAutoSyncSignupCallout {
+  margin: 1.5rem 0 0;
+  padding: 1.25rem 1rem 0;
+  border-top: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
+  font-size: clamp(1.35rem, 3.8vw, 1.85rem);
+  font-weight: 800;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  text-align: center;
+  color: var(--text-primary);
+}
+
+.popup-media-fullscreenable {
+  cursor: pointer;
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+.popup-media-fullscreenable:hover {
+  opacity: 0.95;
+}
+.popup-media-fullscreenable:focus {
+  outline: none;
+}
+.popup-media-fullscreenable:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--text-primary) 70%, transparent);
+  outline-offset: 4px;
+}
+
+.bsplus-popup-media-overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(20px, 4vw, 48px);
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  transition: opacity 0.28s cubic-bezier(0.22, 0.03, 0.26, 1);
+}
+
+.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay-backdrop--visible {
+  opacity: 1;
+}
+
+.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay--instant {
+  transition: none;
+}
+
+.bsplus-popup-media-overlay-inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: min(96vw, 1320px);
+  max-height: calc(100vh - clamp(40px, 10vw, 96px));
+  border-radius: 20px;
+  overflow: hidden;
+  background: var(--background-primary);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
+  opacity: 0;
+  transform: scale(0.94) translateY(12px);
+  transition:
+    opacity 0.28s cubic-bezier(0.22, 0.03, 0.26, 1),
+    transform 0.28s cubic-bezier(0.22, 0.03, 0.26, 1);
+}
+
+.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay-backdrop--visible
+  .bsplus-popup-media-overlay-inner {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay--instant
+  .bsplus-popup-media-overlay-inner {
+  transition: none;
+}
+
+.bsplus-popup-media-overlay-slot {
+  width: 100%;
+  max-height: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(16px, 3vw, 28px);
+  box-sizing: border-box;
+}
+
+.bsplus-popup-media-overlay-media {
+  max-width: 100%;
+  max-height: calc(100vh - clamp(120px, 22vh, 200px));
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 12px;
+}
 
 @keyframes shimmer {
   0% {
@@ -3499,6 +3958,17 @@ div.day-empty {
   scrollbar-width: none !important;
 }
 
+/* Fix SEQTA update: ul.logo-link covers sidebar and causes page reload on empty space clicks */
+#menu ul.logo-link {
+  pointer-events: none;
+
+  /* Re-enable clicks on menu items while sidebar editing swaps built-in items to <section> */
+  li,
+  section {
+    pointer-events: auto;
+  }
+}
+
 .notice-unified-content.notice-modal-state {
   border: none !important;
 }
@@ -3521,7 +3991,7 @@ div.day-empty {
   padding: 4px 10px;
   border-radius: 16px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 700;
   white-space: nowrap;
 }
 
@@ -3568,7 +4038,7 @@ div.day-empty {
   background: var(--background-primary);
   border-radius: 16px;
   max-width: 600px;
-  max-height: 80vh;
+  max-height: 90vh;
   width: 100%;
   overflow: hidden;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
@@ -3634,7 +4104,7 @@ div.day-empty {
     margin: 0 !important;
     flex: 1;
     display: block;
-    min-width: 600px;
+    min-width: 0;
     width: 100%;
   }
 
@@ -3651,7 +4121,8 @@ div.day-empty {
     }
 
     .notice-content-body {
-      overflow-y: hidden;
+      overflow-y: auto;
+      min-height: 0;
 
       &::-webkit-scrollbar {
         width: 6px;
@@ -3754,7 +4225,7 @@ button.notice-close-btn {
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 700;
   white-space: nowrap;
 }
 

src/css/injected/sidebar-animation.scss

@@ -35,9 +35,19 @@
 }
 
 #menu .sub {
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #menu > ul:has(li.hasChildren.active) > li.active {
   background: transparent !important;
 }
+
+/* Icon-only collapsed: submenu slides over narrow icons */
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li::before,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li::before,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > label,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > svg,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > label,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > svg {
+  transform: translateX(-70px);
+}

src/interface/components/Button.svelte

@@ -1,7 +1,20 @@
 <script lang="ts">
-  let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
+  let {
+    onClick,
+    text,
+    disabled = false,
+  } = $props<{
+    onClick: () => void;
+    text: string;
+    disabled?: boolean;
+  }>();
 </script>
 
-<button onclick={onClick} class='px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg'>
+<button
+  type="button"
+  onclick={onClick}
+  disabled={disabled}
+  class="px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg disabled:cursor-not-allowed disabled:opacity-50"
+>
   {text}
 </button>

src/interface/components/CloudSettingsSync.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import browser from "webextension-polyfill";
+  import { cloudAuth } from "@/seqta/utils/CloudAuth";
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+  import DisclaimerModal from "./DisclaimerModal.svelte";
+  import Button from "./Button.svelte";
+  import Switch from "./Switch.svelte";
+
+  let cloudState = $state(cloudAuth.state);
+  let busy = $state(false);
+  let statusMessage = $state<string | null>(null);
+  let statusError = $state<string | null>(null);
+  let lastUploadAt = $state<string | null>(null);
+  let lastDownloadAt = $state<string | null>(null);
+  let showRestoreConfirm = $state(false);
+
+  $effect(() => {
+    const unsub = cloudAuth.subscribe((s) => {
+      cloudState = s;
+    });
+    return unsub;
+  });
+
+  function formatNow(): string {
+    return new Date().toLocaleString(undefined, {
+      dateStyle: "short",
+      timeStyle: "short",
+    });
+  }
+
+  async function upload() {
+    const token = await cloudAuth.getStoredToken();
+    if (!token) return;
+    busy = true;
+    statusError = null;
+    statusMessage = null;
+    try {
+      const res = (await browser.runtime.sendMessage({
+        type: "cloudSettingsUpload",
+        token,
+      })) as { success?: boolean; error?: string };
+      if (res?.success) {
+        statusMessage = "Settings saved to the cloud.";
+        lastUploadAt = formatNow();
+      } else {
+        statusError = res?.error ?? "Upload failed";
+      }
+    } catch (e) {
+      statusError = e instanceof Error ? e.message : "Upload failed";
+    } finally {
+      busy = false;
+    }
+  }
+
+  function promptDownload() {
+    showRestoreConfirm = true;
+  }
+
+  async function confirmDownload() {
+    showRestoreConfirm = false;
+    const token = await cloudAuth.getStoredToken();
+    if (!token) return;
+    busy = true;
+    statusError = null;
+    statusMessage = null;
+    try {
+      const res = (await browser.runtime.sendMessage({
+        type: "cloudSettingsDownload",
+        token,
+      })) as { success?: boolean; error?: string; notFound?: boolean };
+      if (res?.success) {
+        statusMessage = "Settings restored from the cloud. SEQTA tabs were reloaded.";
+        lastDownloadAt = formatNow();
+      } else {
+        statusError = res?.error ?? "Download failed";
+      }
+    } catch (e) {
+      statusError = e instanceof Error ? e.message : "Download failed";
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<div
+  class="w-full rounded-xl border border-zinc-200/60 bg-zinc-50/80 px-4 py-2.5 dark:border-zinc-700/50 dark:bg-zinc-900/40"
+>
+  <h3 class="text-xs font-bold text-zinc-800 dark:text-zinc-100">Cloud settings backup</h3>
+  <p class="mt-0.5 text-[11px] leading-snug text-zinc-500 dark:text-zinc-400">
+    Upload copies this browser’s BetterSEQTA+ settings to your account. Download replaces local settings with the
+    cloud copy (your sign-in stays on this device).
+  </p>
+
+  <div
+    class="mt-2 flex flex-col gap-2 rounded-lg border border-zinc-200/50 bg-white/60 px-3 py-2.5 dark:border-zinc-600/40 dark:bg-zinc-800/40"
+  >
+    <div class="flex items-start justify-between gap-3">
+      <p class="min-w-0 flex-1 pt-0.5 text-[11px] font-semibold leading-tight text-zinc-800 dark:text-zinc-100">
+        Automatic sync
+      </p>
+      <div class="shrink-0">
+        <Switch
+          state={$settingsState.autoCloudSettingsSync !== false}
+          onChange={(isOn: boolean) => (settingsState.autoCloudSettingsSync = isOn)}
+        />
+      </div>
+    </div>
+    <p class="text-[10px] leading-snug text-zinc-500 dark:text-zinc-400">
+      When signed in, each time SEQTA loads and also hourly, if the cloud backup is newer it will replace local
+      settings. Settings you change will upload shortly after you adjust them.
+    </p>
+    <p class="text-[10px] leading-snug text-zinc-500 dark:text-zinc-400">
+      Passwords, tokens, and other sensitive data are not included in the backup.
+      <a
+        href="https://betterseqta.org/privacy"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="ml-0.5 inline font-medium text-emerald-600 underline decoration-emerald-600/50 underline-offset-2 transition-all duration-200 hover:text-emerald-700 hover:decoration-emerald-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-emerald-400 dark:decoration-emerald-400/50 dark:hover:text-emerald-300 dark:focus-visible:ring-offset-zinc-800 rounded-sm"
+      >
+        Privacy policy
+      </a>
+    </p>
+  </div>
+
+  <div class="mt-2 flex flex-wrap gap-2">
+    <Button
+      text={busy ? "Please wait…" : "Upload to cloud"}
+      onClick={upload}
+      disabled={busy || !cloudState.isLoggedIn}
+    />
+    <Button
+      text={busy ? "Please wait…" : "Download from cloud"}
+      onClick={promptDownload}
+      disabled={busy || !cloudState.isLoggedIn}
+    />
+  </div>
+
+  {#if !cloudState.isLoggedIn}
+    <p class="mt-2 text-[11px] text-zinc-500 dark:text-zinc-400">
+      Sign in from the BetterSEQTA Cloud header above to sync settings.
+    </p>
+  {/if}
+
+  {#if statusMessage}
+    <p class="mt-2 text-[11px] text-emerald-600 dark:text-emerald-400">{statusMessage}</p>
+  {/if}
+  {#if statusError}
+    <p class="mt-2 text-[11px] text-red-600 dark:text-red-400">{statusError}</p>
+  {/if}
+  {#if lastUploadAt || lastDownloadAt}
+    <p class="mt-1 text-[10px] text-zinc-400 dark:text-zinc-500">
+      {#if lastUploadAt}<span>Last upload: {lastUploadAt}</span>{/if}
+      {#if lastUploadAt && lastDownloadAt}<span class="mx-1">·</span>{/if}
+      {#if lastDownloadAt}<span>Last download: {lastDownloadAt}</span>{/if}
+    </p>
+  {/if}
+</div>
+
+{#if showRestoreConfirm}
+  <DisclaimerModal
+    title="Restore from cloud?"
+    message="This will replace BetterSEQTA+ settings in this browser with your cloud backup. Your BetterSEQTA Cloud sign-in on this device will be kept. Continue?"
+    onConfirm={confirmDownload}
+    onCancel={() => (showRestoreConfirm = false)}
+  />
+{/if}

src/interface/components/ConnectMobileApp.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import browser from "webextension-polyfill";
+  import QRCode from "qrcode";
+  import { portal } from "../utils/portal";
+
+  let showQrModal = $state(false);
+  let qrDataUrl = $state<string | null>(null);
+  let appLink = $state<string | null>(null);
+  let errorMessage = $state<string | null>(null);
+  let isLoading = $state(false);
+  let isStandalone = $state(false);
+
+  function isExtensionPage(): boolean {
+    return (
+      window.location.protocol === "chrome-extension:" ||
+      window.location.protocol === "moz-extension:"
+    );
+  }
+
+  function isSeqtaUrl(url: string): boolean {
+    try {
+      const u = new URL(url);
+      return u.hostname.includes("seqta") || u.hostname.endsWith(".edu.au");
+    } catch {
+      return false;
+    }
+  }
+
+  function normalizeBaseUrl(url: string): string {
+    try {
+      const u = new URL(url);
+      return u.origin;
+    } catch {
+      return url;
+    }
+  }
+
+  async function getAppLink(): Promise<string | null> {
+    let baseUrl: string | undefined;
+
+    if (isExtensionPage()) {
+      baseUrl = undefined;
+    } else {
+      baseUrl = normalizeBaseUrl(window.location.href);
+      if (!isSeqtaUrl(baseUrl)) return null;
+    }
+
+    const { appLink: link } = (await browser.runtime.sendMessage({
+      type: "getSeqtaSession",
+      baseUrl,
+    })) as { appLink: string | null };
+    return link ?? null;
+  }
+
+  async function generateQrCode() {
+    errorMessage = null;
+    qrDataUrl = null;
+    isLoading = true;
+
+    try {
+      isStandalone = isExtensionPage();
+      const link = await getAppLink();
+
+      if (!link) {
+        if (isStandalone) {
+          errorMessage =
+            "Open SEQTA Learn in a tab and log in, then open settings from that tab to generate a QR code.";
+        } else {
+          errorMessage = "Please log in to SEQTA Learn first.";
+        }
+        return;
+      }
+
+      const dataUrl = await QRCode.toDataURL(link, { width: 256, margin: 2 });
+      appLink = link;
+      qrDataUrl = dataUrl;
+      showQrModal = true;
+    } catch (err) {
+      console.error("[ConnectMobileApp] Failed to generate QR:", err);
+      errorMessage = "Failed to generate QR code. Please try again.";
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function closeModal() {
+    showQrModal = false;
+    qrDataUrl = null;
+    appLink = null;
+    errorMessage = null;
+  }
+
+  function openAppLink() {
+    if (appLink) window.location.href = appLink;
+  }
+
+  function downloadQrImage() {
+    if (!qrDataUrl) return;
+    const link = document.createElement("a");
+    link.href = qrDataUrl;
+    link.download = "desqta-login-qr.png";
+    link.click();
+  }
+</script>
+
+<div class="flex flex-col gap-1 items-end">
+  <button
+    type="button"
+    onclick={generateQrCode}
+    disabled={isLoading}
+    class="px-5 py-1.5 text-[0.75rem] text-nowrap shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
+    {isLoading ? "Generating..." : "Generate QR"}
+  </button>
+  {#if errorMessage}
+    <p class="text-xs text-right text-amber-600 dark:text-amber-400">{errorMessage}</p>
+  {/if}
+</div>
+
+{#if showQrModal && qrDataUrl}
+  <div
+    use:portal
+    class="fixed cursor-auto inset-0 z-[10000] flex justify-center items-center bg-black/50 {isStandalone ? 'backdrop-blur-sm' : ''}"
+    role="button"
+    tabindex="-1"
+    onclick={(e) => {
+      if (e.target === e.currentTarget) closeModal();
+    }}
+    onkeydown={(e) => {
+      if (e.key === "Escape") closeModal();
+    }}
+    transition:fade={{ duration: 150 }}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="p-6 mx-4 w-full max-w-sm bg-white rounded-2xl shadow-2xl dark:bg-zinc-800"
+      onclick={(e) => e.stopPropagation()}
+      onkeydown={(e) => e.stopPropagation()}>
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="text-lg font-bold text-zinc-900 dark:text-white">Scan with DesQTA</h2>
+        <button
+          type="button"
+          onclick={closeModal}
+          class="p-2 rounded-lg transition-colors text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:text-zinc-400 dark:hover:bg-zinc-700"
+          aria-label="Close">
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="flex justify-center p-4 bg-white rounded-xl dark:bg-zinc-900">
+        <img src={qrDataUrl} alt="SEQTA Learn app link QR code" class="w-64 h-64" />
+      </div>
+      <div class="flex flex-col gap-2 mt-4">
+        <button
+          type="button"
+          onclick={openAppLink}
+          class="px-4 py-2.5 w-full text-sm font-medium text-white bg-indigo-600 rounded-lg transition-colors dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600">
+          Sign into DesQTA Desktop
+        </button>
+        <button
+          type="button"
+          onclick={downloadQrImage}
+          class="px-4 py-2 w-full text-xs font-medium rounded-lg border transition-colors text-zinc-500 dark:text-zinc-400 border-zinc-200 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-800/50">
+          Download QR as image
+        </button>
+      </div>
+      <p class="mt-2 text-sm text-center text-zinc-600 dark:text-zinc-400">
+        Or scan this QR code with DesQTA on your phone.
+      </p>
+    </div>
+  </div>
+{/if}

src/interface/components/Select.svelte

@@ -8,12 +8,12 @@
   let select: HTMLSelectElement;
 </script>
 
-<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-xl w-full overflow-clip">
+<div class="select-wrapper relative w-full overflow-hidden rounded-2xl border shadow-2xl">
   <select
     bind:this={select}
     value={state}
     onchange={() => onChange(select.value)}
-    class="px-4 py-2 pr-9 text-[0.875rem] font-medium text-black dark:text-white w-full border-none bg-white/80 dark:bg-zinc-800/70 hover:bg-white/90 dark:hover:bg-zinc-800/80 focus:bg-white/90 dark:focus:bg-zinc-800/80 focus:ring-0 rounded-md appearance-none transition-colors"
+    class="select-input w-full appearance-none border-none bg-transparent px-4 py-2.5 pr-10 text-[0.875rem] font-medium transition-colors"
   >
     {#each options as option}
       <option value={option.value}>
@@ -21,20 +21,62 @@
       </option>
     {/each}
   </select>
+  <span class="select-icon pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" aria-hidden="true">
+    <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
+      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"></path>
+    </svg>
+  </span>
 </div>
 
 <style>
-  /* Make native dropdown list readable on Windows */
+  .select-wrapper {
-  select option {
+    background: color-mix(in srgb, var(--background-primary) 88%, transparent);
-    background-color: #ffffff;
+    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 72%, transparent);
-    color: #111827; /* zinc-900 */
+    border-radius: 18px;
-  }
+    color: var(--text-primary);
-  :global(.dark) select option {
+    transition:
-    background-color: #1f2937; /* zinc-800 */
+      background-color 180ms ease,
-    color: #ffffff;
+      border-color 180ms ease,
+      box-shadow 180ms ease,
+      transform 180ms ease;
   }
 
-  :global(.dark) div::after {
+  .select-wrapper:hover {
-    color: rgba(255, 255, 255, 0.6);
+    background: color-mix(in srgb, var(--background-primary) 94%, var(--background-secondary) 6%);
+    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 88%, transparent);
+  }
+
+  .select-wrapper:focus-within {
+    background: color-mix(in srgb, var(--background-primary) 96%, var(--background-secondary) 4%);
+    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--theme-offset-bg, var(--background-secondary)) 78%);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
+  }
+
+  .select-input {
+    color: var(--text-primary);
+    outline: none;
+    text-overflow: ellipsis;
+  }
+
+  .select-input:hover,
+  .select-input:focus {
+    background: transparent;
+  }
+
+  .select-input option {
+    background: var(--background-primary);
+    color: var(--text-primary);
+  }
+
+  .select-icon {
+    color: color-mix(in srgb, var(--text-primary) 60%, transparent);
+  }
+
+  .select-input {
+    color-scheme: light;
+  }
+
+  :global(.dark) .select-input {
+    color-scheme: dark;
   }
 </style>

src/interface/components/SignInToFavoriteModal.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { animate } from "motion";
+  import { onMount } from "svelte";
+  import { cloudAuth } from "@/seqta/utils/CloudAuth";
+  import CloudLoginForm from "@/interface/components/store/CloudLoginForm.svelte";
+
+  let { onClose } = $props<{ onClose: () => void }>();
+  let modalElement: HTMLElement;
+
+  onMount(() => {
+    return cloudAuth.subscribe((s) => {
+      if (s.isLoggedIn) onClose();
+    });
+  });
+
+  $effect(() => {
+    if (modalElement) {
+      animate(
+        modalElement,
+        { scale: [0.9, 1], opacity: [0, 1] },
+        { type: "spring", stiffness: 300, damping: 25 },
+      );
+    }
+  });
+</script>
+
+<div
+  class="flex fixed inset-0 z-[99999] justify-center items-center bg-black/50"
+  onclick={(e) => {
+    if (e.target === e.currentTarget) onClose();
+  }}
+  onkeydown={(e) => {
+    if (e.key === "Escape") onClose();
+  }}
+  role="button"
+  tabindex="-1"
+  transition:fade={{ duration: 150 }}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={modalElement}
+    class="p-4 mx-4 w-full max-w-md max-h-[90vh] overflow-y-auto bg-white rounded-2xl shadow-2xl dark:bg-zinc-800 dark:text-white"
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+  >
+    <h2 class="mb-3 text-xl font-bold text-zinc-900 dark:text-white">
+      Sign in to favorite themes
+    </h2>
+
+    <p class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
+      Sign in to the Theme Store to save favorites across devices, or create an account to get started.
+    </p>
+
+    <CloudLoginForm compact onSuccess={onClose} />
+
+    <div class="flex justify-end mt-4">
+      <button
+        type="button"
+        onclick={onClose}
+        class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+</div>

src/interface/components/Slider.svelte

@@ -9,7 +9,7 @@
   let percentage = $derived(((state - min) / (max - min)) * 100);
 </script>
 
-<div class="relative mx-auto w-full max-w-lg">
+<div class="relative w-full min-w-0">
   <input
     type="range"
     min={min}

src/interface/components/TabbedContainer.svelte

@@ -3,8 +3,7 @@
   import './TabbedContainer.css';
   import { onMount } from 'svelte';
 
-  let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
+  let { tabs, activeTab = $bindable(0) } = $props<{ tabs: { title: string, Content: any, props?: any }[]; activeTab?: number }>();
-  let activeTab = $state(0);
   let containerRef: HTMLElement | null = null;
   let tabWidth = $state(0);
 

src/interface/components/store/CloudHeader.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { cloudAuth } from "@/seqta/utils/CloudAuth";
+  import CloudLoginForm from "./CloudLoginForm.svelte";
+
+  let { alwaysShowUserName = false } = $props<{
+    /** When true (e.g. narrow extension popup), show display name below sm breakpoint */
+    alwaysShowUserName?: boolean;
+  }>();
+
+  let cloudState = $state(cloudAuth.state);
+  let open = $state(false);
+  let dropdownEl: HTMLElement;
+
+  onMount(() => {
+    const unsubscribe = cloudAuth.subscribe((state) => {
+      cloudState = state;
+    });
+    return unsubscribe;
+  });
+
+  function handleClickOutside(e: MouseEvent) {
+    if (dropdownEl && !dropdownEl.contains(e.target as Node)) {
+      open = false;
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      const timer = setTimeout(() => {
+        document.addEventListener("click", handleClickOutside);
+      }, 0);
+      return () => {
+        clearTimeout(timer);
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }
+  });
+
+  async function handleLogout() {
+    await cloudAuth.logout();
+    open = false;
+  }
+
+  function getInitials(): string {
+    const u = cloudState.user;
+    if (!u) return "?";
+    if (u.displayName) return u.displayName.slice(0, 2).toUpperCase();
+    if (u.username) return u.username.slice(0, 2).toUpperCase();
+    if (u.email) return u.email.slice(0, 2).toUpperCase();
+    return "?";
+  }
+</script>
+
+<div class="relative flex items-center" bind:this={dropdownEl}>
+  <button
+    type="button"
+    onclick={() => (open = !open)}
+    class="flex items-center gap-2 px-3 py-2 rounded-lg bg-zinc-100/80 dark:bg-zinc-700/80 hover:bg-zinc-200/80 dark:hover:bg-zinc-600/80 transition-colors duration-200 text-base font-medium text-zinc-900 dark:text-white"
+  >
+    {#if cloudState.isLoggedIn}
+      {#if cloudState.user?.pfpUrl}
+        <img
+          src={cloudState.user.pfpUrl}
+          alt=""
+          class="w-8 h-8 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
+        />
+      {:else}
+        <div class="flex items-center justify-center w-8 h-8 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-sm">
+          {getInitials()}
+        </div>
+      {/if}
+      <span
+        class={alwaysShowUserName
+          ? "inline max-w-[10rem] truncate text-sm"
+          : "hidden max-w-24 truncate sm:inline text-base"}
+      >
+        {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
+      </span>
+    {:else}
+      <span class="text-xl font-IconFamily" aria-hidden="true">{'\ued53'}</span>
+      <span class="text-base font-medium">Sign in</span>
+    {/if}
+  </button>
+
+  {#if open}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="absolute right-0 top-full mt-2 w-80 rounded-xl border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 shadow-xl z-[100] overflow-hidden"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <div class="p-4 border-b border-zinc-200 dark:border-zinc-600">
+        <h3 class="text-xl font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h3>
+        <p class="text-base text-zinc-500 dark:text-zinc-400">Sync favorites across devices</p>
+      </div>
+      <div class="p-4">
+        {#if cloudState.isLoggedIn}
+          <div class="flex flex-col gap-3">
+            <div class="flex items-center gap-3">
+              {#if cloudState.user?.pfpUrl}
+                <img
+                  src={cloudState.user.pfpUrl}
+                  alt=""
+                  class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
+                />
+              {:else}
+                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
+                  {getInitials()}
+                </div>
+              {/if}
+              <div class="min-w-0 flex-1">
+                <p class="text-base font-medium text-zinc-900 dark:text-white truncate">
+                  {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
+                </p>
+                {#if cloudState.user?.email && cloudState.user?.email !== (cloudState.user?.displayName || cloudState.user?.username)}
+                  <p class="text-base text-zinc-500 dark:text-zinc-400 truncate">{cloudState.user.email}</p>
+                {/if}
+              </div>
+            </div>
+            <button
+              type="button"
+              onclick={handleLogout}
+              class="w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
+            >
+              Sign out
+            </button>
+          </div>
+        {:else}
+          <CloudLoginForm
+            onSuccess={() => {
+              open = false;
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

src/interface/components/store/CloudLoginForm.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { cloudAuth } from "@/seqta/utils/CloudAuth";
+
+  let {
+    introText,
+    onSuccess,
+    compact = false,
+  } = $props<{
+    introText?: string;
+    onSuccess?: () => void;
+    /** Smaller padding/text for overlays (e.g. SignInToFavoriteModal) */
+    compact?: boolean;
+  }>();
+
+  let username = $state("");
+  let password = $state("");
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+
+  const inputClass = $derived(
+    compact
+      ? "w-full px-4 py-2 text-sm rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200"
+      : "w-full px-4 py-3 text-base rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200",
+  );
+
+  const btnClass = $derived(
+    compact
+      ? "w-full px-4 py-2 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 disabled:opacity-50 transition-colors duration-200"
+      : "w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 disabled:opacity-50 transition-colors duration-200",
+  );
+
+  const linkClass = $derived(
+    compact
+      ? "inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200"
+      : "inline-flex items-center justify-center gap-2 px-4 py-3 text-base font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200",
+  );
+
+  async function handleLogin() {
+    if (loading) return;
+    error = null;
+    if (!username.trim() || !password) {
+      error = "Please enter username and password";
+      return;
+    }
+    loading = true;
+    try {
+      const result = await cloudAuth.login(username.trim(), password);
+      if (result.success) {
+        password = "";
+        onSuccess?.();
+      } else {
+        error = result.error ?? "Login failed";
+      }
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+{#if introText}
+  <p
+    class="mb-4 text-zinc-600 dark:text-zinc-400 {compact ? 'text-sm' : 'text-base'}"
+  >
+    {introText}
+  </p>
+{/if}
+<form
+  class="flex flex-col gap-3"
+  autocomplete="off"
+  onsubmit={(e) => {
+    e.preventDefault();
+    handleLogin();
+  }}
+>
+  <input
+    type="text"
+    name="betterseqta-cloud-username"
+    autocomplete="off"
+    placeholder="Email or username"
+    bind:value={username}
+    disabled={loading}
+    readonly
+    onfocus={(e) => e.currentTarget.removeAttribute("readonly")}
+    class={inputClass}
+  />
+  <input
+    type="password"
+    name="betterseqta-cloud-password"
+    autocomplete="new-password"
+    placeholder="Password"
+    bind:value={password}
+    disabled={loading}
+    readonly
+    onfocus={(e) => e.currentTarget.removeAttribute("readonly")}
+    class={inputClass}
+  />
+  {#if error}
+    <p class="text-red-600 dark:text-red-400 {compact ? 'text-sm' : 'text-base'}">{error}</p>
+  {/if}
+  <button type="submit" disabled={loading} class={btnClass}>
+    {loading ? "Signing in..." : "Sign in"}
+  </button>
+  <a
+    href="https://accounts.betterseqta.org/register"
+    target="_blank"
+    rel="noopener noreferrer"
+    class={linkClass}
+  >
+    Create account
+  </a>
+</form>

src/interface/components/store/CoverSwiper.svelte

@@ -29,7 +29,7 @@
 {#if coverThemes.length > 0}
   <div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
     <div 
-      class="w-full aspect-8/3" 
+      class="w-full aspect-[5/1] max-h-[500px]" 
       use:emblaCarouselSvelte={{ options, plugins }} 
       onemblaInit={onInit}
     >
@@ -42,9 +42,25 @@
             onkeydown={(e) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
             onclick={() => setDisplayTheme(theme)}
           >
-            <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
+            <img src={theme.marqueeImage || theme.coverImage} alt="Theme Preview" class="object-cover w-full h-full" />
+            {#if theme.featured === true}
+              <div class="absolute top-4 left-4 z-[2] pointer-events-none">
+                <span
+                  class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-100 shadow-sm"
+                  aria-label="Featured theme"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
+                    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
+                  </svg>
+                  Featured
+                </span>
+              </div>
+            {/if}
             <div class='absolute bottom-0 left-0 p-8 z-[1]'>
               <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
+              {#if theme.author}
+                <p class="text-sm text-white/90 mt-1 mb-1 line-clamp-1">By {theme.author}</p>
+              {/if}
               <p class='text-lg text-white'>{theme.description}</p>
             </div>
             <div class='absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80'></div>

src/interface/components/store/Header.svelte

@@ -3,6 +3,7 @@
   import logoDark from '@/resources/icons/betterseqta-light-full.png';
   import { closeStore } from '@/seqta/ui/renderStore'
   import browser from 'webextension-polyfill';
+  import CloudHeader from './CloudHeader.svelte';
 
   // Props
   let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
@@ -39,6 +40,8 @@
       >
         Backgrounds
       </button>
+
+      <CloudHeader />
     </div>
 
     <div class="flex relative gap-2">

src/interface/components/store/ThemeCard.svelte

@@ -1,19 +1,129 @@
 <script lang="ts">
   import type { Theme } from '@/interface/types/Theme'
-
-  let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
-
   import { fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  let { theme, onClick, toggleFavorite, isLoggedIn, onRequestSignIn } = $props<{
+    theme: Theme;
+    onClick: () => void;
+    toggleFavorite: (theme: Theme) => void;
+    isLoggedIn: boolean;
+    onRequestSignIn?: () => void;
+  }>();
+  let menuOpen = $state(false);
+  let menuRef: HTMLDivElement;
+
+  onMount(() => {
+    const closeMenu = (e: MouseEvent) => {
+      if (menuOpen && menuRef && !menuRef.contains(e.target as Node)) {
+        menuOpen = false;
+      }
+    };
+    document.addEventListener('click', closeMenu);
+    return () => document.removeEventListener('click', closeMenu);
+  });
+
+  function handleCardClick(e: MouseEvent) {
+    if ((e.target as HTMLElement).closest('[data-theme-menu]')) return;
+    onClick();
+  }
+
+  function handleFavoriteClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (isLoggedIn) {
+      toggleFavorite(theme);
+    } else {
+      onRequestSignIn?.();
+    }
+    menuOpen = false;
+  }
 </script>
 
-<div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
+<div
-  <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>
+  class="relative z-0 hover:z-20 w-full cursor-pointer"
-    <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
+  role="button"
-      {theme.name}
+  tabindex="-1"
+  onkeydown={onClick}
+  onclick={handleCardClick}
+>
+  <div
+    class="bg-gray-50 w-full transition-all duration-500 ease-out relative group flex flex-col rounded-xl overflow-clip border hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] dark:hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto"
+    transition:fade
+  >
+    {#if theme.featured === true}
+      <div class="absolute top-2 left-2 z-20 pointer-events-none">
+        <span
+          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-100 shadow-sm"
+          aria-label="Featured theme"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
+            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
+          </svg>
+          Featured
+        </span>
+      </div>
+    {/if}
+    <!-- Menu dropdown -->
+    <div class="absolute top-2 right-2 z-20" data-theme-menu bind:this={menuRef}>
+      <button
+        type="button"
+        class="flex justify-center items-center w-8 h-8 rounded-lg bg-black/40 hover:bg-black/60 text-white transition-all"
+        onclick={(e) => { e.stopPropagation(); menuOpen = !menuOpen; }}
+        aria-label="Theme options"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5">
+          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+        </svg>
+      </button>
+      {#if menuOpen}
+        <div
+          class="absolute right-0 top-full mt-1 py-1 min-w-[140px] rounded-lg bg-white dark:bg-zinc-800 shadow-lg border border-zinc-200 dark:border-zinc-700"
+          role="menu"
+        >
+          <button
+            type="button"
+            class="flex gap-2 items-center w-full px-3 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700"
+            role="menuitem"
+            onclick={handleFavoriteClick}
+            title={isLoggedIn ? (theme.is_favorited ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill={theme.is_favorited ? 'currentColor' : 'none'}
+              stroke="currentColor"
+              stroke-width="2"
+              class="w-5 h-5 {theme.is_favorited ? 'text-red-500' : ''}"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+            </svg>
+            {theme.is_favorited ? 'Favorited' : 'Favorite'}
+          </button>
+        </div>
+      {/if}
+    </div>
+    <div class="absolute bottom-1 left-3 right-3 z-10 mb-1 flex flex-col gap-0.5">
+      <span class="text-xl font-bold text-white drop-shadow-md">{theme.name}</span>
+      {#if theme.author}
+        <span class="text-xs text-white/85 drop-shadow-md line-clamp-1">By {theme.author}</span>
+      {/if}
+      <div class="flex gap-3 text-xs font-medium text-white/90 drop-shadow-sm">
+        <span class="flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3.5 h-3.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+          </svg>
+          {(theme.download_count ?? 0).toLocaleString()}
+        </span>
+        <span class="flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" class="w-3.5 h-3.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+          </svg>
+          {(theme.favorite_count ?? 0).toLocaleString()}
+        </span>
+      </div>
     </div>
     <div class='absolute bottom-0 z-0 w-full h-3/4 bg-linear-to-t to-transparent from-black/80'></div>
     <div class='w-full'>
-      <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
+      <img src={theme.marqueeImage || theme.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
     </div>
   </div>
 </div>

src/interface/components/store/ThemeGrid.svelte

@@ -2,7 +2,14 @@
   import type { Theme } from '@/interface/types/Theme'
   import ThemeCard from './ThemeCard.svelte';
 
-  let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();
+  let { themes, searchTerm, setDisplayTheme, toggleFavorite, isLoggedIn, onRequestSignIn } = $props<{
+    themes: Theme[];
+    searchTerm: string;
+    setDisplayTheme: (theme: Theme) => void;
+    toggleFavorite: (theme: Theme) => void;
+    isLoggedIn: boolean;
+    onRequestSignIn?: () => void;
+  }>();
   
   let filteredThemes = $derived(themes.filter((theme: Theme) =>
     theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
@@ -12,12 +19,18 @@
 <div class="relative" >
   <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
     {#each filteredThemes as theme (theme.id)}
-      <ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
+      <ThemeCard
+        {theme}
+        onClick={() => setDisplayTheme(theme)}
+        {toggleFavorite}
+        {isLoggedIn}
+        {onRequestSignIn}
+      />
     {/each}
   
     {#if filteredThemes.length !== 0}
-      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='w-full cursor-pointer'>
+      <a href="https://docs.betterseqta.org/theme-creation/" class="block relative z-0 hover:z-20 w-full cursor-pointer">
-        <div class="bg-zinc-50 h-48 w-full transition-all hover:scale-105 duration-500 relative justify-center items-center 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] rounded-xl overflow-clip border">
+        <div class="bg-zinc-50 h-48 w-full transition-all duration-500 ease-out relative overflow-clip rounded-xl border group group/card flex flex-col justify-center items-center hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1]">
           <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
           <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
             Got a Theme Idea?
@@ -32,7 +45,7 @@
     <div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
       <h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
       <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
-      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
+      <a href="https://docs.betterseqta.org/theme-creation/" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
         Show me how!
       </a>
     </div>

src/interface/components/store/ThemeModal.svelte

@@ -2,8 +2,7 @@
   import type { Theme } from '@/interface/types/Theme'
   import { fade } from 'svelte/transition';
   import { animate } from 'motion';
-
+  let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme, toggleFavorite, isLoggedIn, onRequestSignIn } = $props<{
-  let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme } = $props<{
     theme: Theme | null;
     currentThemes: string[];
     setDisplayTheme: (theme: Theme | null) => void;
@@ -11,17 +10,41 @@
     onRemove: (themeId: string) => void;
     allThemes: Theme[];
     displayTheme: Theme | null;
+    toggleFavorite?: (theme: Theme) => void;
+    isLoggedIn?: boolean;
+    onRequestSignIn?: () => void;
   }>();
   let installing = $state(false);
   let modalElement: HTMLElement;
 
-  // Function to get related themes
+  function handleFavoriteClick() {
-  function getRelatedThemes() {
+    if (isLoggedIn && toggleFavorite && theme) {
-    return allThemes
+      toggleFavorite(theme);
-      .filter((t: Theme) => t.id !== theme.id)
+    } else {
-      .sort((a: Theme, b: Theme) => a.name.localeCompare(theme.name) - b.name.localeCompare(theme.name))
+      onRequestSignIn?.();
-      .slice(0, 4);
     }
+  }
+
+  function tagsOverlap(a: string[] | undefined, b: string[] | undefined): boolean {
+    const lowerB = new Set((b ?? []).map((t) => t.toLowerCase()));
+    return (a ?? []).some((t) => lowerB.has(t.toLowerCase()));
+  }
+
+  const relatedThemes = $derived.by(() => {
+    const t = theme;
+    if (!t) return [] as Theme[];
+    if ((t.tags ?? []).length === 0) return [];
+    return allThemes
+      .filter((x: Theme) => !!x && x.id !== t.id && tagsOverlap(t.tags, x.tags))
+      .sort((a: Theme, b: Theme) => {
+        const diff = (b.download_count ?? 0) - (a.download_count ?? 0);
+        if (diff !== 0) return diff;
+        const byName = a.name.localeCompare(b.name);
+        if (byName !== 0) return byName;
+        return a.id.localeCompare(b.id);
+      })
+      .slice(0, 4);
+  });
 
   $effect(() => {
     if (displayTheme) {
@@ -72,19 +95,69 @@
     onclick={(e) => e.stopPropagation()}
     onkeydown={(e) => e.stopPropagation()}
   >
+    {#if theme}
     <div class="relative h-auto">
-      <button class="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200" onclick={() => hideModal()}>
+      <div class="absolute top-0 right-0 flex gap-1 items-center">
+        <button class="p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200" onclick={() => hideModal()}>
           {'\ued8a'}
         </button>
-      <h2 class="mb-4 text-2xl font-bold">
+      </div>
+      <div class="flex flex-wrap items-center gap-2 pr-12 mb-2">
+        <h2 class="text-2xl font-bold">
           {theme.name}
         </h2>
-      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
+        {#if theme.featured === true}
+          <span
+            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-100"
+            aria-label="Featured theme"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
+              <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
+            </svg>
+            Featured
+          </span>
+        {/if}
+      </div>
+      {#if theme.author}
+        <p class="mb-2 text-sm text-zinc-600 dark:text-zinc-400">
+          By {theme.author}
+        </p>
+      {/if}
+      <div class="flex gap-4 mb-4 text-sm text-zinc-600 dark:text-zinc-400">
+        <span class="flex items-center gap-1.5">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+          </svg>
+          {(theme.download_count ?? 0).toLocaleString()} downloads
+        </span>
+        <span class="flex items-center gap-1.5">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" class="w-4 h-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+          </svg>
+          {(theme.favorite_count ?? 0).toLocaleString()} favorites
+        </span>
+      </div>
+      <img src={theme.marqueeImage || theme.coverImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
       <p class="mb-4 text-gray-700 dark:text-gray-300">
         {theme.description}
       </p>
+      <div class="flex flex-wrap gap-2 mt-4 justify-end items-center">
+        {#if toggleFavorite && theme}
+          <button
+            type="button"
+            class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-200 hover:scale-105 active:scale-95 {theme.is_favorited ? 'text-red-500 bg-red-500/10 dark:bg-red-500/20' : 'bg-zinc-200 dark:bg-zinc-700 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600'}"
+            onclick={handleFavoriteClick}
+            title={isLoggedIn ? (theme.is_favorited ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
+            aria-label={theme.is_favorited ? 'Unfavorite' : 'Favorite'}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+            </svg>
+            {theme.is_favorited ? 'Favorited' : 'Favorite'}
+          </button>
+        {/if}
         {#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="flex relative justify-center items-center px-4 py-2 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 transition-all duration-200 hover:scale-105 active:scale-95">
             {#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 +166,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="flex relative justify-center items-center px-4 py-2 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 transition-all duration-200 hover:scale-105 active:scale-95">
             {#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"/>
@@ -102,25 +175,35 @@
             <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Install</span>
           </button>
         {/if}
+      </div>
 
+      {#if relatedThemes.length > 0}
         <div class="my-8 border-b border-zinc-200 dark:border-zinc-700"></div>
 
         <h3 class="mb-4 text-lg font-bold">
-        Similar Themes
+          Related themes
         </h3>
         <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
+          {#each relatedThemes as relatedTheme (relatedTheme.id)}
-          <button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
+            <button onclick={() => { hideModal(relatedTheme) }} class="relative z-0 hover:z-20 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="bg-gray-50 w-full transition-all duration-500 ease-out relative group group/card flex flex-col hover:scale-105 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">
                   {relatedTheme.name}
                 </div>
                 <div class="absolute bottom-0 z-0 w-full h-3/4 to-transparent from-black/80 bg-linear-to-t"></div>
-              <img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
+                <img src={relatedTheme.marqueeImage || relatedTheme.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
               </div>
             </button>
           {/each}
         </div>
-    </div>
+      {/if}
+    </div>
+    {:else}
+      <div class="flex justify-center items-center h-full text-zinc-600 dark:text-zinc-300">
+        <button class="px-4 py-2 rounded-lg bg-zinc-200 dark:bg-zinc-700 transition-all duration-200 hover:scale-105 active:scale-95" onclick={() => hideModal()}>
+          Close
+        </button>
+      </div>
+    {/if}
   </div>
 </div>

src/interface/components/themes/ThemeSelector.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
   import { onDestroy, onMount } from 'svelte'
+  import browser from 'webextension-polyfill'
   import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
   import { OpenStorePage } from '@/seqta/ui/renderStore'
   import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
   import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
   import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
+  import { cloudAuth } from '@/seqta/utils/CloudAuth'
+  import SignInToFavoriteModal from '@/interface/components/SignInToFavoriteModal.svelte'
 
   const themeManager = ThemeManager.getInstance();
 
@@ -13,6 +16,17 @@
   let { isEditMode } = $props<{ isEditMode: boolean }>();
   let isDragging = $state(false);
   let tempTheme = $state(null);
+  let favoriteStatus = $state<Record<string, boolean>>({});
+  let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
+  let prevLoggedIn = $state(false);
+  let showSignInModal = $state(false);
+
+  cloudAuth.subscribe((s) => {
+    const now = s.isLoggedIn;
+    if (now && !prevLoggedIn && themes) void fetchThemes();
+    prevLoggedIn = now;
+    cloudLoggedIn = now;
+  });
 
   const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
     if (isEditMode) return;
@@ -71,7 +85,7 @@
       try {
         const result = JSON.parse(event.target?.result as string);
         tempTheme = result;
-        await themeManager.installTheme(result);
+        await themeManager.installTheme(result, { fromStore: false });
         await fetchThemes();
       } catch (error) {
         console.error('Error parsing file:', error);
@@ -87,11 +101,55 @@
       themes: await themeManager.getAvailableThemes(),
       selectedTheme: themeManager.getSelectedThemeId() || '',
     }
+    if (themes && cloudLoggedIn) {
+      const token = await cloudAuth.getStoredToken();
+      if (token) {
+        const status: Record<string, boolean> = {};
+        await Promise.all(
+          themes.themes.map(async (t) => {
+            try {
+              const res = (await browser.runtime.sendMessage({
+                type: 'fetchThemeDetails',
+                themeId: t.id,
+                token,
+              })) as { success?: boolean; data?: { theme?: { is_favorited?: boolean } } };
+              if (res?.success && res?.data?.theme) {
+                status[t.id] = !!res.data.theme.is_favorited;
+              }
+            } catch {
+              // Theme may not exist on store (e.g. locally created)
+            }
+          })
+        );
+        favoriteStatus = status;
+      }
+    } else {
+      favoriteStatus = {};
+    }
+  }
+
+  const handleToggleFavorite = async (theme: CustomTheme, e: MouseEvent) => {
+    e.stopPropagation();
+    if (!cloudLoggedIn) {
+      showSignInModal = true;
+      return;
+    }
+    const token = await cloudAuth.getStoredToken();
+    if (!token) return;
+    const isFavorite = !favoriteStatus[theme.id];
+    const result = (await browser.runtime.sendMessage({
+      type: 'cloudFavorite',
+      themeId: theme.id,
+      token,
+      action: isFavorite ? 'favorite' : 'unfavorite',
+    })) as { success?: boolean };
+    if (result?.success) {
+      favoriteStatus = { ...favoriteStatus, [theme.id]: isFavorite };
+    }
   }
 
   onMount(async () => {
     await fetchThemes();
-
     themeUpdates.addListener(fetchThemes);
   })
 
@@ -144,6 +202,18 @@
           {/if}
 
           {#if !isEditMode}
+            <div
+              class="flex absolute right-24 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 group-hover:opacity-100 group-hover:top-1/2 {(favoriteStatus[theme.id] ?? false) ? 'text-red-400' : 'text-white/80'} bg-black/50"
+              onclick={(event) => handleToggleFavorite(theme, event)}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleToggleFavorite(theme, event as any) }}
+              role="button"
+              tabindex="-1"
+              title={cloudLoggedIn ? ((favoriteStatus[theme.id] ?? false) ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={(favoriteStatus[theme.id] ?? false) ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class="w-5 h-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+              </svg>
+            </div>
             <div
               class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
               onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
@@ -211,3 +281,7 @@
     </button>
   </div>
 </div>
+
+{#if showSignInModal}
+  <SignInToFavoriteModal onClose={() => (showSignInModal = false)} />
+{/if}

src/interface/pages/settings.svelte

@@ -16,9 +16,11 @@
 
   import ColourPicker from "../components/ColourPicker.svelte";
   import DisclaimerModal from "../components/DisclaimerModal.svelte";
+  import CloudHeader from "@/interface/components/store/CloudHeader.svelte";
   import { settingsPopup } from "../hooks/SettingsPopup";
 
   let devModeSequence = "";
+  let settingsActiveTab = $state(0);
   let showDisclaimerModal = $state(false);
   let disclaimerCallbacks = $state<{ onConfirm: () => void, onCancel: () => void } | null>(null);
 
@@ -71,13 +73,14 @@
     showDisclaimerModal = true;
   };
 
-  onMount(async () => {
+  onMount(() => {
     settingsPopup.addListener(() => {
       showColourPicker = false;
     });
 
-    if (!standalone) return;
+    if (standalone) {
       StandaloneStore.setStandalone(true);
+    }
   });
 </script>
 
@@ -274,7 +277,20 @@
       {/if}
     </div>
 
+    <div
+      class="flex shrink-0 items-center justify-between gap-2 px-4 py-2.5 border-b border-zinc-200/40 dark:border-zinc-700/40"
+    >
+      <div class="min-w-0 flex-1">
+        <h2 class="text-sm font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h2>
+        <p class="text-xs text-zinc-500 dark:text-zinc-400">Account & sync</p>
+      </div>
+      <div class="shrink-0">
+        <CloudHeader alwaysShowUserName />
+      </div>
+    </div>
+
     <TabbedContainer
+      bind:activeTab={settingsActiveTab}
       tabs={[
         {
           title: "Settings",

src/interface/pages/settings/general.svelte

@@ -10,8 +10,11 @@
   import type { SettingsList } from "@/interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
+  import ConnectMobileApp from "@/interface/components/ConnectMobileApp.svelte"
+  import CloudSettingsSync from "@/interface/components/CloudSettingsSync.svelte"
   import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification"
   import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
+  import { getSnapshotForUpload } from "@/seqta/utils/cloudSettingsSync"
 
   import { getAllPluginSettings } from "@/plugins"
   import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
@@ -96,6 +99,19 @@
     showColourPicker: () => void;
     showDisclaimer: (onConfirm: () => void, onCancel: () => void) => void;
   }>();
+
+  async function exportCloudSettingsJsonToFile() {
+    const payload = await getSnapshotForUpload();
+    const blob = new Blob([JSON.stringify(payload, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `betterseqta-plus-settings-export-${new Date().toISOString().replace(/[:.]/g, "-")}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
 </script>
 
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
@@ -113,27 +129,15 @@
 <div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
   {#each [
     {
-      title: "Transparency Effects",
+      title: "Connect Mobile App",
-      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
+      description: "Link your SEQTA session to DesQTA — the modern desktop and mobile app for SEQTA Learn",
-      id: 1,
+      id: 0,
-      Component: Switch,
+      Component: ConnectMobileApp,
-      props: {
+      props: {}
-        state: $settingsState.transparencyEffects,
-        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
-      }
-    },
-    {
-      title: "Custom Theme Colour",
-      description: "Customise the overall theme colour of SEQTA Learn.",
-      id: 4,
-      Component: PickerSwatch,
-      props: {
-        onClick: showColourPicker
-      }
     },
     {
       title: "Edit Sidebar Layout",
-      description: "Customise the sidebar layout.",
+      description: "Reorder pages on the sidebar",
       id: 5,
       Component: Button,
       props: {
@@ -141,9 +145,28 @@
         text: "Edit"
       }
     },
+    {
+      title: "Custom Theme Colour",
+      description: "Customise the overall theme colour of SEQTA Learn",
+      id: 4,
+      Component: PickerSwatch,
+      props: {
+        onClick: showColourPicker
+      }
+    },
+    {
+      title: "Icon Only Sidebar",
+      description: "Show only icons in the sidebar for a compact layout",
+      id: 14,
+      Component: Switch,
+      props: {
+        state: $settingsState.iconOnlySidebar ?? false,
+        onChange: (isOn: boolean) => settingsState.iconOnlySidebar = isOn
+      }
+    },
     {
       title: "Animations",
-      description: "Enables animations on certain pages.",
+      description: "Enable animations on certain pages",
       id: 6,
       Component: Switch,
       props: {
@@ -161,28 +184,39 @@
         onChange: (isOn: boolean) => settingsState.timeFormat = isOn ? "12" : "24"
       }
     },
+    {
+      title: "Transparency Effects",
+      description: "Enable transparency effects on certain elements, such as blur (May impact battery life)",
+      id: 1,
+      Component: Switch,
+      props: {
+        state: $settingsState.transparencyEffects,
+        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
+      }
+    },
     {
       title: "Default Page",
-      description: "The page to load when SEQTA Learn is opened.",
+      description:
+        "The page to load when SEQTA Learn or SEQTA Engage opens (uses the same #?page=/… URL as SEQTA). BetterSEQTA home on Engage only applies when Home is selected.",
       id: 10,
       Component: Select,
       props: {
         state: $settingsState.defaultPage,
-        onChange: (value: string) => settingsState.defaultPage = value,
+        onChange: (value: string) => (settingsState.defaultPage = value),
         options: [
-          { value: 'home', label: 'Home' },
+          { value: "home", label: "Home" },
-          { value: 'dashboard', label: 'Dashboard' },
+          { value: "dashboard", label: "Dashboard" },
-          { value: 'timetable', label: 'Timetable' },
+          { value: "timetable", label: "Timetable" },
-          { value: 'welcome', label: 'Welcome' },
+          { value: "welcome", label: "Welcome" },
-          { value: 'messages', label: 'Messages' },
+          { value: "messages", label: "Messages" },
-          { value: 'documents', label: 'Documents' },
+          { value: "documents", label: "Documents" },
-          { value: 'reports', label: 'Reports' },
+          { value: "reports", label: "Reports" },
-        ]
+        ],
-      }
+      },
     },
     {
       title: "News Feed Source",
-      description: "Choose sources of your news feed.",
+      description: "Choose the sources for your news feed",
       id: 11,
       Component: Select,
       props: {
@@ -207,6 +241,49 @@
     {@render Setting(option)}
   {/each}
 
+  <div class="border-none">
+    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Adaptive Theme Colour</h2>
+          <p class="text-xs">Change the theme colour based on the current class (e.g. when viewing a course or assessments page)</p>
+        </div>
+        <div>
+          <Switch
+            state={$settingsState.adaptiveThemeColour ?? false}
+            onChange={(isOn: boolean) => settingsState.adaptiveThemeColour = isOn}
+          />
+        </div>
+      </div>
+      {#if $settingsState.adaptiveThemeColour}
+        <div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
+          <div class="pr-4">
+            <h2 class="text-sm font-bold">Soft Gradient</h2>
+            <p class="text-xs">Use a soft gradient instead of a solid colour when viewing a class</p>
+          </div>
+          <div>
+            <Switch
+              state={$settingsState.adaptiveThemeGradient ?? false}
+              onChange={(isOn: boolean) => settingsState.adaptiveThemeGradient = isOn}
+            />
+          </div>
+        </div>
+        <div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
+          <div class="pr-4">
+            <h2 class="text-sm font-bold">Smooth colour transition</h2>
+            <p class="text-xs">Ease between class/subject colours when navigating instead of switching instantly</p>
+          </div>
+          <div>
+            <Switch
+              state={$settingsState.adaptiveThemeColourTransition ?? true}
+              onChange={(isOn: boolean) => settingsState.adaptiveThemeColourTransition = isOn}
+            />
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+
   {#each pluginSettings as plugin}
   <div class="border-none">
     <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40 {!(plugin as any).disableToggle && Object.keys(plugin.settings).length === 0 ? 'hidden' : ''}">
@@ -234,7 +311,6 @@
                         await updatePluginSetting(plugin.pluginId, 'enabled', true);
                       },
                       () => {
-                        // Do nothing on cancel
                       }
                     );
                     return;
@@ -262,6 +338,7 @@
                       onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                     />
                   {:else if setting.type === 'number'}
+                    <div class="w-28 shrink-0">
                       <Slider
                         state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                         onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
@@ -269,6 +346,7 @@
                         max={setting.max}
                         step={setting.step}
                       />
+                    </div>
                   {:else if setting.type === 'string'}
                     <input
                       type="text"
@@ -323,6 +401,10 @@
     }
   })}
 
+  <div class="border-none py-3">
+    <CloudSettingsSync />
+  </div>
+
   {#if $settingsState.devMode}
     <div class="flex-col p-1 my-1 bg-gradient-to-br from-white rounded-xl border shadow-sm to-zinc-100 border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
       <div class="flex justify-between items-center px-4 py-3">
@@ -377,6 +459,15 @@
           />
         </div>
       </div>
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Export cloud settings JSON</h2>
+          <p class="text-xs">Download the same payload as cloud sync (OAuth tokens stripped). For debugging and server testing.</p>
+        </div>
+        <div>
+          <Button onClick={exportCloudSettingsJsonToFile} text="Export to file" />
+        </div>
+      </div>
     </div>
   {/if}
 </div>

src/interface/pages/store.svelte

@@ -15,8 +15,13 @@
 
   import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
   import Backgrounds from '../components/store/Backgrounds.svelte'
+  import { cloudAuth } from '@/seqta/utils/CloudAuth'
+  import SignInToFavoriteModal from '../components/SignInToFavoriteModal.svelte'
 
   const themeManager = ThemeManager.getInstance();
+  let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
+
+  cloudAuth.subscribe((s) => { cloudLoggedIn = s.isLoggedIn; });
 
   // State variables
   let searchTerm = $state('');
@@ -30,6 +35,7 @@
   
   let error = $state<string | null>(null);
   let selectedBackground = $state<string | null>(null);
+  let showSignInOverlay = $state(false);
 
   const fetchCurrentThemes = async () => {
     const themes = await themeManager.getAvailableThemes();
@@ -48,20 +54,65 @@
     activeTab = tab;
   };
 
-  // Fetch themes and initialize app
+  /** Featured themes first; within each group, newest by `created_at` (API: Unix seconds). */
+  function compareStoreThemes(a: Theme, b: Theme): number {
+    const fa = a.featured === true ? 1 : 0;
+    const fb = b.featured === true ? 1 : 0;
+    if (fa !== fb) return fb - fa;
+    const ca = a.created_at ?? 0;
+    const cb = b.created_at ?? 0;
+    if (ca !== cb) return cb - ca;
+    return a.name.localeCompare(b.name);
+  }
+
+  const toggleFavorite = async (theme: Theme) => {
+    const token = await cloudAuth.getStoredToken();
+    if (!token) return;
+    const isFavorite = !theme.is_favorited;
+    const result = (await browser.runtime.sendMessage({
+      type: 'cloudFavorite',
+      themeId: theme.id,
+      token,
+      action: isFavorite ? 'favorite' : 'unfavorite',
+    })) as { success?: boolean };
+    if (result?.success) {
+      const delta = isFavorite ? 1 : -1;
+      themes = themes.map((t) =>
+        t.id === theme.id
+          ? { ...t, is_favorited: isFavorite, favorite_count: Math.max(0, (t.favorite_count ?? 0) + delta) }
+          : t
+      );
+      if (displayTheme?.id === theme.id) {
+        displayTheme = {
+          ...displayTheme,
+          is_favorited: isFavorite,
+          favorite_count: Math.max(0, (displayTheme.favorite_count ?? 0) + delta),
+        };
+      }
+    }
+  };
+
+  // Fetch themes via background script (avoids CORS when store runs inside SEQTA page)
   const fetchThemes = async () => {
     try {
-      const response = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${(new Date()).getTime()}`, { cache: 'no-store' });
+      const token = await cloudAuth.getStoredToken();
-      const data = await response.json();
+      const data = (await browser.runtime.sendMessage({
-      themes = data.themes;
+        type: 'fetchThemes',
-
+        token: token ?? undefined,
-      // Shuffle for cover themes
+      })) as {
-      const shuffled = [...themes].sort(() => 0.5 - Math.random());
+        success?: boolean;
-      coverThemes = shuffled.slice(0, 3);
+        data?: { themes: Theme[] };
+        error?: string;
+      };
+      if (!data?.success || !data?.data?.themes) {
+        throw new Error(data?.error || 'Failed to fetch themes');
+      }
+      themes = [...data.data.themes].sort(compareStoreThemes);
+      coverThemes = themes.slice(0, 3);
 
       loading = false;
-    } catch (error) {
+    } catch (err) {
-      console.error('Failed to fetch themes', error);
+      console.error('Failed to fetch themes', err);
       setTimeout(fetchThemes, 5000); // Retry after 5 seconds if failure occurs
     }
   };
@@ -75,11 +126,14 @@
     darkMode = $settingsState.DarkMode;
   });
 
-  // Filter themes based on search term
+  // Filter themes (list is already featured-first, then newest; filter preserves order)
-  let filteredThemes = $derived(themes.filter(theme =>
+  let filteredThemes = $derived(
+    themes.filter(
+      (theme) =>
         theme.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    theme.description.toLowerCase().includes(searchTerm.toLowerCase())
+        theme.description.toLowerCase().includes(searchTerm.toLowerCase()),
-  ));
+    ),
+  );
 
   $effect(() => {
     loadBackground();
@@ -91,6 +145,17 @@
       console.error(error);
     }
   });
+
+  // Refetch themes when user logs in (from another tab) to get is_favorited
+  let lastLoggedIn = $state(false);
+  $effect(() => {
+    if (cloudLoggedIn && !lastLoggedIn) {
+      lastLoggedIn = true;
+      fetchThemes();
+    } else if (!cloudLoggedIn) {
+      lastLoggedIn = false;
+    }
+  });
 </script>
 
 <div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
@@ -111,7 +176,14 @@
           {/if}
     
           <!-- ThemeGrid to display filtered themes -->
-          <ThemeGrid themes={filteredThemes} {searchTerm} {setDisplayTheme} />
+          <ThemeGrid
+            themes={filteredThemes}
+            {searchTerm}
+            {setDisplayTheme}
+            {toggleFavorite}
+            isLoggedIn={cloudLoggedIn}
+            onRequestSignIn={() => (showSignInOverlay = true)}
+          />
     
           {#if displayTheme}
             <ThemeModal
@@ -120,6 +192,9 @@
               theme={displayTheme}
               {displayTheme}
               {setDisplayTheme}
+              {toggleFavorite}
+              isLoggedIn={cloudLoggedIn}
+              onRequestSignIn={() => (showSignInOverlay = true)}
               onInstall={async () => {
                 if (displayTheme) {
                   await themeManager.downloadTheme(displayTheme);
@@ -144,4 +219,8 @@
       {/if}
     </div>
   </div>
+
+  {#if showSignInOverlay}
+    <SignInToFavoriteModal onClose={() => (showSignInOverlay = false)} />
+  {/if}
 </div>

src/interface/pages/themeCreator.svelte

@@ -4,7 +4,10 @@
   import { slide } from 'svelte/transition';
   import { fade } from 'svelte/transition';
 
-  import { type LoadedCustomTheme } from '@/types/CustomThemes'
+  import {
+    type LoadedCustomTheme,
+    shouldForceThemeAppearance,
+  } from '@/types/CustomThemes'
 
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
@@ -21,9 +24,9 @@
     handleImageVariableChange,
     handleCoverImageUpload
   } from '../utils/themeImageHandlers';
-  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
-  import { themeUpdates } from '../hooks/ThemeUpdates'
   import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
+  import { themeUpdates } from '../hooks/ThemeUpdates'
+  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
 
   const { themeID } = $props<{ themeID: string }>()
   const themeManager = ThemeManager.getInstance();
@@ -40,7 +43,9 @@
     coverImage: null,
     isEditable: true,
     hideThemeName: false,
-    forceDark: undefined
+    forceTheme: undefined,
+    forceDark: undefined,
+    adaptiveCssVariables: [],
   })
   let closedAccordions = $state<string[]>([])
   let themeLoaded = $state(false);
@@ -80,7 +85,13 @@
         }))
       }
 
-      theme = loadedTheme
+      theme = {
+        ...loadedTheme,
+        adaptiveCssVariables: loadedTheme.adaptiveCssVariables ?? [],
+        forceTheme:
+          loadedTheme.forceTheme ??
+          (loadedTheme.forceDark !== undefined ? true : undefined),
+      }
       themeLoaded = true
     } else {
       themeLoaded = true
@@ -114,6 +125,14 @@
       blob: image.blob
     }))
     themeClone.coverImage = theme.coverImage
+    themeClone.userEdited = true
+
+    if (shouldForceThemeAppearance(themeClone)) {
+      themeClone.forceTheme = true;
+    } else {
+      themeClone.forceTheme = false;
+      themeClone.forceDark = undefined;
+    }
 
     themeManager.clearPreview();
     await themeManager.saveTheme(themeClone);
@@ -270,7 +289,7 @@
 
 
     <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'>
+    <a href='https://docs.betterseqta.org/theme-creation/' target='_blank' rel='noopener noreferrer' 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='underline'>
         Need help? Check out the docs!
@@ -317,6 +336,27 @@
 
     <Divider />
 
+    <div class="py-3">
+      <h2 class="text-sm font-bold">Adaptive CSS variables</h2>
+      <p class="text-xs text-zinc-600 dark:text-zinc-400">
+        One per line, each must start with <code class="text-xs">--</code>. These receive the same colour as the adaptive accent when &quot;Adaptive theme colour&quot; is enabled in general settings. Use them in Custom CSS, e.g. <code class="text-xs">border-color: var(--my-accent);</code>
+      </p>
+      <textarea
+        placeholder="--my-accent&#10;--class-banner"
+        value={theme.adaptiveCssVariables?.join('\n') ?? ''}
+        oninput={(e) => {
+          const lines = e.currentTarget.value
+            .split(/\r?\n/)
+            .map((s) => s.trim())
+            .filter(Boolean);
+          theme = { ...theme, adaptiveCssVariables: lines };
+        }}
+        class="p-2 mt-2 w-full min-h-[5rem] font-mono text-sm rounded-lg border-0 transition dark:placeholder-zinc-400 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 />
+
     {#each [
       {
         type: 'switch',
@@ -332,21 +372,28 @@
         title: 'Force Theme',
         description: 'Force users to use either dark or light mode',
         props: {
-          state: theme.forceDark !== undefined,
+          state: shouldForceThemeAppearance(theme),
-          onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined }
+          onChange: (value: boolean) => {
+            if (value) {
+              theme = { ...theme, forceTheme: true, forceDark: false };
+            } else {
+              theme = { ...theme, forceTheme: false, forceDark: undefined };
+            }
+          }
         }
       },
       {
         type: 'conditional',
         props: {
-          condition: theme.forceDark !== undefined,
+          condition: shouldForceThemeAppearance(theme),
           children: {
             type: 'lightDarkToggle',
             title: 'Mode',
             description: 'Choose whether to force light or dark mode',
             props: {
               state: theme.forceDark === true,
-              onChange: (value: boolean) => theme = { ...theme, forceDark: value }
+              onChange: (value: boolean) =>
+                (theme = { ...theme, forceDark: value, forceTheme: true })
             }
           }
         }

src/interface/types/Theme.ts

@@ -1,7 +1,18 @@
 export type Theme = {
+  id: string;
   name: string;
   description: string;
   coverImage: string;
-  marqueeImage: string;
+  marqueeImage?: string;
-  id: string;
+  theme_json_url?: string;
+  is_favorited?: boolean;
+  favorite_count?: number;
+  download_count?: number;
+  author?: string;
+  featured?: boolean;
+  tags?: string[];
+  /** Unix time in seconds (API list/detail). */
+  created_at?: number;
+  /** Unix seconds — last server update (GET /api/themes). */
+  updated_at?: number;
 };

src/interface/utils/portal.ts

@@ -0,0 +1,22 @@
+import type { Action } from "svelte/action";
+
+/**
+ * Svelte action that moves the element to a different DOM target.
+ * Defaults to the nearest ShadowRoot so styles remain intact when the app
+ * is rendered inside a shadow DOM. Falls back to document.body otherwise.
+ * Keeps all Svelte reactivity/events intact while escaping ancestor stacking contexts.
+ */
+export const portal: Action<HTMLElement, HTMLElement | ShadowRoot | undefined> = (node, target) => {
+  const root = node.getRootNode();
+  const dest = target ?? (root instanceof ShadowRoot ? root : document.body);
+  dest.appendChild(node);
+
+  return {
+    update(newTarget) {
+      (newTarget ?? dest).appendChild(node);
+    },
+    destroy() {
+      node.remove();
+    },
+  };
+};

src/lib/pdfjsExtension.ts

@@ -0,0 +1,27 @@
+import * as pdfjs from "pdfjs-dist";
+import browser from "webextension-polyfill";
+
+/** Static copies in `src/public` (see `scripts/copy-pdfjs-assets.mjs`, manifest web_accessible_resources). */
+const PDF_WORKER_RESOURCE = "resources/pdfjs/pdf.worker.min.mjs";
+const PDF_LEGACY_RESOURCE = "resources/pdfjs/pdf.legacy.min.mjs";
+
+function extensionAssetUrl(relativePath: string): string {
+  return browser.runtime.getURL(relativePath.replace(/^\/+/, ""));
+}
+
+let workerConfigured = false;
+
+/** Required before pdfjs spawns a worker (content-script / extension isolate). */
+export function ensurePdfjsWorker(): void {
+  if (workerConfigured) return;
+  pdfjs.GlobalWorkerOptions.workerSrc = extensionAssetUrl(PDF_WORKER_RESOURCE);
+  workerConfigured = true;
+}
+
+/** Page-context script on Firefox must load these chrome-extension:// URLs (see web_accessible_resources). */
+export function getPdfjsPageContextUrls(): { lib: string; worker: string } {
+  return {
+    lib: extensionAssetUrl(PDF_LEGACY_RESOURCE),
+    worker: extensionAssetUrl(PDF_WORKER_RESOURCE),
+  };
+}

src/manifests/manifest.json

@@ -15,13 +15,13 @@
       "64": "resources/icons/icon-64.png"
     }
   },
-  "permissions": ["tabs", "notifications", "storage"],
+  "permissions": ["tabs", "notifications", "storage", "alarms"],
-  "host_permissions": ["https://newsapi.org/", "*://*/*"],
+  "host_permissions": ["https://newsapi.org/", "https://betterseqta.org/", "https://accounts.betterseqta.org/", "*://*/*"],
   "background": {
     "service_worker": "background.ts"
   },
   "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' http: https: https://betterseqta.org https://accounts.betterseqta.org https://raw.githubusercontent.com https://newsapi.org"
   },
   "content_scripts": [
     {
@@ -32,7 +32,12 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["resources/icons/*", "resources/update-image.webp"],
+      "resources": [
+        "resources/icons/*",
+        "resources/update-image.webp",
+        "resources/pdfjs/pdf.worker.min.mjs",
+        "resources/pdfjs/pdf.legacy.min.mjs"
+      ],
       "matches": ["*://*/*"]
     }
   ]

src/plugins/built-in/animatedBackground/index.ts

@@ -6,6 +6,7 @@ import {
   Setting,
 } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
+import { waitForElm } from "@/seqta/utils/waitForElm";
 
 const settings = defineSettings({
   speed: numberSetting({
@@ -35,13 +36,10 @@ const animatedBackgroundPlugin: Plugin<typeof settings> = {
   settings: instance.settings,
 
   run: async (api) => {
-    // Create the background elements
+    const [container, menu] = await Promise.all([
-    const container = document.getElementById("container");
+      waitForElm("#container", true),
-    const menu = document.getElementById("menu");
+      waitForElm("#menu", true),
-
+    ]);
-    if (!container || !menu) {
-      return () => {};
-    }
 
     const backgrounds = [
       { classes: ["bg"] },

src/plugins/built-in/assessmentsAverage/index.ts

@@ -180,8 +180,52 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
       `).firstChild!,
         assessmentsList.firstChild,
       );
+
+      applySubjectColourToOverallResult();
+
+      const observer = new MutationObserver(() => {
+        applySubjectColourToOverallResult();
+      });
+      const wrapper = document.querySelector(".assessmentsWrapper");
+      if (wrapper) {
+        observer.observe(wrapper, { childList: true, subtree: true });
+        setTimeout(() => observer.disconnect(), 10000);
+      }
     });
   },
 };
 
+function applySubjectColourToOverallResult() {
+  const selectedAssessmentItem = document.querySelector(
+    "[class*='AssessmentItem__AssessmentItem___'][class*='selected___']",
+  ) || document.querySelector(
+    "[class*='Collapsible__content___'] [class*='AssessmentItem__AssessmentItem___']",
+  );
+  const assessmentThermoscore = selectedAssessmentItem?.querySelector(
+    "[class*='Thermoscore__Thermoscore___']",
+  ) as HTMLElement | null;
+  const overallResult = document.querySelector(
+    "[class*='OverallResult__OverallResult___']",
+  ) as HTMLElement | null;
+  const assessableCriterionHeaders = document.querySelectorAll(
+    "[class*='AssessableCriterion__header___']",
+  );
+
+  if (assessmentThermoscore && (overallResult || assessableCriterionHeaders.length > 0)) {
+    const accentColour =
+      getComputedStyle(assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
+      getComputedStyle(assessmentThermoscore).getPropertyValue("--fill-colour").trim() ||
+      getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
+      getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--item-colour").trim();
+    if (accentColour) {
+      overallResult?.style.setProperty("--assessment-accent-colour", accentColour);
+      overallResult?.style.setProperty("--fill-colour", accentColour);
+      assessableCriterionHeaders.forEach((el) => {
+        (el as HTMLElement).style.setProperty("--assessment-accent-colour", accentColour);
+        (el as HTMLElement).style.setProperty("--fill-colour", accentColour);
+      });
+    }
+  }
+}
+
 export default assessmentsAveragePlugin;

src/plugins/built-in/assessmentsAverage/utils.ts

@@ -1,8 +1,12 @@
 import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements.ts";
 import ReactFiber from "@/seqta/utils/ReactFiber.ts";
+import {
+  ensurePdfjsWorker,
+  getPdfjsPageContextUrls,
+} from "@/lib/pdfjsExtension.ts";
 import * as pdfjs from "pdfjs-dist";
-pdfjs.GlobalWorkerOptions.workerSrc =
+
-  "https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.worker.min.mjs";
+ensurePdfjsWorker();
 
 export async function initStorage(api: any) {
   await api.storage.loaded;
@@ -110,11 +114,16 @@ function createWeightLabel(
         : "N/A";
   }
 
-  statsContainer.style.position = "relative";
+  // Stack weight under Max/native stats — absolute right:0 overlapped the max column (#414).
-  weightLabel.style.position = "absolute";
+  statsContainer.style.display = "flex";
-  weightLabel.style.right = "0";
+  statsContainer.style.flexDirection = "column";
-  weightLabel.style.top = "50%";
+  statsContainer.style.alignItems = "flex-end";
-  weightLabel.style.transform = "translateY(-50%)";
+  statsContainer.style.gap = "2px";
+  statsContainer.style.justifyContent = "center";
+
+  weightLabel.style.position = "relative";
+  weightLabel.style.inset = "unset";
+  weightLabel.style.transform = "none";
 
   statsContainer.appendChild(weightLabel);
 }
@@ -219,6 +228,12 @@ async function fetchPDFAsArrayBuffer(url: string): Promise<ArrayBuffer> {
 export async function extractPDFText(url: string): Promise<string> {
   try {
     if (isFirefox) {
+      const { lib: pdfLibUrl, worker: pdfWorkerUrl } = getPdfjsPageContextUrls();
+      const escJsSingleQuoted = (s: string) =>
+        s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+      const pdfLibInj = escJsSingleQuoted(pdfLibUrl);
+      const pdfWorkerInj = escJsSingleQuoted(pdfWorkerUrl);
+
       return new Promise((resolve, reject) => {
         const script = document.createElement("script");
         const requestId = `pdf-extract-${Date.now()}-${Math.random()}`;
@@ -232,13 +247,15 @@ export async function extractPDFText(url: string): Promise<string> {
           (function() {
             const requestId = '${requestId}';
             const url = '${escapedUrl}';
+            const pdfLibSrc = '${pdfLibInj}';
+            const pdfWorkerSrc = '${pdfWorkerInj}';
             
             if (window.pdfjsLib) {
               extractPDF();
             } else {
               const pdfjsScript = document.createElement('script');
-              pdfjsScript.src = 'https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.min.js';
+              pdfjsScript.src = pdfLibSrc;
-              pdfjsScript.type = 'text/javascript';
+              pdfjsScript.type = 'module';
               
               pdfjsScript.onload = function() {
                 extractPDF();
@@ -256,7 +273,7 @@ export async function extractPDFText(url: string): Promise<string> {
             
             function extractPDF() {
               try {
-                window.pdfjsLib.GlobalWorkerOptions.workerSrc = '';
+                window.pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
                 
                 const xhr = new XMLHttpRequest();
                 xhr.open('GET', url, true);

src/plugins/built-in/assessmentsOverview/AssessmentsOverview.svelte

@@ -7,9 +7,11 @@
 
   interface FilterOptions {
     subject: string;
-    sortBy: "due" | "grade" | "subject" | "title";
+    sortBy: "due" | "grade" | "subject" | "title" | "year";
   }
 
+  const HIDDEN_ASSESSMENTS_KEY = "betterseqta-hidden-assessments";
+
   function percentageToLetter(percentage: number): string {
     const letterMap: Record<number, string> = {
       100: "A+",
@@ -41,48 +43,108 @@
 
   let filteredAssessments: any[] = [];
   let statusGroups: Record<string, any[]> = {};
+  let columns: { key: string; title: string; className: string; icon: string }[] = [];
 
-  function updateAssessments() {
+  function getAssessmentYear(a: any): number {
-    filteredAssessments = data.assessments.filter((a: any) => {
+    const dateStr = a.due || a.date || a.dueDate || a.created;
-      const subjectMatch =
+    return dateStr ? new Date(dateStr).getFullYear() : 0;
-        currentFilters.subject === "all" || a.code === currentFilters.subject;
+  }
-      return subjectMatch;
-    });
 
-    filteredAssessments.sort((a: any, b: any) => {
+  function getAssessmentType(a: any): string {
+    return (a.type || a.assessmentType || a.taskType || "Other").toString();
+  }
+
+  function getAssessmentGrade(a: any): string {
+    const val = getGradeValue(a);
+    if (val === null) return "No grade";
+    return percentageToLetter(val);
+  }
+
+  function getGroupKey(assessment: any): string {
     switch (currentFilters.sortBy) {
       case "due":
-          return new Date(a.due).getTime() - new Date(b.due).getTime();
+        return determineStatus(assessment);
-        case "grade":
+      case "year":
-          const gradeA = getGradeValue(a);
+        return String(getAssessmentYear(assessment) || "Unknown");
-          const gradeB = getGradeValue(b);
-          if (gradeA === null && gradeB === null) return 0;
-          if (gradeA === null) return 1;
-          if (gradeB === null) return -1;
-          return gradeB - gradeA;
       case "subject":
-          return a.code.localeCompare(b.code);
+        return assessment.code || "Unknown";
+      case "grade":
+        return getAssessmentGrade(assessment);
       case "title":
-          return a.title.localeCompare(b.title);
+        const first = (assessment.title || "?")[0].toUpperCase();
+        return /[A-Z0-9]/.test(first) ? first : "#";
       default:
-          return 0;
+        return determineStatus(assessment);
     }
+  }
+
+  function sortCompare(a: any, b: any): number {
+    return new Date(a.due || a.date || 0).getTime() - new Date(b.due || b.date || 0).getTime();
+  }
+
+  const STATUS_COLUMNS = [
+    { key: "UPCOMING", title: "Upcoming", className: "column-upcoming", icon: "📅" },
+    { key: "DUE_SOON", title: "Due Soon", className: "column-due-soon", icon: "⏰" },
+    { key: "OVERDUE", title: "Overdue", className: "column-overdue", icon: "🚨" },
+    { key: "SUBMITTED", title: "Submitted", className: "column-submitted", icon: "📝" },
+    { key: "MARKS_RELEASED", title: "Marked", className: "column-marked", icon: "✅" },
+  ];
+
+  function buildGroupsAndColumns() {
+    if (!data?.assessments) return { filteredAssessments: [], statusGroups: {}, columns: [] };
+    const subjectFilters = settingsState.subjectfilters || {};
+    const hiddenAssessmentIds = new Set(
+      (JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String)
+    );
+
+    const filtered = data.assessments.filter((a: any) => {
+      if (hiddenAssessmentIds.has(String(a.id))) return false;
+      if (subjectFilters[a.code] === false) return false;
+      return currentFilters.subject === "all" || a.code === currentFilters.subject;
     });
 
-    statusGroups = {
+    const groups: Record<string, any[]> = {};
-      UPCOMING: [],
+    filtered.forEach((assessment) => {
-      DUE_SOON: [],
+      const key = getGroupKey(assessment);
-      OVERDUE: [],
+      if (!groups[key]) groups[key] = [];
-      SUBMITTED: [],
+      groups[key].push(assessment);
-      MARKS_RELEASED: [],
-    };
-
-    filteredAssessments.forEach((assessment) => {
-      const status = determineStatus(assessment);
-      if (statusGroups[status]) {
-        statusGroups[status].push(assessment);
-      }
     });
+
+    Object.keys(groups).forEach((key) => {
+      groups[key].sort(sortCompare);
+    });
+
+    let cols: { key: string; title: string; className: string; icon: string }[];
+    if (currentFilters.sortBy === "due") {
+      cols = STATUS_COLUMNS;
+    } else {
+      const keys = Object.keys(groups).filter((k) => groups[k]?.length > 0);
+      if (currentFilters.sortBy === "year") {
+        cols = keys.sort((a, b) => Number(b) - Number(a)).map((k) => ({ key: k, title: k, className: "column-custom", icon: "📆" }));
+      } else if (currentFilters.sortBy === "subject") {
+        const subjectTitles = new Map(data?.subjects?.map((s: any) => [s.code, `${s.code} - ${s.title}`]) || []);
+        cols = keys.sort().map((k) => ({ key: k, title: subjectTitles.get(k) || k, className: "column-custom", icon: "📚" }));
+      } else {
+        cols = keys.sort().map((k) => ({ key: k, title: k, className: "column-custom", icon: "📋" }));
+      }
+    }
+
+    return { filteredAssessments: filtered, statusGroups: groups, columns: cols };
+  }
+
+  $: if (data) {
+    const _ = currentFilters.sortBy && currentFilters.subject;
+    const result = buildGroupsAndColumns();
+    filteredAssessments = result.filteredAssessments;
+    statusGroups = result.statusGroups;
+    columns = result.columns;
+  }
+
+  function updateAssessments() {
+    const result = buildGroupsAndColumns();
+    filteredAssessments = result.filteredAssessments;
+    statusGroups = result.statusGroups;
+    columns = result.columns;
   }
 
   function getDueDateClass(assessment: any): string {
@@ -123,6 +185,56 @@
     }
   }
 
+  function hideAssessment(assessment: any) {
+    const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
+    const id = String(assessment.id);
+    if (!hidden.includes(id)) {
+      hidden.push(id);
+      localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(hidden));
+      visibilityRefresh++;
+      closeAllMenus();
+      updateAssessments();
+    }
+  }
+
+  function hideSubject(subjectCode: string) {
+    const filters = { ...(settingsState.subjectfilters || {}) };
+    filters[subjectCode] = false;
+    settingsState.subjectfilters = filters;
+    closeAllMenus();
+    updateAssessments();
+  }
+
+  function unhideSubject(subjectCode: string) {
+    const filters = { ...(settingsState.subjectfilters || {}) };
+    filters[subjectCode] = true;
+    settingsState.subjectfilters = filters;
+    updateAssessments();
+  }
+
+  function unhideAssessment(assessmentId: string) {
+    const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
+    const idStr = String(assessmentId);
+    const filtered = hidden.filter((id: string) => id !== idStr);
+    localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(filtered));
+    visibilityRefresh++;
+    updateAssessments();
+  }
+
+  function initSubjectFilters() {
+    const filters = settingsState.subjectfilters || {};
+    let updated = false;
+    data.subjects.forEach((s: any) => {
+      if (!Object.prototype.hasOwnProperty.call(filters, s.code)) {
+        filters[s.code] = true;
+        updated = true;
+      }
+    });
+    if (updated) {
+      settingsState.subjectfilters = filters;
+    }
+  }
+
   function checkForCelebration() {
     const overdueCount = statusGroups.OVERDUE?.length || 0;
     const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
@@ -201,6 +313,20 @@
   }
 
   let openMenuId: string | null = null;
+  let showVisibilityPanel = false;
+  let visibilityRefresh = 0;
+
+  $: hiddenSubjects = data?.subjects?.filter(
+    (s: any) => (settingsState.subjectfilters || {})[s.code] === false
+  ) || [];
+  $: hiddenAssessmentIds = (() => {
+    visibilityRefresh; // Dependency for reactivity
+    return new Set((JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String));
+  })();
+  $: hiddenAssessmentsWithInfo = data?.assessments?.filter(
+    (a: any) => hiddenAssessmentIds.has(String(a.id))
+  ) || [];
+  $: hasHiddenItems = hiddenSubjects.length > 0 || hiddenAssessmentsWithInfo.length > 0;
 
   function toggleMenu(assessmentId: string, event: Event) {
     event.stopPropagation();
@@ -211,44 +337,13 @@
     openMenuId = null;
   }
 
-  $: {
+  $: if (data) {
-    if (data) {
+    initSubjectFilters();
     updateAssessments();
-    }
+    void currentFilters.sortBy;
+    void currentFilters.subject;
   }
 
-  const columns = [
-    {
-      key: "UPCOMING",
-      title: "Upcoming",
-      className: "column-upcoming",
-      icon: "📅",
-    },
-    {
-      key: "DUE_SOON",
-      title: "Due Soon",
-      className: "column-due-soon",
-      icon: "⏰",
-    },
-    {
-      key: "OVERDUE",
-      title: "Overdue",
-      className: "column-overdue",
-      icon: "🚨",
-    },
-    {
-      key: "SUBMITTED",
-      title: "Submitted",
-      className: "column-submitted",
-      icon: "📝",
-    },
-    {
-      key: "MARKS_RELEASED",
-      title: "Marked",
-      className: "column-marked",
-      icon: "✅",
-    },
-  ];
 </script>
 
 <svelte:window on:click={closeAllMenus} />
@@ -263,15 +358,58 @@
           <option value={subject.code}>{subject.code} - {subject.title}</option>
         {/each}
       </select>
-      <select class="filter-select" bind:value={currentFilters.sortBy}>
+      <select class="filter-select" bind:value={currentFilters.sortBy} title="Group by - columns change based on this">
-        <option value="due">Sort by Due Date</option>
+        <option value="due">Group: Status</option>
-        <option value="grade">Sort by Grade</option>
+        <option value="year">Group: Year</option>
-        <option value="subject">Sort by Subject</option>
+        <option value="subject">Group: Subject</option>
-        <option value="title">Sort by Title</option>
+        <option value="grade">Group: Grade</option>
+        <option value="title">Group: Title (A-Z)</option>
       </select>
+      {#if hasHiddenItems}
+        <button
+          class="visibility-toggle"
+          class:active={showVisibilityPanel}
+          on:click={() => (showVisibilityPanel = !showVisibilityPanel)}
+          title="Manage hidden subjects and assessments"
+        >
+          👁 Visibility ({hiddenSubjects.length + hiddenAssessmentsWithInfo.length})
+        </button>
+      {/if}
     </div>
   </div>
 
+  {#if showVisibilityPanel && hasHiddenItems}
+    <div class="visibility-panel">
+      <h4 class="visibility-panel-title">Hidden items</h4>
+      {#if hiddenSubjects.length > 0}
+        <div class="visibility-section">
+          <span class="visibility-label">Subjects:</span>
+          <div class="visibility-chips">
+            {#each hiddenSubjects as subject}
+              <span class="visibility-chip">
+                {subject.code}
+                <button class="visibility-unhide" on:click={() => unhideSubject(subject.code)}>Show</button>
+              </span>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      {#if hiddenAssessmentsWithInfo.length > 0}
+        <div class="visibility-section">
+          <span class="visibility-label">Assessments:</span>
+          <div class="visibility-chips">
+            {#each hiddenAssessmentsWithInfo as assessment}
+              <span class="visibility-chip">
+                {assessment.title}
+                <button class="visibility-unhide" on:click={() => unhideAssessment(assessment.id)}>Show</button>
+              </span>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+
   <div id="main-grid-content">
     {#if filteredAssessments.length === 0}
       <div class="empty-state">
@@ -340,6 +478,12 @@
                                 Mark as Not Complete
                               </button>
                             {/if}
+                            <button class="menu-item menu-item-hide" on:click={() => hideAssessment(assessment)}>
+                              Hide assessment
+                            </button>
+                            <button class="menu-item menu-item-hide" on:click={() => hideSubject(assessment.code)}>
+                              Hide subject ({assessment.code})
+                            </button>
                           </div>
                         </div>
                       {/if}
@@ -349,7 +493,7 @@
                       {#if !assessment.results && !isCompleted}
                         <div class="assessment-meta">
                           <div class="due-date {dueDateClass}">
-                            📅 {formatDate(assessment.due, assessment.submitted)}
+                            📅 {formatDate(assessment.due || assessment.date || assessment.dueDate || "", assessment.submitted)}
                           </div>
                         </div>
                       {/if}

src/plugins/built-in/assessmentsOverview/api.ts

@@ -56,6 +56,18 @@ async function loadUpcoming(student: number) {
   return res.payload;
 }
 
+function normalizeAssessmentDates(t: any, subject: Subject): any {
+  const normalized = { ...t };
+  // Past API may use different date fields - ensure we have 'due' for year filter & display
+  if (!normalized.due && (t.date || t.dueDate || t.created || t.submittedDate)) {
+    normalized.due = t.date || t.dueDate || t.created || t.submittedDate;
+  }
+  if (!normalized.programmeID) normalized.programmeID = subject.programme;
+  if (!normalized.metaclassID) normalized.metaclassID = subject.metaclass;
+  if (!normalized.code && t.subject) normalized.code = t.subject;
+  return normalized;
+}
+
 async function loadPast(student: number, subjects: Subject[]) {
   const map: Record<number, any> = {};
   await Promise.all(
@@ -65,10 +77,22 @@ async function loadPast(student: number, subjects: Subject[]) {
         metaclass: s.metaclass,
         student,
       });
-      if (res.payload.tasks) {
+      const processAssessment = (t: any) => {
-        res.payload.tasks.forEach((t: any) => {
+        if (t && t.id) {
-          map[t.id] = t;
+          const merged = {
-        });
+            ...t,
+            programmeID: t.programmeID || t.programme || s.programme,
+            metaclassID: t.metaclassID || t.metaclass || s.metaclass,
+            code: t.code || t.subject || s.code,
+          };
+          map[t.id] = normalizeAssessmentDates(merged, s);
+        }
+      };
+      if (res.payload?.pending && Array.isArray(res.payload.pending)) {
+        res.payload.pending.forEach(processAssessment);
+      }
+      if (res.payload?.tasks && Array.isArray(res.payload.tasks)) {
+        res.payload.tasks.forEach(processAssessment);
       }
     }),
   );

src/plugins/built-in/assessmentsOverview/index.ts

@@ -4,6 +4,7 @@ import { getAssessmentsData } from "./api";
 import { renderErrorState, renderSkeletonLoader } from "./ui";
 import styles from "./styles.css?inline";
 import { delay } from "@/seqta/utils/delay";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 
 const assessmentsOverviewPlugin: Plugin<{}> = {
   id: "assessments-overview",
@@ -16,6 +17,8 @@ const assessmentsOverviewPlugin: Plugin<{}> = {
   styles,
 
   run: async () => {
+    if (isSeqtaEngageExperience()) return;
+
     const menu = (await waitForElm(
       '[data-key="assessments"] > .sub > ul',
       true,

src/plugins/built-in/assessmentsOverview/styles.css

@@ -34,19 +34,38 @@
 }
 
 .filter-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   background: #ffffff !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
+  background-position: right 0.9rem center !important;
+  background-repeat: no-repeat !important;
+  background-size: 1rem !important;
   border: 2px solid #e2e8f0;
-  border-radius: 8px;
+  border-radius: 10px;
   color: #1a1a1a;
-  padding: 0.75rem 1rem;
+  color-scheme: light;
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
+  font-family: Rubik, sans-serif;
+  line-height: 1.2;
   transition: all 0.2s ease;
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   min-width: 180px;
 }
 
+.filter-select::-ms-expand {
+  display: none;
+}
+
+.filter-select option {
+  background: #ffffff;
+  color: #1a1a1a;
+}
+
 .filter-select:focus {
   outline: none;
   border-color: #d41e3a;
@@ -61,8 +80,10 @@
 /* Dark mode dropdowns */
 .dark .filter-select {
   background: var(--background-primary) !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
   border-color: var(--background-secondary);
   color: var(--text-primary);
+  color-scheme: dark;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
@@ -73,7 +94,8 @@
 
 .dark .filter-select:hover {
   border-color: var(--background-secondary);
-  background: var(--background-secondary);
+  background: var(--background-secondary) !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
 }
 
 .dark .filter-select option {
@@ -335,6 +357,141 @@
   color: #ef4444;
 }
 
+.menu-item.menu-item-hide {
+  color: #64748b;
+}
+
+.dark .menu-item.menu-item-hide {
+  color: var(--text-primary);
+  opacity: 0.8;
+}
+
+.visibility-toggle {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 2px solid #e2e8f0;
+  background: #ffffff;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.visibility-toggle:hover {
+  border-color: #cbd5e1;
+  color: #1a1a1a;
+}
+
+.visibility-toggle.active {
+  border-color: #d41e3a;
+  background: rgba(212, 30, 58, 0.08);
+  color: #d41e3a;
+}
+
+.dark .visibility-toggle {
+  background: var(--background-primary);
+  border-color: var(--background-secondary);
+  color: var(--text-primary);
+}
+
+.dark .visibility-toggle:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .visibility-toggle.active {
+  border-color: #d41e3a;
+  background: rgba(212, 30, 58, 0.15);
+  color: #d41e3a;
+}
+
+.visibility-panel {
+  padding: 1rem 1.25rem;
+  margin: 0 1rem 1rem;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.dark .visibility-panel {
+  background: var(--background-secondary);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.visibility-panel-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0 0 0.75rem;
+}
+
+.dark .visibility-panel-title {
+  color: var(--text-primary);
+}
+
+.visibility-section {
+  margin-bottom: 0.5rem;
+}
+
+.visibility-section:last-child {
+  margin-bottom: 0;
+}
+
+.visibility-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #64748b;
+  display: block;
+  margin-bottom: 0.25rem;
+}
+
+.dark .visibility-label {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.visibility-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.visibility-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: #e2e8f0;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  color: #1a1a1a;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .visibility-chip {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.visibility-unhide {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 4px;
+  border: none;
+  background: #d41e3a;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.visibility-unhide:hover {
+  background: #b91c33;
+}
+
 .assessment-title {
   font-size: 0.875rem;
   font-weight: 600;
@@ -455,6 +612,10 @@
   background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
 }
 
+.column-custom .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
+}
+
 /* Dark mode column headers */
 .dark .column-upcoming .column-header {
   background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
@@ -476,6 +637,10 @@
   background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
 }
 
+.dark .column-custom .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a5f 100%);
+}
+
 /* Subject filter view */
 .subject-section {
   margin-bottom: 2rem;

src/plugins/built-in/backgroundMusic/index.ts

@@ -7,7 +7,7 @@ import localforage from "localforage";
 const settings = defineSettings({
   uploader: componentSetting({
     title: "Background Music",
-    description: "Upload a .wav or .mp3 audio file to play in the background.",
+    description: "Upload a .wav or .mp3 audio file to play in the background",
     component: BackgroundMusicSetting,
   }),
   volume: numberSetting({
@@ -99,7 +99,7 @@ async function startPlayback(volume: number): Promise<void> {
 const backgroundMusicPlugin: Plugin<typeof settings> = {
   id: "background-music",
   name: "Background Music",
-  description: "Play your own music in the background while SEQTA is open.",
+  description: "Play your own music in the background while SEQTA is open",
   version: "1.0.0",
   settings,
   styles,
@@ -142,7 +142,6 @@ const backgroundMusicPlugin: Plugin<typeof settings> = {
       if (!currentAudio) return;
       const pauseOnHidden = (api.settings as any).pauseOnHidden ?? true;
       if (!pauseOnHidden) return;
-      
       if (document.visibilityState === "hidden") {
         if (visibilityResumeTimeout !== null) {
           clearTimeout(visibilityResumeTimeout);
@@ -183,5 +182,3 @@ const backgroundMusicPlugin: Plugin<typeof settings> = {
 };
 
 export default backgroundMusicPlugin;
-
-

src/plugins/built-in/globalSearch/lazy.ts

@@ -120,7 +120,6 @@ export default defineLazyPlugin({
   settings,
   disableToggle: true,
   defaultEnabled: false,
-  beta: true,
   styles: styles,
   
   // Lazy loader - only imports the heavy plugin when actually needed

src/plugins/built-in/globalSearch/src/core/index.ts

@@ -145,7 +145,6 @@ const globalSearchPlugin: Plugin<typeof settings> = {
   settings: settingsInstance.settings,
   disableToggle: true,
   defaultEnabled: false,
-  beta: true,
   styles: styles,
 
   run: async (api) => {

src/plugins/built-in/messageFolders/index.ts

@@ -0,0 +1,748 @@
+import type { Plugin } from "../../core/types";
+import { booleanSetting } from "@/plugins/core/settingsHelpers";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import styles from "./styles.css?inline";
+
+const messageFoldersSettings = {
+  showTagsInAllMessages: booleanSetting({
+    default: true,
+    title: "Show folder tags in All Messages",
+    description:
+      "When off, folder tags are not shown on the message list until you select a folder.",
+  }),
+  hideFolderedMessagesInAll: booleanSetting({
+    default: true,
+    title: "Hide foldered messages in All Messages",
+    description:
+      "When on, messages assigned to a custom folder are hidden from the inbox until you open that folder.",
+  }),
+} as const;
+
+interface Folder {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface MessageFoldersStorage {
+  folders: Folder[];
+  messageAssignments: Record<string, string[]>;
+}
+
+const FOLDER_COLORS = [
+  "#3b82f6", "#ef4444", "#22c55e", "#f59e0b",
+  "#8b5cf6", "#ec4899", "#14b8a6", "#f97316",
+];
+
+const FOLDER_ICON_SVG = `<svg style="width:24px;height:24px;flex-shrink:0" viewBox="0 0 24 24"><path fill="#888" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>`;
+const PLUS_SVG = `<svg style="width:14px;height:14px;flex-shrink:0" viewBox="0 0 24 24"><path fill="#888" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`;
+const CHECK_SVG_WHITE = `<svg style="width:14px;height:14px;flex-shrink:0" viewBox="0 0 24 24"><path fill="#fff" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
+const CLOSE_SVG = `<svg style="width:14px;height:14px;flex-shrink:0" viewBox="0 0 24 24"><path fill="#888" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
+const EDIT_SVG = `<svg style="width:12px;height:12px;flex-shrink:0" viewBox="0 0 24 24"><path fill="#888" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>`;
+const TRASH_SVG = `<svg style="width:12px;height:12px;flex-shrink:0" viewBox="0 0 24 24"><path fill="#888" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>`;
+
+function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+}
+
+const messageFoldersPlugin: Plugin<typeof messageFoldersSettings, MessageFoldersStorage> = {
+  id: "messageFolders",
+  name: "Message Folders",
+  description: "Organize direct messages into custom folders",
+  version: "1.0.0",
+  settings: messageFoldersSettings,
+  disableToggle: true,
+  defaultEnabled: true,
+
+  run: async (api) => {
+    const styleEl = document.createElement("style");
+    styleEl.textContent = styles;
+    document.head.appendChild(styleEl);
+
+    await api.storage.loaded;
+
+    if (!api.storage.folders) api.storage.folders = [];
+    if (!api.storage.messageAssignments) api.storage.messageAssignments = {};
+
+    let activeFolderId: string | null = null;
+    let messageListObserver: MutationObserver | null = null;
+    let sidebarObserver: MutationObserver | null = null;
+    let actionsObserver: MutationObserver | null = null;
+    let openDropdown: HTMLElement | null = null;
+    let dropdownCloseHandler: ((e: MouseEvent) => void) | null = null;
+    const unregisters: Array<{ unregister: () => void }> = [];
+
+    // ── Storage accessors ──
+
+    const getFolders = (): Folder[] => api.storage.folders ?? [];
+    const getAssignments = (): Record<string, string[]> => api.storage.messageAssignments ?? {};
+
+    const saveFolders = (folders: Folder[]) => {
+      api.storage.folders = [...folders];
+    };
+
+    const saveAssignments = (assignments: Record<string, string[]>) => {
+      api.storage.messageAssignments = { ...assignments };
+    };
+
+    const getMessageFolderIds = (messageId: string): string[] => {
+      const assignments = getAssignments();
+      const ids: string[] = [];
+      for (const [folderId, msgIds] of Object.entries(assignments)) {
+        if (msgIds.includes(messageId)) ids.push(folderId);
+      }
+      return ids;
+    };
+
+    const toggleMessageInFolder = (messageId: string, folderId: string) => {
+      const assignments = getAssignments();
+      if (!assignments[folderId]) assignments[folderId] = [];
+      const idx = assignments[folderId].indexOf(messageId);
+      if (idx >= 0) {
+        assignments[folderId].splice(idx, 1);
+      } else {
+        assignments[folderId].push(messageId);
+      }
+      saveAssignments(assignments);
+    };
+
+    const getFolderMessageCount = (folderId: string): number => {
+      return (getAssignments()[folderId] ?? []).length;
+    };
+
+    const restoreSubjectPlain = (subject: Element) => {
+      subject.querySelector(".bsplus-msg-badges")?.remove();
+      const textWrap = subject.querySelector(".bsplus-subject-text");
+      if (textWrap) {
+        subject.textContent = textWrap.textContent ?? "";
+      }
+    };
+
+    const isMessageInAnyCustomFolder = (messageId: string): boolean => {
+      for (const msgIds of Object.values(getAssignments())) {
+        if (msgIds.includes(messageId)) return true;
+      }
+      return false;
+    };
+
+    const shouldShowBadgesInList = (): boolean => {
+      return api.settings.showTagsInAllMessages || activeFolderId !== null;
+    };
+
+    // ── Confirm modal ──
+
+    const showConfirmModal = (
+      title: string,
+      message: string,
+      onConfirm: () => void,
+    ) => {
+      const overlay = document.createElement("div");
+      overlay.className = "bsplus-modal-overlay";
+
+      const modal = document.createElement("div");
+      modal.className = "bsplus-modal";
+      modal.innerHTML = `
+        <h3>${title}</h3>
+        <p>${message}</p>
+        <div class="bsplus-modal-actions">
+          <button class="bsplus-modal-btn-cancel">Cancel</button>
+          <button class="bsplus-modal-btn-danger">Delete</button>
+        </div>
+      `;
+      overlay.appendChild(modal);
+
+      const remove = () => {
+        overlay.remove();
+        document.removeEventListener("keydown", onKey);
+      };
+
+      const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") remove();
+      };
+
+      overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) remove();
+      });
+      modal.querySelector(".bsplus-modal-btn-cancel")!.addEventListener("click", remove);
+      modal.querySelector(".bsplus-modal-btn-danger")!.addEventListener("click", () => {
+        onConfirm();
+        remove();
+      });
+
+      document.body.appendChild(overlay);
+      document.addEventListener("keydown", onKey);
+    };
+
+    // ── Sidebar folder UI ──
+
+    const renderSidebarFolders = () => {
+      const sidebar = document.querySelector("[class*='Viewer__sidebar___']");
+      if (!sidebar) return;
+
+      const ol = sidebar.querySelector("ol");
+      if (!ol) return;
+
+      let section = ol.querySelector(".bsplus-folders-section");
+      if (!section) {
+        section = document.createElement("div");
+        section.className = "bsplus-folders-section";
+        ol.appendChild(section);
+      }
+
+      const folders = getFolders();
+      const existingInput = section.querySelector(".bsplus-folder-input");
+      const existingColors = section.querySelector(".bsplus-folder-colors");
+
+      section.innerHTML = "";
+
+      // Header
+      const header = document.createElement("div");
+      header.className = "bsplus-folders-header";
+
+      const label = document.createElement("span");
+      label.textContent = "Folders";
+      header.appendChild(label);
+
+      const addBtn = document.createElement("button");
+      addBtn.className = "bsplus-folders-add-btn";
+      addBtn.title = "New folder";
+      addBtn.innerHTML = PLUS_SVG;
+      addBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        showNewFolderInput(section!);
+      });
+      header.appendChild(addBtn);
+      section.appendChild(header);
+
+      // "All Messages" item
+      const allItem = document.createElement("div");
+      allItem.className = `bsplus-folder-item${activeFolderId === null ? " bsplus-folder-active" : ""}`;
+      allItem.innerHTML = `
+        <svg width="14" height="14" viewBox="0 0 24 24" style="fill: currentcolor; opacity: 0.5; flex-shrink: 0;"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
+        <span class="bsplus-folder-name">All Messages</span>
+      `;
+      allItem.addEventListener("click", () => {
+        activeFolderId = null;
+        applyFolderFilter();
+        applyBadges();
+        renderSidebarFolders();
+      });
+      section.appendChild(allItem);
+
+      // Folder items
+      for (const folder of folders) {
+        const item = document.createElement("div");
+        item.className = `bsplus-folder-item${activeFolderId === folder.id ? " bsplus-folder-active" : ""}`;
+        item.dataset.folderId = folder.id;
+
+        const dot = document.createElement("div");
+        dot.className = "bsplus-folder-dot";
+        dot.style.background = folder.color;
+        item.appendChild(dot);
+
+        const name = document.createElement("span");
+        name.className = "bsplus-folder-name";
+        name.textContent = folder.name;
+        item.appendChild(name);
+
+        const actions = document.createElement("div");
+        actions.className = "bsplus-folder-actions";
+
+        const editBtn = document.createElement("button");
+        editBtn.className = "bsplus-folder-action-btn";
+        editBtn.title = "Rename";
+        editBtn.innerHTML = EDIT_SVG;
+        editBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          showEditFolderInput(section!, folder);
+        });
+        actions.appendChild(editBtn);
+
+        const deleteBtn = document.createElement("button");
+        deleteBtn.className = "bsplus-folder-action-btn";
+        deleteBtn.title = "Delete";
+        deleteBtn.innerHTML = TRASH_SVG;
+        deleteBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          showConfirmModal(
+            "Delete folder",
+            `Remove "${folder.name}"? Messages won't be deleted.`,
+            () => {
+              const folders = getFolders().filter((f) => f.id !== folder.id);
+              saveFolders(folders);
+              const assignments = getAssignments();
+              delete assignments[folder.id];
+              saveAssignments(assignments);
+              if (activeFolderId === folder.id) activeFolderId = null;
+              applyFolderFilter();
+              applyBadges();
+              renderSidebarFolders();
+            },
+          );
+        });
+        actions.appendChild(deleteBtn);
+
+        item.appendChild(actions);
+
+        const count = document.createElement("span");
+        count.className = "bsplus-folder-count";
+        const c = getFolderMessageCount(folder.id);
+        count.textContent = c > 0 ? String(c) : "";
+        item.appendChild(count);
+
+        item.addEventListener("click", () => {
+          activeFolderId = folder.id;
+          applyFolderFilter();
+          applyBadges();
+          renderSidebarFolders();
+        });
+
+        section.appendChild(item);
+      }
+
+      // Restore input if it was open
+      if (existingInput || existingColors) {
+        // Don't restore – let user re-trigger
+      }
+    };
+
+    const showNewFolderInput = (container: Element, editFolder?: Folder) => {
+      const existing = container.querySelector(".bsplus-folder-input");
+      if (existing) existing.remove();
+      container.querySelector(".bsplus-folder-colors")?.remove();
+
+      let selectedColor = editFolder?.color ?? FOLDER_COLORS[Math.floor(Math.random() * FOLDER_COLORS.length)];
+
+      const row = document.createElement("div");
+      row.className = "bsplus-folder-input";
+
+      const input = document.createElement("input");
+      input.type = "text";
+      input.placeholder = editFolder ? "Rename folder…" : "Folder name…";
+      input.value = editFolder?.name ?? "";
+      input.maxLength = 30;
+
+      const confirmBtn = document.createElement("button");
+      confirmBtn.className = "bsplus-folder-input-confirm";
+      confirmBtn.innerHTML = CHECK_SVG_WHITE;
+
+      const cancelBtn = document.createElement("button");
+      cancelBtn.className = "bsplus-folder-input-cancel";
+      cancelBtn.innerHTML = CLOSE_SVG;
+
+      row.appendChild(input);
+      row.appendChild(confirmBtn);
+      row.appendChild(cancelBtn);
+
+      // Color picker
+      const colorRow = document.createElement("div");
+      colorRow.className = "bsplus-folder-colors";
+      for (const color of FOLDER_COLORS) {
+        const swatch = document.createElement("button");
+        swatch.className = `bsplus-folder-color-opt${color === selectedColor ? " bsplus-color-selected" : ""}`;
+        swatch.style.background = color;
+        swatch.addEventListener("click", (e) => {
+          e.stopPropagation();
+          selectedColor = color;
+          colorRow.querySelectorAll(".bsplus-folder-color-opt").forEach((s) =>
+            s.classList.toggle("bsplus-color-selected", (s as HTMLElement).style.background === color),
+          );
+        });
+        colorRow.appendChild(swatch);
+      }
+
+      const confirm = () => {
+        const name = input.value.trim();
+        if (!name) return;
+
+        if (editFolder) {
+          const folders = getFolders().map((f) =>
+            f.id === editFolder.id ? { ...f, name, color: selectedColor } : f,
+          );
+          saveFolders(folders);
+        } else {
+          const folder: Folder = { id: generateId(), name, color: selectedColor };
+          saveFolders([...getFolders(), folder]);
+        }
+        applyBadges();
+        renderSidebarFolders();
+      };
+
+      confirmBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        confirm();
+      });
+      cancelBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        renderSidebarFolders();
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") confirm();
+        if (e.key === "Escape") renderSidebarFolders();
+      });
+
+      container.appendChild(row);
+      container.appendChild(colorRow);
+      requestAnimationFrame(() => input.focus());
+    };
+
+    const showEditFolderInput = (container: Element, folder: Folder) => {
+      showNewFolderInput(container, folder);
+    };
+
+    // ── Intercept native sidebar clicks to clear folder filter ──
+
+    const attachNativeSidebarListeners = () => {
+      const sidebar = document.querySelector("[class*='Viewer__sidebar___']");
+      if (!sidebar) return;
+
+      const ol = sidebar.querySelector("ol");
+      if (!ol) return;
+
+      ol.addEventListener("click", (e) => {
+        const target = e.target as HTMLElement;
+        if (target.closest(".bsplus-folders-section")) return;
+
+        const li = target.closest("li");
+        if (li && ol.contains(li)) {
+          if (activeFolderId !== null) {
+            activeFolderId = null;
+            applyFolderFilter();
+            applyBadges();
+            renderSidebarFolders();
+          }
+        }
+      });
+    };
+
+    // ── "Add to folder" button in message action bar ──
+
+    const injectFolderButton = (actionsBar: Element) => {
+      if (actionsBar.querySelector(".bsplus-folder-btn")) return;
+
+      const wrapper = document.createElement("div");
+      wrapper.className = "bsplus-folder-btn";
+      wrapper.style.position = "relative";
+      wrapper.style.display = "inline-block";
+
+      const btn = document.createElement("button");
+      const btnClasses = actionsBar.querySelector("button")?.className ?? "";
+      btn.className = btnClasses;
+      btn.title = "Add to folder";
+      btn.innerHTML = FOLDER_ICON_SVG;
+
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        closeDropdown();
+
+        const selectedMsg = document.querySelector("[class*='MessageList__selected___']");
+        const messageId = selectedMsg?.getAttribute("data-message");
+        if (!messageId) return;
+
+        showFolderDropdown(wrapper, messageId);
+      });
+
+      wrapper.appendChild(btn);
+
+      const moreMenu = actionsBar.querySelector("[class*='MenuButton__Menu___']");
+      if (moreMenu) {
+        actionsBar.insertBefore(wrapper, moreMenu);
+      } else {
+        actionsBar.appendChild(wrapper);
+      }
+    };
+
+    const showFolderDropdown = (anchor: HTMLElement, messageId: string) => {
+      const dropdown = document.createElement("div");
+      dropdown.className = "bsplus-folder-dropdown";
+
+      const folders = getFolders();
+      const currentFolderIds = getMessageFolderIds(messageId);
+
+      if (folders.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "bsplus-folder-dropdown-empty";
+        empty.textContent = "No folders yet";
+        dropdown.appendChild(empty);
+      } else {
+        for (const folder of folders) {
+          const isChecked = currentFolderIds.includes(folder.id);
+          const item = document.createElement("button");
+          item.className = `bsplus-folder-dropdown-item${isChecked ? " bsplus-checked" : ""}`;
+
+          const check = document.createElement("div");
+          check.className = "bsplus-folder-dropdown-check";
+          check.style.borderColor = isChecked ? folder.color : "";
+          check.style.background = isChecked ? folder.color : "";
+          check.innerHTML = CHECK_SVG_WHITE;
+
+          const dot = document.createElement("div");
+          dot.className = "bsplus-folder-dot";
+          dot.style.background = folder.color;
+
+          const name = document.createElement("span");
+          name.textContent = folder.name;
+
+          item.appendChild(check);
+          item.appendChild(dot);
+          item.appendChild(name);
+
+          item.addEventListener("click", (e) => {
+            e.stopPropagation();
+            toggleMessageInFolder(messageId, folder.id);
+
+            const nowChecked = getMessageFolderIds(messageId).includes(folder.id);
+            item.classList.toggle("bsplus-checked", nowChecked);
+            check.style.borderColor = nowChecked ? folder.color : "";
+            check.style.background = nowChecked ? folder.color : "";
+
+            applyBadges();
+            applyFolderFilter();
+            renderSidebarFolders();
+          });
+
+          dropdown.appendChild(item);
+        }
+      }
+
+      anchor.appendChild(dropdown);
+      openDropdown = dropdown;
+
+      dropdownCloseHandler = (e: MouseEvent) => {
+        if (!dropdown.contains(e.target as Node) && !anchor.contains(e.target as Node)) {
+          closeDropdown();
+        }
+      };
+      setTimeout(() => {
+        document.addEventListener("click", dropdownCloseHandler!, true);
+      }, 0);
+    };
+
+    const closeDropdown = () => {
+      if (openDropdown) {
+        openDropdown.remove();
+        openDropdown = null;
+      }
+      if (dropdownCloseHandler) {
+        document.removeEventListener("click", dropdownCloseHandler, true);
+        dropdownCloseHandler = null;
+      }
+    };
+
+    // ── Message badges ──
+
+    const applyBadges = () => {
+      const messageItems = document.querySelectorAll("[class*='MessageList__MessageList___'] ol > li[data-message]");
+
+      if (!shouldShowBadgesInList()) {
+        for (const li of messageItems) {
+          const subject = li.querySelector("[class*='MessageList__subject___']");
+          if (subject && (subject.querySelector(".bsplus-msg-badges") || subject.querySelector(".bsplus-subject-text"))) {
+            restoreSubjectPlain(subject);
+          } else {
+            li.querySelector(".bsplus-msg-badges")?.remove();
+          }
+        }
+        return;
+      }
+
+      const folders = getFolders();
+      const assignments = getAssignments();
+
+      for (const li of messageItems) {
+        const msgId = li.getAttribute("data-message");
+        if (!msgId) continue;
+
+        let badgeContainer = li.querySelector(".bsplus-msg-badges") as HTMLElement | null;
+
+        const folderIds = [];
+        for (const [fId, mIds] of Object.entries(assignments)) {
+          if (mIds.includes(msgId)) folderIds.push(fId);
+        }
+
+        if (folderIds.length === 0) {
+          badgeContainer?.remove();
+          continue;
+        }
+
+        if (!badgeContainer) {
+          badgeContainer = document.createElement("div");
+          badgeContainer.className = "bsplus-msg-badges";
+          const subject = li.querySelector("[class*='MessageList__subject___']");
+          if (subject) {
+            if (!subject.querySelector(".bsplus-subject-text")) {
+              const textWrap = document.createElement("span");
+              textWrap.className = "bsplus-subject-text";
+              textWrap.textContent = subject.textContent;
+              subject.textContent = "";
+              subject.appendChild(textWrap);
+            }
+            subject.appendChild(badgeContainer);
+          } else {
+            li.appendChild(badgeContainer);
+          }
+        }
+
+        badgeContainer.innerHTML = "";
+        for (const fId of folderIds) {
+          const folder = folders.find((f) => f.id === fId);
+          if (!folder) continue;
+          const badge = document.createElement("span");
+          badge.className = "bsplus-msg-badge";
+          badge.style.background = folder.color;
+          badge.textContent = folder.name;
+          badge.title = `Filter by "${folder.name}"`;
+          badge.addEventListener("click", (e) => {
+            e.stopPropagation();
+            activeFolderId = folder.id;
+            applyFolderFilter();
+            applyBadges();
+            renderSidebarFolders();
+          });
+          badgeContainer.appendChild(badge);
+        }
+      }
+    };
+
+    // ── Folder filtering ──
+
+    const applyFolderFilter = () => {
+      const messageItems = document.querySelectorAll("[class*='MessageList__MessageList___'] ol > li[data-message]");
+      const moreBtn = document.querySelector("[class*='MessageList__MessageList___'] ol > button");
+
+      if (activeFolderId === null) {
+        if (api.settings.hideFolderedMessagesInAll) {
+          for (const li of messageItems) {
+            const msgId = li.getAttribute("data-message");
+            if (msgId && isMessageInAnyCustomFolder(msgId)) {
+              li.classList.add("bsplus-folder-hidden");
+            } else {
+              li.classList.remove("bsplus-folder-hidden");
+            }
+          }
+        } else {
+          for (const li of messageItems) {
+            li.classList.remove("bsplus-folder-hidden");
+          }
+        }
+        if (moreBtn) (moreBtn as HTMLElement).classList.remove("bsplus-folder-hidden");
+        return;
+      }
+
+      const folderMsgIds = getAssignments()[activeFolderId] ?? [];
+
+      for (const li of messageItems) {
+        const msgId = li.getAttribute("data-message");
+        if (msgId && folderMsgIds.includes(msgId)) {
+          li.classList.remove("bsplus-folder-hidden");
+        } else {
+          li.classList.add("bsplus-folder-hidden");
+        }
+      }
+      if (moreBtn) (moreBtn as HTMLElement).classList.add("bsplus-folder-hidden");
+    };
+
+    // ── Observers ──
+
+    const setupMessageListObserver = () => {
+      const messageList = document.querySelector("[class*='MessageList__MessageList___'] ol");
+      if (!messageList || messageListObserver) return;
+
+      messageListObserver = new MutationObserver(() => {
+        applyBadges();
+        applyFolderFilter();
+      });
+      messageListObserver.observe(messageList, { childList: true, subtree: false });
+    };
+
+    const setupActionsObserver = () => {
+      if (actionsObserver) return;
+
+      const target = document.querySelector("[class*='Viewer__Viewer___']") ?? document.querySelector("div.messages");
+      if (!target) return;
+
+      actionsObserver = new MutationObserver(() => {
+        const actionsBar = document.querySelector("[class*='Message__actions___']");
+        if (actionsBar && !actionsBar.querySelector(".bsplus-folder-btn")) {
+          injectFolderButton(actionsBar);
+        }
+      });
+      actionsObserver.observe(target, { childList: true, subtree: true });
+    };
+
+    // ── Main page handler ──
+
+    const handleMessagesPage = async () => {
+      await waitForElm("[class*='Viewer__sidebar___'] ol", true, 50, 100);
+
+      renderSidebarFolders();
+      attachNativeSidebarListeners();
+
+      await waitForElm("[class*='MessageList__MessageList___'] ol", true, 50, 100);
+      applyBadges();
+      applyFolderFilter();
+      setupMessageListObserver();
+
+      // The actions bar only exists when a message is selected/open,
+      // so we observe the whole viewer for it to appear dynamically
+      setupActionsObserver();
+
+      // If a message is already selected, inject immediately
+      const actionsBar = document.querySelector("[class*='Message__actions___']");
+      if (actionsBar) injectFolderButton(actionsBar);
+
+      // Re-observe the sidebar for SEQTA re-renders
+      const sidebar = document.querySelector("[class*='Viewer__sidebar___']");
+      if (sidebar && !sidebarObserver) {
+        sidebarObserver = new MutationObserver(() => {
+          const ol = sidebar.querySelector("ol");
+          if (ol && !ol.querySelector(".bsplus-folders-section")) {
+            renderSidebarFolders();
+            attachNativeSidebarListeners();
+          }
+        });
+        sidebarObserver.observe(sidebar, { childList: true, subtree: true });
+      }
+    };
+
+    // ── Lifecycle ──
+
+    const mountUnsub = api.seqta.onMount("div.messages", handleMessagesPage);
+    unregisters.push(mountUnsub);
+
+    unregisters.push(
+      api.settings.onChange("showTagsInAllMessages", () => {
+        applyBadges();
+      }),
+    );
+    unregisters.push(
+      api.settings.onChange("hideFolderedMessagesInAll", () => {
+        applyFolderFilter();
+      }),
+    );
+
+    return () => {
+      for (const u of unregisters) u.unregister();
+      messageListObserver?.disconnect();
+      sidebarObserver?.disconnect();
+      actionsObserver?.disconnect();
+      closeDropdown();
+      styleEl.remove();
+      document.querySelectorAll(".bsplus-folders-section").forEach((el) => el.remove());
+      document.querySelectorAll(".bsplus-folder-btn").forEach((el) => el.remove());
+      document.querySelectorAll(".bsplus-msg-badges").forEach((el) => el.remove());
+      document.querySelectorAll("[class*='MessageList__subject___']").forEach((subject) => {
+        if (subject.querySelector(".bsplus-subject-text")) {
+          restoreSubjectPlain(subject);
+        }
+      });
+      document.querySelectorAll(".bsplus-folder-hidden").forEach((el) =>
+        el.classList.remove("bsplus-folder-hidden"),
+      );
+      document.querySelectorAll(".bsplus-modal-overlay").forEach((el) => el.remove());
+    };
+  },
+};
+
+export default messageFoldersPlugin;

src/plugins/built-in/messageFolders/styles.css

@@ -0,0 +1,491 @@
+/* ── Sidebar folder section ── */
+.bsplus-folders-section {
+  border-top: 1px solid var(--background-secondary, rgba(128, 128, 128, 0.2));
+  margin-top: 4px;
+  padding-top: 4px;
+}
+
+.bsplus-folders-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px 2px;
+  user-select: none;
+}
+
+.bsplus-folders-header span {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-primary, #666);
+  opacity: 0.5;
+}
+
+.bsplus-folders-add-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 20px !important;
+  height: 20px !important;
+  min-width: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  opacity: 0.5;
+  cursor: pointer;
+  border-radius: 4px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  transition: all 0.2s ease;
+  text-align: center !important;
+}
+
+.bsplus-folders-add-btn:hover {
+  opacity: 1;
+  background: var(--background-secondary, rgba(128, 128, 128, 0.1)) !important;
+}
+
+/* ── Folder list items ── */
+.bsplus-folder-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  position: relative;
+  gap: 8px;
+  user-select: none;
+}
+
+.bsplus-folder-item:hover {
+  background: var(--theme-offset-bg-more, rgba(128, 128, 128, 0.08));
+}
+
+.bsplus-folder-item.bsplus-folder-active {
+  background: var(--theme-offset-bg-more, rgba(128, 128, 128, 0.12));
+}
+
+.bsplus-folder-item.bsplus-folder-active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--better-main, #007bff);
+  border-radius: 0 2px 2px 0;
+}
+
+.bsplus-folder-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.bsplus-folder-name {
+  font-size: 13px;
+  color: var(--text-primary, #333);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bsplus-folder-count {
+  font-size: 11px;
+  color: var(--text-primary, #999);
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.bsplus-folder-actions {
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.bsplus-folder-item:hover .bsplus-folder-actions {
+  opacity: 1;
+}
+
+.bsplus-folder-action-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 20px !important;
+  height: 20px !important;
+  min-width: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: 4px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  transition: all 0.15s ease;
+}
+
+.bsplus-folder-action-btn:hover {
+  opacity: 1;
+  background: var(--background-secondary, rgba(128, 128, 128, 0.15)) !important;
+}
+
+/* ── Inline folder name input ── */
+.bsplus-folder-input {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 6px;
+}
+
+.bsplus-folder-input input {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  font-size: 13px;
+  border: 1px solid var(--background-secondary, #ccc);
+  border-radius: 6px;
+  background: var(--background-secondary, #f5f5f5);
+  color: var(--text-primary, #333);
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.bsplus-folder-input input:focus {
+  border-color: var(--better-main, #007bff);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+}
+
+.bsplus-folder-input-confirm,
+.bsplus-folder-input-cancel {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 0 !important;
+  border: none !important;
+  border-radius: 4px !important;
+  cursor: pointer;
+  padding: 0 !important;
+  margin: 0 !important;
+  transition: all 0.15s ease;
+}
+
+.bsplus-folder-input-confirm {
+  background: var(--better-main, #007bff) !important;
+}
+
+.bsplus-folder-input-confirm:hover {
+  transform: scale(1.1);
+}
+
+.bsplus-folder-input-cancel {
+  background: transparent !important;
+  opacity: 0.6;
+}
+
+.bsplus-folder-input-cancel:hover {
+  opacity: 1;
+  background: var(--background-secondary, rgba(128, 128, 128, 0.1)) !important;
+}
+
+/* ── Color picker row ── */
+.bsplus-folder-colors {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  padding: 4px 12px 6px;
+  max-width: 120px;
+}
+
+.bsplus-folder-color-opt {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              border-color 0.2s ease,
+              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0;
+  background: none;
+  box-sizing: border-box;
+}
+
+.bsplus-folder-color-opt:hover {
+  transform: scale(1.25);
+  box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.15);
+}
+
+.bsplus-folder-color-opt.bsplus-color-selected {
+  border-color: var(--text-primary, #333);
+  transform: scale(1.15);
+  box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.2);
+}
+
+.bsplus-folder-color-opt.bsplus-color-selected:hover {
+  transform: scale(1.25);
+}
+
+/* ── "Add to folder" button in message actions bar ── */
+.bsplus-folder-btn {
+  position: relative;
+}
+
+.bsplus-folder-btn svg {
+  fill: currentColor;
+}
+
+/* ── Folder dropdown ── */
+.bsplus-folder-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  min-width: 180px;
+  background: var(--background-primary, #fff);
+  border: 1px solid var(--background-secondary, #e0e0e0);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  overflow: hidden;
+  animation: bsplus-dropdown-in 0.15s ease-out;
+}
+
+@keyframes bsplus-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.bsplus-folder-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  color: var(--text-primary, #333);
+  font-size: 13px;
+}
+
+.bsplus-folder-dropdown-item:hover {
+  background: var(--theme-offset-bg-more, rgba(128, 128, 128, 0.08));
+}
+
+.bsplus-folder-dropdown-check {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--background-secondary, #ccc);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+
+.bsplus-folder-dropdown-item.bsplus-checked .bsplus-folder-dropdown-check {
+  background: var(--better-main, #007bff);
+  border-color: var(--better-main, #007bff);
+}
+
+.bsplus-folder-dropdown-check svg {
+  width: 10px;
+  height: 10px;
+  color: white;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.bsplus-folder-dropdown-item.bsplus-checked .bsplus-folder-dropdown-check svg {
+  opacity: 1;
+}
+
+.bsplus-folder-dropdown-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-primary, #999);
+  opacity: 0.5;
+}
+
+/* ── Let primary column use available space instead of being clipped ── */
+[class*='MessageList__primary___'] {
+  flex: 1 1 0% !important;
+  min-width: 0 !important;
+  overflow: hidden !important;
+}
+
+/* ── Make subject line a flex row so badges sit inline ── */
+[class*='MessageList__subject___'] {
+  display: flex !important;
+  align-items: center;
+  gap: 6px;
+  min-width: 0 !important;
+  overflow: hidden !important;
+}
+
+/* ── Subject text truncates to make room for badges ── */
+.bsplus-subject-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/* ── Shrink the secondary column to its content ── */
+[class*='MessageList__secondary___'] {
+  flex: 0 0 auto !important;
+  width: auto !important;
+  min-width: 0 !important;
+  max-width: 200px !important;
+}
+
+/* ── Constrain the flags/attachment icon column ── */
+[class*='MessageList__flags___'] {
+  width: 24px !important;
+  min-width: 0 !important;
+  flex-shrink: 0 !important;
+}
+
+/* ── Message list folder badges ── */
+.bsplus-msg-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.bsplus-msg-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: white;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.bsplus-msg-badge:hover {
+  opacity: 0.85;
+  transform: scale(1.05);
+}
+
+/* ── Folder filtering (hide messages not in active folder) ── */
+.bsplus-folder-hidden {
+  display: none !important;
+}
+
+/* ── Delete confirmation modal ── */
+@keyframes bsplus-modal-overlay-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes bsplus-modal-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.bsplus-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  animation: bsplus-modal-overlay-in 0.2s ease-out forwards;
+}
+
+.bsplus-modal {
+  padding: 1rem 1.5rem;
+  margin: 0 1rem;
+  min-width: 16rem;
+  max-width: 22rem;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--background-primary, #fff);
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--background-secondary, #e0e0e0);
+  animation: bsplus-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.bsplus-modal h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #333);
+}
+
+.bsplus-modal p {
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
+  color: var(--text-primary, #666);
+  opacity: 0.8;
+}
+
+.bsplus-modal-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.bsplus-modal-actions button {
+  padding: 0.4rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.bsplus-modal-btn-cancel {
+  background: transparent;
+  border: 1px solid var(--background-secondary, #ccc);
+  color: var(--text-primary, #333);
+}
+
+.bsplus-modal-btn-cancel:hover {
+  background: var(--background-secondary, rgba(128, 128, 128, 0.1));
+}
+
+.bsplus-modal-btn-danger {
+  background: #e53e3e;
+  border: none;
+  color: white;
+}
+
+.bsplus-modal-btn-danger:hover {
+  background: #c53030;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.35);
+}

src/plugins/built-in/notificationCollector/index.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "../../core/types";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 
 interface NotificationCollectorStorage {
   lastNotificationCount: number;
@@ -15,6 +16,10 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
   disableToggle: true,
 
   run: async (api) => {
+    if (isSeqtaEngageExperience()) {
+      return () => {};
+    }
+
     let pollInterval: number | null = null;
     let isVisible = !document.hidden;
     let baseInterval = 30000; // 30 seconds

src/plugins/built-in/profilePicture/index.ts

@@ -1,11 +1,22 @@
 import type { Plugin } from "@/plugins/core/types";
-import { componentSetting, defineSettings } from "@/plugins/core/settingsHelpers";
+import {
+  booleanSetting,
+  componentSetting,
+  defineSettings,
+} from "@/plugins/core/settingsHelpers";
 import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
 import { waitForElm } from "@/seqta/utils/waitForElm";
+import { cloudAuth } from "@/seqta/utils/CloudAuth";
 import styles from "./styles.css?inline";
 import localforage from "localforage";
 
 const settings = defineSettings({
+  useCloudPfp: booleanSetting({
+    default: false,
+    title: "Use BetterSEQTA Cloud profile picture",
+    description:
+      "When enabled, uses the avatar from your BetterSEQTA Cloud account (sign in from the extension store). Otherwise uses the uploaded image below.",
+  }),
   picture: componentSetting({
     title: "Profile Picture",
     description: "Upload or remove your custom profile image",
@@ -13,12 +24,11 @@ const settings = defineSettings({
   }),
 });
 
-
 const profilePicturePlugin: Plugin<typeof settings> = {
   id: "profile-picture",
   name: "Custom Profile Picture",
   description: "Use your own image in place of the profile icon",
-  version: "1.1.0",
+  version: "1.2.0",
   settings: settings,
   disableToggle: true,
   defaultEnabled: false,
@@ -37,14 +47,12 @@ const profilePicturePlugin: Plugin<typeof settings> = {
     let img: HTMLImageElement | null = null;
     let currentBlobUrl: string | undefined;
 
-    // Setup localforage instance
     const store = localforage.createInstance({
       name: "profile-picture-store",
       storeName: "profilePicture",
     });
 
-    async function updateImageFromStore() {
+    async function applyProfileImage() {
-      // Remove old image if present
       if (img) {
         img.remove();
         img = null;
@@ -53,6 +61,19 @@ const profilePicturePlugin: Plugin<typeof settings> = {
         URL.revokeObjectURL(currentBlobUrl);
         currentBlobUrl = undefined;
       }
+
+      const useCloud = api.settings.useCloudPfp;
+      const pfpUrl = cloudAuth.state.user?.pfpUrl;
+
+      if (useCloud && pfpUrl) {
+        img = document.createElement("img");
+        img.className = "userInfoImg";
+        img.src = pfpUrl;
+        if (svg) svg.style.display = "none";
+        container.appendChild(img);
+        return;
+      }
+
       const blob = await store.getItem<Blob>("profile-picture");
       if (blob && blob instanceof Blob) {
         currentBlobUrl = URL.createObjectURL(blob);
@@ -66,15 +87,25 @@ const profilePicturePlugin: Plugin<typeof settings> = {
       }
     }
 
-    // Initial load
+    await applyProfileImage();
-    await updateImageFromStore();
 
-    // Listen for profile picture updates
+    const onLocalPictureUpdated = () => {
-    const handler = () => { updateImageFromStore(); };
+      void applyProfileImage();
-    window.addEventListener('profile-picture-updated', handler);
+    };
+    window.addEventListener("profile-picture-updated", onLocalPictureUpdated);
+
+    const cloudUnsub = cloudAuth.subscribe(() => {
+      void applyProfileImage();
+    });
+
+    const useCloudUnreg = api.settings.onChange("useCloudPfp", () => {
+      void applyProfileImage();
+    });
 
     return () => {
-      window.removeEventListener('profile-picture-updated', handler);
+      useCloudUnreg.unregister();
+      cloudUnsub();
+      window.removeEventListener("profile-picture-updated", onLocalPictureUpdated);
       if (img) img.remove();
       if (svg) svg.style.display = "";
       if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);
@@ -83,4 +114,3 @@ const profilePicturePlugin: Plugin<typeof settings> = {
 };
 
 export default profilePicturePlugin;
-

src/plugins/built-in/themes/ThemeCreator.ts

@@ -1,11 +1,10 @@
 import renderSvelte from "@/interface/main";
-import themeCreator from "@/interface/pages/themeCreator.svelte";
-import { unmount } from "svelte";
 import { ThemeManager } from "@/plugins/built-in/themes/theme-manager";
+import { unmount } from "svelte";
+import themeCreator from "@/interface/pages/themeCreator.svelte";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 let themeCreatorSvelteApp: any = null;
-const themeManager = ThemeManager.getInstance();
 
 /**
  * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
@@ -41,7 +40,7 @@ export function OpenThemeCreator(themeID: string = "") {
   closeButton.textContent = "×";
   closeButton.addEventListener("click", () => {
     CloseThemeCreator();
-    themeManager.clearPreview();
+    ThemeManager.getInstance().clearPreview();
   });
 
   document.body.appendChild(closeButton);

src/plugins/built-in/themes/theme-manager.ts

@@ -1,7 +1,20 @@
 import localforage from "localforage";
-import type { CustomTheme, LoadedCustomTheme } from "@/types/CustomThemes";
+import browser from "webextension-polyfill";
+import {
+  type CustomTheme,
+  getForcedDarkMode,
+  type LoadedCustomTheme,
+  shouldForceThemeAppearance,
+} from "@/types/CustomThemes";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import debounce from "@/seqta/utils/debounce";
+import { themeUpdates } from "@/interface/hooks/ThemeUpdates";
+import { cloudAuth } from "@/seqta/utils/CloudAuth";
+import { updateAllColors } from "@/seqta/ui/colors/Manager";
+import {
+  clearCustomThemeAdaptiveCssVariables,
+  setCustomThemeAdaptiveCssVariables,
+} from "@/seqta/ui/colors/customThemeAdaptiveBindings";
 
 type ThemeContent = {
   id: string;
@@ -13,6 +26,15 @@ type ThemeContent = {
   CustomCSS?: string;
   hideThemeName?: boolean;
   forceDark?: boolean;
+  images?: { id: string; variableName: string; data: string }[]; // data: base64
+};
+
+export type InstallThemeMeta = {
+  fromStore: boolean;
+  /** Server list `updated_at` (Unix seconds); set when installing from store. */
+  serverUpdatedAtSec?: number;
+  forceTheme?: boolean;
+  adaptiveCssVariables?: string[];
   images: { id: string; variableName: string; data: string }[]; // data: base64
 };
 
@@ -26,6 +48,7 @@ export class ThemeManager {
   private originalPreviewTheme: boolean | null = null;
   private imageUrlCache: Map<string, string> = new Map();
   private lastTransitionPoint: { x: number; y: number } = { x: 0, y: 0 };
+  private storeUpdateCheckRunning = false;
 
   private constructor() {
     console.debug("[ThemeManager] Initializing...");
@@ -174,6 +197,8 @@ export class ThemeManager {
       }
     } catch (error) {
       console.error("[ThemeManager] Error during initialization:", error);
+    } finally {
+      void this.checkStoreThemeUpdates();
     }
   }
 
@@ -208,7 +233,7 @@ export class ThemeManager {
         console.debug("[ThemeManager] Storing original settings");
         settingsState.originalSelectedColor = settingsState.selectedColor;
 
-        if (theme.forceDark) {
+        if (shouldForceThemeAppearance(theme)) {
           settingsState.originalDarkMode = settingsState.DarkMode;
         }
       }
@@ -239,6 +264,7 @@ export class ThemeManager {
         this.currentTheme = theme;
         settingsState.selectedTheme = themeId;
       }
+      void updateAllColors();
     } catch (error) {
       console.error("[ThemeManager] Error setting theme:", error);
     }
@@ -269,9 +295,10 @@ export class ThemeManager {
       }
 
       // Apply theme settings
-      if (theme.forceDark !== undefined) {
+      if (shouldForceThemeAppearance(theme)) {
-        console.debug("[ThemeManager] Setting dark mode:", theme.forceDark);
+        const dark = getForcedDarkMode(theme);
-        settingsState.DarkMode = theme.forceDark;
+        console.debug("[ThemeManager] Setting dark mode:", dark);
+        settingsState.DarkMode = dark;
       }
 
       // Use the stored selected color if available, otherwise use the default
@@ -288,6 +315,8 @@ export class ThemeManager {
         );
         settingsState.selectedColor = theme.defaultColour;
       }
+
+      setCustomThemeAdaptiveCssVariables(theme.adaptiveCssVariables ?? []);
     } catch (error) {
       console.error("[ThemeManager] Error applying theme:", error);
     }
@@ -344,9 +373,18 @@ export class ThemeManager {
 
       if (this.currentTheme) {
         // Store the current color with the theme before removing it
+        const selectedColor = settingsState.selectedColor;
+        const markUserEditedForColor =
+          this.currentTheme.userEdited !== true &&
+          this.currentTheme.installedFromStore !== false &&
+          selectedColor &&
+          this.currentTheme.defaultColour &&
+          selectedColor.trim().toLowerCase() !==
+            this.currentTheme.defaultColour.trim().toLowerCase();
         await localforage.setItem(this.currentTheme.id, {
           ...this.currentTheme,
-          selectedColor: settingsState.selectedColor,
+          selectedColor,
+          ...(markUserEditedForColor ? { userEdited: true } : {}),
         });
       }
 
@@ -372,6 +410,7 @@ export class ThemeManager {
       if (clearSelectedTheme) {
         settingsState.selectedTheme = "";
       }
+      clearCustomThemeAdaptiveCssVariables();
     } catch (error) {
       console.error("[ThemeManager] Error removing theme:", error);
     }
@@ -426,18 +465,24 @@ export class ThemeManager {
   public async saveTheme(theme: LoadedCustomTheme): Promise<void> {
     console.debug("[ThemeManager] Saving theme:", theme.name);
     try {
-      await localforage.setItem(theme.id, theme);
+      const existing = (await localforage.getItem(theme.id)) as CustomTheme | null;
+      let toSave = theme;
+      if (existing?.userEdited === true && theme.userEdited !== false) {
+        toSave = { ...theme, userEdited: true };
+      }
+
+      await localforage.setItem(toSave.id, toSave);
       const themeIds = (await localforage.getItem("customThemes")) as
         | string[]
         | null;
 
       if (themeIds) {
-        if (!themeIds.includes(theme.id)) {
+        if (!themeIds.includes(toSave.id)) {
-          themeIds.push(theme.id);
+          themeIds.push(toSave.id);
           await localforage.setItem("customThemes", themeIds);
         }
       } else {
-        await localforage.setItem("customThemes", [theme.id]);
+        await localforage.setItem("customThemes", [toSave.id]);
       }
     } catch (error) {
       console.error("[ThemeManager] Error saving theme:", error);
@@ -470,34 +515,87 @@ export class ThemeManager {
     }
   }
 
+  private readonly THEME_API_BASE = 'https://betterseqta.org/api';
+  private readonly GITHUB_THEMES_BASE = 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes';
+
   /**
-   * Download and install a theme from the store
+   * Fetch JSON from a URL via background script (avoids CORS when running inside SEQTA page)
+   */
+  private async fetchFromUrl(url: string): Promise<any> {
+    const result = (await browser.runtime.sendMessage({
+      type: 'fetchFromUrl',
+      url,
+    })) as { data?: unknown; error?: string };
+    if (result?.error) throw new Error(result.error);
+    return result?.data;
+  }
+
+  /**
+   * Download and install a theme from the store.
+   * Uses API first (increments download_count), falls back to GitHub if unreachable.
    */
   public async downloadTheme(themeContent: {
     id: string;
     name: string;
-    description: string;
+    description?: string;
-    coverImage: string;
+    coverImage?: string;
+    theme_json_url?: string;
+    updated_at?: number;
   }): Promise<void> {
-    console.debug("[ThemeManager] Downloading theme:", themeContent.name);
     try {
-      if (!themeContent.id) return;
+      await this.downloadAndInstallStoreTheme(themeContent);
-
-      const response = await fetch(
-        `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${themeContent.id}/theme.json`,
-      );
-      const themeData = (await response.json()) as ThemeContent;
-
-      await this.installTheme(themeData);
     } catch (error) {
       console.error("[ThemeManager] Error downloading theme:", error);
     }
   }
 
+  /**
+   * Fetch theme.json from the store and install (throws on failure).
+   */
+  private async downloadAndInstallStoreTheme(themeContent: {
+    id: string;
+    name: string;
+    description?: string;
+    coverImage?: string;
+    theme_json_url?: string;
+    updated_at?: number;
+  }): Promise<void> {
+    console.debug("[ThemeManager] Downloading theme:", themeContent.name);
+    if (!themeContent.id) {
+      throw new Error("Missing theme id");
+    }
+
+    let themeData: ThemeContent;
+
+    try {
+      const downloadData = (await this.fetchFromUrl(
+        `${this.THEME_API_BASE}/themes/${themeContent.id}/download`,
+      )) as { success?: boolean; data?: { theme_json_url: string } };
+      if (!downloadData?.success || !downloadData?.data?.theme_json_url) {
+        throw new Error("Failed to get theme download URL");
+      }
+      themeData = (await this.fetchFromUrl(
+        downloadData.data.theme_json_url,
+      )) as ThemeContent;
+    } catch (apiError) {
+      console.warn("[ThemeManager] API failed, trying GitHub fallback:", apiError);
+      const githubUrl = `${this.GITHUB_THEMES_BASE}/${themeContent.id}/theme.json`;
+      themeData = (await this.fetchFromUrl(githubUrl)) as ThemeContent;
+    }
+
+    await this.installTheme(themeData, {
+      fromStore: true,
+      serverUpdatedAtSec: themeContent.updated_at,
+    });
+  }
+
   /**
    * Install a theme from theme data
    */
-  public async installTheme(themeData: ThemeContent): Promise<void> {
+  public async installTheme(
+    themeData: ThemeContent,
+    meta?: InstallThemeMeta,
+  ): Promise<void> {
     console.debug("[ThemeManager] Installing theme:", themeData.name);
     try {
       // Validate required fields
@@ -505,6 +603,9 @@ export class ThemeManager {
         throw new Error("Theme is missing required fields (id or name)");
       }
 
+      const fromStore = meta?.fromStore ?? false;
+      const serverUpdatedAtSec = meta?.serverUpdatedAtSec;
+
       // Handle cover image (optional)
       let coverImageBlob = null;
       if (themeData.coverImage) {
@@ -539,7 +640,6 @@ export class ThemeManager {
           })
           .filter((img) => img !== null) ?? [];
 
-      // Create theme with defaults for optional fields
       const theme: LoadedCustomTheme = {
         id: themeData.id,
         name: themeData.name,
@@ -554,6 +654,19 @@ export class ThemeManager {
         isEditable: false,
         hideThemeName: themeData.hideThemeName ?? false,
         forceDark: themeData.forceDark,
+        installedFromStore: fromStore,
+        userEdited: fromStore ? false : undefined,
+        storeSyncedAtSec:
+          fromStore && serverUpdatedAtSec != null
+            ? serverUpdatedAtSec
+            : undefined,
+        forceTheme:
+          themeData.forceTheme !== undefined
+            ? themeData.forceTheme
+            : themeData.forceDark !== undefined
+              ? true
+              : undefined,
+        adaptiveCssVariables: themeData.adaptiveCssVariables,
       };
 
       await this.saveTheme(theme);
@@ -563,6 +676,107 @@ export class ThemeManager {
     }
   }
 
+  /**
+   * Compare installed store themes to GET /api/themes and refresh when the server is newer.
+   * Skips themes with userEdited: true (theme creator / popup save, or custom accent vs default).
+   */
+  public async checkStoreThemeUpdates(): Promise<void> {
+    if (this.storeUpdateCheckRunning) return;
+    this.storeUpdateCheckRunning = true;
+    try {
+      const token = await cloudAuth.getStoredToken();
+      const res = (await browser.runtime.sendMessage({
+        type: "fetchThemes",
+        token: token ?? undefined,
+      })) as {
+        success?: boolean;
+        data?: { themes?: Array<{ id: string; updated_at?: number }> };
+      };
+
+      if (!res?.success || !res.data?.themes?.length) return;
+
+      const serverById = new Map<string, number>();
+      for (const t of res.data.themes) {
+        if (
+          typeof t.id === "string" &&
+          typeof t.updated_at === "number"
+        ) {
+          serverById.set(t.id, t.updated_at);
+        }
+      }
+      if (serverById.size === 0) return;
+
+      const themeIds = (await localforage.getItem("customThemes")) as
+        | string[]
+        | null;
+      if (!themeIds?.length) return;
+
+      for (const id of themeIds) {
+        const theme = (await localforage.getItem(id)) as CustomTheme | null;
+        if (!theme || theme.userEdited === true) {
+          continue;
+        }
+
+        // File imports explicitly set installedFromStore: false — never auto-sync.
+        if (theme.installedFromStore === false) {
+          continue;
+        }
+
+        const serverUpdated = serverById.get(id);
+        if (serverUpdated == null) {
+          continue;
+        }
+
+        if (
+          theme.installedFromStore === true &&
+          theme.storeSyncedAtSec != null
+        ) {
+          if (serverUpdated <= theme.storeSyncedAtSec) {
+            continue;
+          }
+        }
+        // Else: legacy installs from before store metadata (installedFromStore/storeSyncedAtSec
+        // unset) or incomplete rows — still listed on the server, so sync to latest once.
+
+        const wasSelected = settingsState.selectedTheme === id;
+        try {
+          if (wasSelected) {
+            await this.disableTheme();
+          }
+          await this.downloadAndInstallStoreTheme({
+            id: theme.id,
+            name: theme.name,
+            updated_at: serverUpdated,
+          });
+          console.log(
+            "[ThemeManager] Theme auto-updated from store:",
+            theme.name,
+          );
+          if (wasSelected) {
+            await this.setTheme(id, false);
+          }
+          themeUpdates.triggerUpdate();
+        } catch (err) {
+          console.error("[ThemeManager] Store theme auto-update failed:", id, err);
+          if (wasSelected) {
+            try {
+              await this.setTheme(id, false);
+            } catch (restoreErr) {
+              console.error(
+                "[ThemeManager] Failed to restore theme after update error:",
+                restoreErr,
+              );
+            }
+          }
+        }
+      }
+    } catch (e) {
+      console.error("[ThemeManager] checkStoreThemeUpdates error:", e);
+    } finally {
+      this.storeUpdateCheckRunning = false;
+    }
+  }
+
   /**
    * Share a theme by exporting it
    */
@@ -583,6 +797,9 @@ export class ThemeManager {
         isEditable,
         selectedColor,
         allowBackgrounds,
+        installedFromStore,
+        storeSyncedAtSec,
+        userEdited,
         ...themeBasics
       } = theme;
 
@@ -620,7 +837,7 @@ export class ThemeManager {
   public async previewTheme(theme: LoadedCustomTheme): Promise<void> {
     console.debug("[ThemeManager] Previewing theme:", theme.name);
     try {
-      const { CustomCSS, CustomImages, defaultColour, forceDark } = theme;
+      const { CustomCSS, CustomImages, defaultColour } = theme;
 
       // Store original settings only if this is a new theme
       if (!theme.webURL) {
@@ -666,13 +883,16 @@ export class ThemeManager {
       this.previousImageVariableNames = newImageVariableNames;
 
       // Apply theme settings
-      if (forceDark !== undefined) {
+      if (shouldForceThemeAppearance(theme)) {
-        settingsState.DarkMode = forceDark;
+        settingsState.DarkMode = getForcedDarkMode(theme);
       }
 
       if (defaultColour) {
         settingsState.selectedColor = defaultColour;
       }
+
+      setCustomThemeAdaptiveCssVariables(theme.adaptiveCssVariables ?? []);
+      void updateAllColors();
     } catch (error) {
       console.error("[ThemeManager] Error previewing theme:", error);
     }
@@ -738,15 +958,18 @@ export class ThemeManager {
         this.previousImageVariableNames = newImageVariableNames;
       }
 
-      // Always apply dark mode setting
+      // Always apply dark mode setting when theme forces appearance
-      if (theme.forceDark !== undefined) {
+      if (shouldForceThemeAppearance(theme as CustomTheme)) {
-        settingsState.DarkMode = theme.forceDark;
+        settingsState.DarkMode = getForcedDarkMode(theme as CustomTheme);
       }
 
       // Only apply color if this is a new theme
       if (!theme.webURL && theme.defaultColour) {
         settingsState.selectedColor = theme.defaultColour;
       }
+
+      setCustomThemeAdaptiveCssVariables(theme.adaptiveCssVariables ?? []);
+      void updateAllColors();
     } catch (error) {
       console.error("[ThemeManager] Error updating theme preview:", error);
     }
@@ -784,6 +1007,8 @@ export class ThemeManager {
         this.previewStyleElement = null;
       }
 
+      clearCustomThemeAdaptiveCssVariables();
+
       // Restore original settings
       const storedColor = localStorage.getItem("originalPreviewColor");
 
@@ -813,6 +1038,8 @@ export class ThemeManager {
         settingsState.DarkMode = this.originalPreviewTheme;
         this.originalPreviewTheme = null;
       }
+
+      void updateAllColors();
     } catch (error) {
       console.error("[ThemeManager] Error clearing preview:", error);
     }

src/plugins/built-in/timetable/index.ts

@@ -130,7 +130,7 @@ function handleTimetableAssessmentHide(): void {
 
   const hideOn = document.createElement("button");
   hideOn.className = "uiButton timetable-hide iconFamily";
-  hideOn.innerHTML = "👁";
+  hideOn.innerHTML = "";
 
   hideControls.appendChild(hideOn);
 

src/plugins/built-in/timetableEdit/index.ts

@@ -0,0 +1,338 @@
+import type { Plugin } from "../../core/types";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import styles from "./styles.css?inline";
+
+interface TimetableEntryData {
+  ci: number;
+  description: string;
+  room: string;
+  staff: string;
+}
+
+interface TimetableOverrides {
+  [ci: string]: { room?: string; staff?: string };
+}
+
+interface TimetableOverridesBySubject {
+  [description: string]: { room?: string; staff?: string };
+}
+
+interface TimetableStorage {
+  timetableOverrides?: TimetableOverrides;
+  timetableOverridesBySubject?: TimetableOverridesBySubject;
+}
+
+/** SEQTA timetable entries use .teacher and .room as direct children, and data-instance for ci */
+function getRoomAndTeacherElements(entry: HTMLElement): {
+  roomEl: HTMLElement | null;
+  teacherEl: HTMLElement | null;
+} {
+  const roomEl = entry.querySelector(".room") as HTMLElement | null;
+  const teacherEl = entry.querySelector(".teacher") as HTMLElement | null;
+  return { roomEl, teacherEl };
+}
+
+const EDIT_ICON_SVG =
+  '<svg width="24" height="24" viewBox="0 0 24 24"><g style="fill: currentcolor;"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"/></g></svg>';
+
+function showEditModal(
+  item: TimetableEntryData,
+  overrides: TimetableOverrides | undefined,
+  overridesBySubject: TimetableOverridesBySubject | undefined,
+  onSave: (
+    ci: number,
+    room: string,
+    staff: string,
+    applyToFuture: boolean,
+  ) => void,
+  onClear: (ci: number) => void,
+): void {
+  const overlay = document.createElement("div");
+  overlay.className = "timetable-edit-modal-overlay";
+
+  const modal = document.createElement("div");
+  modal.className = "timetable-edit-modal";
+
+  const override = overrides?.[String(item.ci)] ?? overridesBySubject?.[item.description];
+
+  const roomValue = override?.room ?? item.room ?? "";
+  const staffValue = override?.staff ?? item.staff ?? "";
+
+  const escapeHtml = (s: string) =>
+    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+  const title = escapeHtml(item.description);
+
+  modal.innerHTML = `
+    <h3>Edit ${title}</h3>
+    <label for="timetable-edit-room">Room</label>
+    <input type="text" id="timetable-edit-room" value="${roomValue.replace(/"/g, "&quot;")}" placeholder="Room" />
+    <label for="timetable-edit-staff">Teacher</label>
+    <input type="text" id="timetable-edit-staff" value="${staffValue.replace(/"/g, "&quot;")}" placeholder="Teacher" />
+    <div class="timetable-edit-modal-checkbox">
+      <input type="checkbox" id="timetable-edit-apply-future" />
+      <label for="timetable-edit-apply-future">Apply to future weeks</label>
+    </div>
+    <div class="timetable-edit-modal-actions">
+      ${override ? '<button type="button" class="timetable-edit-btn-clear">Clear</button>' : ""}
+      <button type="button" class="timetable-edit-btn-cancel">Cancel</button>
+      <button type="button" class="timetable-edit-btn-save">Save</button>
+    </div>
+  `;
+
+  overlay.appendChild(modal);
+
+  const removeModal = () => {
+    overlay.remove();
+    document.removeEventListener("keydown", handleKeydown);
+  };
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") removeModal();
+  };
+
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) removeModal();
+  });
+
+  modal.addEventListener("click", (e) => e.stopPropagation());
+  modal.addEventListener("mousedown", (e) => e.stopPropagation());
+  modal.addEventListener("mouseup", (e) => e.stopPropagation());
+
+  const roomInput = modal.querySelector("#timetable-edit-room") as HTMLInputElement;
+  const staffInput = modal.querySelector("#timetable-edit-staff") as HTMLInputElement;
+  const applyFutureCheckbox = modal.querySelector("#timetable-edit-apply-future") as HTMLInputElement;
+
+  modal.querySelector(".timetable-edit-btn-save")?.addEventListener("click", () => {
+    onSave(
+      item.ci,
+      roomInput.value.trim(),
+      staffInput.value.trim(),
+      applyFutureCheckbox?.checked ?? false,
+    );
+    removeModal();
+  });
+
+  modal.querySelector(".timetable-edit-btn-cancel")?.addEventListener("click", removeModal);
+
+  const clearBtn = modal.querySelector(".timetable-edit-btn-clear");
+  if (clearBtn) {
+    clearBtn.addEventListener("click", () => {
+      onClear(item.ci);
+      removeModal();
+    });
+  }
+
+  document.body.appendChild(overlay);
+  document.addEventListener("keydown", handleKeydown);
+  roomInput?.focus();
+}
+
+const timetableEditPlugin: Plugin<{}, TimetableStorage> = {
+  id: "timetableEdit",
+  name: "Edit Rooms & Teachers",
+  description: "Edit room and teacher names in timetable classes",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: true,
+  defaultEnabled: true,
+
+  run: async (api) => {
+    const styleEl = document.createElement("style");
+    styleEl.textContent = styles;
+    document.head.appendChild(styleEl);
+
+    await api.storage.loaded;
+
+    let observer: MutationObserver | null = null;
+    let quickbarObserver: MutationObserver | null = null;
+    let lastClickedCi: number | null = null;
+    let lastClickedEntry: { roomEl: HTMLElement; teacherEl: HTMLElement; item: TimetableEntryData } | null = null;
+
+    const getOverrides = (): TimetableOverrides =>
+      api.storage.timetableOverrides ?? {};
+    const getOverridesBySubject = (): TimetableOverridesBySubject =>
+      api.storage.timetableOverridesBySubject ?? {};
+
+    const getEffectiveOverride = (
+      ci: number,
+      description: string,
+    ): { room?: string; staff?: string } | undefined =>
+      getOverrides()[String(ci)] ?? getOverridesBySubject()[description];
+
+    const processEntry = (entry: HTMLElement): void => {
+      if (entry.classList.contains("assessment") || entry.hasAttribute("data-timetable-edit-processed")) return;
+
+      const ciStr = entry.getAttribute("data-instance");
+      if (!ciStr) return;
+
+      const ci = parseInt(ciStr, 10);
+      if (isNaN(ci)) return;
+
+      const { roomEl, teacherEl } = getRoomAndTeacherElements(entry);
+      if (!roomEl && !teacherEl) return;
+
+      const titleEl = entry.querySelector(".title");
+      const description = titleEl?.textContent?.trim() ?? "";
+      const room = roomEl?.textContent?.trim() ?? "";
+      const staff = teacherEl?.textContent?.trim() ?? "";
+
+      const item: TimetableEntryData = { ci, description, room, staff };
+
+      entry.setAttribute("data-timetable-edit-processed", "true");
+
+      const override = getEffectiveOverride(ci, description);
+      if (override) {
+        if (override.room !== undefined && roomEl) roomEl.textContent = override.room;
+        if (override.staff !== undefined && teacherEl) teacherEl.textContent = override.staff;
+      }
+
+      const captureClick = (e: MouseEvent) => {
+        lastClickedCi = ci;
+        lastClickedEntry = { roomEl, teacherEl, item };
+      };
+      entry.addEventListener("click", captureClick, true);
+    };
+
+    const processAllEntries = () => {
+      document.querySelectorAll(".timetablepage .entry.class").forEach((entry) => {
+        processEntry(entry as HTMLElement);
+      });
+    };
+
+    const addEditButtonToQuickbar = (quickbar: HTMLElement) => {
+      if (quickbar.querySelector(".timetable-edit-quickbar-btn")) return;
+
+      const actions = quickbar.querySelector(".actions");
+      if (!actions) return;
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "uiButton timetable-edit-quickbar-btn";
+      btn.title = "Edit room and teacher";
+      btn.innerHTML = EDIT_ICON_SVG;
+
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const ci = lastClickedCi;
+        const entryData = lastClickedEntry;
+        if (!ci || !entryData) return;
+
+        const qb = (e.currentTarget as HTMLElement).closest(".quickbar");
+        if (!qb) return;
+        const quickbarRoom = qb.querySelector(".meta .room")?.textContent?.trim() ?? "";
+        const quickbarTeacher = qb.querySelector(".meta .teacher")?.textContent?.trim() ?? "";
+        const quickbarTitle = qb.querySelector(".title")?.textContent?.trim() ?? "";
+        const item: TimetableEntryData = {
+          ci,
+          description: quickbarTitle || entryData.item.description,
+          room: quickbarRoom || entryData.item.room,
+          staff: quickbarTeacher || entryData.item.staff,
+        };
+
+        showEditModal(
+          item,
+          getOverrides(),
+          getOverridesBySubject(),
+          (ci, room, staff, applyToFuture) => {
+            if (applyToFuture) {
+              const bySubject = { ...getOverridesBySubject() };
+              bySubject[item.description] = {
+                room: room || undefined,
+                staff: staff || undefined,
+              };
+              api.storage.timetableOverridesBySubject = bySubject;
+            } else {
+              const current = getOverrides();
+              api.storage.timetableOverrides = {
+                ...current,
+                [String(ci)]: { room: room || undefined, staff: staff || undefined },
+              };
+            }
+            if (entryData.roomEl) entryData.roomEl.textContent = room;
+            if (entryData.teacherEl) entryData.teacherEl.textContent = staff;
+            processAllEntries();
+          },
+          (ci) => {
+            const current = getOverrides();
+            delete current[String(ci)];
+            api.storage.timetableOverrides = current;
+            const bySubject = getOverridesBySubject();
+            delete bySubject[item.description];
+            api.storage.timetableOverridesBySubject = bySubject;
+            if (entryData.roomEl) entryData.roomEl.textContent = item.room;
+            if (entryData.teacherEl) entryData.teacherEl.textContent = item.staff;
+            processAllEntries();
+          },
+        );
+      });
+
+      actions.insertBefore(btn, actions.firstChild);
+    };
+
+    const syncQuickbarFromDOM = () => {
+      const quickbar = document.querySelector(".timetablepage .quickbar.visible");
+      if (quickbar && quickbar.getAttribute("data-type") === "class") {
+        const titleEl = quickbar.querySelector(".title");
+        const roomEl = quickbar.querySelector(".meta .room");
+        const teacherEl = quickbar.querySelector(".meta .teacher");
+        if (titleEl && roomEl && teacherEl && lastClickedCi !== null && lastClickedEntry) {
+          addEditButtonToQuickbar(quickbar as HTMLElement);
+        }
+      }
+    };
+
+    const setupQuickbarObserver = () => {
+      const timetablePage = document.querySelector(".timetablepage");
+      if (!timetablePage || quickbarObserver) return;
+
+      quickbarObserver = new MutationObserver(() => {
+        const quickbar = document.querySelector(".timetablepage .quickbar.visible");
+        if (quickbar?.getAttribute("data-type") === "class") {
+          addEditButtonToQuickbar(quickbar as HTMLElement);
+        }
+      });
+
+      quickbarObserver.observe(timetablePage, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["class"],
+      });
+    };
+
+    const handleTimetable = async () => {
+      await waitForElm(".timetablepage .entry", true, 10, 100);
+      processAllEntries();
+      setupQuickbarObserver();
+      syncQuickbarFromDOM();
+
+      const timetablePage = document.querySelector(".timetablepage");
+      if (timetablePage && !observer) {
+        observer = new MutationObserver(() => {
+          document.querySelectorAll(".timetablepage .entry.class").forEach((entry) => {
+            if (!entry.hasAttribute("data-timetable-edit-processed")) {
+              processEntry(entry as HTMLElement);
+            }
+          });
+        });
+        observer.observe(timetablePage, { childList: true, subtree: true });
+      }
+    };
+
+    const { unregister } = api.seqta.onMount(".timetablepage", handleTimetable);
+
+    return () => {
+      unregister();
+      observer?.disconnect();
+      quickbarObserver?.disconnect();
+      styleEl.remove();
+      document.querySelectorAll("[data-timetable-edit-processed]").forEach((el) => {
+        el.removeAttribute("data-timetable-edit-processed");
+      });
+      document.querySelectorAll(".timetable-edit-quickbar-btn").forEach((el) => el.remove());
+    };
+  },
+};
+
+export default timetableEditPlugin;

src/plugins/built-in/timetableEdit/styles.css

@@ -0,0 +1,188 @@
+/* Timetable Edit Plugin - BetterSEQTA Plus style */
+
+/* Edit button in quickbar */
+.timetable-edit-quickbar-btn {
+  padding: 0;
+  margin: 0;
+  background: transparent !important;
+  border: none !important;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.timetable-edit-quickbar-btn:hover {
+  transform: scale(1.05);
+}
+
+.timetable-edit-quickbar-btn:active {
+  transform: scale(0.95);
+}
+
+.timetable-edit-quickbar-btn svg {
+  fill: currentColor;
+  width: 24px;
+  height: 24px;
+}
+
+/* Edit modal animations */
+@keyframes timetable-edit-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes timetable-edit-modal-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Edit modal overlay - fix click-through with proper stacking */
+.timetable-edit-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  pointer-events: auto;
+  animation: timetable-edit-overlay-in 0.2s ease-out forwards;
+}
+
+.timetable-edit-modal {
+  padding: 1rem 1.5rem;
+  margin: 0 1rem;
+  min-width: 18rem;
+  max-width: 24rem;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--background-primary);
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  pointer-events: auto;
+  border: 1px solid var(--background-secondary);
+  animation: timetable-edit-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.timetable-edit-modal h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.timetable-edit-modal label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  opacity: 0.8;
+}
+
+.timetable-edit-modal input[type="text"] {
+  width: 100%;
+  min-width: 0;
+  padding: 0.5rem 1rem 0.5rem 0.75rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--background-secondary);
+  border-radius: 0.5rem;
+  background: var(--background-secondary);
+  color: var(--text-primary);
+  box-sizing: border-box;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.timetable-edit-modal input[type="text"]:focus {
+  outline: none;
+  border-color: var(--better-main, #007bff);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.timetable-edit-modal-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.timetable-edit-modal-checkbox input {
+  width: auto;
+  margin: 0;
+}
+
+.timetable-edit-modal-checkbox label {
+  margin: 0;
+  cursor: pointer;
+}
+
+.timetable-edit-modal-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+
+.timetable-edit-modal-actions button {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.timetable-edit-modal-actions .timetable-edit-btn-clear {
+  background: transparent;
+  border: 1px solid var(--background-secondary);
+  color: var(--text-primary);
+}
+
+.timetable-edit-modal-actions .timetable-edit-btn-clear:hover {
+  background: var(--background-secondary);
+  transform: translateY(-1px);
+}
+
+.timetable-edit-modal-actions .timetable-edit-btn-cancel {
+  background: transparent;
+  border: 1px solid var(--background-secondary);
+  color: var(--text-primary);
+}
+
+.timetable-edit-modal-actions .timetable-edit-btn-cancel:hover {
+  background: var(--background-secondary);
+  transform: translateY(-1px);
+}
+
+.timetable-edit-modal-actions .timetable-edit-btn-save {
+  background: var(--better-main, #007bff);
+  border: none;
+  color: var(--text-color, white);
+}
+
+.timetable-edit-modal-actions .timetable-edit-btn-save:hover {
+  transform: scale(1.03) translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.35);
+}
+
+.timetable-edit-modal-actions .timetable-edit-btn-save:active {
+  transform: scale(0.98) translateY(0);
+  box-shadow: none;
+}

src/plugins/index.ts

@@ -2,6 +2,7 @@ import { PluginManager } from "./core/manager";
 
 // Lightweight plugins (load immediately)
 import timetablePlugin from "./built-in/timetable";
+import timetableEditPlugin from "./built-in/timetableEdit";
 import notificationCollectorPlugin from "./built-in/notificationCollector";
 import themesPlugin from "./built-in/themes";
 import animatedBackgroundPlugin from "./built-in/animatedBackground";
@@ -9,6 +10,7 @@ import assessmentsAveragePlugin from "./built-in/assessmentsAverage";
 import profilePicturePlugin from "./built-in/profilePicture";
 import assessmentsOverviewPlugin from "./built-in/assessmentsOverview";
 import backgroundMusicPlugin from "./built-in/backgroundMusic";
+import messageFoldersPlugin from "./built-in/messageFolders";
 //import testPlugin from './built-in/test';
 
 // Heavy plugins (lazy-loaded only when enabled)
@@ -23,9 +25,11 @@ pluginManager.registerPlugin(animatedBackgroundPlugin);
 pluginManager.registerPlugin(assessmentsAveragePlugin);
 pluginManager.registerPlugin(notificationCollectorPlugin);
 pluginManager.registerPlugin(timetablePlugin);
+pluginManager.registerPlugin(timetableEditPlugin);
 pluginManager.registerPlugin(profilePicturePlugin);
 pluginManager.registerPlugin(assessmentsOverviewPlugin);
 pluginManager.registerPlugin(backgroundMusicPlugin);
+pluginManager.registerPlugin(messageFoldersPlugin);
 //pluginManager.registerPlugin(testPlugin);
 
 // Register heavy plugins with lazy loading

src/plugins/monofile.ts

@@ -17,14 +17,19 @@ import { StorageChangeHandler } from "@/seqta/utils/listeners/StorageChanges";
 import { eventManager } from "@/seqta/utils/listeners/EventManager";
 
 // UI and theme management
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 import RegisterClickListeners from "@/seqta/utils/listeners/ClickListeners";
 import { AddBetterSEQTAElements } from "@/seqta/ui/AddBetterSEQTAElements";
 import { updateAllColors } from "@/seqta/ui/colors/Manager";
 import loading from "@/seqta/ui/Loading";
 import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
+import { getEngageRoutePage } from "@/seqta/utils/engageRoute";
+import {
+  loadEngageHomePage,
+  updateEngageHomeMenuActive,
+} from "@/seqta/utils/Loaders/LoadEngageHomePage";
 import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
-import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
+import { runStartupPopupQueue } from "@/seqta/utils/Openers/StartupPopupQueue";
-import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification";
 
 import { updateTimetableTimes } from "@/seqta/utils/updateTimetableTimes";
 
@@ -82,7 +87,13 @@ export function hideSideBar() {
   }
 }
 
+let betterSeqtaFinishLoadDone = false;
+let engageHashListenerAttached = false;
+
 export async function finishLoad() {
+  if (betterSeqtaFinishLoadDone) return;
+  betterSeqtaFinishLoadDone = true;
+
   try {
     document.querySelector(".legacy-root")?.classList.remove("hidden");
 
@@ -94,14 +105,7 @@ export async function finishLoad() {
     console.error("Error during loading cleanup:", err);
   }
 
-  // Check and show privacy statement notification (before what's new)
+  runStartupPopupQueue();
-  if (!document.getElementById("privacy-notification")) {
-    await showPrivacyNotification();
-  }
-
-  if (settingsState.justupdated && !document.getElementById("whatsnewbk") && !document.getElementById("privacy-notification")) {
-    OpenWhatsNewPopup();
-  }
 }
 
 export function GetCSSElement(file: string) {
@@ -115,19 +119,19 @@ export function GetCSSElement(file: string) {
 }
 
 function removeThemeTagsFromNotices() {
-  // Grabs an array of the notice iFrames
   const userHTMLArray = document.getElementsByClassName("userHTML");
-  // Iterates through the array, applying the iFrame css
   for (const item of userHTMLArray) {
-    // Grabs the HTML of the body tag
+    const iframe = item as HTMLIFrameElement;
-    const item1 = item as HTMLIFrameElement;
+    try {
-    const body = item1.contentWindow!.document.querySelectorAll("body")[0];
+      const doc = iframe.contentDocument;
-    if (body) {
+      if (!doc?.body) continue;
-      // Replaces the theme tag with nothing
+      const body = doc.body;
       const bodyText = body.innerHTML;
       body.innerHTML = bodyText
         .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
         .replace(/ +/, " ");
+    } catch {
+      // Cross-origin or otherwise inaccessible iframe (common during Engage load / filter frames)
     }
   }
 }
@@ -202,7 +206,20 @@ function SortMessagePageItems(messagesParentElement: any) {
 
 async function LoadPageElements(): Promise<void> {
   await AddBetterSEQTAElements();
-  const sublink: string | undefined = window.location.href.split("/")[4];
+  const sublink: string | undefined = isSeqtaEngageExperience()
+    ? getEngageRoutePage()
+    : window.location.href.split("/")[4];
+
+  if (isSeqtaEngageExperience() && !engageHashListenerAttached) {
+    engageHashListenerAttached = true;
+    window.addEventListener("hashchange", () => {
+      if (getEngageRoutePage() === "home") {
+        void loadEngageHomePage();
+      } else {
+        updateEngageHomeMenuActive(false);
+      }
+    });
+  }
 
   eventManager.register(
     "messagesAdded",
@@ -296,6 +313,28 @@ async function handleNotices(node: Element): Promise<void> {
 }
 
 async function handleSublink(sublink: string | undefined): Promise<void> {
+  if (isSeqtaEngageExperience()) {
+    switch (sublink) {
+      case undefined:
+        window.location.replace(
+          `${location.origin}/#?page=/${settingsState.defaultPage}`,
+        );
+        if (settingsState.defaultPage === "home") void loadEngageHomePage();
+        finishLoad();
+        break;
+      case "home":
+        window.location.replace(`${location.origin}/#?page=/home`);
+        console.info("[BetterSEQTA+] Started Init (SEQTA Engage home)");
+        if (settingsState.onoff) void loadEngageHomePage();
+        finishLoad();
+        break;
+      default:
+        finishLoad();
+        break;
+    }
+    return;
+  }
+
   switch (sublink) {
     case "news":
       await handleNewsPage();
@@ -382,8 +421,11 @@ async function handleDashboard(node: Element): Promise<void> {
   document.head.append(style);
 
   await waitForElm(".dashlet", true, 10);
+  try {
+    const children = document.querySelectorAll(".dashboard > *");
+    if (children.length) {
       animate(
-    ".dashboard > *",
+        children,
         { opacity: [0, 1], y: [10, 0] },
         {
           delay: stagger(0.1),
@@ -391,6 +433,10 @@ async function handleDashboard(node: Element): Promise<void> {
           ease: [0.22, 0.03, 0.26, 1],
         },
       );
+    }
+  } catch {
+    // Avoid uncaught errors if motion hits an unexpected DOM state during load.
+  }
 
   document.head.querySelector("style.dashboardHider")?.remove();
 }
@@ -400,8 +446,11 @@ async function handleDocuments(node: Element): Promise<void> {
   if (!settingsState.animations) return;
 
   await waitForElm(".document", true, 10);
+  try {
+    const rows = document.querySelectorAll(".documents tbody tr.document");
+    if (rows.length) {
       animate(
-    ".documents tbody tr.document",
+        rows,
         { opacity: [0, 1], y: [10, 0] },
         {
           delay: stagger(0.05),
@@ -410,14 +459,21 @@ async function handleDocuments(node: Element): Promise<void> {
         },
       );
     }
+  } catch {
+    // ignore
+  }
+}
 
 async function handleReports(node: Element): Promise<void> {
   if (!(node instanceof HTMLElement)) return;
   if (!settingsState.animations) return;
 
   await waitForElm(".report", true, 10);
+  try {
+    const items = document.querySelectorAll(".reports .item");
+    if (items.length) {
       animate(
-    ".reports .item",
+        items,
         { opacity: [0, 1], y: [10, 0] },
         {
           delay: stagger(0.05, { startDelay: 0.2 }),
@@ -426,6 +482,10 @@ async function handleReports(node: Element): Promise<void> {
         },
       );
     }
+  } catch {
+    // ignore
+  }
+}
 
 function CheckNoticeTextColour(notice: any) {
   eventManager.register(
@@ -448,7 +508,86 @@ function CheckNoticeTextColour(notice: any) {
   );
 }
 
+function watchForEngageLogin() {
+  if (!document.querySelector(".login")) {
+    return;
+  }
+  const observer = new MutationObserver(() => {
+    if (!document.querySelector(".login")) {
+      observer.disconnect();
+      location.reload();
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+}
+
+/** Wait until Engage shows either the login shell or the main app (`#content`), so we never call `LoadPageElements` while still on login (which would hang on `waitForElm("#content")`). */
+function waitForEngageLoginOrContent(): Promise<"login" | "app" | "timeout"> {
+  if (document.querySelector(".login")) {
+    return Promise.resolve("login");
+  }
+  if (document.getElementById("content")) {
+    return Promise.resolve("app");
+  }
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (mode: "login" | "app") => {
+      if (settled) return;
+      settled = true;
+      mo.disconnect();
+      window.clearTimeout(tid);
+      resolve(mode);
+    };
+    const check = () => {
+      if (document.querySelector(".login")) finish("login");
+      else if (document.getElementById("content")) finish("app");
+    };
+    const mo = new MutationObserver(check);
+    mo.observe(document.documentElement, { subtree: true, childList: true });
+    const tid = window.setTimeout(() => {
+      if (settled) return;
+      mo.disconnect();
+      settled = true;
+      if (document.querySelector(".login")) resolve("login");
+      else if (document.getElementById("content")) resolve("app");
+      else {
+        console.warn(
+          "[BetterSEQTA+] Engage: timed out waiting for .login or #content; unblocking load UI.",
+        );
+        resolve("timeout");
+      }
+    }, 120_000);
+  });
+}
+
 export function tryLoad() {
+  if (isSeqtaEngageExperience()) {
+    updateIframesWithDarkMode();
+    window.addEventListener("load", () => removeThemeTagsFromNotices(), { once: true });
+
+    const runEngageLoad = async () => {
+      const mode = await waitForEngageLoginOrContent();
+      if (mode === "login") {
+        finishLoad();
+        watchForEngageLogin();
+        return;
+      }
+      if (mode === "timeout") {
+        finishLoad();
+        void waitForElm("#content").then(() => void LoadPageElements());
+        return;
+      }
+      await LoadPageElements();
+    };
+
+    if (document.readyState === "complete") {
+      void runEngageLoad();
+    } else {
+      window.addEventListener("load", () => void runEngageLoad(), { once: true });
+    }
+    return;
+  }
+
   waitForElm(".login").then(() => {
     finishLoad();
   });
@@ -466,13 +605,10 @@ export function tryLoad() {
   });
 
   updateIframesWithDarkMode();
-  // Waits for page to call on load, run scripts
+  window.addEventListener(
-  document.addEventListener(
     "load",
-    function () {
+    () => removeThemeTagsFromNotices(),
-      removeThemeTagsFromNotices();
+    { once: true },
-    },
-    true,
   );
 }
 
@@ -489,6 +625,7 @@ function ReplaceMenuSVG(element: HTMLElement, svg: string) {
 const processedSymbol = Symbol("processed");
 
 export async function ObserveMenuItemPosition() {
+  if (isSeqtaEngageExperience()) return;
   await waitForElm("#menu > ul > li");
 
   eventManager.register(
@@ -612,6 +749,15 @@ export function init() {
   if (settingsState.onoff) {
     console.info("[BetterSEQTA+] Enabled");
     if (settingsState.DarkMode) document.documentElement.classList.add("dark");
+    if (settingsState.iconOnlySidebar) {
+      if (document.body) {
+        document.body.classList.add("icon-only-sidebar");
+      } else {
+        document.addEventListener("DOMContentLoaded", () => {
+          document.body?.classList.add("icon-only-sidebar");
+        });
+      }
+    }
 
     document.querySelector(".legacy-root")?.classList.add("hidden");
     ObserveMenuItemPosition();
@@ -619,12 +765,83 @@ export function init() {
     new StorageChangeHandler();
     new MessageHandler();
 
-    updateAllColors();
+    void updateAllColors();
+
+    window.addEventListener("hashchange", () => {
+      if (settingsState.adaptiveThemeColour) void updateAllColors();
+    });
     loading();
     InjectCustomIcons();
     HideMenuItems();
     tryLoad();
 
+    // Auto-focus WISP direct online submission editor when pane opens
+    eventManager.register(
+      "wispassessmentAdded",
+      {
+        customCheck: (el) =>
+          el.classList.contains("wispassessment") ||
+          el.querySelector(".wispassessment") !== null,
+      },
+      (element) => {
+        const wispassessment = element.classList.contains("wispassessment")
+          ? (element as Element)
+          : element.querySelector(".wispassessment");
+        if (!wispassessment) return;
+
+        const focusEditableBody = (iframe: HTMLIFrameElement) => {
+          try {
+            const doc = iframe.contentDocument;
+            const win = iframe.contentWindow;
+            if (doc?.body && win) {
+              const editable =
+                doc.body.querySelector(".cke_editable") || doc.body;
+              const el = editable as HTMLElement;
+              el.focus();
+              const range = doc.createRange();
+              range.selectNodeContents(el);
+              range.collapse(true);
+              const sel = win.getSelection();
+              if (sel) {
+                sel.removeAllRanges();
+                sel.addRange(range);
+              }
+              return true;
+            }
+          } catch (_) {}
+          return false;
+        };
+
+        const focusEditor = () => {
+          const iframe = wispassessment.querySelector(".cke_wysiwyg_frame");
+          if (iframe instanceof HTMLIFrameElement) {
+            if (focusEditableBody(iframe)) return;
+            iframe.focus();
+            return;
+          }
+          const ckeditor = (window as any).CKEDITOR;
+          if (ckeditor?.instances?.editor1) {
+            try {
+              ckeditor.instances.editor1.focus();
+            } catch (_) {}
+          }
+        };
+
+        const iframe = wispassessment.querySelector(".cke_wysiwyg_frame");
+        if (iframe instanceof HTMLIFrameElement) {
+          iframe.addEventListener(
+            "load",
+            () => focusEditableBody(iframe),
+            { once: true },
+          );
+        }
+
+        [1000, 1200, 1500].forEach((delay) =>
+          setTimeout(focusEditor, delay),
+        );
+      },
+    );
+
     setTimeout(() => {
       const legacyElement = document.querySelector(
         ".outside-container .bottom-container",

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -1,7 +1,10 @@
 import { addExtensionSettings } from "@/seqta/utils/Adders/AddExtensionSettings";
+import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
+import { loadEngageHomePage } from "@/seqta/utils/Loaders/LoadEngageHomePage";
 import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
 import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
 import { setupSettingsButton } from "@/seqta/utils/setupSettingsButton";
+import { waitForElm } from "@/seqta/utils/waitForElm";
 
 import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import { appendBackgroundToUI } from "./ImageBackgrounds";
@@ -13,6 +16,9 @@ import { delay } from "@/seqta/utils/delay";
 let cachedUserInfo: any = null;
 
 let LightDarkModeSnakeEggButton = 0;
+let sidebarAccessibilityObserver: MutationObserver | null = null;
+let sidebarTabOrderAnimationFrame: number | null = null;
+let sidebarAccessibilityListenersAttached = false;
 
 export async function getUserInfo() {
   if (cachedUserInfo) return cachedUserInfo;
@@ -39,6 +45,17 @@ export async function getUserInfo() {
 }
 
 export async function AddBetterSEQTAElements() {
+  if (isSeqtaEngageExperience()) {
+    await waitForElm("#content");
+    addExtensionSettings();
+    if (settingsState.onoff) {
+      await injectEngageHomeButton();
+    }
+    void setupEngageSettingsButton();
+    void addEngageUserInfo();
+    return;
+  }
+
   if (settingsState.onoff) {
     if (settingsState.DarkMode) {
       document.documentElement.classList.add("dark");
@@ -66,6 +83,7 @@ export async function AddBetterSEQTAElements() {
     setupEventListeners();
     await addDarkLightToggle();
     customizeMenuToggle();
+    setupSidebarAccessibility();
   }
 
   addExtensionSettings();
@@ -113,6 +131,10 @@ function updateUserInfo(info: {
   userName: string | null;
 }) {
   const titlebar = document.getElementsByClassName("titlebar")[0];
+  const metadata = [info.meta.code, info.meta.governmentID]
+    .filter((value): value is string => Boolean(value))
+    .join(" // ");
+  const displayName = info.userDesc || info.userName || "";
 
   titlebar.append(
     stringToHTML(/* html */ `
@@ -128,10 +150,10 @@ function updateUserInfo(info: {
       <div class="userInfo">
         <div class="userInfoText">
           <div style="display: flex; align-items: center;">
-            <p class="userInfohouse userInfoCode"></p>
+            <p class="userInfohouse userInfoCode" style="display: none;"></p>
-            <p class="userInfoName">${info.userDesc}</p>
+            ${displayName ? `<p class="userInfoName">${displayName}</p>` : ""}
           </div>
-          <p class="userInfoCode">${info.meta.code} // ${info.meta.governmentID}</p>
+          ${metadata ? `<p class="userInfoCode">${metadata}</p>` : ""}
         </div>
       </div>
     `).firstChild!,
@@ -171,9 +193,12 @@ async function updateStudentInfo(students: any) {
 
   const houseelement = document.getElementsByClassName(
     "userInfohouse",
-  )[0] as HTMLElement;
+  )[0] as HTMLElement | undefined;
+
+  if (!houseelement) return;
+
   const student = students[index] ?? {};
-  let text = "N/A";
+  let text = "";
 
   if (student.house) {
     text = `${student.year ?? ""}${student.house}`;
@@ -193,6 +218,7 @@ async function updateStudentInfo(students: any) {
   }
 
   houseelement.innerText = text;
+  houseelement.style.display = text ? "block" : "none";
 }
 
 function createNewsButton(fragment: DocumentFragment, menu: HTMLElement) {
@@ -213,22 +239,27 @@ function setupEventListeners() {
   const homebutton = document.getElementById("homebutton");
   const newsbutton = document.getElementById("newsbutton");
 
-  homebutton?.addEventListener("click", function () {
+  const activateMenuAction = (button: HTMLElement, action: () => void) => {
     if (
-      !homebutton.classList.contains("draggable") &&
+      button.classList.contains("draggable") ||
-      !homebutton.classList.contains("active")
+      button.classList.contains("active")
     ) {
-      loadHomePage();
+      return;
     }
+
+    action();
+  };
+
+  homebutton?.addEventListener("click", function () {
+    activateMenuAction(homebutton, () => {
+      loadHomePage();
+    });
   });
 
   newsbutton?.addEventListener("click", function () {
-    if (
+    activateMenuAction(newsbutton, () => {
-      !newsbutton.classList.contains("draggable") &&
-      !newsbutton.classList.contains("active")
-    ) {
       SendNewsPage();
-    }
+    });
   });
 
   menuCover?.addEventListener("click", function () {
@@ -240,8 +271,9 @@ function setupEventListeners() {
   });
 }
 
-async function createSettingsButton() {
+async function createSettingsButton(parent?: Element) {
-  document.getElementById("content")!.append(
+  const target = parent ?? document.getElementById("content")!;
+  target.append(
     stringToHTML(/* html */ `
       <button class="addedButton tooltip" id="AddedSettings">
         <svg width="24" height="24" viewBox="0 0 24 24">
@@ -253,17 +285,163 @@ async function createSettingsButton() {
   );
 }
 
+/** Engage mounts the sidebar inside batched React trees; EventManager-based waitForElm can miss `#menu`. Polling `waitForElm` matches the real DOM reliably. */
+async function waitForEngageMenuList(): Promise<HTMLElement | null> {
+  const poll = true as const;
+  const interval = 100;
+  const trySelectors: { selector: string; maxIterations: number }[] = [
+    { selector: "#menu > ul > li", maxIterations: 500 },
+    { selector: "#menu ul", maxIterations: 350 },
+    { selector: "#menu", maxIterations: 350 },
+  ];
+
+  for (const { selector, maxIterations } of trySelectors) {
+    try {
+      await waitForElm(selector, poll, interval, maxIterations);
+    } catch {
+      continue;
+    }
+
+    if (selector === "#menu > ul > li") {
+      const ul = document.querySelector("#menu > ul") as HTMLElement | null;
+      if (ul) return ul;
+    } else if (selector === "#menu ul") {
+      const ul = document.querySelector("#menu ul") as HTMLElement | null;
+      if (ul) return ul;
+    } else {
+      const menu = document.getElementById("menu");
+      const ul =
+        (menu?.querySelector("ul") as HTMLElement | null) ??
+        (menu?.firstElementChild as HTMLElement | null);
+      if (ul) return ul;
+    }
+  }
+
+  console.warn(
+    "[BetterSEQTA+] Engage: could not find a menu list to inject the home button",
+  );
+  return null;
+}
+
+async function injectEngageHomeButton() {
+  if (document.getElementById("homebutton")) return;
+
+  const menuList = await waitForEngageMenuList();
+  if (!menuList || document.getElementById("homebutton")) return;
+
+  const li = stringToHTML(
+    /* html */ `<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>`,
+  ).firstChild as HTMLElement;
+  menuList.insertBefore(li, menuList.firstElementChild);
+
+  document.getElementById("homebutton")?.addEventListener("click", () => {
+    const btn = document.getElementById("homebutton") as HTMLElement;
+    if (
+      btn.classList.contains("draggable") ||
+      btn.classList.contains("active")
+    ) {
+      return;
+    }
+    window.location.replace(`${location.origin}/#?page=/home`);
+    void loadEngageHomePage();
+  });
+}
+
+async function getEngageUserInfo() {
+  const response = await fetch(`${location.origin}/seqta/parent/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+    body: JSON.stringify({
+      mode: "normal",
+      query: null,
+      redirect_url: location.origin + "/",
+    }),
+  });
+  return (await response.json()).payload as {
+    userDesc: string | null;
+    userName: string | null;
+    userCode: string | null;
+    email: string | null;
+    type: string | null;
+  };
+}
+
+async function addEngageUserInfo() {
+  const content = await waitForElm("#content") as HTMLElement;
+
+  let info: Awaited<ReturnType<typeof getEngageUserInfo>>;
+  try {
+    info = await getEngageUserInfo();
+  } catch (error) {
+    console.error("[BetterSEQTA+] Failed to get Engage user info:", error);
+    return;
+  }
+
+  const displayName = info.userDesc || info.userName || "";
+  const subText = info.userCode || info.email || "";
+
+  const titlebar = document.createElement("div");
+  titlebar.classList.add("titlebar", "engage-titlebar");
+
+  titlebar.append(
+    stringToHTML(/* html */ `
+      <div class="userInfo">
+        <div class="userInfoText">
+          ${displayName ? `<p class="userInfoName">${displayName}</p>` : ""}
+          ${subText ? `<p class="userInfoCode">${subText}</p>` : ""}
+        </div>
+      </div>
+    `).firstChild!,
+  );
+
+  const iconNode = stringToHTML(/* html */ `
+    <div class="userInfosvgdiv tooltip" id="engage-logouttooltip-wrap">
+      <svg class="userInfosvg" viewBox="0 0 24 24"><path fill="var(--text-primary)" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path></svg>
+      <div class="tooltiptext topmenutooltip" id="engage-logouttooltip">
+        <button class="logout engage-logout">
+          <svg style="width:20px;height:20px;vertical-align:middle;" viewBox="0 0 24 24"><path fill="currentColor" d="M17 7L15.59 8.41L18.17 11H8V13H18.17L15.59 15.58L17 17L22 12M4 5H12V3H4C2.9 3 2 3.9 2 5V19C2 20.1 2.9 21 4 21H12V19H4V5Z"/></svg>
+        </button>
+      </div>
+    </div>
+  `).firstChild!;
+
+  titlebar.append(iconNode);
+  content.appendChild(titlebar);
+
+  titlebar.querySelector<HTMLElement>(".engage-logout")?.addEventListener("click", async () => {
+    await fetch(`${location.origin}/seqta/parent/logout`, { method: "POST" });
+    location.reload();
+  });
+}
+
+async function setupEngageSettingsButton() {
+  try {
+    const notificationsWrapper = await waitForElm(
+      "#content > div.connectedNotificationsWrapper > div",
+    );
+    const parent = notificationsWrapper.parentElement!;
+    await addDarkLightToggle(parent);
+    await createSettingsButton(parent);
+    setupSettingsButton();
+  } catch {
+    await addDarkLightToggle();
+    await createSettingsButton();
+    setupSettingsButton();
+  }
+}
+
 function GetLightDarkModeString() {
   return settingsState.DarkMode
     ? "Switch to light theme"
     : "Switch to dark theme";
 }
 
-async function addDarkLightToggle() {
+async function addDarkLightToggle(parent?: Element) {
   const SUN_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_80"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_80)"><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
   const MOON_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_263"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_263)"><g style="display: block;" transform="matrix(1.5,0,0,1.5,7,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(-1,0,0,-1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
 
-  document.getElementById("content")!.append(
+  const toggleTarget = parent ?? document.getElementById("content")!;
+  toggleTarget.append(
     stringToHTML(/* html */ `
       <button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton">
         <svg xmlns="http://www.w3.org/2000/svg">${settingsState.DarkMode ? SUN_ICON_SVG : MOON_ICON_SVG}</svg>
@@ -319,3 +497,216 @@ function customizeMenuToggle() {
     menuToggle.appendChild(line);
   }
 }
+
+function setupSidebarAccessibility() {
+  updateSidebarAccessibility();
+
+  const menu = document.getElementById("menu");
+  if (!menu) return;
+
+  sidebarAccessibilityObserver?.disconnect();
+  sidebarAccessibilityObserver = new MutationObserver(() => {
+    scheduleSidebarAccessibilityUpdate();
+  });
+  sidebarAccessibilityObserver.observe(menu, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["class", "style"],
+  });
+
+  if (!sidebarAccessibilityListenersAttached) {
+    document.addEventListener("keydown", handleSidebarKeyboardActivation);
+    sidebarAccessibilityListenersAttached = true;
+  }
+}
+
+function scheduleSidebarAccessibilityUpdate() {
+  if (sidebarTabOrderAnimationFrame !== null) {
+    cancelAnimationFrame(sidebarTabOrderAnimationFrame);
+  }
+
+  sidebarTabOrderAnimationFrame = requestAnimationFrame(() => {
+    sidebarTabOrderAnimationFrame = null;
+    updateSidebarAccessibility();
+  });
+}
+
+function handleSidebarKeyboardActivation(event: KeyboardEvent) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) return;
+
+  const menuItem = target.closest("#menu li, #menu section") as
+    | HTMLElement
+    | null;
+  if (!menuItem || target !== menuItem) return;
+
+  if (event.key === "Tab") {
+    const menu = document.getElementById("menu");
+    if (!menu) return;
+
+    const visibleList = getVisibleSidebarList(menu);
+    if (!visibleList) return;
+
+    const visibleEntries = getDirectSidebarEntries(visibleList);
+    if (visibleEntries.length === 0) return;
+
+    const boundaryEntry = event.shiftKey
+      ? visibleEntries[0]
+      : visibleEntries[visibleEntries.length - 1];
+
+    if (boundaryEntry !== menuItem) return;
+
+    const parentEntry = getSidebarListParentEntry(visibleList);
+    if (!parentEntry) return;
+
+    event.preventDefault();
+    parentEntry.classList.remove("active");
+    scheduleSidebarAccessibilityUpdate();
+    requestAnimationFrame(() => {
+      parentEntry.focus();
+    });
+    return;
+  }
+
+  if (event.key !== "Enter" && event.key !== " ") return;
+
+  event.preventDefault();
+
+  const childSubmenu = menuItem.querySelector(":scope > .sub > ul") as
+    | HTMLElement
+    | null;
+
+  menuItem.click();
+  scheduleSidebarAccessibilityUpdate();
+
+  if (childSubmenu) {
+    focusFirstSidebarSubmenuEntry(menuItem);
+  }
+}
+
+function updateSidebarAccessibility() {
+  const menu = document.getElementById("menu");
+  if (!menu) return;
+
+  const visibleEntries = new Set(getVisibleSidebarEntries(menu));
+  const menuEntries = menu.querySelectorAll("li.item, section.item, li, section");
+
+  for (const entry of menuEntries) {
+    if (!(entry instanceof HTMLElement)) continue;
+
+    const label = entry.querySelector(":scope > label") as HTMLLabelElement | null;
+    if (!label) continue;
+
+    const childSubmenu = entry.querySelector(":scope > .sub") as HTMLElement | null;
+    const isHidden =
+      entry.offsetParent === null ||
+      window.getComputedStyle(entry).display === "none" ||
+      window.getComputedStyle(label).display === "none" ||
+      !visibleEntries.has(entry);
+
+    if (isHidden) {
+      entry.tabIndex = -1;
+      label.tabIndex = -1;
+      entry.setAttribute("aria-hidden", "true");
+      label.setAttribute("aria-hidden", "true");
+      if (childSubmenu) {
+        childSubmenu.setAttribute("aria-hidden", "true");
+      }
+      continue;
+    }
+
+    entry.tabIndex = 0;
+    label.tabIndex = -1;
+    entry.removeAttribute("aria-hidden");
+    label.removeAttribute("aria-hidden");
+
+    if (!entry.hasAttribute("role")) {
+      entry.setAttribute("role", "button");
+    }
+
+    const accessibleLabel = label.textContent?.trim();
+    if (accessibleLabel) {
+      entry.setAttribute("aria-label", accessibleLabel);
+    }
+
+    if (childSubmenu) {
+      const isExpanded = entry.classList.contains("active");
+      entry.setAttribute("aria-expanded", String(isExpanded));
+      childSubmenu.setAttribute("aria-hidden", String(!isExpanded));
+    } else {
+      entry.removeAttribute("aria-expanded");
+    }
+  }
+}
+
+function getVisibleSidebarEntries(menu = document.getElementById("menu")) {
+  if (!menu) return [] as HTMLElement[];
+
+  const visibleList = getVisibleSidebarList(menu);
+  if (!visibleList) return [] as HTMLElement[];
+
+  return getDirectSidebarEntries(visibleList);
+}
+
+function getDirectSidebarEntries(list: HTMLElement) {
+  return Array.from(list.querySelectorAll(":scope > li, :scope > section")).filter(
+    (entry): entry is HTMLElement => entry instanceof HTMLElement,
+  );
+}
+
+function getVisibleSidebarList(menu: HTMLElement) {
+  let currentList = menu.querySelector(":scope > ul") as HTMLElement | null;
+
+  while (currentList) {
+    const activeSubmenuParent = currentList.querySelector(
+      ":scope > li.hasChildren.active, :scope > section.hasChildren.active",
+    ) as HTMLElement | null;
+
+    if (!activeSubmenuParent) {
+      return currentList;
+    }
+
+    const nextList = activeSubmenuParent.querySelector(
+      ":scope > .sub > ul",
+    ) as HTMLElement | null;
+
+    if (!nextList) {
+      return currentList;
+    }
+
+    currentList = nextList;
+  }
+
+  return null;
+}
+
+function getSidebarListParentEntry(list: HTMLElement) {
+  return list.closest(".sub")?.parentElement instanceof HTMLElement
+    ? (list.closest(".sub")!.parentElement as HTMLElement)
+    : null;
+}
+
+function focusFirstSidebarSubmenuEntry(parentEntry: HTMLElement) {
+  const menu = document.getElementById("menu");
+  if (!menu) return;
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      if (!parentEntry.classList.contains("active")) return;
+
+      const visibleList = getVisibleSidebarList(menu);
+      if (!visibleList || getSidebarListParentEntry(visibleList) !== parentEntry) {
+        return;
+      }
+
+      const firstEntry = getDirectSidebarEntries(visibleList).find(
+        (entry) =>
+          entry.offsetParent !== null &&
+          window.getComputedStyle(entry).display !== "none",
+      );
+
+      firstEntry?.focus({ preventScroll: true });
+    });
+  });
+}

src/seqta/ui/SettingsResizer.ts

@@ -18,12 +18,9 @@ export class SettingsResizer {
     if (!iframePopup) return;
 
     const viewportHeight = window.innerHeight;
-    const idealHeight = viewportHeight - 80 - 15; // -80px for the top of the popup
+    const rawIdeal = viewportHeight - 80 - 15; // room below top chrome
+    const idealHeight = Math.min(Math.max(rawIdeal, 280), 600);
 
-    if (idealHeight > 600) {
-      iframePopup.style.height = "600px";
-    } else {
     iframePopup.style.height = `${idealHeight}px`;
   }
 }
-}

src/seqta/ui/colors/Manager.ts

@@ -1,25 +1,90 @@
 import browser from "webextension-polyfill";
+import Color from "color";
 import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import { lightenAndPaleColor } from "./lightenAndPaleColor";
 import ColorLuminance from "./ColorLuminance";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { getAdaptiveColour } from "@/seqta/utils/adaptiveThemeColour";
+import { getCustomThemeAdaptiveCssVariables } from "@/seqta/ui/colors/customThemeAdaptiveBindings";
 
 import darkLogo from "@/resources/icons/betterseqta-light-full.png";
 import lightLogo from "@/resources/icons/betterseqta-dark-full.png";
 
+const ADAPTIVE_THEME_TRANSITION_MS = 400;
+
+let colorTransitionRafId: number | null = null;
+let lastInterpolatedHex: string | null = null;
+
 // Helper functions
 const setCSSVar = (varName: any, value: any) =>
   document.documentElement.style.setProperty(varName, value);
 const applyProperties = (props: any) =>
   Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
-export function updateAllColors() {
+function easeInOutCubic(t: number): number {
-  // Determine the color to use
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-  const selectedColor =
+}
-    settingsState.selectedColor !== ""
-      ? settingsState.selectedColor
-      : "#007bff";
 
+/** Best-effort parse of a single sRGB hex from a colour string (hex, rgb, or gradient). */
+function parseRepresentativeHex(s: string): string | null {
+  if (!s || !s.trim()) return null;
+  const trimmed = s.trim();
+  try {
+    return Color(trimmed).hex();
+  } catch {
+    // continue
+  }
+  if (trimmed.includes("gradient")) {
+    const regex =
+      /#[0-9a-fA-F]{6}|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)/gi;
+    const stops = trimmed.match(regex);
+    if (stops?.length) {
+      try {
+        return Color(stops[0]).hex();
+      } catch {
+        // continue
+      }
+    }
+  }
+  const hexMatch = trimmed.match(/#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})\b/);
+  if (hexMatch) {
+    try {
+      return Color(hexMatch[0]).hex();
+    } catch {
+      // continue
+    }
+  }
+  const rgbaMatch = trimmed.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (rgbaMatch) {
+    try {
+      return Color.rgb(
+        Number(rgbaMatch[1]),
+        Number(rgbaMatch[2]),
+        Number(rgbaMatch[3]),
+      ).hex();
+    } catch {
+      // continue
+    }
+  }
+  return null;
+}
+
+function getFromHex(): string | null {
+  const fromComputed = parseRepresentativeHex(
+    getComputedStyle(document.documentElement).getPropertyValue("--better-main").trim(),
+  );
+  if (fromComputed) return fromComputed;
+  return lastInterpolatedHex;
+}
+
+function cancelColorTransition() {
+  if (colorTransitionRafId !== null) {
+    cancelAnimationFrame(colorTransitionRafId);
+    colorTransitionRafId = null;
+  }
+}
+
+function applyColorsWith(selectedColor: string) {
   if (settingsState.transparencyEffects) {
     document.documentElement.classList.add("transparencyEffects");
   }
@@ -28,7 +93,7 @@ export function updateAllColors() {
   const commonProps = {
     "--better-sub": "#161616",
     "--better-alert-highlight": "#c61851",
-    "--better-main": settingsState.selectedColor,
+    "--better-main": selectedColor,
   };
 
   // Mode-based properties, applied if storedSetting is provided
@@ -63,6 +128,12 @@ export function updateAllColors() {
   // Apply all the properties
   applyProperties({ ...commonProps, ...modeProps, ...dynamicProps });
 
+  if (settingsState.selectedTheme) {
+    for (const name of getCustomThemeAdaptiveCssVariables()) {
+      setCSSVar(name, selectedColor);
+    }
+  }
+
   let alliframes = document.getElementsByTagName("iframe");
 
   for (let i = 0; i < alliframes.length; i++) {
@@ -79,3 +150,85 @@ export function updateAllColors() {
     }
   }
 }
+
+function toSoftGradient(hex: string): string {
+  const base = Color(hex);
+  const analogous = base.rotate(30).lighten(0.25).saturate(0.15);
+  const mid = base.mix(analogous, 0.5).hex();
+  return `linear-gradient(135deg, ${hex} 0%, ${mid} 50%, ${analogous.hex()} 100%)`;
+}
+
+export async function updateAllColors() {
+  let effectiveColor =
+    settingsState.selectedColor !== ""
+      ? settingsState.selectedColor
+      : "#007bff";
+
+  let adaptiveHex: string | null = null;
+
+  if (settingsState.adaptiveThemeColour) {
+    const adaptiveColor = await getAdaptiveColour();
+    if (adaptiveColor) {
+      adaptiveHex = adaptiveColor;
+      effectiveColor = settingsState.adaptiveThemeGradient
+        ? toSoftGradient(adaptiveColor)
+        : adaptiveColor;
+    }
+  }
+
+  const baseSelected =
+    settingsState.selectedColor !== "" ? settingsState.selectedColor : "#007bff";
+  const toHex =
+    adaptiveHex ?? parseRepresentativeHex(baseSelected);
+
+  const shouldAnimate =
+    settingsState.adaptiveThemeColour &&
+    (settingsState.adaptiveThemeColourTransition ?? true) &&
+    !!toHex;
+
+  const applyImmediate = () => {
+    cancelColorTransition();
+    applyColorsWith(effectiveColor);
+    if (toHex) lastInterpolatedHex = toHex;
+  };
+
+  if (!shouldAnimate) {
+    applyImmediate();
+    return;
+  }
+
+  const fromHex = getFromHex();
+
+  if (!fromHex || !toHex || fromHex === toHex) {
+    applyImmediate();
+    return;
+  }
+
+  const useSoftGradientOnFrames =
+    !!adaptiveHex && !!settingsState.adaptiveThemeGradient;
+
+  cancelColorTransition();
+
+  const start = performance.now();
+
+  const step = (now: number) => {
+    const elapsed = now - start;
+    const t = Math.min(1, elapsed / ADAPTIVE_THEME_TRANSITION_MS);
+    const eased = easeInOutCubic(t);
+    const interpolatedHex = Color(fromHex).mix(Color(toHex), eased).hex();
+    const display = useSoftGradientOnFrames
+      ? toSoftGradient(interpolatedHex)
+      : interpolatedHex;
+    applyColorsWith(display);
+
+    if (t < 1) {
+      colorTransitionRafId = requestAnimationFrame(step);
+    } else {
+      colorTransitionRafId = null;
+      applyColorsWith(effectiveColor);
+      lastInterpolatedHex = toHex;
+    }
+  };
+
+  colorTransitionRafId = requestAnimationFrame(step);
+}

src/seqta/ui/colors/customThemeAdaptiveBindings.ts

@@ -0,0 +1,40 @@
+/** Tracks which author-declared CSS variables mirror the effective accent; not persisted in settings storage. */
+
+const VALID_CUSTOM_PROP = /^--[a-zA-Z0-9_-]{1,120}$/;
+
+let boundNames: string[] = [];
+
+export function normalizeAdaptiveCssVariableNames(
+  names: string[] | undefined,
+): string[] {
+  if (!names?.length) return [];
+  const out: string[] = [];
+  const seen = new Set<string>();
+  for (const raw of names) {
+    const s = raw.trim();
+    if (!VALID_CUSTOM_PROP.test(s) || seen.has(s)) continue;
+    seen.add(s);
+    out.push(s);
+  }
+  return out;
+}
+
+export function setCustomThemeAdaptiveCssVariables(
+  names: string[] | undefined,
+): void {
+  for (const n of boundNames) {
+    document.documentElement.style.removeProperty(n);
+  }
+  boundNames = normalizeAdaptiveCssVariableNames(names);
+}
+
+export function getCustomThemeAdaptiveCssVariables(): string[] {
+  return boundNames;
+}
+
+export function clearCustomThemeAdaptiveCssVariables(): void {
+  for (const n of boundNames) {
+    document.documentElement.style.removeProperty(n);
+  }
+  boundNames = [];
+}

src/seqta/ui/dev/hideSensitiveContent.ts

@@ -1,6 +1,10 @@
 interface ElementConfig {
   selector: string;
   action: (element: Element) => void;
+  /** When true, element is not added to processedElements so the action runs every time (e.g. overwriting container content) */
+  alwaysRun?: boolean;
+  /** When true, never add to processedElements so the action can run again after DOM resets (e.g. home day column) */
+  neverMarkProcessed?: boolean;
 }
 
 interface ContentConfig {
@@ -10,6 +14,12 @@ interface ContentConfig {
 // Track processed elements to avoid re-randomizing
 const processedElements = new WeakSet<Element>();
 
+/** Marks mock-generated `.day` rows so granular rules do not re-randomize them */
+const MOCK_DAY_ATTR = "data-bsp-mock-day";
+
+/** Skip MutationObserver-driven reprocessing while we inject the home mock (avoids feedback loops) */
+let suppressMockMutations = false;
+
 function debounce(func: Function, wait: number): Function {
   let timeout: NodeJS.Timeout;
   return function executedFunction(...args: any[]) {
@@ -42,19 +52,19 @@ function getRandomDate(): Date {
 
 const contentConfig: ContentConfig = {
   lessonTitle: {
-    selector: ".day h2",
+    selector: `.day:not([${MOCK_DAY_ATTR}]) h2`,
     action: (element) => {
       element.textContent = getRandomElement(mockData.subjects);
     },
   },
   teacher: {
-    selector: ".day h3:first-of-type",
+    selector: `.day:not([${MOCK_DAY_ATTR}]) h3:first-of-type`,
     action: (element) => {
       element.textContent = getRandomElement(mockData.teachers);
     },
   },
   classroom: {
-    selector: ".day h3:last-of-type",
+    selector: `.day:not([${MOCK_DAY_ATTR}]) h3:last-of-type`,
     action: (element) => {
       element.textContent = getRandomElement(mockData.classrooms);
     },
@@ -77,6 +87,18 @@ const contentConfig: ContentConfig = {
       element.textContent = getRandomElement(mockData.assessmentTitles);
     },
   },
+  assessmentTitleInTooltip: {
+    selector: ".assessmenttooltip .tooltiptext p",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.assessmentTitles);
+    },
+  },
+  assessmentTitleInDetail: {
+    selector: "[class*='AssessmentItem__title___'], .assessment-title",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.assessmentTitles);
+    },
+  },
   assessmentSubject: {
     selector: ".upcoming-assessment .upcoming-details h5",
     action: (element) => {
@@ -92,7 +114,8 @@ const contentConfig: ContentConfig = {
   noticeContent: {
     selector: ".notice .contents",
     action: (element) => {
-      element.textContent = "Content has been redacted for privacy.";
+      element.textContent =
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
     },
   },
   upcomingCheckboxes: {
@@ -135,7 +158,7 @@ const contentConfig: ContentConfig = {
     selector:
       '[class*="MessageList__recipients___"] [class*="MessageList__value___"]',
     action: (element) => {
-      element.textContent = "Recipient(s) Redacted";
+      element.textContent = getRandomElement(mockData.messages.recipients);
     },
   },
 
@@ -175,16 +198,15 @@ const contentConfig: ContentConfig = {
   documentNames: {
     selector: ".document td.title",
     action: (element) => {
-      element.textContent = "Document Name Redacted";
+      element.textContent = getRandomElement(mockData.documentTitles);
     },
   },
   forumTopics: {
     selector: "#menu .sub ul li:not([data-colour]):not(.hasChildren) label",
     action: (element) => {
-      // Only redact if not in assessments section
       const assessmentsSection = element.closest('[data-key="assessments"]');
       if (!assessmentsSection) {
-        element.textContent = "Forum Topic Redacted";
+        element.textContent = getRandomElement(mockData.forumTopics);
       }
     },
   },
@@ -210,25 +232,27 @@ const contentConfig: ContentConfig = {
   courseNames: {
     selector: "#menu .sub ul li[data-colour] label",
     action: (element) => {
-      element.textContent = "Course Name Redacted";
+      element.textContent = getRandomElement(mockData.subjects);
     },
   },
   yearGroups: {
     selector: "#menu .sub > ul > li > label",
     action: (element) => {
-      element.textContent = "Year Group Redacted";
+      const yearGroup = Math.floor(Math.random() * 5) + 8;
+      element.textContent = `Year ${yearGroup}`;
     },
   },
   newsArticleTitle: {
     selector: ".ArticleText a",
     action: (element) => {
-      element.textContent = "News Article Title Redacted";
+      element.textContent = getRandomElement(mockData.notices);
     },
   },
   newsArticleContent: {
     selector: ".ArticleText p",
     action: (element) => {
-      element.textContent = "News Article Content Redacted";
+      element.textContent =
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
     },
   },
   userHouse: {
@@ -237,6 +261,60 @@ const contentConfig: ContentConfig = {
       element.textContent = "House";
     },
   },
+
+  // Timetable page: replace class names, teachers, rooms with fake data
+  timetableEntryTitle: {
+    selector: ".timetablepage .entry .title",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.subjects);
+    },
+  },
+  timetableEntryTeacher: {
+    selector: ".timetablepage .entry .teacher, .timetablepage .quickbar .meta .teacher",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.teachers);
+    },
+  },
+  timetableEntryRoom: {
+    selector: ".timetablepage .entry .room, .timetablepage .quickbar .meta .room",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.classrooms);
+    },
+  },
+  quickbarTitle: {
+    selector: ".timetablepage .quickbar .title",
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.subjects);
+    },
+  },
+
+  // Home page: replace entire day with mock schedule (care + 7 lessons 8:55–3:15)
+  homeDayContainer: {
+    selector: "#day-container",
+    neverMarkProcessed: true,
+    action: (element) => {
+      const container = element as HTMLElement;
+      if (!container.closest(".timetable-container")) return; // only on home
+      if (container.classList.contains("loading") || container.innerHTML.trim() === "") {
+        delete container.dataset.bspMockSchedule;
+        return;
+      }
+      if (
+        container.dataset.bspMockSchedule === "1" &&
+        container.querySelector(`[${MOCK_DAY_ATTR}]`)
+      ) {
+        return;
+      }
+      suppressMockMutations = true;
+      const schedule = getMockDaySchedule();
+      container.innerHTML = schedule;
+      container.classList.remove("loading");
+      container.dataset.bspMockSchedule = "1";
+      requestAnimationFrame(() => {
+        suppressMockMutations = false;
+      });
+    },
+  },
 };
 
 const mockData = {
@@ -367,7 +445,26 @@ const mockData = {
     "Field Trip",
     "Cultural Festival",
   ],
+  documentTitles: [
+    "Course Outline",
+    "Assignment Brief",
+    "Study Guide",
+    "Reference Material",
+    "Worksheet",
+    "Reading List",
+    "Project Guidelines",
+  ],
+  forumTopics: [
+    "General Discussion",
+    "Homework Help",
+    "Resource Share",
+    "Class Updates",
+    "Study Group",
+    "Q&A",
+    "Announcements",
+  ],
   messages: {
+    recipients: ["Students", "Class", "Year Group", "Parents", "Guardians"],
     subjects: [
       "Mid-year Exams",
       "Science project due soon",
@@ -573,6 +670,35 @@ Register through the PE department or see your house captains for more informati
   ]
 };
 
+/** Mock day schedule for home timetable: care 8:30–8:55, then 7 lessons 8:55–3:15 (45m each), 20m recess, lunch. */
+function getMockDaySchedule(): string {
+  const blocks: { title: string; teacher: string; room: string; from: string; until: string }[] = [
+    { title: "Care Group", teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "8:30am", until: "8:55am" },
+    { title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "8:55am", until: "9:40am" },
+    { title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "9:40am", until: "10:25am" },
+    { title: "Recess", teacher: "—", room: "—", from: "10:25am", until: "10:45am" },
+    { title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "10:45am", until: "11:30am" },
+    { title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "11:30am", until: "12:15pm" },
+    { title: "Lunch", teacher: "—", room: "—", from: "12:15pm", until: "1:00pm" },
+    { title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "1:00pm", until: "1:45pm" },
+    { title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "1:45pm", until: "2:30pm" },
+    { title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "2:30pm", until: "3:15pm" },
+  ];
+  const colours = ["#8e8e8e", "#4FBBFE", "#59F675", "#fa915d", "#9c27b0", "#2196f3", "#4caf50", "#ff9800", "#e91e63", "#673ab7"];
+  return blocks
+    .map(
+      (b, i) =>
+        `<div class="day" ${MOCK_DAY_ATTR} style="--item-colour: ${colours[i % colours.length]};">
+          <h2>${b.title}</h2>
+          <h3>${b.teacher}</h3>
+          <h3>${b.room}</h3>
+          <h4>${b.from} – ${b.until}</h4>
+          <h5> </h5>
+        </div>`,
+    )
+    .join("");
+}
+
 export function getMockNotices() {
   return {
     payload: mockData.noticesData
@@ -617,12 +743,15 @@ export function getMockAssessmentsData() {
     { submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * -3) - 1 }, // Recently overdue
   ];
 
-  const assessments = Array.from({ length: 12 }, (_, i) => {
+  const currentYear = new Date().getFullYear();
+  const assessments = Array.from({ length: 14 }, (_, i) => {
     const subj = subjects[i % subjects.length];
     const template = statusTemplates[i % statusTemplates.length];
     const due = new Date();
     due.setDate(due.getDate() + template.dayOffset());
+    if (i >= 10) due.setFullYear(currentYear - 1);
     
+    const types = ["Assignment", "Test", "Exam", "Project", "Presentation", "Report"];
     const assessment: any = {
       id: i + 1,
       title: mockData.assessmentTitles[i % mockData.assessmentTitles.length],
@@ -631,6 +760,7 @@ export function getMockAssessmentsData() {
       metaclassID: subj.metaclass,
       due: due.toISOString(),
       submitted: template.submitted,
+      type: types[i % types.length],
     };
 
     if (template.score && typeof template.score === 'function') {
@@ -650,20 +780,21 @@ export function getMockAssessmentsData() {
 const debouncedProcessElements = debounce(processNewElements, 1);
 
 function processNewElements() {
-  Object.entries(contentConfig).forEach(([_, { selector, action }]) => {
+  Object.entries(contentConfig).forEach(([_, config]) => {
+    const { selector, action, alwaysRun, neverMarkProcessed } = config;
     const elements = document.querySelectorAll(selector);
     elements.forEach((element: Element) => {
-      // Only process elements that haven't been processed before
+      if (alwaysRun || neverMarkProcessed || !processedElements.has(element)) {
-      if (!processedElements.has(element)) {
         action(element);
+        if (!alwaysRun && !neverMarkProcessed) {
           processedElements.add(element);
         }
+      }
     });
   });
 }
 
 let observer: MutationObserver | null = null;
-let intervalId: NodeJS.Timeout | null = null;
 
 export default function hideSensitiveContent() {
   // Initial processing of existing elements
@@ -672,6 +803,8 @@ export default function hideSensitiveContent() {
   // Set up MutationObserver if not already created
   if (!observer) {
     observer = new MutationObserver((mutations) => {
+      if (suppressMockMutations) return;
+
       let shouldProcess = false;
       
       mutations.forEach((mutation) => {
@@ -693,9 +826,25 @@ export default function hideSensitiveContent() {
             });
           }
           
-          // Also trigger on large DOM replacements (like page navigation)
+          // Large DOM replacements (e.g. page navigation). Skip only when #day-container gains many *mock* rows (our inject).
           if (mutation.addedNodes.length > 5 || mutation.removedNodes.length > 5) {
+            const target = mutation.target as Element;
+            if (target.id === "day-container") {
+              for (const node of mutation.addedNodes) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                  const el = node as Element;
+                  if (
+                    el.classList?.contains("day") &&
+                    !el.hasAttribute(MOCK_DAY_ATTR)
+                  ) {
                     shouldProcess = true;
+                    break;
+                  }
+                }
+              }
+            } else {
+              shouldProcess = true;
+            }
           }
         }
         
@@ -724,13 +873,6 @@ export default function hideSensitiveContent() {
       attributeFilter: ['class', 'id'] // Watch for class/id changes that might affect our selectors
     });
   }
-  
-  // Fallback: periodic check for new elements (especially useful for SPA navigation)
-  if (!intervalId) {
-    intervalId = setInterval(() => {
-      debouncedProcessElements();
-    }, 500); // Check every 500ms as a fallback
-  }
 }
 
 // Function to stop observing (useful for cleanup)
@@ -739,8 +881,4 @@ export function stopHidingSensitiveContent() {
     observer.disconnect();
     observer = null;
   }
-  if (intervalId) {
-    clearInterval(intervalId);
-    intervalId = null;
-  }
 }

src/seqta/utils/Adders/AddExtensionSettings.ts

@@ -9,21 +9,8 @@ import Settings from "@/interface/pages/settings.svelte";
 
 let isSettingsRendered = false;
 
-export function addExtensionSettings() {
+function extensionOutsideClickHandler(extensionPopup: HTMLElement) {
-  const extensionPopup = document.createElement("div");
+  return (event: MouseEvent) => {
-  extensionPopup.classList.add("outside-container", "hide");
-  extensionPopup.id = "ExtensionPopup";
-
-  const extensionContainer = document.querySelector(
-    "#container",
-  ) as HTMLDivElement;
-  if (extensionContainer) extensionContainer.appendChild(extensionPopup);
-
-  const container = document.getElementById("container");
-
-  new SettingsResizer();
-
-  container!.onclick = (event) => {
     if (!SettingsClicked) return;
 
     if (!(event.target as HTMLElement).closest("#AddedSettings")) {
@@ -33,6 +20,24 @@ export function addExtensionSettings() {
   };
 }
 
+export function addExtensionSettings() {
+  if (document.getElementById("ExtensionPopup")) return;
+
+  const extensionPopup = document.createElement("div");
+  extensionPopup.classList.add("outside-container", "hide");
+  extensionPopup.id = "ExtensionPopup";
+
+  const extensionContainer =
+    document.querySelector("#container") ?? document.getElementById("container");
+  const mountParent = extensionContainer ?? document.body;
+  mountParent.appendChild(extensionPopup);
+
+  new SettingsResizer();
+
+  const handler = extensionOutsideClickHandler(extensionPopup);
+  (extensionContainer ?? document.body).addEventListener("click", handler, false);
+}
+
 export function renderSettingsIfNeeded() {
   if (isSettingsRendered) return;
   

src/seqta/utils/CloudAuth.ts

@@ -0,0 +1,219 @@
+import browser from "webextension-polyfill";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+
+const REDIRECT_URI = "https://accounts.betterseqta.org/auth/bsplus/callback";
+
+const STORAGE_KEYS = {
+  clientId: "bsplus_client_id",
+  accessToken: "bsplus_token",
+  refreshToken: "bsplus_refresh_token",
+  user: "bsplus_user",
+} as const;
+
+export type CloudUser = {
+  id: string;
+  email?: string;
+  username?: string;
+  displayName?: string;
+  pfpUrl?: string;
+  admin_level?: number;
+};
+
+export type CloudAuthState = {
+  isLoggedIn: boolean;
+  user: CloudUser | null;
+};
+
+/** Callback invoked when auth state changes */
+type Listener = { (state: CloudAuthState): void };
+
+class CloudAuthService {
+  private static instance: CloudAuthService;
+  private listeners = new Set<Listener>();
+  private _state: CloudAuthState = { isLoggedIn: false, user: null };
+
+  private constructor() {
+    void this.loadFromStorage();
+    browser.storage.onChanged.addListener((changes, areaName) => {
+      if (
+        areaName === "local" &&
+        (changes[STORAGE_KEYS.accessToken] ||
+          changes[STORAGE_KEYS.user] ||
+          changes[STORAGE_KEYS.clientId])
+      ) {
+        void this.loadFromStorage();
+      }
+    });
+  }
+
+  public static getInstance(): CloudAuthService {
+    if (!CloudAuthService.instance) {
+      CloudAuthService.instance = new CloudAuthService();
+    }
+    return CloudAuthService.instance;
+  }
+
+  public get state(): CloudAuthState {
+    return this._state;
+  }
+
+  public subscribe(listener: Listener): () => void {
+    this.listeners.add(listener);
+    listener(this._state);
+    return () => this.listeners.delete(listener);
+  }
+
+  private async loadFromStorage(): Promise<void> {
+    const result = await browser.storage.local.get([
+      STORAGE_KEYS.accessToken,
+      STORAGE_KEYS.user,
+    ]);
+    const token = result[STORAGE_KEYS.accessToken] as string | undefined;
+    const user = result[STORAGE_KEYS.user] as CloudUser | undefined;
+    this._state = {
+      isLoggedIn: !!token,
+      user: user ?? null,
+    };
+    this.notify();
+  }
+
+  private notify(): void {
+    for (const listener of this.listeners) {
+      listener(this._state);
+    }
+  }
+
+  /** Pull cloud settings backup after a fresh sign-in (matches manual “Download from cloud”). */
+  private triggerCloudSettingsDownloadAfterLogin(accessToken: string): void {
+    void browser.runtime
+      .sendMessage({
+        type: "cloudSettingsDownload",
+        token: accessToken,
+      })
+      .then((res: unknown) => {
+        const r = res as { success?: boolean; notFound?: boolean; error?: string } | undefined;
+        if (r?.success || r?.notFound) return;
+        if (r?.error) {
+          console.warn("[BetterSEQTA+] Cloud settings download after login:", r.error);
+        }
+      })
+      .catch((err) => {
+        console.warn("[BetterSEQTA+] Cloud settings download after login failed:", err);
+      });
+  }
+
+  public async getStoredToken(): Promise<string | null> {
+    const result = await browser.storage.local.get(STORAGE_KEYS.accessToken);
+    return (result[STORAGE_KEYS.accessToken] as string) ?? null;
+  }
+
+  private async getClientId(): Promise<string> {
+    let clientId = (settingsState as any)[STORAGE_KEYS.clientId] as string | undefined;
+    if (!clientId) {
+      const stored = await browser.storage.local.get(STORAGE_KEYS.clientId);
+      clientId = stored[STORAGE_KEYS.clientId] as string | undefined;
+    }
+    if (!clientId) {
+      const reserveResult = (await browser.runtime.sendMessage({
+        type: "cloudReserveClient",
+        redirect_uri: REDIRECT_URI,
+      })) as { client_id?: string; error?: string };
+      if (!reserveResult?.client_id) {
+        throw new Error(reserveResult?.error ?? "Failed to reserve client");
+      }
+      clientId = reserveResult.client_id;
+      (settingsState as any).setKey(STORAGE_KEYS.clientId, clientId);
+    }
+    return clientId;
+  }
+
+  public async login(
+    login: string,
+    password: string
+  ): Promise<{ success: boolean; error?: string }> {
+    try {
+      const clientId = await this.getClientId();
+      const result = (await browser.runtime.sendMessage({
+        type: "cloudLogin",
+        client_id: clientId,
+        redirect_uri: REDIRECT_URI,
+        login: login.trim(),
+        password,
+      })) as {
+        access_token?: string;
+        refresh_token?: string;
+        user?: CloudUser;
+        error?: string;
+      };
+      if (result?.access_token && result?.refresh_token) {
+        (settingsState as any).setKey(STORAGE_KEYS.accessToken, result.access_token);
+        (settingsState as any).setKey(STORAGE_KEYS.refreshToken, result.refresh_token);
+        (settingsState as any).setKey(STORAGE_KEYS.user, result.user ?? null);
+        this._state = {
+          isLoggedIn: true,
+          user: result.user ?? null,
+        };
+        this.notify();
+        this.triggerCloudSettingsDownloadAfterLogin(result.access_token);
+        return { success: true };
+      }
+      return {
+        success: false,
+        error: result?.error ?? "Login failed",
+      };
+    } catch (err) {
+      return {
+        success: false,
+        error: err instanceof Error ? err.message : "Login failed",
+      };
+    }
+  }
+
+  public async logout(): Promise<void> {
+    await browser.storage.local.remove([
+      STORAGE_KEYS.accessToken,
+      STORAGE_KEYS.refreshToken,
+      STORAGE_KEYS.user,
+      "cloudAccessToken",
+      "cloudUsername",
+    ]);
+    this._state = { isLoggedIn: false, user: null };
+    this.notify();
+  }
+
+  public async refreshToken(): Promise<boolean> {
+    const result = await browser.storage.local.get([
+      STORAGE_KEYS.refreshToken,
+      STORAGE_KEYS.clientId,
+    ]);
+    const refreshToken = result[STORAGE_KEYS.refreshToken] as string | undefined;
+    const clientId = result[STORAGE_KEYS.clientId] as string | undefined;
+    if (!refreshToken || !clientId) return false;
+
+    const refreshResult = (await browser.runtime.sendMessage({
+      type: "cloudRefresh",
+      refresh_token: refreshToken,
+      client_id: clientId,
+    })) as {
+      access_token?: string;
+      refresh_token?: string;
+      user?: CloudUser;
+      error?: string;
+    };
+
+    if (refreshResult?.access_token && refreshResult?.refresh_token) {
+      (settingsState as any).setKey(STORAGE_KEYS.accessToken, refreshResult.access_token);
+      (settingsState as any).setKey(STORAGE_KEYS.refreshToken, refreshResult.refresh_token);
+      (settingsState as any).setKey(STORAGE_KEYS.user, refreshResult.user ?? null);
+      this._state = {
+        isLoggedIn: true,
+        user: refreshResult.user ?? null,
+      };
+      this.notify();
+      return true;
+    }
+    return false;
+  }
+}
+
+export const cloudAuth = CloudAuthService.getInstance();

src/seqta/utils/Loaders/LoadEngageHomePage.ts

@@ -0,0 +1,835 @@
+import { animate } from "motion";
+import browser from "webextension-polyfill";
+import LogoLight from "@/resources/icons/betterseqta-light-icon.png";
+import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
+import { convertTo12HourFormat } from "@/seqta/utils/convertTo12HourFormat";
+import debounce from "@/seqta/utils/debounce";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import stringToHTML from "@/seqta/utils/stringToHTML";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import { getMockNotices } from "@/seqta/ui/dev/hideSensitiveContent";
+import {
+  type EngageParentChild,
+  type EngageParentTimetableItem,
+  fetchEngageParentChildren,
+  fetchEngageParentTimetableWeek,
+  isDateInCachedWeek,
+  toISODate,
+  weekRangeContaining,
+} from "@/seqta/utils/Loaders/engageParentTimetable";
+
+export function updateEngageHomeMenuActive(isHome: boolean): void {
+  const home = document.getElementById("homebutton");
+  if (!home) return;
+  if (isHome) {
+    for (const el of document.querySelectorAll("#menu li.active")) {
+      if (el !== home) el.classList.remove("active");
+    }
+    home.classList.add("active");
+  } else {
+    home.classList.remove("active");
+  }
+}
+
+const STORAGE_KEY_STUDENT = () =>
+  `bsplus.engageTimetable.student.${location.origin}`;
+
+let engageViewDate = new Date();
+let engageWeekFrom = "";
+let engageWeekUntil = "";
+let engageWeekItems: EngageParentTimetableItem[] = [];
+let engageSelectedStudentId: string | null = null;
+let engageListenersCleanup: (() => void) | null = null;
+
+function formatDateString(date: Date): string {
+  return `${date.toLocaleString("en-us", { weekday: "short" })} ${date.toLocaleDateString("en-au")}`;
+}
+
+function setEngageTimetableSubtitle(): void {
+  const el = document.getElementById("engage-home-lesson-subtitle");
+  if (!el) return;
+
+  const today = new Date();
+  const isSameMonth =
+    today.getFullYear() === engageViewDate.getFullYear() &&
+    today.getMonth() === engageViewDate.getMonth();
+
+  if (isSameMonth) {
+    const dayDiff = today.getDate() - engageViewDate.getDate();
+    switch (dayDiff) {
+      case 0:
+        el.textContent = "Today's Lessons";
+        break;
+      case 1:
+        el.textContent = "Yesterday's Lessons";
+        break;
+      case -1:
+        el.textContent = "Tomorrow's Lessons";
+        break;
+      default:
+        el.textContent = formatDateString(engageViewDate);
+    }
+  } else {
+    el.textContent = formatDateString(engageViewDate);
+  }
+}
+
+function makeEngageLessonDiv(
+  lesson: EngageParentTimetableItem,
+  index: number,
+): HTMLElement {
+  let from = lesson.from?.substring(0, 5) ?? "";
+  let until = lesson.until?.substring(0, 5) ?? "";
+  if (settingsState.timeFormat === "12") {
+    from = convertTo12HourFormat(from);
+    until = convertTo12HourFormat(until);
+  }
+
+  const title =
+    lesson.type === "class"
+      ? lesson.description
+      : lesson.type || "Lesson";
+
+  const div = document.createElement("div");
+  div.className = "day";
+  div.id = `engage-lesson-${lesson.code}-${index}`;
+  div.style.cssText = "--item-colour: #8e8e8e;";
+
+  const h2 = document.createElement("h2");
+  h2.textContent = title;
+
+  const hStaff = document.createElement("h3");
+  hStaff.textContent = lesson.staff?.trim() || "—";
+
+  const hRoom = document.createElement("h3");
+  hRoom.textContent = lesson.room?.trim() || "—";
+
+  const hTime = document.createElement("h4");
+  hTime.textContent = `${from} – ${until}`;
+
+  const hPeriod = document.createElement("h5");
+  hPeriod.textContent = lesson.period?.trim() || "";
+
+  div.append(h2, hStaff, hRoom, hTime, hPeriod);
+  return div;
+}
+
+function renderEngageDayLessons(): void {
+  const dayContainer = document.getElementById("engage-day-container");
+  if (!dayContainer) return;
+
+  const dayStr = toISODate(engageViewDate);
+  const lessons = engageWeekItems
+    .filter((item) => item.date === dayStr)
+    .sort((a, b) => a.from.localeCompare(b.from));
+
+  dayContainer.innerHTML = "";
+
+  if (lessons.length === 0) {
+    dayContainer.innerHTML = `
+      <div class="day-empty">
+        <img src="${browser.runtime.getURL(LogoLight)}" alt="" />
+        <p>No lessons for this day.</p>
+      </div>`;
+  } else {
+    lessons.forEach((lesson, i) => {
+      dayContainer.appendChild(makeEngageLessonDiv(lesson, i));
+    });
+  }
+
+  dayContainer.classList.remove("loading");
+  setEngageTimetableSubtitle();
+}
+
+async function fetchWeekAndRender(): Promise<void> {
+  const dayContainer = document.getElementById("engage-day-container");
+  if (!dayContainer || !engageSelectedStudentId) return;
+
+  dayContainer.classList.add("loading");
+  dayContainer.innerHTML = "";
+
+  const { from, until } = weekRangeContaining(engageViewDate);
+  try {
+    engageWeekItems = await fetchEngageParentTimetableWeek(
+      from,
+      until,
+      engageSelectedStudentId,
+    );
+    engageWeekFrom = from;
+    engageWeekUntil = until;
+  } catch (e) {
+    console.error("[BetterSEQTA+] Engage parent timetable failed:", e);
+    engageWeekItems = [];
+    engageWeekFrom = from;
+    engageWeekUntil = until;
+  }
+
+  renderEngageDayLessons();
+}
+
+function shiftEngageDay(delta: number): void {
+  const next = new Date(engageViewDate);
+  next.setDate(next.getDate() + delta);
+  engageViewDate = next;
+
+  const dayContainer = document.getElementById("engage-day-container");
+  dayContainer?.classList.add("loading");
+  dayContainer && (dayContainer.innerHTML = "");
+
+  if (
+    engageWeekFrom &&
+    engageWeekUntil &&
+    isDateInCachedWeek(engageViewDate, engageWeekFrom, engageWeekUntil)
+  ) {
+    renderEngageDayLessons();
+  } else {
+    void fetchWeekAndRender();
+  }
+}
+
+function populateChildSelector(
+  select: HTMLSelectElement,
+  children: EngageParentChild[],
+): void {
+  select.innerHTML = "";
+  for (const c of children) {
+    const opt = document.createElement("option");
+    opt.value = c.id;
+    opt.textContent = c.name || `Student ${c.id}`;
+    select.appendChild(opt);
+  }
+
+  const stored = localStorage.getItem(STORAGE_KEY_STUDENT());
+  const validStored = stored && children.some((c) => c.id === stored);
+  engageSelectedStudentId = validStored
+    ? stored!
+    : children[0]?.id ?? null;
+
+  if (engageSelectedStudentId) {
+    select.value = engageSelectedStudentId;
+    localStorage.setItem(STORAGE_KEY_STUDENT(), engageSelectedStudentId);
+  }
+}
+
+function bindEngageTimetableUi(): void {
+  engageListenersCleanup?.();
+  const cleanups: Array<() => void> = [];
+
+  const back = document.getElementById("engage-home-timetable-back");
+  const forward = document.getElementById("engage-home-timetable-forward");
+  const select = document.getElementById(
+    "engage-child-selector",
+  ) as HTMLSelectElement | null;
+
+  const onBack = () => shiftEngageDay(-1);
+  const onForward = () => shiftEngageDay(1);
+
+  back?.addEventListener("click", onBack);
+  forward?.addEventListener("click", onForward);
+  cleanups.push(
+    () => back?.removeEventListener("click", onBack),
+    () => forward?.removeEventListener("click", onForward),
+  );
+
+  const onSelectChange = () => {
+    if (!select) return;
+    engageSelectedStudentId = select.value;
+    localStorage.setItem(STORAGE_KEY_STUDENT(), engageSelectedStudentId);
+    void fetchWeekAndRender();
+  };
+  select?.addEventListener("change", onSelectChange);
+  cleanups.push(() =>
+    select?.removeEventListener("change", onSelectChange),
+  );
+
+  engageListenersCleanup = () => {
+    cleanups.forEach((fn) => fn());
+    engageListenersCleanup = null;
+  };
+}
+
+/* ——— Notices (duplicated from Learn `LoadHomePage`; fetch uses `/seqta/parent/load/notices`.) ——— */
+
+const ENGAGE_NOTICE_CONTAINER_ID = "engage-notice-container";
+const ENGAGE_NOTICES_DATE_ID = "engage-notices-date";
+
+function processEngageNoticeColor(colour: unknown): string | undefined {
+  if (typeof colour !== "string") return undefined;
+  const rgb = GetThresholdOfColor(colour);
+  if (rgb < 100 && settingsState.DarkMode) {
+    return undefined;
+  }
+  return colour;
+}
+
+function processEngageNotices(response: any, labelArray: string[]): void {
+  const noticeContainer = document.getElementById(ENGAGE_NOTICE_CONTAINER_ID);
+  if (!noticeContainer) return;
+
+  noticeContainer.innerHTML = "";
+
+  const notices = response?.payload;
+  if (!Array.isArray(notices)) {
+    const emptyState = document.createElement("div");
+    emptyState.classList.add("day-empty");
+    const img = document.createElement("img");
+    img.src = browser.runtime.getURL(LogoLight);
+    const text = document.createElement("p");
+    text.innerText = "No notices for today.";
+    emptyState.append(img, text);
+    noticeContainer.append(emptyState);
+    return;
+  }
+
+  if (!notices.length) {
+    const emptyState = document.createElement("div");
+    emptyState.classList.add("day-empty");
+    const img = document.createElement("img");
+    img.src = browser.runtime.getURL(LogoLight);
+    const text = document.createElement("p");
+    text.innerText = "No notices for today.";
+    emptyState.append(img, text);
+    noticeContainer.append(emptyState);
+    return;
+  }
+
+  const fragment = document.createDocumentFragment();
+
+  notices.forEach((notice: any) => {
+    const shouldInclude =
+      settingsState.mockNotices ||
+      labelArray.length === 0 ||
+      labelArray.includes(JSON.stringify(notice.label));
+
+    if (shouldInclude) {
+      const colour = processEngageNoticeColor(notice.colour);
+      const noticeElement = createEngageNoticeElement(notice, colour);
+      fragment.appendChild(noticeElement);
+    }
+  });
+
+  noticeContainer.appendChild(fragment);
+}
+
+function createEngageNoticeElement(
+  notice: any,
+  colour: string | undefined,
+): Node {
+  const textPreview =
+    notice.contents
+      .replace(/<[^>]*>/g, "")
+      .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
+      .replace(/\s+/g, " ")
+      .trim()
+      .substring(0, 150) + (notice.contents.length > 150 ? "..." : "");
+
+  const noticeId = `notice-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+  const htmlContent = `
+    <div class="notice-unified-content notice-card-state" data-notice-id="${noticeId}" style="--colour: ${colour || "#8e8e8e"}; position: relative; background: var(--background-primary); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);">
+      <div class="notice-header">
+        <div class="notice-badge-row">
+          <span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
+            ${notice.label_title || "General"}
+          </span>
+          <span class="notice-staff">${notice.staff}</span>
+        </div>
+        <button class="notice-close-btn" style="opacity: 0; pointer-events: none;">&times;</button>
+      </div>
+      <h2 class="notice-content-title">${notice.title}</h2>
+      <div class="notice-content-body">${textPreview}</div>
+    </div>`;
+
+  const element = stringToHTML(htmlContent).firstChild as HTMLElement;
+  element.addEventListener("click", () =>
+    openEngageNoticeModal(notice, colour, element),
+  );
+  return element;
+}
+
+function openEngageNoticeModal(
+  notice: any,
+  colour: string | undefined,
+  sourceElement: HTMLElement,
+) {
+  const cleanContent = notice.contents
+    .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
+    .replace(/ +/, " ");
+
+  document.getElementById("notice-modal")?.remove();
+
+  const sourceRect = sourceElement.getBoundingClientRect();
+  let scrollY = Math.round(window.scrollY);
+  let scrollX = Math.round(window.scrollX);
+  let sourceLeft = sourceRect.left;
+  let sourceTop = sourceRect.top;
+  let sourceWidth = sourceRect.width;
+  let sourceHeight = sourceRect.height;
+
+  const modalHtml = `
+    <div id="notice-modal" class="notice-modal-overlay" style="opacity: 0;">
+      <div class="notice-modal-transition" style="
+        position: fixed;
+        left: ${sourceLeft + scrollX}px;
+        top: ${sourceTop + scrollY}px;
+        width: ${sourceWidth}px;
+        height: ${sourceHeight}px;
+        transform-origin: center;
+        z-index: 10001;
+      ">
+        <div class="notice-modal-content notice-transitioning">
+          <div class="notice-unified-content notice-card-state">
+            <div class="notice-header">
+              <div class="notice-badge-row">
+                <span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
+                  ${notice.label_title || "General"}
+                </span>
+                <span class="notice-staff">${notice.staff}</span>
+              </div>
+              <button class="notice-close-btn">&times;</button>
+            </div>
+            <h2 class="notice-content-title">${notice.title}</h2>
+            <div class="notice-content-body">${cleanContent}</div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+
+  const modal = stringToHTML(modalHtml).firstChild as HTMLElement;
+  const transitionContainer = modal.querySelector(
+    ".notice-modal-transition",
+  ) as HTMLElement;
+  const unifiedContent = modal.querySelector(
+    ".notice-unified-content",
+  ) as HTMLElement;
+  const closeBtn = modal.querySelector(".notice-close-btn") as HTMLElement;
+
+  document.body.appendChild(modal);
+
+  sourceElement.setAttribute("data-transitioning", "true");
+  sourceElement.style.opacity = "0";
+  sourceElement.style.transform = "scale(0.95)";
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  let targetWidth = Math.round(
+    Math.min(Math.max(sourceWidth, 800), viewportWidth - 40),
+  );
+
+  const tempMeasureDiv = document.createElement("div");
+  tempMeasureDiv.style.position = "absolute";
+  tempMeasureDiv.style.left = "-9999px";
+  tempMeasureDiv.style.width = targetWidth + "px";
+  tempMeasureDiv.style.visibility = "hidden";
+  tempMeasureDiv.innerHTML = `
+    <div class="notice-unified-content notice-modal-state" style="position: relative; width: 100%; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.1);">
+      <div class="notice-header">
+        <div class="notice-badge-row">
+          <span class="notice-badge">${notice.label_title || "General"}</span>
+          <span class="notice-staff">${notice.staff}</span>
+        </div>
+        <button class="notice-close-btn">&times;</button>
+      </div>
+      <h2 class="notice-content-title">${notice.title}</h2>
+      <div class="notice-content-body">${cleanContent}</div>
+    </div>
+  `;
+  document.body.appendChild(tempMeasureDiv);
+  const measuredHeight =
+    tempMeasureDiv.firstElementChild!.getBoundingClientRect().height;
+  document.body.removeChild(tempMeasureDiv);
+
+  let targetHeight = Math.round(
+    Math.min(Math.max(measuredHeight + 32, 200), viewportHeight * 0.9),
+  );
+  let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
+  let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
+
+  const closeModal = () => {
+    window.removeEventListener("resize", handleResize);
+    document.removeEventListener("keydown", handleEscape);
+
+    if (!settingsState.animations) {
+      modal.remove();
+      sourceElement.style.opacity = "1";
+      sourceElement.style.transform = "";
+      sourceElement.removeAttribute("data-transitioning");
+      return;
+    }
+
+    animate(
+      modal,
+      {
+        backgroundColor: ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0)"],
+        backdropFilter: ["blur(4px)", "blur(0px)"],
+      },
+      { duration: 0.2 },
+    );
+
+    animate(
+      transitionContainer,
+      { opacity: [1, 0] },
+      { duration: 0.2, delay: 0.3 },
+    );
+
+    sourceElement.style.opacity = "1";
+    sourceElement.style.transform = "";
+
+    modal.style.pointerEvents = "none";
+
+    animate(
+      transitionContainer,
+      {
+        left: [targetLeft + scrollX, sourceLeft + scrollX],
+        top: [targetTop, sourceTop + scrollY],
+        width: [targetWidth, sourceWidth],
+        height: [targetHeight, sourceHeight],
+        scale: [1, 1],
+      },
+      {
+        duration: 0.35,
+        type: "spring",
+        stiffness: 400,
+        damping: 35,
+      },
+    ).finished.then(async () => {
+      modal.remove();
+      sourceElement.removeAttribute("data-transitioning");
+    });
+  };
+
+  closeBtn?.addEventListener("click", closeModal);
+  modal?.addEventListener("click", (e) => {
+    if (e.target === modal) {
+      closeModal();
+    }
+  });
+
+  const handleEscape = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      closeModal();
+      document.removeEventListener("keydown", handleEscape);
+      window.removeEventListener("resize", handleResize);
+    }
+  };
+  document.addEventListener("keydown", handleEscape);
+
+  const handleResize = () => {
+    const newSourceRect = sourceElement.getBoundingClientRect();
+    const newScrollY = Math.round(window.scrollY);
+    const newScrollX = Math.round(window.scrollX);
+
+    const computedStyle = getComputedStyle(sourceElement);
+    const transform = computedStyle.transform;
+    let scaleX = 1,
+      scaleY = 1;
+
+    if (transform && transform !== "none") {
+      const matrix = transform.match(/matrix.*\((.+)\)/);
+      if (matrix) {
+        const values = matrix[1].split(", ");
+        scaleX = parseFloat(values[0]);
+        scaleY = parseFloat(values[3]);
+      }
+    }
+
+    const newSourceWidth = newSourceRect.width / scaleX;
+    const newSourceHeight = newSourceRect.height / scaleY;
+
+    const deltaX = (newSourceWidth - newSourceRect.width) / 2;
+    const deltaY = (newSourceHeight - newSourceRect.height) / 2;
+
+    const newSourceLeft = newSourceRect.left - deltaX;
+    const newSourceTop = newSourceRect.top - deltaY;
+
+    const newViewportWidth = window.innerWidth;
+    const newViewportHeight = window.innerHeight;
+    const newTargetWidth = Math.round(
+      Math.min(Math.max(newSourceWidth, 800), newViewportWidth - 40),
+    );
+    const currentHeight = unifiedContent.getBoundingClientRect().height;
+    const newTargetHeight = Math.round(
+      Math.min(Math.max(currentHeight + 32, 200), newViewportHeight * 0.9),
+    );
+    const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
+    const newTargetTop =
+      Math.round((newViewportHeight - newTargetHeight) / 2) + newScrollY;
+
+    transitionContainer.style.left =
+      Math.round(newTargetLeft + newScrollX) + "px";
+    transitionContainer.style.top = Math.round(newTargetTop) + "px";
+    transitionContainer.style.width = Math.round(newTargetWidth) + "px";
+    transitionContainer.style.height = Math.round(newTargetHeight) + "px";
+
+    sourceLeft = newSourceLeft;
+    sourceTop = newSourceTop;
+    sourceWidth = newSourceWidth;
+    sourceHeight = newSourceHeight;
+    targetLeft = newTargetLeft;
+    targetTop = newTargetTop;
+    targetWidth = newTargetWidth;
+    targetHeight = newTargetHeight;
+    scrollY = newScrollY;
+    scrollX = newScrollX;
+  };
+
+  window.addEventListener("resize", handleResize);
+
+  if (settingsState.animations) {
+    animate(modal, { opacity: [0, 1] }, { duration: 0.2 });
+
+    animate(
+      transitionContainer,
+      {
+        left: [sourceLeft + scrollX, targetLeft + scrollX],
+        top: [sourceTop + scrollY, targetTop],
+        width: [sourceWidth, targetWidth],
+        height: [sourceHeight, targetHeight],
+        scale: [1, 1],
+      },
+      {
+        duration: 0.5,
+        type: "spring",
+        stiffness: 280,
+        damping: 24,
+      },
+    );
+
+    unifiedContent.classList.remove("notice-card-state");
+    unifiedContent.classList.add("notice-modal-state");
+  } else {
+    modal.style.opacity = "1";
+    transitionContainer.style.left = Math.round(targetLeft + scrollX) + "px";
+    transitionContainer.style.top = Math.round(targetTop) + "px";
+    transitionContainer.style.width = Math.round(targetWidth) + "px";
+    transitionContainer.style.height = Math.round(targetHeight) + "px";
+    unifiedContent.classList.remove("notice-card-state");
+    unifiedContent.classList.add("notice-modal-state");
+  }
+}
+
+async function fetchEngageNoticesFromApi(
+  date: string,
+  labelTokens: string[],
+): Promise<void> {
+  try {
+    const data = settingsState.mockNotices
+      ? getMockNotices()
+      : await (
+          await fetch(`${location.origin}/seqta/parent/load/notices`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json; charset=utf-8" },
+            credentials: "include",
+            body: JSON.stringify({ date }),
+          })
+        ).json();
+
+    processEngageNotices(data, labelTokens);
+  } catch (e) {
+    console.warn("[BetterSEQTA+] Engage notices request failed:", e);
+    processEngageNotices({ payload: [] }, labelTokens);
+  }
+}
+
+function bindEngageNoticesDateInput(
+  labelTokens: string[],
+  initialDate: string,
+): () => void {
+  const dateControl = document.getElementById(
+    ENGAGE_NOTICES_DATE_ID,
+  ) as HTMLInputElement | null;
+
+  if (!dateControl) {
+    return () => {};
+  }
+
+  dateControl.value = initialDate;
+
+  const debouncedInputChange = debounce((e: Event) => {
+    void fetchEngageNoticesFromApi(
+      (e.target as HTMLInputElement).value,
+      labelTokens,
+    );
+  }, 250);
+
+  dateControl.addEventListener("input", debouncedInputChange);
+
+  return () => dateControl.removeEventListener("input", debouncedInputChange);
+}
+
+async function initEngageNoticesUi(todayFormatted: string): Promise<void> {
+  const noticeContainer = document.getElementById(ENGAGE_NOTICE_CONTAINER_ID);
+  if (!noticeContainer) return;
+
+  let labelFilterValues: string[] = [];
+  try {
+    const prefsRes = await fetch(`${location.origin}/seqta/parent/load/prefs?`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json; charset=utf-8" },
+      credentials: "include",
+      body: JSON.stringify({ asArray: true, request: "userPrefs" }),
+    });
+    const prefs = await prefsRes.json();
+    const payload = prefs?.payload;
+    if (Array.isArray(payload)) {
+      labelFilterValues = payload
+        .filter((item: { name?: string }) => item.name === "notices.filters")
+        .map((item: { value?: string }) => item.value)
+        .filter((v): v is string => typeof v === "string");
+    }
+  } catch {
+    labelFilterValues = [];
+  }
+
+  const labelTokens =
+    labelFilterValues.length > 0
+      ? String(labelFilterValues[0]).split(" ").filter(Boolean)
+      : [];
+
+  const dateControl = document.getElementById(ENGAGE_NOTICES_DATE_ID);
+  if (dateControl) {
+    (dateControl as HTMLInputElement).value = todayFormatted;
+  }
+
+  await fetchEngageNoticesFromApi(todayFormatted, labelTokens);
+
+  const cleanup = bindEngageNoticesDateInput(labelTokens, todayFormatted);
+  engageMergeNoticeCleanup(cleanup);
+
+  noticeContainer.classList.remove("loading");
+}
+
+function engageMergeNoticeCleanup(noticeCleanup: () => void): void {
+  const prev = engageListenersCleanup;
+  engageListenersCleanup = () => {
+    prev?.();
+    noticeCleanup();
+  };
+}
+
+function showEngageTimetableError(message: string): void {
+  const dayContainer = document.getElementById("engage-day-container");
+  if (!dayContainer) return;
+  dayContainer.classList.remove("loading");
+  dayContainer.innerHTML = `
+    <div class="day-empty">
+      <img src="${browser.runtime.getURL(LogoLight)}" alt="" />
+      <p>${message}</p>
+    </div>`;
+}
+
+function showEngageNoticesSectionError(message: string): void {
+  const noticeContainer = document.getElementById(ENGAGE_NOTICE_CONTAINER_ID);
+  if (!noticeContainer) return;
+  noticeContainer.classList.remove("loading");
+  noticeContainer.innerHTML = `
+    <div class="day-empty">
+      <img src="${browser.runtime.getURL(LogoLight)}" alt="" />
+      <p>${message}</p>
+    </div>`;
+}
+
+/** SEQTA Engage parent home: child timetable (today view) using parent APIs. */
+export async function loadEngageHomePage(): Promise<void> {
+  updateEngageHomeMenuActive(true);
+  document.title = "Home ― SEQTA Engage";
+
+  let main: HTMLElement;
+  try {
+    /* Engage mounts `#main` after React hydrates; a single rAF often loses the race on cold load. */
+    main = (await waitForElm("#main", true, 100, 200)) as HTMLElement;
+  } catch {
+    console.warn(
+      "[BetterSEQTA+] Engage home: timed out waiting for #main (shell not ready).",
+    );
+    return;
+  }
+
+  engageListenersCleanup?.();
+  engageViewDate = new Date();
+
+  main.innerHTML = "";
+  /* `stringToHTML` returns `document.body`; use firstElementChild so we don't append a whitespace text node (which would drop #engage-home-container and break queries). */
+  const engageHomeBody = stringToHTML(/* html */ `
+      <div class="home-root" id="engage-home-root">
+        <div class="home-container" id="engage-home-container">
+          <div class="border timetable-container">
+            <div class="home-subtitle">
+              <div class="engage-timetable-title-cluster">
+                <h2 id="engage-home-lesson-subtitle">Today's Lessons</h2>
+                <select id="engage-child-selector" class="engage-child-select" aria-label="Student"></select>
+              </div>
+              <div class="timetable-arrows">
+                <svg width="24" height="24" viewBox="0 0 24 24" style="transform: scale(-1,1)" id="engage-home-timetable-back">
+                  <g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g>
+                </svg>
+                <svg width="24" height="24" viewBox="0 0 24 24" id="engage-home-timetable-forward">
+                  <g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g>
+                </svg>
+              </div>
+            </div>
+            <div class="day-container loading" id="engage-day-container"></div>
+          </div>
+          <div class="border notices-container">
+            <div style="display: flex; justify-content: space-between">
+              <h2 class="home-subtitle">Notices</h2>
+              <input type="date" id="engage-notices-date" />
+            </div>
+            <div class="notice-container upcoming-items loading" id="engage-notice-container"></div>
+          </div>
+        </div>
+      </div>
+    `);
+  const engageHomeRoot = engageHomeBody.firstElementChild as HTMLElement | null;
+  if (engageHomeRoot) {
+    main.appendChild(engageHomeRoot);
+  } else {
+    console.error(
+      "[BetterSEQTA+] Engage home: parsed markup had no root element (check DOMPurify / stringToHTML).",
+    );
+    return;
+  }
+
+  bindEngageTimetableUi();
+  setEngageTimetableSubtitle();
+
+  const select = document.getElementById(
+    "engage-child-selector",
+  ) as HTMLSelectElement | null;
+
+  const todayFormatted = toISODate(new Date());
+
+  let children: EngageParentChild[];
+  try {
+    try {
+      children = await fetchEngageParentChildren();
+    } catch (e) {
+      console.error("[BetterSEQTA+] Engage parent child list failed:", e);
+      showEngageTimetableError("Could not load students for this account.");
+      return;
+    }
+
+    if (!select) {
+      showEngageTimetableError("Could not initialize the home view.");
+      showEngageNoticesSectionError("Could not initialize notices.");
+      return;
+    }
+
+    if (children.length === 0) {
+      select.disabled = true;
+      showEngageTimetableError("No linked students found.");
+      return;
+    }
+
+    populateChildSelector(select, children);
+
+    if (!engageSelectedStudentId) {
+      showEngageTimetableError("No student selected.");
+      return;
+    }
+
+    await fetchWeekAndRender();
+  } finally {
+    await initEngageNoticesUi(todayFormatted);
+  }
+}

src/seqta/utils/Loaders/LoadHomePage.ts

@@ -129,9 +129,9 @@ export async function loadHomePage() {
     .filter((item: any) => item.name === "notices.filters")
     .map((item: any) => item.value);
 
-  if (labelArray.length > 0) {
   const noticeContainer = document.getElementById("notice-container");
   if (noticeContainer) {
+    if (labelArray.length > 0) {
       const dateControl = document.querySelector(
         'input[type="date"]',
       ) as HTMLInputElement;
@@ -140,6 +140,17 @@ export async function loadHomePage() {
         setupNotices(labelArray[0].split(" "), TodayFormatted);
       }
       noticeContainer.classList.remove("loading");
+    } else {
+      noticeContainer.classList.remove("loading");
+      noticeContainer.innerHTML = "";
+      const emptyState = document.createElement("div");
+      emptyState.classList.add("day-empty");
+      const img = document.createElement("img");
+      img.src = browser.runtime.getURL(LogoLight);
+      const text = document.createElement("p");
+      text.innerText = "No notices available.";
+      emptyState.append(img, text);
+      noticeContainer.append(emptyState);
     }
   }
 
@@ -243,8 +254,9 @@ function setupNotices(labelArray: string[], date: string) {
           ).json();
 
       processNotices(data, labelArray);
-    } catch (error) {
+    } catch {
-      console.error("[BetterSEQTA+] Failed to fetch notices:", error);
+      // Notices failed to load; processNotices will show empty state if container exists
+      processNotices({ payload: [] }, labelArray);
     }
   };
 
@@ -278,12 +290,28 @@ function processNotices(response: any, labelArray: string[]) {
 
   NoticeContainer.innerHTML = "";
 
-  const notices = response.payload;
+  const notices = response?.payload;
+  if (!Array.isArray(notices)) {
+    const emptyState = document.createElement("div");
+    emptyState.classList.add("day-empty");
+    const img = document.createElement("img");
+    img.src = browser.runtime.getURL(LogoLight);
+    const text = document.createElement("p");
+    text.innerText = "No notices for today.";
+    emptyState.append(img, text);
+    NoticeContainer.append(emptyState);
+    return;
+  }
+
   if (!notices.length) {
-    const dummyNotice = document.createElement("div");
+    const emptyState = document.createElement("div");
-    dummyNotice.textContent = "No notices for today.";
+    emptyState.classList.add("day-empty");
-    dummyNotice.classList.add("dummynotice");
+    const img = document.createElement("img");
-    NoticeContainer.append(dummyNotice);
+    img.src = browser.runtime.getURL(LogoLight);
+    const text = document.createElement("p");
+    text.innerText = "No notices for today.";
+    emptyState.append(img, text);
+    NoticeContainer.append(emptyState);
     return;
   }
 
@@ -440,7 +468,7 @@ function openNoticeModal(
   document.body.removeChild(tempMeasureDiv);
 
   let targetHeight = Math.round(
-    Math.min(Math.max(measuredHeight, 200), viewportHeight * 0.85),
+    Math.min(Math.max(measuredHeight + 32, 200), viewportHeight * 0.9),
   );
   let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
   let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
@@ -552,7 +580,7 @@ function openNoticeModal(
     );
     const currentHeight = unifiedContent.getBoundingClientRect().height;
     const newTargetHeight = Math.round(
-      Math.min(Math.max(currentHeight, 200), newViewportHeight * 0.85),
+      Math.min(Math.max(currentHeight + 32, 200), newViewportHeight * 0.9),
     );
     const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
     const newTargetTop =

src/seqta/utils/Loaders/engageParentTimetable.ts

@@ -0,0 +1,87 @@
+const TIMETABLE_URL = "/seqta/parent/load/timetable";
+
+export interface EngageParentChild {
+  name: string;
+  id: string;
+}
+
+export interface EngageParentTimetableItem {
+  date: string;
+  period: string;
+  code: string;
+  description: string;
+  staff: string;
+  type: string;
+  room: string;
+  from: string;
+  until: string;
+  programmeID?: number;
+  metaID?: number;
+  assessments?: unknown[];
+}
+
+export function toISODate(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+/** Monday–Sunday range (inclusive) containing `date`, as YYYY-MM-DD. */
+export function weekRangeContaining(date: Date): { from: string; until: string } {
+  const local = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const dow = local.getDay();
+  const diff = dow === 0 ? -6 : 1 - dow;
+  local.setDate(local.getDate() + diff);
+  const monday = local;
+  const sunday = new Date(monday);
+  sunday.setDate(sunday.getDate() + 6);
+  return { from: toISODate(monday), until: toISODate(sunday) };
+}
+
+function isInWeekRange(
+  isoDay: string,
+  weekFrom: string,
+  weekUntil: string,
+): boolean {
+  return isoDay >= weekFrom && isoDay <= weekUntil;
+}
+
+export function isDateInCachedWeek(
+  date: Date,
+  weekFrom: string,
+  weekUntil: string,
+): boolean {
+  return isInWeekRange(toISODate(date), weekFrom, weekUntil);
+}
+
+async function postParentTimetable(body: object): Promise<any> {
+  const res = await fetch(`${location.origin}${TIMETABLE_URL}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+    credentials: "include",
+    body: JSON.stringify(body),
+  });
+  return res.json();
+}
+
+export async function fetchEngageParentChildren(): Promise<EngageParentChild[]> {
+  const data = await postParentTimetable({ list: true });
+  const raw = data?.payload;
+  if (!Array.isArray(raw)) return [];
+  return raw.map((row: { name?: string; id?: string | number }) => ({
+    name: String(row?.name ?? ""),
+    id: String(row?.id ?? ""),
+  }));
+}
+
+export async function fetchEngageParentTimetableWeek(
+  from: string,
+  until: string,
+  studentId: string,
+): Promise<EngageParentTimetableItem[]> {
+  const student = /^\d+$/.test(studentId) ? Number(studentId) : studentId;
+  const data = await postParentTimetable({ from, until, student });
+  const items = data?.payload?.items;
+  return Array.isArray(items) ? items : [];
+}

src/seqta/utils/Openers/OpenBsCloudAutoSyncAnnouncement.ts

@@ -0,0 +1,71 @@
+import stringToHTML from "../stringToHTML";
+import { settingsState } from "../listeners/SettingsState";
+import { openPopup } from "./PopupManager";
+import { attachPopupMediaFullscreen } from "./attachPopupMediaFullscreen";
+
+/** Same hosting pattern as the What's New update video (GitHub raw). */
+const BS_CLOUD_DEMO_VIDEO_URL =
+  "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/bsclouddemo.webm";
+
+export function shouldShowBsCloudAutoSyncAnnouncement(): boolean {
+  return !settingsState.bsCloudAutoSyncAnnouncementShown;
+}
+
+/**
+ * One-time announcement for BetterSEQTA Cloud automatic settings sync (after other startup popups).
+ * Video layout matches {@link OpenWhatsNewPopup} (`whatsnewImgContainer` / `whatsnewImg`).
+ */
+export function showBsCloudAutoSyncAnnouncement(onDismissed?: () => void) {
+  if (document.getElementById("whatsnewbk")) {
+    onDismissed?.();
+    return;
+  }
+  if (!shouldShowBsCloudAutoSyncAnnouncement()) {
+    onDismissed?.();
+    return;
+  }
+
+  const header = stringToHTML(
+    /* html */
+    `<div class="whatsnewHeader bsCloudAutoSyncAnnouncementHeader">
+      <h1>BetterSEQTA Cloud</h1>
+    </div>`,
+  ).firstChild as HTMLElement;
+
+  const imageContainer = document.createElement("div");
+  imageContainer.classList.add("whatsnewImgContainer");
+
+  const video = document.createElement("video");
+  const source = document.createElement("source");
+  source.setAttribute("src", BS_CLOUD_DEMO_VIDEO_URL);
+  source.setAttribute("type", "video/webm");
+  video.autoplay = true;
+  video.muted = true;
+  video.loop = true;
+  video.appendChild(source);
+  video.classList.add("whatsnewImg");
+  imageContainer.appendChild(video);
+  attachPopupMediaFullscreen(video);
+
+  const text = stringToHTML(/* html */ `
+    <div class="whatsnewTextContainer privacyStatement" style="height: 50%; overflow-y: auto; font-size: 1.2rem; line-height: 1.6;">
+      <p>
+        <strong class="bsCloudAccent">BetterSEQTA Cloud</strong> can keep your BetterSEQTA+ settings backed up and in
+        sync across browsers. Optional <strong>automatic settings sync</strong> runs when you are signed in (passwords
+        and tokens are never included).
+      </p>
+      <p>
+        Close this dialog when you are done. We will not show this announcement again.
+      </p>
+      <p class="bsCloudAutoSyncSignupCallout">Sign up in BetterSEQTA settings</p>
+    </div>
+  `).firstChild as HTMLElement;
+
+  settingsState.bsCloudAutoSyncAnnouncementShown = true;
+
+  openPopup({
+    header,
+    content: [imageContainer, text],
+    afterClose: onDismissed,
+  });
+}

src/seqta/utils/Openers/OpenEngageParentsAnnouncement.ts

@@ -0,0 +1,61 @@
+import stringToHTML from "../stringToHTML";
+import { settingsState } from "../listeners/SettingsState";
+import { openPopup } from "./PopupManager";
+import { attachPopupMediaFullscreenIfPresent } from "./attachPopupMediaFullscreen";
+
+/** Same hosting pattern as the privacy statement branding images (avoids page-relative extension URLs on Engage). */
+const ENGAGE_PROMO_IMG_URL =
+  "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/bq%2Bengage.png";
+
+export function shouldShowEngageParentsAnnouncement(): boolean {
+  return !settingsState.engageParentsAnnouncementShown;
+}
+
+/**
+ * One-time announcement that BetterSEQTA Plus works on SEQTA Engage (parents).
+ */
+export function showEngageParentsAnnouncement(onDismissed?: () => void) {
+  if (document.getElementById("whatsnewbk")) {
+    onDismissed?.();
+    return;
+  }
+  if (!shouldShowEngageParentsAnnouncement()) {
+    onDismissed?.();
+    return;
+  }
+
+  const header = stringToHTML(
+    /* html */
+    `<div class="whatsnewHeader engageParentsAnnouncementHeader">
+      <h1>BetterSEQTA Plus now supports <span class="seqtaEngageAccent">SEQTA Engage</span></h1>
+      <p class="engageParentsSubheading">Buy your mom a BetterSEQTA Plus</p>
+    </div>`,
+  ).firstChild as HTMLElement;
+
+  const text = stringToHTML(/* html */ `
+    <div class="whatsnewTextContainer privacyStatement" style="overflow-y: auto; font-size: 1.2rem; line-height: 1.6;">
+      <div class="engageParentsPromoWrap">
+        <img class="engageParentsPromoImg" src="${ENGAGE_PROMO_IMG_URL}" width="1920" height="1080" alt="BetterSEQTA Plus now supports SEQTA Engage" />
+      </div>
+      <p>
+        BetterSEQTA Plus now supports <strong class="seqtaEngageAccent">SEQTA Engage</strong>, so parents get the same kinds of improvements you are used to on SEQTA Learn—themes, a clearer home experience, and other Plus polish while browsing Engage.
+      </p>
+      <p>
+        The title is a bit of fun; if the extension saves you time, you can always support development via Open Collective or Ko-fi from the What is New changelog or related links in settings.
+      </p>
+      <p>
+        Close this dialog when you are done. We will not show this announcement again.
+      </p>
+    </div>
+  `).firstChild as HTMLElement;
+
+  attachPopupMediaFullscreenIfPresent(text, ".engageParentsPromoImg");
+
+  settingsState.engageParentsAnnouncementShown = true;
+
+  openPopup({
+    header,
+    content: [text],
+    afterClose: onDismissed,
+  });
+}

src/seqta/utils/Openers/OpenPrivacyNotification.ts

@@ -1,13 +1,31 @@
 import stringToHTML from "../stringToHTML";
 import { settingsState } from "../listeners/SettingsState";
 import { openPopup } from "./PopupManager";
+import { attachPopupMediaFullscreenIfPresent } from "./attachPopupMediaFullscreen";
 
-export function showPrivacyNotification() {
+const PRIVACY_STATEMENT_VERSION = "2025-12-19";
-  const lastUpdated = "2025-12-19";
 
-  if (document.getElementById("whatsnewbk")) return;
+export function shouldShowPrivacyNotification(): boolean {
-  if (settingsState.privacyStatementShown) return;
+  if (settingsState.privacyStatementShown) return false;
-  if (settingsState.privacyStatementLastUpdated && new Date(settingsState.privacyStatementLastUpdated) > new Date(lastUpdated)) return;
+  if (
+    settingsState.privacyStatementLastUpdated &&
+    new Date(settingsState.privacyStatementLastUpdated) >
+      new Date(PRIVACY_STATEMENT_VERSION)
+  ) {
+    return false;
+  }
+  return true;
+}
+
+export function showPrivacyNotification(onDismissed?: () => void) {
+  if (document.getElementById("whatsnewbk")) {
+    onDismissed?.();
+    return;
+  }
+  if (!shouldShowPrivacyNotification()) {
+    onDismissed?.();
+    return;
+  }
 
   const header = stringToHTML(
     /* html */
@@ -42,11 +60,14 @@ export function showPrivacyNotification() {
     </div>
   `).firstChild as HTMLElement;
 
+  attachPopupMediaFullscreenIfPresent(text, "img.aboutImg");
+
   settingsState.privacyStatementLastUpdated = "2025-12-20";
   settingsState.privacyStatementShown = true;
 
   openPopup({
     header,
     content: [text],
+    afterClose: onDismissed,
   });
 }

src/seqta/utils/Openers/OpenWhatsNewPopup.ts

@@ -2,8 +2,9 @@ import stringToHTML from "../stringToHTML";
 import browser from "webextension-polyfill";
 import kofi from "@/resources/kofi.png?base64";
 import { openPopup } from "./PopupManager";
+import { attachPopupMediaFullscreen } from "./attachPopupMediaFullscreen";
 
-export function OpenWhatsNewPopup() {
+export function OpenWhatsNewPopup(onDismissed?: () => void) {
   const header = stringToHTML(
     /* html */
     `<div class="whatsnewHeader">
@@ -20,7 +21,7 @@ export function OpenWhatsNewPopup() {
 
   source.setAttribute(
     "src",
-    "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/update-video.mp4",
+    "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/update-video.webm",
   );
   video.autoplay = true;
   video.muted = true;
@@ -28,10 +29,57 @@ export function OpenWhatsNewPopup() {
   video.appendChild(source);
   video.classList.add("whatsnewImg");
   imageContainer.appendChild(video);
+  attachPopupMediaFullscreen(video);
 
   const text = stringToHTML(/* html */ `
     <div class="whatsnewTextContainer" style="height: 50%;overflow-y: auto;">
 
+      <h1>3.6.0 - Cloud backup, various fixes & SEQTA Engage support</h1>
+      <li>BetterSEQTA Cloud: back up and restore extension settings from your account (General settings).</li>
+      <li>Optional automatic cloud sync if signed in (on by default).</li>
+      <li>Option to use cloud profile photo as the local SEQTA profile picture</li>
+      <li>Firefox: fixed the extension settings popup.</li>
+      <li>SEQTA Engage: Added BetterSEQTA Plus support for SEQTA Engage for Parents.</li>
+      <li>Added smooth transitions to adaptive themes (on by default)</li>
+      <li>Added adaptive theme variables to custom themes (try it out with the Windows XP theme)</li>
+      <li>Fixed today's lessons on the homepage misbehaving in developer mode.</li>
+      <li>Reduced overlap between BetterSEQTA subject averages and SEQTA's built-in averages UI.</li>
+      <li>Updated outdated in-app links and update some under the hood code (Vite 8).</li>
+
+      <h1>3.5.3 - Adaptive theme updates</h1>
+      <li>Fixed adaptive theming on current-year course and assessment pages.</li>
+
+      <h1>3.5.2 - PDF & store compliance</h1>
+      <li>Put PDF.js with the extension so assessment weighting stays compatible with Chrome Web Store rules</li>
+
+      <h1>3.5.1 - QR & session link fix</h1>
+      <li>Fixed DesQTA Connect Mobile App QR generation on Chrome</li>
+
+      <h1>3.5.0 - Adaptive Theme, Timetable Editor & More</h1>
+      <li>Added adaptive theme colour</li>
+      <li>Added optional soft gradient for adaptive theme when viewing a class</li>
+      <li>Added timetable editor</li>
+      <li>Added icon-only sidebar option for a compact layout</li>
+      <li>Added empty states for notices and homepage cards</li>
+      <li>Added BetterSEQTA Cloud sign-in and improved store browsing details</li>
+      <li>Improved popup rendering to better handle floating UI elements</li>
+      <li>Fixed assessment colouring issues</li>
+      <li>Fixed icon loading on SEQTA pages and improved Windows dropdown styling</li>
+      <li>Fixed sidebar issues with compact mode, keyboard focus, and tab navigation</li>
+      <li>Fixed unnecessary notice modal scrolling and other popup styling issues</li>
+      <li>Added new kanban categories to the assessments overview</li>
+      <li>Added DesQTA QR code generation in settings for linking to the DesQTA (BetterSEQTA) mobile app</li>
+      <li>New store with improved theme browsing and backgrounds</li>
+      <li>Other minor bug fixes and improvements</li>
+
+      <h1>3.4.16 - Subject Averages Fixes</h1>
+      <li>Fixed subject averages not showing correctly with letter grades and weighted marks</li>
+
+      <h1>3.4.15 - SEQTA New UI Patch</h1>
+      <li>Fixed compatibility issues caused by the new SEQTA UI update</li>
+      <li>Adjusted styling to match updated SEQTA layout changes</li>
+      <li>Other minor bug fixes and stability improvements</li>
+
       <h1>3.4.14 - Search & Assessments Update</h1>
       <li>Global Search improvements: indexing progress, more accurate results, and now includes past assessments/assignments</li>
       <li>Assessment Averages now parse weightings when possible for more accurate subject averages</li>
@@ -318,5 +366,7 @@ export function OpenWhatsNewPopup() {
   openPopup({
     header,
     content: [imageContainer, text, footer],
+    afterClose: onDismissed,
+    clearJustUpdated: true,
   });
 }

src/seqta/utils/Openers/PopupManager.ts

@@ -4,6 +4,13 @@ import { animate as motionAnimate, stagger } from "motion";
 type AnimationTarget = string | Element | Element[] | NodeList | null;
 
 let isClosing = false;
+let pendingAfterClose: (() => void) | undefined;
+
+function invokeAfterClose() {
+  const fn = pendingAfterClose;
+  pendingAfterClose = undefined;
+  fn?.();
+}
 
 export async function closePopup() {
   if (isClosing) return;
@@ -16,12 +23,14 @@ export async function closePopup() {
 
   if (!background || !popup) {
     isClosing = false;
+    invokeAfterClose();
     return;
   }
 
   if (!settingsState.animations) {
     background.remove();
     isClosing = false;
+    invokeAfterClose();
     return;
   }
 
@@ -33,19 +42,28 @@ export async function closePopup() {
 
   background.remove();
   isClosing = false;
+  invokeAfterClose();
 }
 
 interface OpenPopupOptions {
   header?: Node | null;
   content?: (Node | null | undefined)[];
   animateSelector?: AnimationTarget;
+  /** Called once after this popup is fully closed (including skip-animation path). */
+  afterClose?: () => void;
+  /** When true, clears the post-update flag when this popup opens (What's New only). */
+  clearJustUpdated?: boolean;
 }
 
 export function openPopup({
   header,
   content = [],
   animateSelector = ".whatsnewTextContainer *",
+  afterClose,
+  clearJustUpdated = false,
 }: OpenPopupOptions = {}) {
+  pendingAfterClose = afterClose;
+
   const background = document.createElement("div");
   background.id = "whatsnewbk";
   background.classList.add("whatsnewBackground");
@@ -88,7 +106,9 @@ export function openPopup({
     }
   }
 
+  if (clearJustUpdated) {
     delete settingsState.justupdated;
+  }
 
   background.addEventListener("click", (event) => {
     if (event.target === background) void closePopup();

src/seqta/utils/Openers/StartupPopupQueue.ts

@@ -0,0 +1,48 @@
+import { settingsState } from "../listeners/SettingsState";
+import { OpenWhatsNewPopup } from "./OpenWhatsNewPopup";
+import {
+  shouldShowPrivacyNotification,
+  showPrivacyNotification,
+} from "./OpenPrivacyNotification";
+import {
+  shouldShowEngageParentsAnnouncement,
+  showEngageParentsAnnouncement,
+} from "./OpenEngageParentsAnnouncement";
+import {
+  shouldShowBsCloudAutoSyncAnnouncement,
+  showBsCloudAutoSyncAnnouncement,
+} from "./OpenBsCloudAutoSyncAnnouncement";
+
+type QueueStep = (goNext: () => void) => void;
+
+/**
+ * Runs startup modals in order: What's New (if the extension just updated),
+ * privacy statement (if required), SEQTA Engage announcement (once), then BS Cloud
+ * auto-sync (once, last).
+ */
+export function runStartupPopupQueue() {
+  const steps: QueueStep[] = [];
+
+  if (settingsState.justupdated) {
+    steps.push((goNext) => OpenWhatsNewPopup(goNext));
+  }
+
+  if (shouldShowPrivacyNotification()) {
+    steps.push((goNext) => showPrivacyNotification(goNext));
+  }
+
+  if (shouldShowEngageParentsAnnouncement()) {
+    steps.push((goNext) => showEngageParentsAnnouncement(goNext));
+  }
+
+  if (shouldShowBsCloudAutoSyncAnnouncement()) {
+    steps.push((goNext) => showBsCloudAutoSyncAnnouncement(goNext));
+  }
+
+  function runNext() {
+    const step = steps.shift();
+    if (step) step(runNext);
+  }
+
+  runNext();
+}

src/seqta/utils/Openers/attachPopupMediaFullscreen.ts

@@ -0,0 +1,158 @@
+/**
+ * Makes popup hero images/videos open a padded overlay (not browser fullscreen) on click.
+ * Escape or backdrop click dismisses it. Clicks use stopPropagation so the
+ * parent SEQTA popup does not close.
+ */
+
+import { settingsState } from "../listeners/SettingsState";
+
+const FULLSCREENABLE_CLASS = "popup-media-fullscreenable";
+const OVERLAY_VISIBLE_CLASS = "bsplus-popup-media-overlay-backdrop--visible";
+const OVERLAY_ANIM_MS = 280;
+
+function isImageOrVideo(el: Element): el is HTMLImageElement | HTMLVideoElement {
+  return el instanceof HTMLImageElement || el instanceof HTMLVideoElement;
+}
+
+export function attachPopupMediaFullscreen(el: HTMLImageElement | HTMLVideoElement) {
+  el.classList.add(FULLSCREENABLE_CLASS);
+  el.setAttribute("tabindex", "0");
+  el.setAttribute("role", "button");
+  el.setAttribute("aria-label", "View larger");
+  el.title = "Click to view larger";
+
+  const open = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    openMediaOverlayViewer(el);
+  };
+
+  el.addEventListener("click", open);
+  el.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      open(e);
+    }
+  });
+}
+
+function openMediaOverlayViewer(source: HTMLImageElement | HTMLVideoElement) {
+  const backdrop = document.createElement("div");
+  backdrop.id = "bsplus-popup-media-overlay";
+  backdrop.className = "bsplus-popup-media-overlay-backdrop";
+
+  const inner = document.createElement("div");
+  inner.className = "bsplus-popup-media-overlay-inner";
+
+  const slot = document.createElement("div");
+  slot.className = "bsplus-popup-media-overlay-slot";
+
+  let media: HTMLImageElement | HTMLVideoElement;
+  if (source instanceof HTMLVideoElement) {
+    const v = source;
+    const nv = document.createElement("video");
+    nv.classList.add("bsplus-popup-media-overlay-media");
+    nv.controls = true;
+    nv.playsInline = true;
+    nv.loop = v.loop;
+    nv.muted = v.muted;
+    nv.volume = v.volume;
+    for (const s of v.querySelectorAll("source")) {
+      const ns = document.createElement("source");
+      ns.src = (s as HTMLSourceElement).src;
+      const t = (s as HTMLSourceElement).type;
+      if (t) ns.type = t;
+      nv.appendChild(ns);
+    }
+    nv.addEventListener(
+      "loadeddata",
+      () => {
+        try {
+          nv.currentTime = v.currentTime;
+        } catch {
+          /* ignore */
+        }
+        void nv.play().catch(() => {});
+      },
+      { once: true },
+    );
+    v.pause();
+    nv.load();
+    media = nv;
+  } else {
+    const img = document.createElement("img");
+    img.classList.add("bsplus-popup-media-overlay-media");
+    img.src = source.currentSrc || source.src;
+    img.alt = source.alt || "";
+    media = img;
+  }
+
+  media.addEventListener("click", (e) => e.stopPropagation());
+
+  slot.appendChild(media);
+  inner.append(slot);
+  backdrop.appendChild(inner);
+  document.body.append(backdrop);
+
+  if (!settingsState.animations) {
+    backdrop.classList.add("bsplus-popup-media-overlay--instant");
+    backdrop.classList.add(OVERLAY_VISIBLE_CLASS);
+  } else {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        backdrop.classList.add(OVERLAY_VISIBLE_CLASS);
+      });
+    });
+  }
+
+  inner.addEventListener("click", (e) => e.stopPropagation());
+
+  let done = false;
+  const removeOverlay = () => {
+    if (source instanceof HTMLVideoElement && media instanceof HTMLVideoElement) {
+      try {
+        source.currentTime = media.currentTime;
+      } catch {
+        /* ignore */
+      }
+      void source.play().catch(() => {});
+    }
+    backdrop.remove();
+  };
+
+  const close = () => {
+    if (done) return;
+    done = true;
+    document.removeEventListener("keydown", onDocKey, true);
+
+    if (!settingsState.animations) {
+      removeOverlay();
+      return;
+    }
+
+    backdrop.classList.remove(OVERLAY_VISIBLE_CLASS);
+    window.setTimeout(removeOverlay, OVERLAY_ANIM_MS);
+  };
+
+  const onDocKey = (ev: KeyboardEvent) => {
+    if (ev.key === "Escape") {
+      ev.stopPropagation();
+      close();
+    }
+  };
+
+  document.addEventListener("keydown", onDocKey, true);
+
+  backdrop.addEventListener("click", () => {
+    close();
+  });
+}
+
+export function attachPopupMediaFullscreenIfPresent(
+  root: ParentNode,
+  selector: string,
+) {
+  const el = root.querySelector(selector);
+  if (el && isImageOrVideo(el)) {
+    attachPopupMediaFullscreen(el);
+  }
+}

src/seqta/utils/SendNewsPage.ts

@@ -53,11 +53,22 @@ export async function SendNewsPage() {
   const newscontainer = document.querySelector("#news-container");
   document.getElementById("newsloading")?.remove();
 
-  // Create a document fragment to batch DOM operations
+  const articles = response?.news?.articles;
+  if (!Array.isArray(articles) || articles.length === 0) {
+    const emptyState = document.createElement("div");
+    emptyState.classList.add("day-empty");
+    const img = document.createElement("img");
+    img.src = browser.runtime.getURL(LogoLightOutline);
+    const text = document.createElement("p");
+    text.innerText = "No news articles available right now.";
+    emptyState.append(img, text);
+    newscontainer?.append(emptyState);
+    return;
+  }
+
   const fragment = document.createDocumentFragment();
 
-  // Map over articles to create elements
+  articles.forEach((article: any) => {
-  response.news.articles.forEach((article: any) => {
     const newsarticle = document.createElement("a");
     newsarticle.classList.add("NewsArticle");
     newsarticle.href = article.url;
@@ -85,12 +96,14 @@ export async function SendNewsPage() {
     title.target = "_blank";
 
     const description = document.createElement("p");
+    const articleDescription = typeof article.description === "string"
+      ? article.description
+      : "No description available.";
 
-    article.description =
+    description.innerHTML =
-      article.description.length > 400
+      articleDescription.length > 400
-        ? article.description.substring(0, 400) + "..."
+        ? articleDescription.substring(0, 400) + "..."
-        : article.description;
+        : articleDescription;
-    description.innerHTML = article.description;
 
     articletext.append(title, description);
     newsarticle.append(articleimage, articletext);
@@ -102,10 +115,10 @@ export async function SendNewsPage() {
 
   if (!settingsState.animations) return;
 
-  const articles = Array.from(document.querySelectorAll(".NewsArticle"));
+  const animatedArticles = Array.from(document.querySelectorAll(".NewsArticle"));
 
   animate(
-    articles.slice(0, 20),
+    animatedArticles.slice(0, 20),
     { opacity: [0, 1], y: [10, 0], scale: [0.99, 1] },
     {
       delay: stagger(0.1),

src/seqta/utils/adaptiveThemeColour.ts

@@ -0,0 +1,119 @@
+import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements";
+
+/**
+ * Parses the current page from window.location.hash.
+ * Supports both old and current URL formats, e.g.
+ *   /courses/SEMESTER/X:Y and /courses/X:Y
+ *   /assessments/SEMESTER/X:Y and /assessments/X:Y
+ * e.g. #?page=/courses/2023S/4804:11066,
+ *      #?page=/courses/4804:11066,
+ *      #?page=/assessments/2023S/4621:10772,
+ *      #?page=/assessments/4621:10772
+ */
+function parsePageContext(): { programme: number; metaclass: number } | null {
+  const hash = window.location.hash || "";
+  const match = hash.match(/[?&]page=\/(courses|assessments)\/(?:[^/]+\/)?(\d+):(\d+)/);
+  if (!match) return null;
+  const programme = parseInt(match[2], 10);
+  const metaclass = parseInt(match[3], 10);
+  if (isNaN(programme) || isNaN(metaclass)) return null;
+  return { programme, metaclass };
+}
+
+/**
+ * Fetches subjects and finds the subject matching programme:metaclass.
+ */
+async function getSubjectCode(
+  programme: number,
+  metaclass: number
+): Promise<string | null> {
+  try {
+    const res = await fetch(`${location.origin}/seqta/student/load/subjects?`, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json; charset=utf-8" },
+      body: JSON.stringify({}),
+    });
+    const data = await res.json();
+    const payload = data?.payload;
+    if (!Array.isArray(payload)) return null;
+
+    for (const semester of payload) {
+      const subjects = semester?.subjects;
+      if (!Array.isArray(subjects)) continue;
+      const subject = subjects.find(
+        (s: any) =>
+          s &&
+          Number(s.programme) === programme &&
+          Number(s.metaclass) === metaclass
+      );
+      if (subject?.code) return subject.code;
+    }
+    return null;
+  } catch (error) {
+    console.warn("[BetterSEQTA+] Adaptive theme: failed to load subjects:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetches user prefs and returns the colour for the given subject code.
+ */
+async function getSubjectColour(
+  subjectCode: string,
+  userId: number
+): Promise<string | null> {
+  try {
+    const res = await fetch(`${location.origin}/seqta/student/load/prefs?`, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json; charset=utf-8" },
+      body: JSON.stringify({
+        request: "userPrefs",
+        asArray: true,
+        user: userId,
+      }),
+    });
+    const data = await res.json();
+    const payload = data?.payload;
+    if (!Array.isArray(payload)) return null;
+
+    const pref = payload.find(
+      (p: { name: string; value: string }) =>
+        p.name === `timetable.subject.colour.${subjectCode}`
+    );
+    return pref?.value ?? null;
+  } catch (error) {
+    console.warn("[BetterSEQTA+] Adaptive theme: failed to load prefs:", error);
+    return null;
+  }
+}
+
+/**
+ * Returns the adaptive theme colour for the current page context, or null.
+ * When viewing a course or assessments page, returns the subject's assigned colour.
+ */
+export async function getAdaptiveColour(): Promise<string | null> {
+  const context = parsePageContext();
+  if (!context) return null;
+
+  const subjectCode = await getSubjectCode(context.programme, context.metaclass);
+  if (!subjectCode) return null;
+
+  let userId: number;
+  try {
+    const userInfo = await getUserInfo();
+    userId = userInfo?.id;
+    if (typeof userId !== "number") return null;
+  } catch {
+    return null;
+  }
+
+  const colour = await getSubjectColour(subjectCode, userId);
+  if (!colour || typeof colour !== "string") return null;
+
+  // Basic hex validation
+  if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(colour)) return colour;
+  if (/^[0-9A-Fa-f]{6}$/.test(colour)) return `#${colour}`;
+  return null;
+}

src/seqta/utils/cloudSettingsSync.ts

@@ -0,0 +1,154 @@
+import browser from "webextension-polyfill";
+
+/** Matches the contract in docs/CLOUD_SETTINGS_SYNC_SERVER.md */
+export const CLOUD_SETTINGS_SYNC_SCHEMA_VERSION = 1;
+
+/**
+ * Client-only: last known remote `updated_at` for BS+ settings (from summary or sync responses).
+ * Never uploaded; preserved on restore; used to decide when to pull a newer cloud backup.
+ */
+export const BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY =
+  "bsplus_cloud_settings_known_remote_updated_at";
+
+/**
+ * Never uploaded to the cloud backup (OAuth and legacy keys).
+ * IndexedDB (e.g. Global Search’s `betterseqta-index` database) is not part of
+ * `chrome.storage.local` and is never included in this payload.
+ */
+export const KEYS_OMITTED_FROM_CLOUD_UPLOAD = [
+  "bsplus_token",
+  "bsplus_refresh_token",
+  "bsplus_client_id",
+  "bsplus_user",
+  "cloudAccessToken",
+  "cloudUsername",
+] as const;
+
+/**
+ * Device-only caches / school-related data: never uploaded, never applied from a
+ * cloud snapshot (local values are kept on restore).
+ */
+export const SENSITIVE_DEVICE_STORAGE_KEYS_EXACT = [
+  "plugin.assessments-average.storage.assessments",
+  "plugin.assessments-average.storage.weightings",
+] as const;
+
+/** e.g. any future `plugin.global-search.storage.*` keys in chrome.storage */
+export const SENSITIVE_DEVICE_STORAGE_KEY_PREFIXES = ["plugin.global-search.storage."] as const;
+
+const CLIENT_ONLY_CLOUD_KEYS_EXACT = [BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY] as const;
+
+/** After restoring from cloud, keep local session so the user stays signed in. */
+const AUTH_KEYS_TO_PRESERVE = [
+  "bsplus_token",
+  "bsplus_refresh_token",
+  "bsplus_client_id",
+  "bsplus_user",
+] as const;
+
+const OMIT_FROM_UPLOAD_EXACT = new Set<string>([
+  ...KEYS_OMITTED_FROM_CLOUD_UPLOAD,
+  ...SENSITIVE_DEVICE_STORAGE_KEYS_EXACT,
+  ...CLIENT_ONLY_CLOUD_KEYS_EXACT,
+]);
+
+/** True if a storage key is part of the upload payload (and should trigger auto-upload when changed). */
+export function isKeyIncludedInCloudUploadPayload(key: string): boolean {
+  return !shouldOmitKeyFromCloudPayload(key);
+}
+
+function shouldOmitKeyFromCloudPayload(key: string): boolean {
+  if (OMIT_FROM_UPLOAD_EXACT.has(key)) return true;
+  for (const prefix of SENSITIVE_DEVICE_STORAGE_KEY_PREFIXES) {
+    if (key.startsWith(prefix)) return true;
+  }
+  return false;
+}
+
+function isSensitiveDeviceKey(key: string): boolean {
+  if ((SENSITIVE_DEVICE_STORAGE_KEYS_EXACT as readonly string[]).includes(key)) return true;
+  for (const prefix of SENSITIVE_DEVICE_STORAGE_KEY_PREFIXES) {
+    if (key.startsWith(prefix)) return true;
+  }
+  return false;
+}
+
+/** Auth + device-only caches + client-only cloud metadata to keep when merging a downloaded snapshot. */
+function collectLocalKeysToPreserve(local: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const k of AUTH_KEYS_TO_PRESERVE) {
+    if (local[k] !== undefined) out[k] = local[k];
+  }
+  for (const k of CLIENT_ONLY_CLOUD_KEYS_EXACT) {
+    if (local[k] !== undefined) out[k] = local[k];
+  }
+  for (const [k, v] of Object.entries(local)) {
+    if (isSensitiveDeviceKey(k)) out[k] = v;
+  }
+  return out;
+}
+
+/** Remove keys that must never come from the server blob (defense in depth). */
+function stripExcludedKeysFromRemoteData(remote: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(remote)) {
+    if (shouldOmitKeyFromCloudPayload(k)) continue;
+    out[k] = v;
+  }
+  return out;
+}
+
+export function buildUploadPayload(all: Record<string, unknown>): {
+  schemaVersion: number;
+  data: Record<string, unknown>;
+} {
+  const data: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(all)) {
+    if (shouldOmitKeyFromCloudPayload(k)) continue;
+    data[k] = v;
+  }
+  return { schemaVersion: CLOUD_SETTINGS_SYNC_SCHEMA_VERSION, data };
+}
+
+export async function getSnapshotForUpload(): Promise<{
+  schemaVersion: number;
+  data: Record<string, unknown>;
+}> {
+  const all = await browser.storage.local.get();
+  return buildUploadPayload(all as Record<string, unknown>);
+}
+
+export async function setKnownRemoteUpdatedAt(iso: string | undefined): Promise<void> {
+  if (!iso || typeof iso !== "string") return;
+  await browser.storage.local.set({ [BSPLUS_CLOUD_KNOWN_REMOTE_UPDATED_AT_KEY]: iso });
+}
+
+/**
+ * Replace local extension storage with the downloaded snapshot, except auth keys
+ * and device-only sensitive caches, which are preserved from the current device.
+ */
+export async function applyDownloadedEnvelope(envelope: unknown): Promise<void> {
+  let remoteFlat: Record<string, unknown>;
+  if (
+    envelope &&
+    typeof envelope === "object" &&
+    "data" in envelope &&
+    (envelope as { data?: unknown }).data !== undefined &&
+    typeof (envelope as { data?: unknown }).data === "object" &&
+    (envelope as { data?: unknown }).data !== null &&
+    !Array.isArray((envelope as { data?: unknown }).data)
+  ) {
+    remoteFlat = (envelope as { data: Record<string, unknown> }).data;
+  } else if (envelope && typeof envelope === "object" && !Array.isArray(envelope)) {
+    remoteFlat = envelope as Record<string, unknown>;
+  } else {
+    throw new Error("Invalid cloud settings payload");
+  }
+
+  const local = await browser.storage.local.get();
+  const preserved = collectLocalKeysToPreserve(local);
+  const remoteSanitized = stripExcludedKeysFromRemoteData(remoteFlat);
+
+  await browser.storage.local.clear();
+  await browser.storage.local.set({ ...remoteSanitized, ...preserved });
+}

src/seqta/utils/engageRoute.ts

@@ -0,0 +1,17 @@
+/**
+ * Learn-style hash routes on Engage: `#?page=/home` → `"home"`.
+ * Falls back to the legacy path segment used by classic Learn routing.
+ */
+export function getEngageRoutePage(): string | undefined {
+  const hash = window.location.hash.replace(/^#/, "");
+  if (hash) {
+    const qs = hash.startsWith("?") ? hash : `?${hash}`;
+    const params = new URLSearchParams(qs);
+    const page = params.get("page");
+    if (page?.startsWith("/")) {
+      const segment = page.replace(/^\//, "").split("/")[0];
+      return segment || undefined;
+    }
+  }
+  return window.location.href.split("/")[4];
+}

src/seqta/utils/isSeqtaEngage.ts

@@ -0,0 +1,4 @@
+/** SEQTA Engage (React) uses a different shell from classic SEQTA Learn. */
+export function isSeqtaEngageExperience(): boolean {
+  return document.title.includes("SEQTA Engage");
+}

src/seqta/utils/listeners/MessageListener.ts

@@ -6,13 +6,13 @@ import {
   OpenMenuOptions,
 } from "@/seqta/utils/Openers/OpenMenuOptions";
 
+import { ThemeManager } from "@/plugins/built-in/themes/theme-manager";
 import {
   CloseThemeCreator,
   OpenThemeCreator,
 } from "@/plugins/built-in/themes/ThemeCreator";
 import sendThemeUpdate from "@/seqta/utils/sendThemeUpdate";
 import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent";
-import { ThemeManager } from "@/plugins/built-in/themes/theme-manager";
 
 const themeManager = ThemeManager.getInstance();
 
@@ -34,7 +34,10 @@ export class MessageHandler {
       case "UpdateThemePreview":
         if (request?.save == true) {
           const save = async () => {
-            await themeManager.saveTheme(request.body);
+            await themeManager.saveTheme({
+              ...request.body,
+              userEdited: true,
+            });
             if (request.body.enableTheme) {
               await themeManager.setTheme(request.body.id);
             }

src/seqta/utils/listeners/StorageChanges.ts

@@ -14,7 +14,13 @@ export class StorageChangeHandler {
   }
 
   private registerHandlers() {
-    settingsState.register("selectedColor", updateAllColors.bind(this));
+    settingsState.register("selectedColor", () => void updateAllColors());
+    settingsState.register("adaptiveThemeColour", () => void updateAllColors());
+    settingsState.register("adaptiveThemeGradient", () => void updateAllColors());
+    settingsState.register("adaptiveThemeColourTransition", () =>
+      void updateAllColors(),
+    );
+    settingsState.register("selectedTheme", () => void updateAllColors());
     settingsState.register("DarkMode", this.handleDarkModeChange.bind(this));
     settingsState.register("onoff", this.handleOnOffChange.bind(this));
     settingsState.register("shortcuts", this.handleShortcutsChange.bind(this));
@@ -30,10 +36,23 @@ export class StorageChangeHandler {
       "subjectfilters",
       FilterUpcomingAssessments.bind(this),
     );
+    settingsState.register(
+      "iconOnlySidebar",
+      this.handleIconOnlySidebarChange.bind(this),
+    );
+  }
+
+  private handleIconOnlySidebarChange(newValue: boolean | undefined) {
+    if (!document.body) return;
+    if (newValue) {
+      document.body.classList.add("icon-only-sidebar");
+    } else {
+      document.body.classList.remove("icon-only-sidebar");
+    }
   }
 
   private handleDarkModeChange() {
-    updateAllColors();
+    void updateAllColors();
   }
 
   private handleOnOffChange(newValue: boolean) {

src/seqta/utils/setupSettingsButton.ts

@@ -9,10 +9,11 @@ import { renderSettingsIfNeeded } from "./Adders/AddExtensionSettings";
 import { delay } from "./delay";
 
 export function setupSettingsButton() {
-  var AddedSettings = document.getElementById("AddedSettings");
+  const AddedSettings = document.getElementById("AddedSettings");
-  var extensionPopup = document.getElementById("ExtensionPopup");
+  const extensionPopup = document.getElementById("ExtensionPopup");
+  if (!AddedSettings || !extensionPopup) return;
 
-  AddedSettings!.addEventListener("click", async () => {
+  AddedSettings.addEventListener("click", async () => {
     if (SettingsClicked) {
       closeExtensionPopup(extensionPopup as HTMLElement);
     } else {
@@ -23,20 +24,20 @@ export function setupSettingsButton() {
       if (settingsState.animations) {
         animate(0, 1, {
           onUpdate: (progress) => {
-            extensionPopup!.style.opacity = progress.toString();
+            extensionPopup.style.opacity = progress.toString();
-            extensionPopup!.style.transform = `scale(${progress})`;
+            extensionPopup.style.transform = `scale(${progress})`;
           },
           type: "spring",
           stiffness: 280,
           damping: 20,
         });
       } else {
-        extensionPopup!.style.opacity = "1";
+        extensionPopup.style.opacity = "1";
-        extensionPopup!.style.transform = "scale(1)";
+        extensionPopup.style.transform = "scale(1)";
-        extensionPopup!.style.transition =
+        extensionPopup.style.transition =
           "opacity 0s linear, transform 0s linear";
       }
-      extensionPopup!.classList.remove("hide");
+      extensionPopup.classList.remove("hide");
       changeSettingsClicked(true);
     }
   });

src/types/CustomThemes.ts

@@ -12,7 +12,20 @@ export type CustomTheme = {
   hideThemeName: boolean;
   webURL?: string;
   selectedColor?: string;
+  /**
+   * When true, the theme forces light/dark via `forceDark` (`false` = light, `true` = dark).
+   * When false/omitted, use legacy rule: `forceDark !== undefined` still means "force" for old JSON.
+   */
+  forceTheme?: boolean;
   forceDark?: boolean;
+  /** True if installed from the BetterSEQTA theme store (not file import). */
+  installedFromStore?: boolean;
+  /** Server `updated_at` (Unix seconds) when this copy was installed or last auto-updated. */
+  storeSyncedAtSec?: number;
+  /** User saved edits in theme creator or popup; blocks store auto-update. */
+  userEdited?: boolean;
+  /** CSS custom property names (e.g. `--my-accent`) that receive the same value as `--better-main` when adaptive colours apply. */
+  adaptiveCssVariables?: string[];
 };
 
 export type LoadedCustomTheme = CustomTheme & {
@@ -37,3 +50,18 @@ export type ThemeList = {
   themes: CustomTheme[];
   selectedTheme: string;
 };
+
+/** Whether the theme forces appearance (light vs dark). */
+export function shouldForceThemeAppearance(theme: {
+  forceTheme?: boolean;
+  forceDark?: boolean;
+}): boolean {
+  if (theme.forceTheme === true) return true;
+  if (theme.forceTheme === false) return false;
+  return theme.forceDark !== undefined;
+}
+
+/** Resolved forced dark mode when forcing is active. */
+export function getForcedDarkMode(theme: { forceDark?: boolean }): boolean {
+  return theme.forceDark === true;
+}

src/types/storage.ts

@@ -32,6 +32,10 @@ export interface SettingsState {
   justupdated?: boolean;
   privacyStatementShown?: boolean;
   privacyStatementLastUpdated?: string;
+  /** One-time announcement: SEQTA Engage support for parents (dismissed popup queue). */
+  engageParentsAnnouncementShown?: boolean;
+  /** One-time announcement: BS Cloud automatic settings sync (last in startup popup queue). */
+  bsCloudAutoSyncAnnouncementShown?: boolean;
   timeFormat?: string;
   animations: boolean;
   defaultPage: string;
@@ -40,6 +44,10 @@ export interface SettingsState {
   newsSource?: string;
   mockNotices?: boolean;
   hideSensitiveContent?: boolean;
+  iconOnlySidebar?: boolean;
+  adaptiveThemeColour?: boolean;
+  adaptiveThemeGradient?: boolean;
+  adaptiveThemeColourTransition?: boolean;
 
   // depreciated keys
   animatedbk: boolean;
@@ -47,6 +55,14 @@ export interface SettingsState {
   lettergrade: boolean;
   assessmentsAverage?: boolean;
   notificationCollector?: boolean;
+
+  // BetterSEQTA Cloud (accounts.betterseqta.org)
+  bsplus_client_id?: string;
+  bsplus_token?: string;
+  bsplus_refresh_token?: string;
+  bsplus_user?: { id: string; email?: string; username?: string; displayName?: string; pfpUrl?: string; admin_level?: number };
+  /** When not `false`, automatic cloud settings sync is enabled (default-on). */
+  autoCloudSettingsSync?: boolean;
 }
 
 interface ToggleItem {