Merge pull request #257 from BetterSEQTA/main

Merge main into global-search

.dependency-cruiser.cjs

@@ -0,0 +1,414 @@
+/** @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

.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,56 @@
+name: Bug report
+description: Report an issue with the modpack in its unmodified state. For other issues, use Discord.
+labels: bug
+title: "[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,54 @@
+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 mod.
+    placeholder: I would like to see...
+  validations:
+    required: false
+
+- type: textarea
+  attributes:
+    label: Additional details
+    description: Anything else you want to add?
+  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
 }

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

@@ -44,23 +44,18 @@
   - Assessments
 - Options to remove certain items from the side menu
 - Grades calculator
-- Fully customisable themes and an offical theme store
+- 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
 
@@ -70,20 +65,43 @@ Don't worry- if you get stuck feel free to ask around in the discord. We're open
 git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
 ```
 
-### Running Development
+
 
 1. Install dependencies
 
+You may install the dependencies like below:
+
 ```
 npm install # or your preferred package manager like pnpm or yarn
 ```
 
+But it is recommended to do it like this: 
+
+```
+npm install --legacy-peer-deps # Only NPM supported
+```
+### Running Development
 2. Run the dev script (it updates as you save files)
 
 ```
-npm run dev
+npm run dev # or use your perferred package manager
 ```
 
+
+
+### Building for production
+
+2. Run the build script
+
+```
+npm run build # or use your perferred package manager
+```
+
+2.1. Package it up (optional)
+
+```
+npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your perferred package manager
+```
 3. Load the extension into chrome
 
 - Go to `chrome://extensions`
@@ -91,33 +109,15 @@ npm run dev
 - 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
 
 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.
 
@@ -136,4 +136,4 @@ This extension was initially developed by [Nulkem](https://github.com/Nulkem/bet
 
 ## 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

@@ -6,11 +6,10 @@ Below here is the supported versions of BetterSEQTA+. Anything older than this i
 
 | 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,50 @@
+# 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,262 @@
+# 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,180 @@
+# 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,257 @@
+# 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,
+  
+  // 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. The `run` function is where we put our plugin's code
+5. We use `api.seqta.onMount` to wait for the homepage to load
+6. We create and style a message element
+7. 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
+
+## 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,314 @@
+# 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,
+
+  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;
+```
+
+## 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 

index.html

@@ -1,244 +0,0 @@
-<html class="reveal-full-page"><head>
-    <script>
-      (function() {
-        const originalConsole = window.console;
-        window.console = {
-          log: (...args) => {
-            originalConsole.log(...args);
-            window.parent.postMessage({ type: 'console', message: args.join(' ') }, '*');
-          },
-          error: (...args) => {
-            originalConsole.error(...args);
-            window.parent.postMessage({ type: 'console', message: 'Error: ' + args.join(' ') }, '*');
-          },
-          warn: (...args) => {
-            originalConsole.warn(...args);
-            window.parent.postMessage({ type: 'console', message: 'Warning: ' + args.join(' ') }, '*');
-          }
-        };
-
-        window.addEventListener('error', (event) => {
-          window.parent.postMessage({ type: 'console', message: 'Uncaught Error: ' + event.message }, '*');
-        });
-      })();
-    </script>
-  
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/night.min.css">
-    <link rel="stylesheet" href="https://sethburkart123.github.io/sf-pro-fonts/fonts.css" />
-    <style>
-        * {
-            font-family: 'SF Pro Display', sans-serif !important;
-        }
-        .reveal section img {
-            border: none !important;
-            box-shadow: none !important;
-        }
-        .custom-fragment {
-            opacity: 0;
-            transition: opacity 0.8s ease;
-        }
-        .visible {
-            opacity: 1;
-        }
-        .reveal .slides section {
-            text-align: left;
-        }
-        .reveal h1, .reveal h2 {
-            color: #58a6ff;
-            font-weight: 800;
-        }
-        .reveal h3 {
-            color: #79c0ff;
-        }
-        .reveal .highlight {
-            color: #7ee787;
-        }
-        .reveal .container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .reveal .box {
-            background: rgba(255,255,255,0.1);
-            padding: 20px;
-            border-radius: 10px;
-            margin: 10px;
-        }
-        .reveal code {
-            background: #1f2937;
-            padding: 3px 5px;
-            border-radius: 4px;
-        }
-    </style>
-</head>
-<body class="reveal-viewport" style="--slide-width: 960px; --slide-height: 700px;">
-    <div class="reveal slide center focused has-vertical-slides has-horizontal-slides" role="application" data-transition-speed="default" data-background-transition="fade" style="">
-        <div class="slides no-transition" style="width: 960px; height: 700px; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(0.527);">
-            <!-- Title Slide -->
-            <section style="top: 0px; display: block;" class="present">
-                <h1>SHA-256: The Digital Fingerprint Maker</h1>
-                <h3>A Journey into Modern Cryptographic Security</h3>
-                <p>An interactive exploration of how SHA-256 keeps our digital world secure</p>
-            </section>
-
-            <!-- What is SHA-256? -->
-            <section style="top: 0px; display: block;" hidden="" aria-hidden="true" class="stack future">
-                <section style="top: 97.5px; display: block;">
-                    <h2>What is SHA-256?</h2>
-                    <p>Think of SHA-256 as a magical fingerprint machine for digital data:</p>
-                    <ul>
-                        <li class="fragment" data-fragment-index="0">Takes <em>any</em> digital input (like a message or file)</li>
-                        <li class="fragment" data-fragment-index="1">Always produces a unique 256-bit (64 character) fingerprint</li>
-                        <li class="fragment" data-fragment-index="2">Even a tiny change creates a completely different fingerprint!</li>
-                    </ul>
-                </section>
-            </section>
-
-            <!-- How it Works -->
-            <section style="top: 0px; display: block;" hidden="" aria-hidden="true" class="stack future">
-                <section style="top: 62px; display: block;">
-                    <h2>How SHA-256 Works 🔨</h2>
-                    <p>Imagine a complex assembly line that processes your data:</p>
-                    <div class="container">
-                        <div class="box fragment" data-fragment-index="0">
-                            <h3>1. Preparation</h3>
-                            <p>Data is padded like fitting puzzle pieces into fixed 512-bit blocks</p>
-                        </div>
-                        <div class="box fragment" data-fragment-index="1">
-                            <h3>2. Processing</h3>
-                            <p>64 rounds of mathematical "mixing" operations</p>
-                        </div>
-                    </div>
-                </section>
-
-                <section class="future" aria-hidden="true" style="top: 350px; display: none;">
-                    <h3>The SHA-256 Process Visualized</h3>
-                    <div style="text-align: center;">
-                        <svg viewBox="0 0 800 300" style="max-width: 800px;">
-                            <!-- Input -->
-                            <rect x="50" y="50" width="150" height="60" fill="#58a6ff" opacity="0.8"></rect>
-                            <text x="125" y="85" text-anchor="middle" fill="white">Input Data</text>
-                            
-                            <!-- Arrow 1 -->
-                            <path d="M200 80 L300 80" stroke="white" stroke-width="2" marker-end="url(#arrowhead)"></path>
-                            
-                            <!-- Processing -->
-                            <rect x="300" y="40" width="200" height="80" fill="#7ee787" opacity="0.8"></rect>
-                            <text x="400" y="85" text-anchor="middle" fill="white">SHA-256 Processing</text>
-                            
-                            <!-- Arrow 2 -->
-                            <path d="M500 80 L600 80" stroke="white" stroke-width="2" marker-end="url(#arrowhead)"></path>
-                            
-                            <!-- Output -->
-                            <rect x="600" y="50" width="150" height="60" fill="#ff7b72" opacity="0.8"></rect>
-                            <text x="675" y="85" text-anchor="middle" fill="white">256-bit Hash</text>
-                            
-                            <!-- Arrow Marker -->
-                            <defs>
-                                <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-                                    <polygon points="0 0, 10 3.5, 0 7" fill="white"></polygon>
-                                </marker>
-                            </defs>
-                        </svg>
-                    </div>
-                </section>
-            </section>
-
-            <!-- Real-world Applications -->
-            <section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="stack future">
-                <section style="top: 350px; display: none;">
-                    <h2>Where is SHA-256 Used?</h2>
-                    <div class="container">
-                        <div class="box fragment" data-fragment-index="0">
-                            <h3>Password Storage</h3>
-                            <p>Websites store password fingerprints, not actual passwords</p>
-                        </div>
-                        <div class="box fragment" data-fragment-index="1">
-                            <h3>⛓️ Blockchain</h3>
-                            <p>Powers cryptocurrency mining and verification</p>
-                        </div>
-                    </div>
-                </section>
-
-                <section class="future" aria-hidden="true" style="top: 350px; display: none;">
-                    <h3>More Applications</h3>
-                    <div class="container">
-                        <div class="box fragment" data-fragment-index="0">
-                            <h3>Digital Signatures</h3>
-                            <p>Verify document authenticity</p>
-                        </div>
-                        <div class="box fragment" data-fragment-index="1">
-                            <h3>File Integrity</h3>
-                            <p>Ensure downloads aren't tampered with</p>
-                        </div>
-                    </div>
-                </section>
-            </section>
-
-            <!-- Strengths -->
-            <section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
-                <h2>Why SHA-256 is Strong 💪</h2>
-                <ul>
-                    <li class="fragment" data-fragment-index="0">Collision Resistance: Like finding two people with identical fingerprints</li>
-                    <li class="fragment" data-fragment-index="1">One-way Function: Can't reconstruct original data from hash</li>
-                    <li class="fragment" data-fragment-index="2">Avalanche Effect: Tiny changes cause completely different outputs</li>
-                </ul>
-            </section>
-
-            <!-- Interactive Demo -->
-            <section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
-                <h2>The Avalanche Effect 🌊</h2>
-                <div class="box">
-                    <p>Original message: "Hello, World!"</p>
-                    <code>a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e</code>
-                </div>
-                <div class="box fragment" data-fragment-index="0">
-                    <p>Changed to: "Hello, World?"</p>
-                    <code>7d1a54127b222502f5b79b5fb0803061152a44f92b37e23c6527baf665d4da9a</code>
-                </div>
-                <p class="fragment" data-fragment-index="1">Notice how one character change creates a completely different hash!</p>
-            </section>
-
-            <!-- Limitations -->
-            <section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
-                <h2>Challenges &amp; Future 🔮</h2>
-                <ul>
-                    <li class="fragment" data-fragment-index="0">Requires more computing power than older algorithms</li>
-                    <li class="fragment" data-fragment-index="1">Theoretical vulnerability to quantum computers (but not yet practical)</li>
-                    <li class="fragment" data-fragment-index="2">Still considered very secure for current and near-future use</li>
-                </ul>
-            </section>
-
-            <!-- Summary -->
-            <section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
-                <h2>Key Takeaways 🎯</h2>
-                <ul>
-                    <li class="fragment" data-fragment-index="0">SHA-256 creates unique digital fingerprints</li>
-                    <li class="fragment" data-fragment-index="1">Powers modern security in passwords, blockchain, and more</li>
-                    <li class="fragment" data-fragment-index="2">Extremely secure against current technology</li>
-                    <li class="fragment" data-fragment-index="3">Essential part of our digital infrastructure</li>
-                </ul>
-            </section>
-
-        </div>
-    <div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-number" style="display: block;"><a href="#/">
-					<span class="slide-number-a">1</span>
-					</a></div><aside class="controls" data-controls-layout="bottom-right" data-controls-back-arrows="faded" style="display: block;"><button class="navigate-left" aria-label="previous slide" disabled="disabled"><div class="controls-arrow"></div></button>
-			<button class="navigate-right enabled highlight" aria-label="next slide"><div class="controls-arrow"></div></button>
-			<button class="navigate-up" aria-label="above slide" disabled="disabled"><div class="controls-arrow"></div></button>
-			<button class="navigate-down" aria-label="below slide" disabled="disabled"><div class="controls-arrow"></div></button></aside><div class="progress" style="display: block;"><span style="transform: scaleX(0);"></span></div><div class="speaker-notes" data-prevent-swipe="" tabindex="0"></div><div class="pause-overlay"><button class="resume-button">Resume presentation</button></div><div class="aria-status" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">SHA-256: The Digital Fingerprint Maker 🔐 A Journey into Modern Cryptographic Security An interactive exploration of how SHA-256 keeps our digital world secure </div></div>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.js"></script>
-    <script>
-        Reveal.initialize({
-            hash: true,
-            slideNumber: true,
-            transition: 'slide',
-            controls: true,
-            progress: true
-        });
-    </script>
-
-
-</body></html>

lib/closePlugin.ts

@@ -0,0 +1,25 @@
+// ref: https://stackoverflow.com/a/76920975
+import type { Plugin } from 'vite';
+
+export default function ClosePlugin(): Plugin {
+  return {
+    name: 'ClosePlugin', // required, will show up in warnings and errors
+
+    // use this to catch errors when building
+    buildEnd(error) {
+      if(error) {
+        console.error('Error bundling')
+        console.error(error)
+        process.exit(1)
+      } else {
+        console.log('Build ended')
+      }
+    },
+
+    // use this to catch the end of a build without errors
+    closeBundle() {
+      console.log('Bundle closed')
+      process.exit(0)
+    },
+  }
+}

lib/inlineWorker.ts

@@ -0,0 +1,37 @@
+// vite-plugin-inline-worker-dev.ts
+import { Plugin } from 'vite'
+import fs from 'fs/promises'
+import { build, transform } from 'esbuild'
+
+export default function InlineWorkerDevPlugin(): Plugin {
+  return {
+    name: 'vite:inline-worker-dev',
+    async load(id) {
+      if (id.includes('?inlineWorker')) {
+        const [cleanPath] = id.split('?')
+        console.log('cleanPath', cleanPath)
+        const code = await fs.readFile(cleanPath, 'utf-8')
+        const result = await build({
+          entryPoints: [cleanPath],
+          bundle: true,
+          write: false,
+          platform: 'browser',
+          format: 'iife',
+          target: 'esnext',
+        })
+        
+        const workerCode = result.outputFiles[0].text        
+
+        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
+    }
+  }
+}

lib/patchPackage.ts

@@ -25,17 +25,31 @@ export function updateManifestPlugin(): PluginOption {
           console.log('** updated **');
         }
 
+        // Implement retry mechanism for file watching
+        const watchWithRetry = () => {
+          if (!fs.existsSync(manifestPath)) {
+            console.log('Manifest not found, retrying in 1 second...');
+            setTimeout(watchWithRetry, 1000);
+            return;
+          }
+
           fs.watchFile(manifestPath, () => {
-          console.log('** watchFile ** ');
+            try {
               const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
-          if (manifestContents.web_accessible_resources.some((resource: any) => resource.use_dynamic_url)) {
+              if (manifestContents.web_accessible_resources?.some((resource: any) => resource.use_dynamic_url)) {
                 const updated = forceDisableUseDynamicUrl();
                 if (updated) {
                   server.ws.send({ type: 'full-reload' });
                   console.log('** updated **');
                 }
               }
+            } catch (error) {
+              console.log('Error reading manifest, will retry on next change:', error.message);
+            }
           });
+        };
+
+        watchWithRetry();
       });
     },
 

lib/publish.js

@@ -5,26 +5,44 @@ const path = require('path');
 
 function getLatestVersion(files) {
   console.log('Files passed to getLatestVersion:', files);
+
   const versions = files.map(file => {
-    const match = file.match(/@(\d+\.\d+\.\d+)-/);
+    const match = file.match(/@([\d\.]+)-/);
     console.log('Matching file:', file, 'Version found:', match ? match[1] : 'None');
-    return match ? match[1] : null;
+
+    if (!match) return null;
+
+    const fullVersion = match[1]; // Original version (e.g., 3.4.5.1)
+    const semverVersion = fullVersion.split('.').slice(0, 3).join('.'); // Trim to 3.4.5
+
+    return { fullVersion, semverVersion };
   }).filter(Boolean);
 
-  console.log('Extracted versions:', versions);
+  console.log('Extracted versions:', versions.map(v => v.semverVersion));
-  const latestVersion = semver.maxSatisfying(versions, '*');
+
-  console.log('Latest version:', latestVersion);
+  // Find latest version using the trimmed semver format
+  const latestSemver = semver.maxSatisfying(versions.map(v => v.semverVersion), '*');
+  console.log('Latest SemVer-compatible version:', latestSemver);
+
+  // Get the full version that matches the latest SemVer version
+  const latestVersion = versions.find(v => v.semverVersion === latestSemver)?.fullVersion || null;
+
+  console.log('Final selected latest version:', latestVersion);
   return latestVersion;
 }
 
 function getLatestFiles(browser) {
   const pattern = `dist/betterseqtaplus@*-*${browser}.zip`;
   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));
+  // Find the exact file by matching the original full version
+  const latestFile = files.find(file => file.includes(`@${latestVersion}-`));
+
   console.log('Latest file for browser', browser, ':', latestFile);
   return latestFile;
 }

lib/touchGlobalCSS.ts

@@ -0,0 +1,17 @@
+import fs from 'fs';
+
+export default function touchGlobalCSSPlugin() {
+  return {
+    name: 'touch-global-css',
+    handleHotUpdate({ modules }) {
+      // log all of the staticImportedUrls
+      const importers = modules[0]._clientModule.importers
+      importers.forEach((importer) => {
+        if (importer.file.includes('.css')) {
+          console.log("touching", importer.file)
+          fs.utimesSync(importer.file, new Date(), new Date())
+        }
+      })
+    }
+  };
+}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.4.2",
+  "version": "3.4.6.1",
   "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,73 @@
   },
   "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",
+    "@bedframe/cli": "^0.0.91",
     "@crxjs/vite-plugin": "2.0.0-beta.25",
     "@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",
+    "client-vector-search": "../client-vector-search",
-    "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",
+    "embla-carousel-autoplay": "^8.5.2",
-    "embla-carousel-svelte": "^8.3.1",
+    "embla-carousel-svelte": "^8.5.2",
-    "fuse.js": "^7.0.0",
+    "events": "^3.3.0",
-    "idb": "^8.0.0",
+    "flexsearch": "^0.8.147",
-    "kolorist": "^1.8.0",
+    "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,61 +1,6 @@
 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({})
@@ -69,8 +14,9 @@ function reloadSeqtaPages() {
   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':
       reloadSeqtaPages();
@@ -103,36 +49,15 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
       break;
 
     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');
   }
-});
   
-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 +65,6 @@ const DefaultValues: SettingsState = {
   bksliderinput: "50",
   transparencyEffects: false,
   lessonalert: true,
-  notificationcollector: true,
   defaultmenuorder: [],
   menuitems: {
     assessments: { toggle: true },
@@ -220,6 +144,8 @@ const DefaultValues: SettingsState = {
     },
   ],
   customshortcuts: [],
+  lettergrade: false,
+  newsSource: 'australia',
 };
 
 function SetStorageValue(object: any) {
@@ -228,54 +154,63 @@ 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(null) as unknown as SettingsState;
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
+
+  // 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({ 'plugin.notificationCollector.settings': { enabled: false } });
-            const length = DefaultValues[i].length;
-            // @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(['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,113 @@
+import Parser from 'rss-parser';
+
+const fetchAustraliaNews = async (url: string, sendResponse: any) => {
+  fetch(url)
+    .then((result) => result.json())
+    .then((response) => {
+      if (response.code == 'rateLimited') {
+        fetchAustraliaNews(url += '%00', sendResponse);
+      } else {
+        sendResponse({ news: response });
+      }
+    });
+};
+
+const rssFeedsByCountry: Record<string, string[]> = {
+  usa: [
+    "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
+    "https://www.huffpost.com/section/front-page/feed",
+    "https://www.npr.org/rss/rss.php",
+  ],
+  taiwan: [
+    "https://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/"
+  ],
+};
+
+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/injected/transparency.scss

@@ -11,7 +11,7 @@ html.transparencyEffects:not(.dark) {
 
 html.transparencyEffects {
   /* Background Fixes */
-  .notifications__item___2ErJN,
+  [class*="notifications__item___"],
   #shortcuts {
     backdrop-filter: unset !important;
   }
@@ -24,21 +24,21 @@ html.transparencyEffects {
   /* Blurs */
   .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,
-  .MessageList__MessageList___3DxoC {
+  [class*="MessageList__MessageList___"] {
     backdrop-filter: blur(80px);
   }
   
@@ -47,7 +47,7 @@ html.transparencyEffects {
   }
 
   .whatsnewContainer,
-  .Message__Message___3oJaU {
+  [class*="Message__Message___"] {
     backdrop-filter: blur(50px);
   }
 

src/declarations.d.ts

@@ -3,6 +3,12 @@ declare module '*.woff';
 declare module '*.scss';
 declare module '*.png';
 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/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.tsx

@@ -93,7 +93,7 @@ export default function Picker({
     <ColorPicker
       disableDarkMode={true}
       presets={presets}
-      hideInputs={true}
+      hideInputs={customOnChange ? false : true}
       value={customThemeColor ?? ""}
       onChange={(color: string) => {
         if (customOnChange) {

src/interface/components/PickerSwatch.svelte

@@ -5,6 +5,7 @@
 </script>
 
 <button
+  aria-label="Color Picker Swatch"
   onclick={onClick}
   style="background: {$settingsState.selectedColor}"
   class="w-16 h-8 rounded-md"

src/interface/components/Slider.svelte

@@ -1,13 +1,20 @@
 <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}%)`}
     onchange={(e) => onChange(Number(e.currentTarget.value))}

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"
-        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}%` }}

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,16 +1,13 @@
 <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 }>();
@@ -20,10 +17,10 @@
   const handleThemeClick = async (theme: CustomTheme) => {
     if (isEditMode) return;
     if (theme.id === themes?.selectedTheme) {
-      await disableTheme();
+      await themeManager.disableTheme();
       themes.selectedTheme = '';
     } else {
-      await setTheme(theme.id);
+      await themeManager.setTheme(theme.id);
       if (!themes) return;
       themes.selectedTheme = theme.id;
     }
@@ -31,13 +28,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 +43,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 +69,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 +81,10 @@
   }
 
   const fetchThemes = async () => {
-    themes = await getAvailableThemes();
+    themes = {
+      themes: await themeManager.getAvailableThemes(),
+      selectedTheme: themeManager.getSelectedThemeId() || '',
+    }
   }
 
   onMount(async () => {
@@ -98,7 +99,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 +107,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"/>
@@ -130,7 +131,7 @@
         >
           {#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 +153,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 +168,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 +180,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 +194,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 +202,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/index.css

@@ -4,14 +4,8 @@
 @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,25 +1,8 @@
 import "./index.css"
-import { mount } from "svelte"
-import type { ComponentType } from "svelte"
 import Settings from "./pages/settings.svelte"
 import IconFamily from '@/resources/fonts/IconFamily.woff'
 import browser from "webextension-polyfill"
-
+import renderSvelte from "./main"
-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')
@@ -43,4 +26,4 @@ if (!mountPoint) {
 }
 
 InjectCustomIcons()
-renderSvelte(Settings, mountPoint)
+renderSvelte(Settings, mountPoint, { standalone: true })

src/interface/main.ts

@@ -1,9 +1,9 @@
-import styles from "./index.css?inline"
 import { mount } from "svelte"
-import type { ComponentType } from "svelte"
+import type { SvelteComponent } 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> = {},
 ) {
@@ -15,10 +15,9 @@ export default function renderSvelte(
     },
   })
 
-  const style = document.createElement("style")
+  const styleElement = document.createElement('style')
-  style.setAttribute("type", "text/css")
+  styleElement.textContent = style
-  style.innerHTML = styles
+  mountPoint.appendChild(styleElement)
-  mountPoint.appendChild(style)
 
   return app
 }

src/interface/pages/settings.svelte

@@ -9,7 +9,10 @@
   import { onMount } from 'svelte'
   import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
 
-  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
+  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
+  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
+  import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew"
+
   import ColourPicker from '../components/ColourPicker.svelte'
   import { settingsPopup } from '../hooks/SettingsPopup'
 
@@ -56,13 +59,14 @@
     
     if (!standalone) return;
     initializeSettingsState();
+    console.log('settingsState', $settingsState);
     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">
       <!-- 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 +75,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

@@ -11,11 +11,72 @@
   import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
   import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
 
+  import { getAllPluginSettings } from "@/plugins"
+  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting } 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[]
+    });
+
+  interface Plugin {
+    pluginId: string;
+    name: string;
+    description: string;
+    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) {
+          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 +99,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 +128,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,19 +158,109 @@
       }
     },
     {
-      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>
+      <!-- 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="text-sm font-bold">Enable {plugin.name}</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}
+
+      <!-- Only show other settings if plugin is enabled or has no disableToggle -->
+      {#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] bg-[#DDDDDD] dark:text-white"
+                    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)
+                    }))}
+                  />
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </div>
+  {/each}
+
+  {@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="pr-4">
@@ -170,7 +271,7 @@
         <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>

src/interface/pages/settings/shortcuts.svelte

@@ -66,7 +66,7 @@
 </script>
 
 {#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
-<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">{Shortcut.name}</h2>
   </div>
@@ -95,7 +95,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}
@@ -108,7 +108,7 @@
               class="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}
@@ -142,9 +142,9 @@
 
     <!-- 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 ">
+                <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/utils/themeImageHandlers.ts

@@ -17,7 +17,7 @@ export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promi
         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);
@@ -51,7 +51,7 @@ export function handleCoverImageUpload(event: Event, theme: LoadedCustomTheme):
       const reader = new FileReader();
       reader.onload = async () => {
         const imageBlob = await fetch(reader.result as string).then(res => res.blob());
-        resolve({ ...theme, coverImage: imageBlob, coverImageUrl: URL.createObjectURL(imageBlob) });
+        resolve({ ...theme, coverImage: imageBlob });
       };
       reader.readAsDataURL(file);
     });

src/manifests/brave.ts

@@ -1,4 +1,9 @@
 import { createManifest } from '../../lib/createManifest'
 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,9 @@
 import { createManifest } from '../../lib/createManifest'
 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,9 @@
 import { createManifest } from '../../lib/createManifest'
 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

@@ -4,6 +4,8 @@ import pkg from '../../package.json'
 
 const updatedFirefoxManifest = {
   ...baseManifest,
+  version: pkg.version,
+  description: pkg.description,
   background: {
     scripts: [baseManifest.background.service_worker],
   },

src/manifests/manifest.json

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

src/manifests/opera.ts

@@ -1,4 +1,9 @@
 import { createManifest } from '../../lib/createManifest'
 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,8 +1,11 @@
 import { createManifest } from '../../lib/createManifest'
 import baseManifest from './manifest.json'
+import pkg from '../../package.json'
 
 const updatedSafariManifest = {
   ...baseManifest,
+  version: pkg.version,
+  description: pkg.description,
   browser_specific_settings: {
     safari: {
       strict_min_version: '15.4',

src/pageState.js

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

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

@@ -0,0 +1,78 @@
+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,150 @@
+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/globalSearch/docs/client-vector-search.md

@@ -0,0 +1,626 @@
+# client-vector-search
+
+A client side vector search library that can embed, search, and cache. Works on the browser and server side.
+
+It outperforms OpenAI's text-embedding-ada-002 and is way faster than Pinecone and other VectorDBs.
+
+I'm the founder of [searchbase.app](https://searchbase.app) and we needed this for our product and customers. We'll be using this library in production. You can be sure it'll be maintained and improved.
+
+- Embed documents using transformers by default: gte-small (~30mb).
+- Calculate cosine similarity between embeddings.
+- Create an index and search on the client side
+- Cache vectors with browser caching support.
+
+Lots of improvements are coming!
+
+## Roadmap
+
+Our goal is to build a super simple, fast vector search that works with couple hundred to thousands vectors. ~1k vectors per user covers 99% of the use cases.
+
+We'll initially keep things super simple and sub 100ms
+
+### TODOs
+
+- [ ] add HNSW index that works on node and browser env, don't rely on hnsw binder libs
+- [ ] add a proper testing suite and ci/cd for the lib
+  - [ ] simple health tests
+    - [ ] mock the @xenova/transformers for jest, it's not happy with it
+  - [ ] performance tests, recall, memory usage, cpu usage etc.
+
+## Installation
+
+```bash
+npm i client-vector-search
+```
+
+## Quickstart
+
+This library provides a plug-and-play solution for embedding and vector search. It's designed to be easy to use, efficient, and versatile. Here's a quick start guide:
+
+```ts
+import { getEmbedding, EmbeddingIndex } from "client-vector-search";
+
+// getEmbedding is an async function, so you need to use 'await' or '.then()' to get the result
+const embedding = await getEmbedding("Apple"); // Returns embedding as number[]
+
+// Each object should have an 'embedding' property of type number[]
+const initialObjects = [
+  { id: 1, name: "Apple", embedding: embedding },
+  { id: 2, name: "Banana", embedding: await getEmbedding("Banana") },
+  { id: 3, name: "Cheddar", embedding: await getEmbedding("Cheddar") },
+  { id: 4, name: "Space", embedding: await getEmbedding("Space") },
+  { id: 5, name: "database", embedding: await getEmbedding("database") },
+];
+const index = new EmbeddingIndex(initialObjects); // Creates an index
+
+// The query should be an embedding of type number[]
+const queryEmbedding = await getEmbedding("Fruit"); // Query embedding
+const results = await index.search(queryEmbedding, { topK: 5 }); // Returns top similar objects
+
+// specify the storage type
+await index.saveIndex("indexedDB");
+const results = await index.search([1, 2, 3], {
+  topK: 5,
+  useStorage: "indexedDB",
+  // storageOptions: { // use only if you overrode the defaults
+  //   indexedDBName: 'clientVectorDB',
+  //   indexedDBObjectStoreName: 'ClientEmbeddingStore',
+  // },
+});
+
+console.log(results);
+
+await index.deleteIndexedDB(); // if you overrode default, specify db name
+```
+
+## Trouble-shooting
+
+### NextJS
+
+To use it inside NextJS projects you'll need to update the `next.config.js` file to include the following:
+
+```js
+module.exports = {
+  // Override the default webpack configuration
+  webpack: (config) => {
+    // See https://webpack.js.org/configuration/resolve/#resolvealias
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      sharp$: false,
+      "onnxruntime-node$": false,
+    };
+    return config;
+  },
+};
+```
+
+#### Model load after page is loaded
+
+You can initialize the model before using it to generate embeddings. This will ensure that the model is loaded before you use it and provide a better UX.
+
+```js
+import { initializeModel } from "client-vector-search"
+...
+  useEffect(() => {
+    try {
+      initializeModel();
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+```
+
+## Usage Guide
+
+This guide provides a step-by-step walkthrough of the library's main features. It covers everything from generating embeddings for a string to performing operations on the index such as adding, updating, and removing objects. It also includes instructions on how to save the index to a database and perform search operations within it.
+
+Until we have a reference documentation, you can find all the methods and their usage in this guide. Each step is accompanied by a code snippet to illustrate the usage of the method in question. Make sure to follow along and try out the examples in your own environment to get a better understanding of how everything works.
+
+Let's get started!
+
+### Step 1: Generate Embeddings for String
+
+Generate embeddings for a given string using the `getEmbedding` method.
+
+```ts
+const embedding = await getEmbedding("Apple"); // Returns embedding as number[]
+```
+
+> **Note**: `getEmbedding` is asynchronous; make sure to use `await`.
+
+---
+
+### Step 2: Calculate Cosine Similarity
+
+Calculate the cosine similarity between two embeddings.
+
+```ts
+const similarity = cosineSimilarity(embedding1, embedding2, 6);
+```
+
+> **Note**: Both embeddings should be of the same length.
+
+---
+
+### Step 3: Create an Index
+
+Create an index with an initial array of objects. Each object must have an 'embedding' property.
+
+```ts
+const initialObjects = [...];
+const index = new EmbeddingIndex(initialObjects);
+```
+
+---
+
+### Step 4: Add to Index
+
+Add an object to the index.
+
+```ts
+const objectToAdd = {
+  id: 6,
+  name: "Cat",
+  embedding: await getEmbedding("Cat"),
+};
+index.add(objectToAdd);
+```
+
+---
+
+### Step 5: Update Index
+
+Update an existing object in the index.
+
+```ts
+const vectorToUpdate = {
+  id: 6,
+  name: "Dog",
+  embedding: await getEmbedding("Dog"),
+};
+index.update({ id: 6 }, vectorToUpdate);
+```
+
+---
+
+### Step 6: Remove from Index
+
+Remove an object from the index.
+
+```ts
+index.remove({ id: 6 });
+```
+
+---
+
+### Step 7: Retrieve from Index
+
+Retrieve an object from the index.
+
+```ts
+const vector = index.get({ id: 1 });
+```
+
+---
+
+### Step 8: Search the Index
+
+Search the index with a query embedding.
+
+```ts
+const queryEmbedding = await getEmbedding("Fruit");
+const results = await index.search(queryEmbedding, { topK: 5 });
+```
+
+---
+
+### Step 9: Print the Index
+
+Print the entire index to the console.
+
+```ts
+index.printIndex();
+```
+
+---
+
+### Step 10: Save Index to IndexedDB (for browser)
+
+Save the index to a persistent IndexedDB database. Note
+
+```ts
+await index.saveIndex("indexedDB", {
+  DBName: "clientVectorDB",
+  objectStoreName: "ClientEmbeddingStore",
+});
+```
+
+---
+
+### Important: Search in indexedDB
+
+Perform a search operation in the IndexedDB.
+
+````ts
+const results = await index.search(queryEmbedding, {
+  topK: 5,
+  useStorage: "indexedDB",
+  storageOptions: { // only if you want to override the default options, defaults are below
+    indexedDBName: 'clientVectorDB',
+    indexedDBObjectStoreName: 'ClientEmbeddingStore'
+  }
+});
+
+---
+
+### Delete Database
+To delete an entire database.
+
+```ts
+await IndexedDbManager.deleteIndexedDB("clientVectorDB");
+````
+
+---
+
+### Delete Object Store
+
+To delete an object store from a database.
+
+```ts
+await IndexedDbManager.deleteIndexedDBObjectStore(
+  "clientVectorDB",
+  "ClientEmbeddingStore",
+);
+```
+
+---
+
+### Retrieve All Objects
+
+To retrieve all objects from a specific object store.
+
+```ts
+const allObjects = await IndexedDbManager.getAllObjectsFromIndexedDB(
+  "clientVectorDB",
+  "ClientEmbeddingStore",
+);
+```
+
+# THE MAIN INDEX.TS FILE THAT YOU ARE IMPORTING FROM
+
+```index.ts
+const DEFAULT_TOP_K = 3;
+
+interface Filter {
+  [key: string]: any;
+}
+
+import Cache from './cache';
+import { IndexedDbManager } from './indexedDB';
+import { cosineSimilarity } from './utils';
+export { ExperimentalHNSWIndex } from './hnsw';
+
+// uncomment if you want to test indexedDB implementation in node env for faster dev cycle
+// import { IDBFactory } from 'fake-indexeddb';
+// const indexedDB = new IDBFactory();
+
+export interface SearchResult {
+  similarity: number;
+  object: any;
+}
+
+type StorageOptions = 'indexedDB' | 'localStorage' | 'none';
+
+/**
+ * Interface for search options in the EmbeddingIndex class.
+ * topK: The number of top similar items to return.
+ * filter: An optional filter to apply to the objects before searching.
+ * useStorage: A flag to indicate whether to use storage options like indexedDB or localStorage.
+ */
+interface SearchOptions {
+  topK?: number;
+  filter?: Filter;
+  useStorage?: StorageOptions;
+  storageOptions?: { indexedDBName: string; indexedDBObjectStoreName: string }; // TODO: generalize it to localStorage as well
+}
+
+const cacheInstance = Cache.getInstance();
+
+let pipe: any;
+let currentModel: string;
+
+export const initializeModel = async (
+  model: string = 'Xenova/gte-small',
+): Promise<void> => {
+  if (model !== currentModel) {
+    const transformersModule = await import('@xenova/transformers');
+    const pipeline = transformersModule.pipeline;
+    pipe = await pipeline('feature-extraction', model);
+    currentModel = model;
+  }
+};
+
+export const getEmbedding = async (
+  text: string,
+  precision: number = 7,
+  options = { pooling: 'mean', normalize: false },
+  model = 'Xenova/gte-small',
+): Promise<number[]> => {
+  const cachedEmbedding = cacheInstance.get(text);
+  if (cachedEmbedding) {
+    return Promise.resolve(cachedEmbedding);
+  }
+
+  if (model !== currentModel) {
+    await initializeModel(model);
+  }
+
+  const output = await pipe(text, options);
+  const roundedOutput = Array.from(output.data as number[]).map(
+    (value: number) => parseFloat(value.toFixed(precision)),
+  );
+  cacheInstance.set(text, roundedOutput);
+  return Array.from(roundedOutput);
+};
+
+export class EmbeddingIndex {
+  private objects: Filter[];
+  private keys: string[];
+
+  constructor(initialObjects?: Filter[]) {
+    // TODO: add support for options while creating index such as  {... indexedDB: true, ...}
+    this.objects = [];
+    this.keys = [];
+    if (initialObjects && initialObjects.length > 0) {
+      initialObjects.forEach((obj) => this.validateAndAdd(obj));
+      if (initialObjects[0]) {
+        this.keys = Object.keys(initialObjects[0]);
+      }
+    }
+  }
+
+  private findVectorIndex(filter: Filter): number {
+    return this.objects.findIndex((object) =>
+      Object.keys(filter).every((key) => object[key] === filter[key]),
+    );
+  }
+
+  private validateAndAdd(obj: Filter) {
+    if (!Array.isArray(obj.embedding) || obj.embedding.some(isNaN)) {
+      throw new Error(
+        'Object must have an embedding property of type number[]',
+      );
+    }
+    if (this.keys.length === 0) {
+      this.keys = Object.keys(obj);
+    } else if (!this.keys.every((key) => key in obj)) {
+      throw new Error(
+        'Object must have the same properties as the initial objects',
+      );
+    }
+    this.objects.push(obj);
+  }
+
+  add(obj: Filter) {
+    this.validateAndAdd(obj);
+  }
+
+  // Method to update an existing vector in the index
+  update(filter: Filter, vector: Filter) {
+    const index = this.findVectorIndex(filter);
+    if (index === -1) {
+      throw new Error('Vector not found');
+    }
+    if (vector.hasOwnProperty('embedding')) {
+      // Validate and add the new vector
+      this.validateAndAdd(vector);
+    }
+    // Replace the old vector with the new one
+    this.objects[index] = Object.assign(this.objects[index] as Filter, vector);
+  }
+
+  // Method to remove a vector from the index
+  remove(filter: Filter) {
+    const index = this.findVectorIndex(filter);
+    if (index === -1) {
+      throw new Error('Vector not found');
+    }
+    // Remove the vector from the index
+    this.objects.splice(index, 1);
+  }
+
+  // Method to remove multiple vectors from the index
+  removeBatch(filters: Filter[]) {
+    filters.forEach((filter) => {
+      const index = this.findVectorIndex(filter);
+      if (index !== -1) {
+        // Remove the vector from the index
+        this.objects.splice(index, 1);
+      }
+    });
+  }
+
+  // Method to retrieve a vector from the index
+  get(filter: Filter) {
+    const vector = this.objects[this.findVectorIndex(filter)];
+    return vector || null;
+  }
+
+  size(): number {
+    // Returns the size of the index
+    return this.objects.length;
+  }
+
+  clear() {
+    this.objects = [];
+  }
+
+  async search(
+    queryEmbedding: number[],
+    options: SearchOptions = {
+      topK: 3,
+      useStorage: 'none',
+      storageOptions: {
+        indexedDBName: 'clientVectorDB',
+        indexedDBObjectStoreName: 'ClientEmbeddingStore',
+      },
+    },
+  ): Promise<SearchResult[]> {
+    const topK = options.topK || DEFAULT_TOP_K;
+    const filter = options.filter || {};
+    const useStorage = options.useStorage || 'none';
+
+    if (useStorage === 'indexedDB') {
+      const DBname = options.storageOptions?.indexedDBName || 'clientVectorDB';
+      const objectStoreName =
+        options.storageOptions?.indexedDBObjectStoreName ||
+        'ClientEmbeddingStore';
+
+      if (typeof indexedDB === 'undefined') {
+        console.error('IndexedDB is not supported');
+        throw new Error('IndexedDB is not supported');
+      }
+      const results = await this.loadAndSearchFromIndexedDB(
+        DBname,
+        objectStoreName,
+        queryEmbedding,
+        topK,
+        filter,
+      );
+      return results;
+    } else {
+      // Compute similarities
+      const similarities = this.objects
+        .filter((object) =>
+          Object.keys(filter).every((key) => object[key] === filter[key]),
+        )
+        .map((obj) => ({
+          similarity: cosineSimilarity(queryEmbedding, obj.embedding),
+          object: obj,
+        }));
+
+      // Sort by similarity and return topK results
+      return similarities
+        .sort((a, b) => b.similarity - a.similarity)
+        .slice(0, topK);
+    }
+  }
+
+  printIndex() {
+    console.log('Index Content:');
+    this.objects.forEach((obj, idx) => {
+      console.log(`Item ${idx + 1}:`, obj);
+    });
+  }
+
+  async saveIndex(
+    storageType: string,
+    options: { DBName: string; objectStoreName: string } = {
+      DBName: 'clientVectorDB',
+      objectStoreName: 'ClientEmbeddingStore',
+    },
+  ) {
+    if (storageType === 'indexedDB') {
+      await this.saveToIndexedDB(options.DBName, options.objectStoreName);
+    } else {
+      throw new Error(
+        `Unsupported storage type: ${storageType} \n Supported storage types: "indexedDB"`,
+      );
+    }
+  }
+
+  async saveToIndexedDB(
+    DBname: string = 'clientVectorDB',
+    objectStoreName: string = 'ClientEmbeddingStore',
+  ): Promise<void> {
+    if (typeof indexedDB === 'undefined') {
+      console.error('IndexedDB is not defined');
+      throw new Error('IndexedDB is not supported');
+    }
+
+    if (!this.objects || this.objects.length === 0) {
+      throw new Error('Index is empty. Nothing to save');
+    }
+
+    try {
+      const db = await IndexedDbManager.create(DBname, objectStoreName);
+      await db.addToIndexedDB(this.objects);
+      console.log(
+        `Index saved to database '${DBname}' object store '${objectStoreName}'`,
+      );
+    } catch (error) {
+      console.error('Error saving index to database:', error);
+      throw new Error('Error saving index to database');
+    }
+  }
+
+  async loadAndSearchFromIndexedDB(
+    DBname: string = 'clientVectorDB',
+    objectStoreName: string = 'ClientEmbeddingStore',
+    queryEmbedding: number[],
+    topK: number,
+    filter: { [key: string]: any },
+  ): Promise<SearchResult[]> {
+    const db = await IndexedDbManager.create(DBname, objectStoreName);
+    const generator = db.dbGenerator();
+    const results: { similarity: number; object: any }[] = [];
+
+    for await (const record of generator) {
+      if (Object.keys(filter).every((key) => record[key] === filter[key])) {
+        const similarity = cosineSimilarity(queryEmbedding, record.embedding);
+        results.push({ similarity, object: record });
+      }
+    }
+    results.sort((a, b) => b.similarity - a.similarity);
+    return results.slice(0, topK);
+  }
+
+  async deleteIndexedDB(DBname: string = 'clientVectorDB'): Promise<void> {
+    if (typeof indexedDB === 'undefined') {
+      console.error('IndexedDB is not defined');
+      throw new Error('IndexedDB is not supported');
+    }
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.deleteDatabase(DBname);
+
+      request.onsuccess = () => {
+        console.log(`Database '${DBname}' deleted`);
+        resolve();
+      };
+      request.onerror = (event) => {
+        console.error('Failed to delete database', event);
+        reject(new Error('Failed to delete database'));
+      };
+    });
+  }
+
+  async deleteIndexedDBObjectStore(
+    DBname: string = 'clientVectorDB',
+    objectStoreName: string = 'ClientEmbeddingStore',
+  ): Promise<void> {
+    const db = await IndexedDbManager.create(DBname, objectStoreName);
+
+    try {
+      await db.deleteIndexedDBObjectStoreFromDB(DBname, objectStoreName);
+      console.log(
+        `Object store '${objectStoreName}' deleted from database '${DBname}'`,
+      );
+    } catch (error) {
+      console.error('Error deleting object store:', error);
+      throw new Error('Error deleting object store');
+    }
+  }
+
+  async getAllObjectsFromIndexedDB(
+    DBname: string = 'clientVectorDB',
+    objectStoreName: string = 'ClientEmbeddingStore',
+  ): Promise<any[]> {
+    const db = await IndexedDbManager.create(DBname, objectStoreName);
+    const objects: any[] = [];
+    for await (const record of db.dbGenerator()) {
+      objects.push(record);
+    }
+    return objects;
+  }
+}
+```

src/plugins/built-in/globalSearch/src/components/AssessmentItem.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { highlightMatch, highlightSnippet, stripHtmlButKeepHighlights } from '../utils/highlight';
+  import type { DynamicContentItem } from '../utils/dynamicItems';
+  import type { FuseResultMatch } from '../core/types';
+
+  const { item, isSelected, searchTerm, matches } = $props<{
+    item: DynamicContentItem;
+    isSelected: boolean;
+    searchTerm: string;
+    matches?: readonly FuseResultMatch[];
+  }>();
+</script>
+
+<button
+  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group 
+  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+  >
+  <div class="flex items-center w-full">
+      <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{item.metadata?.icon || '\ue924'}</div>
+      <span class="ml-4 text-lg truncate">
+      {@html stripHtmlButKeepHighlights(highlightMatch(item.text, searchTerm, matches))}
+      </span>
+      <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
+      {item.category} 
+      </span>
+  </div>
+  {#if item.content}
+      <div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
+      {@html stripHtmlButKeepHighlights(highlightSnippet(item.content, searchTerm, matches))}
+      </div>
+  {/if}
+</button>
+
+<style>
+  :global(.highlight) {
+    background-color: rgba(255, 213, 0, 0.3);
+    font-weight: 500;
+    border-radius: 2px;
+    padding: 0 1px;
+    margin: 0 -1px;
+  }
+  
+  .dark :global(.highlight) {
+    background-color: rgba(255, 230, 100, 0.4);
+  }
+  
+  .due-badge {
+    font-size: 0.65rem;
+  }
+</style> 

src/plugins/built-in/globalSearch/src/components/Calculator.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { unitFullNames } from './unitMap';
+  import * as math from 'mathjs';
+
+  let { searchTerm = '', isSelected = false } = $props<{ searchTerm: string, isSelected: boolean }>();
+  
+  const dispatch = createEventDispatcher<{
+    hasResult: string | null;
+  }>();
+  
+  let result = $state<string | null>(null);
+  let isCalculating = $state(false);
+  let inputUnit = $state<string>('');
+  let outputUnit = $state<string>('');
+
+  function detectUnit(expression: string): string {
+    try {
+      const unit = math.unit(expression);
+      if (unit) {
+        // Get the base unit name
+        const unitStr = unit.formatUnits();
+        return unitFullNames[unitStr] || unitStr;
+      }
+    } catch (e) {
+      // Not a unit or invalid expression
+    }
+    return '';
+  }
+  
+  // Process the input with debounce to avoid unnecessary calculations
+  const processInput = (input: string) => {
+    try {
+      if (
+        !input.trim() || 
+        (input.trim().length <= 2 && !/\d/.test(input))
+      ) {
+        result = null;
+        inputUnit = '';
+        outputUnit = '';
+        dispatch('hasResult', null);
+        return;
+      }
+      
+      isCalculating = true;
+      
+      // Let mathjs handle everything
+      const evaluated = math.evaluate(input.replace('**', '^'));
+      
+      // Format the result
+      if (evaluated !== undefined) {
+        if (math.typeOf(evaluated) === 'Unit') {
+          // Handle unit conversion results
+          result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
+          inputUnit = detectUnit(input);
+          outputUnit = detectUnit(result);
+        } else if (typeof evaluated === 'number') {
+          // Handle regular numbers
+          if (math.round(evaluated) === evaluated) {
+            result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
+          } else {
+            result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
+          }
+          inputUnit = '';
+          outputUnit = '';
+        } else {
+          result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
+          inputUnit = '';
+          outputUnit = '';
+        }
+        dispatch('hasResult', result);
+      } else {
+        result = null;
+        inputUnit = '';
+        outputUnit = '';
+        dispatch('hasResult', null);
+      }
+    } catch (e) {
+      // If mathjs throws an error, this isn't a valid expression
+      result = null;
+      inputUnit = '';
+      outputUnit = '';
+      dispatch('hasResult', null);
+    } finally {
+      isCalculating = false;
+    }
+  }
+  
+  $effect(() => {
+    processInput(searchTerm);
+  });
+  
+  onDestroy(() => {
+    dispatch('hasResult', null);
+  });
+</script>
+
+{#if result !== null}
+<div class="p-2">
+  <p class="text-[0.85rem] p-1 pb-0.5 pt-0 font-semibold text-zinc-500 dark:text-zinc-400">Calculator</p>
+  <div class="flex items-center justify-between gap-8 rounded-lg border border-transparent {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 border-zinc-900/5 dark:border-zinc-100/5' : ''}">
+    <div class="flex flex-col flex-1 items-center py-4 pl-4 min-w-0">
+      <div class="overflow-hidden py-2 w-full font-semibold text-center whitespace-nowrap text-zinc-900 dark:text-white text-ellipsis" 
+        style="--char-count: {searchTerm?.length || 10}; font-size: min(2.5rem, max(1rem, calc(35vw / var(--char-count, 10))))">
+        {searchTerm}
+      </div>
+      <div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-900 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-100/10">
+        {inputUnit || 'Question'}
+      </div>
+    </div>
+
+    <div class="flex flex-col flex-shrink-0 justify-center items-center w-12">
+      <div class="h-8 w-[1px] bg-zinc-900/5 dark:bg-zinc-100/5"></div>
+      <div class="text-2xl text-zinc-900 dark:text-zinc-100">
+        →
+      </div>
+      <div class="h-8 w-[1px] bg-zinc-900/5 dark:bg-zinc-100/5"></div>
+    </div>
+
+    {#if !isCalculating}
+      <div class="flex flex-col flex-1 items-center py-4 pr-4 min-w-0">
+        <div class="overflow-hidden py-2 w-full font-semibold text-center whitespace-nowrap text-zinc-900 dark:text-white text-ellipsis" 
+             style="--char-count: {result?.length || 10}; font-size: min(2.5rem, max(1rem, calc(30vw / var(--char-count, 10))))">
+          {result}
+        </div>
+        <div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-900 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-100/10">
+          {outputUnit || 'Result'}
+        </div>
+      </div>
+    {:else}
+      <div class="w-6 h-6 rounded-full border-2 animate-spin border-zinc-300 dark:border-zinc-700 border-t-zinc-600 dark:border-t-zinc-300"></div>
+    {/if}
+  </div>
+</div>
+{/if}

src/plugins/built-in/globalSearch/src/components/SearchBar.svelte

@@ -0,0 +1,390 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { fade, scale } from 'svelte/transition';
+  import { circOut, quintOut } from 'svelte/easing';
+  import { type StaticCommandItem } from '../core/commands';
+  import type { CombinedResult } from '../core/types';
+  import { createSearchIndexes, performSearch as doSearch } from '../search/searchUtils';
+  import { highlightMatch, highlightSnippet, stripHtmlButKeepHighlights } from '../utils/highlight';
+  import Fuse from 'fuse.js';
+  import Calculator from './Calculator.svelte';
+  import { actionMap } from '../indexing/actions';
+  import type { IndexItem, HydratedIndexItem } from '../indexing/types';
+  import debounce from 'lodash/debounce';
+
+  const { 
+    transparencyEffects, 
+    showRecentFirst
+  } = $props<{ 
+    transparencyEffects: boolean, 
+    showRecentFirst: boolean 
+  }>();
+
+  let commandsFuse = $state<Fuse<StaticCommandItem>>();
+  let dynamicContentFuse = $state<Fuse<HydratedIndexItem>>();
+  
+  const dynamicIdToItemMap = $state(new Map<string, HydratedIndexItem>());
+  const commandIdToItemMap = $state(new Map<string, StaticCommandItem>());
+
+  let isIndexing = $state(false);
+  let completedJobs = $state(0);
+  let totalJobs = $state(0);
+
+  onMount(() => {
+    const progressHandler = (event: CustomEvent) => {
+      const { completed, total, indexing } = event.detail;
+      completedJobs = completed;
+      totalJobs = total;
+      isIndexing = indexing;
+    };
+
+    window.addEventListener('indexing-progress', progressHandler as EventListener);
+    
+    const itemsUpdatedHandler = () => {
+      console.log('Search Bar received items-updated event, re-indexing...');
+      setupSearchIndexes();
+      performSearch();
+    };
+    window.addEventListener('dynamic-items-updated', itemsUpdatedHandler);
+    
+    return () => {
+      window.removeEventListener('indexing-progress', progressHandler as EventListener);
+      window.removeEventListener('dynamic-items-updated', itemsUpdatedHandler);
+    };
+  });
+
+  function setupSearchIndexes() {
+    const { commandsFuse: cfuse, dynamicContentFuse: dfuse, commands, dynamicItems } = createSearchIndexes();
+    
+    commandsFuse = cfuse;
+    dynamicContentFuse = dfuse;
+    
+    dynamicIdToItemMap.clear();
+    commandIdToItemMap.clear();
+    
+    dynamicItems.forEach(item => dynamicIdToItemMap.set(item.id, item));
+    commands.forEach(item => commandIdToItemMap.set(item.id, item));
+    
+    console.debug(`[Global Search] Indexed ${commands.length} command items and ${dynamicItems.length} dynamic items.`);
+  }
+  let commandPalleteOpen = $state(false);
+  let searchTerm = $state('');
+  let selectedIndex = $state(0);
+  let searchbar = $state<HTMLInputElement>();
+  let combinedResults = $state<CombinedResult[]>([]); 
+  let isLoading = $state(false);
+  let prevSearchTerm = $state('');
+  let calculatorResult = $state<string | null>(null);
+
+  const updateCalculatorState = (hasResult: string | null) => {
+    calculatorResult = hasResult;
+  };
+
+  onMount(() => {
+    setupSearchIndexes();
+    
+    // @ts-ignore - Intentionally adding to window
+    window.setCommandPalleteOpen = (open: boolean) => {
+      commandPalleteOpen = open;
+    };
+    
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        commandPalleteOpen = true;
+        tick().then(() => searchbar?.focus());
+      }
+      if (e.key === 'Escape') {
+        commandPalleteOpen = false;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  });
+
+  const performSearch = async () => {
+    isLoading = true;
+    selectedIndex = 0;
+
+    const term = searchTerm.trim().toLowerCase();
+    
+    if (commandsFuse && dynamicContentFuse) {
+      combinedResults = await doSearch(
+        term, 
+        commandsFuse, 
+        dynamicContentFuse, 
+        commandIdToItemMap, 
+        dynamicIdToItemMap,
+        showRecentFirst
+      );
+    } else {
+      combinedResults = [];
+    }
+    
+    isLoading = false;
+  };
+
+  const debouncedPerformSearch = debounce(performSearch, 10);
+
+  $effect(() => {
+    if (commandPalleteOpen) {
+      if (searchTerm === '') {
+        performSearch();
+      } else {
+        debouncedPerformSearch();
+      }
+      tick().then(() => searchbar?.focus()); 
+    } else {
+      searchTerm = '';
+      selectedIndex = 0;
+      prevSearchTerm = '';
+      combinedResults = [];
+    }
+  });
+
+  $effect(() => {
+    if (combinedResults.length === 0 && calculatorResult && commandPalleteOpen) {
+      selectedIndex = 0;
+    }
+  });
+
+  const selectNext = () => {
+    const maxIndex = (calculatorResult ? 1 : 0) + combinedResults.length - 1;
+    if (selectedIndex < maxIndex) {
+      selectedIndex++;
+    }
+  };
+
+  const selectPrev = () => {
+    if (selectedIndex > 0) {
+      selectedIndex--;
+    }
+  };
+
+  function executeItemAction(item: StaticCommandItem | HydratedIndexItem) {
+    if ('action' in item && typeof item.action === 'function') {
+      (item as StaticCommandItem).action();
+    } else if ('actionId' in item && item.actionId && actionMap[item.actionId]) {
+      actionMap[item.actionId](item as IndexItem);
+    }
+    commandPalleteOpen = false;
+  }
+
+  const executeSelected = () => {
+    if (calculatorResult && selectedIndex === 0) {
+      navigator.clipboard.writeText(calculatorResult);
+      commandPalleteOpen = false;
+    } else {
+      const resultIndex = calculatorResult ? selectedIndex - 1 : selectedIndex;
+      const result = combinedResults[resultIndex];
+      if (result?.item) {
+        executeItemAction(result.item);
+      }
+    }
+  };
+
+  const handleKeyNav = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      selectNext();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      selectPrev();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      executeSelected();
+    } else if (e.key === 'Escape') {
+      commandPalleteOpen = false;
+    }
+  };
+</script>
+
+{#if commandPalleteOpen}
+  <div role="dialog" aria-modal="true" class={settingsState.DarkMode ? 'dark' : ''}>
+    <div 
+      class="fixed inset-0 z-[50000] bg-zinc-900/40 dark:bg-black/60" 
+      transition:fade={{ duration: 150, easing: quintOut }}
+    ></div>
+
+    <div class="fixed inset-0 z-[50000] flex justify-center place-items-start p-8 sm:p-6 md:p-8 select-none" 
+         onclick={() => commandPalleteOpen = false}
+         onkeydown={(e) => e.key === 'Escape' && (commandPalleteOpen = false)}
+         role="button"
+         tabindex="0">
+      <div
+        class="w-full max-w-2xl overflow-clip rounded-xl ring-1 shadow-2xl ring-black/5 dark:ring-white/10 { transparencyEffects ? 'bg-white/80 dark:bg-zinc-900/80 backdrop-blur' : 'bg-white dark:bg-zinc-900' }"
+        transition:scale={{ duration: 100, start: 0.95, opacity: 0, easing: circOut }}
+        onclick={(e) => {
+          e.stopPropagation();
+        }}
+        onkeydown={(e) => {
+          if (e.key === 'Escape') {
+            commandPalleteOpen = false;
+          }
+        }}
+        role="button"
+        tabindex="0">
+
+        <div class="relative p-2 border-b border-zinc-900/5 dark:border-zinc-100/5">
+          <div class="absolute top-1/2 translate-y-[calc(-50%-3px)] scale-105 left-5 w-6 h-6 text-[1.3rem] text-zinc-900 dark:text-zinc-400 text-opacity-40 pointer-events-none font-IconFamily">
+            {'\ueca5'}
+          </div>
+          <input
+            bind:this={searchbar}
+            bind:value={searchTerm}
+            onkeydown={handleKeyNav}
+            class="pr-4 pl-12 w-full h-10 text-lg bg-transparent border-0 outline-none placeholder-zinc-400 text-zinc-700 dark:placeholder-zinc-500 dark:text-white focus:ring-0 sm:text-xl"
+            placeholder="Search..."
+          />
+        </div>
+
+        <ul class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
+          <Calculator 
+            searchTerm={searchTerm} 
+            isSelected={selectedIndex === 0} 
+            on:hasResult={(e) => updateCalculatorState(e.detail)}
+          />
+          
+          {#if combinedResults.length > 0}
+            {#each combinedResults as result, i (result.id)} 
+              {@const isSelected = selectedIndex === (calculatorResult ? i + 1 : i)}
+              {@const item = result.item} 
+              <li>
+                {#if result.type === 'command'}
+                  {@const staticItem = item as StaticCommandItem}
+                  <button
+                    class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group 
+                    {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+                    onclick={() => executeItemAction(staticItem)}
+                  >
+                    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{staticItem.icon}</div>
+                    <span class="ml-4 text-lg truncate">
+                      {@html highlightMatch(staticItem.text, searchTerm, result.matches)}
+                    </span>
+                    {#if staticItem.keybindLabel}
+                      <div class="flex-none ml-auto">
+                        {@render Shortcut({ text: '', keybind: staticItem.keybindLabel })}
+                      </div>
+                    {/if}
+                  </button>
+                {:else if result.type === 'dynamic'}
+                  {@const dynamicItem = item as HydratedIndexItem}
+                  {#if dynamicItem.renderComponent}
+                    <dynamicItem.renderComponent 
+                      item={dynamicItem} 
+                      isSelected={isSelected}
+                      searchTerm={searchTerm} 
+                      matches={result.matches} 
+                      on:click={() => executeItemAction(dynamicItem)} 
+                    />
+                  {:else}
+                    <button
+                      class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group 
+                      {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+                      onclick={() => executeItemAction(dynamicItem)}
+                    >
+                      <div class="flex items-center w-full">
+                        <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{dynamicItem.metadata?.icon || '\ue924'}</div>
+                        <span class="ml-4 text-lg truncate">
+                          {@html stripHtmlButKeepHighlights(highlightMatch(dynamicItem.text, searchTerm, result.matches))}
+                        </span>
+                        <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
+                          {dynamicItem.category} 
+                        </span>
+                      </div>
+                      {#if dynamicItem.content}
+                        <div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
+                          {@html stripHtmlButKeepHighlights(highlightSnippet(dynamicItem.content, searchTerm, result.matches))}
+                        </div>
+                      {/if}
+                    </button>
+                  {/if}
+                {/if}
+              </li>
+            {/each}
+          {:else if !calculatorResult}
+            <div class="px-8 py-16 text-center text-zinc-900 dark:text-zinc-200 sm:px-16">
+              {#if isLoading}
+                <div class="mx-auto w-8 h-8 rounded-full border-2 animate-spin border-zinc-300 dark:border-zinc-700 border-t-zinc-600 dark:border-t-zinc-300"></div>
+                <p class="mt-4 text-lg dark:text-zinc-300">Searching...</p>
+              {:else}
+                <svg class="mx-auto w-8 h-8 text-opacity-40 dark:text-opacity-60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+                </svg>
+                <p class="mt-6 text-lg dark:text-zinc-300">No matches found. Try something else.</p>
+              {/if}
+            </div>
+          {/if}
+        </ul>
+        <div class="px-3 py-2 w-full border-t border-zinc-900/5 dark:border-zinc-100/5 bg-white/5">
+          {#if combinedResults.length > 0 || calculatorResult}
+            <div class="flex justify-between items-center h-5 text-sm text-zinc-500 dark:text-zinc-400">
+              <div class="flex gap-4 items-center">
+                {#if !calculatorResult}
+                  {#if selectedIndex >= 0 && selectedIndex < combinedResults.length}
+                    {@const item = combinedResults[selectedIndex].item}
+                    {#if 'keybind' in item && item.keybind}
+                      {@render Shortcut({ text: 'Shortcut', keybind: [ ...(item?.keybindLabel ?? []) ] })}
+                    {/if}
+                  {/if}
+                {/if}
+              </div>
+              <div>
+                <div class="flex gap-4 items-center">
+                  {@render Shortcut({ text: 'Navigate', keybind: ['↑', '↓']})}
+                  {#if calculatorResult && selectedIndex === 0}
+                  {@render Shortcut({ text: 'Copy result', keybind: ['↵']})}
+                  {:else}
+                  {@render Shortcut({ text: 'Select', keybind: ['↵']})}
+                  {/if}
+                </div>
+                {#if isIndexing}
+                  <div class="inset-x-0 top-0">
+                    <div class="absolute right-2 -bottom-4 text-[10px] text-zinc-500 dark:text-zinc-400">
+                      Indexing
+                    </div>
+                    <div class="overflow-hidden h-0.5 bg-zinc-200 dark:bg-zinc-700">
+                      <div 
+                        class="h-full bg-blue-500 transition-all duration-300 ease-out"
+                        style="width: {(completedJobs / totalJobs) * 100}%"
+                      ></div>
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#snippet Shortcut({ text, keybind }: { text: string, keybind: string[] }) }
+  <div class="flex gap-2 items-center">
+    <div class="flex gap-1 items-center">
+      {#each keybind as key}
+        <kbd class="px-1 py-0.5 text-[0.8rem] text-center align-middle rounded min-w-6 bg-zinc-100 dark:bg-zinc-100/10">{key}</kbd>
+      {/each}
+    </div>
+    <span>{text}</span>
+  </div>
+{/snippet}
+
+<style>
+  :global(.highlight) {
+    background-color: rgba(200, 200, 200, 0.3);
+    font-weight: 500;
+    border-radius: 2px;
+    padding: 0 2px;
+    margin: 0 -2px;
+  }
+
+  .dark :global(.highlight) {
+    background-color: rgba(79, 79, 79, 0.2);
+  }
+</style>

src/plugins/built-in/globalSearch/src/components/unitMap.ts

@@ -0,0 +1,193 @@
+export const unitFullNames: Record<string, string> = {
+  // --- Length ---
+  m: "Meters",
+  km: "Kilometers",
+  cm: "Centimeters",
+  mm: "Millimeters",
+  µm: "Micrometers",
+  nm: "Nanometers",
+  pm: "Picometers",
+  fm: "Femtometers",
+  am: "Attometers",
+  zm: "Zeptometers",
+  ym: "Yoctometers",
+  mi: "Miles",
+  yd: "Yards",
+  ft: "Feet",
+  in: "Inches",
+  nmi: "Nautical Miles",
+  angstrom: "Angstroms",
+  au: "Astronomical Units",
+  ly: "Light Years",
+  pc: "Parsecs",
+
+  // --- Mass ---
+  kg: "Kilograms",
+  g: "Grams",
+  mg: "Milligrams",
+  µg: "Micrograms",
+  ng: "Nanograms",
+  lb: "Pounds",
+  oz: "Ounces",
+  ton: "Tons (Imperial)",
+  tonne: "Tonnes (Metric)",
+  slug: "Slugs",
+  stone: "Stones",
+
+  // --- Time ---
+  s: "Seconds",
+  ms: "Milliseconds",
+  µs: "Microseconds",
+  ns: "Nanoseconds",
+  ps: "Picoseconds",
+  min: "Minutes",
+  h: "Hours",
+  day: "Days",
+  week: "Weeks",
+  month: "Months (30 days)",
+  year: "Years (365 days)",
+  fortnight: "Fortnights",
+
+  // --- Temperature ---
+  K: "Kelvin",
+  degC: "Degrees Celsius",
+  degF: "Degrees Fahrenheit",
+  degR: "Degrees Rankine",
+
+  // --- Volume ---
+  "m³": "Cubic Meters",
+  "cm³": "Cubic Centimeters",
+  "mm³": "Cubic Millimeters",
+  l: "Liters",
+  ml: "Milliliters",
+  gal: "Gallons (US)",
+  qt: "Quarts (US)",
+  pt: "Pints (US)",
+  cup: "Cups (US)",
+  floz: "Fluid Ounces (US)",
+  tbsp: "Tablespoons (US)",
+  tsp: "Teaspoons (US)",
+
+  // --- Area ---
+  "m²": "Square Meters",
+  "km²": "Square Kilometers",
+  "cm²": "Square Centimeters",
+  "mm²": "Square Millimeters",
+  ha: "Hectares",
+  acre: "Acres",
+  "ft²": "Square Feet",
+  "in²": "Square Inches",
+  "mi²": "Square Miles",
+
+  // --- Speed ---
+  "m/s": "Meters per Second",
+  "km/h": "Kilometers per Hour",
+  mph: "Miles per Hour",
+  knot: "Knots",
+
+  // --- Acceleration ---
+  "m/s²": "Meters per Second Squared",
+
+  // --- Force ---
+  N: "Newtons",
+  lbf: "Pound-Force",
+  dyn: "Dynes",
+
+  // --- Energy ---
+  J: "Joules",
+  kJ: "Kilojoules",
+  cal: "Calories",
+  kcal: "Kilocalories",
+  Wh: "Watt Hours",
+  kWh: "Kilowatt Hours",
+  BTU: "British Thermal Units",
+  erg: "Ergs",
+  eV: "Electronvolts",
+
+  // --- Power ---
+  W: "Watts",
+  kW: "Kilowatts",
+  MW: "Megawatts",
+  GW: "Gigawatts",
+  hp: "Horsepower",
+
+  // --- Pressure ---
+  Pa: "Pascals",
+  kPa: "Kilopascals",
+  bar: "Bar",
+  atm: "Atmospheres",
+  psi: "Pounds per Square Inch",
+  torr: "Torr",
+  mmHg: "Millimeters of Mercury",
+
+  // --- Frequency ---
+  Hz: "Hertz",
+  kHz: "Kilohertz",
+  MHz: "Megahertz",
+  GHz: "Gigahertz",
+  THz: "Terahertz",
+
+  // --- Electric ---
+  V: "Volts",
+  A: "Amperes",
+  C: "Coulombs",
+  Ω: "Ohms",
+  F: "Farads",
+  S: "Siemens",
+  H: "Henries",
+  Wb: "Webers",
+  T: "Teslas",
+  lx: "Lux",
+
+  // --- Angle & Rotation ---
+  rad: "Radians",
+  deg: "Degrees",
+  grad: "Gradians",
+  cycle: "Cycles",
+  turn: "Turns",
+  rev: "Revolutions",
+
+  // --- Charge & Capacitance ---
+  e: "Elementary Charges",
+
+  // --- Magnetic & Light ---
+  lm: "Lumens",
+  ph: "Photons",
+
+  // --- Miscellaneous / Dimensionless ---
+  "%": "Percent",
+  ppm: "Parts per Million",
+  ppb: "Parts per Billion",
+  pptr: "Parts per Trillion",
+  dB: "Decibels",
+  bit: "Bits",
+  byte: "Bytes",
+
+  // --- Digital Storage ---
+  b: "Bits",
+  B: "Bytes",
+  kb: "Kilobits",
+  kB: "Kilobytes",
+  Mb: "Megabits",
+  MB: "Megabytes",
+  Gb: "Gigabits",
+  GB: "Gigabytes",
+  Tb: "Terabits",
+  TB: "Terabytes",
+
+  // --- Currency ---
+  USD: "US Dollars",
+  EUR: "Euros",
+  GBP: "British Pounds",
+  AUD: "Australian Dollars",
+  CAD: "Canadian Dollars",
+  CHF: "Swiss Francs",
+  JPY: "Japanese Yen",
+  CNY: "Chinese Yuan",
+  INR: "Indian Rupees",
+  NZD: "New Zealand Dollars",
+  SEK: "Swedish Krona",
+  NOK: "Norwegian Krone",
+  SGD: "Singapore Dollars",
+  HKD: "Hong Kong Dollars",
+};

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

@@ -0,0 +1,85 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
+
+export interface BaseCommandItem {
+  id: string;
+  text: string;
+  category: string;
+  icon: string;
+  action: () => void;
+  keywords?: string[];
+  priority?: number;
+}
+
+export interface StaticCommandItem extends BaseCommandItem {
+  keybind?: string[];
+  keybindLabel?: string[];
+}
+
+const staticCommands: StaticCommandItem[] = [
+  {
+    id: "home",
+    icon: "\ueb4c",
+    category: "navigation",
+    text: "Home",
+    keybind: ["alt+h"],
+    keybindLabel: ["Alt", "H"],
+    action: () => {
+      window.location.hash = "?page=/home";
+      loadHomePage();
+    },
+    priority: 4,
+  },
+  {
+    id: "messages",
+    icon: "\uebfd",
+    category: "navigation",
+    text: "Direct Messages",
+    keybind: ["alt+m"],
+    keybindLabel: ["Alt", "M"],
+    action: () => {
+      window.location.hash = "?page=/messages";
+    },
+    priority: 4,
+  },
+  {
+    id: "timetable",
+    icon: "\ue9cd",
+    category: "navigation",
+    text: "Timetable",
+    keybind: ["alt+t"],
+    keybindLabel: ["Alt", "T"],
+    action: () => {
+      window.location.hash = "?page=/timetable";
+    },
+    priority: 4,
+  },
+  {
+    id: "assessments",
+    icon: "\ueac3",
+    category: "navigation",
+    text: "Assessments",
+    keybind: ["alt+a"],
+    keybindLabel: ["Alt", "A"],
+    action: () => {
+      window.location.hash = "?page=/assessments";
+    },
+    priority: 4,
+  },
+  {
+    id: "toggle-dark-mode",
+    icon: "\uecfe",
+    category: "action",
+    text: "Toggle Dark Mode",
+    action: () => (settingsState.DarkMode = !settingsState.DarkMode),
+    priority: 2,
+    keywords: ["theme", "appearance"],
+  },
+];
+
+/**
+ * Returns the predefined list of static commands.
+ */
+export const getStaticCommands = (): StaticCommandItem[] => {
+  return [...staticCommands];
+};

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

@@ -0,0 +1,89 @@
+import type { Plugin } from "@/plugins/core/types";
+import { BasePlugin } from "@/plugins/core/settings";
+import {
+  booleanSetting,
+  defineSettings,
+  Setting,
+  stringSetting,
+} from "@/plugins/core/settingsHelpers";
+import styles from "./styles.css?inline";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import { runIndexing } from "../indexing/indexer";
+import { initVectorSearch } from "../search/vector/vectorSearch";
+import { cleanupSearchBar, mountSearchBar } from "./mountSearchBar";
+
+const settings = defineSettings({
+  searchHotkey: stringSetting({
+    default: "ctrl+k",
+    title: "Search Hotkey",
+    description: "Keyboard shortcut to open the search (cmd on Mac)",
+  }),
+  showRecentFirst: booleanSetting({
+    default: true,
+    title: "Show Recent First",
+    description: "Sort dynamic content by most recent first",
+  }),
+  transparencyEffects: booleanSetting({
+    default: true,
+    title: "Transparency Effects",
+    description: "Enable transparency effects for the search bar",
+  }),
+  runIndexingOnLoad: booleanSetting({
+    default: true,
+    title: "Index on Page Load",
+    description: "Run content indexing when SEQTA loads",
+  }),
+});
+
+class GlobalSearchPlugin extends BasePlugin<typeof settings> {
+  @Setting(settings.searchHotkey)
+  searchHotkey!: string;
+
+  @Setting(settings.showRecentFirst)
+  showRecentFirst!: boolean;
+
+  @Setting(settings.transparencyEffects)
+  transparencyEffects!: boolean;
+
+  @Setting(settings.runIndexingOnLoad)
+  runIndexingOnLoad!: boolean;
+}
+
+const settingsInstance = new GlobalSearchPlugin();
+
+const globalSearchPlugin: Plugin<typeof settings> = {
+  id: "global-search",
+  name: "Global Search",
+  description: "Quick search for everything in SEQTA",
+  version: "1.0.0",
+  settings: settingsInstance.settings,
+  disableToggle: true,
+  styles: styles,
+
+  run: async (api) => {
+    const appRef = { current: null };
+
+    initVectorSearch();
+
+    if (api.settings.runIndexingOnLoad) {
+      setTimeout(async () => {
+        await runIndexing();
+      }, 2000);
+    }
+
+    const title = document.querySelector("#title");
+
+    if (title) {
+      mountSearchBar(title, api, appRef);
+    } else {
+      await waitForElm("#title", true, 100, 60);
+      mountSearchBar(document.querySelector("#title") as Element, api, appRef);
+    }
+
+    return () => {
+      cleanupSearchBar(appRef);
+    };
+  },
+};
+
+export default globalSearchPlugin;

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

@@ -0,0 +1,56 @@
+import renderSvelte from "@/interface/main";
+import SearchBar from "../components/SearchBar.svelte";
+import { unmount } from "svelte";
+import { VectorWorkerManager } from "../indexing/worker/vectorWorkerManager";
+
+export function mountSearchBar(
+  titleElement: Element,
+  api: any,
+  appRef: { current: any }
+) {
+  if (titleElement.querySelector(".search-trigger")) {
+    return;
+  }
+
+  const searchButton = document.createElement("div");
+  searchButton.className = "search-trigger";
+  searchButton.innerHTML = /* html */ `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    </svg>
+    <p>Quick search...</p>
+    <span style="margin-left: auto; display: flex; align-items: center; color: #777; font-size: 12px;">⌘K</span>
+  `;
+
+  titleElement.appendChild(searchButton);
+
+  const searchRoot = document.createElement("div");
+  document.body.appendChild(searchRoot);
+  const searchRootShadow = searchRoot.attachShadow({ mode: "open" });
+
+  searchButton.addEventListener("click", () => {
+    // @ts-ignore - Intentionally adding to window
+    window.setCommandPalleteOpen(true);
+  });
+
+  try {
+    appRef.current = renderSvelte(SearchBar, searchRootShadow, {
+      transparencyEffects: api.settings.transparencyEffects ? true : false,
+      showRecentFirst: api.settings.showRecentFirst,
+    });
+  } catch (error) {
+    console.error("Error rendering Svelte component:", error);
+  }
+}
+
+export function cleanupSearchBar(appRef: { current: any }) {
+  const searchButton = document.querySelector(".search-trigger");
+  const searchRoot = document.querySelector(".global-search-root");
+  if (searchButton) searchButton.remove();
+  if (searchRoot) searchRoot.remove();
+
+  // Clean up workers
+  VectorWorkerManager.getInstance().terminate();
+  unmount(appRef.current);
+}

src/plugins/built-in/globalSearch/src/core/styles.css

@@ -0,0 +1,58 @@
+.search-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  margin-left: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-right: auto !important;
+  padding: 3px 12px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(4px);
+  user-select: none;
+
+  svg {
+    opacity: 0.8;
+  }
+
+  p {
+    font-size: 14px;
+    margin-left: 8px;
+    margin-right: 48px;
+    height: 100%;
+    margin-bottom: 0;
+    line-height: 32px;
+    font-weight: 400;
+  }
+}
+
+/* Light mode styles */
+.search-trigger {
+  background-color: rgba(248, 250, 252, 0.05) !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  color: #555 !important;
+
+  p {
+    color: #555 !important;
+  }
+
+  svg {
+    color: #555;
+  }
+}
+
+.dark .search-trigger {
+  background-color: rgba(0, 0, 0, 0.03) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  color: #aaa !important;
+
+  p {
+    color: #aaa !important;
+  }
+
+  svg {
+    color: #aaa;
+  }
+}

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

@@ -0,0 +1,28 @@
+import type { StaticCommandItem } from "./commands";
+import type { HydratedIndexItem } from "../indexing/types";
+
+export interface MatchIndices {
+  readonly 0: number;
+  readonly 1: number;
+}
+
+export interface FuseResultMatch {
+  key?: string;
+  value?: string;
+  indices: readonly MatchIndices[];
+}
+
+export interface CombinedResult {
+  id: string;
+  type: "command" | "dynamic";
+  score: number;
+  item: StaticCommandItem | HydratedIndexItem;
+  matches?: readonly FuseResultMatch[];
+}
+
+export interface FuseResult<T> {
+  item: T;
+  refIndex: number;
+  score?: number;
+  matches?: readonly FuseResultMatch[];
+}

src/plugins/built-in/globalSearch/src/indexing/actions.ts

@@ -0,0 +1,40 @@
+import type { IndexItem } from "./types";
+
+interface MessageMetadata {
+  messageId: number;
+  author: string;
+  senderId: number;
+  senderType: string;
+  timestamp: string;
+  hasAttachments: boolean;
+  attachmentCount: number;
+  read: boolean;
+}
+
+interface AssessmentMetadata {
+  assessmentId?: number;
+  messageId?: number;
+  subject?: string;
+  term?: string;
+  programmeId?: number;
+  metaclassId?: number;
+  timestamp: string;
+  isMessageBased?: boolean;
+  author?: string;
+}
+
+type ActionHandler<T = any> = (item: IndexItem & { metadata: T }) => void;
+
+export const actionMap: Record<string, ActionHandler<any>> = {
+  message: ((item: IndexItem & { metadata: MessageMetadata }) => {
+    window.location.hash = `#?page=/messages&id=${item.metadata.messageId}`;
+  }) as ActionHandler<any>,
+
+  assessment: ((item: IndexItem & { metadata: AssessmentMetadata }) => {
+    if (item.metadata.isMessageBased) {
+      window.location.hash = `#?page=/messages&id=${item.metadata.messageId}`;
+    } else {
+      window.location.hash = `#?page=/assessments&id=${item.metadata.assessmentId}`;
+    }
+  }) as ActionHandler<any>,
+};

src/plugins/built-in/globalSearch/src/indexing/db.ts

@@ -0,0 +1,202 @@
+const DB_NAME = "betterseqta-index";
+const META_STORE = "meta";
+const VERSION_KEY = "betterseqta-index-version";
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+// Get the current version from localStorage or start at 1
+function getCurrentVersion(): number {
+  const storedVersion = localStorage.getItem(VERSION_KEY);
+  return storedVersion ? parseInt(storedVersion, 10) : 1;
+}
+
+// Update the version in localStorage
+function updateVersion(version: number) {
+  localStorage.setItem(VERSION_KEY, version.toString());
+}
+
+function openDB(): Promise<IDBDatabase> {
+  if (dbPromise) return dbPromise;
+
+  const currentVersion = getCurrentVersion();
+
+  dbPromise = new Promise((resolve, reject) => {
+    let request: IDBOpenDBRequest;
+
+    try {
+      request = indexedDB.open(DB_NAME, currentVersion);
+    } catch (e) {
+      // If there's a version error, try to delete the database and start fresh
+      console.warn("Database version conflict, recreating database...");
+      indexedDB.deleteDatabase(DB_NAME);
+      localStorage.removeItem(VERSION_KEY);
+      request = indexedDB.open(DB_NAME, 1);
+      updateVersion(1);
+    }
+
+    request.onupgradeneeded = (event) => {
+      const db = request.result;
+      const existingStores = Array.from(db.objectStoreNames);
+
+      // Always ensure META_STORE exists
+      if (!existingStores.includes(META_STORE)) {
+        db.createObjectStore(META_STORE);
+      }
+
+      // Update version in localStorage to match the database
+      updateVersion(event.newVersion || 1);
+    };
+
+    request.onsuccess = () => resolve(request.result);
+
+    request.onerror = () => {
+      console.error("Error opening database:", request.error);
+      // If there's an error, try to recover by deleting and recreating
+      indexedDB.deleteDatabase(DB_NAME);
+      localStorage.removeItem(VERSION_KEY);
+      reject(request.error);
+    };
+  });
+
+  return dbPromise;
+}
+
+async function getStore(store: string, mode: IDBTransactionMode = "readonly") {
+  const db = await openDB();
+
+  // Create store dynamically if needed
+  if (!db.objectStoreNames.contains(store)) {
+    db.close();
+    await upgradeDB(store);
+    return getStore(store, mode);
+  }
+
+  const tx = db.transaction(store, mode);
+  return tx.objectStore(store);
+}
+
+function upgradeDB(newStore: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const currentVersion = getCurrentVersion();
+    const newVersion = currentVersion + 1;
+
+    // Close any existing connections
+    if (dbPromise) {
+      dbPromise.then((db) => db.close());
+      dbPromise = null;
+    }
+
+    const request = indexedDB.open(DB_NAME, newVersion);
+
+    request.onupgradeneeded = (event) => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(newStore)) {
+        db.createObjectStore(newStore);
+      }
+      // Update version in localStorage
+      updateVersion(event.newVersion || newVersion);
+    };
+
+    request.onsuccess = () => {
+      dbPromise = Promise.resolve(request.result);
+      resolve();
+    };
+
+    request.onerror = () => {
+      console.error("Error upgrading database:", request.error);
+      reject(request.error);
+    };
+  });
+}
+
+export async function getAll(store: string): Promise<any[]> {
+  try {
+    const s = await getStore(store);
+    return new Promise((resolve, reject) => {
+      const req = s.getAll();
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  } catch (error) {
+    console.error(`Error in getAll for store ${store}:`, error);
+    return [];
+  }
+}
+
+export async function get(store: string, key: string): Promise<any> {
+  try {
+    const s = await getStore(store);
+    return new Promise((resolve, reject) => {
+      const req = s.get(key);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  } catch (error) {
+    console.error(`Error in get for store ${store}, key ${key}:`, error);
+    return null;
+  }
+}
+
+export async function put(
+  store: string,
+  value: any,
+  key?: string,
+): Promise<void> {
+  try {
+    const s = await getStore(store, "readwrite");
+    return new Promise((resolve, reject) => {
+      const req = key ? s.put(value, key) : s.put(value);
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+  } catch (error) {
+    console.error(`Error in put for store ${store}:`, error);
+    throw error;
+  }
+}
+
+export async function remove(store: string, key: string): Promise<void> {
+  try {
+    const s = await getStore(store, "readwrite");
+    return new Promise((resolve, reject) => {
+      const req = s.delete(key);
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+  } catch (error) {
+    console.error(`Error in remove for store ${store}, key ${key}:`, error);
+    throw error;
+  }
+}
+
+export async function clear(store: string): Promise<void> {
+  try {
+    const s = await getStore(store, "readwrite");
+    return new Promise((resolve, reject) => {
+      const req = s.clear();
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+  } catch (error) {
+    console.error(`Error in clear for store ${store}:`, error);
+    throw error;
+  }
+}
+
+// Helper function to reset the database if needed
+export async function resetDatabase(): Promise<void> {
+  if (dbPromise) {
+    const db = await dbPromise;
+    db.close();
+    dbPromise = null;
+  }
+
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.deleteDatabase(DB_NAME);
+    req.onsuccess = () => {
+      localStorage.removeItem(VERSION_KEY);
+      resolve();
+    };
+    req.onerror = () => reject(req.error);
+  });
+}

src/plugins/built-in/globalSearch/src/indexing/indexer.ts

@@ -0,0 +1,284 @@
+import { clear, getAll, put, remove } from "./db";
+import { jobs } from "./jobs";
+import { renderComponentMap } from "./renderComponents";
+import type { HydratedIndexItem, IndexItem, Job, JobContext } from "./types";
+import { VectorWorkerManager } from "./worker/vectorWorkerManager";
+
+const META_STORE = "meta";
+const LOCK_KEY = "bsq-indexer-lock";
+const HEARTBEAT_INTERVAL = 10000;
+const LOCK_TIMEOUT = 20000;
+
+let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
+
+function shouldRun(job: Job, lastRun?: number): boolean {
+  const now = Date.now();
+
+  if (job.frequency === "pageLoad") return true;
+  if (!lastRun) return true;
+
+  if (job.frequency.type === "interval") {
+    return now - lastRun >= job.frequency.ms;
+  }
+
+  if (job.frequency.type === "expiry") {
+    return now - lastRun >= job.frequency.afterMs;
+  }
+
+  return false;
+}
+
+function getLastRunMeta(jobId: string): Promise<number | undefined> {
+  return getAll(META_STORE).then((metaItems) => {
+    const match = metaItems.find((m: any) => m.jobId === jobId);
+    return match?.lastRun;
+  });
+}
+
+async function updateLastRunMeta(jobId: string): Promise<void> {
+  await put(META_STORE, { jobId, lastRun: Date.now() }, jobId);
+}
+
+function shouldIndex(): boolean {
+  const last = parseInt(localStorage.getItem(LOCK_KEY) || "0", 10);
+  return isNaN(last) || Date.now() - last > LOCK_TIMEOUT;
+}
+
+function startHeartbeat() {
+  localStorage.setItem(LOCK_KEY, `${Date.now()}`);
+  heartbeatTimer = setInterval(() => {
+    localStorage.setItem(LOCK_KEY, `${Date.now()}`);
+  }, HEARTBEAT_INTERVAL);
+}
+
+function stopHeartbeat() {
+  if (heartbeatTimer) clearInterval(heartbeatTimer);
+  localStorage.removeItem(LOCK_KEY);
+}
+
+function dispatchProgress(completed: number, total: number, indexing: boolean, status?: string, detail?: string) {
+  const event = new CustomEvent("indexing-progress", {
+    detail: { completed, total, indexing, status, detail },
+  });
+  window.dispatchEvent(event);
+}
+
+export async function loadAllStoredItems(): Promise<HydratedIndexItem[]> {
+  const all: HydratedIndexItem[] = [];
+  const jobIds = Object.keys(jobs);
+
+  for (const jobId of jobIds) {
+      try {
+          const items = await getAll(jobId) as IndexItem[];
+          const job = jobs[jobId];
+          const renderComponent = renderComponentMap[job.renderComponentId];
+
+          if (!renderComponent) {
+              console.warn(`Render component not found for job ${jobId} (ID: ${job.renderComponentId})`);
+          }
+
+          for (const item of items) {
+              // Ensure item has all required fields before pushing
+              if (item && item.id && item.text && item.category && item.actionId && job.renderComponentId) {
+                   all.push({
+                      ...item,
+                      renderComponent: renderComponent || undefined, // Assign undefined if not found
+                  });
+              } else {
+                   console.warn(`Skipping invalid item from job ${jobId}:`, item);
+              }
+          }
+      } catch (error) {
+          console.error(`Error loading items for job ${jobId}:`, error);
+      }
+  }
+  console.debug(`[Indexer] Loaded ${all.length} items from non-vector storage.`);
+  return all;
+}
+
+export async function runIndexing(): Promise<void> {
+  if (!shouldIndex()) {
+    console.debug(
+      "%c[Indexer] Skipping indexing (another tab has the lock)",
+      "color: gray",
+    );
+    return;
+  }
+
+  startHeartbeat();
+  console.debug("%c[Indexer] Starting indexing...", "color: green");
+
+  const jobIds = Object.keys(jobs);
+  let completedJobs = 0;
+  // Add an extra step for vectorization
+  const totalSteps = jobIds.length + 1;
+  dispatchProgress(completedJobs, totalSteps, true, "Starting jobs");
+
+  const allItemsFromJobs: HydratedIndexItem[] = [];
+
+  // --- Step 1: Run Fetching/Storing Jobs (Main Thread) ---
+  for (const jobId of jobIds) {
+    dispatchProgress(completedJobs, totalSteps, true, `Running job: ${jobs[jobId].label}`);
+    const job = jobs[jobId];
+    const lastRun = await getLastRunMeta(jobId);
+
+    if (!shouldRun(job, lastRun)) {
+      console.debug(
+        `%c[Indexer] Skipping job "${jobId}" (not due)`,
+        "color: gray",
+      );
+      completedJobs++;
+      dispatchProgress(completedJobs, totalSteps, true, `Skipped job: ${job.label}`);
+      continue;
+    }
+
+    // These DB operations happen on the main thread (acceptable per request)
+    const getStoredItems = async () => await getAll(jobId);
+    const setStoredItems = async (items: IndexItem[]) => {
+      await clear(jobId);
+      // Add validation before putting
+      const validItems = items.filter(i => i && i.id);
+      if (validItems.length !== items.length) {
+          console.warn(`[Indexer Job ${jobId}] Filtered out ${items.length - validItems.length} invalid items before storing.`);
+      }
+      await Promise.all(validItems.map((i) => put(jobId, i, i.id)));
+    };
+    const addItem = async (item: IndexItem) => {
+      if (item && item.id) { // Add validation
+          await put(jobId, item, item.id);
+      } else {
+          console.warn(`[Indexer Job ${jobId}] Attempted to add invalid item:`, item);
+      }
+    };
+    const removeItem = async (id: string) => {
+      await remove(jobId, id);
+    };
+
+    const ctx: JobContext = {
+      getStoredItems,
+      setStoredItems,
+      addItem,
+      removeItem,
+    };
+
+    console.debug(`%c[Indexer] Running job "${jobId}"...`, "color: #4ea1ff");
+
+    try {
+      const newItemsRaw = await job.run(ctx);
+      const stored = await getStoredItems();
+
+      let merged = mergeItems(stored, newItemsRaw);
+      if (job.purge) merged = job.purge(merged);
+
+      await setStoredItems(merged); // Store merged non-vector data
+      await updateLastRunMeta(jobId);
+
+      // Hydrate items for vector processing
+      const renderComponent = renderComponentMap[job.renderComponentId];
+      if (!renderComponent) {
+          console.warn(`Render component not found for job ${jobId} (ID: ${job.renderComponentId}) during hydration`);
+      }
+      const hydratedItems = merged
+          .filter(item => item && item.id && item.text && item.category && item.actionId && job.renderComponentId) // Filter invalid before hydrating
+          .map((item) => ({
+            ...item,
+            renderComponent: renderComponent || undefined, // Assign undefined if not found
+       }));
+
+       if (hydratedItems.length !== merged.length) {
+            console.warn(`[Indexer Job ${jobId}] Filtered out ${merged.length - hydratedItems.length} invalid items during hydration.`);
+       }
+
+      allItemsFromJobs.push(...hydratedItems);
+
+      console.debug(
+        `%c[Indexer] ✅ ${job.label}: ${newItemsRaw.length} new items fetched, ${merged.length} total stored (non-vector).`,
+        "color: #00c46f",
+      );
+    } catch (err) {
+      console.debug(`%c[Indexer] ❌ ${job.label} failed:`, "color: red");
+      console.error(err);
+    }
+
+    completedJobs++;
+    dispatchProgress(completedJobs, totalSteps, true, `Finished job: ${job.label}`);
+  }
+
+  // --- Step 2: Delegate Vectorization to Worker (Off Main Thread) ---
+  if (allItemsFromJobs.length > 0) {
+    console.debug(
+      `%c[Indexer] Sending ${allItemsFromJobs.length} items to worker for vectorization...`,
+      "color: #4ea1ff",
+    );
+    dispatchProgress(completedJobs, totalSteps, true, "Starting vectorization");
+
+    try {
+      const workerManager = VectorWorkerManager.getInstance();
+      // Pass a progress callback to the worker manager
+      await workerManager.processItems(allItemsFromJobs, (progress) => {
+          // Update overall progress based on worker feedback
+          let detailMessage = progress.message || '';
+          if (progress.status === 'processing' && progress.total && progress.processed !== undefined) {
+              detailMessage = `Vectorizing: ${progress.processed} / ${progress.total}`;
+              // You could potentially update the 'completed' count more granularly here
+              // For simplicity, we'll just update the detail message
+          } else if (progress.status === 'complete') {
+              detailMessage = "Vectorization complete";
+              // Mark the vectorization step as complete
+              dispatchProgress(totalSteps, totalSteps, true, "Vectorization finished");
+          } else if (progress.status === 'error') {
+              detailMessage = `Vectorization error: ${progress.message}`;
+               dispatchProgress(completedJobs, totalSteps, true, "Vectorization failed", detailMessage); // Show error
+          } else if (progress.status === 'started') {
+              detailMessage = `Vectorization started for ${progress.total} items`;
+          } else if (progress.status === 'cancelled') {
+               detailMessage = `Vectorization cancelled: ${progress.message}`;
+               dispatchProgress(completedJobs, totalSteps, true, "Vectorization cancelled", detailMessage);
+          }
+
+          // Update the status detail
+          dispatchProgress(completedJobs, totalSteps, true, "Vectorization in progress", detailMessage);
+
+           // When worker signals completion of *its* task, mark the final step complete
+           if (progress.status === 'complete') {
+               completedJobs++; // Increment completion count *after* vectorization finishes
+               dispatchProgress(completedJobs, totalSteps, false, "Indexing finished"); // Set indexing to false
+           } else if (progress.status === 'error' || progress.status === 'cancelled') {
+               // Don't increment completed count on failure/cancel, just stop indexing indicator
+                dispatchProgress(completedJobs, totalSteps, false, "Indexing stopped due to error/cancel");
+           }
+      });
+      console.debug("%c[Indexer] Vectorization task sent to worker.", "color: green");
+      // Note: runIndexing might return *before* vectorization is complete now.
+      // The progress updates will signal the true end state.
+    } catch (error) {
+        console.error(`%c[Indexer] ❌ Failed to send items to vector worker:`, "color: red", error);
+        dispatchProgress(completedJobs, totalSteps, false, "Vectorization failed", String(error)); // Stop indexing indicator
+    }
+
+  } else {
+    console.debug("%c[Indexer] No items to send for vectorization.", "color: gray");
+    // If no vectorization needed, indexing is done here.
+    completedJobs++; // Count the "skipped" vectorization step
+    dispatchProgress(completedJobs, totalSteps, false, "Indexing finished (no vectorization needed)");
+  }
+
+
+  // Stop heartbeat ONLY when all jobs *and* the vectorization dispatch are done.
+  // The actual *completion* of vectorization is now asynchronous.
+  stopHeartbeat();
+  // Final progress update might be handled by the worker callback now.
+  // dispatchProgress(completedJobs, totalSteps, false); // This might be premature
+}
+
+function mergeItems(existing: IndexItem[], incoming: IndexItem[]): IndexItem[] {
+  const map = new Map<string, IndexItem>();
+  // Prioritize incoming items if IDs clash
+  for (const item of existing) {
+       if (item && item.id) map.set(item.id, item);
+  }
+  for (const item of incoming) {
+      if (item && item.id) map.set(item.id, item);
+  }
+  return Array.from(map.values());
+}

src/plugins/built-in/globalSearch/src/indexing/jobs.ts

@@ -0,0 +1,351 @@
+import type { Job } from "./types";
+import type { IndexItem } from "./types";
+
+interface MessageNotification {
+  notificationID: number;
+  type: "message";
+  message: {
+    subtitle: string;
+    messageID: number;
+    title: string;
+  };
+  timestamp: string;
+}
+
+interface AssessmentNotification {
+  notificationID: number;
+  type: "coneqtassessments";
+  coneqtAssessments: {
+    programmeID: number;
+    metaclassID: number;
+    subtitle: string;
+    term: string;
+    title: string;
+    assessmentID: number;
+    subjectCode: string;
+  };
+  timestamp: string;
+}
+
+type Notification = MessageNotification | AssessmentNotification;
+
+interface MessageListResponse {
+  payload: {
+    hasMore: boolean;
+    messages: {
+      date: string;
+      attachments: boolean;
+      attachmentCount: number;
+      read: number;
+      sender: string;
+      sender_id: number;
+      sender_type: string;
+      subject: string;
+      id: number;
+      participants: Array<{
+        name: string;
+        photo: string;
+        type: string;
+      }>;
+    }[];
+    ts: string;
+  };
+  status: string;
+}
+
+interface MessageContentResponse {
+  payload: {
+    date: string;
+    blind: boolean;
+    read: boolean;
+    subject: string;
+    sender_type: string;
+    sender_id: number;
+    starred: boolean;
+    contents: string;
+    sender: string;
+    files: any[];
+    id: number;
+    participants: Array<{
+      read: number;
+      name: string;
+      photo: string;
+      id: number;
+      type: string;
+    }>;
+  };
+  status: string;
+}
+
+// Helper to strip HTML tags from text
+function stripHtmlTags(html: string): string {
+  return html.replace(/<[^>]*>/g, "");
+}
+
+// Helper to fetch messages with pagination
+async function fetchMessages(
+  offset: number = 0,
+  limit: number = 100,
+): Promise<MessageListResponse> {
+  const response = await fetch(
+    `${location.origin}/seqta/student/load/message`,
+    {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      body: JSON.stringify({
+        searchValue: "",
+        sortBy: "date",
+        sortOrder: "desc",
+        action: "list",
+        label: "inbox",
+        offset,
+        limit,
+        datetimeUntil: null,
+      }),
+    },
+  );
+
+  return await response.json();
+}
+
+// Helper to fetch message content
+async function fetchMessageContent(
+  messageId: number,
+): Promise<MessageContentResponse> {
+  const response = await fetch(
+    `${location.origin}/seqta/student/load/message`,
+    {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      body: JSON.stringify({
+        action: "message",
+        id: messageId,
+      }),
+    },
+  );
+
+  return await response.json();
+}
+
+// Helper to fetch notifications
+async function fetchNotifications(): Promise<Notification[]> {
+  const response = await fetch(`${location.origin}/seqta/student/heartbeat?`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    body: JSON.stringify({
+      timestamp: "1970-01-01 00:00:00.0",
+      hash: "#?page=/notifications",
+    }),
+  });
+
+  const json = await response.json();
+  return json.notifications ?? [];
+}
+
+export const jobs: Record<string, Job> = {
+  messages: {
+    id: "messages",
+    label: "Messages",
+    renderComponentId: "message",
+    frequency: { type: "expiry", afterMs: 1000 * 60 * 5 }, // every 5 minutes
+
+    run: async (ctx) => {
+      // Get existing items first
+      const existing = await ctx.getStoredItems();
+      const existingIds = new Set(existing.map((i) => i.id));
+      const newItems: IndexItem[] = [];
+      let offset = 0;
+      const limit = 100;
+      let hasMore = true;
+      let consecutiveExisting = 0;
+
+      // Fetch all messages with pagination
+      while (hasMore) {
+        try {
+          const response = await fetchMessages(offset, limit);
+
+          if (response.status !== "200") {
+            console.error("Failed to fetch messages:", response);
+            break;
+          }
+
+          const messages = response.payload.messages;
+          hasMore = response.payload.hasMore;
+
+          // Process each message
+          for (const message of messages) {
+            const id = message.id.toString();
+
+            // Skip if we already have this message
+            if (existingIds.has(id)) {
+              consecutiveExisting++;
+              // If we've found 20 consecutive existing messages, assume we've caught up
+              if (consecutiveExisting >= 20) {
+                console.debug(
+                  "[Messages Job] Found 20 consecutive existing messages, stopping fetch",
+                );
+                hasMore = false;
+                break;
+              }
+              continue;
+            }
+
+            // Reset consecutive counter when we find a new message
+            consecutiveExisting = 0;
+
+            try {
+              // Fetch message content
+              const contentResponse = await fetchMessageContent(message.id);
+
+              if (contentResponse.status !== "200") {
+                console.error(
+                  "Failed to fetch message content:",
+                  contentResponse,
+                );
+                continue;
+              }
+
+              const content = stripHtmlTags(contentResponse.payload.contents);
+
+              newItems.push({
+                id,
+                text: message.subject,
+                category: "messages",
+                content: `From: ${message.sender}\n\n${content}`,
+                dateAdded: new Date(message.date).getTime(),
+                metadata: {
+                  messageId: message.id,
+                  author: message.sender,
+                  senderId: message.sender_id,
+                  senderType: message.sender_type,
+                  timestamp: message.date,
+                  hasAttachments: message.attachments,
+                  attachmentCount: message.attachmentCount,
+                  read: message.read === 1,
+                },
+                actionId: "message",
+                renderComponentId: "message",
+              });
+
+              // Add to existingIds as we process to prevent duplicates in the same run
+              existingIds.add(id);
+            } catch (error) {
+              console.error("Error fetching message content:", error);
+              continue;
+            }
+          }
+
+          offset += limit;
+        } catch (error) {
+          console.error("Error fetching messages:", error);
+          break;
+        }
+
+        // Small delay to avoid overwhelming the server
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+
+      console.debug(`[Messages Job] Found ${newItems.length} new messages`);
+      return newItems;
+    },
+
+    purge: (items) => {
+      // Keep messages from the last 30 days
+      const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;
+      return items.filter((i) => i.dateAdded >= cutoff);
+    },
+  },
+
+  assessments: {
+    id: "assessments",
+    label: "Assessments",
+    renderComponentId: "assessment",
+    frequency: { type: "expiry", afterMs: 1000 * 60 * 15 }, // every 15 minutes
+
+    run: async (ctx) => {
+      const notifications = await fetchNotifications();
+      const assessmentNotifications = notifications.filter(
+        (n): n is MessageNotification | AssessmentNotification =>
+          n.type === "coneqtassessments" ||
+          (n.type === "message" &&
+            n.message.title.toLowerCase().includes("assessment")),
+      );
+
+      const existing = await ctx.getStoredItems();
+      const existingIds = new Set(existing.map((i) => i.id));
+      const newItems: IndexItem[] = [];
+
+      for (const notification of assessmentNotifications) {
+        const id = notification.notificationID.toString();
+        if (existingIds.has(id)) continue;
+
+        if (notification.type === "coneqtassessments") {
+          const { coneqtAssessments: assessment } = notification;
+          newItems.push({
+            id,
+            text: assessment.title,
+            category: "assessments",
+            content: assessment.subtitle,
+            dateAdded: new Date(notification.timestamp).getTime(),
+            metadata: {
+              assessmentId: assessment.assessmentID,
+              subject: assessment.subjectCode,
+              term: assessment.term,
+              programmeId: assessment.programmeID,
+              metaclassId: assessment.metaclassID,
+              timestamp: notification.timestamp,
+            },
+            actionId: "assessment",
+            renderComponentId: "assessment",
+          });
+        } else {
+          // Handle message-based assessments
+          const { message } = notification;
+          newItems.push({
+            id,
+            text: message.title,
+            category: "assessments",
+            content: `From: ${message.subtitle}`,
+            dateAdded: new Date(notification.timestamp).getTime(),
+            metadata: {
+              messageId: message.messageID,
+              author: message.subtitle,
+              timestamp: notification.timestamp,
+              isMessageBased: true,
+            },
+            actionId: "assessment",
+            renderComponentId: "assessment",
+          });
+        }
+      }
+
+      return newItems;
+    },
+
+    purge: (items) => {
+      // Keep assessments from the current year
+      const date = new Date();
+      date.setMonth(0); // January
+      date.setDate(1);
+      date.setHours(0);
+      date.setMinutes(0);
+      date.setSeconds(0);
+      const cutoff = date.getTime();
+      return items.filter((i) => i.dateAdded >= cutoff);
+    },
+  },
+
+  // We can add more job types here as needed:
+  // - notices
+  // - timetable changes
+  // - homework
+  // etc.
+};

src/plugins/built-in/globalSearch/src/indexing/renderComponents.ts

@@ -0,0 +1,10 @@
+import type { SvelteComponent } from "svelte";
+import AssessmentComponent from "../components/AssessmentItem.svelte";
+// import other components as needed
+
+export const renderComponentMap: Record<string, typeof SvelteComponent> = {
+  assessment: AssessmentComponent as unknown as typeof SvelteComponent,
+  // messages: MessageComponent,
+  // subject: SubjectComponent,
+  // etc...
+};

src/plugins/built-in/globalSearch/src/indexing/types.ts

@@ -0,0 +1,37 @@
+import type { SvelteComponent } from "svelte";
+
+export interface IndexItem {
+  id: string;
+  text: string;
+  category: string;
+  content: string;
+  dateAdded: number;
+  metadata: Record<string, any>;
+  actionId: string;
+  renderComponentId: string;
+}
+
+export interface HydratedIndexItem extends IndexItem {
+  renderComponent: typeof SvelteComponent;
+}
+
+export type Frequency =
+  | "pageLoad"
+  | { type: "interval"; ms: number }
+  | { type: "expiry"; afterMs: number };
+
+export interface JobContext {
+  getStoredItems: () => Promise<IndexItem[]>;
+  setStoredItems: (items: IndexItem[]) => Promise<void>;
+  addItem: (item: IndexItem) => Promise<void>;
+  removeItem: (id: string) => Promise<void>;
+}
+
+export interface Job {
+  id: string;
+  label: string;
+  frequency: Frequency;
+  renderComponentId: string;
+  run: (ctx: JobContext) => Promise<IndexItem[]>;
+  purge?: (items: IndexItem[]) => IndexItem[];
+}

src/plugins/built-in/globalSearch/src/indexing/worker/vectorWorker.ts

@@ -0,0 +1,419 @@
+import {
+  EmbeddingIndex,
+  getEmbedding,
+  initializeModel,
+} from "client-vector-search";
+import type { HydratedIndexItem } from "../types";
+
+let vectorIndex: EmbeddingIndex | null = null;
+let isInitialized = false;
+let currentAbortController: AbortController | null = null;
+
+async function initWorker() {
+  if (isInitialized) {
+    console.debug("Vector worker already initialized.");
+    return;
+  }
+  console.debug("Initializing vector worker...");
+  try {
+    await initializeModel();
+    vectorIndex = new EmbeddingIndex([]);
+
+    const stored = await vectorIndex.getAllObjectsFromIndexedDB();
+    if (stored.length > 0) {
+      stored.forEach((item) => vectorIndex!.add(item));
+      console.debug(
+        `Vector index loaded ${stored.length} items from IndexedDB.`,
+      );
+    } else {
+      console.debug("No existing vector index found in IndexedDB.");
+    }
+    isInitialized = true;
+    console.debug("Vector worker initialized successfully.");
+  } catch (e) {
+    console.error("Failed to initialize vector worker:", e);
+    // Set as initialized even on error to prevent retries, but index will be null
+    isInitialized = true;
+    vectorIndex = null; // Ensure index is null on error
+  }
+}
+
+async function vectorizeItem(
+  item: HydratedIndexItem,
+): Promise<(HydratedIndexItem & { embedding: number[] }) | null> {
+  // Simplified for brevity - assumes embedding function doesn't need cancellation signal
+  try {
+    const textToEmbed = [
+      item.text,
+      item.content,
+      item.category,
+      item.metadata?.author,
+      item.metadata?.subject,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const embedding = await getEmbedding(textToEmbed);
+    return { ...item, embedding };
+  } catch (error) {
+    console.error(`Error vectorizing item ${item.id}:`, error);
+    return null; // Return null if vectorization fails for an item
+  }
+}
+
+async function processItems(items: HydratedIndexItem[], signal: AbortSignal) {
+  console.debug("Worker received process request.");
+  if (!vectorIndex) {
+    console.warn(
+      "Processing requested but vector index not ready. Attempting init.",
+    );
+    await initWorker(); // Attempt initialization if not ready
+    if (!vectorIndex) {
+      // Check again after attempt
+      self.postMessage({
+        type: "progress",
+        data: {
+          status: "error",
+          message:
+            "Vector index not available for processing after init attempt.",
+        },
+      });
+      return;
+    }
+  }
+
+  // Find items we haven't processed yet by checking against the index instance
+  const unprocessedItems = items.filter((item) => {
+    if (signal.aborted) return false; // Check cancellation during filtering
+    try {
+      // Check if the item ID already exists in the index (loaded or added)
+      return !vectorIndex!.get({ id: item.id });
+    } catch (e) {
+      // If get throws (e.g., item not found), it means it's unprocessed
+      return true;
+    }
+  });
+
+  if (signal.aborted) {
+    console.debug("Processing cancelled before starting.");
+    self.postMessage({
+      type: "progress",
+      data: {
+        status: "cancelled",
+        message: "Processing cancelled before start",
+      },
+    });
+    return;
+  }
+
+  if (unprocessedItems.length === 0) {
+    console.debug("No new items to process.");
+    self.postMessage({
+      type: "progress",
+      data: { status: "complete", message: "No new items to process" },
+    });
+    return;
+  }
+
+  console.debug(`Starting processing of ${unprocessedItems.length} items.`);
+  self.postMessage({
+    type: "progress",
+    data: {
+      status: "started",
+      total: unprocessedItems.length,
+      processed: 0,
+    },
+  });
+
+  const BATCH_SIZE = 5;
+  let processedCount = 0;
+  for (let i = 0; i < unprocessedItems.length; i += BATCH_SIZE) {
+    if (signal.aborted) {
+      console.debug("Processing cancelled during batching.");
+      self.postMessage({
+        type: "progress",
+        data: {
+          status: "cancelled",
+          message: "Processing cancelled during batching",
+        },
+      });
+      return;
+    }
+
+    const batch = unprocessedItems.slice(i, i + BATCH_SIZE);
+    // Vectorize batch
+    const vectorizationResults = await Promise.all(batch.map(vectorizeItem));
+    const successfullyVectorized = vectorizationResults.filter(
+      (result) => result !== null,
+    ) as (HydratedIndexItem & { embedding: number[] })[];
+
+    if (signal.aborted) {
+      console.debug("Processing cancelled after vectorization batch.");
+      self.postMessage({
+        type: "progress",
+        data: {
+          status: "cancelled",
+          message: "Processing cancelled after vectorization",
+        },
+      });
+      return;
+    }
+
+    // Add successfully vectorized items to index
+    if (successfullyVectorized.length > 0) {
+      try {
+        successfullyVectorized.forEach((item) => vectorIndex!.add(item));
+      } catch (e) {
+        console.error("Error adding batch to index:", e);
+        self.postMessage({
+          type: "progress",
+          data: { status: "error", message: `Error adding to index: ${e}` },
+        });
+        // Decide whether to continue or stop on error
+        // return; // Example: Stop processing if adding fails
+      }
+    }
+
+    if (signal.aborted) {
+      console.debug("Processing cancelled before saving batch.");
+      self.postMessage({
+        type: "progress",
+        data: {
+          status: "cancelled",
+          message: "Processing cancelled before saving",
+        },
+      });
+      return;
+    }
+
+    // Save index after processing the batch
+    try {
+      await vectorIndex!.saveIndex("indexedDB");
+      console.debug(`Saved index after processing batch ${i / BATCH_SIZE + 1}`);
+    } catch (e) {
+      console.error("Error saving index batch:", e);
+      self.postMessage({
+        type: "progress",
+        data: { status: "error", message: `Error saving index batch: ${e}` },
+      });
+      // Continue processing next batch even if saving failed? Or stop?
+      // return; // Example: Stop if saving fails
+    }
+
+    processedCount = Math.min(i + BATCH_SIZE, unprocessedItems.length);
+
+    // Report progress
+    self.postMessage({
+      type: "progress",
+      data: {
+        status: "processing",
+        total: unprocessedItems.length,
+        processed: processedCount,
+      },
+    });
+
+    // Yield control briefly to allow other messages (like cancellation) to be processed
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+
+  if (!signal.aborted) {
+    console.debug("Processing completed successfully.");
+    self.postMessage({
+      type: "progress",
+      data: { status: "complete", message: "All items processed successfully" },
+    });
+  } else {
+    console.debug("Processing completed, but was cancelled.");
+    // No need to send 'cancelled' again if already sent during batching
+    // self.postMessage({ type: 'progress', data: { status: 'cancelled', message: 'Processing finished but was cancelled' }});
+  }
+}
+
+async function search(
+  query: string,
+  topK: number,
+  signal: AbortSignal,
+  messageId: string,
+) {
+  console.debug(
+    `Worker received search request (ID: ${messageId}): "${query}"`,
+  );
+  if (!vectorIndex) {
+    console.warn(
+      `Search (ID: ${messageId}) requested but vector index not ready. Attempting init.`,
+    );
+    await initWorker(); // Attempt initialization
+    // Re-check after waiting/init attempt
+    if (!vectorIndex) {
+      console.error(
+        `Search (ID: ${messageId}) failed: Vector index unavailable after init attempt.`,
+      );
+      self.postMessage({
+        type: "searchError",
+        data: { messageId, error: "Vector index not available." },
+      });
+      return;
+    }
+    console.debug(
+      `Vector index ready after init for search (ID: ${messageId}).`,
+    );
+  }
+
+  if (signal.aborted) {
+    console.debug(`Search (ID: ${messageId}) cancelled before starting.`);
+    self.postMessage({ type: "searchCancelled", data: { messageId } });
+    return;
+  }
+
+  try {
+    console.debug(`Getting embedding for query (ID: ${messageId})...`);
+    const queryEmbedding = await getEmbedding(query);
+
+    if (signal.aborted) {
+      console.debug(`Search (ID: ${messageId}) cancelled after embedding.`);
+      self.postMessage({ type: "searchCancelled", data: { messageId } });
+      return;
+    }
+
+    console.debug(`Performing vector search (ID: ${messageId})...`);
+    // Await the search and let TypeScript infer the type
+    const results = await vectorIndex!.search(queryEmbedding, {
+      topK,
+      useStorage: "indexedDB", // Ensure we search the stored index
+    });
+
+    console.debug(
+      `Vector search (ID: ${messageId}) completed with ${results.length} results.`,
+    );
+
+    if (signal.aborted) {
+      console.debug(
+        `Search (ID: ${messageId}) cancelled after search completed, discarding results.`,
+      );
+      self.postMessage({ type: "searchCancelled", data: { messageId } });
+      return;
+    }
+
+    // Post results back to the main thread
+    self.postMessage({ type: "searchResults", data: { messageId, results } });
+  } catch (error) {
+    console.error(`Vector search error in worker (ID: ${messageId}):`, error);
+    // Ensure signal isn't checked *after* an error occurred before posting error message
+    if (!signal.aborted) {
+      // Only post error if not cancelled
+      self.postMessage({
+        type: "searchError",
+        data: {
+          messageId,
+          error: error instanceof Error ? error.message : String(error),
+        },
+      });
+    } else {
+      console.debug(
+        `Search (ID: ${messageId}) encountered error but was cancelled, suppressing error message.`,
+      );
+      self.postMessage({ type: "searchCancelled", data: { messageId } }); // Still notify of cancellation
+    }
+  }
+}
+
+// Handle messages from the main thread
+self.addEventListener("message", async (e) => {
+  // Make sure data and type exist
+  if (!e.data || !e.data.type) {
+    console.warn("Worker received message with no data or type.");
+    return;
+  }
+
+  const { type, data, messageId } = e.data; // messageId used for requests needing response/cancellation tracking
+
+  // Cancel previous long-running operation (process or search) if a new one starts
+  if (type === "process" || type === "search") {
+    if (currentAbortController) {
+      console.debug(
+        `Worker cancelling previous operation due to new '${type}' request.`,
+      );
+      currentAbortController.abort(`New '${type}' operation requested`);
+    }
+    currentAbortController = new AbortController();
+    console.debug(`Worker starting new '${type}' operation.`);
+  }
+
+  // Use the signal from the *current* controller for the task being started
+  const signal = currentAbortController?.signal;
+
+  switch (type) {
+    case "process":
+      if (signal && data?.items) {
+        await processItems(data.items, signal);
+      } else if (!signal) {
+        console.error(
+          "Process message received but no abort signal available.",
+        );
+      } else if (!data?.items) {
+        console.error("Process message received without 'items' data.");
+        self.postMessage({
+          type: "progress",
+          data: {
+            status: "error",
+            message: "Process command received without items.",
+          },
+        });
+      }
+      break;
+
+    case "search":
+      if (signal && messageId && typeof data?.query === "string") {
+        await search(data.query, data.topK ?? 10, signal, messageId);
+      } else {
+        const errorReason = !signal
+          ? "Missing signal"
+          : !messageId
+            ? "Missing messageId"
+            : "Missing or invalid query";
+        console.error(`Search message received invalid: ${errorReason}.`, {
+          data,
+          messageId,
+          signalExists: !!signal,
+        });
+        // Send an error back if messageId exists
+        if (messageId) {
+          self.postMessage({
+            type: "searchError",
+            data: { messageId, error: `Worker internal error: ${errorReason}` },
+          });
+        }
+      }
+      break;
+
+    case "init":
+      // Init should not be cancellable in the same way, it's foundational
+      // Check if already initialized before potentially running it again
+      if (!isInitialized) {
+        await initWorker();
+        self.postMessage({ type: "ready" }); // Signal ready *after* init attempt
+      } else {
+        console.debug("Received init message, but worker already initialized.");
+        self.postMessage({ type: "ready" }); // Signal ready anyway
+      }
+      break;
+
+    // No explicit 'cancel' case needed as new tasks auto-cancel previous ones
+
+    default:
+      console.warn("Unknown message type received by vector worker:", type);
+  }
+});
+
+// Initial check or trigger for initialization when the worker starts
+initWorker()
+  .then(() => {
+    self.postMessage({ type: "ready" });
+  })
+  .catch((err) => {
+    console.error("Initial worker initialization failed:", err);
+    // Still need to signal readiness, perhaps with an error state?
+    // Or rely on the first 'process' or 'search' to retry init.
+    // For now, just signal ready, but the index might be null.
+    self.postMessage({ type: "ready" });
+  });

src/plugins/built-in/globalSearch/src/indexing/worker/vectorWorkerManager.ts

@@ -0,0 +1,221 @@
+import type { HydratedIndexItem } from '../types';
+import vectorWorker from './vectorWorker.ts?inlineWorker';
+import type { SearchResult } from 'client-vector-search';
+
+export type ProgressCallback = (data: {
+  status: 'started' | 'processing' | 'complete' | 'error' | 'cancelled';
+  total?: number;
+  processed?: number;
+  message?: string;
+}) => void;
+
+export class VectorWorkerManager {
+  private static instance: VectorWorkerManager;
+  private worker: Worker | null = null;
+  private isInitialized = false;
+  private readyPromise: Promise<void> | null = null; // To await initialization
+  private progressCallback: ProgressCallback | null = null;
+  private searchPromises = new Map<string, { resolve: (value: SearchResult[]) => void, reject: (reason?: any) => void, timer: NodeJS.Timeout }>();
+  private debounceTimer: NodeJS.Timeout | null = null;
+  private lastSearchParams: { query: string; topK: number; resolve: (results: SearchResult[]) => void, reject: (reason?: any) => void } | null = null;
+
+
+  private constructor() {
+    // Start initialization immediately, but allow awaiting it
+    this.readyPromise = this.initWorker();
+  }
+
+  static getInstance(): VectorWorkerManager {
+    if (!VectorWorkerManager.instance) {
+      VectorWorkerManager.instance = new VectorWorkerManager();
+    }
+    return VectorWorkerManager.instance;
+  }
+
+  private async initWorker(): Promise<void> {
+    // If already initialized or initializing, return the existing promise
+    if (this.isInitialized) return Promise.resolve();
+    if (this.readyPromise) return this.readyPromise;
+
+    return new Promise<void>((resolve, reject) => {
+        // Create the worker
+        this.worker = vectorWorker();
+
+        const timeout = setTimeout(() => {
+            console.error('Vector worker initialization timed out');
+            this.worker?.terminate(); // Clean up worker if it exists
+            this.worker = null;
+            this.isInitialized = false; // Ensure state reflects failure
+            this.readyPromise = null; // Allow retrying init later
+            reject(new Error('Worker initialization timed out'));
+        }, 10000); // Increased timeout
+
+        // Set up message handling
+        this.worker!.addEventListener('message', (e) => {
+          const { type, data } = e.data;
+          console.debug("Message from vector worker:", type, data);
+
+          switch (type) {
+            case 'ready':
+              this.isInitialized = true;
+              clearTimeout(timeout);
+              console.debug('Vector worker initialized and ready.');
+              resolve(); // Resolve the init promise
+              break;
+
+            case 'progress':
+              if (this.progressCallback) {
+                this.progressCallback(data);
+              }
+              break;
+
+            case 'searchResults':
+              const searchInfo = this.searchPromises.get(data.messageId);
+              if (searchInfo) {
+                clearTimeout(searchInfo.timer); // Clear timeout on success
+                searchInfo.resolve(data.results);
+                this.searchPromises.delete(data.messageId);
+              } else {
+                console.warn('Received search results for unknown messageId:', data.messageId);
+              }
+              break;
+
+            case 'searchError':
+              const errorInfo = this.searchPromises.get(data.messageId);
+              if (errorInfo) {
+                clearTimeout(errorInfo.timer); // Clear timeout on error
+                errorInfo.reject(new Error(data.error));
+                this.searchPromises.delete(data.messageId);
+              } else {
+                console.warn('Received search error for unknown messageId:', data.messageId);
+              }
+              break;
+
+            case 'searchCancelled':
+              const cancelledInfo = this.searchPromises.get(data.messageId);
+              if (cancelledInfo) {
+                 clearTimeout(cancelledInfo.timer); // Clear timeout on cancel
+                 // Reject with a specific cancellation error or resolve with empty? Let's reject.
+                 cancelledInfo.reject(new Error('Search cancelled by worker'));
+                 this.searchPromises.delete(data.messageId);
+              } else {
+                console.debug('Received cancellation for unknown messageId:', data.messageId);
+              }
+              break;
+
+            default:
+              console.warn('Unknown message from worker:', type, data);
+          }
+        });
+
+        // Initialize the worker
+        this.worker!.postMessage({ type: 'init' });
+    });
+  }
+
+  // Ensures worker is ready before proceeding
+  private async ensureReady() {
+    if (!this.readyPromise) {
+        // If init wasn't called or failed, try again
+        console.warn("Worker not initialized, attempting init...");
+        this.readyPromise = this.initWorker();
+    }
+    await this.readyPromise;
+    if (!this.isInitialized || !this.worker) {
+        throw new Error("Vector Worker is not available after initialization attempt.");
+    }
+  }
+
+  async processItems(items: HydratedIndexItem[], onProgress?: ProgressCallback) {
+    await this.ensureReady(); // Wait for worker to be ready
+
+    this.progressCallback = onProgress || null;
+
+    // Cancel any ongoing search when starting processing
+    this.cancelAllSearches("Processing started");
+
+    console.debug(`Sending ${items.length} items to worker for processing.`);
+    this.worker!.postMessage({
+      type: 'process',
+      data: { items }
+    });
+  }
+
+  // Public search method
+  public async search(query: string, topK: number = 10): Promise<SearchResult[]> {
+    await this.ensureReady();
+
+    return new Promise((resolve, reject) => {
+      this.lastSearchParams = { query, topK, resolve, reject };
+
+      const messageId = crypto.randomUUID();
+      if (this.lastSearchParams && this.worker) {
+        const currentParams = this.lastSearchParams; // Capture current params
+        this.lastSearchParams = null; // Clear last params *before* posting
+        this.debounceTimer = null;
+
+        // Set a timeout for the search operation itself
+        const searchTimeout = 10000; // e.g., 10 seconds
+        const searchTimer = setTimeout(() => {
+            if (this.searchPromises.has(messageId)) {
+                console.error(`Search timed out for messageId: ${messageId}`);
+                currentParams.reject(new Error(`Search timed out after ${searchTimeout}ms`));
+                this.searchPromises.delete(messageId);
+            }
+        }, searchTimeout);
+
+
+        this.searchPromises.set(messageId, { resolve: currentParams.resolve, reject: currentParams.reject, timer: searchTimer });
+
+        console.debug(`Sending search request (ID: ${messageId}) to worker: "${currentParams.query}"`);
+        this.worker.postMessage({
+          type: "search",
+          data: { query: currentParams.query, topK: currentParams.topK },
+          messageId
+        });
+      } else if (this.lastSearchParams) {
+            // This case might happen if ensureReady failed but didn't throw
+            console.error("Worker unavailable when trying to send search request.");
+            this.lastSearchParams.reject(new Error("Worker unavailable for search"));
+            this.lastSearchParams = null;
+            this.debounceTimer = null;
+      }
+    });
+  }
+
+  // Method to cancel all pending/debounced searches
+  private cancelAllSearches(reason: string = "Cancelled") {
+     if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = null;
+        if (this.lastSearchParams) {
+            this.lastSearchParams.reject(new Error(`Search cancelled: ${reason}`));
+            this.lastSearchParams = null;
+        }
+     }
+     // We might also want to tell the worker to cancel its *current* search
+     // if it supports it, but this requires worker modification.
+     // For now, just reject pending promises in the manager.
+     for (const [messageId, promiseInfo] of this.searchPromises.entries()) {
+        clearTimeout(promiseInfo.timer);
+        promiseInfo.reject(new Error(`Search cancelled: ${reason}`));
+        this.searchPromises.delete(messageId);
+     }
+  }
+
+
+  terminate() {
+    console.debug("Terminating Vector Worker Manager...");
+    this.cancelAllSearches("Worker terminated"); // Cancel pending searches
+
+    if (this.worker) {
+      this.worker.terminate();
+      this.worker = null;
+    }
+    this.isInitialized = false;
+    this.readyPromise = null; // Reset init promise
+    this.progressCallback = null;
+    // Clear the static instance? Or assume app lifecycle handles this?
+    // VectorWorkerManager.instance = null; // Uncomment if needed
+  }
+}

src/plugins/built-in/globalSearch/src/search/searchUtils.ts

@@ -0,0 +1,215 @@
+import Fuse, { type FuseResult } from "fuse.js";
+import { getStaticCommands, type StaticCommandItem } from "../core/commands";
+import { getDynamicItems } from "../utils/dynamicItems";
+import type { CombinedResult } from "../core/types";
+import type { HydratedIndexItem } from "../indexing/types";
+import { searchVectors } from "./vector/vectorSearch";
+import type { VectorSearchResult } from "./vector/vectorTypes";
+
+export function createSearchIndexes() {
+  const commands = getStaticCommands();
+  const dynamicItems = getDynamicItems();
+
+  const commandOptions = {
+    keys: ["text", "category", "keywords"],
+    includeScore: true,
+    includeMatches: true,
+    threshold: 0.6,
+    minMatchCharLength: 1,
+    ignoreLocation: true,
+    useExtendedSearch: false,
+  };
+
+  const dynamicOptions = {
+    keys: [
+      "text",
+      "content",
+      "category",
+      "metadata.author",
+      "metadata.subject",
+    ],
+    includeScore: true,
+    includeMatches: true,
+    threshold: 0.6,
+    minMatchCharLength: 3,
+    distance: 50,
+    useExtendedSearch: false,
+  };
+
+  return {
+    commandsFuse: new Fuse(commands, commandOptions) as Fuse<StaticCommandItem>,
+    dynamicContentFuse: new Fuse(
+      dynamicItems,
+      dynamicOptions,
+    ) as Fuse<HydratedIndexItem>,
+    commands,
+    dynamicItems,
+  };
+}
+
+export function searchCommands(
+  commandsFuse: Fuse<StaticCommandItem>,
+  query: string,
+  commandIdToItemMap: Map<string, StaticCommandItem>,
+  limit = 10,
+): CombinedResult[] {
+  if (!commandsFuse) return [];
+
+  if (!query.trim()) {
+    return Array.from(commandIdToItemMap.values())
+      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0)) // Sort by priority when no query
+      .slice(0, limit) // Limit results even when no query
+      .map((item) => ({
+        id: item.id,
+        type: "command" as const,
+        score: 100 + (item.priority ?? 0),
+        item,
+      }));
+  }
+
+  const searchResults = commandsFuse.search(query, { limit });
+
+  return searchResults.map((result: FuseResult<StaticCommandItem>) => {
+    const item = result.item;
+    const fuseScore = 15 * (1 - (result.score || 0.5));
+    const score = fuseScore + (item.priority ?? 0);
+
+    return {
+      id: item.id,
+      type: "command" as const,
+      score,
+      item,
+      matches: result.matches,
+    };
+  });
+}
+
+export function searchDynamicItems(
+  dynamicContentFuse: Fuse<HydratedIndexItem>,
+  query: string,
+  dynamicIdToItemMap: Map<string, HydratedIndexItem>,
+  limit = 10,
+  sortByRecent: boolean = true, // Added option to control sorting
+): CombinedResult[] {
+  if (!dynamicContentFuse) return [];
+
+  if (!query.trim()) {
+    let items = Array.from(dynamicIdToItemMap.values());
+    if (sortByRecent) {
+      items = items.sort((a, b) => b.dateAdded - a.dateAdded);
+    }
+    return items.slice(0, limit).map((item) => ({
+      id: item.id,
+      type: "dynamic" as const,
+      score: 80, // Assign a default score for non-searched items
+      item,
+    }));
+  }
+
+  const now = Date.now();
+  const searchResults = dynamicContentFuse.search(query, { limit });
+
+  return searchResults.map((result: FuseResult<HydratedIndexItem>) => {
+    const item = result.item;
+    const fuseScore = 10 * (1 - (result.score || 0.5));
+    const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
+    const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0; // Apply boost only if sorting by recent
+    const score = fuseScore + recencyBoost;
+
+    return {
+      id: item.id,
+      type: "dynamic" as const,
+      score,
+      item,
+      matches: result.matches,
+    };
+  });
+}
+
+export async function performSearch(
+  query: string,
+  commandsFuse: Fuse<StaticCommandItem>,
+  dynamicContentFuse: Fuse<HydratedIndexItem>,
+  commandIdToItemMap: Map<string, StaticCommandItem>,
+  dynamicIdToItemMap: Map<string, HydratedIndexItem>,
+  showRecentFirst: boolean,
+): Promise<CombinedResult[]> {
+  const startTime = performance.now();
+
+  // Get all results first
+  const commandResults = searchCommands(
+    commandsFuse,
+    query,
+    commandIdToItemMap,
+  );
+  const commandEndTime = performance.now();
+  const dynamicResults = searchDynamicItems(
+    dynamicContentFuse,
+    query,
+    dynamicIdToItemMap,
+    10,
+    showRecentFirst,
+  );
+  const fuseEndTime = performance.now();
+
+  // Get vector results in parallel
+  let vectorResults: VectorSearchResult[] = [];
+  try {
+    vectorResults = await searchVectors(query, 10);
+  } catch (e) {}
+  const vectorEndTime = performance.now();
+
+  console.log("Vector results:", vectorResults);
+
+  // Log timings
+  console.log(`Command search took ${commandEndTime - startTime} milliseconds`);
+  console.log(
+    `Dynamic search took ${fuseEndTime - commandEndTime} milliseconds`,
+  );
+  console.log(`Vector search took ${vectorEndTime - fuseEndTime} milliseconds`);
+
+  // Create a map to store our final results, using ID as key to avoid duplicates
+  const resultMap = new Map<string, CombinedResult>();
+
+  // Add command results first (they keep their original scores)
+  commandResults.forEach((r) => resultMap.set(r.id, r));
+
+  // Process dynamic results and vector results together
+  const seenIds = new Set<string>();
+
+  // Add dynamic results first
+  dynamicResults.forEach((r) => {
+    seenIds.add(r.id);
+    const vectorMatch = vectorResults.find((v) => v.object.id === r.id);
+    if (vectorMatch) {
+      // If we found it in both searches, combine the scores
+      resultMap.set(r.id, {
+        ...r,
+        score: r.score + vectorMatch.similarity * 0.6, // Boost exact matches
+      });
+    } else {
+      // If only in Fuse results, keep as is
+      resultMap.set(r.id, r);
+    }
+  });
+
+  // Now add any vector results we haven't seen yet
+  vectorResults.forEach((v) => {
+    const id = v.object.id;
+    if (!seenIds.has(id)) {
+      // This is a semantic match that Fuse missed - add it with the vector similarity as score
+      resultMap.set(id, {
+        id,
+        type: "dynamic" as const,
+        score: v.similarity * 0.9, // High base score for semantic matches
+        item: v.object,
+      });
+    }
+  });
+
+  // Convert to array and sort by score
+  const results = Array.from(resultMap.values());
+  results.sort((a, b) => b.score - a.score);
+
+  return results;
+}

src/plugins/built-in/globalSearch/src/search/vector/vectorSearch.ts

@@ -0,0 +1,33 @@
+import { EmbeddingIndex, getEmbedding, initializeModel } from 'client-vector-search';
+import type { HydratedIndexItem } from '../../indexing/types';
+import type { SearchResult } from 'client-vector-search';
+
+let vectorIndex: EmbeddingIndex | null = null;
+
+export async function initVectorSearch() {
+  try {
+    await initializeModel();
+    vectorIndex = new EmbeddingIndex([]);
+    vectorIndex.preloadIndexedDB();
+  } catch (e) {
+    console.error('Error initializing vector search', e);
+  }
+}
+
+export interface VectorSearchResult extends SearchResult {
+  object: HydratedIndexItem & { embedding: number[] };
+}
+
+export async function searchVectors(query: string, topK: number = 10): Promise<VectorSearchResult[]> {
+  if (!vectorIndex) await initVectorSearch();
+  
+  const queryEmbedding = await getEmbedding(query.slice(0, 100));
+
+  const results = await vectorIndex!.search(queryEmbedding, { 
+    topK,
+    useStorage: 'indexedDB',
+    dedupeEntries: true
+  });
+  
+  return results as VectorSearchResult[];
+}

src/plugins/built-in/globalSearch/src/search/vector/vectorTypes.ts

@@ -0,0 +1,7 @@
+import type { SearchResult } from "client-vector-search";
+import type { HydratedIndexItem } from "../../indexing/types";
+
+export interface VectorSearchResult extends SearchResult {
+  object: HydratedIndexItem & { embedding: number[] };
+}
+  

src/plugins/built-in/globalSearch/src/utils/dynamicItems.ts

@@ -0,0 +1,30 @@
+import type { SvelteComponent } from "svelte";
+import type { HydratedIndexItem } from "./indexing/types";
+
+export interface DynamicContentItem {
+  id: string;
+  text: string;
+  category: string;
+  content: string;
+  dateAdded: number;
+  metadata: Record<string, any>;
+  actionId: string;
+  renderComponentId: string;
+  renderComponent?: typeof SvelteComponent;
+}
+
+let dynamicItems: HydratedIndexItem[] = [];
+
+/**
+ * Loads a new set of dynamic items.
+ */
+export function loadDynamicItems(items: HydratedIndexItem[]) {
+  dynamicItems = items;
+}
+
+/**
+ * Returns all currently loaded dynamic items.
+ */
+export function getDynamicItems(): HydratedIndexItem[] {
+  return dynamicItems;
+}

src/plugins/built-in/globalSearch/src/utils/highlight.ts

@@ -0,0 +1,274 @@
+import type { FuseResultMatch, MatchIndices } from "./core/types";
+
+/**
+ * Simple utility to remove HTML tags from a string.
+ */
+export function stripHtmlTags(html: string): string {
+  if (!html) return "";
+  return html.replace(/<[^>]*>/g, "").replace("\n", " ");
+}
+
+/**
+ * Removes HTML tags from a string, but preserves <span class="highlight"> tags.
+ */
+export function stripHtmlButKeepHighlights(html: string): string {
+  if (!html) return "";
+  // Use a placeholder for highlight tags, strip others, then restore placeholders.
+  const highlightOpenPlaceholder = "__HIGHLIGHT_OPEN__";
+  const highlightClosePlaceholder = "__HIGHLIGHT_CLOSE__";
+
+  let processed = html.replace(
+    /<span class="highlight">/g,
+    highlightOpenPlaceholder,
+  );
+  processed = processed.replace(/<\/span>/g, (match, offset, fullString) => {
+    // Only replace </span> if it likely corresponds to our highlight span
+    // This is imperfect but helps avoid replacing unrelated spans.
+    // Look backwards for the nearest opening placeholder.
+    const lastPlaceholder = fullString.lastIndexOf(
+      highlightOpenPlaceholder,
+      offset,
+    );
+    if (lastPlaceholder !== -1) {
+      // Check if there's another opening tag between the placeholder and the closing span
+      const interveningContent = fullString.substring(
+        lastPlaceholder + highlightOpenPlaceholder.length,
+        offset,
+      );
+      if (!/<span/i.test(interveningContent)) {
+        return highlightClosePlaceholder;
+      }
+    }
+    return match; // Keep the original </span> if unsure
+  });
+
+  // Strip all remaining HTML tags
+  processed = processed.replace(/<[^>]*>/g, "");
+
+  // Restore the highlight tags
+  processed = processed.replace(
+    new RegExp(highlightOpenPlaceholder, "g"),
+    '<span class="highlight">',
+  );
+  processed = processed.replace(
+    new RegExp(highlightClosePlaceholder, "g"),
+    "</span>",
+  );
+
+  return processed;
+}
+
+export function highlightMatch(
+  text: string,
+  term: string,
+  matches?: readonly FuseResultMatch[],
+): string {
+  if (!term.trim() || !matches || matches.length === 0) return text;
+
+  try {
+    // Find matches for the text field or allContent that contains the text
+    const fieldMatches = matches.find(
+      (match) =>
+        match.key === "text" ||
+        (match.key === "allContent" && match.value?.includes(text)),
+    );
+
+    if (
+      !fieldMatches ||
+      !fieldMatches.indices ||
+      fieldMatches.indices.length === 0
+    ) {
+      return text;
+    }
+
+    // Create a map of character positions to mark which ones need highlighting
+    const highlightMap = new Array(text.length).fill(false);
+
+    fieldMatches.indices.forEach((indices: MatchIndices) => {
+      const start = indices[0];
+      const end = indices[1];
+
+      if (fieldMatches.key === "allContent") {
+        // Find where our text appears in the allContent
+        const allContent = fieldMatches.value;
+        const textPos = allContent?.indexOf(text) ?? -1;
+
+        // Only highlight if the match overlaps with our text
+        if (textPos >= 0) {
+          // Adjust start and end to be relative to our text field
+          const relStart = start - textPos;
+          const relEnd = end - textPos;
+
+          // Only highlight if the match actually overlaps with our text field
+          if (relEnd >= 0 && relStart < text.length) {
+            // Mark the overlapping characters
+            for (
+              let i = Math.max(0, relStart);
+              i <= Math.min(text.length - 1, relEnd);
+              i++
+            ) {
+              highlightMap[i] = true;
+            }
+          }
+        }
+      } else {
+        // Regular text field match - ensure indices are within bounds
+        if (start >= 0 && end < text.length) {
+          for (let i = start; i <= end; i++) {
+            highlightMap[i] = true;
+          }
+        }
+      }
+    });
+
+    let result = "";
+    let inHighlight = false;
+
+    for (let i = 0; i < text.length; i++) {
+      if (highlightMap[i] && !inHighlight) {
+        result += '<span class="highlight">';
+        inHighlight = true;
+      } else if (!highlightMap[i] && inHighlight) {
+        result += "</span>";
+        inHighlight = false;
+      }
+
+      result += text.charAt(i);
+    }
+
+    if (inHighlight) {
+      result += "</span>";
+    }
+
+    return result;
+  } catch (e) {
+    console.error("Error highlighting match:", e);
+    return text;
+  }
+}
+
+// Function to extract and highlight content snippet using Fuse matches
+export function highlightSnippet(
+  content: string,
+  term: string,
+  matches?: readonly FuseResultMatch[],
+): string {
+  if (!content || !term.trim() || !matches || matches.length === 0)
+    return content;
+
+  try {
+    // Find matches for content field or allContent that contains the content
+    const contentMatches = matches.find(
+      (match) =>
+        match.key === "content" ||
+        (match.key === "allContent" && match.value?.includes(content)),
+    );
+
+    if (
+      !contentMatches ||
+      !contentMatches.indices ||
+      contentMatches.indices.length === 0
+    ) {
+      // No content matches, return plain content
+      return content.length > 100 ? content.substring(0, 100) + "..." : content;
+    }
+
+    // Find the match indices
+    let allIndices: MatchIndices[] = contentMatches.indices as MatchIndices[];
+
+    // If matching against allContent, adjust indices to be relative to content
+    if (contentMatches.key === "allContent") {
+      const allContent = contentMatches.value;
+      const contentPos = allContent?.indexOf(content) ?? -1;
+
+      if (contentPos >= 0) {
+        // Adjust indices to be relative to the content field
+        allIndices = allIndices
+          .map(
+            (indices) =>
+              [
+                indices[0] - contentPos,
+                indices[1] - contentPos,
+              ] as MatchIndices,
+          )
+          .filter((indices) => indices[1] >= 0 && indices[0] < content.length);
+      }
+    }
+
+    if (allIndices.length === 0) {
+      return content.length > 100 ? content.substring(0, 100) + "..." : content;
+    }
+
+    // Find a good center point for our snippet (average of first match)
+    const firstMatch = allIndices[0];
+    const matchCenter = Math.floor((firstMatch[0] + firstMatch[1]) / 2);
+
+    // Extract a window around the match
+    const windowSize = 100;
+    const start = Math.max(0, matchCenter - windowSize / 2);
+    const end = Math.min(content.length, matchCenter + windowSize / 2);
+
+    // Create the basic snippet
+    let snippet = content.substring(start, end);
+    if (start > 0) snippet = "..." + snippet;
+    if (end < content.length) snippet += "...";
+
+    // Create a highlighting map for the snippet
+    const snippetLength = snippet.length;
+    const highlightMap = new Array(snippetLength).fill(false);
+
+    // Calculate offset for the highlighting
+    const startOffset = start > 0 ? start - 3 : start; // Account for '...' if present
+
+    // Mark each matched character in the snippet
+    allIndices.forEach((indices: MatchIndices) => {
+      const matchStart = indices[0];
+      const matchEnd = indices[1];
+
+      // Skip matches outside our snippet window
+      if (matchEnd < start || matchStart > end) return;
+
+      // Adjust match indices to be relative to snippet
+      const snippetMatchStart = Math.max(0, matchStart - startOffset);
+      const snippetMatchEnd = Math.min(
+        snippetLength - 1,
+        matchEnd - startOffset,
+      );
+
+      // Mark characters for highlighting
+      for (let i = snippetMatchStart; i <= snippetMatchEnd; i++) {
+        if (i >= 0 && i < snippetLength) {
+          highlightMap[i] = true;
+        }
+      }
+    });
+
+    // Build the highlighted snippet
+    let result = "";
+    let inHighlight = false;
+
+    for (let i = 0; i < snippetLength; i++) {
+      // If highlighting state changes, add appropriate tags
+      if (highlightMap[i] && !inHighlight) {
+        result += '<span class="highlight">';
+        inHighlight = true;
+      } else if (!highlightMap[i] && inHighlight) {
+        result += "</span>";
+        inHighlight = false;
+      }
+
+      // Add the current character
+      result += snippet.charAt(i);
+    }
+
+    // Close highlight tag if we're still in one at the end
+    if (inHighlight) {
+      result += "</span>";
+    }
+
+    return result;
+  } catch (e) {
+    console.error("Error highlighting snippet:", e);
+    return content.length > 100 ? content.substring(0, 100) + "..." : content;
+  }
+}

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

@@ -0,0 +1,91 @@
+import type { Plugin } from '../../core/types';
+
+interface NotificationCollectorStorage {
+  lastNotificationCount: number;
+  lastCheckedTime: string;
+}
+
+const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
+  id: 'notificationCollector',
+  name: 'Notification Collector',
+  description: 'Collects and displays SEQTA notifications',
+  version: '1.0.0',
+  settings: {},
+  disableToggle: true,
+
+  run: async (api) => {
+    let pollInterval: number | null = null;
+
+    // Store last notification count in storage
+    if (!api.storage.lastNotificationCount) {
+      api.storage.lastNotificationCount = 0;
+    }
+
+    const checkNotifications = async () => {
+      try {
+        const alertDiv = document.querySelector("[class*='notifications__bubble___']") as HTMLElement;
+
+        if (api.storage.lastNotificationCount !== 0) {
+          alertDiv.textContent = api.storage.lastNotificationCount.toString();
+        }
+        
+        const response = await fetch(`${location.origin}/seqta/student/heartbeat?`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json; charset=utf-8'
+          },
+          body: JSON.stringify({
+            timestamp: "1970-01-01 00:00:00.0",
+            hash: "#?page=/home",
+          })
+        });
+
+        const data = await response.json();
+        
+        // Store notification count for history
+        const notificationCount = data.payload.notifications.length;
+        api.storage.lastNotificationCount = notificationCount;
+        api.storage.lastCheckedTime = new Date().toISOString();
+        
+        if (alertDiv) {
+          alertDiv.textContent = notificationCount.toString();
+        } else {
+          console.info("[BetterSEQTA+] No notifications currently");
+        }
+      } catch (error) {
+        console.error("[BetterSEQTA+] Error fetching notifications:", error);
+      }
+    };
+
+    const startPolling = () => {
+      if (pollInterval) return; // Already polling
+      checkNotifications();
+      pollInterval = window.setInterval(checkNotifications, 30000);
+    };
+
+    const stopPolling = () => {
+      if (pollInterval) {
+        window.clearInterval(pollInterval);
+        pollInterval = null;
+        const alertDiv = document.querySelector("[class*='notifications__bubble___']") as HTMLElement;
+        if (alertDiv) {
+          if (api.storage.lastNotificationCount > 9) {
+            alertDiv.textContent = "9+";
+          } else {
+            alertDiv.textContent = api.storage.lastNotificationCount.toString();
+          }
+        }
+      }
+    };
+
+    api.seqta.onMount("[class*='notifications__bubble___']", (_) => {
+      startPolling();
+    });
+
+    return () => {
+      stopPolling();
+    };
+  }
+};
+
+export default notificationCollectorPlugin;

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

@@ -0,0 +1,52 @@
+import type { Plugin } from '@/plugins/core/types';
+import { BasePlugin } from '@/plugins/core/settings';
+import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
+
+// Step 1: Define settings with proper typing
+const settings = defineSettings({
+  someSetting: booleanSetting({
+    default: true,
+    title: "Test Plugin",
+    description: "Some random setting",
+  })
+});
+
+// Step 2: Create the plugin class with @Setting decorators
+class TestPluginClass extends BasePlugin<typeof settings> {
+  @Setting(settings.someSetting)
+  someSetting!: boolean;
+}
+
+// Step 3: Instantiate and plug it in
+const settingsInstance = new TestPluginClass();
+
+const testPlugin: Plugin<typeof settings> = {
+  id: 'test',
+  name: 'Test Plugin',
+  description: 'A test plugin for BetterSEQTA+',
+  version: '1.0.0',
+  settings: settingsInstance.settings,
+  disableToggle: true,
+
+  run: async (api) => {
+    console.log('Test plugin running');
+
+    api.events.on('ping', (data) => {
+      console.log('Ping received! Page changed to: ', data);
+    });
+
+    const { unregister } = api.seqta.onPageChange((page) => {
+      //console.log('Page changed to', page);
+      api.events.emit('ping', page);
+
+      console.log('Current setting value:', api.settings.someSetting);
+    });
+
+    return () => {
+      console.log('Test plugin stopped');
+      unregister();
+    }
+  }
+};
+
+export default testPlugin;

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

@@ -1,9 +1,11 @@
 import renderSvelte from "@/interface/main"
 import themeCreator from "@/interface/pages/themeCreator.svelte"
 import { unmount } from "svelte"
-import { ClearThemePreview } from "./themes/UpdateThemePreview"
+import { ThemeManager } from "@/plugins/built-in/themes/theme-manager"
+import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
 let themeCreatorSvelteApp: any = null
+const themeManager = ThemeManager.getInstance();
 
 /**
  * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
@@ -13,6 +15,12 @@ let themeCreatorSvelteApp: any = null
 export function OpenThemeCreator(themeID: string = "") {
   CloseThemeCreator()
 
+  // Only store original color if we're not editing an existing theme
+  localStorage.setItem('themeCreatorOpen', 'true');
+  if (!themeID) {
+    localStorage.setItem('originalPreviewColor', settingsState.selectedColor);
+  }
+
   const width = "310px"
 
   const themeCreatorDiv: HTMLDivElement = document.createElement("div")
@@ -33,7 +41,7 @@ export function OpenThemeCreator(themeID: string = "") {
   closeButton.textContent = "×"
   closeButton.addEventListener("click", () => {
     CloseThemeCreator()
-    ClearThemePreview()
+    themeManager.clearPreview()
   })
 
   document.body.appendChild(closeButton)
@@ -55,7 +63,7 @@ export function OpenThemeCreator(themeID: string = "") {
   const mouseMoveHandler = (e: MouseEvent) => {
     if (!isDragging) return
     const windowWidth = window.innerWidth
-    const newWidth = Math.min(Math.max(310, windowWidth - e.clientX), 600)
+    const newWidth = Math.max(310, windowWidth - e.clientX)
     themeCreatorDiv.style.width = `${newWidth}px`
     mainContent.style.width = `calc(100% - ${newWidth}px)`
     resizeBar.style.right = `${newWidth - 2.5}px`
@@ -82,6 +90,9 @@ export function OpenThemeCreator(themeID: string = "") {
  * @returns void
  */
 export function CloseThemeCreator() {
+  // Remove the stored flag
+  localStorage.removeItem('themeCreatorOpen');
+
   const themeCreator = document.getElementById("themeCreator")
   const closeButton = document.querySelector(
     ".themeCloseButton",

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

@@ -0,0 +1,17 @@
+import type { Plugin } from '../../core/types';
+import { ThemeManager } from './theme-manager';
+
+const themesPlugin: Plugin = {
+  id: 'themes',
+  name: 'Themes',
+  description: 'Adds a theme selector to the settings page',
+  version: '1.0.0',
+  settings: {},
+
+  run: async (_) => {
+    const themeManager = ThemeManager.getInstance();
+    await themeManager.initialize();
+  }
+};
+
+export default themesPlugin; 

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

@@ -0,0 +1,738 @@
+import localforage from 'localforage';
+import type { CustomTheme, LoadedCustomTheme } from '@/types/CustomThemes';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
+import debounce from '@/seqta/utils/debounce';
+
+type ThemeContent = {
+  id: string;
+  name: string;
+  coverImage?: string; // base64, optional
+  description: string;
+  defaultColour?: string;
+  CanChangeColour?: boolean;
+  CustomCSS?: string;
+  hideThemeName?: boolean;
+  forceDark?: boolean;
+  images: { id: string, variableName: string, data: string }[]; // data: base64
+};
+
+export class ThemeManager {
+  private static instance: ThemeManager;
+  private currentTheme: CustomTheme | null = null;
+  private styleElement: HTMLStyleElement | null = null;
+  private previewStyleElement: HTMLStyleElement | null = null;
+  private previousImageVariableNames: string[] = [];
+  private originalPreviewColor: string | null = null;
+  private originalPreviewTheme: boolean | null = null;
+  private imageUrlCache: Map<string, string> = new Map();
+
+  private constructor() {
+    console.debug('[ThemeManager] Initializing...');
+  }
+
+  public static getInstance(): ThemeManager {
+    if (!ThemeManager.instance) {
+      ThemeManager.instance = new ThemeManager();
+    }
+    return ThemeManager.instance;
+  }
+
+  /**
+   * Get the currently active theme
+   */
+  public getCurrentTheme(): CustomTheme | null {
+    return this.currentTheme;
+  }
+
+  /**
+   * Get a theme by ID from storage
+   */
+  public async getTheme(themeId: string): Promise<CustomTheme | null> {
+    console.debug('[ThemeManager] Getting theme:', themeId);
+    try {
+      const theme = await localforage.getItem(themeId) as CustomTheme;
+      return theme;
+    } catch (error) {
+      console.error('[ThemeManager] Error getting theme:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Get the ID of the currently selected theme
+   */
+  public getSelectedThemeId(): string {
+    return settingsState.selectedTheme;
+  }
+
+  /**
+   * Disable the current theme without deleting it
+   */
+  public async disableTheme(): Promise<void> {
+    console.debug('[ThemeManager] Disabling current theme');
+    try {
+      if (!this.currentTheme) {
+        console.debug('[ThemeManager] No theme to disable');
+        return;
+      }
+
+      await this.removeTheme(this.currentTheme);
+      this.currentTheme = null;
+      settingsState.selectedTheme = '';
+      console.debug('[ThemeManager] Theme disabled successfully');
+    } catch (error) {
+      console.error('[ThemeManager] Error disabling theme:', error);
+    }
+  }
+
+  /**
+   * Initialize the theme system and restore previous state
+   */
+  public async initialize(): Promise<void> {
+    console.debug('[ThemeManager] Starting initialization');
+    try {
+      // Check if theme creator was open during reload
+      const themeCreatorOpen = localStorage.getItem('themeCreatorOpen');
+      if (themeCreatorOpen === 'true') {
+        console.debug('[ThemeManager] Theme creator was open, clearing preview state');
+        this.clearPreview();
+        // Clean up the flag
+        localStorage.removeItem('themeCreatorOpen');
+      }
+      
+      if (settingsState.selectedTheme) {
+        console.debug('[ThemeManager] Found selected theme, restoring:', settingsState.selectedTheme);
+        await this.setTheme(settingsState.selectedTheme);
+      }
+    } catch (error) {
+      console.error('[ThemeManager] Error during initialization:', error);
+    }
+  }
+
+  /**
+   * Clean up theme system resources
+   */
+  public async cleanup(): Promise<void> {
+    console.debug('[ThemeManager] Cleaning up resources');
+    try {
+      if (this.currentTheme) {
+        await this.removeTheme(this.currentTheme, false);
+      }
+    } catch (error) {
+      console.error('[ThemeManager] Error during cleanup:', error);
+    }
+  }
+
+  /**
+   * Set and apply a theme by ID
+   */
+  public async setTheme(themeId: string): Promise<void> {
+    console.debug('[ThemeManager] Setting theme:', themeId);
+    try {
+      const theme = await localforage.getItem(themeId) as CustomTheme;
+      if (!theme) {
+        console.error('[ThemeManager] Theme not found:', themeId);
+        return;
+      }
+
+      // Store original settings before applying new theme
+      if (!settingsState.selectedTheme) {
+        console.debug('[ThemeManager] Storing original settings');
+        settingsState.originalSelectedColor = settingsState.selectedColor;
+        settingsState.originalDarkMode = settingsState.DarkMode;
+      }
+
+      // Remove current theme if exists
+      if (this.currentTheme) {
+        console.debug('[ThemeManager] Removing current theme');
+
+        await this.removeTheme(this.currentTheme);
+      }
+
+      // Apply new theme
+      await this.applyTheme(theme);
+      this.currentTheme = theme;
+      settingsState.selectedTheme = themeId;
+
+    } catch (error) {
+      console.error('[ThemeManager] Error setting theme:', error);
+    }
+  }
+
+  /**
+   * Apply theme components (CSS, images, settings)
+   */
+  private async applyTheme(theme: CustomTheme): Promise<void> {
+    console.debug('[ThemeManager] Applying theme:', theme.name);
+    try {
+      // Apply custom CSS
+      if (theme.CustomCSS) {
+        console.debug('[ThemeManager] Applying custom CSS');
+        this.applyCustomCSS(theme.CustomCSS);
+      }
+
+      // Apply custom images
+      if (theme.CustomImages) {
+        console.debug('[ThemeManager] Applying custom images');
+        theme.CustomImages.forEach((image) => {
+          const imageUrl = URL.createObjectURL(image.blob);
+          document.documentElement.style.setProperty('--' + image.variableName, `url(${imageUrl})`);
+        });
+      }
+
+      // Apply theme settings
+      if (theme.forceDark !== undefined) {
+        console.debug('[ThemeManager] Setting dark mode:', theme.forceDark);
+        settingsState.DarkMode = theme.forceDark;
+      }
+
+      // Use the stored selected color if available, otherwise use the default
+      if (theme.selectedColor) {
+        console.debug('[ThemeManager] Restoring saved color:', theme.selectedColor);
+        settingsState.selectedColor = theme.selectedColor;
+      } else if (theme.defaultColour) {
+        console.debug('[ThemeManager] Using default color:', theme.defaultColour);
+        settingsState.selectedColor = theme.defaultColour;
+      }
+
+    } catch (error) {
+      console.error('[ThemeManager] Error applying theme:', error);
+    }
+  }
+
+  /**
+   * Remove theme and restore original settings
+   */
+  private async removeTheme(theme: CustomTheme, clearSelectedTheme: boolean = true): Promise<void> {
+    console.debug('[ThemeManager] Removing theme:', theme.name);
+    try {
+      // Remove custom CSS
+      if (this.styleElement) {
+        console.debug('[ThemeManager] Removing custom CSS');
+        this.styleElement.remove();
+        this.styleElement = null;
+      }
+
+      // Remove custom images
+      if (theme.CustomImages) {
+        console.debug('[ThemeManager] Removing custom images');
+        theme.CustomImages.forEach((image) => {
+          const value = document.documentElement.style.getPropertyValue('--' + image.variableName);
+          if (value) {
+            URL.revokeObjectURL(value.slice(4, -1)); // Remove url() wrapper
+          }
+          document.documentElement.style.removeProperty('--' + image.variableName);
+        });
+      }
+
+      if (this.currentTheme) {
+        // Store the current color with the theme before removing it
+        await localforage.setItem(this.currentTheme.id, {
+          ...this.currentTheme,
+          selectedColor: settingsState.selectedColor
+        });
+      }
+
+      // Restore original settings
+      if (settingsState.originalSelectedColor) {
+        console.debug('[ThemeManager] Restoring original color:', settingsState.originalSelectedColor);
+        settingsState.selectedColor = settingsState.originalSelectedColor;
+      }
+
+      if (settingsState.originalDarkMode !== undefined) {
+        console.debug('[ThemeManager] Restoring original dark mode:', settingsState.originalDarkMode);
+        settingsState.DarkMode = settingsState.originalDarkMode;
+        settingsState.originalDarkMode = undefined;
+      }
+
+      this.currentTheme = null;
+      if (clearSelectedTheme) {
+        settingsState.selectedTheme = '';
+      }
+
+    } catch (error) {
+      console.error('[ThemeManager] Error removing theme:', error);
+    }
+  }
+
+  /**
+   * Apply custom CSS to the document
+   */
+  private applyCustomCSS(css: string): void {
+    console.debug('[ThemeManager] Applying custom CSS');
+    try {
+      if (!this.styleElement) {
+        this.styleElement = document.createElement('style');
+        this.styleElement.id = 'custom-theme';
+        document.head.appendChild(this.styleElement);
+      }
+      this.styleElement.textContent = css;
+    } catch (error) {
+      console.error('[ThemeManager] Error applying custom CSS:', error);
+    }
+  }
+
+  /**
+   * Get list of available themes
+   */
+  public async getAvailableThemes(): Promise<CustomTheme[]> {
+    console.debug('[ThemeManager] Getting available themes');
+    try {
+      const themeIds = await localforage.getItem('customThemes') as string[] | null;
+      if (!themeIds) {
+        return [];
+      }
+
+      const themes = await Promise.all(
+        themeIds.map(async (id) => {
+          return await localforage.getItem(id) as CustomTheme;
+        })
+      );
+
+      return themes.filter(theme => theme !== null);
+    } catch (error) {
+      console.error('[ThemeManager] Error getting available themes:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Save or update a theme
+   */
+  public async saveTheme(theme: LoadedCustomTheme): Promise<void> {
+    console.debug('[ThemeManager] Saving theme:', theme.name);
+    try {
+      await localforage.setItem(theme.id, theme);
+      const themeIds = await localforage.getItem('customThemes') as string[] | null;
+      
+      if (themeIds) {
+        if (!themeIds.includes(theme.id)) {
+          themeIds.push(theme.id);
+          await localforage.setItem('customThemes', themeIds);
+        }
+      } else {
+        await localforage.setItem('customThemes', [theme.id]);
+      }
+    } catch (error) {
+      console.error('[ThemeManager] Error saving theme:', error);
+    }
+  }
+
+  /**
+   * Delete a theme
+   */
+  public async deleteTheme(themeId: string): Promise<void> {
+    console.debug('[ThemeManager] Deleting theme:', themeId);
+    try {
+      const theme = await localforage.getItem(themeId) as CustomTheme;
+      if (theme) {
+        if (this.currentTheme?.id === themeId) {
+          await this.removeTheme(theme);
+        }
+        await localforage.removeItem(themeId);
+        
+        const themeIds = await localforage.getItem('customThemes') as string[] | null;
+        if (themeIds) {
+          const updatedThemeIds = themeIds.filter(id => id !== themeId);
+          await localforage.setItem('customThemes', updatedThemeIds);
+        }
+      }
+    } catch (error) {
+      console.error('[ThemeManager] Error deleting theme:', error);
+    }
+  }
+
+  /**
+   * Download and install a theme from the store
+   */
+  public async downloadTheme(themeContent: { id: string; name: string; description: string; coverImage: string; }): Promise<void> {
+    console.debug('[ThemeManager] Downloading theme:', themeContent.name);
+    try {
+      if (!themeContent.id) return;
+
+      const response = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${themeContent.id}/theme.json`);
+      const themeData = await response.json() as ThemeContent;
+      
+      await this.installTheme(themeData);
+    } catch (error) {
+      console.error('[ThemeManager] Error downloading theme:', error);
+    }
+  }
+
+  /**
+   * Install a theme from theme data
+   */
+  public async installTheme(themeData: ThemeContent): Promise<void> {
+    console.debug('[ThemeManager] Installing theme:', themeData.name);
+    try {
+      // Validate required fields
+      if (!themeData.id || !themeData.name) {
+        throw new Error('Theme is missing required fields (id or name)');
+      }
+
+      // Handle cover image (optional)
+      let coverImageBlob = null;
+      if (themeData.coverImage) {
+        try {
+          const strippedCoverImage = this.stripBase64Prefix(themeData.coverImage);
+          coverImageBlob = this.base64ToBlob(strippedCoverImage);
+        } catch (e) {
+          console.warn('[ThemeManager] Failed to process cover image:', e);
+          // Continue without cover image
+        }
+      }
+
+      // Handle images (optional)
+      const images = themeData.images?.map((image) => {
+        try {
+          if (!image.id || !image.variableName || !image.data) {
+            console.warn('[ThemeManager] Skipping invalid image:', image);
+            return null;
+          }
+          return {
+            ...image,
+            blob: this.base64ToBlob(this.stripBase64Prefix(image.data))
+          };
+        } catch (e) {
+          console.warn('[ThemeManager] Failed to process image:', e);
+          return null;
+        }
+      }).filter(img => img !== null) ?? [];
+
+      // Create theme with defaults for optional fields
+      const theme: LoadedCustomTheme = {
+        id: themeData.id,
+        name: themeData.name,
+        description: themeData.description || '',
+        webURL: themeData.id,
+        coverImage: coverImageBlob,
+        CustomImages: images,
+        CustomCSS: themeData.CustomCSS || '',
+        defaultColour: themeData.defaultColour || 'rgba(0, 123, 255, 1)',
+        CanChangeColour: themeData.CanChangeColour ?? true,
+        allowBackgrounds: true,
+        isEditable: false,
+        hideThemeName: themeData.hideThemeName ?? false,
+        forceDark: themeData.forceDark
+      };
+
+      await this.saveTheme(theme);
+    } catch (error) {
+      console.error('[ThemeManager] Error installing theme:', error);
+      throw error; // Re-throw to handle in UI
+    }
+  }
+
+  /**
+   * Share a theme by exporting it
+   */
+  public async shareTheme(themeId: string): Promise<void> {
+    console.debug('[ThemeManager] Sharing theme:', themeId);
+    try {
+      const theme = await localforage.getItem(themeId) as LoadedCustomTheme;
+      if (!theme) {
+        console.error('[ThemeManager] Theme not found');
+        return;
+      }
+
+      // Extract only the fields we want to share
+      const {
+        CustomImages = [],
+        coverImage,
+        webURL,
+        isEditable,
+        selectedColor,
+        allowBackgrounds,
+        ...themeBasics
+      } = theme;
+
+      // Convert images to base64
+      const finalImages = await Promise.all(CustomImages.map(async (image) => ({
+        id: image.id,
+        variableName: image.variableName,
+        data: await this.blobToBase64(image.blob)
+      })));
+
+      // Convert cover image to base64
+      const coverImageBase64 = coverImage ? await this.blobToBase64(coverImage) : null;
+
+      // Create shareable theme data with only necessary fields
+      const shareableTheme = {
+        ...themeBasics,
+        images: finalImages,
+        coverImage: coverImageBase64
+      };
+
+      // Save theme file
+      this.saveThemeFile(shareableTheme, theme.name || 'Unnamed_Theme');
+    } catch (error) {
+      console.error('[ThemeManager] Error sharing theme:', error);
+    }
+  }
+
+  /**
+   * Preview a theme without applying it
+   */
+  public async previewTheme(theme: LoadedCustomTheme): Promise<void> {
+    console.debug('[ThemeManager] Previewing theme:', theme.name);
+    try {
+      const { CustomCSS, CustomImages, defaultColour, forceDark } = theme;
+
+      // Store original settings only if this is a new theme
+      if (!theme.webURL) {
+        if (this.originalPreviewColor === null) {
+          this.originalPreviewColor = settingsState.selectedColor;
+          localStorage.setItem('originalPreviewColor', settingsState.selectedColor);
+        }
+        if (this.originalPreviewTheme === null) {
+          this.originalPreviewTheme = settingsState.DarkMode;
+        }
+      }
+
+      // Apply custom CSS
+      if (CustomCSS) {
+        this.applyPreviewCSS(CustomCSS);
+      }
+
+      // Apply custom images
+      const newImageVariableNames = CustomImages.map(image => image.variableName);
+
+      // Remove old preview images
+      this.previousImageVariableNames.forEach(variableName => {
+        if (!newImageVariableNames.includes(variableName)) {
+          this.removeImageFromDocument(variableName);
+        }
+      });
+
+      // Apply new images
+      CustomImages.forEach((image) => {
+        const imageUrl = URL.createObjectURL(image.blob);
+        document.documentElement.style.setProperty(`--${image.variableName}`, `url(${imageUrl})`);
+      });
+
+      // Update previousImageVariableNames
+      this.previousImageVariableNames = newImageVariableNames;
+
+      // Apply theme settings
+      if (forceDark !== undefined) {
+        settingsState.DarkMode = forceDark;
+      }
+      
+      if (defaultColour) {
+        settingsState.selectedColor = defaultColour;
+      }
+    } catch (error) {
+      console.error('[ThemeManager] Error previewing theme:', error);
+    }
+  }
+
+  /**
+   * Update the preview of a theme in real-time (for theme creator)
+   */
+  public async updatePreview(theme: Partial<LoadedCustomTheme>): Promise<void> {
+    console.debug('[ThemeManager] Updating theme preview');
+    try {
+      // Only store original settings if this is a new theme (not editing)
+      // We can tell it's a new theme if it has no webURL (which is set when a theme is saved/loaded)
+      if (!theme.webURL) {
+        if (this.originalPreviewColor === null) {
+          this.originalPreviewColor = settingsState.selectedColor;
+        }
+        if (this.originalPreviewTheme === null) {
+          this.originalPreviewTheme = settingsState.DarkMode;
+        }
+      }
+
+      // Apply CSS if changed
+      if (theme.CustomCSS !== undefined) {
+        this.applyPreviewCSS(theme.CustomCSS);
+      }
+
+      // Handle images if present
+      if (theme.CustomImages) {
+        const newImageVariableNames = theme.CustomImages.map(image => image.variableName);
+
+        // Remove old preview images that are no longer present
+        this.previousImageVariableNames.forEach(variableName => {
+          if (!newImageVariableNames.includes(variableName)) {
+            this.removeImageFromDocument(variableName);
+            // Clean up cached URL
+            this.imageUrlCache.delete(variableName);
+          }
+        });
+
+        // Apply or update images
+        theme.CustomImages.forEach((image) => {
+          const existingUrl = this.imageUrlCache.get(image.variableName);
+          if (!existingUrl) {
+            // Only create new URL if one doesn't exist
+            const imageUrl = URL.createObjectURL(image.blob);
+            this.imageUrlCache.set(image.variableName, imageUrl);
+            document.documentElement.style.setProperty(`--${image.variableName}`, `url(${imageUrl})`);
+          } else {
+            // Reuse existing URL
+            document.documentElement.style.setProperty(`--${image.variableName}`, `url(${existingUrl})`);
+          }
+        });
+
+        this.previousImageVariableNames = newImageVariableNames;
+      }
+
+      // Always apply dark mode setting
+      if (theme.forceDark !== undefined) {
+        settingsState.DarkMode = theme.forceDark;
+      }
+
+      // Only apply color if this is a new theme
+      if (!theme.webURL && theme.defaultColour) {
+        settingsState.selectedColor = theme.defaultColour;
+      }
+    } catch (error) {
+      console.error('[ThemeManager] Error updating theme preview:', error);
+    }
+  }
+
+  /**
+   * Update the preview of a theme (debounced)
+   * @param theme - The theme to update the preview of
+   */
+  public updatePreviewDebounced = debounce((theme: Partial<LoadedCustomTheme>): void => {
+    this.updatePreview(theme);
+  }, 2);
+
+  /**
+   * Clear theme preview
+   */
+  public clearPreview(): void {
+    console.debug('[ThemeManager] Clearing theme preview');
+    try {
+      // Remove preview images and revoke URLs
+      this.previousImageVariableNames.forEach(variableName => {
+        this.removeImageFromDocument(variableName);
+      });
+      // Clear all cached URLs
+      this.imageUrlCache.forEach(url => URL.revokeObjectURL(url));
+      this.imageUrlCache.clear();
+      this.previousImageVariableNames = [];
+
+      // Remove preview CSS
+      if (this.previewStyleElement) {
+        this.previewStyleElement.remove();
+        this.previewStyleElement = null;
+      }
+
+      // Restore original settings
+      const storedColor = localStorage.getItem('originalPreviewColor');
+      
+      if (storedColor) {
+        settingsState.selectedColor = storedColor;
+        localStorage.removeItem('originalPreviewColor');
+      } else if (this.originalPreviewColor !== null) {
+        console.debug('[ThemeManager] Restoring color from memory:', this.originalPreviewColor);
+        settingsState.selectedColor = this.originalPreviewColor;
+        console.debug('[ThemeManager] Color after restore:', settingsState.selectedColor);
+      } else {
+        console.debug('[ThemeManager] No color to restore found');
+      }
+      this.originalPreviewColor = null;
+
+      if (this.originalPreviewTheme !== null) {
+        console.debug('[ThemeManager] Restoring dark mode:', this.originalPreviewTheme);
+        settingsState.DarkMode = this.originalPreviewTheme;
+        this.originalPreviewTheme = null;
+      }
+    } catch (error) {
+      console.error('[ThemeManager] Error clearing preview:', error);
+    }
+  }
+
+  // Utility methods
+  private stripBase64Prefix(base64String: string): string {
+    if (!base64String) return '';
+    
+    const prefixRegex = /^data:[^;]+;base64,/;
+    try {
+      return prefixRegex.test(base64String) ? base64String.replace(prefixRegex, '') : base64String;
+    } catch(err) {
+      console.error('[ThemeManager] Error stripping base64 prefix:', err);
+      return '';
+    }
+  }
+
+  private base64ToBlob(base64: string): Blob {
+    try {
+      const byteString = atob(base64);
+      const ab = new ArrayBuffer(byteString.length);
+      const ia = new Uint8Array(ab);
+      
+      for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+      }
+      
+      return new Blob([ab], { type: 'image/png' });
+    } catch(err) {
+      console.error('[ThemeManager] Error converting base64 to blob:', err);
+      return new Blob();
+    }
+  }
+
+  private async blobToBase64(blob: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64String = reader.result as string;
+        const base64Data = base64String.split(',')[1];
+        resolve(base64Data);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+
+  private saveThemeFile(data: object, fileName: string): void {
+    try {
+      const fileData = JSON.stringify(data, null, 2);
+      const blob = new Blob([fileData], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${fileName}.theme.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch(err) {
+      console.error('[ThemeManager] Error saving theme file:', err);
+    }
+  }
+
+  private removeImageFromDocument(variableName: string): void {
+    try {
+      const value = document.documentElement.style.getPropertyValue('--' + variableName);
+      if (value) {
+        const url = this.imageUrlCache.get(variableName);
+        if (url) {
+          URL.revokeObjectURL(url);
+          this.imageUrlCache.delete(variableName);
+        }
+      }
+      document.documentElement.style.removeProperty('--' + variableName);
+    } catch(err) {
+      console.error('[ThemeManager] Error removing image from document:', err);
+    }
+  }
+
+  private applyPreviewCSS(css: string): void {
+    console.debug('[ThemeManager] Applying preview CSS');
+    try {
+      if (!this.previewStyleElement) {
+        this.previewStyleElement = document.createElement('style');
+        this.previewStyleElement.id = 'custom-theme-preview';
+        document.head.appendChild(this.previewStyleElement);
+      }
+      this.previewStyleElement.textContent = css;
+    } catch (error) {
+      console.error('[ThemeManager] Error applying preview CSS:', error);
+    }
+  }
+} 

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

@@ -0,0 +1,268 @@
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
+import type { Plugin } from '../../core/types';
+import { convertTo12HourFormat } from '@/seqta/utils/convertTo12HourFormat';
+import { waitForElm } from '@/seqta/utils/waitForElm';
+
+const timetablePlugin: Plugin<{}, {}> = {
+  id: 'timetable',
+  name: 'Timetable Enhancer',
+  description: 'Adds extra features to the timetable view',
+  version: '1.0.0',
+  settings: {},
+  disableToggle: true,
+
+  run: async (api) => {
+    const { unregister } = api.seqta.onMount('.timetablepage', handleTimetable)
+        
+    return () => {
+      // Call the unregister function to remove the mount listener
+      unregister();
+      
+      const timetablePage = document.querySelector('.timetablepage')
+      if (timetablePage) {
+        const zoomControls = document.querySelector('.timetable-zoom-controls')
+        if (zoomControls) zoomControls.remove()
+        
+        const hideControls = document.querySelector('.timetable-hide-controls')
+        if (hideControls) hideControls.remove()
+        
+        resetTimetableStyles()
+      }
+    }
+  }
+};
+
+// Store event handlers globally for cleanup
+const zoomHandlers = new WeakMap<Element, { zoomIn: () => void; zoomOut: () => void }>()
+
+function resetTimetableStyles(): void {
+  const firstDayColumn = document.querySelector(".dailycal .content .days td") as HTMLElement
+  if (!firstDayColumn) return
+  
+  const baseContainerHeight = parseInt(firstDayColumn.style.height) || firstDayColumn.offsetHeight
+  
+  const dayColumns = document.querySelectorAll(".dailycal .content .days td")
+  dayColumns.forEach((td: Element) => {
+    (td as HTMLElement).style.height = `${baseContainerHeight}px`
+  })
+  
+  const timeColumn = document.querySelector(".times")
+  if (timeColumn) {
+    const times = timeColumn.querySelectorAll(".time")
+    const timeHeight = baseContainerHeight / times.length
+    times.forEach((time: Element) => {
+      (time as HTMLElement).style.height = `${timeHeight}px`
+    })
+  }
+  
+  const lessons = document.querySelectorAll(".dailycal .lesson")
+  lessons.forEach((lesson: Element) => {
+    const lessonEl = lesson as HTMLElement
+    const originalHeight = lessonEl.getAttribute('data-original-height')
+    if (originalHeight) {
+      lessonEl.style.height = `${originalHeight}px`
+    }
+  })
+
+  const entries = document.querySelectorAll(".entry")
+  entries.forEach((entry: Element) => {
+    const entryEl = entry as HTMLElement
+    entryEl.style.opacity = '1'
+  })
+
+  const zoomControls = document.querySelector('.timetable-zoom-controls')
+  if (zoomControls) {
+    const handlers = zoomHandlers.get(zoomControls)
+    if (handlers) {
+      const zoomIn = zoomControls.querySelector('.timetable-zoom:nth-child(2)')
+      const zoomOut = zoomControls.querySelector('.timetable-zoom:nth-child(1)')
+      if (zoomIn) zoomIn.removeEventListener('click', handlers.zoomIn)
+      if (zoomOut) zoomOut.removeEventListener('click', handlers.zoomOut)
+      zoomHandlers.delete(zoomControls)
+    }
+  }
+}
+
+async function handleTimetable(): Promise<void> {
+  await waitForElm(".time", true, 10)
+
+  // Store original heights when timetable loads
+  const lessons = document.querySelectorAll(".dailycal .lesson")
+  lessons.forEach((lesson: Element) => {
+    const lessonEl = lesson as HTMLElement
+    lessonEl.setAttribute(
+      "data-original-height",
+      lessonEl.offsetHeight.toString(),
+    )
+  })
+
+  // Existing time format code
+  if (settingsState.timeFormat == "12") {
+    const times = document.querySelectorAll(".timetablepage .times .time")
+    for (const time of times) {
+      if (!time.textContent) continue
+      time.textContent = convertTo12HourFormat(time.textContent, true)
+    }
+  }
+
+  handleTimetableZoom()
+  handleTimetableAssessmentHide()
+}
+
+function handleTimetableZoom(): void {
+  console.log("Initializing timetable zoom controls")
+
+  // Lazy initialize state variables only when function is first called
+  let timetableZoomLevel = 1
+  let baseContainerHeight: number | null = null
+  const originalEntryPositions = new Map<
+    Element,
+    { topRatio: number; heightRatio: number }
+  >()
+
+  // Create zoom controls
+  const zoomControls = document.createElement("div")
+  zoomControls.className = "timetable-zoom-controls"
+
+  const zoomIn = document.createElement("button")
+  zoomIn.className = "uiButton timetable-zoom iconFamily"
+  zoomIn.innerHTML = "&#xed93;" // Unicode for zoom in icon (custom iconfamily)
+
+  const zoomOut = document.createElement("button")
+  zoomOut.className = "uiButton timetable-zoom iconFamily"
+  zoomOut.innerHTML = "&#xed94;" // Unicode for zoom out icon (custom iconfamily)
+
+  zoomControls.appendChild(zoomOut)
+  zoomControls.appendChild(zoomIn)
+
+  const toolbar = document.getElementById("toolbar")
+  toolbar?.appendChild(zoomControls)
+
+  // Store event listener references
+  const zoomInHandler = () => {
+    if (timetableZoomLevel < 2) {
+      timetableZoomLevel += 0.2
+      updateZoom()
+    }
+  }
+
+  const zoomOutHandler = () => {
+    if (timetableZoomLevel > 0.6) {
+      timetableZoomLevel -= 0.2
+      updateZoom()
+    }
+  }
+
+  zoomIn.addEventListener("click", zoomInHandler)
+  zoomOut.addEventListener("click", zoomOutHandler)
+
+  // Store references for cleanup
+  zoomHandlers.set(zoomControls, { zoomIn: zoomInHandler, zoomOut: zoomOutHandler })
+
+  const initializePositions = () => {
+    // Get the base container height from the first TD
+    const firstDayColumn = document.querySelector(
+      ".dailycal .content .days td",
+    ) as HTMLElement
+    if (!firstDayColumn) return false
+
+    baseContainerHeight =
+      parseInt(firstDayColumn.style.height) || firstDayColumn.offsetHeight
+
+    // Store original ratios
+    const entries = document.querySelectorAll(".entriesWrapper .entry")
+    entries.forEach((entry: Element) => {
+      const entryEl = entry as HTMLElement
+
+      // Calculate ratios relative to detected base height
+      if (baseContainerHeight === null) return
+      const topRatio = parseInt(entryEl.style.top) / baseContainerHeight
+      const heightRatio = parseInt(entryEl.style.height) / baseContainerHeight
+
+      originalEntryPositions.set(entry, { topRatio, heightRatio })
+    })
+
+    return true
+  }
+
+  const updateZoom = () => {
+    // Initialize positions if not already done
+    if (baseContainerHeight === null && !initializePositions()) {
+      console.error("Failed to initialize positions")
+      return
+    }
+
+    console.debug(`Updating zoom level to: ${timetableZoomLevel}`)
+
+    // Calculate new container height
+    if (baseContainerHeight === null) return
+    const newContainerHeight = baseContainerHeight * timetableZoomLevel
+
+    // Update all day columns (TDs)
+    const dayColumns = document.querySelectorAll(".dailycal .content .days td")
+    dayColumns.forEach((td: Element) => {
+      (td as HTMLElement).style.height = `${newContainerHeight}px`
+    })
+
+    // Update all entries using stored ratios
+    const entries = document.querySelectorAll(".entriesWrapper .entry")
+    entries.forEach((entry: Element) => {
+      const entryEl = entry as HTMLElement
+      const originalRatios = originalEntryPositions.get(entry)
+
+      if (originalRatios) {
+        // Calculate new positions from original ratios
+        const newTop = originalRatios.topRatio * newContainerHeight
+        const newHeight = originalRatios.heightRatio * newContainerHeight
+
+        // Apply new values
+        entryEl.style.top = `${Math.round(newTop)}px`
+        entryEl.style.height = `${Math.round(newHeight)}px`
+      }
+    })
+
+    // Update time column to match
+    const timeColumn = document.querySelector(".times")
+    if (timeColumn) {
+      const times = timeColumn.querySelectorAll(".time")
+      const timeHeight = newContainerHeight / times.length
+      times.forEach((time: Element) => {
+        (time as HTMLElement).style.height = `${timeHeight}px`
+      })
+    }
+
+    entries[Math.round((entries.length - 1) / 2)].scrollIntoView({
+      behavior: "instant",
+      block: "center",
+    })
+  }
+}
+
+function handleTimetableAssessmentHide(): void {
+  const hideControls = document.createElement("div")
+  hideControls.className = "timetable-hide-controls"
+
+  const hideOn = document.createElement("button")
+  hideOn.className = "uiButton timetable-hide iconFamily"
+  hideOn.innerHTML = "&#128065;"
+
+  hideControls.appendChild(hideOn)
+
+  const toolbar = document.getElementById("toolbar")
+  toolbar?.appendChild(hideControls)
+
+  function hideElements(): void {
+    const entries = document.querySelectorAll(".entry")
+    
+    entries.forEach((entry: Element) => {
+      const entryEl = entry as HTMLElement
+      if (!entryEl.classList.contains("assessment")) {
+        entryEl.style.opacity = entryEl.style.opacity === "0.3" ? "1" : "0.3"
+      }
+    })
+  }
+
+  hideOn.addEventListener("click", hideElements)
+}
+
+export default timetablePlugin;