fix: assessment tooltips on homepage

Added easter egg to AddBetterSEQTAElements.ts

.dependency-cruiser.cjs

@@ -0,0 +1,397 @@
+/** @type {import('dependency-cruiser').IConfiguration} */
+module.exports = {
+  forbidden: [
+    {
+      name: "no-circular",
+      severity: "warn",
+      comment:
+        "This dependency is part of a circular relationship. You might want to revise " +
+        "your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ",
+      from: {},
+      to: {
+        circular: true,
+      },
+    },
+    {
+      name: "no-orphans",
+      comment:
+        "This is an orphan module - it's likely not used (anymore?). Either use it or " +
+        "remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
+        "add an exception for it in your dependency-cruiser configuration. By default " +
+        "this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
+        "files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
+      severity: "warn",
+      from: {
+        orphan: true,
+        pathNot: [
+          "(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$", // dot files
+          "[.]d[.]ts$", // TypeScript declaration files
+          "(^|/)tsconfig[.]json$", // TypeScript config
+          "(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$", // other configs
+        ],
+      },
+      to: {},
+    },
+    {
+      name: "no-deprecated-core",
+      comment:
+        "A module depends on a node core module that has been deprecated. Find an alternative - these are " +
+        "bound to exist - node doesn't deprecate lightly.",
+      severity: "warn",
+      from: {},
+      to: {
+        dependencyTypes: ["core"],
+        path: [
+          "^v8/tools/codemap$",
+          "^v8/tools/consarray$",
+          "^v8/tools/csvparser$",
+          "^v8/tools/logreader$",
+          "^v8/tools/profile_view$",
+          "^v8/tools/profile$",
+          "^v8/tools/SourceMap$",
+          "^v8/tools/splaytree$",
+          "^v8/tools/tickprocessor-driver$",
+          "^v8/tools/tickprocessor$",
+          "^node-inspect/lib/_inspect$",
+          "^node-inspect/lib/internal/inspect_client$",
+          "^node-inspect/lib/internal/inspect_repl$",
+          "^async_hooks$",
+          "^punycode$",
+          "^domain$",
+          "^constants$",
+          "^sys$",
+          "^_linklist$",
+          "^_stream_wrap$",
+        ],
+      },
+    },
+    {
+      name: "not-to-deprecated",
+      comment:
+        "This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later " +
+        "version of that module, or find an alternative. Deprecated modules are a security risk.",
+      severity: "warn",
+      from: {},
+      to: {
+        dependencyTypes: ["deprecated"],
+      },
+    },
+    {
+      name: "no-non-package-json",
+      severity: "error",
+      comment:
+        "This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
+        "That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
+        "available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " +
+        "in your package.json.",
+      from: {},
+      to: {
+        dependencyTypes: ["npm-no-pkg", "npm-unknown"],
+      },
+    },
+    {
+      name: "not-to-unresolvable",
+      comment:
+        "This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
+        "module: add it to your package.json. In all other cases you likely already know what to do.",
+      severity: "error",
+      from: {},
+      to: {
+        couldNotResolve: true,
+      },
+    },
+    {
+      name: "no-duplicate-dep-types",
+      comment:
+        "Likely this module depends on an external ('npm') package that occurs more than once " +
+        "in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " +
+        "maintenance problems later on.",
+      severity: "warn",
+      from: {},
+      to: {
+        moreThanOneDependencyType: true,
+        // as it's pretty common to have a type import be a type only import
+        // _and_ (e.g.) a devDependency - don't consider type-only dependency
+        // types for this rule
+        dependencyTypesNot: ["type-only"],
+      },
+    },
+
+    /* rules you might want to tweak for your specific situation: */
+
+    {
+      name: "not-to-spec",
+      comment:
+        "This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. " +
+        "If there's something in a spec that's of use to other modules, it doesn't have that single " +
+        "responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.",
+      severity: "error",
+      from: {},
+      to: {
+        path: "[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$",
+      },
+    },
+    {
+      name: "not-to-dev-dep",
+      severity: "error",
+      comment:
+        "This module depends on an npm package from the 'devDependencies' section of your " +
+        "package.json. It looks like something that ships to production, though. To prevent problems " +
+        "with npm packages that aren't there on production declare it (only!) in the 'dependencies'" +
+        "section of your package.json. If this module is development only - add it to the " +
+        "from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration",
+      from: {
+        path: "^(src)",
+        pathNot: "[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$",
+      },
+      to: {
+        dependencyTypes: ["npm-dev"],
+        // type only dependencies are not a problem as they don't end up in the
+        // production code or are ignored by the runtime.
+        dependencyTypesNot: ["type-only"],
+        pathNot: ["node_modules/@types/"],
+      },
+    },
+    {
+      name: "optional-deps-used",
+      severity: "info",
+      comment:
+        "This module depends on an npm package that is declared as an optional dependency " +
+        "in your package.json. As this makes sense in limited situations only, it's flagged here. " +
+        "If you're using an optional dependency here by design - add an exception to your" +
+        "dependency-cruiser configuration.",
+      from: {},
+      to: {
+        dependencyTypes: ["npm-optional"],
+      },
+    },
+    {
+      name: "peer-deps-used",
+      comment:
+        "This module depends on an npm package that is declared as a peer dependency " +
+        "in your package.json. This makes sense if your package is e.g. a plugin, but in " +
+        "other cases - maybe not so much. If the use of a peer dependency is intentional " +
+        "add an exception to your dependency-cruiser configuration.",
+      severity: "warn",
+      from: {},
+      to: {
+        dependencyTypes: ["npm-peer"],
+      },
+    },
+  ],
+  options: {
+    /* Which modules not to follow further when encountered */
+    doNotFollow: {
+      /* path: an array of regular expressions in strings to match against */
+      path: ["node_modules"],
+    },
+
+    /* Which modules to exclude */
+    // exclude : {
+    //   /* path: an array of regular expressions in strings to match against */
+    //   path: '',
+    // },
+
+    /* Which modules to exclusively include (array of regular expressions in strings)
+       dependency-cruiser will skip everything not matching this pattern
+    */
+    // includeOnly : [''],
+
+    /* List of module systems to cruise.
+       When left out dependency-cruiser will fall back to the list of _all_
+       module systems it knows of. It's the default because it's the safe option
+       It might come at a performance penalty, though.
+       moduleSystems: ['amd', 'cjs', 'es6', 'tsd']
+      
+       As in practice only commonjs ('cjs') and ecmascript modules ('es6')
+       are widely used, you can limit the moduleSystems to those.
+     */
+
+    // moduleSystems: ['cjs', 'es6'],
+
+    /* 
+      false: don't look at JSDoc imports (the default)
+      true: dependency-cruiser will detect dependencies in JSDoc-style
+      import statements. Implies "parser": "tsc", so the dependency-cruiser
+      will use the typescript parser for JavaScript files.
+     
+      For this to work the typescript compiler will need to be installed in the
+      same spot as you're running dependency-cruiser from.
+     */
+    // detectJSDocImports: true,
+
+    /* prefix for links in html and svg output (e.g. 'https://github.com/you/yourrepo/blob/main/'
+       to open it on your online repo or `vscode://file/${process.cwd()}/` to 
+       open it in visual studio code),
+     */
+    // prefix: `vscode://file/${process.cwd()}/`,
+
+    /* false (the default): ignore dependencies that only exist before typescript-to-javascript compilation
+       true: also detect dependencies that only exist before typescript-to-javascript compilation
+       "specify": for each dependency identify whether it only exists before compilation or also after
+     */
+    tsPreCompilationDeps: true,
+
+    /* list of extensions to scan that aren't javascript or compile-to-javascript.
+       Empty by default. Only put extensions in here that you want to take into
+       account that are _not_ parsable.
+    */
+    // extraExtensionsToScan: [".json", ".jpg", ".png", ".svg", ".webp"],
+
+    /* if true combines the package.jsons found from the module up to the base
+       folder the cruise is initiated from. Useful for how (some) mono-repos
+       manage dependencies & dependency definitions.
+     */
+    // combinedDependencies: false,
+
+    /* if true leave symlinks untouched, otherwise use the realpath */
+    // preserveSymlinks: false,
+
+    /* TypeScript project file ('tsconfig.json') to use for
+       (1) compilation and
+       (2) resolution (e.g. with the paths property)
+
+       The (optional) fileName attribute specifies which file to take (relative to
+       dependency-cruiser's current working directory). When not provided
+       defaults to './tsconfig.json'.
+     */
+    tsConfig: {
+      fileName: "tsconfig.json",
+    },
+
+    /* Webpack configuration to use to get resolve options from.
+
+       The (optional) fileName attribute specifies which file to take (relative
+       to dependency-cruiser's current working directory. When not provided defaults
+       to './webpack.conf.js'.
+
+       The (optional) `env` and `arguments` attributes contain the parameters
+       to be passed if your webpack config is a function and takes them (see 
+        webpack documentation for details)
+     */
+    // webpackConfig: {
+    //  fileName: 'webpack.config.js',
+    //  env: {},
+    //  arguments: {}
+    // },
+
+    /* Babel config ('.babelrc', '.babelrc.json', '.babelrc.json5', ...) to use
+      for compilation
+     */
+    // babelConfig: {
+    //   fileName: '.babelrc',
+    // },
+
+    /* List of strings you have in use in addition to cjs/ es6 requires
+       & imports to declare module dependencies. Use this e.g. if you've
+       re-declared require, use a require-wrapper or use window.require as
+       a hack.
+    */
+    // exoticRequireStrings: [],
+
+    /* options to pass on to enhanced-resolve, the package dependency-cruiser
+       uses to resolve module references to disk. The values below should be
+       suitable for most situations
+
+       If you use webpack: you can also set these in webpack.conf.js. The set
+       there will override the ones specified here.
+     */
+    enhancedResolveOptions: {
+      /* What to consider as an 'exports' field in package.jsons */
+      exportsFields: ["exports"],
+      /* List of conditions to check for in the exports field.
+         Only works when the 'exportsFields' array is non-empty.
+      */
+      conditionNames: ["import", "require", "node", "default", "types"],
+      /* The extensions, by default are the same as the ones dependency-cruiser
+         can access (run `npx depcruise --info` to see which ones that are in
+         _your_ environment). If that list is larger than you need you can pass
+         the extensions you actually use (e.g. [".js", ".jsx"]). This can speed
+         up module resolution, which is the most expensive step.
+       */
+      // extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
+      /* What to consider a 'main' field in package.json */
+      mainFields: ["module", "main", "types", "typings"],
+      /* A list of alias fields in package.jsons
+        
+         See [this specification](https://github.com/defunctzombie/package-browser-field-spec) and
+         the webpack [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealiasfields)
+         documentation.
+         
+         Defaults to an empty array (= don't use alias fields).
+       */
+      // aliasFields: ["browser"],
+    },
+
+    /* skipAnalysisNotInRules will make dependency-cruiser execute 
+       analysis strictly necessary for checking the rule set only. 
+
+       See https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#skipanalysisnotinrules
+       for details
+     */
+    skipAnalysisNotInRules: true,
+
+    /* List of built-in modules to use on top of the ones node declares.
+
+       See https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#builtinmodules-influencing-what-to-consider-built-in--core-modules
+       for details
+    */
+    builtInModules: {
+      add: [
+        "bun",
+        "bun:ffi",
+        "bun:jsc",
+        "bun:sqlite",
+        "bun:test",
+        "bun:wrap",
+        "detect-libc",
+        "undici",
+        "ws",
+      ],
+    },
+
+    reporterOptions: {
+      dot: {
+        /* pattern of modules that can be consolidated in the detailed
+           graphical dependency graph. The default pattern in this configuration
+           collapses everything in node_modules to one folder deep so you see
+           the external modules, but their innards.
+         */
+        collapsePattern: "node_modules/(?:@[^/]+/[^/]+|[^/]+)",
+
+        /* Options to tweak the appearance of your graph.See
+           https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#reporteroptions
+           for details and some examples. If you don't specify a theme
+           dependency-cruiser falls back to a built-in one.
+        */
+        // theme: {
+        //   graph: {
+        //     /* splines: "ortho" gives straight lines, but is slow on big graphs
+        //        splines: "true" gives bezier curves (fast, not as nice as ortho)
+        //    */
+        //     splines: "true"
+        //   },
+        // }
+      },
+      archi: {
+        /* pattern of modules that can be consolidated in the high level
+           graphical dependency graph. If you use the high level graphical
+           dependency graph reporter (`archi`) you probably want to tweak
+           this collapsePattern to your situation.
+        */
+        collapsePattern:
+          "^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)",
+
+        /* Options to tweak the appearance of your graph. If you don't specify a
+           theme for 'archi' dependency-cruiser will use the one specified in the
+           dot section above and otherwise use the default one.
+         */
+        // theme: { },
+      },
+      text: {
+        highlightFocused: true,
+      },
+    },
+  },
+};
+// generated: dependency-cruiser@16.10.0 on 2025-02-16T22:32:01.621Z

.eslintrc.json

@@ -12,12 +12,15 @@
   },
   "rules": {
     // allow importing ts extensions
-    "sort-imports": ["error", {
+    "sort-imports": [
+      "error",
+      {
         "ignoreCase": true,
         "ignoreDeclarationSort": true,
         "ignoreMemberSort": false,
         "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
-    }],
+      }
+    ],
     "import/extensions": [
       "error",
       "ignorePackages",

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,27 +0,0 @@
----
-name: Report A bug.
-about: Create a report of a present bug.
-title: "[BUG]"
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Please indicate how did you make this happen.
-
-**Expected behaviuor**
-Please add a clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - If using Windows, the build number. Find this by using ```winver``` and copying down the build id.
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,57 @@
+name: Bug report
+description: Report an issue with the modpack in its unmodified state. For other issues, use Discord.
+labels: bug
+title: "[BUG]"
+type: "Bug"
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before reporting an issue, [please search](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) to make sure it has not already been reported (make sure to search closed issues as well!).
+
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: Describe your issue. For general issues and questions you'll get a faster answer [from our Discord.](https://discord.gg/YzmbnCDkat)
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: Extension version
+      description: What version of the extension are you using?
+      placeholder: Find it by opening the config menu and clicking the about icon in the top right.
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: Browser
+      description: Which Browser are you using?
+      options:
+        - Chrome
+        - Firefox
+        - Brave
+        - Safari
+        - DuckDuckGO
+        - Microsoft Edge
+        - Other Chromium-Based Browser
+        - Other Non-Chromium-Based Browser
+    validations:
+      required: true
+
+  - type: checkboxes
+    attributes:
+      label: Confirm
+      options:
+        - label: This bug report is about an issue with the extension itself. I have not modified the extension nor added any unsupported plugins. If this is not the case, I know that I should post the issue to the extension's Discord support channel instead.
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Screenshots, video or any other information. Include photos of the console if possible
+      placeholder: |
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,4 @@
+contact_links:
+  - name: BetterSEQTA Community Support
+    url: https://discord.gg/YzmbnCDkat
+    about: Join our discord for community updates, discussion, and more!

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: "[FR] "
-labels: enhancement
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,52 @@
+name: Feature request
+description: Suggest a new Feature to be added or replaced in BetterSeqtaPLUS
+labels: enhancement
+title: "[FR]"
+
+body:
+  - type: checkboxes
+    attributes:
+      label: Confirm
+      options:
+        - label: "Is this feature request related to a Bug report?"
+          required: false
+
+  - type: input
+    attributes:
+      label: Bug report link
+      description: "If this feature request is related to a bug report, please insert the link to the bug report here"
+      placeholder: "https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues/..."
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: |
+        ## Feature details
+        Before you request a feature, [please search](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) if it has already been requested. (Make sure to check closed issues as well!)
+
+  - type: dropdown
+    attributes:
+      label: Feature type
+      multiple: false
+      options:
+        - Graphical
+        - Functional
+        - Not Sure
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: Feature Details
+      description: Please write, with as much detail as possible, what you would like to see from this feature.
+      placeholder: it would be cool if
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Additional details
+      description: Anything else that would help describe your vision (reference images, descriptions, etc)
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/vulnerability.md

@@ -1,17 +0,0 @@
----
-name: Vulnerability
-about: Report a vulnerability in this extension.
-title: "[VUL] "
-labels: ''
-assignees: ''
-
----
-
-**What is the vulnerability?**
-Describe the vulnerability in concise language.
-
-**Where is the vulnerability found?**
-Describe where the vulnerability is found.
-
-**What does this affect?**
-Explain what it affects. E.G: It opens up my school email to the world. etc.

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -0,0 +1,14 @@
+## Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+Fixes # (issue)
+
+## Type of change
+
+Please delete options that are not relevant.
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update

.gitignore

@@ -9,6 +9,8 @@ yarn.lock
 .env
 .env.submit
 
+dependency-graph.svg
+
 # Build
 extension.zip
 build/

.postcssrc.json

@@ -1,5 +0,0 @@
-{
-  "plugins": {
-    "tailwindcss": {}
-  }
-}

.prettierrc

@@ -1,5 +1,5 @@
 {
   "tabWidth": 2,
   "useTabs": false,
-  "semi": false
+  "semi": true
 }

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
+- Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
+- Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
+- Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
+- Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
+- Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities

CONTRIBUTING.md

@@ -3,6 +3,21 @@
 When contributing to this repository, please first discuss the change you wish to make via issue,
 email, or any other method with the owners of this repository before making a change.
 
+## Community
+
+Join our community channels to discuss the project, get help, and connect with other contributors:
+
+- **Discord Server**: [Join our Discord](https://discord.gg/betterseqta)
+- **GitHub Discussions**: For longer-form conversations
+- **GitHub Issues**: For bug reports and feature requests
+
+## Creating Plugins
+
+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 API Reference](./docs/advanced/plugin-api.md)
+
 ## Pull Request Process
 
 1. It is recommended to start by opening an issue to discuss the change you wish to make. This will allow us to discuss the change and ensure it is a good fit for the project.

README.md

@@ -1,4 +1,3 @@
-
 #
 
 <a href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel">
@@ -43,74 +42,72 @@
   - Easier Access Notices
   - Assessments
 - Options to remove certain items from the side menu
-- Fully customisable themes and an offical theme store
+- Grades calculator
+- Fully customisable themes and an official theme store
 - Notification for next lesson (sent 5 minutes before end of the lesson)
 - Browser Support
-  - Chrome Supported
+  - Chrome, Edge, Brave, Opera and other Chromium-Based browsers are supported
-  - Edge Supported
+  - Firefox Supported: [here](https://addons.mozilla.org/en-US/firefox/addon/betterseqta-plus/)!
-  - Brave Supported
+  - Safari (Experimental and not recommended - only available via compilation)
-  - Opera Supported
-  - Vivaldi Supported
-  - Chromium-based browsers are supported
-  - Firefox (Experimental - available [here](https://addons.mozilla.org/en-US/firefox/addon/betterseqta-plus/)
-  - Safari (Experimental - only available via compilation)
 
 ## 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).
 
-Don't worry- if you get stuck feel free to ask around in the discord. We're open and happy to help out! Happy creating :)
+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 :)
 
 ## Getting started
 
-1. Clone the repository
+&nbsp;&nbsp;&nbsp; **1. Clone the repository**
 
 ```
 git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
 ```
 
-### Running Development
+&nbsp;&nbsp;&nbsp; **2. Install dependencies**
 
-1. Install dependencies
+You may install the dependencies like below:
 
 ```
 npm install # or your preferred package manager like pnpm or yarn
 ```
 
-2. Run the dev script (it updates as you save files)
+But it is recommended to do it like this:
 
 ```
-npm run dev
+npm install --legacy-peer-deps # Only NPM supported
 ```
 
-3. Load the extension into chrome
+### Running Development
+
+&nbsp;&nbsp;&nbsp; **3. Run the dev script (it updates as you save files)**
+
+```
+npm run dev # or use your preferred package manager
+```
+
+### Building for production
+
+&nbsp;&nbsp;&nbsp; **4. Run the build script**
+
+```
+npm run build # or use your preferred package manager
+```
+
+&nbsp;&nbsp;&nbsp; **4.1. Package it up (optional)**
+
+```
+npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your preferred package manager
+```
+
+&nbsp;&nbsp;&nbsp; **5. Load the extension into chrome**
 
 - Go to `chrome://extensions`
 - Enable developer mode
 - Click `Load unpacked`
 - Select the `dist` folder
 
-Just remember, in order to update changes to the extension, you need to click the refresh button on the extension in `chrome://extensions` whenever anything's changed.
+Just remember, in order to update changes to the extension if you are running in developer mode, you need to click the refresh button on the extension in `chrome://extensions` whenever anything's changed.
-
-### Building for production
-
-1. Install dependencies
-
-```
-npm install # or your preferred package manager like pnpm or yarn
-```
-
-2. Run the build script
-
-```
-npm run build
-```
-
-3. Package it up (optional)
-
-```
-npm run zip # This requires 7-Zip to be installed in order to work
-```
 
 ## Folder Structure
 
@@ -118,6 +115,8 @@ 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.
@@ -129,10 +128,11 @@ The folder structure is as follows:
 </a>
 
 Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
+
 ## 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 by [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph)
+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
 
 ## Star History
 
-[![Star History Chart](https://api.star-history.com/svg?repos=BetterSEQTA/BetterSEQTA-Plus&type=Date)](https://star-history.com/#sethburkart123/EvenBetterSEQTA&Date)
+[![Star History Chart](https://api.star-history.com/svg?repos=BetterSEQTA/BetterSEQTA-Plus&type=Date)](https://star-history.com/#BetterSEQTA/BetterSEQTA-Plus&Date)

SECURITY.md

@@ -5,12 +5,12 @@
 Below here is the supported versions of BetterSEQTA+. Anything older than this is not supported and contains bugs.
 
 | Version | Supported |
-| ------- | ------------------ |
+| ------- | --------- |
-| 3.4.0   | :white_check_mark: |
+| 3.4.3   | ✅        |
-| <= 3.3   | :x:                |
+| < 3.4.3 | :x:       |
 
 `*` May not work on other devices.
 
 ## Reporting a Vulnerability
 
-If you find vulnerabilities, REPORT IT IMMEDIATELY. Make an issue and use the template provided for vulnerabilities.
+If you find vulnerabilities, REPORT IT IMMEDIATELY. open the [advisories tab](https://github.com/BetterSEQTA/BetterSEQTA-Plus/security/advisories) on the left and click the green "report a vulnerability" button or use [this quick-link](https://github.com/BetterSEQTA/BetterSEQTA-Plus/security/advisories/new) to create a new report

docs/README.md

@@ -0,0 +1,52 @@
+# BetterSEQTA+ Documentation
+
+🚧 DOCS UNDER CONSTRUCTION! 🚧
+
+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
+- [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
+- [Contributing Guide](../CONTRIBUTING.md) - How to contribute to BetterSEQTA+
+
+### Plugin System
+
+- [Creating Your First Plugin](./plugins/README.md) - A comprehensive, beginner-friendly guide to creating plugins
+- [Plugin API Reference](./plugins/api-reference.md) - Detailed technical documentation of the plugin APIs
+
+## 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!
+
+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.
+
+3. **Storage API**: Plugins can use the Storage API to persist data between sessions. The Storage API is also type-safe, ensuring that plugins can only access their own data.
+
+4. **SEQTA Integration**: BetterSEQTA+ integrates with SEQTA Learn by injecting code into the page. This allows plugins to modify the SEQTA UI and add new features.
+
+## Getting Help
+
+If you need help with BetterSEQTA+, you can:
+
+- [Open an Issue](https://github.com/SeqtaLearning/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.
+
+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
+
+BetterSEQTA+ is licensed under the [MIT License](../LICENSE).

docs/contributing.md

@@ -0,0 +1,268 @@
+# Contributing to BetterSEQTA+
+
+Thank you for your interest in contributing to BetterSEQTA+! This document provides guidelines and instructions for contributing to the project.
+
+## Table of Contents
+
+- [Code of Conduct](#code-of-conduct)
+- [Getting Started](#getting-started)
+  - [Setting Up Your Development Environment](#setting-up-your-development-environment)
+  - [Project Structure](#project-structure)
+- [Contributing Code](#contributing-code)
+  - [Branching Strategy](#branching-strategy)
+  - [Pull Request Process](#pull-request-process)
+  - [Coding Standards](#coding-standards)
+- [Reporting Bugs](#reporting-bugs)
+- [Suggesting Features](#suggesting-features)
+- [Writing Documentation](#writing-documentation)
+- [Community](#community)
+
+## Code of Conduct
+
+BetterSEQTA+ is committed to providing a welcoming and inclusive environment for all contributors. We expect all participants to adhere to our Code of Conduct, which promotes respectful and harassment-free interaction.
+
+Key points:
+
+- Be respectful and inclusive
+- Focus on what is best for the community
+- Show empathy towards other community members
+- Be open to constructive feedback
+
+## Getting Started
+
+### Setting Up Your Development Environment
+
+1. **Fork the Repository**
+
+   Start by forking the BetterSEQTA+ repository to your GitHub account.
+
+2. **Clone Your Fork**
+
+   ```bash
+   git clone https://github.com/yourusername/betterseqta-plus.git
+   cd betterseqta-plus
+   ```
+
+3. **Install Dependencies**
+
+   ```bash
+   npm install
+   ```
+
+4. **Set Up Development Environment**
+
+   ```bash
+   npm run dev
+   ```
+
+5. **Install in Chrome/Firefox**
+
+   Follow the [installation instructions](./installation.md#development-installation) to load the development version into your browser.
+
+### Project Structure
+
+Understanding the project structure will help you navigate the codebase:
+
+```
+betterseqta-plus/
+├── src/                  # Source code
+│   ├── plugins/          # Plugin system
+│   │   ├── built-in/     # Built-in plugins
+│   │   ├── core/         # Plugin core functionality
+│   ├── settings/         # Settings system
+│   ├── utils/            # Utility functions
+│   ├── extension/        # Browser extension code
+├── docs/                 # Documentation
+├── test/                 # Test files
+├── dist/                 # Build output (generated)
+├── package.json          # Project dependencies
+├── tsconfig.json         # TypeScript configuration
+└── README.md             # Project README
+```
+
+## Contributing Code
+
+### Branching Strategy
+
+We follow a simple branching strategy:
+
+- `main` - The main development branch
+- `feature/*` - Feature branches
+- `bugfix/*` - Bug fix branches
+- `docs/*` - Documentation branches
+
+Always create a new branch for your changes:
+
+```bash
+git checkout -b feature/my-new-feature
+```
+
+### Pull Request Process
+
+1. **Keep PRs Focused**
+
+   Each pull request should address a single concern. If you're working on multiple features, create separate PRs for each.
+
+2. **Write Clear Commit Messages**
+
+   Follow the conventional commits format:
+
+   ```
+   feat: add new feature
+   fix: resolve bug with timetable
+   docs: update installation instructions
+   ```
+
+3. **Update Documentation**
+
+   If your changes require documentation updates, include them in the same PR.
+
+4. **Run Tests**
+
+   Make sure all tests pass before submitting your PR:
+
+   ```bash
+   npm test
+   ```
+
+5. **Submit Your PR**
+
+   When you're ready, push your branch and create a pull request on GitHub.
+
+6. **Code Review**
+
+   All PRs will be reviewed by maintainers. Be responsive to feedback and make requested changes.
+
+7. **Merge**
+
+   Once approved, a maintainer will merge your PR.
+
+### Coding Standards
+
+We follow TypeScript best practices and have a consistent code style:
+
+1. **Use TypeScript**
+
+   All new code should be written in TypeScript with proper typing.
+
+2. **Follow Existing Patterns**
+
+   Match the coding style of the existing codebase.
+
+3. **Write Tests**
+
+   Add tests for new features and bug fixes.
+
+4. **Document Your Code**
+
+   Add comments for complex logic and JSDoc comments for functions.
+
+5. **Use Linters**
+
+   We use ESLint and Prettier. Run them before submitting your PR:
+
+   ```bash
+   npm run lint
+   npm run format
+   ```
+
+## Reporting Bugs
+
+If you find a bug, please report it by creating an issue on GitHub:
+
+1. **Search Existing Issues**
+
+   Check if the bug has already been reported.
+
+2. **Use the Bug Report Template**
+
+   Fill in all sections of the bug report template:
+
+   - Description
+   - Steps to reproduce
+   - Expected behavior
+   - Actual behavior
+   - Screenshots (if applicable)
+   - Environment (browser, OS, etc.)
+
+3. **Be Specific**
+
+   The more details you provide, the easier it will be to fix the bug.
+
+## Suggesting Features
+
+We welcome feature suggestions! To suggest a new feature:
+
+1. **Search Existing Suggestions**
+
+   Check if your idea has already been suggested.
+
+2. **Use the Feature Request Template**
+
+   Fill in all sections of the feature request template:
+
+   - Description
+   - Use case
+   - Potential implementation
+   - Alternatives considered
+
+3. **Be Patient**
+
+   Feature requests are evaluated based on alignment with project goals, feasibility, and maintainer bandwidth.
+
+## Writing Documentation
+
+Good documentation is crucial for the project. To contribute to documentation:
+
+1. **Identify Gaps**
+
+   Look for areas where documentation is missing or unclear.
+
+2. **Follow Documentation Style**
+
+   Maintain a consistent style and format.
+
+3. **Use Clear Language**
+
+   Write in simple, clear English. Avoid jargon when possible.
+
+4. **Include Examples**
+
+   Code examples and screenshots help users understand.
+
+5. **Submit a PR**
+
+   Follow the same process as code contributions, but create a branch with a `docs/` prefix.
+
+## Community
+
+Join our community channels to discuss the project, get help, and connect with other contributors:
+
+- **Discord Server**: [Join our Discord](https://discord.gg/betterseqta)
+- **GitHub Discussions**: For longer-form conversations
+- **GitHub Issues**: For bug reports and feature requests
+
+## Creating Plugins
+
+If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
+
+- [Creating Your First Plugin](./plugins/creating-plugins.md)
+- [Plugin API Reference](./advanced/plugin-api.md)
+
+## Recognition
+
+Contributors are recognized in several ways:
+
+1. **CONTRIBUTORS.md**: All contributors are listed in this file
+2. **Release Notes**: Significant contributions are highlighted in release notes
+3. **Community Recognition**: Regular shout-outs in community channels
+
+## Questions?
+
+If you have any questions about contributing, please:
+
+1. Check the documentation
+2. Ask in the Discord server
+3. Open a GitHub Discussion
+
+Thank you for contributing to BetterSEQTA+! Your efforts help make SEQTA better for students and teachers everywhere.

docs/installation.md

@@ -0,0 +1,182 @@
+# Installing BetterSEQTA+
+
+This guide will walk you through the process of installing and setting up BetterSEQTA+ for development or usage.
+
+## Prerequisites
+
+Before you begin, make sure you have the following installed:
+
+- [npm](https://www.npmjs.com/) (v7 or higher) or [Bun](https://bun.sh/) (recommended)
+- A modern web browser (Chrome, Firefox, Edge, etc.)
+
+## Installation Methods
+
+There are two ways to install BetterSEQTA+:
+
+1. **For Users**: Install the browser extension
+2. **For Developers**: Clone the repository and set up the development environment
+
+## For Users: Installing the Browser Extension
+
+BetterSEQTA+ is available as a browser extension for Chrome, Firefox, and Edge.
+
+### Chrome/Edge
+
+1. Visit the [Chrome Web Store page for BetterSEQTA+](https://chrome.google.com/webstore/detail/betterseqta)
+2. Click the "Add to Chrome" button
+3. Confirm the installation when prompted
+4. The extension will be installed and ready to use
+
+### Firefox
+
+1. Visit the [Firefox Add-ons page for BetterSEQTA+](https://addons.mozilla.org/en-US/firefox/addon/betterseqta)
+2. Click the "Add to Firefox" button
+3. Confirm the installation when prompted
+4. The extension will be installed and ready to use
+
+## For Developers: Setting Up the Development Environment
+
+If you want to develop for BetterSEQTA+ or modify the code, follow these steps:
+
+### 1. Clone the Repository
+
+```bash
+git clone https://github.com/SeqtaLearning/betterseqta-plus.git
+cd betterseqta-plus
+```
+
+### 2. Install Dependencies
+
+Using npm:
+
+```bash
+npm install --legacy-peer-deps
+```
+
+Using Bun (recommended):
+
+```bash
+bun install
+```
+
+### 3. Set Up Environment Variables - Only required for pushing to extension stores from the command line
+
+Copy the example environment file:
+
+```bash
+cp .env.submit.example .env
+```
+
+Edit the `.env` file with your SEQTA credentials and settings.
+
+### 4. Start the Development Server
+
+Using npm:
+
+```bash
+npm run dev
+```
+
+Using Bun:
+
+```bash
+bun run dev
+```
+
+This will start a development server and build the extension in watch mode.
+
+### 5. Load the Extension in Your Browser
+
+#### Chrome/Edge
+
+1. Open Chrome/Edge and navigate to `chrome://extensions` or `edge://extensions`
+2. Enable "Developer mode" using the toggle in the top right
+3. Click "Load unpacked" and select the `dist` folder in your BetterSEQTA+ directory
+4. The extension should now appear in your extensions list
+
+#### Firefox
+
+1. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`
+2. Click "Load Temporary Add-on..."
+3. Select the `manifest.json` file in the `dist` folder
+4. The extension should now appear in your add-ons list
+
+### 6. Test Your Changes
+
+After making changes to the code, the development server will automatically rebuild the extension. However, you may need to reload the extension in your browser to see the changes:
+
+1. Go to the extensions page in your browser
+2. Find BetterSEQTA+ and click the reload icon
+3. Refresh any SEQTA Learn pages you have open
+
+## Troubleshooting Installation
+
+### Common Issues
+
+#### "Cannot find module" errors
+
+If you see errors about missing modules, try:
+
+```bash
+rm -rf node_modules
+npm install
+```
+
+Or with Bun:
+
+```bash
+rm -rf node_modules
+bun install
+```
+
+#### Extension not appearing in SEQTA
+
+Make sure:
+
+- You're visiting a SEQTA Learn page
+- The extension is enabled
+- You've refreshed the page after installing the extension
+
+#### Development build not updating
+
+Try:
+
+1. Stopping the development server
+2. Clearing your browser cache
+3. Removing the extension from your browser
+4. Rebuilding the extension
+5. Loading it again
+
+## Updating BetterSEQTA+
+
+### For Users
+
+Browser extensions update automatically, but you can manually check for updates:
+
+- **Chrome/Edge**: Go to `chrome://extensions` or `edge://extensions`, enable Developer mode, and click "Update"
+- **Firefox**: Go to `about:addons`, click the gear icon, and select "Check for Updates"
+
+### For Developers
+
+If you're working on the code, pull the latest changes and reinstall dependencies:
+
+```bash
+git pull
+npm install
+npm run dev
+```
+
+Or with Bun:
+
+```bash
+git pull
+bun install
+bun run dev
+```
+
+## Next Steps
+
+Now that you have BetterSEQTA+ installed, you can:
+
+- [Getting Started with Plugins](./plugins/getting-started.md)
+- [Contribute to the project](../CONTRIBUTING.md)

docs/plugins/README.md

@@ -0,0 +1,297 @@
+# Creating Plugins for BetterSEQTA+
+
+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?
+
+In BetterSEQTA+, a plugin is like a mini-app that adds new features to SEQTA. Think of it as a piece of LEGO that you can snap onto SEQTA to make it do new things. For example, you could create a plugin that:
+
+- Changes how SEQTA looks
+- Adds new buttons or features
+- Shows extra information on your timetable
+- Collects notifications in a better way
+- Really, anything you can imagine!
+
+## Your First Plugin
+
+Let's create a super simple plugin together. We'll make one that adds a friendly message to the SEQTA homepage. Here's what we'll need:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+
+const myFirstPlugin: Plugin = {
+  // Every plugin needs these basic details
+  id: "my-first-plugin",
+  name: "My First Plugin",
+  description: "Adds a friendly message to SEQTA",
+  version: "1.0.0",
+
+  // This tells BetterSEQTA+ that users can turn our plugin on/off
+  disableToggle: true,
+
+  // Optional: Mark your plugin as beta to show a "Beta" tag in settings
+  beta: true,
+
+  // This is where the magic happens!
+  run: async (api) => {
+    // Wait for the homepage to load
+    api.seqta.onMount(".home-page", (homePage) => {
+      // Create our message
+      const message = document.createElement("div");
+      message.textContent = "Hello from my first plugin! 🎉";
+      message.style.padding = "20px";
+      message.style.backgroundColor = "#e9f5ff";
+      message.style.borderRadius = "8px";
+      message.style.margin = "20px";
+
+      // Add it to the page
+      homePage.prepend(message);
+    });
+
+    // Return a cleanup function that removes our message when the plugin is disabled
+    return () => {
+      const message = document.querySelector(".home-page > div");
+      message?.remove();
+    };
+  },
+};
+
+export default myFirstPlugin;
+```
+
+Let's break down what's happening here:
+
+1. First, we import the `Plugin` type that tells TypeScript what a plugin should look like
+2. We create our plugin object with some basic information:
+   - `id`: A unique name for your plugin (use lowercase and dashes)
+   - `name`: A friendly name that users will see
+   - `description`: Explain what your plugin does
+   - `version`: Your plugin's version number
+3. We set `disableToggle: true` so users can turn our plugin on/off in settings
+4. We set `beta: true` to mark the plugin as beta
+5. The `run` function is where we put our plugin's code
+6. We use `api.seqta.onMount` to wait for the homepage to load
+7. We create and style a message element
+8. We return a cleanup function that removes our changes when the plugin is disabled
+
+## The Plugin API
+
+When your plugin runs, it gets access to a powerful API that lets you do all sorts of things. Let's look at what you can do:
+
+### SEQTA API (`api.seqta`)
+
+This helps you interact with SEQTA's pages:
+
+```typescript
+// Wait for an element to appear on the page
+api.seqta.onMount(".some-class", (element) => {
+  // Do something with the element
+});
+
+// Know when the user changes pages
+api.seqta.onPageChange((page) => {
+  console.log("User went to:", page);
+});
+
+// Get the current page
+const currentPage = api.seqta.getCurrentPage();
+```
+
+### Settings API (`api.settings`)
+
+Want to let users customize your plugin? Use settings!
+
+```typescript
+import { BasePlugin } from "@/plugins/core/settings";
+import {
+  booleanSetting,
+  defineSettings,
+  Setting,
+} from "@/plugins/core/settingsHelpers";
+
+// Define your settings
+const settings = defineSettings({
+  showMessage: booleanSetting({
+    default: true,
+    title: "Show Welcome Message",
+    description: "Show a friendly message on the homepage",
+  }),
+});
+
+// Create a class for your plugin
+class MyPluginClass extends BasePlugin<typeof settings> {
+  @Setting(settings.showMessage)
+  showMessage!: boolean;
+}
+
+// Create your plugin
+const settingsInstance = new MyPluginClass();
+
+const myPlugin: Plugin<typeof settings> = {
+  // ... other plugin details ...
+  settings: settingsInstance.settings,
+
+  run: async (api) => {
+    // Use the setting
+    if (api.settings.showMessage) {
+      // Show the message
+    }
+
+    // Listen for setting changes
+    api.settings.onChange("showMessage", (newValue) => {
+      if (newValue) {
+        // Show the message
+      } else {
+        // Hide the message
+      }
+    });
+  },
+};
+```
+
+### Storage API (`api.storage`)
+
+Need to save some data? The storage API has got you covered:
+
+```typescript
+// Save some data
+await api.storage.set("lastVisit", new Date().toISOString());
+
+// Get it back later
+const lastVisit = await api.storage.get("lastVisit");
+
+// Listen for changes
+api.storage.onChange("lastVisit", (newValue) => {
+  console.log("Last visit updated:", newValue);
+});
+```
+
+### Events API (`api.events`)
+
+Want your plugin to be able to interface with other plugins? Then use events!
+
+```typescript
+// Listen for an event
+api.events.on("myCustomEvent", (data) => {
+  console.log("Got event:", data);
+});
+
+// Send an event
+api.events.emit("myCustomEvent", { some: "data" });
+```
+
+## Adding Styles
+
+Want to make your plugin look pretty? You can add CSS styles:
+
+```typescript
+const myPlugin: Plugin = {
+  // ... other plugin details ...
+
+  // Add your CSS here
+  styles: `
+    .my-plugin-message {
+      background: linear-gradient(135deg, #6e8efb, #a777e3);
+      color: white;
+      padding: 20px;
+      border-radius: 12px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      margin: 20px;
+      animation: slide-in 0.3s ease-out;
+    }
+    
+    @keyframes slide-in {
+      from { transform: translateY(-20px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+  `,
+
+  run: async (api) => {
+    // Your plugin code here
+  },
+};
+```
+
+## Best Practices
+
+Here are some tips to make your plugin awesome:
+
+1. **Always Clean Up**: When your plugin is disabled, clean up any changes you made:
+
+   ```typescript
+   run: async (api) => {
+     // Add stuff to the page
+     const element = document.createElement("div");
+     document.body.appendChild(element);
+
+     // Return a cleanup function
+     return () => {
+       element.remove();
+     };
+   };
+   ```
+
+2. **Use TypeScript**: It helps catch errors before they happen and makes your code easier to understand.
+
+3. **Test Your Plugin**: Make sure it works in different situations:
+
+   - When SEQTA is loading
+   - When the user switches pages
+   - When the plugin is enabled/disabled
+   - When settings are changed
+
+4. **Keep It Fast**: Don't slow down SEQTA:
+
+   - Use `onMount` instead of intervals or timeouts
+   - Clean up event listeners when they're not needed
+   - Don't do heavy calculations on the main thread
+
+5. **Make It User-Friendly**:
+   - Add clear settings with good descriptions
+   - Use `disableToggle: true` so users can turn it off if needed
+   - Add helpful error messages if something goes wrong
+   - Use `beta: true` for experimental features to let users know they're trying something new
+
+## Plugin Metadata Options
+
+Your plugin object supports several optional flags to customize how it appears and behaves:
+
+```typescript
+const myPlugin: Plugin = {
+  id: "my-plugin",
+  name: "My Plugin",
+  description: "What my plugin does",
+  version: "1.0.0",
+  
+  // Optional flags:
+  disableToggle: true,     // Show enable/disable toggle in settings
+  defaultEnabled: false,   // Start disabled by default (requires disableToggle: true)
+  beta: true,             // Show "Beta" tag in settings UI
+  
+  // Your plugin code...
+  run: async (api) => { /* ... */ },
+};
+```
+
+- **`disableToggle`**: When `true`, users can enable/disable your plugin in settings
+- **`defaultEnabled`**: When `false`, your plugin starts disabled (only works with `disableToggle: true`)
+- **`beta`**: When `true`, shows an orange "Beta" tag next to your plugin name in settings
+
+## Examples
+
+Want to see more examples? Check out our built-in plugins:
+
+- [themes](../../src/plugins/built-in/themes/index.ts): Shows how to change SEQTA's appearance
+- [notificationCollector](../../src/plugins/built-in/notificationCollector/index.ts): Shows how to work with SEQTA's notifications
+- [timetable](../../src/plugins/built-in/timetable/index.ts): Shows how to modify SEQTA's timetable view
+- [assessmentsAverage](../../src/plugins/built-in/assessmentsAverage/index.ts): Shows how to add new features to existing pages
+
+## Need Help?
+
+Got stuck? No worries! Here's where you can get help:
+
+- Join our [Discord server](https://discord.gg/YzmbnCDkat)
+- 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)

docs/plugins/api-reference.md

@@ -0,0 +1,366 @@
+# 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).
+
+## Plugin Structure
+
+Here's how a plugin is structured:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+import { BasePlugin } from "@/plugins/core/settings";
+import {
+  booleanSetting,
+  defineSettings,
+  Setting,
+} from "@/plugins/core/settingsHelpers";
+
+// First, define your settings
+const settings = defineSettings({
+  enabled: booleanSetting({
+    default: true,
+    title: "Enable Feature",
+    description: "Turn this feature on or off",
+  }),
+});
+
+// Create a class to handle your settings
+class MyPluginClass extends BasePlugin<typeof settings> {
+  @Setting(settings.enabled)
+  enabled!: boolean;
+}
+
+// Create an instance of your settings
+const settingsInstance = new MyPluginClass();
+
+// Create your plugin
+const myPlugin: Plugin<typeof settings> = {
+  id: "my-plugin",
+  name: "My Plugin",
+  description: "A cool plugin that does things",
+  version: "1.0.0",
+  settings: settingsInstance.settings,
+  disableToggle: true,
+  beta: true,
+
+  run: async (api) => {
+    console.log("Plugin is running!");
+
+    // Do stuff when settings change
+    api.settings.onChange("enabled", (enabled) => {
+      if (enabled) {
+        console.log("Feature enabled!");
+      }
+    });
+
+    // Return a cleanup function
+    return () => {
+      console.log("Plugin cleanup");
+    };
+  },
+};
+
+export default myPlugin;
+```
+
+## Plugin Metadata
+
+The plugin object supports several metadata fields and options:
+
+```typescript
+interface Plugin {
+  // Required fields
+  id: string;                    // Unique identifier (lowercase, dashes)
+  name: string;                  // Display name shown to users
+  description: string;           // Brief description of what the plugin does
+  version: string;               // Semantic version (e.g., "1.0.0")
+  settings: PluginSettings;      // Plugin settings object
+  run: (api: PluginAPI) => void; // Main plugin function
+
+  // Optional fields
+  styles?: string;               // CSS styles to inject
+  disableToggle?: boolean;       // Show enable/disable toggle in settings
+  defaultEnabled?: boolean;      // Start enabled/disabled (requires disableToggle)
+  beta?: boolean;               // Show "Beta" tag in settings UI
+}
+```
+
+### Metadata Options
+
+- **`disableToggle`**: When `true`, users can enable/disable your plugin in the settings page
+- **`defaultEnabled`**: When `false`, your plugin starts disabled by default (only works with `disableToggle: true`)
+- **`beta`**: When `true`, displays an orange "Beta" tag next to your plugin name in the settings UI
+- **`styles`**: CSS string that gets injected into the page when your plugin runs
+
+## SEQTA API
+
+The SEQTA API helps you interact with SEQTA's pages:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+
+const seqtaPlugin: Plugin<typeof settings> = {
+  id: "seqta-example",
+  name: "SEQTA Example",
+  description: "Shows how to use the SEQTA API",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: true,
+
+  run: async (api) => {
+    // Wait for elements to appear
+    const { unregister: timetableUnregister } = api.seqta.onMount(
+      ".timetable",
+      (timetable) => {
+        const button = document.createElement("button");
+        button.textContent = "Export";
+        timetable.appendChild(button);
+      },
+    );
+
+    // Track page changes
+    const { unregister: pageUnregister } = api.seqta.onPageChange((page) => {
+      console.log("User went to:", page);
+    });
+
+    // Clean up when disabled
+    return () => {
+      timetableUnregister();
+      pageUnregister();
+    };
+  },
+};
+
+export default seqtaPlugin;
+```
+
+## Settings API
+
+Here's how to add settings to your plugin:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+import { BasePlugin } from "@/plugins/core/settings";
+import {
+  booleanSetting,
+  stringSetting,
+  numberSetting,
+  selectSetting,
+  defineSettings,
+  Setting,
+} from "@/plugins/core/settingsHelpers";
+
+// Define your settings
+const settings = defineSettings({
+  darkMode: booleanSetting({
+    default: false,
+    title: "Dark Mode",
+    description: "Enable dark mode",
+  }),
+  userName: stringSetting({
+    default: "",
+    title: "User Name",
+    description: "Your display name",
+    placeholder: "Enter your name...",
+  }),
+  theme: selectSetting({
+    default: "light",
+    title: "Theme",
+    description: "Choose your theme",
+    options: [
+      { value: "light", label: "Light" },
+      { value: "dark", label: "Dark" },
+    ],
+  }),
+});
+
+// Create your settings class
+class ThemePluginClass extends BasePlugin<typeof settings> {
+  @Setting(settings.darkMode)
+  darkMode!: boolean;
+
+  @Setting(settings.userName)
+  userName!: string;
+
+  @Setting(settings.theme)
+  theme!: string;
+}
+
+// Create the plugin
+const themePlugin: Plugin<typeof settings> = {
+  id: "theme-example",
+  name: "Theme Example",
+  description: "Shows how to use settings",
+  version: "1.0.0",
+  settings: new ThemePluginClass().settings,
+  disableToggle: true,
+
+  run: async (api) => {
+    // Apply initial settings
+    if (api.settings.darkMode) {
+      document.body.classList.add("dark");
+    }
+
+    // Listen for changes
+    const { unregister } = api.settings.onChange("darkMode", (enabled) => {
+      document.body.classList.toggle("dark", enabled);
+    });
+
+    return () => {
+      unregister();
+      document.body.classList.remove("dark");
+    };
+  },
+};
+
+export default themePlugin;
+```
+
+## Storage API
+
+Here's how to use storage in your plugin:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+
+const storagePlugin: Plugin<typeof settings> = {
+  id: "storage-example",
+  name: "Storage Example",
+  description: "Shows how to use storage",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: true,
+
+  run: async (api) => {
+    // Wait for storage to be ready
+    await api.storage.loaded;
+
+    // Save some data
+    await api.storage.set("lastVisit", new Date().toISOString());
+
+    // Get saved data
+    const lastVisit = await api.storage.get("lastVisit");
+    console.log("Last visit:", lastVisit);
+
+    // Listen for changes
+    const { unregister } = api.storage.onChange("lastVisit", (newValue) => {
+      console.log("Last visit updated:", newValue);
+    });
+
+    return () => {
+      unregister();
+    };
+  },
+};
+
+export default storagePlugin;
+```
+
+## Events API
+
+Here's how to use events in your plugin:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+
+const eventsPlugin: Plugin<typeof settings> = {
+  id: "events-example",
+  name: "Events Example",
+  description: "Shows how to use events",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: true,
+
+  run: async (api) => {
+    // Listen for theme changes
+    const { unregister: themeListener } = api.events.on(
+      "theme.changed",
+      (theme) => {
+        console.log("Theme changed to:", theme);
+      },
+    );
+
+    // Listen for notifications
+    const { unregister: notifyListener } = api.events.on(
+      "notification.new",
+      (notification) => {
+        console.log("New notification:", notification);
+      },
+    );
+
+    // Clean up listeners
+    return () => {
+      themeListener();
+      notifyListener();
+    };
+  },
+};
+
+export default eventsPlugin;
+```
+
+## Performance Tips
+
+Here's how to write efficient plugins:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+
+const efficientPlugin: Plugin<typeof settings> = {
+  id: "efficient-example",
+  name: "Efficient Example",
+  description: "Shows performance best practices",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: true,
+
+  run: async (api) => {
+    // ✅ Good: Use onMount
+    const { unregister } = api.seqta.onMount(".timetable", (el) => {
+      el.classList.add("enhanced");
+    });
+
+    // ❌ Bad: Don't use intervals
+    // const interval = setInterval(() => {
+    //   const el = document.querySelector('.timetable');
+    //   if (el) el.classList.add('enhanced');
+    // }, 100);
+
+    // ✅ Good: Cache DOM elements
+    const header = document.querySelector(".header");
+    if (header) {
+      // Reuse header instead of querying again
+    }
+
+    // ✅ Good: Batch DOM updates
+    const fragment = document.createDocumentFragment();
+    for (let i = 0; i < 10; i++) {
+      const div = document.createElement("div");
+      fragment.appendChild(div);
+    }
+    document.body.appendChild(fragment);
+
+    return () => {
+      unregister();
+      // clearInterval(interval); // If you used the bad approach
+    };
+  },
+};
+
+export default efficientPlugin;
+```
+
+Each plugin should be in its own file and exported as the default export. The plugin should:
+
+1. Import necessary types and helpers
+2. Define settings if needed
+3. Create a settings class if using settings
+4. Create the plugin object with proper type annotation
+5. Export the plugin as default
+
+Remember to always:
+
+- Use proper TypeScript types
+- Clean up when your plugin is disabled
+- Handle errors gracefully
+- Follow the plugin structure shown above

jest.config.js

@@ -0,0 +1,17 @@
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/src'],
+  testMatch: [
+    '**/__tests__/**/*.ts',
+    '**/?(*.)+(spec|test).ts'
+  ],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'js', 'json'],
+  collectCoverageFrom: [
+    'src/**/*.ts',
+    '!src/**/*.d.ts',
+  ],
+}; 

lib/base64loader.ts

@@ -1,13 +1,46 @@
 import fs from "fs";
 import mime from "mime-types";
 
+/**
+ * A Vite plugin designed to load files as base64 encoded data URLs.
+ * This plugin intercepts module imports that have a `?base64` query parameter
+ * appended to the file path. It then reads the targeted file, converts its content
+ * to a base64 string, and constructs a data URL which is then exported as the
+ * default export of a new JavaScript module.
+ *
+ * @example
+ * // To use this loader, import a file with ?base64 query:
+ * // import myImageBase64 from './path/to/myimage.png?base64';
+ * // myImageBase64 will then be a string like "data:image/png;base64,..."
+ */
 export const base64Loader = {
+  /**
+   * The name of the Vite plugin.
+   * @type {string}
+   */
   name: "base64-loader",
+  /**
+   * The core transformation function of the Vite plugin.
+   * It is called by Vite for modules that might need transformation. This function
+   * checks if the module ID includes the `?base64` query. If so, it reads the
+   * specified file, converts it to a base64 data URL, and returns a new
+   * JavaScript module that default exports this data URL.
+   *
+   * @param {any} _ The original code of the file. This parameter is unused by this loader.
+   * @param {string} id The ID of the module being transformed. This string typically
+   *                    contains the absolute file path and any query parameters
+   *                    (e.g., "/path/to/file.png?base64").
+   * @returns {string | null} If the module ID does not contain `?base64` query,
+   *                          it returns `null` to indicate no transformation.
+   *                          Otherwise, it returns a string of JavaScript code
+   *                          that default exports the base64 data URL of the file.
+   *                          For example: `export default 'data:image/png;base64,xxxx';`
+   */
   transform(_: any, id: string) {
     const [filePath, query] = id.split("?");
     if (query !== "base64") return null;
 
-    const data = fs.readFileSync(filePath, { encoding: 'base64' });
+    const data = fs.readFileSync(filePath, { encoding: "base64" });
     const mimeType = mime.lookup(filePath);
     const dataURL = `data:${mimeType};base64,${data}`;
 

lib/closePlugin.ts

@@ -0,0 +1,58 @@
+// ref: https://stackoverflow.com/a/76920975
+import type { Plugin } from "vite";
+
+/**
+ * Creates a Vite plugin designed to gracefully handle the conclusion of the build process.
+ * This plugin utilizes the `buildEnd` and `closeBundle` hooks provided by Vite.
+ * It checks for errors at the end of the build:
+ * - If an error occurred during the build (`buildEnd` hook receives an error), it logs the error
+ *   and explicitly exits the Node.js process with a status code of 1 (indicating failure).
+ * - If the build completes without errors and the bundle is successfully generated
+ *   (`closeBundle` hook is called), it logs a success message and exits the process
+ *   with a status code of 0 (indicating success).
+ * This explicit process exiting can be useful in CI/CD environments or scripts that
+ * rely on the process status code to determine the build outcome.
+ * The core logic for using these hooks to exit the process is inspired by
+ * a solution found on StackOverflow (https://stackoverflow.com/a/76920975).
+ *
+ * @returns {Plugin} A Vite plugin object configured with `name`, `buildEnd`, and `closeBundle` hooks.
+ */
+export default function ClosePlugin(): Plugin {
+  return {
+    /**
+     * The unique name of this Vite plugin. This name is used by Vite for identification
+     * purposes and will appear in warnings, errors, and logs related to this plugin.
+     * @type {string}
+     */
+    name: "ClosePlugin", // required, will show up in warnings and errors
+
+    /**
+     * A Vite hook that is called when the build process has finished, regardless of
+     * whether it was successful or encountered an error.
+     *
+     * @param {Error} [error] An optional error object. If the build failed, this parameter
+     *                        will contain the error that occurred. If the build was successful,
+     *                        this parameter will be undefined or null.
+     */
+    buildEnd(error) {
+      if (error) {
+        console.error("Error bundling");
+        console.error(error);
+        process.exit(1); // Exit with status 1 indicating an error
+      } else {
+        console.log("Build ended"); // Log successful completion of the build phase
+      }
+    },
+
+    /**
+     * A Vite hook that is called after the `buildEnd` hook, but only if the build
+     * was successful (i.e., no errors were passed to `buildEnd`) and all output
+     * files have been generated and written to disk. This signifies the successful
+     * completion of the entire bundling process.
+     */
+    closeBundle() {
+      console.log("Bundle closed"); // Log successful closure of the bundle
+      process.exit(0); // Exit with status 0 indicating a successful build
+    },
+  };
+}

lib/createManifest.ts

@@ -1,12 +1,22 @@
-import type { Browser, BuildTarget, Manifest } from './types'
+import type { Browser, BuildTarget, Manifest } from "./types";
-import type { AnyCase } from './utils'
+import type { AnyCase } from "./utils";
+
 /**
- *
+ * Packages a given manifest object with a specific target browser identifier.
+ * This function is typically used in multi-browser extension build processes
+ * to create a configuration object that pairs the manifest data with the browser
+ * it's intended for. The `AnyCase<Browser>` type for the browser parameter
+ * implies that browser names like 'chrome', 'firefox', etc., can be provided
+ * in various casings.
  *
  * @export
- * @param {Manifest} manifest
+ * @param {Manifest} manifest The core manifest data for the extension,
- * @param {AnyCase<Browser>} browser
+ *                            compatible with `chrome.runtime.ManifestV3` as defined by the {@link Manifest} type.
- * @return {*}  {@link BuildTarget}
+ * @param {AnyCase<Browser>} browser The target browser identifier (e.g., 'chrome', 'firefox', 'CHROME').
+ *                                   Refers to the {@link Browser} type, allowing for flexible casing.
+ * @returns {BuildTarget} An object that pairs the `manifest` with its target `browser`.
+ *                        The structure is `{ manifest: Manifest; browser: AnyCase<Browser>; }`
+ *                        as defined by the {@link BuildTarget} type.
  */
 export function createManifest(
   manifest: Manifest,
@@ -15,19 +25,22 @@ export function createManifest(
   return {
     manifest,
     browser,
-  }
+  };
 }
 
 /**
- * create a base Manifest to inherit from
+ * Defines a base manifest object.
- * type Manifest = chrome.runtime.ManifestV3
+ * This function is typically used to establish a common, shared foundation for an extension's manifest
- *
+ * (compatible with `chrome.runtime.ManifestV3` as per the {@link Manifest} type).
- * use as shared base to extend inBrowser manifests
+ * This base can then be extended or modified for different browsers or specific build configurations.
+ * For example, you might define core permissions and properties here, and then add
+ * browser-specific keys in subsequent steps.
  *
  * @export
- * @param {Manifest} manifest
+ * @param {Manifest} manifest The core manifest data to be used as a base.
- * @return {*}  {@link Manifest}
+ *                            This should conform to the {@link Manifest} type structure.
+ * @returns {Manifest} The provided manifest object, intended to serve as a reusable base.
  */
 export function createManifestBase(manifest: Manifest): Manifest {
-  return manifest
+  return manifest;
 }

lib/inlineWorker.ts

@@ -0,0 +1,70 @@
+// vite-plugin-inline-worker-dev.ts
+// vite-plugin-inline-worker-dev.ts
+import { Plugin } from "vite";
+import fs from "fs/promises";
+import { build } from "esbuild";
+
+/**
+ * Creates a Vite plugin designed for bundling and inlining web worker scripts during development.
+ * This plugin specifically targets module imports that include a `?inlineWorker` query parameter.
+ * When such an import is encountered, the plugin bundles the worker script using `esbuild`
+ * and then generates JavaScript code that inlines this bundled worker as a Blob,
+ * creating the worker instance via `URL.createObjectURL()`.
+ * The name "vite:inline-worker-dev" suggests it's primarily intended for development builds.
+ *
+ * @returns {Plugin} A Vite plugin object with `name` and `load` properties.
+ */
+export default function InlineWorkerDevPlugin(): Plugin {
+  return {
+    /**
+     * The unique name of this Vite plugin.
+     * @type {string}
+     */
+    name: "vite:inline-worker-dev",
+    /**
+     * The Vite hook responsible for loading and transforming modules.
+     * This function intercepts modules imported with `?inlineWorker`.
+     * For such modules, it bundles the worker script and returns JavaScript code
+     * that, when executed, will create an instance of this worker from an inlined Blob.
+     *
+     * @async
+     * @param {string} id The path or ID of the module Vite is attempting to load,
+     *                    potentially including query parameters (e.g., "/path/to/worker.ts?inlineWorker").
+     * @returns {Promise<string | null>} A promise that resolves to:
+     *                                   - `null` if the module ID does not include `?inlineWorker`.
+     *                                   - A string of JavaScript code if the module is an inline worker.
+     *                                     This code will define a default export function (e.g., `InlineWorker`)
+     *                                     that, when called, creates and returns a new `Worker` instance
+     *                                     from the bundled and inlined worker script.
+     */
+    async load(id) {
+      if (id.includes("?inlineWorker")) {
+        const [cleanPath] = id.split("?");
+        // Note: Original code had `await fs.readFile(cleanPath, "utf-8");` but `code` wasn't used.
+        // `esbuild` directly takes `cleanPath` as an entry point.
+        const result = await build({
+          entryPoints: [cleanPath], // esbuild uses the file path directly
+          bundle: true,
+          write: false, // We want the output in memory, not written to disk
+          platform: "browser", // Target environment for the worker code
+          format: "iife", // Immediately Invoked Function Expression, suitable for workers
+          target: "esnext", // Transpile to modern JavaScript
+        });
+
+        const workerCode = result.outputFiles[0].text;
+
+        // Construct JavaScript code that will create the worker from a Blob.
+        // This code is what gets returned to Vite and replaces the original import.
+        const workerBlobCode = `
+          const code = ${JSON.stringify(workerCode)};
+          export default function InlineWorker() {
+            const blob = new Blob([code], { type: 'application/javascript' });
+            return new Worker(URL.createObjectURL(blob), { type: 'module' });
+          }
+        `;
+        return workerBlobCode;
+      }
+      return null; // Let Vite handle other modules normally
+    },
+  };
+}

lib/patchPackage.ts

@@ -1,65 +0,0 @@
-/* 
-  TEMPORARY FIX FOR CHROME 130+ builds
-*/
-
-import path from 'node:path';
-import fs from 'fs';
-import { PluginOption } from 'vite';
-import { ManifestV3Export } from '@crxjs/vite-plugin';
-
-const manifestPath = path.resolve('dist/chrome/manifest.json');
-
-export function updateManifestPlugin(): PluginOption {
-  return {
-    name: 'update-manifest-plugin',
-    enforce: 'post',
-    closeBundle() {
-      forceDisableUseDynamicUrl();
-    },
-
-    configureServer(server) {
-      server.httpServer?.once('listening', () => {
-        const updated = forceDisableUseDynamicUrl();
-        if (updated) {
-          server.ws.send({ type: 'full-reload' });
-          console.log('** updated **');
-        }
-
-        fs.watchFile(manifestPath, () => {
-          console.log('** watchFile ** ');
-          const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
-          if (manifestContents.web_accessible_resources.some((resource: any) => resource.use_dynamic_url)) {
-            const updated = forceDisableUseDynamicUrl();
-            if (updated) {
-              server.ws.send({ type: 'full-reload' });
-              console.log('** updated **');
-            }
-          }
-        });
-      });
-    },
-
-    writeBundle() {
-      console.log('### writeBundle ##');
-      forceDisableUseDynamicUrl();
-    },
-  };
-}
-
-function forceDisableUseDynamicUrl() {
-  if (!fs.existsSync(manifestPath)) {
-    return false;
-  }
-
-  const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8')) as Awaited<ManifestV3Export>;
-
-  if (typeof manifestContents === 'function' || !manifestContents.web_accessible_resources) return false;
-  if (manifestContents.web_accessible_resources.every((resource) => !resource.use_dynamic_url)) return false;
-
-  manifestContents.web_accessible_resources.forEach((resource) => {
-    if (resource.use_dynamic_url) resource.use_dynamic_url = false;
-  });
-
-  fs.writeFileSync(manifestPath, JSON.stringify(manifestContents, null, 2));
-  return true;
-}

lib/publish.js

@@ -1,76 +1,199 @@
-const glob = require('glob');
+/**
-const semver = require('semver');
+ * @fileoverview
-const { execSync } = require('child_process');
+ * This script is a command-line utility for publishing the BetterSEQTA+ extension.
-const path = require('path');
+ * It automates the process of finding the latest built extension ZIP files for specified
+ * browsers, zipping the project source code (for Firefox), and then invoking the
+ * `publish-extension` tool with the appropriate arguments.
+ *
+ * To use this script, invoke it with Node.js followed by browser arguments:
+ * e.g., `node lib/publish.js --b chrome firefox`
+ * or `node lib/publish.js --b chrome`
+ * or `node lib/publish.js --b firefox`
+ */
 
+const glob = require("glob");
+const semver = require("semver");
+const { execSync } = require("child_process");
+const path = require("path");
+
+/**
+ * Determines the latest version string from a list of filenames that include version numbers.
+ * Filenames are expected to follow a pattern like `betterseqtaplus@3.4.5.1-chrome.zip`.
+ * This function handles potential 4-part versions (e.g., `3.4.5.1`) by trimming them
+ * to 3 parts (e.g., `3.4.5`) for comparison using the `semver` library. After identifying
+ * the latest semver-compatible version, it returns the original full version string
+ * (e.g., "3.4.5.1") that corresponds to this latest version.
+ *
+ * @param {string[]} files An array of filenames.
+ * @returns {string | null} The latest version string (e.g., "3.4.5.1") found among the files,
+ *                          or `null` if no valid version numbers are found or no files are provided.
+ */
 function getLatestVersion(files) {
-  console.log('Files passed to getLatestVersion:', files);
+  console.log("Files passed to getLatestVersion:", files);
-  const versions = files.map(file => {
-    const match = file.match(/@(\d+\.\d+\.\d+)-/);
-    console.log('Matching file:', file, 'Version found:', match ? match[1] : 'None');
-    return match ? match[1] : null;
-  }).filter(Boolean);
 
-  console.log('Extracted versions:', versions);
+  const versions = files
-  const latestVersion = semver.maxSatisfying(versions, '*');
+    .map((file) => {
-  console.log('Latest version:', latestVersion);
+      const match = file.match(/@([\d\.]+)-/);
-  return latestVersion;
+      console.log(
+        "Matching file:",
+        file,
+        "Version found:",
+        match ? match[1] : "None",
+      );
+
+      if (!match) return null;
+
+      const fullVersion = match[1]; // Original version (e.g., 3.4.5.1)
+      // Trim to 3 parts for semver comparison, as semver typically handles X.Y.Z
+      const semverVersion = fullVersion.split(".").slice(0, 3).join(".");
+
+      return { fullVersion, semverVersion };
+    })
+    .filter(Boolean); // Remove null entries if any file didn't match
+
+  console.log(
+    "Extracted versions:",
+    versions.map((v) => v.semverVersion),
+  );
+
+  if (versions.length === 0) {
+    console.log("No versions extracted.");
+    return null;
   }
 
+  // Find latest version using the trimmed semver format
+  const latestSemver = semver.maxSatisfying(
+    versions.map((v) => v.semverVersion),
+    "*", // Satisfy any version, effectively finding the max
+  );
+  console.log("Latest SemVer-compatible version:", latestSemver);
+
+  if (!latestSemver) {
+    console.log("Could not determine latest semver version.");
+    return null;
+  }
+
+  // Get the original full version string that matches the identified latest SemVer version
+  const latestVersionData = versions.find(
+    (v) => v.semverVersion === latestSemver,
+  );
+  const latestFullVersion = latestVersionData ? latestVersionData.fullVersion : null;
+
+  console.log("Final selected latest version:", latestFullVersion);
+  return latestFullVersion;
+}
+
+/**
+ * Finds the path to the latest built ZIP file for a specific browser.
+ * It constructs a glob pattern based on the browser name (e.g., `dist/betterseqtaplus@*-*chrome.zip`),
+ * finds all matching files, and then uses `getLatestVersion` to identify the version string
+ * of the most recent file. Finally, it returns the full path to that specific file.
+ *
+ * @param {string} browser A string indicating the target browser (e.g., "chrome", "firefox").
+ * @returns {string | undefined} The filepath string to the latest ZIP file for the specified browser,
+ *                               or `undefined` if no matching file is found or if the latest version
+ *                               cannot be determined.
+ */
 function getLatestFiles(browser) {
   const pattern = `dist/betterseqtaplus@*-*${browser}.zip`;
-  console.log('Glob pattern:', pattern);
+  console.log("Glob pattern:", pattern);
-  const files = glob.sync(pattern);
-  console.log('Files found for browser', browser, ':', files);
-  const latestVersion = getLatestVersion(files);
 
-  const latestFile = files.find(file => file.includes(latestVersion));
+  const files = glob.sync(pattern);
-  console.log('Latest file for browser', browser, ':', latestFile);
+  console.log("Files found for browser", browser, ":", files);
+
+  if (files.length === 0) {
+    console.log("No files found for browser", browser);
+    return undefined;
+  }
+
+  const latestVersion = getLatestVersion(files);
+  if (!latestVersion) {
+    console.log("Could not determine latest version for browser", browser);
+    return undefined;
+  }
+
+  // Find the exact file by matching the original full version string
+  const latestFile = files.find((file) => file.includes(`@${latestVersion}-`));
+
+  console.log("Latest file for browser", browser, ":", latestFile);
   return latestFile;
 }
 
+/**
+ * Creates a ZIP file of the project's source code, excluding specified development-related
+ * files and directories such as `node_modules`, `dist`, `.git`, etc.
+ * It uses the `7z` command-line tool to perform the archiving.
+ * The output filename is fixed as `dist/betterseqtaplus@latest-sources.zip`.
+ *
+ * @returns {string} The filename of the created ZIP file (e.g., `dist/betterseqtaplus@latest-sources.zip`).
+ */
 function zipSources() {
   const zipFileName = `dist/betterseqtaplus@latest-sources.zip`;
 
   const excludePatterns = [
-    'node_modules',
+    "node_modules",
-    'dist',
+    "dist",
-    '.env*',
+    ".env*",
-    '.git',
+    ".git",
-    '.github',
+    ".github",
-    '.vscode',
+    ".vscode",
-    'LICENSE',
+    "LICENSE",
-    'package.json'
+    "package.json",
-  ].map(pattern => `-x!${pattern}`).join(' ');
+  ]
+    .map((pattern) => `-x!${pattern}`) // Format for 7z exclude syntax
+    .join(" ");
 
+  // Command to zip the current directory's contents into zipFileName, applying exclude patterns
   const zipCommand = `7z a ${zipFileName} . ${excludePatterns}`;
 
-  console.log('Zipping project sources with command:', zipCommand);
+  console.log("Zipping project sources with command:", zipCommand);
-  execSync(zipCommand, { stdio: 'inherit' });
+  execSync(zipCommand, { stdio: "inherit" }); // Execute synchronously and show output
 
   return zipFileName;
 }
 
+/**
+ * Orchestrates the extension publishing process for the specified browsers.
+ * This function performs the following steps:
+ * 1. Calls `getLatestFiles` to find the latest built ZIP for Chrome if "chrome" is in `browsers`.
+ * 2. Calls `getLatestFiles` to find the latest built ZIP for Firefox if "firefox" is in `browsers`.
+ * 3. Calls `zipSources` to create a source code ZIP if "firefox" is in `browsers` (required for Mozilla Add-ons).
+ * 4. Validates that all required files were found and that at least one browser was specified. Exits if not.
+ * 5. Constructs the `publish-extension` command-line string with the appropriate arguments
+ *    based on the found ZIP files for the specified browsers.
+ * 6. Executes the constructed `publish-extension` command.
+ *
+ * @param {string[]} browsers An array of browser strings (e.g., ["chrome", "firefox"]) for which to publish the extension.
+ */
 function runPublishCommand(browsers) {
-  const chromeZip = browsers.includes('chrome') ? getLatestFiles('chrome') : null;
+  const chromeZip = browsers.includes("chrome")
-  const firefoxZip = browsers.includes('firefox') ? getLatestFiles('firefox') : null;
+    ? getLatestFiles("chrome")
-  const firefoxSourcesZip = browsers.includes('firefox') ? zipSources() : null;
+    : null;
+  const firefoxZip = browsers.includes("firefox")
+    ? getLatestFiles("firefox")
+    : null;
+  // Sources are typically only needed for Firefox submissions
+  const firefoxSourcesZip = browsers.includes("firefox") ? zipSources() : null;
 
-  console.log('Chrome zip:', chromeZip);
+  console.log("Chrome zip:", chromeZip);
-  console.log('Firefox zip:', firefoxZip);
+  console.log("Firefox zip:", firefoxZip);
-  console.log('Firefox sources zip:', firefoxSourcesZip);
+  console.log("Firefox sources zip:", firefoxSourcesZip);
 
   if (browsers.length === 0) {
-    console.log('No browsers specified. Exiting.');
+    console.log("No browsers specified. Exiting.");
-    process.exit(0);
+    process.exit(0); // Exit gracefully if no action is needed
   }
 
-  if ((browsers.includes('chrome') && !chromeZip) || (browsers.includes('firefox') && (!firefoxZip || !firefoxSourcesZip))) {
+  // Check if required files are missing for the specified browsers
-    console.error('Could not find required zip files for specified browsers.');
+  if (
-    process.exit(1);
+    (browsers.includes("chrome") && !chromeZip) ||
+    (browsers.includes("firefox") && (!firefoxZip || !firefoxSourcesZip))
+  ) {
+    console.error("Could not find required zip files for specified browsers.");
+    process.exit(1); // Exit with error status
   }
 
-  let command = 'publish-extension';
+  let command = "publish-extension";
   if (chromeZip) {
     command += ` --chrome-zip ${chromeZip}`;
   }
@@ -78,13 +201,14 @@ function runPublishCommand(browsers) {
     command += ` --firefox-zip ${firefoxZip} --firefox-sources-zip ${firefoxSourcesZip}`;
   }
 
-  console.log('Running command:', command);
+  console.log("Running command:", command);
-  execSync(command, { stdio: 'inherit' });
+  execSync(command, { stdio: "inherit" }); // Execute and show output
 }
 
-// Parse command-line arguments
+// Parse command-line arguments to determine which browsers to publish for
 const args = process.argv.slice(2);
-const browserIndex = args.indexOf('--b');
+const browserIndex = args.indexOf("--b"); // Find the --b flag
+// If --b is found, take all subsequent arguments as browser names
 const browsers = browserIndex !== -1 ? args.slice(browserIndex + 1) : [];
 
 runPublishCommand(browsers);

lib/touchGlobalCSS.ts

@@ -0,0 +1,55 @@
+import fs from "fs";
+
+/**
+ * Creates a Vite plugin designed to improve the reliability of Hot Module Replacement (HMR)
+ * for global CSS files.
+ *
+ * When a JavaScript/TypeScript module that imports a CSS file is updated, Vite's HMR
+ * might not always reliably update the styles injected by that global CSS. This plugin
+ * attempts to mitigate this by listening for hot updates. If an updated module
+ * has direct importers that are CSS files (e.g., a JS file imports a global CSS file),
+ * this plugin will "touch" those CSS files by updating their access and modification
+ * timestamps using `fs.utimesSync`. This action can help signal to Vite or the browser
+ * that the CSS file has changed, potentially triggering a more reliable style reload.
+ *
+ * @returns {import('vite').Plugin} A Vite plugin object configured with `name` and `handleHotUpdate` hooks.
+ */
+export default function touchGlobalCSSPlugin() {
+  return {
+    /**
+     * The unique name of this Vite plugin.
+     * This name is used by Vite for identification purposes and will appear in logs.
+     * @type {string}
+     */
+    name: "touch-global-css",
+    /**
+     * A Vite hook that is called when a module is hot-updated.
+     * This function inspects the importers of the updated module. If any of these
+     * importers are CSS files, their filesystem timestamps are updated ("touched").
+     *
+     * @param {object} context The context object provided by Vite's `handleHotUpdate` hook.
+     * @param {Array<import('vite').ModuleNode>} context.modules An array of `ModuleNode` instances that have been updated.
+     *                                                            This plugin specifically accesses `modules[0]._clientModule.importers`
+     *                                                            to find CSS files that import the updated module.
+     */
+    handleHotUpdate({ modules }) {
+      // It's assumed `modules[0]` is the primary updated module of interest.
+      // `_clientModule` and `importers` might be internal or less stable Vite APIs.
+      const importers = modules[0]?._clientModule?.importers;
+      if (importers) {
+        importers.forEach((importer) => {
+          // Check if the importer is a CSS file
+          if (importer.file && importer.file.includes(".css")) {
+            console.log("[touch-global-css] touching", importer.file);
+            try {
+              // Update the access and modification times of the CSS file to the current time
+              fs.utimesSync(importer.file, new Date(), new Date());
+            } catch (err) {
+              console.error(`[touch-global-css] Error touching file ${importer.file}:`, err);
+            }
+          }
+        });
+      }
+    },
+  };
+}

lib/types.ts

@@ -1,104 +1,240 @@
-import type { ManifestV3Export } from '@crxjs/vite-plugin'
+import type { ManifestV3Export } from "@crxjs/vite-plugin";
-import { type AnyCase, createEnum } from './utils'
+import { type AnyCase, createEnum, ObjectValues } from "./utils";
 
+/**
+ * Enumerates supported JavaScript frameworks for project generation or configuration.
+ */
 export const FrameworkEnum = {
-  React: 'React',
+  React: "React",
-  Vanilla: 'Vanilla',
+  Vanilla: "Vanilla",
-  Preact: 'Preact',
+  Preact: "Preact",
-  Lit: 'Lit',
+  Lit: "Lit",
-  Svelte: 'Svelte',
+  Svelte: "Svelte",
-  Vue: 'Vue',
+  Vue: "Vue",
-} as const
+} as const;
 
+/**
+ * Enumerates supported web browsers, typically for targeting builds or configurations.
+ */
 export const BrowserEnum = {
-  Chrome: 'Chrome',
+  Chrome: "Chrome",
-  Brave: 'Brave',
+  Brave: "Brave",
-  Opera: 'Opera',
+  Opera: "Opera",
-  Edge: 'Edge',
+  Edge: "Edge",
-  Firefox: 'Firefox',
+  Firefox: "Firefox",
-  Safari: 'Safari',
+  Safari: "Safari",
-} as const
+} as const;
 
+/**
+ * @private
+ * Enumerates supported programming languages for project setup.
+ * This enum is not exported, suggesting it's for internal use within this module or related modules.
+ */
 const LanguageEnum = {
-  TypeScript: 'TypeScript',
+  TypeScript: "TypeScript",
-  JavaScript: 'JavaScript',
+  JavaScript: "JavaScript",
-} as const
+} as const;
 
+/**
+ * Enumerates supported styling options or libraries.
+ */
 export const StyleEnum = {
-  Tailwind: 'Tailwind',
+  Tailwind: "Tailwind",
-} as const
+} as const;
 
+/**
+ * Enumerates supported package managers.
+ */
 export const PackageManagerEnum = {
-  Bun: 'Bun',
+  Bun: "Bun",
-  PnPm: 'PnPm',
+  PnPm: "PnPm",
-  Npm: 'Npm',
+  Npm: "Npm",
-  Yarn: 'Yarn',
+  Yarn: "Yarn",
-} as const
+} as const;
 
-// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts
+/**
+ * Defines the structure for browser-specific settings within a web extension manifest.
+ * This is particularly used for Firefox (gecko) extensions to specify properties like
+ * an extension ID, and minimum/maximum supported browser versions.
+ * The structure is based on common manifest extensions for Firefox.
+ * See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
+ * The link in the original code (// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts)
+ * also points to type definitions that include this structure.
+ *
+ * @property {object} [browser_specific_settings] - Container for browser-specific settings.
+ * @property {object} [browser_specific_settings.gecko] - Settings specific to Gecko-based browsers (e.g., Firefox).
+ * @property {string} [browser_specific_settings.gecko.id] - The unique identifier for the extension in Firefox.
+ * @property {string} [browser_specific_settings.gecko.strict_min_version] - The minimum version of Firefox the extension is compatible with.
+ * @property {string} [browser_specific_settings.gecko.strict_max_version] - The maximum version of Firefox the extension is compatible with.
+ */
 export type BrowserSpecificSettings = {
   browser_specific_settings?: {
     gecko?: {
-      id: string
+      id: string;
-      strict_min_version?: string
+      strict_min_version?: string;
-      strict_max_version?: string
+      strict_max_version?: string;
-    }
+    };
-  }
+  };
-}
+};
 
-export type Manifest = ManifestV3Export
+/**
-export type ManifestIcons = chrome.runtime.ManifestIcons
+ * Represents the structure of a Chrome Manifest V3 file.
-export type ManifestBackground = chrome.runtime.ManifestV3['background']
+ * This type is an alias for `ManifestV3Export` from the `@crxjs/vite-plugin`,
+ * which provides a comprehensive definition for Chrome extension manifests.
+ */
+export type Manifest = ManifestV3Export;
+
+/** Alias for the `icons` property within a Chrome Manifest V3. */
+export type ManifestIcons = chrome.runtime.ManifestIcons;
+/** Alias for the `background` property within a Chrome Manifest V3. */
+export type ManifestBackground = chrome.runtime.ManifestV3["background"];
+/** Alias for the `content_scripts` property within a Chrome Manifest V3. */
 export type ManifestContentScripts =
-  chrome.runtime.ManifestV3['content_scripts']
+  chrome.runtime.ManifestV3["content_scripts"];
+/** Alias for the `web_accessible_resources` property within a Chrome Manifest V3. */
 export type ManifestWebAccessibleResources =
-  chrome.runtime.ManifestV3['web_accessible_resources']
+  chrome.runtime.ManifestV3["web_accessible_resources"];
-export type ManifestCommands = chrome.runtime.ManifestV3['commands']
+/** Alias for the `commands` property within a Chrome Manifest V3. */
-export type ManifestAction = chrome.runtime.ManifestV3['action']
+export type ManifestCommands = chrome.runtime.ManifestV3["commands"];
-export type ManifestPermissions = chrome.runtime.ManifestV3['permissions']
+/** Alias for the `action` property (or `browser_action`/`page_action`) within a Chrome Manifest V3. */
-export type ManifestOptionsUI = chrome.runtime.ManifestV3['options_ui']
+export type ManifestAction = chrome.runtime.ManifestV3["action"];
+/** Alias for the `permissions` property within a Chrome Manifest V3. */
+export type ManifestPermissions = chrome.runtime.ManifestV3["permissions"];
+/** Alias for the `options_ui` property within a Chrome Manifest V3. */
+export type ManifestOptionsUI = chrome.runtime.ManifestV3["options_ui"];
+/** Alias for the `chrome_url_overrides` property within a Chrome Manifest V3. */
 export type ManifestURLOverrides =
-  chrome.runtime.ManifestV3['chrome_url_overrides']
+  chrome.runtime.ManifestV3["chrome_url_overrides"];
 
-export type BrowserName<T extends string> = Capitalize<T> | Lowercase<T>
+/**
+ * Creates a type that accepts a string literal `T` in either its capitalized or lowercase form.
+ * Useful for defining types that should be case-insensitive for specific known strings.
+ * @template T - A string literal type.
+ */
+export type BrowserName<T extends string> = Capitalize<T> | Lowercase<T>;
+
+/**
+ * Creates a record type where both keys and values are derived from a string literal `T`,
+ * specifically using `BrowserName<T>` which allows for capitalized or lowercase forms.
+ * This could be used to define an object where, for example, keys are 'Chrome' or 'chrome'
+ * and values are also 'Chrome' or 'chrome'.
+ * @template T - A string literal type, typically representing a browser name.
+ */
 export type BrowserEnumType<T extends string> = {
-  [browser in BrowserName<T>]: BrowserName<T>
+  [browser in BrowserName<T>]: BrowserName<T>;
-}
+};
 
-export type BuildMode = AnyCase<Browser>
+/**
+ * Represents the target browser for a build, allowing for various casings of browser names
+ * (e.g., "chrome", "Chrome", "CHROME") through the `AnyCase<Browser>` utility type.
+ * `Browser` itself is a union of specific browser name strings (e.g., "Chrome" | "Firefox").
+ */
+export type BuildMode = AnyCase<Browser>;
+
+/**
+ * Defines an object structure that pairs a web extension `Manifest`
+ * with its target `browser` (represented as `AnyCase<Browser>`).
+ * This is commonly used in build processes to manage configurations for different browsers.
+ */
 export type BuildTarget = {
-  manifest: Manifest
+  manifest: Manifest;
-  browser: AnyCase<Browser>
+  browser: AnyCase<Browser>;
-}
+};
+
+/**
+ * Defines the configuration options for a build process.
+ * @property {"build" | "serve"} [command] - The type of build command (e.g., 'build' for production, 'serve' for development).
+ * @property {AnyCase<Browser> | string | undefined} [mode] - The target build mode, typically a browser name (allowing various casings)
+ *                                                           or potentially other custom mode strings.
+ */
 export type BuildConfig = {
-  command?: 'build' | 'serve'
+  command?: "build" | "serve";
-  mode?: AnyCase<Browser> | string | undefined
+  mode?: AnyCase<Browser> | string | undefined;
-}
+};
 
+/**
+ * Defines the structure for repository information, commonly found in `package.json`.
+ * @property {string} type - The type of the repository (e.g., "git").
+ * @property {string} [url] - The URL of the repository.
+ * @property {Bugs} [bugs] - An object containing information about where to report bugs.
+ */
 export interface Repository {
-  type: string
+  type: string;
-  url?: string
+  url?: string;
-  bugs?: Bugs
+  bugs?: Bugs;
 }
 
+/**
+ * Defines the structure for bug reporting information, often part of the `Repository` interface.
+ * @property {string} [url] - The URL of the issue tracker.
+ * @property {string} [email] - The email address for reporting bugs.
+ */
 export interface Bugs {
-  url?: string
+  url?: string;
-  email?: string
+  email?: string;
 }
 
-export type Browser = (typeof BrowserEnum)[keyof typeof BrowserEnum]
+/**
-export const Browser: AnyCase<Browser> = createEnum(BrowserEnum)
+ * A string literal union type representing supported browser names, derived from the values of `BrowserEnum`.
+ * e.g., "Chrome" | "Firefox" | ...
+ */
+export type Browser = ObjectValues<typeof BrowserEnum>;
 
-export type PackageManager =
+/**
-  (typeof PackageManagerEnum)[keyof typeof PackageManagerEnum]
+ * A constant intended to provide access to browser names, potentially in various casings.
+ * Its type `AnyCase<Browser>` suggests it can be used where case-insensitivity for browser names is needed.
+ * The `createEnum(BrowserEnum)` call aims to produce a representation of browser names from `BrowserEnum`.
+ * Note: `createEnum` from `lib/utils.ts` has a declared return type of `ObjectValues<T>` (a union of values),
+ * while its implementation uses `Object.values()` which returns an array. This constant will hold the
+ * runtime array value, but its JSDoc type refers to the more restrictive `AnyCase<Browser>` union type.
+ */
+export const Browser: AnyCase<Browser> = createEnum(BrowserEnum);
+
+/**
+ * A string literal union type representing supported package managers, derived from the values of `PackageManagerEnum`.
+ * e.g., "Bun" | "PnPm" | "Npm" | "Yarn"
+ */
+export type PackageManager = ObjectValues<typeof PackageManagerEnum>;
+/**
+ * A constant intended to provide access to package manager names, potentially in various casings.
+ * Its type `AnyCase<PackageManager>` suggests it can be used where case-insensitivity for package manager names is needed.
+ * Utilizes `createEnum(PackageManagerEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
 export const PackageManager: AnyCase<PackageManager> =
-  createEnum(PackageManagerEnum)
+  createEnum(PackageManagerEnum);
 
-export type Framework = (typeof FrameworkEnum)[keyof typeof FrameworkEnum]
+/**
-export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum)
+ * A string literal union type representing supported JavaScript frameworks, derived from the values of `FrameworkEnum`.
+ * e.g., "React" | "Vanilla" | ...
+ */
+export type Framework = ObjectValues<typeof FrameworkEnum>;
+/**
+ * A constant intended to provide access to framework names, potentially in various casings.
+ * Its type `AnyCase<Framework>` suggests it can be used where case-insensitivity for framework names is needed.
+ * Utilizes `createEnum(FrameworkEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
+export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum);
 
-export type Style = (typeof StyleEnum)[keyof typeof StyleEnum]
+/**
-export const Style: AnyCase<Style> = createEnum(StyleEnum)
+ * A string literal union type representing supported styling options, derived from the values of `StyleEnum`.
+ * e.g., "Tailwind"
+ */
+export type Style = ObjectValues<typeof StyleEnum>;
+/**
+ * A constant intended to provide access to style option names, potentially in various casings.
+ * Its type `AnyCase<Style>` suggests it can be used where case-insensitivity for style names is needed.
+ * Utilizes `createEnum(StyleEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
+export const Style: AnyCase<Style> = createEnum(StyleEnum);
 
-export type Language = (typeof LanguageEnum)[keyof typeof LanguageEnum]
+/**
-export const Language: AnyCase<Language> = createEnum(LanguageEnum)
+ * A string literal union type representing supported programming languages, derived from the values of `LanguageEnum`.
+ * e.g., "TypeScript" | "JavaScript"
+ */
+export type Language = ObjectValues<typeof LanguageEnum>;
+/**
+ * A constant intended to provide access to programming language names, potentially in various casings.
+ * Its type `AnyCase<Language>` suggests it can be used where case-insensitivity for language names is needed.
+ * Utilizes `createEnum(LanguageEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
+export const Language: AnyCase<Language> = createEnum(LanguageEnum);

lib/utils.ts

@@ -1,21 +1,84 @@
-export type ObjectValues<T> = T[keyof T]
+/**
+ * Extracts a union type of all values from the properties of an object type `T`.
+ *
+ * @template T - An object type (typically a Record or an enum-like object).
+ * @example
+ * type MyObject = { a: "foo", b: "bar", c: 123 };
+ * type MyObjectValues = ObjectValues<MyObject>; // "foo" | "bar" | 123
+ */
+export type ObjectValues<T> = T[keyof T];
 
+/**
+ * Creates a union of an object's string values, often used to represent the set of possible values for an enum-like object.
+ * Note: The implementation `Object.values(enumObj) as unknown as ObjectValues<T>` returns an array at runtime,
+ * but the declared return type `ObjectValues<T>` is a union of the object's property values.
+ * This type signature suggests it's intended to represent the set of possible string values from `enumObj`.
+ *
+ * @template T - An object type where keys are strings and values are strings (e.g., `const MyEnum = { VAL_A: "A", VAL_B: "B" }`).
+ * @param {T} enumObj - The object from which to extract values.
+ * @returns {ObjectValues<T>} A union type representing all possible string values of the `enumObj`.
+ *                            For example, if `enumObj` is `{ A: "valA", B: "valB" }`, the return type is `"valA" | "valB"`.
+ *                            (Runtime behavior of `Object.values()` is to return an array like `["valA", "valB"]`).
+ */
 export function createEnum<T extends Record<string, string>>(enumObj: T) {
-  return Object.values(enumObj) as unknown as ObjectValues<T>
+  return Object.values(enumObj) as unknown as ObjectValues<T>;
 }
 
+/**
+ * Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
+ * of a given string literal type `T`.
+ *
+ * @template T - A string literal type.
+ * @example
+ * type MyString = "example";
+ * type MyStringAnyCase = AnyCase<MyString>; // "EXAMPLE" | "example" | "Example" | "example" (Uncapitalize<"Example"> is "example")
+ */
 export type AnyCase<T extends string> =
   | Uppercase<T>
   | Lowercase<T>
   | Capitalize<T>
-  | Uncapitalize<T>
+  | Uncapitalize<T>;
 
+/**
+ * Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
+ * of the union of two given string literal types `T` and `K`.
+ * This is useful for representing a combined set of related string constants where case variations are permitted for each.
+ *
+ * @template T - A string literal type.
+ * @template K - Another string literal type.
+ * @example
+ * type Lang1 = "english";
+ * type Lang2 = "french";
+ * type CombinedLangsAnyCase = AnyCaseLanguage<Lang1, Lang2>;
+ * // Result includes: "ENGLISH" | "english" | "English" | "FRENCH" | "french" | "French" etc.
+ * // for all case variations of "english" and "french".
+ */
 export type AnyCaseLanguage<T extends string, K extends string> =
   | Uppercase<T | K>
   | Lowercase<T | K>
   | Capitalize<T | K>
-  | Uncapitalize<T | K>
+  | Uncapitalize<T | K>;
 
+/**
+ * Extracts a new object type containing only the keys of `T` whose properties are optional
+ * (i.e., their type includes `undefined`). The values associated with these keys retain their original types.
+ *
+ * @template T - An object type.
+ * @example
+ * type MyObject = {
+ *   requiredProp: string;
+ *   optionalProp?: number;
+ *   anotherOptional?: boolean | undefined;
+ *   nullProp: string | null;
+ * };
+ * type MyOptionalProps = OptionalKeys<MyObject>;
+ * // MyOptionalProps would be conceptually equivalent to:
+ * // {
+ * //   optionalProp?: number;
+ * //   anotherOptional?: boolean | undefined;
+ * // }
+ * // The actual resulting type is an object type with only these optional keys.
+ */
 export type OptionalKeys<T> = {
-  [K in keyof T as undefined extends T[K] ? K : never]: T[K]
+  [K in keyof T as undefined extends T[K] ? K : never]: T[K];
-}
+};

package.json

@@ -1,8 +1,8 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.4.1",
+  "version": "3.4.8",
   "type": "module",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, while incorporating a plethora of new and improved features!",
+  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
     "dev": "cross-env MODE=chrome vite dev",
@@ -11,7 +11,9 @@
     "build:chrome": "cross-env MODE=chrome vite build",
     "build:firefox": "cross-env MODE=firefox vite build",
     "build:safari": "cross-env MODE=safari vite build",
+    "build:dev": "cross-env MODE=chrome SOURCEMAP=true vite build && cross-env MODE=firefox SOURCEMAP=true vite build",
     "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
+    "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
     "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
     "publish": "bun lib/publish.js --b",
     "zip": "bedframe zip"
@@ -31,69 +33,75 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.26.9",
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.9",
-    "@crxjs/vite-plugin": "2.0.0-beta.25",
+    "@bedframe/cli": "^0.0.91",
+    "@crxjs/vite-plugin": "2.0.0-beta.32",
     "@types/mime-types": "^2.1.4",
-    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "dependency-cruiser": "^16.10.0",
-    "glob": "^11.0.0",
+    "eslint": "9.22.0",
+    "glob": "^11.0.1",
     "mime-types": "^2.1.35",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "process": "^0.11.10",
-    "sass": "^1.78.0",
+    "publish-browser-extension": "^3.0.0",
-    "sass-loader": "^13.3.3",
+    "sass": "^1.85.1",
-    "semver": "^7.6.3",
+    "sass-loader": "^16.0.5",
+    "semver": "^7.7.1",
+    "tailwindcss": "3",
     "url": "^0.11.4"
   },
   "dependencies": {
-    "@bedframe/cli": "^0.0.85",
+    "@codemirror/autocomplete": "^6.18.6",
-    "@codemirror/lang-css": "^6.3.0",
+    "@codemirror/commands": "^6.8.0",
-    "@codemirror/lang-less": "^6.0.2",
+    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/language": "^6.10.8",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@codemirror/search": "^6.5.10",
-    "@tailwindcss/forms": "^0.5.9",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.4",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/forms": "^0.5.10",
     "@tsconfig/svelte": "^5.0.4",
-    "@types/chrome": "^0.0.270",
+    "@types/chrome": "^0.0.308",
-    "@types/color": "^3.0.6",
+    "@types/color": "^4.2.0",
-    "@types/dompurify": "^3.0.5",
+    "@types/lodash": "^4.17.16",
-    "@types/lodash": "^4.17.7",
+    "@types/node": "^22.13.10",
-    "@types/node": "^20.16.5",
-    "@types/react": "17",
-    "@types/react-dom": "17",
     "@types/sortablejs": "^1.15.8",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
-    "@types/webextension-polyfill": "^0.10.7",
+    "@types/webextension-polyfill": "^0.12.3",
-    "@uiw/codemirror-extensions-color": "^4.23.3",
+    "@uiw/codemirror-extensions-color": "^4.23.10",
-    "@uiw/codemirror-theme-github": "^4.23.3",
+    "@uiw/codemirror-theme-github": "^4.23.10",
-    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.21",
-    "autoprefixer": "^10.4.20",
+    "canvas-confetti": "^1.9.3",
-    "caniuse-lite": "^1.0.30001684",
-    "classnames": "^2.5.1",
     "codemirror": "^6.0.1",
-    "color": "^4.2.3",
+    "color": "^5.0.0",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.2.4",
-    "embla-carousel-autoplay": "^8.3.1",
+    "embeddia": "^1.2.1",
-    "embla-carousel-svelte": "^8.3.1",
+    "embla-carousel-autoplay": "^8.5.2",
-    "fuse.js": "^7.0.0",
+    "embla-carousel-svelte": "^8.5.2",
-    "idb": "^8.0.0",
+    "esbuild": "^0.25.3",
-    "kolorist": "^1.8.0",
+    "events": "^3.3.0",
+    "flexsearch": "^0.8.147",
+    "fuse.js": "^7.1.0",
+    "idb": "^8.0.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
+    "mathjs": "^14.4.0",
     "million": "^3.1.11",
-    "motion": "^11.12.0",
+    "motion": "^12.4.12",
-    "postcss": "^8.4.45",
+    "postcss": "^8.5.3",
-    "publish-browser-extension": "^2.2.1",
     "react": "17",
-    "react-best-gradient-color-picker": "^3.0.10",
+    "react-best-gradient-color-picker": "3.0.11",
     "react-dom": "17",
-    "sortablejs": "^1.15.3",
+    "rss-parser": "^3.13.0",
-    "svelte": "^5.1.9",
+    "sortablejs": "^1.15.6",
-    "tailwindcss": "^3.4.11",
+    "svelte": "^5.22.6",
-    "typescript": "^5.6.2",
+    "typescript": "^5.8.2",
-    "uuid": "^9.0.1",
+    "uuid": "^11.1.0",
-    "vite": "^5.4.4",
+    "vite": "^6.2.1",
-    "webextension-polyfill": "^0.10.0"
+    "webextension-polyfill": "^0.12.0"
   }
 }

settings.patch

@@ -0,0 +1,126 @@
+--- a/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
++++ b/Users/sethburkart/Documents/Coding/betterseqta-plus/src/plugins/core/settings.ts
+@@ -2,7 +2,7 @@
+ 
+ // Base interfaces for our settings
+ interface BaseSettingOptions {
+-  title: string;
++  readonly title: string; // Mark as readonly where appropriate
+   description?: string;
+ }
+ 
+@@ -11,21 +11,21 @@
+ }
+ 
+ interface StringSettingOptions extends BaseSettingOptions {
+-  default: string;
++  readonly default: string;
+   maxLength?: number;
+   pattern?: string;
+ }
+ 
+ interface NumberSettingOptions extends BaseSettingOptions {
+-  default: number;
++  readonly default: number;
+   min?: number;
+   max?: number;
+   step?: number;
+ }
+ 
+ interface SelectSettingOptions<T extends string> extends BaseSettingOptions {
+-  default: T;
+-  options: readonly T[];
++  readonly default: T;
++  readonly options: readonly T[];
+ }
+ 
+ // The actual decorators
+@@ -34,14 +34,16 @@
+     // Ensure the settings property exists on the constructor's prototype
+     const proto = target.constructor.prototype;
+     if (!proto.hasOwnProperty('settings')) {
+-      proto.settings = {};
++      // Initialize with a base type that can be extended
++      Object.defineProperty(proto, 'settings', {
++        value: {},
++        writable: true, // Allows adding properties
++        configurable: true,
++        enumerable: true
++      });
+     }
+-    
++
+     // Add the setting to the prototype's settings object with const assertion
+     proto.settings[propertyKey] = {
+       type: 'boolean' as const,
+       ...options
+     };
+-  };
+-}
+-
+-export function StringSetting(options: StringSettingOptions): PropertyDecorator {
+-  return (target: Object, propertyKey: string | symbol) => {
+-    // Ensure the settings property exists on the constructor's prototype
+-    const proto = target.constructor.prototype;
+-    if (!proto.hasOwnProperty('settings')) {
+-      proto.settings = {};
+-    }
+-    
+-    // Add the setting to the prototype's settings object with const assertion
+-    proto.settings[propertyKey] = {
+-      type: 'string' as const,
+-      ...options
+-    };
+   };
+ }
+ 
+@@ -50,14 +52,16 @@
+     // Ensure the settings property exists on the constructor's prototype
+     const proto = target.constructor.prototype;
+     if (!proto.hasOwnProperty('settings')) {
+-      proto.settings = {};
++       Object.defineProperty(proto, 'settings', {
++        value: {},
++        writable: true,
++        configurable: true,
++        enumerable: true
++      });
+     }
+-    
++
+     // Add the setting to the prototype's settings object with const assertion
+     proto.settings[propertyKey] = {
+       type: 'number' as const,
+       ...options
+     };
+-  };
+-}
+-
+-export function SelectSetting<T extends string>(options: SelectSettingOptions<T>): PropertyDecorator {
+-  return (target: Object, propertyKey: string | symbol) => {
+-    // Ensure the settings property exists on the constructor's prototype
+-    const proto = target.constructor.prototype;
+-    if (!proto.hasOwnProperty('settings')) {
+-      proto.settings = {};
+-    }
+-    
+-    // Add the setting to the prototype's settings object with const assertion
+-    proto.settings[propertyKey] = {
+-      type: 'select' as const,
+-      ...options
+-    };
+   };
+ }
+ 
+ // Base plugin class that handles settings
+ export abstract class BasePlugin<T extends PluginSettings = PluginSettings> {
+   // The settings property will be populated by decorators
+-  settings!: T;
+-  
++  // Keep the instance property and constructor logic as is,
++  // as changing it would require changing animated-background/index.ts
++  settings!: T; // Use definite assignment assertion
++
+   constructor() {
+     // Copy settings from the prototype to the instance
+     // This ensures that each instance has its own settings object

src/background.ts

@@ -1,138 +1,68 @@
-import browser from 'webextension-polyfill'
+import browser from "webextension-polyfill";
 import type { SettingsState } from "@/types/storage";
-
+import { fetchNews } from "./background/news";
-export const openDB = () => {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open('MyDatabase', 1);
-
-    request.onupgradeneeded = (event: any) => {
-      const db = event.target.result;
-      db.createObjectStore('backgrounds', { keyPath: 'id' });
-    };
-
-    request.onsuccess = () => {
-      resolve(request.result);
-    };
-
-    request.onerror = (event: any) => {
-      reject('Error opening database: ' + event.target.errorCode);
-    };
-  });
-};
-
-export const writeData = async (type: any, data: any) => {
-  const db: any = await openDB();
-
-  const tx = db.transaction('backgrounds', 'readwrite');
-  const store = tx.objectStore('backgrounds');
-  const request = await store.put({ id: 'customBackground', type, data });
-
-  return request.result;
-};
-
-export const readData = () => {
-  return new Promise((resolve, reject) => {
-    openDB()
-      .then((db: any) => {
-        const tx = db.transaction('backgrounds', 'readonly');
-        const store = tx.objectStore('backgrounds');
-
-        // Retrieve the custom background
-        const getRequest = store.get('customBackground');
-
-        // Attach success and error event handlers
-        getRequest.onsuccess = function(event: any) {
-          resolve(event.target.result);
-        };
-
-        getRequest.onerror = function(event: any) {
-          console.error('An error occurred:', event);
-          reject(event);
-        };
-      })
-      .catch(error => {
-        console.error('An error occurred:', error);
-        reject(error);
-      });
-  });
-};
 
 function reloadSeqtaPages() {
-  const result = browser.tabs.query({})
+  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")) {
         browser.tabs.reload(tab.id);
       }
     }
   }
-  result.then(open, console.error)
+  result.then(open, console.error);
 }
 
-// Main message listener
+// @ts-ignore
-browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse: any) => {
+browser.runtime.onMessage.addListener(
+  (request: any, _: any, sendResponse: (response?: any) => void) => {
     switch (request.type) {
-  case 'reloadTabs':
+      case "reloadTabs":
         reloadSeqtaPages();
         break;
 
-  case 'extensionPages':
+      case "extensionPages":
         browser.tabs.query({}).then(function (tabs) {
           for (let tab of tabs) {
-        if (tab.url?.includes('chrome-extension://')) {
+            if (tab.url?.includes("chrome-extension://")) {
               browser.tabs.sendMessage(tab.id!, request);
             }
           }
         });
         break;
 
-  case 'currentTab':
+      case "currentTab":
-    browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
+        browser.tabs
-      browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
+          .query({ active: true, currentWindow: true })
+          .then(function (tabs) {
+            browser.tabs
+              .sendMessage(tabs[0].id!, request)
+              .then(function (response) {
                 sendResponse(response);
               });
           });
         return true;
 
-  case 'githubTab':
+      case "githubTab":
-    browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
+        browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
         break;
 
-  case 'setDefaultStorage':
+      case "setDefaultStorage":
         SetStorageValue(DefaultValues);
         break;
 
-  case 'sendNews':
+      case "sendNews":
-    const date = new Date();
+        fetchNews(request.source ?? "australia", sendResponse);
-
-    const from =
-      date.getFullYear() +
-      '-' +
-      (date.getMonth() + 1) +
-      '-' +
-      (date.getDate() - 5);
-
-    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
-
-    GetNews(sendResponse, url);
         return true;
 
       default:
-    console.log('Unknown request type');
+        console.log("Unknown request type");
     }
-});
 
-function GetNews(sendResponse: any, url: string) {
+    return false;
-  fetch(url)
+  },
-    .then((result) => result.json())
+);
-    .then((response) => {
-      if (response.code == 'rateLimited') {
-        GetNews(sendResponse, url += '%00');
-      } else {
-        sendResponse({ news: response });
-      }
-    });
-}
 
 const DefaultValues: SettingsState = {
   onoff: true,
@@ -140,7 +70,6 @@ const DefaultValues: SettingsState = {
   bksliderinput: "50",
   transparencyEffects: false,
   lessonalert: true,
-  notificationcollector: true,
   defaultmenuorder: [],
   menuitems: {
     assessments: { toggle: true },
@@ -162,63 +91,31 @@ const DefaultValues: SettingsState = {
   },
   menuorder: [],
   subjectfilters: {},
-  selectedTheme: '',
+  selectedTheme: "",
-  selectedColor: 'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)',
+  selectedColor:
-  originalSelectedColor: '',
+    "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
+  originalSelectedColor: "",
   DarkMode: true,
   animations: true,
-  defaultPage: 'home',
+  assessmentsAverage: true,
+  defaultPage: "home",
   shortcuts: [
     {
-      name: 'YouTube',
+      name: "Outlook",
-      enabled: false,
-    },
-    {
-      name: 'Outlook',
       enabled: true,
     },
     {
-      name: 'Office',
+      name: "Office",
       enabled: true,
     },
     {
-      name: 'Spotify',
+      name: "Google",
-      enabled: false,
-    },
-    {
-      name: 'Google',
       enabled: true,
     },
-    {
-      name: 'DuckDuckGo',
-      enabled: false,
-    },
-    {
-      name: 'Cool Math Games',
-      enabled: false,
-    },
-    {
-      name: 'SACE',
-      enabled: false,
-    },
-    {
-      name: 'Google Scholar',
-      enabled: false,
-    },
-    {
-      name: 'Gmail',
-      enabled: false,
-    },
-    {
-      name: 'Netflix',
-      enabled: false,
-    },
-    {
-      name: 'Education Perfect',
-      enabled: false,
-    },
   ],
   customshortcuts: [],
+  lettergrade: false,
+  newsSource: "australia",
 };
 
 function SetStorageValue(object: any) {
@@ -227,54 +124,78 @@ function SetStorageValue(object: any) {
   }
 }
 
-async function UpdateCurrentValues() {
+function convertBksliderToSpeed(bksliderinput: number): number {
-  try {
+  const minBase = 50;
-    const items = await browser.storage.local.get();
+  const maxBase = 150;
-    const CurrentValues = items;
 
-    const NewValue = Object.assign({}, DefaultValues, CurrentValues);
+  const scaledValue =
+    2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
+  const baseSpeed = 3;
 
-    function CheckInnerElement(element: any) {
+  const speed = baseSpeed / scaledValue;
-      for (let i in element) {
+  return speed;
-        if (typeof element[i] === 'object') {
+}
-          // @ts-expect-error
+
-          if (!Array.isArray(DefaultValues[i])) {
+async function migrateLegacySettings() {
-            // @ts-expect-error
+  const storage = (await browser.storage.local.get(
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
+    null,
+  )) as unknown as SettingsState;
+
+  // Animated Background Migration
+  if ("animatedbk" in storage || "bksliderinput" in storage) {
+    const animatedSettings = {
+      enabled: storage.animatedbk ?? true,
+      speed: storage.bksliderinput
+        ? convertBksliderToSpeed(parseFloat(storage.bksliderinput))
+        : 1,
+    };
+    await browser.storage.local.set({
+      "plugin.animated-background.settings": animatedSettings,
+    });
+  }
+
+  // Assessments Average Migration
+  if ("assessmentsAverage" in storage || "lettergrade" in storage) {
+    const assessmentsSettings = {
+      enabled: storage.assessmentsAverage ?? true,
+      lettergrade: storage.lettergrade ?? false,
+    };
+    await browser.storage.local.set({
+      "plugin.assessments-average.settings": assessmentsSettings,
+    });
+  }
+
+  if ("selectedTheme" in storage) {
+    const themesSettings = { enabled: true };
+    await browser.storage.local.set({
+      "plugin.themes.settings": themesSettings,
+    });
+  }
+  if (storage.notificationCollector !== false) {
+    await browser.storage.local.set({
+      "plugin.notificationCollector.settings": { enabled: true },
+    });
   } else {
-            // @ts-expect-error
+    await browser.storage.local.set({
-            const length = DefaultValues[i].length;
+      "plugin.notificationCollector.settings": { enabled: false },
-            // @ts-expect-error
+    });
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
-            let NewArray = [];
-            for (let j = 0; j < length; j++) {
-              NewArray.push(NewValue[i][j]);
-            }
-            NewValue[i] = NewArray;
-          }
-        }
-      }
   }
 
-    CheckInnerElement(DefaultValues);
+  const keysToRemove = [
-
+    "animatedbk",
-    if (items['customshortcuts']) {
+    "bksliderinput",
-      NewValue['customshortcuts'] = items['customshortcuts'];
+    "assessmentsAverage",
-    }
+    "lettergrade",
-
+  ];
-    SetStorageValue(NewValue);
+  await browser.storage.local.remove(keysToRemove);
-    console.log('[BetterSEQTA+] Values updated successfully');
-  } catch (error) {
-    console.error('[BetterSEQTA+] Error updating values:', error);
-  }
 }
 
 browser.runtime.onInstalled.addListener(function (event) {
-  browser.storage.local.remove(['justupdated']);
+  browser.storage.local.remove(["justupdated"]);
-  browser.storage.local.remove(['data']);
+  browser.storage.local.remove(["data"]);
 
-  UpdateCurrentValues();
+  if (event.reason == "install" || event.reason == "update") {
-  if ( event.reason == 'install', event.reason == 'update' ) {
     browser.storage.local.set({ justupdated: true });
+    migrateLegacySettings();
   }
 });

src/background/news.ts

@@ -0,0 +1,150 @@
+import Parser from "rss-parser";
+
+/**
+ * Fetches news articles specifically for Australia from the NewsAPI.
+ *
+ * This function handles a specific case for fetching Australian news. It includes a
+ * mechanism to retry the fetch operation by appending "%00" to the URL if a
+ * rate limit error (`response.code == "rateLimited"`) is encountered. This is
+ * likely a workaround for cache-busting or bypassing certain rate-limiting measures.
+ *
+ * @param {string} url The NewsAPI URL to fetch Australian news from.
+ * @param {any} sendResponse A callback function (likely from a browser extension message listener)
+ *                           to send the fetched news data back to the caller.
+ *                           It's called with an object like `{ news: responseData }`.
+ */
+const fetchAustraliaNews = async (url: string, sendResponse: any) => {
+  fetch(url)
+    .then((result) => result.json())
+    .then((response) => {
+      if (response.code == "rateLimited") {
+        fetchAustraliaNews((url += "%00"), sendResponse);
+      } else {
+        sendResponse({ news: response });
+      }
+    });
+};
+
+/**
+ * A record mapping lowercase country codes (e.g., "usa", "canada") to an array
+ * of RSS feed URLs for news sources in that country.
+ *
+ * @type {Record<string, string[]>}
+ */
+const rssFeedsByCountry: Record<string, string[]> = {
+  usa: [
+    "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
+    "https://www.huffpost.com/section/front-page/feed",
+    "https://www.npr.org/rss/rss.php",
+  ],
+  taiwan: [
+    "https://news.ltn.com.tw/rss/all.xml",
+    "https://www.taipeitimes.com/xml/index.rss",
+    "https://international.thenewslens.com/rss",
+  ],
+  hong_kong: [
+    "https://rthk9.rthk.hk/rthk/news/rss/e_expressnews_elocal.xml",
+    "https://www.scmp.com/rss/91/feed",
+  ],
+  panama: [
+    "https://critica.com.pa/rss.xml",
+    "https://www.panamaamerica.com.pa/rss.xml",
+    "https://noticiassin.com/feed/",
+    "https://elcapitalfinanciero.com/feed/",
+  ],
+  canada: [
+    "https://www.cbc.ca/cmlink/rss-topstories",
+    "https://calgaryherald.com/feed",
+    "https://ottawacitizen.com/feed",
+    "https://www.montrealgazette.com/feed",
+  ],
+  singapore: [
+    "https://www.straitstimes.com/news/singapore/rss.xml",
+    "https://www.channelnewsasia.com/rssfeeds/8395986",
+  ],
+  uk: [
+    "http://feeds.bbci.co.uk/news/rss.xml",
+    "https://www.theguardian.com/uk/rss",
+  ],
+  japan: [
+    "https://www3.nhk.or.jp/nhkworld/en/news/feeds/",
+    "https://news.livedoor.com/topics/rss/int.xml",
+  ],
+  netherlands: ["https://www.dutchnews.nl/feed/", "https://www.nrc.nl/rss/"],
+};
+
+/**
+ * Fetches news articles based on a specified source.
+ *
+ * The source can be:
+ * 1. The string "australia": Fetches news from Australian sources via NewsAPI,
+ *    handled by the `fetchAustraliaNews` function.
+ * 2. A lowercase country code (e.g., "usa", "canada"): Fetches news from a predefined
+ *    list of RSS feeds for that country, as specified in `rssFeedsByCountry`.
+ * 3. A direct RSS feed URL (starting with "http"): Fetches news directly from this URL.
+ *
+ * The fetched articles are then sent back to the caller using the `sendResponse` callback.
+ *
+ * @param {string} source The news source identifier. This can be "australia", a
+ *                        lowercase country code, or a direct RSS feed URL.
+ * @param {any} sendResponse A callback function (typically from a browser extension
+ *                           message listener, like `chrome.runtime.onMessage`)
+ *                           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) {
+  if (source === "australia") {
+    const date = new Date();
+
+    const from =
+      date.getFullYear() +
+      "-" +
+      (date.getMonth() + 1) +
+      "-" +
+      (date.getDate() - 5);
+
+    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
+    fetchAustraliaNews(url, sendResponse);
+
+    return;
+  }
+
+  const parser = new Parser();
+  let feeds: string[];
+  console.log("fetchNews", source);
+
+  if (rssFeedsByCountry[source.toLowerCase()]) {
+    // If the source is a country, fetch from predefined feeds
+    feeds = rssFeedsByCountry[source.toLowerCase()];
+  } else if (source.startsWith("http")) {
+    // If the source is a URL, use it directly
+    feeds = [source];
+  } else {
+    throw new Error(
+      "Invalid source. Provide a country code or a valid RSS feed URL.",
+    );
+  }
+
+  const articlesPromises = feeds.map(async (feedUrl) => {
+    try {
+      const response = await fetch(feedUrl);
+      const feedString = await response.text();
+      const feed = await parser.parseString(feedString);
+
+      return feed.items.map((item) => ({
+        title: item.title || "",
+        description: item.contentSnippet || "",
+        url: item.link || "",
+        urlToImage: null,
+      }));
+    } catch (error) {
+      console.error(`Failed to fetch RSS feed: ${feedUrl}`, error);
+      return [];
+    }
+  });
+
+  const articlesArray = await Promise.all(articlesPromises);
+  const articles = articlesArray.flat();
+
+  sendResponse({ news: { articles } });
+}

src/css/documentload.scss

@@ -15,7 +15,7 @@
  * along with EvenBetterSEQTA.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@use 'injected/popup.scss';
+@use "injected/popup.scss";
 
 html {
   background: #161616 !important;
@@ -77,7 +77,9 @@ html {
   transform-origin: top;
   transition: transform 0.2s;
 }
-body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltiptext {
+body:has(.outside-container:not(.hide))
+  #AddedSettings.tooltip:hover
+  > .tooltiptext {
   transform: scale(0);
 }
 .assessmenttooltip svg {
@@ -92,3 +94,57 @@ body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltipt
   background: var(--text-primary) !important;
   color: var(--theme-primary) !important;
 }
+.fixed-tooltip {
+  display: inline-block;
+  z-index: 5 !important;
+  width: 28px;
+  background: none;
+  box-shadow: none;
+  padding: 2px;
+  position: absolute;
+}
+.fixed-tooltip svg {
+  fill: var(--theme-primary);
+}
+.tooltiptext-fixed {
+  width: 120px;
+  transform: scale(0);
+  transition: transform 0.2s;
+  transform-origin: top;
+  background: var(--background-primary);
+  color: var(--text-primary);
+  text-align: center;
+  border-radius: 6px;
+  padding: 2px;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  margin-left: -62px;
+}
+.tooltiptext-fixed::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent var(--text-primary) transparent;
+}
+.tooltiptext-fixed.show {
+  transform: scale(1);
+  transform-origin: top;
+  transition: transform 0.2s;
+}
+.tooltiptext-fixed p:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.3) !important;
+  transition: 200ms;
+}
+.tooltiptext-fixed p {
+  border-radius: 8px !important;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: 2px;
+}

src/css/documentload.ts

@@ -1 +1 @@
-import './documentload.scss';
+import "./documentload.scss";

src/css/iframe.scss

@@ -25,7 +25,9 @@
   span,
   body {
     color: white !important;
-    text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
+    text-shadow:
+      1px 1px 2px #161616,
+      0 0 1em #161616;
   }
 
   body {
@@ -112,3 +114,10 @@
     transition: text-shadow 0.5s;
   }
 }
+
+.cke_panel_listItem > a {
+  
+  &:hover {
+    background: #3d3d3e !important;
+  }
+}

src/css/injected/popup.scss

@@ -36,5 +36,7 @@
   transform-origin: 70% 0;
   will-change: opacity, transform;
   transform: translateZ(0); // promotes GPU rendering
-  transition: opacity 0.05s, transform 0.05s;
+  transition:
+    opacity 0.05s,
+    transform 0.05s;
 }

src/css/injected/transparency.scss

@@ -8,10 +8,9 @@ html.transparencyEffects:not(.dark) {
   --background-secondary: rgba(229, 231, 235, 0.6);
 }
 
-
 html.transparencyEffects {
   /* Background Fixes */
-  .notifications__item___2ErJN,
+  [class*="notifications__item___"],
   #shortcuts {
     backdrop-filter: unset !important;
   }
@@ -22,49 +21,46 @@ html.transparencyEffects {
   }
 
   /* Blurs */
+  .search,
+  .document,
+  .border,
   .draggable,
   .notice,
-  .BasicPanel__BasicPanel___1GP6s,
+  [class*="BasicPanel__BasicPanel___"],
   .message.addMessage,
   .singleSelect,
   .uiFileHandlerPanel,
-  .Module__wrapper___2sbOo,
+  [class*="Module__wrapper___"],
-  .notifications__list___rp2L2,
+  [class*="notifications__list___"],
   .thread,
   .calendar,
   .navigator,
   #title,
-  .LabelList__selected___3Egk7,
+  [class*="LabelList__selected___"],
   .buttonChecklist,
   .pane,
-  .legacy-root button, .legacy-root a,
+  .legacy-root button,
-  .MessageList__MessageList___3DxoC {
+  .legacy-root a,
+  [class*="MessageList__MessageList___"] {
     backdrop-filter: blur(80px);
   }
 
+  .filter-select,
   .report {
     backdrop-filter: blur(10px) !important;
   }
 
+  #menu,
+  .kanban-column,
   .whatsnewContainer,
-  .Message__Message___3oJaU {
+  [class*="Message__Message___"] {
     backdrop-filter: blur(50px);
   }
 
-  #menu {
-    backdrop-filter: blur(20px);
-  }
-
   .title > a {
     backdrop-filter: blur(0px) !important;
   }
 
-  .search,
-  .document,
-  .border {
-    backdrop-filter: blur(80px);
-  }
-
   #main > .dashboard {
     section,
     .dashlet {

src/declarations.d.ts

@@ -1,8 +1,14 @@
-declare module '*.mp4';
+declare module "*.mp4";
-declare module '*.woff';
+declare module "*.woff";
-declare module '*.scss';
+declare module "*.scss";
-declare module '*.png';
+declare module "*.png";
-declare module '*.html';
+declare module "*.html";
+declare module "*.svelte";
+
+declare module "*?inlineWorker" {
+  const value: () => Worker;
+  export default value;
+}
 
 declare module "*.png?base64" {
   const value: string;

src/interface/components/Button.svelte

@@ -2,6 +2,6 @@
   let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
 </script>
 
-<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
+<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'>
   {text}
 </button>

src/interface/components/CodeEditor.svelte

@@ -20,7 +20,7 @@
   let editor = $state<HTMLDivElement | null>(null)
   let view: EditorView | null = null;
   let editorTheme = new Compartment();
-  let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
+  let { value, onChange, className } = $props<{value: string, onChange: (value: string) => void, className?: string}>()
 
   function createEditorState(initialContents: string) {
       let extensions = [
@@ -91,4 +91,4 @@
   })
 </script>
 
-<div class="rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900" bind:this={editor}></div>
+<div class={`rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900 ${className}`} bind:this={editor}></div>

src/interface/components/ColourPicker.css

@@ -8,6 +8,13 @@ div:has(> #rbgcp-wrapper) {
       color: white !important;
     }
 
+    #rbgcp-inputs-wrap #rbgcp-hex-input,
+    #rbgcp-inputs-wrap #rbgcp-input {
+      color: white !important;
+      background-color: #37373b !important;
+      border: none !important;
+    }
+
     div:has(> #rbgcp-solid-btn),
     div:has(> #rbgcp-advanced-btn),
     #rbgcp-color-model-btn > div,

src/interface/components/ColourPicker.svelte

@@ -81,20 +81,20 @@
 </script>
 
 {#if standalone}
-  <div class="h-auto rounded-xl overflow-clip">
+  <div class="h-auto overflow-clip rounded-xl">
     <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
   </div>
 {:else}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={background}
-    class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
+    class="flex absolute top-0 left-0 z-50 justify-center items-center w-full h-full shadow-2xl cursor-pointer bg-black/20 border border-[#DDDDDD]/30 dark:border-[#38373D]/30"
     onclick={handleBackgroundClick}
     onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
   >
     <div
       bind:this={content}
-      class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+      class="p-4 h-auto bg-white rounded-xl border shadow-lg cursor-auto dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
     >
       <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
     </div>

src/interface/components/ColourPicker.tsx

@@ -1,6 +1,6 @@
-import ColorPicker from "react-best-gradient-color-picker"
+import ColorPicker from "react-best-gradient-color-picker";
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
-import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts";
 
 const defaultPresets = [
   "linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)",
@@ -22,12 +22,12 @@ const defaultPresets = [
   "rgba(30, 64, 175, 0.89)",
   "rgba(134, 25, 143, 1)",
   "rgba(14, 165, 233, 0.9)",
-]
+];
 
 interface PickerProps {
-  customOnChange?: (color: string) => void
+  customOnChange?: (color: string) => void;
-  customState?: string
+  customState?: string;
-  savePresets?: boolean
+  savePresets?: boolean;
 }
 
 export default function Picker({
@@ -35,32 +35,44 @@ export default function Picker({
   customState,
   savePresets = true,
 }: PickerProps) {
-  const [customThemeColor, setCustomThemeColor] = useState<string | null>()
+  const [customThemeColor, setCustomThemeColor] = useState<string | null>();
-  const [presets, setPresets] = useState<string[]>()
+  const [presets, setPresets] = useState<string[]>();
 
-  const latestValuesRef = useRef({ customThemeColor, customOnChange, savePresets, presets });
+  const latestValuesRef = useRef({
+    customThemeColor,
+    customOnChange,
+    savePresets,
+    presets,
+  });
 
   useEffect(() => {
     if (customState !== undefined && customState !== null) {
-      setCustomThemeColor(customState)
+      setCustomThemeColor(customState);
     } else {
-      setCustomThemeColor(settingsState.selectedColor ?? null)
+      setCustomThemeColor(settingsState.selectedColor ?? null);
     }
 
     if (presets === undefined) {
-      const savedPresets = localStorage.getItem("colorPickerPresets")
+      const savedPresets = localStorage.getItem("colorPickerPresets");
-      setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets)
+      setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets);
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    latestValuesRef.current = { customThemeColor, customOnChange, savePresets, presets };
+    latestValuesRef.current = {
+      customThemeColor,
+      customOnChange,
+      savePresets,
+      presets,
+    };
   }, [customThemeColor, customOnChange, savePresets, presets]);
 
   useEffect(() => {
     return () => {
-      const { customThemeColor, customOnChange, savePresets, presets } = latestValuesRef.current;
+      const { customThemeColor, customOnChange, savePresets, presets } =
-      if (!(customThemeColor && !customOnChange && savePresets && presets)) return;
+        latestValuesRef.current;
+      if (!(customThemeColor && !customOnChange && savePresets && presets))
+        return;
 
       // Only proceed if presets are different (avoid unnecessary updates)
       const existingIndex = presets.indexOf(customThemeColor);
@@ -79,30 +91,33 @@ export default function Picker({
         updatedPresets = [customThemeColor, ...presets].slice(0, 18);
       }
 
-      localStorage.setItem("colorPickerPresets", JSON.stringify(updatedPresets));
+      localStorage.setItem(
-    }
+        "colorPickerPresets",
-  }, [])
+        JSON.stringify(updatedPresets),
+      );
+    };
+  }, []);
 
   useEffect(() => {
     if (customThemeColor && !customOnChange) {
-      settingsState.selectedColor = customThemeColor
+      settingsState.selectedColor = customThemeColor;
     }
-  }, [customThemeColor, customOnChange])
+  }, [customThemeColor, customOnChange]);
 
   return (
     <ColorPicker
       disableDarkMode={true}
       presets={presets}
-      hideInputs={true}
+      hideInputs={customOnChange ? false : true}
       value={customThemeColor ?? ""}
       onChange={(color: string) => {
         if (customOnChange) {
-          customOnChange(color)
+          customOnChange(color);
-          setCustomThemeColor(color)
+          setCustomThemeColor(color);
         } else {
-          setCustomThemeColor(color)
+          setCustomThemeColor(color);
         }
       }}
     />
-  )
+  );
 }

src/interface/components/HotkeyInput.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import { isValidHotkey, parseHotkey } from '@/plugins/built-in/globalSearch/src/utils/hotkeyUtils';
+
+  let { value, onChange } = $props<{ 
+    value: string, 
+    onChange: (newValue: string) => void 
+  }>();
+
+  let isRecording = $state(false);
+  let recordedKeys = $state<Set<string>>(new Set());
+  let inputElement = $state<HTMLInputElement>();
+
+  const formatKeyForHotkey = (key: string): string => {
+    // Map special keys to their hotkey format
+    const keyMap: Record<string, string> = {
+      'Control': 'ctrl',
+      'Meta': 'cmd',
+      'Alt': 'alt',
+      'Shift': 'shift',
+      ' ': 'space',
+      'ArrowUp': 'up',
+      'ArrowDown': 'down',
+      'ArrowLeft': 'left',
+      'ArrowRight': 'right',
+      'Escape': 'esc',
+      'Enter': 'enter',
+      'Tab': 'tab',
+      'Backspace': 'backspace',
+      'Delete': 'delete',
+    };
+
+    return keyMap[key] || key.toLowerCase();
+  };
+
+  const formatKeyForDisplay = (key: string): string => {
+    // Map keys to their display format
+    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    const keyMap: Record<string, string> = {
+      'ctrl': isMac ? '⌃' : 'Ctrl',
+      'cmd': '⌘',
+      'meta': '⌘',
+      'alt': isMac ? '⌥' : 'Alt',
+      'shift': isMac ? '⇧' : 'Shift',
+      'space': 'Space',
+      'up': '↑',
+      'down': '↓',
+      'left': '←',
+      'right': '→',
+      'esc': 'Esc',
+      'enter': 'Enter',
+      'tab': 'Tab',
+      'backspace': 'Backspace',
+      'delete': 'Delete',
+    };
+
+    return keyMap[key.toLowerCase()] || key.toUpperCase();
+  };
+
+  const getHotkeyParts = (hotkeyString: string): string[] => {
+    if (!hotkeyString || !isValidHotkey(hotkeyString)) {
+      return [];
+    }
+
+    const parsed = parseHotkey(hotkeyString);
+    const parts: string[] = [];
+    
+    // Add modifiers in a consistent order
+    if (parsed.ctrl) parts.push('ctrl');
+    if (parsed.meta) parts.push('cmd');
+    if (parsed.alt) parts.push('alt');
+    if (parsed.shift) parts.push('shift');
+    
+    // Add the main key
+    if (parsed.key) parts.push(parsed.key);
+    
+    return parts;
+  };
+
+  const startRecording = () => {
+    isRecording = true;
+    recordedKeys.clear();
+    inputElement?.focus();
+  };
+
+  const stopRecording = () => {
+    if (recordedKeys.size > 0) {
+      if (recordedKeys.has('esc')) {
+        onChange('');
+        isRecording = false;
+        recordedKeys.clear();
+        inputElement?.blur();
+        return;
+      }
+
+      // Build the hotkey string
+      const modifiers: string[] = [];
+      let mainKey = '';
+
+      for (const key of recordedKeys) {
+        if (['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
+          modifiers.push(key);
+        } else {
+          mainKey = key;
+        }
+      }
+
+      if (mainKey) {
+        const hotkeyString = [...modifiers, mainKey].join('+');
+        if (isValidHotkey(hotkeyString)) {
+          onChange(hotkeyString);
+        }
+      }
+    }
+    
+    isRecording = false;
+    recordedKeys.clear();
+    inputElement?.blur();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isRecording) return;
+    
+    e.preventDefault();
+    e.stopPropagation();
+
+    const key = formatKeyForHotkey(e.key);
+    
+    // Add modifiers
+    if (e.ctrlKey) recordedKeys.add('ctrl');
+    if (e.metaKey) recordedKeys.add('cmd');
+    if (e.altKey) recordedKeys.add('alt');
+    if (e.shiftKey) recordedKeys.add('shift');
+    
+    // Add the main key (ignore modifier keys themselves)
+    if (!['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
+      recordedKeys.add(key);
+    }
+
+    // Auto-stop recording if we have a main key
+    if (!['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
+      setTimeout(stopRecording, 100);
+    }
+  };
+
+  const handleKeyUp = (e: KeyboardEvent) => {
+    if (!isRecording) return;
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleBlur = () => {
+    if (isRecording) {
+      stopRecording();
+    }
+  };
+
+  $effect(() => {
+    if (isRecording && inputElement) {
+      inputElement.focus();
+    }
+  });
+
+  // Get the parts to display
+  const hotkeyParts = $derived(isRecording 
+    ? Array.from(recordedKeys).map(formatKeyForDisplay)
+    : getHotkeyParts(value).map(formatKeyForDisplay));
+</script>
+
+<div class="flex gap-2 items-center">
+  <div class="relative">
+    {#if isRecording}
+      <!-- Recording state -->
+      <div 
+        class="flex items-center justify-center px-3 py-1.5 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white border cursor-pointer text-nowrap"
+        onclick={startRecording}
+        onkeydown={startRecording}
+        role="button"
+        tabindex="0"
+      >
+        Press keys...
+      </div>
+    {:else if hotkeyParts.length > 0}
+      <!-- Display current hotkey -->
+      <div 
+        class="flex gap-1 items-center text-sm rounded-md border-none cursor-pointer dark:text-white"
+        onclick={startRecording}
+        onkeydown={startRecording}
+        role="button"
+        tabindex="0"
+      >
+        {#each hotkeyParts as part}
+          <div class="size-8 text-sm flex items-center justify-center rounded-md border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30">
+            {part}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <!-- Empty state -->
+      <div 
+        class="flex items-center justify-center px-3 py-2 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD] dark:text-white border-none cursor-pointer text-nowrap"
+        onclick={startRecording}
+        onkeydown={startRecording}
+        role="button"
+        tabindex="0"
+      >
+        <span class="text-gray-500 dark:text-gray-400">Click to set</span>
+      </div>
+    {/if}
+
+    <!-- Hidden input for focus management -->
+    <input
+      bind:this={inputElement}
+      type="text"
+      readonly
+      class="absolute inset-0 opacity-0 pointer-events-none"
+      onkeydown={handleKeyDown}
+      onkeyup={handleKeyUp}
+      onblur={handleBlur}
+    />
+  </div>
+</div>
+
+<style>
+  input:focus {
+    outline: none;
+  }
+</style> 

src/interface/components/PickerSwatch.svelte

@@ -5,7 +5,8 @@
 </script>
 
 <button
+  aria-label="Color Picker Swatch"
   onclick={onClick}
   style="background: {$settingsState.selectedColor}"
-  class="w-16 h-8 rounded-md"
+  class="w-16 h-8 rounded-md shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30"
 ></button>

src/interface/components/Select.svelte

@@ -8,11 +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-lg w-full overflow-clip">
   <select
     bind:this={select}
     value={state}
     onchange={() => onChange(select.value)}
-  class="px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md w-full"
+    class="px-4 py-1 text-[0.75rem] dark:text-white w-full border-none bg-transparent focus:ring-0 focus:bg-white/20 dark:focus:bg-black/10"
   >
     {#each options as option}
       <option value={option.value}>
@@ -20,3 +21,4 @@
       </option>
     {/each}
   </select>
+</div>

src/interface/components/Slider.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
-  let { state, onChange } = $props<{ state: number, onChange: (value: number) => void }>();
+  let { state, onChange, min = 0, max = 100, step = 1 } = $props<{ 
-  let percentage = $derived((state / 100) * 100);
+    state: number, 
+    onChange: (value: number) => void,
+    min?: number,
+    max?: number,
+    step?: number
+  }>();
+  let percentage = $derived(((state - min) / (max - min)) * 100);
 </script>
 
-<div class="relative w-full max-w-lg mx-auto">
+<div class="relative mx-auto w-full max-w-lg">
   <input
     type="range"
-    min="0"
+    min={min}
-    max="100"
+    max={max}
+    step={step}
     bind:value={state}
-    style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
+    style={`background: linear-gradient(to right, #30d259ad 0%, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
     onchange={(e) => onChange(Number(e.currentTarget.value))}
-    class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
+    class="w-full h-1 rounded-full appearance-none cursor-pointer slider"
   />
 </div>
 
@@ -31,6 +38,7 @@
     height: 24px;
     box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
     background: white;
+    color: #30d259ad;
     cursor: pointer;
     border-radius: 50%;
   }

src/interface/components/Switch.css

@@ -1,4 +1,4 @@
 .dark .switch[data-ison="true"],
 .switch[data-ison="true"] {
-  background-color: #30D259;
+  background-color: #30d259;
 }

src/interface/components/Switch.svelte

@@ -30,8 +30,7 @@
 </script>
 
 <div
-  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch select-none"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr select-none shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30 {state ? 'to-[#30D259]/80 from-[#30D259] dark:from-[#30D259]/40 dark:to-[#30D259]' : 'dark:from-[#38373D]/50 dark:to-[#38373D] to-[#DDDDDD]/50 from-[#DDDDDD]'}"
-  data-ison={state}
   onclick={() => onChange(!state)}
   onkeydown={(e) => e.key === "Enter" && onChange(!state)}
   role="switch"
@@ -43,9 +42,3 @@
     class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
   ></div>
 </div>
-
-<style>
-  .switch[data-ison="true"] {
-    background-color: #30D259;
-  }
-</style>

src/interface/components/TabbedContainer.svelte

@@ -5,7 +5,6 @@
 
   let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
   let activeTab = $state(0);
-  let hoveredTab = $state<number | null>(null);
   let containerRef: HTMLElement | null = null;
   let tabWidth = $state(0);
 
@@ -24,10 +23,6 @@
     return 0;
   };
 
-  $effect(() => {
-    calcXPos(hoveredTab);
-  });
-
   onMount(() => {
     updateTabWidth();
 
@@ -45,26 +40,24 @@
 </script>
 
 <div class="flex flex-col h-full">
-  <div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
+  <div class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 px-2 tab-width-container">
-    <div class="relative flex">
+    <div bind:this={containerRef} class="flex relative">
       <MotionDiv
-        class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
+        class="absolute top-0 left-0 z-0 h-full bg-gradient-to-tr dark:from-[#38373D]/80 dark:to-[#38373D] from-[#DDDDDD]/80 to-[#DDDDDD] rounded-full opacity-40 tab-width"
-        animate={{ x: calcXPos(hoveredTab) }}
+        animate={{ x: calcXPos(activeTab) }}
         transition={springTransition}
       />
       {#each tabs as { title }, index}
         <button
           class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
           onclick={() => activeTab = index}
-          onmouseenter={() => hoveredTab = index}
-          onmouseleave={() => hoveredTab = null}
         >
           {title}
         </button>
       {/each}
     </div>
   </div>
-  <div class="h-full px-4 overflow-hidden">
+  <div class="overflow-hidden px-4 h-full">
     <MotionDiv
       class="h-full"
       animate={{ x: `${-activeTab * 100}%` }}
@@ -72,8 +65,9 @@
     >
       <div class="flex">
         {#each tabs as { Content, props }, index}
-          <div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
+        <div class="absolute focus:outline-none w-full pt-2 transition-opacity duration-300 overflow-y-scroll no-scrollbar pb-2 h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
           style="left: {index * 100}%;">
+          <div style="left: {index * 100}%;" class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-white dark:from-zinc-800 dark:to-transparent"></div>
              <Content {...props} />
           </div>
         {/each}

src/interface/components/store/Backgrounds.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
-  import { setTheme } from '@/seqta/ui/themes/setTheme';
   import Spinner from '../Spinner.svelte';
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
-  import Fuse from 'fuse.js';
+  import { Index } from 'flexsearch';
   import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
+
+  const themeManager = ThemeManager.getInstance();
 
   type Background = { id: string; category: string; type: string; lowResUrl: string; highResUrl: string; name: string; description: string; featured?: boolean };
   let { searchTerm } = $props<{ searchTerm: string }>();
@@ -18,19 +20,12 @@
   let savedBackgrounds = $state<string[]>([]);
   let installingBackgrounds = $state<Set<string>>(new Set());
   let debugInfo = $state<string>('');
+  let searchIndex = $state<Index | null>(null);
 
   // New state variables
   let activeTab = $state<'all' | 'installed' | 'photos' | 'videos'>('all');
   let sortBy = $state<'newest' | 'popular' | 'name'>('newest');
 
-  // Add Fuse.js options
-  const fuseOptions = {
-    keys: ['name', 'description'],
-    threshold: 0.4,
-    ignoreLocation: true
-  };
-  let fuse: Fuse<Background>;
-
   // Existing functions
   const loadStore = async () => {
     try {
@@ -41,7 +36,19 @@
       }
       const data = await response.json();
       backgrounds = data.backgrounds;
-      fuse = new Fuse(backgrounds, fuseOptions);
+      
+      // Initialize FlexSearch index
+      const index = new Index({
+        tokenize: "forward",
+        preset: "score"
+      });
+      
+      // Add backgrounds to the index
+      backgrounds.forEach((bg, i) => {
+        index.add(i, bg.name + " " + bg.description);
+      });
+      
+      searchIndex = index;
       debugInfo = `Loaded ${backgrounds.length} backgrounds`;
       await loadSavedBackgrounds();
     } catch (e) {
@@ -72,14 +79,10 @@
   let filteredBackgrounds = $derived((() => {
     let filtered = backgrounds;
     
-    // Use Fuse.js search if there's a search term
+    // Use FlexSearch if there's a search term
-    if (searchTerm.trim()) {
+    if (searchTerm.trim() && searchIndex) {
-      // @ts-ignore
+      const results = searchIndex.search(searchTerm) as number[];
-      if (fuse) {
+      filtered = results.map(i => backgrounds[i]);
-        filtered = fuse.search(searchTerm).map((result: any) => result.item) ?? [];
-      } else {
-        filtered = backgrounds.filter(bg => bg.name.toLowerCase().includes(searchTerm.toLowerCase()));
-      }
     }
 
     // Apply category filtering
@@ -170,13 +173,13 @@
   
   function selectNoBackground() {
     selectedBackground = null;
-    setTheme('');
+    themeManager.setTheme('');
   }
 </script>
 
 <div class="flex h-full">
   <!-- Sidebar -->
-  <div class="w-64 h-full p-4 border-r border-zinc-200 dark:border-zinc-700">
+  <div class="p-4 w-64 h-full border-r border-zinc-200 dark:border-zinc-700">
     <div class="mb-8">
       <h2 class="mb-4 text-lg font-semibold">Categories</h2>
       <nav class="space-y-2">
@@ -208,15 +211,15 @@
   </div>
 
   <!-- Main Content -->
-  <div class="flex-1 overflow-auto">
+  <div class="overflow-auto flex-1">
     <!-- Header -->
     <div class="sticky top-0 z-10 p-4 border-b bg-[#F1F1F3] dark:bg-zinc-900 dark:border-zinc-700">
-      <div class="flex items-center justify-between mb-4">
+      <div class="flex justify-between items-center mb-4">
         <h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
-        <div class="flex items-center gap-4">
+        <div class="flex gap-4 items-center">
           <select 
             bind:value={sortBy} 
-            class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
+            class="p-2 rounded-lg border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
           >
             <option value="newest">Newest</option>
             <option value="name">Name</option>
@@ -230,7 +233,7 @@
           <button
             class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
               ${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' : 
-                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-1 dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
+                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
             onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
           >
             {tab}
@@ -244,15 +247,15 @@
       {#if isLoading}
         <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {#each Array(9) as _}
-            <div class="relative overflow-hidden rounded-lg animate-pulse">
+            <div class="overflow-hidden relative rounded-lg animate-pulse">
               <!-- Image placeholder -->
               <div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
               <!-- Gradient overlay -->
-              <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-zinc-300 dark:from-zinc-700 to-transparent">
+              <div class="absolute right-0 bottom-0 left-0 h-16 to-transparent bg-linear-to-t from-zinc-300 dark:from-zinc-700">
                 <!-- Title placeholder -->
-                <div class="absolute bottom-2 left-2 right-2">
+                <div class="absolute right-2 bottom-2 left-2">
                   <div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
-                  <div class="w-1/2 h-3 mt-2 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
+                  <div class="mt-2 w-1/2 h-3 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
                 </div>
               </div>
             </div>
@@ -271,7 +274,7 @@
             return true;
           }) as background (background.id)}
             <div
-              class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer group"
+              class="overflow-hidden relative rounded-lg shadow-lg cursor-pointer group"
               onclick={() => toggleBackgroundInstallation(background)}
               onkeydown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
@@ -286,7 +289,7 @@
               {:else}
                 <video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
               {/if}
-              <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
+              <div class={`flex absolute inset-0 justify-center items-center opacity-0 transition-opacity duration-300 bg-black/50 group-hover:opacity-100 ${installingBackgrounds.has(background.id) ? 'opacity-100' : ''}`}>
                 {#if installingBackgrounds.has(background.id)}
                   <Spinner />
                 {:else if savedBackgrounds.includes(background.id)}

src/interface/components/store/CoverSwiper.svelte

@@ -27,9 +27,9 @@
 </script>
 
 {#if coverThemes.length > 0}
-  <div class="relative w-full transition-opacity rounded-xl overflow-clip" transition:fade>
+  <div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
     <div 
-      class="w-full aspect-[8/3]" 
+      class="w-full aspect-8/3" 
       use:emblaCarouselSvelte={{ options, plugins }} 
       onemblaInit={onInit}
     >
@@ -47,20 +47,20 @@
               <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
               <p class='text-lg text-white'>{theme.description}</p>
             </div>
-            <div class='absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/80 to-transparent'></div>
+            <div class='absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80'></div>
           </div>
         {/each}
       </div>
     </div>
 
     <!-- Navigation buttons -->
-    <div class='absolute z-10 flex gap-2 bottom-2 right-2'>
+    <div class='flex absolute right-2 bottom-2 z-10 gap-2'>
-      <button aria-label="Previous" onclick={slidePrev} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+      <button aria-label="Previous" onclick={slidePrev} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
         </svg>
       </button>
-      <button aria-label="Next" onclick={slideNext} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+      <button aria-label="Next" onclick={slideNext} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
         </svg>

src/interface/components/store/FilterPanel.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import type { Background } from './types';
-
-  export let filteredBackgrounds: Background[];
-
   let dispatch = createEventDispatcher();
 
   let filters = $state({
@@ -13,9 +9,9 @@
     orientation: [] as string[]
   });
 
-  $: {
+  $effect(() => {
     dispatch('filter', filters);
-  }
+  });
 
   function toggleFilter(category: keyof typeof filters, value: string) {
     if (filters[category].includes(value)) {
@@ -42,21 +38,19 @@
     <h3 class="mb-2 font-medium">Type</h3>
     <div class="space-y-2">
       <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('image')} on:change={() => toggleFilter('type', 'image')}>
+        <input type="checkbox" checked={filters.type.includes('image')} onchange={() => toggleFilter('type', 'image')}>
         <span class="ml-2">Image</span>
       </label>
       <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('video')} on:change={() => toggleFilter('type', 'video')}>
+        <input type="checkbox" checked={filters.type.includes('video')} onchange={() => toggleFilter('type', 'video')}>
         <span class="ml-2">Video</span>
       </label>
     </div>
   </div>
     
-  <!-- Add similar sections for color, resolution, and orientation -->
-  
   <button 
     class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
-    on:click={clearFilters}
+    onclick={clearFilters}
   >
     Clear Filters
   </button>

src/interface/components/store/Header.svelte

@@ -20,8 +20,8 @@
 </script>
 
 <header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
-  <div class="flex items-center justify-between px-4 py-1">
+  <div class="flex justify-between items-center px-4 py-1">
-    <div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
+    <div class="flex gap-4 place-items-center cursor-pointer" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
       <img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
       <img src={browser.runtime.getURL(logoDark)} class="h-14 {darkMode ? '' : 'hidden'}" alt="Dark Logo" />
 
@@ -41,7 +41,7 @@
       </button>
     </div>
 
-    <div class="relative flex gap-2">
+    <div class="flex relative gap-2">
       <input
         type="text"
         placeholder="Search themes..."
@@ -49,7 +49,7 @@
         oninput={(e: any) => setSearchTerm(e.target.value)}
         class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
       <svg
-        class="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
+        class="absolute left-3 top-1/2 w-5 h-5 text-gray-400 transform -translate-y-1/2 dark:text-gray-200"
         fill="none"
         stroke-linecap="round"
         stroke-linejoin="round"

src/interface/components/store/ThemeCard.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { Theme } from '@/interface/types/Theme'
+
   let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
 
   import { fade } from 'svelte/transition';
@@ -6,12 +8,12 @@
 
 <div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
   <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
-    <div class="absolute z-10 mb-1 text-xl font-bold text-white bottom-1 left-3">
+    <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
       {theme.name}
     </div>
-    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent'></div>
+    <div class='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.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
+      <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
     </div>
   </div>
 </div>

src/interface/components/store/ThemeModal.svelte

@@ -54,7 +54,7 @@
 </script>
 
 <div 
-  class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" 
+  class="flex fixed inset-0 z-50 justify-center items-end bg-black/70" 
   onclick={(e) => {
     if (e.target === e.currentTarget) hideModal();
   }} 
@@ -79,12 +79,12 @@
       <h2 class="mb-4 text-2xl font-bold">
         {theme.name}
       </h2>
-      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover w-full mb-4 rounded-md" />
+      <img src={theme.marqueeImage} 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>
       {#if currentThemes.includes(theme.id)}
-        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <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">
           {#if installing}
             <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -93,7 +93,7 @@
           <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
         </button>
       {:else}
-        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+        <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">
           {#if installing}
             <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
@@ -112,11 +112,11 @@
         {#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
           <button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
             <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border">
-              <div class="absolute z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5 bottom-1 left-3">
+              <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 bg-gradient-to-t from-black/80 to-transparent"></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.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
+              <img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
             </div>
           </button>
         {/each}

src/interface/components/themes/BackgroundItem.svelte

@@ -15,7 +15,7 @@
   onkeydown={onClick}
   tabindex="-1"
   role="button"
-  class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
+  class="relative w-16 h-16 cursor-pointer rounded-xl transition ring-3 dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
 >
   {#if isEditMode}
     <div

src/interface/components/themes/ThemeSelector.svelte

@@ -1,29 +1,28 @@
 <script lang="ts">
   import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
-  import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
   import { onDestroy, onMount } from 'svelte'
-  import { OpenThemeCreator } from '@/seqta/ui/ThemeCreator'
+  import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
-  import shareTheme from '@/seqta/ui/themes/shareTheme'
-  import { InstallTheme } from '@/seqta/ui/themes/downloadTheme'
-  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
-  import { setTheme } from '@/seqta/ui/themes/setTheme'
-  import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
   import { OpenStorePage } from '@/seqta/ui/renderStore'
   import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
-  import { closeExtensionPopup } from '@/SEQTA'
+  import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
+
+  const themeManager = ThemeManager.getInstance();
 
   let themes = $state<ThemeList | null>(null);
   let { isEditMode } = $props<{ isEditMode: boolean }>();
   let isDragging = $state(false);
   let tempTheme = $state(null);
 
-  const handleThemeClick = async (theme: CustomTheme) => {
+  const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
     if (isEditMode) return;
     if (theme.id === themes?.selectedTheme) {
-      await disableTheme();
+      themeManager.setTransitionPoint(e.clientX, e.clientY);
+      await themeManager.disableTheme();
       themes.selectedTheme = '';
     } else {
-      await setTheme(theme.id);
+      themeManager.setTransitionPoint(e.clientX, e.clientY);
+      await themeManager.setTheme(theme.id);
       if (!themes) return;
       themes.selectedTheme = theme.id;
     }
@@ -31,13 +30,13 @@
 
   const handleThemeDelete = async (themeId: string) => {
     try {
-      await deleteTheme(themeId);
+      await themeManager.deleteTheme(themeId);
       if (!themes) return;
 
       themes.themes = themes.themes.filter(theme => theme.id !== themeId);
       if (themeId === themes.selectedTheme) {
         themes.selectedTheme = '';
-        await disableTheme();
+        await themeManager.disableTheme();
       }
     } catch (error) {
       console.error('Error deleting theme:', error);
@@ -46,7 +45,7 @@
 
   const handleShareTheme = async (theme: CustomTheme) => {
     try {
-      await shareTheme(theme.id);
+      await themeManager.shareTheme(theme.id);
     } catch (error) {
       console.error('Error sharing theme:', error);
     }
@@ -72,9 +71,10 @@
       try {
         const result = JSON.parse(event.target?.result as string);
         tempTheme = result;
-        await InstallTheme(result);
+        await themeManager.installTheme(result);
         await fetchThemes();
       } catch (error) {
+        console.error('Error parsing file:', error);
         alert('Error parsing file. Please upload a valid JSON theme file.');
       }
       tempTheme = null;
@@ -83,7 +83,10 @@
   }
 
   const fetchThemes = async () => {
-    themes = await getAvailableThemes();
+    themes = {
+      themes: await themeManager.getAvailableThemes(),
+      selectedTheme: themeManager.getSelectedThemeId() || '',
+    }
   }
 
   onMount(async () => {
@@ -98,7 +101,7 @@
 </script>
 
 <div
-  class="w-full pt-5 mb-1"
+  class="pt-5 mb-1 w-full"
   role="list"
   tabindex="-1"
   ondragover={handleDragOver}
@@ -106,9 +109,9 @@
   ondrop={handleDrop}
 >
   <div class="{isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50">
-    <div class="sticky w-full h-64 bg-white shadow-xl dark:bg-zinc-900 top-5 dark:text-white rounded-xl outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
+    <div class="sticky top-5 w-full h-64 bg-white rounded-xl shadow-xl dark:bg-zinc-900 dark:text-white outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
-      <div class="flex items-center justify-center h-full">
+      <div class="flex justify-center items-center h-full">
-        <div class="flex flex-col items-center justify-center">
+        <div class="flex flex-col justify-center items-center">
           <svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
             <g fill="currentColor">
               <path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
@@ -126,11 +129,11 @@
       {#each themes.themes as theme (theme.id)}
         <button
           class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
-          onclick={() => handleThemeClick(theme)}
+          onclick={(e) => handleThemeClick(theme, e)}
         >
           {#if isEditMode}
             <div
-              class="absolute z-20 flex w-6 h-6 p-2 text-white bg-red-600 rounded-full opacity-100 right-2 place-items-center top-2"
+              class="flex absolute top-2 right-2 z-20 place-items-center p-2 w-6 h-6 text-white bg-red-600 rounded-full opacity-100"
               onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
               onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
               role="button"
@@ -152,7 +155,7 @@
             </div>
 
             <div
-              class="absolute z-20 flex w-8 h-8 p-2 text-center transition-all -translate-y-1/2 rounded-full opacity-0 text-white/80 top-1/4 right-12 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2"
+              class="flex absolute right-12 top-1/4 z-20 place-items-center p-2 w-8 h-8 text-center rounded-full opacity-0 transition-all -translate-y-1/2 text-white/80 bg-black/50 group-hover:opacity-100 group-hover:top-1/2"
               onclick={(event) => { event.stopPropagation(); handleShareTheme(theme) }}
               onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleShareTheme(theme) }}
               role="button"
@@ -167,7 +170,7 @@
               <img
                 src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
                 alt={theme.name}
-                class="absolute inset-0 z-0 object-cover w-full h-full pointer-events-none"
+                class="object-cover absolute inset-0 z-0 w-full h-full pointer-events-none"
               />
             {/if}
             {#if !theme.hideThemeName}
@@ -179,7 +182,7 @@
     {/if}
 
     {#if tempTheme}
-      <div class="flex justify-center w-full bg-gray-200 rounded-xl dark:bg-zinc-700/50 place-items-center aspect-theme animate-pulse">
+      <div class="flex justify-center place-items-center w-full bg-gray-200 rounded-xl animate-pulse dark:bg-zinc-700/50 aspect-theme">
         <svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -193,7 +196,7 @@
 
     <button
       onclick={() => OpenStorePage()}
-      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
     >
       <span class="text-xl font-IconFamily">&#xecc5;</span>
       <span class="ml-2">Theme Store</span>
@@ -201,7 +204,7 @@
 
     <button
       onclick={() => { OpenThemeCreator(); closeExtensionPopup() }}
-      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
     >
       <span class="text-xl font-IconFamily">&#xec60;</span>
       <span class="ml-2">Create your own</span>

src/interface/hooks/BackgroundDataLoader.ts

@@ -1,8 +1,20 @@
-import { type DBSchema, type IDBPDatabase, openDB } from 'idb';
+import { type DBSchema, type IDBPDatabase, openDB } from "idb";
 
+/**
+ * Defines the schema for the IndexedDB database used for storing background image data.
+ *
+ * @interface BackgroundDB
+ * @extends {DBSchema}
+ * @property {object} backgrounds - The object store for background images.
+ * @property {string} backgrounds.key - The type of the key for the object store (in this case, it's `id` as defined in `keyPath`).
+ * @property {object} backgrounds.value - The structure of the objects stored.
+ * @property {string} backgrounds.value.id - The unique identifier for the background image record.
+ * @property {string} backgrounds.value.type - The MIME type of the image (e.g., "image/png", "image/jpeg").
+ * @property {Blob} backgrounds.value.blob - The binary large object (Blob) containing the image data.
+ */
 interface BackgroundDB extends DBSchema {
   backgrounds: {
-    key: string;
+    key: string; // Corresponds to the 'id' property due to keyPath: "id"
     value: {
       id: string;
       type: string;
@@ -13,43 +25,100 @@ interface BackgroundDB extends DBSchema {
 
 let db: IDBPDatabase<BackgroundDB> | null = null;
 
+/**
+ * Initializes and opens an IndexedDB connection or returns an existing one.
+ * If the database doesn't exist or needs an upgrade, the `upgrade` callback
+ * creates the 'backgrounds' object store with 'id' as the keyPath.
+ *
+ * @async
+ * @returns {Promise<IDBPDatabase<BackgroundDB>>} A promise that resolves with the database instance.
+ */
 export async function openDatabase(): Promise<IDBPDatabase<BackgroundDB>> {
   if (db) return db;
 
-  db = await openDB<BackgroundDB>('BackgroundDB', 1, {
+  db = await openDB<BackgroundDB>("BackgroundDB", 1, {
     upgrade(db: IDBPDatabase<BackgroundDB>) {
-      db.createObjectStore('backgrounds', { keyPath: 'id' });
+      db.createObjectStore("backgrounds", { keyPath: "id" });
     },
   });
 
   return db;
 }
 
-export async function readAllData(): Promise<Array<{ id: string; type: string; blob: Blob }>> {
+/**
+ * Retrieves all background image records from the 'backgrounds' object store in IndexedDB.
+ *
+ * @async
+ * @returns {Promise<Array<{id: string, type: string, blob: Blob}>>} A promise that resolves with an array of all background image records.
+ */
+export async function readAllData(): Promise<
+  Array<{ id: string; type: string; blob: Blob }>
+> {
   const db = await openDatabase();
-  return db.getAll('backgrounds');
+  return db.getAll("backgrounds");
 }
 
-export async function writeData(id: string, type: string, blob: Blob): Promise<void> {
+/**
+ * Writes or updates a background image record in the 'backgrounds' object store.
+ * If a record with the given `id` already exists, it will be updated. Otherwise, a new record is created.
+ *
+ * @async
+ * @param {string} id - The unique identifier for the background image record.
+ * @param {string} type - The MIME type of the image (e.g., "image/png").
+ * @param {Blob} blob - The Blob object containing the image data.
+ * @returns {Promise<void>} A promise that resolves when the data has been successfully written.
+ */
+export async function writeData(
+  id: string,
+  type: string,
+  blob: Blob,
+): Promise<void> {
   const db = await openDatabase();
-  await db.put('backgrounds', { id, type, blob });
+  await db.put("backgrounds", { id, type, blob });
 }
 
+/**
+ * Deletes a background image record from the 'backgrounds' object store by its ID.
+ *
+ * @async
+ * @param {string} id - The unique identifier of the background image record to delete.
+ * @returns {Promise<void>} A promise that resolves when the data has been successfully deleted.
+ */
 export async function deleteData(id: string): Promise<void> {
   const db = await openDatabase();
-  await db.delete('backgrounds', id);
+  await db.delete("backgrounds", id);
 }
 
+/**
+ * Clears all records from the 'backgrounds' object store in IndexedDB.
+ *
+ * @async
+ * @returns {Promise<void>} A promise that resolves when all data has been successfully cleared.
+ */
 export async function clearAllData(): Promise<void> {
   const db = await openDatabase();
-  await db.clear('backgrounds');
+  await db.clear("backgrounds");
 }
 
-export async function getDataById(id: string): Promise<{ id: string; type: string; blob: Blob } | undefined> {
+/**
+ * Retrieves a single background image record from the 'backgrounds' object store by its ID.
+ *
+ * @async
+ * @param {string} id - The unique identifier of the background image record to retrieve.
+ * @returns {Promise<{id: string, type: string, blob: Blob} | undefined>} A promise that resolves with the
+ *                                                                        background image record if found, or undefined otherwise.
+ */
+export async function getDataById(
+  id: string,
+): Promise<{ id: string; type: string; blob: Blob } | undefined> {
   const db = await openDatabase();
-  return db.get('backgrounds', id);
+  return db.get("backgrounds", id);
 }
 
+/**
+ * Closes the active IndexedDB connection and nullifies the global `db` variable.
+ * This is important to release resources and allow for proper database management.
+ */
 export function closeDatabase(): void {
   if (db) {
     db.close();
@@ -57,17 +126,31 @@ export function closeDatabase(): void {
   }
 }
 
-// Helper function to check if IndexedDB is supported
+/**
+ * Checks if IndexedDB is supported by the current browser environment.
+ *
+ * @returns {boolean} True if IndexedDB is supported, false otherwise.
+ */
 export function isIndexedDBSupported(): boolean {
-  return 'indexedDB' in window;
+  return "indexedDB" in window;
 }
 
-// Helper function to check if there's enough storage space
+/**
-export async function hasEnoughStorageSpace(requiredSpace: number): Promise<boolean> {
+ * Estimates available storage space and checks if it's sufficient for the specified `requiredSpace`.
-  if ('storage' in navigator && 'estimate' in navigator.storage) {
+ * Uses the `navigator.storage.estimate()` API if available.
+ * If the API is not available or cannot determine space, it defaults to assuming enough space is available.
+ *
+ * @async
+ * @param {number} requiredSpace - The amount of storage space required, in bytes.
+ * @returns {Promise<boolean>} A promise that resolves with true if enough space is estimated to be available, false otherwise.
+ */
+export async function hasEnoughStorageSpace(
+  requiredSpace: number,
+): Promise<boolean> {
+  if ("storage" in navigator && "estimate" in navigator.storage) {
     const { quota, usage } = await navigator.storage.estimate();
     if (quota !== undefined && usage !== undefined) {
-      return (quota - usage) > requiredSpace;
+      return quota - usage > requiredSpace;
     }
   }
   // If we can't determine, assume there's enough space

src/interface/hooks/BackgroundUpdates.ts

@@ -1,11 +1,21 @@
 type BackgroundUpdateCallback = () => void;
 
+/**
+ * A singleton class used to notify listeners about generic background updates or events.
+ * These updates typically signify that UI components or other parts of the application
+ * might need to refresh or re-evaluate background-related data (e.g., after a new background
+ * image is added, removed, or changed).
+ */
 class BackgroundUpdates {
   private static instance: BackgroundUpdates;
   private listeners: Set<BackgroundUpdateCallback> = new Set();
 
   private constructor() {}
 
+  /**
+   * Gets the singleton instance of the BackgroundUpdates class.
+   * @returns {BackgroundUpdates} The singleton instance.
+   */
   public static getInstance(): BackgroundUpdates {
     if (!BackgroundUpdates.instance) {
       BackgroundUpdates.instance = new BackgroundUpdates();
@@ -13,16 +23,33 @@ class BackgroundUpdates {
     return BackgroundUpdates.instance;
   }
 
+  /**
+   * Registers a callback function to be invoked when a background update is triggered.
+   *
+   * @param {BackgroundUpdateCallback} callback The function to call when a background update occurs.
+   *                                            This callback takes no arguments and returns void.
+   */
   public addListener(callback: BackgroundUpdateCallback): void {
     this.listeners.add(callback);
   }
 
+  /**
+   * Unregisters a previously added callback function.
+   * After calling this method, the provided callback will no longer be invoked when a background update is triggered.
+   *
+   * @param {BackgroundUpdateCallback} callback The callback function to remove from the listeners.
+   */
   public removeListener(callback: BackgroundUpdateCallback): void {
     this.listeners.delete(callback);
   }
 
+  /**
+   * Invokes all registered listener callbacks, signifying that a background update has occurred.
+   * This method should be called whenever a change to background data happens that requires
+   * other parts of the application to be notified.
+   */
   public triggerUpdate(): void {
-    this.listeners.forEach(callback => callback());
+    this.listeners.forEach((callback) => callback());
   }
 }
 

src/interface/hooks/SettingsPopup.ts

@@ -21,16 +21,32 @@ class SettingsPopup {
     return SettingsPopup.instance;
   }
 
+  /**
+   * Registers a callback function to be invoked when the settings popup is closed.
+   *
+   * @param {SettingsPopupCallback} callback The function to call when the settings popup closes.
+   *                                         This callback takes no arguments and returns void.
+   */
   public addListener(callback: SettingsPopupCallback): void {
     this.listeners.add(callback);
   }
 
+  /**
+   * Unregisters a previously added callback function.
+   * After calling this method, the provided callback will no longer be invoked when the settings popup closes.
+   *
+   * @param {SettingsPopupCallback} callback The callback function to remove from the listeners.
+   */
   public removeListener(callback: SettingsPopupCallback): void {
     this.listeners.delete(callback);
   }
 
+  /**
+   * Invokes all registered listener callbacks.
+   * This method should be called when the settings popup is closed to notify all subscribed components or services.
+   */
   public triggerClose(): void {
-    this.listeners.forEach(callback => callback());
+    this.listeners.forEach((callback) => callback());
   }
 }
 

src/interface/hooks/ThemeUpdates.ts

@@ -1,11 +1,21 @@
 type ThemeUpdateCallback = () => void;
 
+/**
+ * A singleton class used to notify listeners about theme-related updates.
+ * These updates can include events like theme changes, custom theme modifications,
+ * or any other event that might require UI components to refresh their appearance
+ * or re-apply theme styles.
+ */
 class ThemeUpdates {
   private static instance: ThemeUpdates;
   private listeners: Set<ThemeUpdateCallback> = new Set();
 
   private constructor() {}
 
+  /**
+   * Gets the singleton instance of the ThemeUpdates class.
+   * @returns {ThemeUpdates} The singleton instance.
+   */
   public static getInstance(): ThemeUpdates {
     if (!ThemeUpdates.instance) {
       ThemeUpdates.instance = new ThemeUpdates();
@@ -13,16 +23,33 @@ class ThemeUpdates {
     return ThemeUpdates.instance;
   }
 
+  /**
+   * Registers a callback function to be invoked when a theme update is triggered.
+   *
+   * @param {ThemeUpdateCallback} callback The function to call when a theme update occurs.
+   *                                       This callback takes no arguments and returns void.
+   */
   public addListener(callback: ThemeUpdateCallback): void {
     this.listeners.add(callback);
   }
 
+  /**
+   * Unregisters a previously added callback function.
+   * After calling this method, the provided callback will no longer be invoked when a theme update is triggered.
+   *
+   * @param {ThemeUpdateCallback} callback The callback function to remove from the listeners.
+   */
   public removeListener(callback: ThemeUpdateCallback): void {
     this.listeners.delete(callback);
   }
 
+  /**
+   * Invokes all registered listener callbacks, signifying that a theme-related update has occurred.
+   * This method should be called whenever a change related to themes happens that requires
+   * other parts of the application to be notified.
+   */
   public triggerUpdate(): void {
-    this.listeners.forEach(callback => callback());
+    this.listeners.forEach((callback) => callback());
   }
 }
 

src/interface/index.css

@@ -1,17 +1,11 @@
-@import './components/ColourPicker.css';
+@import "./components/ColourPicker.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
+button {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  @apply cursor-pointer;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
 }
 
 ::-webkit-scrollbar {
@@ -48,5 +42,9 @@ input {
 .cm-editor {
   width: 100%;
   min-height: 100px;
-  max-height: 400px;
+  height: inherit;
+}
+
+.editorHeight {
+  height: calc(100vh - 58px);
 }

src/interface/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BetterSEQTA+ Settings</title>
   </head>
-  <body>
+  <body class="h-[600px]">
-    <div id="app"></div>
+    <div id="app" style="height: 100%"></div>
     <script type="module" src="./index.ts"></script>
   </body>
 </html>

src/interface/index.ts

@@ -1,46 +1,34 @@
-import "./index.css"
+import "./index.css";
-import { mount } from "svelte"
+import Settings from "./pages/settings.svelte";
-import type { ComponentType } from "svelte"
+import IconFamily from "@/resources/fonts/IconFamily.woff";
-import Settings from "./pages/settings.svelte"
+import browser from "webextension-polyfill";
-import IconFamily from '@/resources/fonts/IconFamily.woff'
+import renderSvelte from "./main";
-import browser from "webextension-polyfill"
+import { initializeSettingsState } from "@/seqta/utils/listeners/SettingsState";
-
-export default function renderSvelte(
-  Component: ComponentType | any,
-  mountPoint: ShadowRoot | HTMLElement,
-  props: Record<string, any> = {},
-) {
-  const app = mount(Component, {
-    target: mountPoint,
-    props: {
-      standalone: true,
-      ...props,
-    },
-  })
-
-  return app
-}
 
 function InjectCustomIcons() {
-  console.info('[BetterSEQTA+] Injecting Icons')
+  console.info("[BetterSEQTA+] Injecting Icons");
 
-  const style = document.createElement('style')
+  const style = document.createElement("style");
-  style.setAttribute('type', 'text/css')
+  style.setAttribute("type", "text/css");
   style.innerHTML = `
     @font-face {
       font-family: 'IconFamily';
       src: url('${browser.runtime.getURL(IconFamily)}') format('woff');
       font-weight: normal;
       font-style: normal;
-    }`
+    }`;
-  document.head.appendChild(style)
+  document.head.appendChild(style);
 }
 
-const mountPoint = document.getElementById('app')
+const mountPoint = document.getElementById("app");
 if (!mountPoint) {
-  console.error('Mount point #app not found')
+  console.error("Mount point #app not found");
-  throw new Error('Mount point #app not found')
+  throw new Error("Mount point #app not found");
 }
 
-InjectCustomIcons()
+InjectCustomIcons();
-renderSvelte(Settings, mountPoint)
+
+(async () => {
+  await initializeSettingsState();
+  renderSvelte(Settings, mountPoint, { standalone: true });
+})();

src/interface/main.d.ts

@@ -1,4 +1,4 @@
-import './index.css';
+import "./index.css";
 
 declare module "*.png";
 declare module "*.svg";

src/interface/main.ts

@@ -1,9 +1,9 @@
-import styles from "./index.css?inline"
+import { mount } from "svelte";
-import { mount } from "svelte"
+import type { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte"
+import style from "./index.css?inline";
 
 export default function renderSvelte(
-  Component: ComponentType | any,
+  Component: SvelteComponent | any,
   mountPoint: ShadowRoot | HTMLElement,
   props: Record<string, any> = {},
 ) {
@@ -13,12 +13,13 @@ export default function renderSvelte(
       standalone: false,
       ...props,
     },
-  })
+  });
 
-  const style = document.createElement("style")
+  if (mountPoint instanceof ShadowRoot) {
-  style.setAttribute("type", "text/css")
+    const styleElement = document.createElement("style");
-  style.innerHTML = styles
+    styleElement.textContent = style;
-  mountPoint.appendChild(style)
+    mountPoint.appendChild(styleElement);
-
+  }
-  return app
+
+  return app;
 }

src/interface/pages/settings.svelte

@@ -7,9 +7,12 @@
 
   import { standalone as StandaloneStore } from '../utils/standalone.svelte';
   import { onMount } from 'svelte'
-  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+
+  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
+  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
+  import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew"
 
-  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
   import ColourPicker from '../components/ColourPicker.svelte'
   import { settingsPopup } from '../hooks/SettingsPopup'
 
@@ -49,20 +52,19 @@
   let { standalone } = $props<{ standalone?: boolean }>();
   let showColourPicker = $state<boolean>(false);
 
-  onMount(() => {
+  onMount(async () => {
     settingsPopup.addListener(() => {
       showColourPicker = false;
     });
     
     if (!standalone) return;
-    initializeSettingsState();
     StandaloneStore.setStandalone(true);
   });
 </script>
 
 <div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
-  <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
+  <div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
-    <div class="grid border-b border-b-zinc-200/40 place-items-center">
+    <div class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40">
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
@@ -71,8 +73,8 @@
       <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
       
       {#if !standalone}
-        <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
+        <button onclick={openChangelog} class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
-        <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
+        <button onclick={openAbout} class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
       {/if}
     </div>
 

src/interface/pages/settings/general.svelte

@@ -3,19 +3,98 @@
   import Button from "../../components/Button.svelte"
   import Slider from "../../components/Slider.svelte"
   import Select from "@/interface/components/Select.svelte"
+  import HotkeyInput from "@/interface/components/HotkeyInput.svelte"
 
   import browser from "webextension-polyfill"
 
   import type { SettingsList } from "@/interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
-  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
+
+  import { getAllPluginSettings } from "@/plugins"
+  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
+
+  // Union type representing all possible settings
+  type SettingType =
+    (Omit<BooleanSetting, 'type'> & { type: 'boolean', id: string }) |
+    (Omit<StringSetting, 'type'> & { type: 'string', id: string }) |
+    (Omit<NumberSetting, 'type'> & { type: 'number', id: string }) |
+    (Omit<SelectSetting<string>, 'type'> & {
+      type: 'select',
+      id: string,
+      options: string[]
+    }) |
+    (Omit<ButtonSetting, 'type'> & {
+      type: 'button',
+      id: string
+    }) |
+    (Omit<HotkeySetting, 'type'> & {
+      type: 'hotkey',
+      id: string
+    }) |
+    (Omit<ComponentSetting, 'type'> & {
+      type: 'component',
+      id: string,
+      component: any
+    });
+
+  interface Plugin {
+    pluginId: string;
+    name: string;
+    description: string;
+    beta?: boolean;
+    settings: Record<string, SettingType>;
+  }
+
+  const pluginSettings = getAllPluginSettings() as Plugin[];
+  const pluginSettingsValues = $state<Record<string, Record<string, any>>>({});
+  
+  async function loadPluginSettings() {
+    for (const plugin of pluginSettings) {
+      if (Object.keys(plugin.settings).length === 0) continue;
+      
+      const storageKey = `plugin.${plugin.pluginId}.settings`;
+      const stored = await browser.storage.local.get(storageKey);
+      
+      pluginSettingsValues[plugin.pluginId] = stored[storageKey] || {};
+      
+      for (const [key, setting] of Object.entries(plugin.settings)) {
+        if (
+          pluginSettingsValues[plugin.pluginId][key] === undefined &&
+          setting.type !== 'button' &&
+          setting.type !== 'component'
+        ) {
+          pluginSettingsValues[plugin.pluginId][key] = setting.default;
+        }
+      }
+    }
+  }
+  
+  async function updatePluginSetting(pluginId: string, key: string, value: any) {
+    const storageKey = `plugin.${pluginId}.settings`;
+    
+    if (!pluginSettingsValues[pluginId]) {
+      pluginSettingsValues[pluginId] = {};
+    }
+    pluginSettingsValues[pluginId][key] = value;
+    
+    const stored = await browser.storage.local.get(storageKey);
+    const currentSettings = (stored[storageKey] || {}) as Record<string, any>;
+    
+    currentSettings[key] = value;
+    
+    await browser.storage.local.set({ [storageKey]: currentSettings });
+  }
+
+  $effect(() => {
+    loadPluginSettings();
+  })
 
   const { showColourPicker } = $props<{ showColourPicker: () => void }>();
 </script>
 
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
-<div class="flex items-center justify-between px-4 py-3">
+<div class="flex justify-between items-center px-4 py-3">
   <div class="pr-4">
     <h2 class="text-sm font-bold">{title}</h2>
     <p class="text-xs">{description}</p>
@@ -38,26 +117,6 @@
         onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
       }
     },
-    {
-      title: "Animated Background",
-      description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
-      id: 2,
-      Component: Switch,
-      props: {
-        state: $settingsState.animatedbk,
-        onChange: (isOn: boolean) => settingsState.animatedbk = isOn
-      }
-    },
-    {
-      title: "Animated Background Speed",
-      description: "Controls the speed of the animated background.",
-      id: 3,
-      Component: Slider,
-      props: {
-        state: $settingsState.bksliderinput,
-        onChange: (value: number) => settingsState.bksliderinput = `${value}`
-      }
-    },
     {
       title: "Custom Theme Colour",
       description: "Customise the overall theme colour of SEQTA Learn.",
@@ -87,36 +146,6 @@
         onChange: (isOn: boolean) => settingsState.animations = isOn
       }
     },
-    {
-      title: "Notification Collector",
-      description: "Uncaps the 9+ limit for notifications, showing the real number.",
-      id: 7,
-      Component: Switch,
-      props: {
-        state: $settingsState.notificationcollector,
-        onChange: (isOn: boolean) => settingsState.notificationcollector = isOn
-      }
-    },
-    {
-      title: "Assessment Average",
-      description: "Shows your subject average for assessments.",
-      id: 8,
-      Component: Switch,
-      props: {
-        state: $settingsState.assessmentsAverage,
-        onChange: (isOn: boolean) => settingsState.assessmentsAverage = isOn
-      }
-    },
-    {
-      title: "Lesson Alerts",
-      description: "Sends a native browser notification ~5 minutes prior to lessons.",
-      id: 8,
-      Component: Switch,
-      props: {
-        state: $settingsState.lessonalert,
-        onChange: (isOn: boolean) => settingsState.lessonalert = isOn
-      }
-    },
     {
       title: "12 Hour Time",
       description: "Prefer 12 hour time format for SEQTA",
@@ -147,21 +176,137 @@
       }
     },
     {
-      title: "BetterSEQTA+",
+      title: "News Feed Source",
-      description: "Enables BetterSEQTA+ features",
+      description: "Choose sources of your news feed.",
       id: 11,
-      Component: Switch,
+      Component: Select,
       props: {
-        state: $settingsState.onoff,
+        state: $settingsState.newsSource,
-        onChange: (isOn: boolean) => settingsState.onoff = isOn
+        onChange: (value: string) => settingsState.newsSource = value,
+        options: [
+          { value: "australia", label: "Australia" },
+          { value: "usa", label: "USA" },
+          { value: "taiwan", label: "Taiwan" },
+          { value: "hong_kong", label: "Hong Kong" },
+          { value: "panama", label: "Panama" },
+          { value: "canada", label: "Canada" },
+          { value: "singapore", label: "Singapore" },
+          { value: "uk", label: "UK" },
+          { value: "japan", label: "Japan" },
+          { value: "netherlands", label: "Netherlands" }
+        ]
       }
     }
   ] as option}
     {@render Setting(option)}
   {/each}
   
+  {#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' : ''}">
+      <!-- Always show enable toggle if disableToggle is true -->
+        {#if (plugin as any).disableToggle}
+          <div class="flex justify-between items-center px-4 py-3">
+            <div class="pr-4">
+              <h2 class="flex gap-2 items-center text-sm font-bold">
+                Enable {plugin.name}
+                {#if plugin.beta}
+                  <span class="px-2 py-0.5 text-xs font-medium text-orange-800 bg-orange-100 rounded-full border border-orange-300/30 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-900/30">
+                    Beta
+                  </span>
+                {/if}
+              </h2>
+              <p class="text-xs">{plugin.description}</p>
+            </div>
+            <div>
+              <Switch
+                state={pluginSettingsValues[plugin.pluginId]?.enabled ?? true}
+                onChange={(value) => updatePluginSetting(plugin.pluginId, 'enabled', value)}
+              />
+            </div>
+          </div>
+        {/if}
+  
+        {#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
+          {#each Object.entries(plugin.settings) as [key, setting]}
+            <!-- Skip the 'enabled' setting if it's part of the settings object -->
+            {#if key !== 'enabled'}
+              <div class="flex justify-between items-center px-4 py-3">
+                <div class="pr-4">
+                  <h2 class="text-sm font-bold">{setting.title || key}</h2>
+                  <p class="text-xs">{setting.description || ''}</p>
+                </div>
+                <div>
+                  {#if setting.type === 'boolean'}
+                    <Switch
+                      state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                    />
+                  {:else if setting.type === 'number'}
+                    <Slider
+                      state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                      min={setting.min}
+                      max={setting.max}
+                      step={setting.step}
+                    />
+                  {:else if setting.type === 'string'}
+                    <input
+                      type="text"
+                      class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD] dark:text-white border-none"
+                      value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                      oninput={(e) => updatePluginSetting(plugin.pluginId, key, e.currentTarget.value)}
+                    />                
+                  {:else if setting.type === 'select'}
+                    <Select
+                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                    options={(setting.options as string[]).map(opt => ({
+                      value: opt,
+                      label: opt.charAt(0).toUpperCase() + opt.slice(1)
+                      }))}
+                    />
+                  {:else if setting.type === 'button'}
+                    <Button
+                      onClick={() => setting.trigger?.()}
+                      text={setting.title}
+                    />
+                  {:else if setting.type === 'hotkey'}
+                    <HotkeyInput
+                      value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                    />
+                  {:else if setting.type === 'component'}
+                    {#if setting.component}
+                      {@const Component = setting.component}
+                      <Component />
+                    {/if}
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      </div>
+  </div>
+  {/each}
+
+  <div class="p-1 border-none"></div>
+
+  {@render Setting({
+    title: "BetterSEQTA+",
+    description: "Enables BetterSEQTA+ features",
+    id: 12,
+    Component: Switch,
+    props: {
+      state: $settingsState.onoff,
+      onChange: (isOn: boolean) => settingsState.onoff = isOn
+    }
+  })}
+
   {#if $settingsState.devMode}
-    <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
+    <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">
         <div class="pr-4">
           <h2 class="text-sm font-bold">Developer Mode</h2>
           <p class="text-xs">Enables developer mode, allowing you to test new features and changes.</p>
@@ -170,17 +315,30 @@
           <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
         </div>
       </div>
-    <div class="flex items-center justify-between px-4 py-3">
+      <div class="flex justify-between items-center px-4 py-3">
         <div class="pr-4">
           <h2 class="text-sm font-bold">Sensitive Hider</h2>
           <p class="text-xs">Replace sensitive content with mock data</p>
         </div>
         <div>
-        <Button 
+          <Switch
-          onClick={() => hideSensitiveContent()}
+            state={$settingsState.hideSensitiveContent ?? false}
-          text="Hide"
+            onChange={(isOn: boolean) => settingsState.hideSensitiveContent = isOn}
           />
         </div>
       </div>
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Mock Notices</h2>
+          <p class="text-xs">Use fake notice data on homepage instead of real data</p>
+        </div>
+        <div>
+          <Switch 
+            state={$settingsState.mockNotices ?? false} 
+            onChange={(isOn: boolean) => settingsState.mockNotices = isOn} 
+          />
+        </div>
+      </div>
+    </div>
   {/if}
 </div>

src/interface/pages/settings/shortcuts.svelte

@@ -3,8 +3,10 @@
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import Switch from "@/interface/components/Switch.svelte"
   import { onMount } from 'svelte';
+  import Shortcuts from "@/seqta/content/links.json"
 
   let isLoaded = $state(false);
+  let fileInput = $state<HTMLInputElement | null>(null);
 
   onMount(async () => {
     // Wait for settingsState to be initialized
@@ -21,15 +23,38 @@
     });
   });
 
-  const switchChange = (index: number) => {    
+  const switchChange = (shortcut: any) => {    
-    const updatedShortcuts = [...settingsState.shortcuts];
+    const value = $settingsState.shortcuts.find(s => s.name === shortcut);
-    updatedShortcuts[index].enabled = !updatedShortcuts[index].enabled;
+    if (value) {
-    settingsState.shortcuts = updatedShortcuts;
+      value.enabled = !value.enabled;
+      settingsState.shortcuts = settingsState.shortcuts;
+    } else {
+      settingsState.shortcuts = [...settingsState.shortcuts, { name: shortcut, enabled: true }];
+    }
   }
 
   let isFormVisible = $state(false);
   let newTitle = $state("");
   let newURL = $state("");
+  let newIcon = $state<string | null>(null);
+
+  function handleIconChange(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (file && file.type === "image/svg+xml") {
+      const reader = new FileReader();
+      reader.onload = () => {
+        newIcon = reader.result as string;
+      };
+      reader.readAsText(file);
+    }
+  }
+
+  const clearIcon = () => {
+    newIcon = null;
+    if (fileInput) {
+      fileInput.value = ""; // Clear the file input so the same file can be re-selected
+    }
+  };
 
   const toggleForm = () => {
     isFormVisible = !isFormVisible;
@@ -49,11 +74,13 @@
 
   const addNewCustomShortcut = () => {
     if (isValidTitle(newTitle) && isValidURL(newURL)) {
-      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
+      const icon = newIcon || newTitle[0];
+      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon };
       settingsState.customshortcuts = [...settingsState.customshortcuts, newShortcut];
 
       newTitle = "";
       newURL = "";
+      newIcon = null;
       isFormVisible = false;
     } else {
       alert("Please enter a valid title and URL.");
@@ -65,15 +92,6 @@
   };
 </script>
 
-{#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
-<div class="flex items-center justify-between px-4 py-3">
-  <div class="pr-4">
-    <h2 class="text-sm">{Shortcut.name}</h2>
-  </div>
-  <Switch state={Shortcut.enabled} onChange={() => switchChange(parseInt(index))} />
-</div>
-{/snippet}
-
 <div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
   {#if isLoaded}
     <div>
@@ -95,7 +113,7 @@
               class="w-full"
             >
               <input
-                class="w-full p-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                class="p-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
                 type="text"
                 placeholder="Shortcut Name"
                 bind:value={newTitle}
@@ -105,14 +123,56 @@
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.05, duration: 0.2 }}
-              class="w-full"
+              class="flex gap-2 w-full"
             >
                 <input
-                class="w-full p-2 my-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                  class="p-2 my-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
                   type="text"
                   placeholder="URL eg. https://google.com"
                   bind:value={newURL}
                 />
+                <input
+                  bind:this={fileInput}
+                  class="p-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                  type="file"
+                  accept=".svg"
+                  onchange={handleIconChange}
+                  hidden
+                />
+                <button
+                  type="button"
+                  class="flex justify-between items-center p-2 my-2 text-left rounded-lg border border-dashed transition text-nowrap text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-700/50 hover:bg-zinc-200/50 dark:hover:bg-zinc-700/30 focus:bg-zinc-200/50 dark:focus:bg-zinc-600/50 border-zinc-300 dark:border-zinc-600"
+                  onclick={() => fileInput?.click()}
+                >
+                  {#if newIcon}
+                    <div class="flex overflow-hidden items-center">
+                      <div class="flex-shrink-0 mr-2 w-6 h-6">
+                        <img src={`data:image/svg+xml;base64,${btoa(newIcon)}`} alt="Selected Icon" class="object-contain w-full h-full" />
+                      </div>
+                      <span class="truncate">Selected Icon</span>
+                    </div>
+                    <span
+                      class="p-1 ml-2 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600"
+                      aria-label="Clear icon"
+                      role="button"
+                      tabindex="0"
+                      onclick={(event) => { event.stopPropagation(); clearIcon(); }}
+                      onkeydown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          clearIcon();
+                        }
+                      }}
+                    >
+                      <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="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </span>
+                  {:else}
+                    <span class="font-IconFamily">{ '\ued47' }</span>
+                    <span class="ml-2">SVG icon <span class="text-xs italic text-zinc-400 dark:text-zinc-500">(Optional)</span></span>
+                  {/if}
+                </button>
             </MotionDiv>
           </div>
         {/if}
@@ -136,15 +196,21 @@
       </MotionDiv>
     </div>
 
-    {#each Object.entries($settingsState.shortcuts) as shortcut}
+    {#each Object.entries(Shortcuts) as shortcut}
-      {@render Shortcuts(shortcut)}
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <!-- Use DisplayName if it exists, otherwise use the key (shortcut[0]) as a fallback -->
+          <h2 class="text-sm">{shortcut[1].DisplayName || shortcut[0]}</h2>
+        </div>
+        <Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
+      </div>
     {/each}
 
     <!-- Custom Shortcuts Section -->
     {#each $settingsState.customshortcuts as shortcut, index}
-      <div class="flex items-center justify-between px-4 py-3">
+      <div class="flex justify-between items-center px-4 py-3">
         {shortcut.name}
-        <button onclick={() => deleteCustomShortcut(index)}>
+        <button aria-label="Delete Shortcut" onclick={() => deleteCustomShortcut(index)}>
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>

src/interface/pages/store.svelte

@@ -9,16 +9,15 @@
   import type { Theme } from '../types/Theme'
   import browser from 'webextension-polyfill'
   import ThemeModal from '../components/store/ThemeModal.svelte'
-  import { StoreDownloadTheme } from '@/seqta/ui/themes/downloadTheme'
-  import { setTheme } from '@/seqta/ui/themes/setTheme'
   import Header from '../components/store/Header.svelte'
-  import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
-  import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
   import { themeUpdates } from '../hooks/ThemeUpdates'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
 
   import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
   import Backgrounds from '../components/store/Backgrounds.svelte'
 
+  const themeManager = ThemeManager.getInstance();
+
   // State variables
   let searchTerm = $state('');
   let themes = $state<Theme[]>([]);
@@ -33,8 +32,8 @@
   let selectedBackground = $state<string | null>(null);
 
   const fetchCurrentThemes = async () => {
-    const themes = await getAvailableThemes();
+    const themes = await themeManager.getAvailableThemes();
-    currentThemes = themes.themes.filter(theme => theme !== null).map(theme => theme.id);
+    currentThemes = themes.filter(theme => theme !== null).map(theme => theme.id);
   };
 
   const setDisplayTheme = (theme: Theme | null) => {
@@ -123,8 +122,8 @@
               {setDisplayTheme}
               onInstall={async () => {
                 if (displayTheme) {
-                  await StoreDownloadTheme({themeContent: displayTheme})
+                  await themeManager.downloadTheme(displayTheme);
-                  setTheme(displayTheme.id);
+                  await themeManager.setTheme(displayTheme.id);
                   themeUpdates.triggerUpdate();
                   await fetchCurrentThemes();
                 }
@@ -132,7 +131,7 @@
               onRemove={async () => {
                 if (displayTheme?.id) {
                   console.debug('deleting theme', displayTheme.id);
-                  deleteTheme(displayTheme.id)
+                  await themeManager.deleteTheme(displayTheme.id);
                   themeUpdates.triggerUpdate();
                   await fetchCurrentThemes();
                 }

src/interface/pages/themeCreator.svelte

@@ -7,7 +7,6 @@
   import { type LoadedCustomTheme } from '@/types/CustomThemes'
 
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
-  import { getTheme } from '@/seqta/ui/themes/getTheme'
 
   import Divider from '@/interface/components/themeCreator/divider.svelte'
   import Switch from '@/interface/components/Switch.svelte'
@@ -22,13 +21,13 @@
     handleImageVariableChange,
     handleCoverImageUpload
   } from '../utils/themeImageHandlers';
-  import { ClearThemePreview, UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview'
+  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
-  import { saveTheme } from '@/seqta/ui/themes/saveTheme'
-  import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
   import { themeUpdates } from '../hooks/ThemeUpdates'
-  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
 
   const { themeID } = $props<{ themeID: string }>()
+  const themeManager = ThemeManager.getInstance();
+
   let theme = $state<LoadedCustomTheme>({
     id: uuidv4(),
     name: '',
@@ -45,8 +44,19 @@
   })
   let closedAccordions = $state<string[]>([])
   let themeLoaded = $state(false);
+  let codeEditorFullscreen = $state(false);
+  
+  function toggleCodeEditorFullscreen(e: MouseEvent) {
+    e.preventDefault();
+    codeEditorFullscreen = !codeEditorFullscreen;
+  }
+
+  function toggleAccordion(title: string, e: MouseEvent | KeyboardEvent) {
+    // if the target is the fullscreen button return
+    if (e.target instanceof HTMLButtonElement && e.target.classList.contains('fullscreen-toggle')) {
+      return;
+    }
 
-  function toggleAccordion(title: string) {
     if (closedAccordions.includes(title)) {
       closedAccordions = closedAccordions.filter(t => t !== title);
     } else {
@@ -55,10 +65,10 @@
   }
 
   onMount(async () => {
-    disableTheme();
+    await themeManager.disableTheme();
 
     if (themeID) {
-      const tempTheme = await getTheme(themeID)
+      const tempTheme = await themeManager.getTheme(themeID)
 
       if (!tempTheme) return
 
@@ -66,16 +76,12 @@
       const loadedTheme = {
         ...tempTheme,
         CustomImages: tempTheme.CustomImages.map(image => ({
-          ...image,
+          ...image
-          url: image.blob ? URL.createObjectURL(image.blob) : null
+        }))
-        })),
-        coverImageUrl: tempTheme.coverImage ? URL.createObjectURL(tempTheme.coverImage) : undefined
       }
 
-      if (tempTheme) {
       theme = loadedTheme
       themeLoaded = true
-      }
     } else {
       themeLoaded = true
     }
@@ -99,7 +105,7 @@
     theme = await handleCoverImageUpload(event, theme);
   }
 
-  function submitTheme() {
+  async function submitTheme() {
     const themeClone = JSON.parse(JSON.stringify(theme));
 
     // re-insert blobs into themeClone
@@ -109,14 +115,17 @@
     }))
     themeClone.coverImage = theme.coverImage
 
-    ClearThemePreview();
+    themeManager.clearPreview();
-    saveTheme(themeClone);
+    await themeManager.saveTheme(themeClone);
+    await themeManager.setTheme(themeClone.id);
     themeUpdates.triggerUpdate();
     CloseThemeCreator();
   }
 
   $effect(() => {
-    UpdateThemePreview(theme);
+    if (themeLoaded) {
+      void themeManager.updatePreviewDebounced(theme);
+    }
   });
 
   type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload' | 'conditional' | 'lightDarkToggle';
@@ -156,8 +165,8 @@
     <div class="flex justify-between {item.direction === 'vertical' ? 'flex-col items-start' : 'items-center'} py-3">
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
-        onclick={() => { item.direction === 'vertical' && toggleAccordion(item.title) }}
+        onclick={(e) => { item.direction === 'vertical' && toggleAccordion(item.title, e) }}
-        onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title) }}
+        onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title, e) }}
         class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">
 
         <div>
@@ -166,7 +175,14 @@
         </div>
 
         {#if item.direction === 'vertical'}
-          <div class="flex items-center justify-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
+          <div class="flex justify-center items-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
+            {#if item.type === 'codeEditor'}
+              <!-- Fullscreen toggle button -->
+              <button onclick={toggleCodeEditorFullscreen} class="px-2 mr-2 text-lg font-IconFamily fullscreen-toggle">
+                {'\uebdb'}
+              </button>
+            {/if}
+            
             <span class='font-IconFamily transition-transform duration-300 {closedAccordions.includes(item.title) ? 'rotate-180' : ''}'>{'\ue9e6'}</span>
           </div>
         {/if}
@@ -185,21 +201,24 @@
               <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
             {/key}
           {:else if item.type === 'codeEditor'}
+            {#if !codeEditorFullscreen}
               {#key themeLoaded}
-              <CodeEditor {...(item.props as CodeEditorProps)} />
+                <!-- Only render inline if not fullscreen -->
+                <CodeEditor className="h-[400px]" {...(item.props as CodeEditorProps)} />
               {/key}
+            {/if}
           {:else if item.type === 'imageUpload'}
             {#each theme.CustomImages as image (image.id)}
-              <div class="flex items-center h-16 gap-2 px-2 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
+              <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
                 <div class="h-full">
-                  <img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
+                  <img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded" />
                 </div>
                 <input
                   type="text"
                   bind:value={image.variableName}
                   oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
                   placeholder="CSS Variable Name"
-                  class="flex-grow flex-[3] w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
+                  class="p-2 w-full rounded-lg border-0 transition grow flex-3 dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
                 />
                 <button onclick={() => onRemoveImage(image.id)} class="p-2 transition dark:text-white">
                   <span class='text-xl font-IconFamily'>{'\ued8c'}</span>
@@ -207,14 +226,14 @@
               </div>
             {/each}
       
-            <div class="relative flex justify-center w-full h-8 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-200 dark:bg-zinc-700">
+            <div class="flex overflow-hidden relative gap-1 justify-center place-items-center w-full h-8 rounded-lg transition bg-zinc-200 dark:bg-zinc-700">
               <span class='font-IconFamily'>{'\uec60'}</span>
               <span class='dark:text-white'>Add image</span>
               <input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
             </div>
           {:else if item.type === 'lightDarkToggle'}
             <button
-              class="relative px-4 py-1 overflow-hidden text-xl font-medium transition rounded-lg bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
+              class="overflow-hidden relative px-4 py-1 text-xl font-medium rounded-lg transition bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
               onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
             >
               {#key (item.props as LightDarkToggleProps).state}
@@ -236,10 +255,23 @@
 {/snippet}
 
 <div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
-  <div class='flex flex-col w-full min-h-screen p-2 bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
+  {#if codeEditorFullscreen}
+    <div class="absolute inset-0 bg-white z-[10000] dark:bg-zinc-900 dark:text-white">
+      <div class="sticky top-0 px-2 h-screen">
+        <div class="flex justify-between items-center my-4">
+          <h2 class="text-xl font-bold">Custom CSS</h2>
+          <button onclick={toggleCodeEditorFullscreen} class="pr-14 text-xl font-IconFamily">{'\uec06'}</button>
+        </div>
+        <CodeEditor className="editorHeight" value={theme.CustomCSS} onChange={(value: string) => { theme = { ...theme, CustomCSS: value } }} />
+      </div>
+    </div>
+  {/if}
+  <div class='flex relative flex-col p-2 w-full min-h-screen bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
+
+
     <h1 class='text-xl font-semibold'>Theme Creator</h1>
     <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
-      <span class='no-underline font-IconFamily pr-0.5'>{'\ueb44'}</span>
+      <span class='pr-0.5 no-underline font-IconFamily'>{'\ueb44'}</span>
       <span class='underline'>
         Need help? Check out the docs!
       </span>
@@ -254,7 +286,7 @@
         type='text'
         placeholder='What is your theme called?'
         bind:value={theme.name}
-        class='w-full p-2 mb-4 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600' />
+        class='p-2 mb-4 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600' />
     </div>
 
     <div>
@@ -263,23 +295,23 @@
         id='themeDescription'
         placeholder="Don't worry, this one's optional!"
         bind:value={theme.description}
-        class='w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
+        class='p-2 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
     </div>
 
     <Divider />
 
-    <div class="relative flex justify-center w-full gap-1 overflow-hidden transition rounded-lg aspect-theme group place-items-center bg-zinc-200 dark:bg-zinc-700">
+    <div class="flex overflow-hidden relative gap-1 justify-center place-items-center w-full rounded-lg transition aspect-theme group bg-zinc-200 dark:bg-zinc-700">
       <div class={`transition pointer-events-none z-30 font-IconFamily ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>
         {'\uec60'}
       </div>
       <span class={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
       <input type="file" accept='image/*' onchange={onCoverImageUpload} class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer" />
       {#if !theme.hideThemeName && theme.coverImage}
-        <div class="absolute z-30 transition-opacity opacity-100 pointer-events-none group-hover:opacity-0">{theme.name}</div>
+        <div class="absolute z-30 opacity-100 transition-opacity pointer-events-none group-hover:opacity-0">{theme.name}</div>
       {/if}
       {#if theme.coverImage}
-        <div class="absolute z-20 w-full h-full transition-opacity opacity-0 pointer-events-none group-hover:opacity-100 bg-black/20"></div>
+        <div class="absolute z-20 w-full h-full opacity-0 transition-opacity pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-        <img src={theme.coverImageUrl} alt='Cover' class="absolute z-0 object-cover w-full h-full rounded" />
+        <img src="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
       {/if}
     </div>
 

src/interface/types/SettingsProps.ts

@@ -2,6 +2,6 @@ export interface SettingsList {
   title: string;
   id: number;
   description: string;
-  Component: any; /* TODO: Give this a type */
+  Component: any /* TODO: Give this a type */;
   props?: any;
 }

src/interface/utils/standalone.svelte.ts

@@ -16,7 +16,7 @@ export class Standalone {
 
   public setStandalone(value: boolean) {
     this._standalone = value;
-		this.subscribers.forEach(subscriber => subscriber(value));
+    this.subscribers.forEach((subscriber) => subscriber(value));
   }
 
   public get standalone() {

src/interface/utils/themeImageHandlers.ts

@@ -1,23 +1,49 @@
-import type { LoadedCustomTheme } from '@/types/CustomThemes';
+import type { LoadedCustomTheme } from "@/types/CustomThemes";
 
+/**
+ * Generates a random 9-character alphanumeric string to be used as a unique ID for images.
+ * This helps in identifying and managing custom images within a theme.
+ *
+ * @returns {string} A randomly generated unique ID string.
+ */
 export function generateImageId(): string {
   return Math.random().toString(36).substr(2, 9);
 }
 
-export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> | LoadedCustomTheme {
+/**
+ * Handles the upload of a new custom image from a file input event.
+ * If a file is selected, it reads the file using FileReader, converts it to a Blob,
+ * generates a unique ID and a default variable name for it, and then adds this new image
+ * to the `CustomImages` array within the provided `theme` object.
+ *
+ * @param {Event} event The file input change event, typically from an `<input type="file">` element.
+ * @param {LoadedCustomTheme} theme The current theme object to which the new image will be added.
+ * @returns {Promise<LoadedCustomTheme> | LoadedCustomTheme} A Promise that resolves with the updated theme object
+ *                                                          containing the new image if a file was processed.
+ *                                                          Returns the original theme object synchronously if no file was selected.
+ */
+export function handleImageUpload(
+  event: Event,
+  theme: LoadedCustomTheme,
+): Promise<LoadedCustomTheme> | LoadedCustomTheme {
   const input = event.target as HTMLInputElement;
   const file = input.files?.[0];
-  input.value = '';
+  input.value = "";
   if (file) {
     return new Promise((resolve) => {
       const reader = new FileReader();
       reader.onload = async () => {
-        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
+        const imageBlob = await fetch(reader.result as string).then((res) =>
+          res.blob(),
+        );
         const imageId = generateImageId();
         const variableName = `custom-image-${theme.CustomImages.length}`;
         resolve({
           ...theme,
-          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: URL.createObjectURL(imageBlob) }],
+          CustomImages: [
+            ...theme.CustomImages,
+            { id: imageId, blob: imageBlob, variableName, url: null },
+          ],
         });
       };
       reader.readAsDataURL(file);
@@ -26,32 +52,76 @@ export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promi
   return theme;
 }
 
-export function handleRemoveImage(imageId: string, theme: LoadedCustomTheme): LoadedCustomTheme {
+/**
+ * Removes a custom image from the theme based on its ID.
+ * It filters out the image with the specified `imageId` from the `CustomImages` array
+ * in the `theme` object.
+ *
+ * @param {string} imageId The unique ID of the custom image to be removed.
+ * @param {LoadedCustomTheme} theme The current theme object from which the image will be removed.
+ * @returns {LoadedCustomTheme} A new theme object with the specified image removed from its `CustomImages` array.
+ *                              This function is synchronous.
+ */
+export function handleRemoveImage(
+  imageId: string,
+  theme: LoadedCustomTheme,
+): LoadedCustomTheme {
   return {
     ...theme,
     CustomImages: theme.CustomImages.filter((image) => image.id !== imageId),
   } as LoadedCustomTheme;
 }
 
-export function handleImageVariableChange(imageId: string, variableName: string, theme: LoadedCustomTheme): LoadedCustomTheme {
+/**
+ * Updates the CSS variable name associated with a specific custom image in the theme.
+ * It finds the image by `imageId` in the `CustomImages` array of the `theme` object
+ * and updates its `variableName` property.
+ *
+ * @param {string} imageId The unique ID of the custom image whose variable name is to be updated.
+ * @param {string} variableName The new CSS variable name to assign to the image.
+ * @param {LoadedCustomTheme} theme The current theme object containing the image to be updated.
+ * @returns {LoadedCustomTheme} A new theme object with the updated image variable name.
+ *                              This function is synchronous.
+ */
+export function handleImageVariableChange(
+  imageId: string,
+  variableName: string,
+  theme: LoadedCustomTheme,
+): LoadedCustomTheme {
   return {
     ...theme,
     CustomImages: theme.CustomImages.map((image) =>
-      image.id === imageId ? { ...image, variableName } : image
+      image.id === imageId ? { ...image, variableName } : image,
     ),
   } as LoadedCustomTheme;
 }
 
-export function handleCoverImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> {
+/**
+ * Handles the upload of a cover image for the theme from a file input event.
+ * If a file is selected, it reads the file using FileReader, converts it to a Blob,
+ * and then updates the `coverImage` property of the provided `theme` object with this new blob.
+ *
+ * @param {Event} event The file input change event, typically from an `<input type="file">` element.
+ * @param {LoadedCustomTheme} theme The current theme object whose cover image will be updated.
+ * @returns {Promise<LoadedCustomTheme>} A Promise that resolves with the updated theme object
+ *                                       containing the new cover image if a file was processed.
+ *                                       Returns a Promise resolving with the original theme object if no file was selected.
+ */
+export function handleCoverImageUpload(
+  event: Event,
+  theme: LoadedCustomTheme,
+): Promise<LoadedCustomTheme> {
   const input = event.target as HTMLInputElement;
   const file = input.files?.[0];
-  input.value = '';
+  input.value = "";
   if (file) {
     return new Promise((resolve) => {
       const reader = new FileReader();
       reader.onload = async () => {
-        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
+        const imageBlob = await fetch(reader.result as string).then((res) =>
-        resolve({ ...theme, coverImage: imageBlob, coverImageUrl: URL.createObjectURL(imageBlob) });
+          res.blob(),
+        );
+        resolve({ ...theme, coverImage: imageBlob });
       };
       reader.readAsDataURL(file);
     });

src/manifests/brave.ts

@@ -1,4 +1,12 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from "../../lib/createManifest";
-import baseManifest from './manifest.json'
+import baseManifest from "./manifest.json";
+import pkg from "../../package.json";
 
-export const brave = createManifest(baseManifest, 'brave')
+export const brave = createManifest(
+  {
+    ...baseManifest,
+    version: pkg.version,
+    description: pkg.description,
+  },
+  "brave",
+);

src/manifests/chrome.ts

@@ -1,4 +1,12 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from "../../lib/createManifest";
-import baseManifest from './manifest.json'
+import baseManifest from "./manifest.json";
+import pkg from "../../package.json";
 
-export const chrome = createManifest(baseManifest, 'chrome')
+export const chrome = createManifest(
+  {
+    ...baseManifest,
+    version: pkg.version,
+    description: pkg.description,
+  },
+  "chrome",
+);

src/manifests/edge.ts

@@ -1,4 +1,12 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from "../../lib/createManifest";
-import baseManifest from './manifest.json'
+import baseManifest from "./manifest.json";
+import pkg from "../../package.json";
 
-export const edge = createManifest(baseManifest, 'edge')
+export const edge = createManifest(
+  {
+    ...baseManifest,
+    version: pkg.version,
+    description: pkg.description,
+  },
+  "edge",
+);

src/manifests/firefox.ts

@@ -1,20 +1,22 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from "../../lib/createManifest";
-import baseManifest from './manifest.json'
+import baseManifest from "./manifest.json";
-import pkg from '../../package.json'
+import pkg from "../../package.json";
 
 const updatedFirefoxManifest = {
   ...baseManifest,
+  version: pkg.version,
+  description: pkg.description,
   background: {
     scripts: [baseManifest.background.service_worker],
   },
   action: {
-    "default_popup": "interface/index.html#settings",
+    default_popup: "interface/index.html#settings",
   },
   browser_specific_settings: {
     gecko: {
       id: pkg.author.email,
     },
-  }
+  },
-}
+};
 
-export const firefox = createManifest(updatedFirefoxManifest, 'firefox')
+export const firefox = createManifest(updatedFirefoxManifest, "firefox");

src/manifests/manifest.json

@@ -1,8 +1,6 @@
 {
   "manifest_version": 3,
   "name": "BetterSEQTA+",
-  "version": "3.4.1",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
   "icons": {
     "32": "resources/icons/icon-32.png",
     "48": "resources/icons/icon-48.png",
@@ -34,15 +32,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["*://*/*"],
+      "resources": ["resources/icons/*", "resources/update-image.webp"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["resources/icons/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["seqta/utils/migration/migrate.html"],
       "matches": ["*://*/*"]
     }
   ]

src/manifests/opera.ts

@@ -1,4 +1,12 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from "../../lib/createManifest";
-import baseManifest from './manifest.json'
+import baseManifest from "./manifest.json";
+import pkg from "../../package.json";
 
-export const opera = createManifest(baseManifest, 'opera')
+export const opera = createManifest(
+  {
+    ...baseManifest,
+    version: pkg.version,
+    description: pkg.description,
+  },
+  "opera",
+);

src/manifests/safari.ts

@@ -1,16 +1,19 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from "../../lib/createManifest";
-import baseManifest from './manifest.json'
+import baseManifest from "./manifest.json";
+import pkg from "../../package.json";
 
 const updatedSafariManifest = {
   ...baseManifest,
+  version: pkg.version,
+  description: pkg.description,
   browser_specific_settings: {
     safari: {
-      strict_min_version: '15.4',
+      strict_min_version: "15.4",
-      strict_max_version: '*',
+      strict_max_version: "*",
     },
     // ^^^ https://developer.apple.com/documentation/safariservices/safari_web_extensions/optimizing_your_web_extension_for_safari#3743239
     //     https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#safari_properties
   },
-}
+};
 
-export const safari = createManifest(updatedSafariManifest, 'safari')
+export const safari = createManifest(updatedSafariManifest, "safari");

src/pageState.js

@@ -0,0 +1,226 @@
+class ReactFiber {
+  constructor(selector, options = {}) {
+    this.selector = selector;
+    this.debug = options.debug || false;
+    this.nodes = [...document.querySelectorAll(selector)]; // Support multiple elements
+    this.fibers = this.nodes.map((node) => this.getFiberNode(node));
+    this.components = this.fibers.map((fiber) => this.getOwnerComponent(fiber));
+
+    if (this.debug) {
+      console.log("Selected Nodes:", this.nodes);
+      console.log("🔍 Found Fibers:", this.fibers);
+      console.log("🛠 Found Components:", this.components);
+    }
+  }
+
+  static find(selector, options = {}) {
+    return new ReactFiber(selector, options);
+  }
+
+  getFiberNode(node) {
+    if (!node) return null;
+    const fiberKey = Object.getOwnPropertyNames(node).find(
+      (name) =>
+        name.startsWith("__reactFiber") ||
+        name.startsWith("__reactInternalInstance"),
+    );
+    return fiberKey ? node[fiberKey] : null;
+  }
+
+  getOwnerComponent(fiberNode) {
+    let current = fiberNode;
+    while (current) {
+      if (
+        current.stateNode &&
+        (current.stateNode.setState || current.stateNode.forceUpdate)
+      ) {
+        return current.stateNode;
+      }
+      current = current.return;
+    }
+    return null;
+  }
+
+  getState(key) {
+    if (!this.components.length) return null;
+    const state = this.components[0]?.state || null;
+
+    if (key === undefined) {
+      return state;
+    } else if (typeof key === "string") {
+      return state?.[key];
+    } else if (Array.isArray(key)) {
+      const filteredState = {};
+      for (const k of key) {
+        if (state && Object.hasOwn(state, k)) {
+          filteredState[k] = state[k];
+        }
+      }
+      return filteredState;
+    }
+    return null;
+  }
+
+  setState(update) {
+    this.components.forEach((component) => {
+      if (component?.setState) {
+        if (typeof update === "function") {
+          // Functional update
+          component.setState((prevState) => {
+            const newState = update(prevState);
+            if (this.debug)
+              console.log("✅ Updated State (Functional):", newState);
+            return newState;
+          });
+        } else {
+          // Object update (merge with existing state)
+          component.setState((prevState) => {
+            const newState = {
+              ...prevState,
+              ...update,
+            };
+            if (this.debug)
+              console.log("✅ Updated State (Object Merge):", newState);
+            return newState;
+          });
+        }
+      }
+    });
+    return this;
+  }
+
+  getProp(propName) {
+    if (!this.fibers.length) return null;
+
+    if (propName === undefined) {
+      return this.fibers[0]?.memoizedProps;
+    }
+
+    return this.fibers[0]?.memoizedProps?.[propName];
+  }
+
+  setProp(propName) {
+    this.fibers.forEach((fiber) => {
+      if (fiber?.memoizedProps) {
+        fiber.memoizedProps[propName] = value;
+      }
+    });
+    return this; // Enable chaining
+  }
+
+  forceUpdate() {
+    this.components.forEach((component) => {
+      if (component?.forceUpdate) {
+        component.forceUpdate();
+        if (this.debug) console.log("🔄 Forced React Re-render");
+      }
+    });
+    return this; // Enable chaining
+  }
+}
+
+function makeSerializable(obj) {
+  if (typeof obj !== "object" || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => makeSerializable(item));
+  }
+
+  const serializableObj = {};
+  for (const key in obj) {
+    if (Object.hasOwn(obj, key)) {
+      let value = obj[key];
+
+      if (typeof value === "function") {
+        value = "[Function]";
+      } else if (value instanceof HTMLElement) {
+        value = {
+          type: "HTMLElement",
+          id: value.id,
+          tagName: value.tagName,
+        }; // Replace DOM node with ID/tag info
+      } else if (typeof value === "symbol") {
+        value = value.toString();
+      } else if (typeof value === "object" && value !== null) {
+        value = makeSerializable(value);
+      }
+
+      serializableObj[key] = value;
+    }
+  }
+  return serializableObj;
+}
+
+window.addEventListener("message", (event) => {
+  if (event.data.type === "reactFiberRequest") {
+    const { selector, action, payload, debug, messageId } = event.data;
+    const fiberInstance = ReactFiber.find(selector, {
+      debug,
+    });
+
+    let response;
+    switch (action) {
+      case "getState":
+        response = fiberInstance.getState(payload.key);
+        break;
+      case "setState":
+        // Handle both function and object updates
+        if (payload.updateFn) {
+          const updateFn = new Function('return ' + payload.updateFn)();
+          fiberInstance.setState(updateFn);
+        } else {
+          fiberInstance.setState(payload.updateObject);
+        }
+        response = {};
+        break;
+
+      case "getProp":
+        response = fiberInstance.getProp(payload.propName);
+        break;
+      case "setProp":
+        fiberInstance.setProp(payload.propName, payload.value);
+        response = {};
+        break;
+      case "forceUpdate":
+        fiberInstance.forceUpdate();
+        response = {};
+        break;
+      default:
+        console.warn(`[pageState] Unknown action: ${action}`);
+        response = null;
+    }
+
+    if (response !== null && typeof response === "object") {
+      response = makeSerializable(response);
+    }
+
+    window.postMessage(
+      {
+        type: "reactFiberResponse",
+        response,
+        messageId,
+      },
+      "*",
+    );
+  } else if (event.data.type === "triggerKeyboardEvent") {
+    // Handle keyboard event triggering from content script
+    const { key, code, altKey, ctrlKey, metaKey, shiftKey, keyCode } = event.data;
+    
+    const keyboardEvent = new KeyboardEvent('keydown', {
+      key,
+      code,
+      keyCode: keyCode || 0,
+      which: keyCode || 0,
+      altKey: altKey || false,
+      ctrlKey: ctrlKey || false,
+      metaKey: metaKey || false,
+      shiftKey: shiftKey || false,
+      bubbles: true,
+      cancelable: true
+    });
+    
+    document.dispatchEvent(keyboardEvent);
+  }
+});

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

@@ -0,0 +1,85 @@
+import { BasePlugin } from "../../core/settings";
+import { type Plugin } from "@/plugins/core/types";
+import {
+  defineSettings,
+  numberSetting,
+  Setting,
+} from "@/plugins/core/settingsHelpers";
+import styles from "./styles.css?inline";
+
+const settings = defineSettings({
+  speed: numberSetting({
+    default: 1,
+    title: "Animation Speed",
+    description: "Controls how fast the background moves",
+    min: 0.1,
+    max: 2,
+    step: 0.05,
+  }),
+});
+
+class AnimatedBackgroundPluginClass extends BasePlugin<typeof settings> {
+  @Setting(settings.speed)
+  speed!: number;
+}
+
+const instance = new AnimatedBackgroundPluginClass();
+
+const animatedBackgroundPlugin: Plugin<typeof settings> = {
+  id: "animated-background",
+  name: "Animated Background",
+  description: "Adds an animated background to BetterSEQTA+",
+  version: "1.0.0",
+  disableToggle: true,
+  styles: styles,
+  settings: instance.settings,
+
+  run: async (api) => {
+    // Create the background elements
+    const container = document.getElementById("container");
+    const menu = document.getElementById("menu");
+
+    if (!container || !menu) {
+      return () => {};
+    }
+
+    const backgrounds = [
+      { classes: ["bg"] },
+      { classes: ["bg", "bg2"] },
+      { classes: ["bg", "bg3"] },
+    ];
+
+    backgrounds.forEach(({ classes }) => {
+      const bk = document.createElement("div");
+      classes.forEach((cls) => bk.classList.add(cls));
+      container.insertBefore(bk, menu);
+    });
+
+    // Set initial speed
+    updateAnimationSpeed(api.settings.speed);
+
+    // Listen for speed changes
+    const speedUnregister = api.settings.onChange(
+      "speed",
+      updateAnimationSpeed,
+    );
+
+    // Return cleanup function
+    return () => {
+      speedUnregister.unregister();
+      // Remove background elements
+      const backgrounds = document.getElementsByClassName("bg");
+      Array.from(backgrounds).forEach((element) => element.remove());
+    };
+  },
+};
+
+function updateAnimationSpeed(speed: number) {
+  const bgElements = document.getElementsByClassName("bg");
+  Array.from(bgElements).forEach((element, index) => {
+    const baseSpeed = index === 0 ? 3 : index === 1 ? 4 : 5;
+    (element as HTMLElement).style.animationDuration = `${baseSpeed / speed}s`;
+  });
+}
+
+export default animatedBackgroundPlugin;

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

@@ -0,0 +1,31 @@
+.bg {
+  animation: slide 3s ease-in-out infinite alternate;
+  background: var(--better-main);
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: fixed;
+  right: -50%;
+  top: 0;
+  z-index: 0 !important;
+  overflow: hidden;
+  scale: 1.5;
+}
+
+.bg2 {
+  animation-direction: alternate-reverse;
+  animation-duration: 4s;
+}
+
+.bg3 {
+  animation-duration: 5s;
+}
+
+@keyframes slide {
+  0% {
+    transform: translate(50%) rotate(-60deg);
+  }
+  100% {
+    transform: translateX(5%) rotate(-60deg);
+  }
+}

src/plugins/built-in/animatedBackground/utils/CreateBackground.ts

@@ -0,0 +1,24 @@
+export function CreateBackground() {
+  const bkCheck = document.getElementsByClassName("bg");
+  if (bkCheck.length !== 0) {
+    return;
+  }
+
+  // Creating and inserting 3 divs containing the background applied to the pages
+  const container = document.getElementById("container");
+  const menu = document.getElementById("menu");
+
+  if (!container || !menu) return;
+
+  const backgrounds = [
+    { classes: ["bg"] },
+    { classes: ["bg", "bg2"] },
+    { classes: ["bg", "bg3"] },
+  ];
+
+  backgrounds.forEach(({ classes }) => {
+    const bk = document.createElement("div");
+    classes.forEach((cls) => bk.classList.add(cls));
+    container.insertBefore(bk, menu);
+  });
+}

src/plugins/built-in/animatedBackground/utils/RemoveBackground.ts

@@ -0,0 +1,6 @@
+export function RemoveBackground() {
+  const backgrounds = document.getElementsByClassName("bg");
+
+  // Convert HTMLCollection to Array and remove each element
+  Array.from(backgrounds).forEach((element) => element.remove());
+}

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

@@ -0,0 +1,204 @@
+import { BasePlugin } from "@/plugins/core/settings";
+import {
+  booleanSetting,
+  defineSettings,
+  Setting,
+} from "@/plugins/core/settingsHelpers";
+import { type Plugin } from "@/plugins/core/types";
+import stringToHTML from "@/seqta/utils/stringToHTML";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+
+const settings = defineSettings({
+  lettergrade: booleanSetting({
+    default: false,
+    title: "Letter Grades",
+    description: "Display the average as a letter instead of a percentage",
+  }),
+});
+
+class AssessmentsAveragePluginClass extends BasePlugin<typeof settings> {
+  @Setting(settings.lettergrade)
+  lettergrade!: boolean;
+}
+
+const instance = new AssessmentsAveragePluginClass();
+
+const assessmentsAveragePlugin: Plugin<typeof settings> = {
+  id: "assessments-average",
+  name: "Assessment Averages",
+  description: "Adds an average grade to the Assessments page",
+  version: "1.0.0",
+  disableToggle: true,
+  settings: instance.settings,
+
+  run: async (api) => {
+    api.seqta.onMount(".assessmentsWrapper", async () => {
+      // Wait for any assessment item to load first
+      await waitForElm(
+        "#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
+        true,
+        10,
+        1000,
+      );
+
+      // Helper function to find actual class names by their base pattern
+      const getClassByPattern = (
+        element: Element | Document,
+        basePattern: string,
+      ): string => {
+        // Find all classes on the element
+        const classes = Array.from(element.querySelectorAll("*"))
+          .flatMap((el) => Array.from(el.classList))
+          .filter((className) => className.startsWith(basePattern));
+
+        return classes.length ? classes[0] : "";
+      };
+
+      // Find actual class names from the DOM
+      const sampleAssessmentItem = document.querySelector(
+        "[class*='AssessmentItem__AssessmentItem___']",
+      );
+      if (!sampleAssessmentItem) return;
+
+      // Extract all necessary class patterns from a sample assessment item
+      const assessmentItemClass =
+        Array.from(sampleAssessmentItem.classList).find((c) =>
+          c.startsWith("AssessmentItem__AssessmentItem___"),
+        ) || "";
+
+      const metaContainerClass = getClassByPattern(
+        sampleAssessmentItem,
+        "AssessmentItem__metaContainer___",
+      );
+      const metaClass = getClassByPattern(
+        sampleAssessmentItem,
+        "AssessmentItem__meta___",
+      );
+      const simpleResultClass = getClassByPattern(
+        sampleAssessmentItem,
+        "AssessmentItem__simpleResult___",
+      );
+      const titleClass = getClassByPattern(
+        sampleAssessmentItem,
+        "AssessmentItem__title___",
+      );
+
+      // Get Thermoscore classes
+      const thermoscoreElement = document.querySelector(
+        "[class*='Thermoscore__Thermoscore___']",
+      );
+      if (!thermoscoreElement) return;
+
+      const thermoscoreClass =
+        Array.from(thermoscoreElement.classList).find((c) =>
+          c.startsWith("Thermoscore__Thermoscore___"),
+        ) || "";
+      const fillClass = getClassByPattern(
+        thermoscoreElement,
+        "Thermoscore__fill___",
+      );
+      const textClass = getClassByPattern(
+        thermoscoreElement,
+        "Thermoscore__text___",
+      );
+
+      // Find assessment list
+      const assessmentsList = document.querySelector(
+        "#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
+      );
+      if (!assessmentsList) return;
+
+      const gradeElements = document.querySelectorAll(
+        "[class*='Thermoscore__text___']",
+      );
+      if (!gradeElements.length) return;
+
+      // Parse and average grades
+      const letterToNumber: Record<string, number> = {
+        "A+": 100,
+        A: 95,
+        "A-": 90,
+        "B+": 85,
+        B: 80,
+        "B-": 75,
+        "C+": 70,
+        C: 65,
+        "C-": 60,
+        "D+": 55,
+        D: 50,
+        "D-": 45,
+        "E+": 40,
+        E: 35,
+        "E-": 30,
+        F: 0,
+      };
+
+      function parseGrade(text: string): number {
+        const str = text.trim().toUpperCase();
+        if (str.includes("/")) {
+          const [raw, max] = str.split("/").map((n) => parseFloat(n));
+          return (raw / max) * 100;
+        }
+        if (str.includes("%")) {
+          return parseFloat(str.replace("%", "")) || 0;
+        }
+        return letterToNumber[str] ?? 0;
+      }
+
+      let total = 0;
+      let count = 0;
+      gradeElements.forEach((el) => {
+        const grade = parseGrade(el.textContent || "");
+        if (grade > 0) {
+          total += grade;
+          count++;
+        }
+      });
+
+      if (!count) return;
+
+      const avg = total / count;
+      const rounded = Math.ceil(avg / 5) * 5;
+      const numberToLetter = Object.entries(letterToNumber).reduce(
+        (acc, [k, v]) => {
+          acc[v] = k;
+          return acc;
+        },
+        {} as Record<number, string>,
+      );
+
+      const letterAvg = numberToLetter[rounded] ?? "N/A";
+      const display = api.settings.lettergrade
+        ? letterAvg
+        : `${avg.toFixed(2)}%`;
+
+      // Prevent duplicate
+      const existing = assessmentsList.querySelector(
+        `[class*='AssessmentItem__title___']`,
+      );
+      if (existing?.textContent === "Subject Average") return;
+
+      // Use the dynamic class names in the HTML template
+      const averageElement = stringToHTML(/* html */ `
+        <div class="${assessmentItemClass}">
+          <div class="${metaContainerClass}">
+            <div class="${metaClass}">
+              <div class="${simpleResultClass}">
+                <div class="${titleClass}">Subject Average</div>
+              </div>
+            </div>
+          </div>
+          <div class="${thermoscoreClass}">
+            <div class="${fillClass}" style="width: ${avg.toFixed(2)}%">
+              <div class="${textClass}" title="${display}">${display}</div>
+            </div>
+          </div>
+        </div>
+      `).firstChild;
+
+      assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
+    });
+  },
+};
+
+export default assessmentsAveragePlugin;

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

@@ -0,0 +1,384 @@
+<script lang="ts">
+  import { determineStatus, formatDate, getGradeValue } from "./utils";
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+  import confetti from "canvas-confetti";
+
+  export let data: any;
+
+  interface FilterOptions {
+    subject: string;
+    sortBy: "due" | "grade" | "subject" | "title";
+  }
+
+  function percentageToLetter(percentage: number): string {
+    const letterMap: Record<number, string> = {
+      100: "A+",
+      95: "A",
+      90: "A-",
+      85: "B+",
+      80: "B",
+      75: "B-",
+      70: "C+",
+      65: "C",
+      60: "C-",
+      55: "D+",
+      50: "D",
+      45: "D-",
+      40: "E+",
+      35: "E",
+      30: "E-",
+      0: "F",
+    };
+
+    const rounded = Math.ceil(percentage / 5) * 5;
+    return letterMap[rounded] || "F";
+  }
+
+  let currentFilters: FilterOptions = {
+    subject: "all",
+    sortBy: "due",
+  };
+
+  let filteredAssessments: any[] = [];
+  let statusGroups: Record<string, any[]> = {};
+
+  function updateAssessments() {
+    filteredAssessments = data.assessments.filter((a: any) => {
+      const subjectMatch =
+        currentFilters.subject === "all" || a.code === currentFilters.subject;
+      return subjectMatch;
+    });
+
+    filteredAssessments.sort((a: any, b: any) => {
+      switch (currentFilters.sortBy) {
+        case "due":
+          return new Date(a.due).getTime() - new Date(b.due).getTime();
+        case "grade":
+          const gradeA = getGradeValue(a);
+          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);
+        case "title":
+          return a.title.localeCompare(b.title);
+        default:
+          return 0;
+      }
+    });
+
+    statusGroups = {
+      UPCOMING: [],
+      DUE_SOON: [],
+      OVERDUE: [],
+      SUBMITTED: [],
+      MARKS_RELEASED: [],
+    };
+
+    filteredAssessments.forEach((assessment) => {
+      const status = determineStatus(assessment);
+      if (statusGroups[status]) {
+        statusGroups[status].push(assessment);
+      }
+    });
+  }
+
+  function getDueDateClass(assessment: any): string {
+    const status = determineStatus(assessment);
+    switch (status) {
+      case "OVERDUE":
+        return "overdue";
+      case "DUE_SOON":
+        return "due-soon";
+      case "UPCOMING":
+        return "upcoming";
+      default:
+        return "";
+    }
+  }
+
+  function markAssessmentCompleted(assessment: any) {
+    const completedKey = "betterseqta-completed-assessments";
+    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+
+    if (!completed.includes(assessment.id)) {
+      completed.push(assessment.id);
+      localStorage.setItem(completedKey, JSON.stringify(completed));
+      updateAssessments();
+      checkForCelebration();
+    }
+  }
+
+  function unmarkAssessmentCompleted(assessment: any) {
+    const completedKey = "betterseqta-completed-assessments";
+    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+
+    const index = completed.indexOf(assessment.id);
+    if (index > -1) {
+      completed.splice(index, 1);
+      localStorage.setItem(completedKey, JSON.stringify(completed));
+      updateAssessments();
+    }
+  }
+
+  function checkForCelebration() {
+    const overdueCount = statusGroups.OVERDUE?.length || 0;
+    const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
+    
+    if (overdueCount === 0 && dueSoonCount === 0) {
+      setTimeout(() => {
+        try {
+          const duration = 100;
+          const end = Date.now() + duration;
+
+          (function frame() {
+            confetti({
+              particleCount: 17,
+              angle: 60,
+              spread: 65,
+              drift: 0.8,
+              startVelocity: 40,
+              scalar: 2,
+              gravity: 2,
+              decay: 0.97,
+              ticks: 300,
+              origin: { x: 0, y: 1 },
+              disableForReducedMotion: true,
+            });
+            
+            confetti({
+              particleCount: 17,
+              angle: 120,
+              spread: 65,
+              drift: -0.8,
+              startVelocity: 40,
+              scalar: 2,
+              decay: 0.97,
+              ticks: 300,
+              gravity: 2,
+              origin: { x: 1, y: 1 },
+              disableForReducedMotion: true,
+            });
+
+            if (Date.now() < end) {
+              requestAnimationFrame(frame);
+            }
+          }());
+        } catch (e) {
+          console.log("Confetti celebration failed:", e);
+        }
+      }, 500);
+    } else if (overdueCount === 0 || dueSoonCount === 0) {
+      setTimeout(() => {
+        try {
+          confetti({
+            particleCount: 100,
+            spread: 70,
+            origin: { y: 0.6 },
+            scalar: 0.9,
+            disableForReducedMotion: true,
+          });
+        } catch (e) {
+          console.log("Confetti celebration failed:", e);
+        }
+      }, 500);
+    }
+  }
+
+  function isManuallyCompleted(assessmentId: string): boolean {
+    const completedKey = "betterseqta-completed-assessments";
+    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+    return completed.includes(assessmentId);
+  }
+
+  function handleCardClick(assessment: any, event: Event) {
+    if ((event.target as HTMLElement).closest(".card-menu")) {
+      return;
+    }
+    window.location.hash = `#?page=/assessments/${assessment.programmeID}:${assessment.metaclassID}&item=${assessment.id}`;
+  }
+
+  let openMenuId: string | null = null;
+
+  function toggleMenu(assessmentId: string, event: Event) {
+    event.stopPropagation();
+    openMenuId = openMenuId === assessmentId ? null : assessmentId;
+  }
+
+  function closeAllMenus() {
+    openMenuId = null;
+  }
+
+  $: {
+    if (data) {
+      updateAssessments();
+    }
+  }
+
+  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} />
+
+<div id="grid-view-container">
+  <div class="grid-view-header">
+    <h1 class="grid-view-title">Assessments</h1>
+    <div class="grid-view-filters">
+      <select class="filter-select" bind:value={currentFilters.subject}>
+        <option value="all">All Subjects</option>
+        {#each data.subjects as subject}
+          <option value={subject.code}>{subject.code} - {subject.title}</option>
+        {/each}
+      </select>
+      <select class="filter-select" bind:value={currentFilters.sortBy}>
+        <option value="due">Sort by Due Date</option>
+        <option value="grade">Sort by Grade</option>
+        <option value="subject">Sort by Subject</option>
+        <option value="title">Sort by Title</option>
+      </select>
+    </div>
+  </div>
+
+  <div id="main-grid-content">
+    {#if filteredAssessments.length === 0}
+      <div class="empty-state">
+        <div class="empty-icon">📋</div>
+        <p>No assessments found matching your filters</p>
+      </div>
+    {:else}
+      <div class="kanban-board">
+        {#each columns as column}
+          {#if statusGroups[column.key]?.length > 0}
+            <div class="kanban-column-parent">
+              <div class="kanban-column {column.className}">
+                <div class="column-header">
+                  <div class="column-title">
+                    {column.icon} {column.title}
+                    <span class="column-count">{statusGroups[column.key].length}</span>
+                  </div>
+                </div>
+                <div class="column-cards" id="{column.key.toLowerCase()}-cards">
+                  {#each statusGroups[column.key] as assessment}
+                    {@const status = determineStatus(assessment)}
+                    {@const dueDateClass = getDueDateClass(assessment)}
+                    {@const isCompleted = isManuallyCompleted(assessment.id)}
+                    {@const color = data.colors[assessment.code] || "#6366f1"}
+                    <div 
+                      class="assessment-card"
+                      data-subject={assessment.code}
+                      data-status={status}
+                      style="--subject-color: {color}"
+                      on:click={(e) => handleCardClick(assessment, e)}
+                      role="button"
+                      tabindex="0"
+                      on:keydown={(e) => e.key === 'Enter' && handleCardClick(assessment, e)}
+                    >
+                      <div class="card-labels">
+                        <span class="card-label label-subject">{assessment.code}</span>
+                        {#if assessment.submitted}
+                          <span class="card-label label-submitted" style="background: #10b981; color: white;">Submitted</span>
+                        {/if}
+                        {#if isCompleted && status === "MARKS_RELEASED" && !assessment.results}
+                          <span class="card-label label-completed" style="background: #059669; color: white;">Completed</span>
+                        {/if}
+                      </div>
+
+                      {#if status !== "MARKS_RELEASED" || isCompleted}
+                        <div class="card-menu">
+                          <button 
+                            class="menu-button" 
+                            data-assessment-id={assessment.id}
+                            on:click={(e) => toggleMenu(assessment.id, e)}
+                            aria-label="Open menu"
+                          >
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                              <circle cx="12" cy="5" r="2"/>
+                              <circle cx="12" cy="12" r="2"/>
+                              <circle cx="12" cy="19" r="2"/>
+                            </svg>
+                          </button>
+                          <div class="menu-dropdown" style="display: {openMenuId === assessment.id ? 'block' : 'none'};">
+                            {#if status !== "MARKS_RELEASED"}
+                              <button class="menu-item mark-completed" on:click={() => markAssessmentCompleted(assessment)}>
+                                Mark as Completed
+                              </button>
+                            {:else if isCompleted}
+                              <button class="menu-item mark-not-completed" on:click={() => unmarkAssessmentCompleted(assessment)}>
+                                Mark as Not Complete
+                              </button>
+                            {/if}
+                          </div>
+                        </div>
+                      {/if}
+
+                      <h3 class="assessment-title">{assessment.title}</h3>
+
+                      {#if !assessment.results && !isCompleted}
+                        <div class="assessment-meta">
+                          <div class="due-date {dueDateClass}">
+                            📅 {formatDate(assessment.due, assessment.submitted)}
+                          </div>
+                        </div>
+                      {/if}
+
+                      {#if assessment.results}
+                        <div class="card-footer">
+                          <div class="Thermoscore__Thermoscore___WFpL3" style="--fill-colour: {color}">
+                            <div style="width: {assessment.results.percentage}%" class="Thermoscore__fill___ojxDI">
+                              <div title="{assessment.results.percentage}%" class="Thermoscore__text___XSR_M">
+                                {(() => {
+                                  const allSettings = settingsState.getAll() as unknown as any;
+                                  const letterGradeSetting = allSettings["plugin.assessments-average.settings"]?.lettergrade;
+                                  return letterGradeSetting 
+                                    ? percentageToLetter(assessment.results.percentage)
+                                    : `${assessment.results.percentage}%`;
+                                })()}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let error: string;
+</script>
+
+<div class="error-container">
+  <p class="error-text">Failed to load assessments</p>
+  <p style="color: #94a3b8; font-size: 0.875rem;">{error}</p>
+</div>

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

@@ -0,0 +1,78 @@
+<div id="grid-view-container">
+  <div class="grid-view-header">
+    <h1 class="grid-view-title">Assessments</h1>
+    <div class="grid-view-filters">
+      <select class="filter-select" disabled>
+        <option value="all">Loading subjects...</option>
+      </select>
+      <select class="filter-select" disabled>
+        <option value="due">Sort by Due Date</option>
+      </select>
+    </div>
+  </div>
+
+  <div id="main-grid-content">
+    <div class="kanban-board">
+      {#each columns as column}
+        <div class="kanban-column-parent">
+          <div class="kanban-column {column.className}">
+            <div class="column-header">
+              <div class="column-title">
+                {column.icon} {column.title}
+                <span class="column-count">...</span>
+              </div>
+            </div>
+            <div class="column-cards" id="{column.key.toLowerCase()}-cards">
+              {#each Array(column.skeletonCount) as _}
+                <div class="assessment-card">
+                  <div class="skeleton-element skeleton-label"></div>
+                  <div class="skeleton-element skeleton-title"></div>
+                  <div class="skeleton-element skeleton-title-line2"></div>
+                  <div class="skeleton-element skeleton-meta"></div>
+                  {#if column.key === "MARKS_RELEASED"}
+                    <div class="skeleton-footer">
+                      <div class="skeleton-element" style="height: 16px; width: 100%;"></div>
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<script lang="ts">
+  const columns = [
+    {
+      key: "UPCOMING",
+      title: "Upcoming",
+      className: "column-upcoming",
+      icon: "📅",
+      skeletonCount: 3,
+    },
+    {
+      key: "DUE_SOON",
+      title: "Due Soon",
+      className: "column-due-soon",
+      icon: "⏰",
+      skeletonCount: 2,
+    },
+    {
+      key: "OVERDUE",
+      title: "Overdue",
+      className: "column-overdue",
+      icon: "🚨",
+      skeletonCount: 1,
+    },
+    {
+      key: "MARKS_RELEASED",
+      title: "Marked",
+      className: "column-marked",
+      icon: "✅",
+      skeletonCount: 4,
+    },
+  ];
+</script>

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

@@ -0,0 +1,138 @@
+interface Subject {
+  code: string;
+  programme: number;
+  metaclass: number;
+  title: string;
+}
+interface PrefItem {
+  name: string;
+  value: string;
+}
+
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { getMockAssessmentsData } from "@/seqta/ui/dev/hideSensitiveContent";
+
+let cache: { time: number; data: any } | null = null;
+const CACHE_MS = 10 * 60 * 1000;
+const student = 69;
+
+async function fetchJSON(url: string, body: any) {
+  const res = await fetch(`${location.origin}${url}`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+    body: JSON.stringify(body),
+  });
+  return res.json();
+}
+
+async function loadSubjects() {
+  const res = await fetchJSON("/seqta/student/load/subjects?", {});
+  return res.payload
+    .filter((s: any) => s.active === 1)
+    .flatMap((s: any) => s.subjects);
+}
+
+async function loadPrefs(student: number) {
+  const res = await fetchJSON("/seqta/student/load/prefs?", {
+    request: "userPrefs",
+    asArray: true,
+    user: student,
+  });
+  const colors: Record<string, string> = {};
+  res.payload.forEach((p: PrefItem) => {
+    if (p.name.startsWith("timetable.subject.colour.")) {
+      const code = p.name.replace("timetable.subject.colour.", "");
+      colors[code] = p.value;
+    }
+  });
+  return colors;
+}
+
+async function loadUpcoming(student: number) {
+  const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", {
+    student,
+  });
+  return res.payload;
+}
+
+async function loadPast(student: number, subjects: Subject[]) {
+  const map: Record<number, any> = {};
+  await Promise.all(
+    subjects.map(async (s) => {
+      const res = await fetchJSON("/seqta/student/assessment/list/past?", {
+        programme: s.programme,
+        metaclass: s.metaclass,
+        student,
+      });
+      if (res.payload.tasks) {
+        res.payload.tasks.forEach((t: any) => {
+          map[t.id] = t;
+        });
+      }
+    }),
+  );
+  return map;
+}
+
+async function loadSubmissions(student: number, assessments: any[]) {
+  const submissionMap: Record<number, boolean> = {};
+
+  await Promise.all(
+    assessments.map(async (assessment) => {
+      try {
+        const res = await fetchJSON(
+          "/seqta/student/assessment/submissions/get",
+          {
+            assessment: assessment.id,
+            metaclass: assessment.metaclassID,
+            student,
+          },
+        );
+
+        submissionMap[assessment.id] = res.payload && res.payload.length > 0;
+      } catch (error) {
+        console.warn(
+          `Failed to fetch submission for assessment ${assessment.id}:`,
+          error,
+        );
+        submissionMap[assessment.id] = false;
+      }
+    }),
+  );
+
+  return submissionMap;
+}
+
+export async function getAssessmentsData() {
+  if (settingsState.mockNotices) {
+    return getMockAssessmentsData();
+  }
+
+  if (cache && Date.now() - cache.time < CACHE_MS) return cache.data;
+  const [subjects, colors, upcoming] = await Promise.all([
+    loadSubjects(),
+    loadPrefs(student),
+    loadUpcoming(student),
+  ]);
+  const pastMap = await loadPast(student, subjects);
+  const map: Record<number, any> = {};
+  upcoming.forEach((a: any) => {
+    map[a.id] = { ...a };
+  });
+  Object.values(pastMap).forEach((t: any) => {
+    if (map[t.id]) Object.assign(map[t.id], t);
+    else map[t.id] = t;
+  });
+
+  const allAssessments = Object.values(map);
+  const submissions = await loadSubmissions(student, allAssessments);
+
+  allAssessments.forEach((assessment: any) => {
+    assessment.submitted = submissions[assessment.id] || false;
+  });
+
+  const data = { assessments: allAssessments, subjects, colors };
+  cache = { time: Date.now(), data };
+  return data;
+}

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

@@ -0,0 +1,86 @@
+import type { Plugin } from "../../core/types";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import { getAssessmentsData } from "./api";
+import { renderSkeletonLoader, renderErrorState } from "./ui";
+import styles from "./styles.css?inline";
+import { delay } from "@/seqta/utils/delay";
+
+const assessmentsOverviewPlugin: Plugin<{}> = {
+  id: "assessments-overview",
+  name: "Assessments Overview",
+  description:
+    "Adds an overview option to the assessments page that organizes assessments by status",
+  version: "1.0.0",
+  settings: {},
+  disableToggle: false,
+  styles,
+
+  run: async () => {
+    const menu = (await waitForElm(
+      '[data-key="assessments"] > .sub > ul',
+      true,
+      100,
+      60,
+    )) as HTMLElement;
+    const gridItem = document.createElement("li");
+    gridItem.className = "item";
+    const label = document.createElement("label");
+    label.textContent = "Overview";
+    gridItem.appendChild(label);
+    menu.insertBefore(gridItem, menu.children[1] || null);
+
+    if (window.location.hash.includes("/assessments/overview")) {
+      loadGridView();
+    }
+
+    const clickHandler = (e: Event) => {
+      e.preventDefault();
+      loadGridView();
+    };
+    gridItem.addEventListener("click", clickHandler);
+
+    async function loadGridView() {
+      await delay(1);
+      window.history.pushState({}, "", "/#?page=/assessments/overview");
+      document.title = "Overview ― SEQTA Learn";
+      const main = document.getElementById("main");
+      if (!main) return;
+
+      document
+        .querySelectorAll('[data-key="assessments"] .item')
+        .forEach((item) => {
+          item.classList.remove("active");
+        });
+      gridItem.classList.add("active");
+      document
+        .querySelector('[data-key="assessments"]')
+        ?.classList.add("active");
+
+      main.innerHTML = '<div id="grid-view-container"></div>';
+      const container = document.getElementById(
+        "grid-view-container",
+      ) as HTMLElement;
+
+      renderSkeletonLoader(container);
+
+      try {
+        const data = await getAssessmentsData();
+        const { renderGrid } = await import("./ui");
+        renderGrid(container, data);
+      } catch (err) {
+        console.error("Failed to load assessments:", err);
+        renderErrorState(
+          container,
+          err instanceof Error ? err.message : "Unknown error",
+        );
+      }
+    }
+
+    return () => {
+      gridItem.removeEventListener("click", clickHandler);
+      gridItem.remove();
+    };
+  },
+};
+
+export default assessmentsOverviewPlugin;

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

@@ -0,0 +1,798 @@
+#grid-view-container {
+  background: transparent;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.grid-view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.grid-view-title {
+  font-size: 1.875rem !important;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+/* Dark mode support */
+.dark .grid-view-title {
+  color: #f8fafc;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.grid-view-filters {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.filter-select {
+  background: #ffffff !important;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  color: #1a1a1a;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  min-width: 180px;
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: #d41e3a;
+  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.1);
+}
+
+.filter-select:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode dropdowns */
+.dark .filter-select {
+  background: var(--background-primary) !important;
+  border-color: var(--background-secondary);
+  color: var(--text-primary);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.dark .filter-select:focus {
+  border-color: #d41e3a;
+  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.2);
+}
+
+.dark .filter-select:hover {
+  border-color: var(--background-secondary);
+  background: var(--background-secondary);
+}
+
+.dark .filter-select option {
+  background: var(--background-primary);
+  color: var(--text-primary);
+}
+
+#main-grid-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Kanban Board Layout */
+.kanban-board {
+  display: flex;
+  gap: 1.5rem;
+  overflow-x: auto;
+  padding: 1rem;
+  flex: 0 1 auto;
+}
+
+.kanban-column-parent {
+  flex: 0 0 320px;
+
+}
+
+.kanban-column {
+  max-height: 100%;
+  background: #f8fafc;
+  border-radius: 12px;
+  box-shadow: 0 0 0 2px #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode columns */
+.dark .kanban-column {
+  background: var(--background-primary);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.column-header {
+  padding: 1rem 1.25rem;
+  border-bottom: 2px solid #e2e8f0;
+  background: #ffffff;
+  border-radius: 12px 12px 0 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+/* Dark mode column headers */
+.dark .column-header {
+  background: var(--background-secondary);
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.column-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dark .column-title {
+  color: var(--text-primary);
+}
+
+.column-count {
+  background: #e2e8f0;
+  color: #64748b;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.dark .column-count {
+  background: var(--background-secondary);
+  color: var(--text-primary);
+}
+
+.column-cards {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Assessment Cards */
+.assessment-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  border-left: 4px solid var(--subject-color, #d41e3a);
+  border: 1px solid #e2e8f0;
+}
+
+.assessment-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+  border-color: #cbd5e1;
+}
+
+/* Dark mode cards */
+.dark .assessment-card {
+  background: var(--background-secondary);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.dark .assessment-card:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.card-labels {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.card-label {
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #ffffff;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.label-subject {
+  background: var(--subject-color, #d41e3a);
+}
+
+.card-menu {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 20;
+}
+
+.menu-button {
+  background: transparent !important;
+  border: none !important;
+  padding: 0.25rem !important;
+  cursor: pointer;
+  border-radius: 4px;
+  color: #64748b;
+  transition: all 0.2s ease;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 24px !important;
+  height: 24px !important;
+  margin: 0 !important;
+  position: static !important;
+  transform: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.menu-button:hover {
+  background: #f1f5f9 !important;
+  color: #1a1a1a;
+}
+
+.menu-button svg {
+  width: 16px !important;
+  height: 16px !important;
+  fill: currentColor !important;
+  display: block !important;
+}
+
+.dark .menu-button {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.dark .menu-button:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+  opacity: 1;
+}
+
+.menu-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 140px;
+  z-index: 30;
+  margin-top: 4px;
+}
+
+.dark .menu-dropdown {
+  background: var(--background-secondary);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #1a1a1a;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.menu-item:hover {
+  background: #f8fafc;
+}
+
+.dark .menu-item {
+  color: var(--text-primary);
+}
+
+.dark .menu-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.menu-item.mark-completed {
+  color: #059669;
+  font-weight: 500;
+}
+
+.dark .menu-item.mark-completed {
+  color: #10b981;
+}
+
+.menu-item.mark-not-completed {
+  color: #dc2626;
+  font-weight: 500;
+}
+
+.dark .menu-item.mark-not-completed {
+  color: #ef4444;
+}
+
+.assessment-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0 0 0.75rem 0;
+  line-height: 1.4;
+  padding-right: 2rem; /* Make room for menu button */
+}
+
+.dark .assessment-title {
+  color: var(--text-primary);
+}
+
+.assessment-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: #64748b;
+}
+
+.dark .assessment-meta {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.due-date {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+
+.due-date.overdue {
+  color: #dc2626;
+}
+
+.due-date.due-soon {
+  color: #d97706;
+}
+
+.due-date.upcoming {
+  color: #059669;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.dark .card-footer {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.grade-display {
+  font-weight: 700;
+  font-size: 0.875rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+}
+
+.grade-good {
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.grade-average {
+  background: rgba(245, 158, 11, 0.1);
+  color: #d97706;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.grade-bad {
+  background: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.grade-empty {
+  color: #64748b;
+  font-style: italic;
+  font-weight: 500;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+}
+
+.dark .grade-empty {
+  color: var(--text-primary);
+  opacity: 0.7;
+  background: var(--background-secondary);
+  border-color: var(--background-secondary);
+}
+
+/* Column-specific styling */
+.column-upcoming .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+}
+
+.column-due-soon .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
+}
+
+.column-overdue .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
+}
+
+.column-submitted .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
+}
+
+.column-marked .column-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
+}
+
+/* Dark mode column headers */
+.dark .column-upcoming .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
+}
+
+.dark .column-due-soon .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
+}
+
+.dark .column-overdue .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #991b1b 100%);
+}
+
+.dark .column-submitted .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
+}
+
+.dark .column-marked .column-header {
+  background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
+}
+
+/* Subject filter view */
+.subject-section {
+  margin-bottom: 2rem;
+}
+
+.subject-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 2px solid #e2e8f0;
+  border-left: 4px solid var(--subject-color, #d41e3a);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.dark .subject-header {
+  background: var(--background-secondary);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.subject-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.subject-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+.dark .subject-title {
+  color: var(--text-primary);
+}
+
+.subject-code {
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+.dark .subject-code {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+/* Loading and error states */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 4rem 0;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 2px solid #e2e8f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dark .loading-container {
+  background: var(--background-primary);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.loading-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 3px solid #e2e8f0;
+  border-top: 3px solid #d41e3a;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.dark .loading-spinner {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-top-color: #d41e3a;
+}
+
+.loading-text {
+  margin-top: 1rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.dark .loading-text {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 4rem 0;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 2px solid #fecaca;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dark .error-container {
+  background: var(--background-primary);
+  border-color: #991b1b;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.error-text {
+  color: #ef4444;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.dark .empty-state {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.empty-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  text-align: center;
+  min-height: 200px;
+}
+
+.dark .empty-column {
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.empty-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+  opacity: 0.5;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.skeleton-element {
+  background: linear-gradient(
+    90deg,
+    #f1f5f9 0%,
+    #e2e8f0 50%,
+    #f1f5f9 100%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 2s infinite linear;
+  border-radius: 4px;
+}
+
+.dark .skeleton-element {
+  background: linear-gradient(
+    90deg,
+    var(--background-primary) 0%,
+    var(--background-secondary) 50%,
+    var(--background-primary) 100%
+  );
+  background-size: 1000px 100%;
+}
+
+.skeleton-label {
+  height: 20px;
+  width: 60px;
+  margin-bottom: 0.75rem;
+  border-radius: 6px;
+}
+
+.skeleton-title {
+  height: 16px;
+  width: 80%;
+  margin-bottom: 0.5rem;
+}
+
+.skeleton-title-line2 {
+  height: 16px;
+  width: 60%;
+  margin-bottom: 0.75rem;
+}
+
+.skeleton-meta {
+  height: 12px;
+  width: 40%;
+  margin-top: 0.75rem;
+}
+
+.skeleton-footer {
+  height: 8px;
+  width: 100%;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.dark .skeleton-footer {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  #grid-view-container {
+    padding: 1rem;
+  }
+  
+  .grid-view-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
+  .grid-view-filters {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  
+  .kanban-board {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .kanban-column {
+    flex: none;
+    max-height: none;
+  }
+  
+  .filter-select {
+    min-width: 140px;
+  }
+}
+
+@media (max-width: 480px) {
+  .grid-view-title {
+    font-size: 1.5rem !important;
+  }
+  
+  .filter-select {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8rem;
+    min-width: 120px;
+  }
+  
+  .assessment-card {
+    padding: 0.75rem;
+  }
+  
+  .card-footer {
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: stretch;
+  }
+}
+
+/* Scrollbar styling for webkit browsers */
+.column-cards::-webkit-scrollbar {
+  width: 6px;
+}
+
+.column-cards::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.column-cards::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.column-cards::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Dark mode scrollbars */
+.dark .column-cards::-webkit-scrollbar-track {
+  background: var(--background-secondary);
+}
+
+.dark .column-cards::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.dark .column-cards::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}

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

@@ -0,0 +1,45 @@
+import renderSvelte from "@/interface/main";
+import AssessmentsOverview from "./AssessmentsOverview.svelte";
+import SkeletonLoader from "./SkeletonLoader.svelte";
+import ErrorState from "./ErrorState.svelte";
+import { unmount } from "svelte";
+
+let currentApp: any = null;
+
+export function renderGrid(container: HTMLElement, data: any) {
+  if (currentApp) {
+    unmount(currentApp);
+  }
+  
+  container.innerHTML = "";
+  container.className = "";
+  
+  currentApp = renderSvelte(AssessmentsOverview, container, { data });
+}
+
+export function renderSkeletonLoader(container: HTMLElement) {
+  if (currentApp) {
+    unmount(currentApp);
+  }
+  
+  container.innerHTML = "";
+  container.className = "";
+  
+  currentApp = renderSvelte(SkeletonLoader, container);
+}
+
+
+export function renderLoadingState(container: HTMLElement) {
+  renderSkeletonLoader(container);
+}
+
+export function renderErrorState(container: HTMLElement, error: string) {
+  if (currentApp) {
+    unmount(currentApp);
+  }
+  
+  container.innerHTML = "";
+  container.className = "";
+  
+  currentApp = renderSvelte(ErrorState, container, { error });
+}