Merge pull request #257 from BetterSEQTA/main

Merge main into global-search
2026-06-06 11:44:40 +00:00 · 2025-05-03 18:58:46 +10:00
209 changed files with 23185 additions and 39634 deletions
@@ -2,83 +2,87 @@
 module.exports = {
  forbidden: [
    {
-      name: "no-circular",
+      name: 'no-circular',
-      severity: "warn",
+      severity: 'warn',
      comment:
-        "This dependency is part of a circular relationship. You might want to revise " +
+        '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) ",
+        'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
      from: {},
      to: {
-        circular: true,
+        circular: true
-      },
+      }
    },
    {
-      name: "no-orphans",
+      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",
+      severity: 'warn',
      from: {
        orphan: true,
        pathNot: [
-          "(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$", // dot files
+          '(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$',                  // dot files
-          "[.]d[.]ts$", // TypeScript declaration files
+          '[.]d[.]ts$',                                                       // TypeScript declaration files
-          "(^|/)tsconfig[.]json$", // TypeScript config
+          '(^|/)tsconfig[.]json$',                                            // TypeScript config
-          "(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$", // other configs
+          '(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$' // other configs
-        ],
+        ]
      },
      to: {},
    },
    {
-      name: "no-deprecated-core",
+      name: 'no-deprecated-core',
      comment:
-        "A module depends on a node core module that has been deprecated. Find an alternative - these are " +
+        '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",
+      severity: 'warn',
      from: {},
      to: {
-        dependencyTypes: ["core"],
+        dependencyTypes: [
-        path: [
+          'core'
          "^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$",
        ],
-      },
+        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",
+      name: 'not-to-deprecated',
      comment:
-        "This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later " +
+        '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.",
+        'version of that module, or find an alternative. Deprecated modules are a security risk.',
-      severity: "warn",
+      severity: 'warn',
      from: {},
      to: {
-        dependencyTypes: ["deprecated"],
+        dependencyTypes: [
-      },
+          'deprecated'
        ]
      }
    },
    {
-      name: "no-non-package-json",
+      name: 'no-non-package-json',
-      severity: "error",
+      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 " +
@@ -86,75 +90,84 @@ module.exports = {
        "in your package.json.",
      from: {},
      to: {
-        dependencyTypes: ["npm-no-pkg", "npm-unknown"],
+        dependencyTypes: [
-      },
+          'npm-no-pkg',
          'npm-unknown'
        ]
      }
    },
    {
-      name: "not-to-unresolvable",
+      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.",
+        'module: add it to your package.json. In all other cases you likely already know what to do.',
-      severity: "error",
+      severity: 'error',
      from: {},
      to: {
-        couldNotResolve: true,
+        couldNotResolve: true
-      },
+      }
    },
    {
-      name: "no-duplicate-dep-types",
+      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",
+      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"],
+        dependencyTypesNot: ["type-only"]
-      },
+      }
    },
    /* rules you might want to tweak for your specific situation: */
    {
-      name: "not-to-spec",
+      name: 'not-to-spec',
      comment:
-        "This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. " +
+        '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.",
+        'responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.',
-      severity: "error",
+      severity: 'error',
      from: {},
      to: {
-        path: "[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$",
+        path: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
-      },
+      }
    },
    {
-      name: "not-to-dev-dep",
+      name: 'not-to-dev-dep',
-      severity: "error",
+      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 " +
+        '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 " +
+        '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.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration',
      from: {
-        path: "^(src)",
+        path: '^(src)',
-        pathNot: "[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$",
+        pathNot: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
      },
      to: {
-        dependencyTypes: ["npm-dev"],
+        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"],
+        dependencyTypesNot: [
-        pathNot: ["node_modules/@types/"],
+          'type-only'
-      },
+        ],
        pathNot: [
          'node_modules/@types/'
        ]
      }
    },
    {
-      name: "optional-deps-used",
+      name: 'optional-deps-used',
-      severity: "info",
+      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. " +
@@ -162,28 +175,33 @@ module.exports = {
        "dependency-cruiser configuration.",
      from: {},
      to: {
-        dependencyTypes: ["npm-optional"],
+        dependencyTypes: [
-      },
+          'npm-optional'
        ]
      }
    },
    {
-      name: "peer-deps-used",
+      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",
+      severity: 'warn',
      from: {},
      to: {
-        dependencyTypes: ["npm-peer"],
+        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"],
+      path: ['node_modules']
    },
    /* Which modules to exclude */
@@ -256,7 +274,7 @@ module.exports = {
       defaults to './tsconfig.json'.
     */
    tsConfig: {
-      fileName: "tsconfig.json",
+      fileName: 'tsconfig.json'
    },
    /* Webpack configuration to use to get resolve options from.
@@ -346,8 +364,8 @@ module.exports = {
        "bun:wrap",
        "detect-libc",
        "undici",
-        "ws",
+        "ws"
-      ],
+      ]
    },
    reporterOptions: {
@@ -357,7 +375,7 @@ module.exports = {
           collapses everything in node_modules to one folder deep so you see
           the external modules, but their innards.
         */
-        collapsePattern: "node_modules/(?:@[^/]+/[^/]+|[^/]+)",
+        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
@@ -379,8 +397,7 @@ module.exports = {
           dependency graph reporter (`archi`) you probably want to tweak
           this collapsePattern to your situation.
        */
-        collapsePattern:
+        collapsePattern: '^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)',
          "^(?: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
@@ -388,10 +405,10 @@ module.exports = {
         */
        // theme: { },
      },
-      text: {
+      "text": {
-        highlightFocused: true,
+        "highlightFocused": true
      },
    },
      },
    }
  }
 };
 // generated: dependency-cruiser@16.10.0 on 2025-02-16T22:32:01.621Z
@@ -12,15 +12,12 @@
  },
  "rules": {
    // allow importing ts extensions
-    "sort-imports": [
+    "sort-imports": ["error", {
      "error",
      {
      "ignoreCase": true,
      "ignoreDeclarationSort": true,
      "ignoreMemberSort": false,
      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
-      }
+    }],
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
@@ -2,7 +2,6 @@ name: Bug report
 description: Report an issue with the modpack in its unmodified state. For other issues, use Discord.
 labels: bug
 title: "[BUG]"
 type: "Bug"
 body:
 - type: markdown
  attributes:
@@ -2,8 +2,8 @@ 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
@@ -25,6 +25,7 @@ body:
      ## 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
@@ -36,17 +37,18 @@ body:
  validations:
    required: true
 - type: input
  attributes:
    label: Feature Details
-      description: Please write, with as much detail as possible, what you would like to see from this feature.
+    description: Please write, with as much detail as possible, what you would like to see from this mod.
-      placeholder: it would be cool if
+    placeholder: I would like to see...
  validations:
    required: false
 - type: textarea
  attributes:
    label: Additional details
-      description: Anything else that would help describe your vision (reference images, descriptions, etc)
+    description: Anything else you want to add?
  validations:
    required: false
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
- Demonstrating empathy and kindness toward other people
+* Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
+* Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
+* Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
+* Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
- Focusing on what is best not just for us as individuals, but for the
+* Focusing on what is best not just for us as individuals, but for the
  overall community
 Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or
+* The use of sexualized language or imagery, and sexual attention or
  advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
+* Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
+* Public or private harassment
- Publishing others' private information, such as a physical or email
+* Publishing others' private information, such as a physical or email
  address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
+* Other conduct which could reasonably be considered inappropriate in a
  professional setting
 ## Enforcement Responsibilities
@@ -1,3 +1,4 @@
 # 
 <a href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel">
@@ -58,13 +59,15 @@ Don't worry- if you get stuck feel free to ask around in the [discord](https://d
 ## Getting started
-&nbsp;&nbsp;&nbsp; **1. Clone the repository**
+1. Clone the repository
 ```
 git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
 ```
-&nbsp;&nbsp;&nbsp; **2. Install dependencies**
+
 1. Install dependencies
 You may install the dependencies like below:
@@ -77,30 +80,29 @@ 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)
 &nbsp;&nbsp;&nbsp; **3. Run the dev script (it updates as you save files)**
 ```
-npm run dev # or use your preferred package manager
+npm run dev # or use your perferred package manager
 ```
 ### Building for production
-&nbsp;&nbsp;&nbsp; **4. Run the build script**
+2. Run the build script
 ```
-npm run build # or use your preferred package manager
+npm run build # or use your perferred package manager
 ```
-&nbsp;&nbsp;&nbsp; **4.1. Package it up (optional)**
+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 preferred package manager
+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
 &nbsp;&nbsp;&nbsp; **5. Load the extension into chrome**
 - Go to `chrome://extensions`
 - Enable developer mode
@@ -114,7 +116,7 @@ Just remember, in order to update changes to the extension if you are running in
 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.
@@ -128,10 +130,9 @@ The folder structure is as follows:
 </a>
 Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
 ## Credits
-This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development from lead developers [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph) with help from other volunteers
+This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development by [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph)
 ## Star History
@@ -5,12 +5,11 @@
 Below here is the supported versions of BetterSEQTA+. Anything older than this is not supported and contains bugs.
 | Version | Supported          |
-| ------- | --------- |
+| ------- | ------------------ |
 | 3.4.3   | ✅ |
 | < 3.4.3   | :x:                |
 `*` May not work on other devices.
 ## Reporting a Vulnerability
 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
@@ -7,13 +7,11 @@ Welcome to the BetterSEQTA+ documentation! This documentation will help you unde
 ## 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
@@ -22,7 +22,6 @@ Thank you for your interest in contributing to BetterSEQTA+! This document provi
 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
@@ -106,7 +105,6 @@ git checkout -b feature/my-new-feature
 2. **Write Clear Commit Messages**
   Follow the conventional commits format:
   ```
   feat: add new feature
   fix: resolve bug with timetable
@@ -120,7 +118,6 @@ git checkout -b feature/my-new-feature
 4. **Run Tests**
   Make sure all tests pass before submitting your PR:
   ```bash
   npm test
   ```
@@ -160,7 +157,6 @@ We follow TypeScript best practices and have a consistent code style:
 5. **Use Linters**
   We use ESLint and Prettier. Run them before submitting your PR:
   ```bash
   npm run lint
   npm run format
@@ -177,7 +173,6 @@ If you find a bug, please report it by creating an issue on GitHub:
 2. **Use the Bug Report Template**
   Fill in all sections of the bug report template:
   - Description
   - Steps to reproduce
   - Expected behavior
@@ -200,7 +195,6 @@ We welcome feature suggestions! To suggest a new feature:
 2. **Use the Feature Request Template**
   Fill in all sections of the feature request template:
   - Description
   - Use case
   - Potential implementation
@@ -132,7 +132,6 @@ 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
@@ -140,7 +139,6 @@ Make sure:
 #### Development build not updating
 Try:
 1. Stopping the development server
 2. Clearing your browser cache
 3. Removing the extension from your browser
@@ -5,7 +5,6 @@ Hey there! 👋 So you want to create a plugin for BetterSEQTA+? That's awesome!
 ## 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
@@ -17,32 +16,29 @@ In BetterSEQTA+, a plugin is like a mini-app that adds new features to SEQTA. Th
 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";
+import type { Plugin } from '@/plugins/core/types';
 const myFirstPlugin: Plugin = {
  // Every plugin needs these basic details
-  id: "my-first-plugin",
+  id: 'my-first-plugin',
-  name: "My First Plugin",
+  name: 'My First Plugin',
-  description: "Adds a friendly message to SEQTA",
+  description: 'Adds a friendly message to SEQTA',
-  version: "1.0.0",
+  version: '1.0.0',
  // This tells BetterSEQTA+ that users can turn our plugin on/off
  disableToggle: true,
  // Optional: Mark your plugin as beta to show a "Beta" tag in settings
  beta: true,
  // This is where the magic happens! 
  run: async (api) => {
    // Wait for the homepage to load
-    api.seqta.onMount(".home-page", (homePage) => {
+    api.seqta.onMount('.home-page', (homePage) => {
      // Create our message
-      const message = document.createElement("div");
+      const message = document.createElement('div');
-      message.textContent = "Hello from my first plugin! 🎉";
+      message.textContent = 'Hello from my first plugin! 🎉';
-      message.style.padding = "20px";
+      message.style.padding = '20px';
-      message.style.backgroundColor = "#e9f5ff";
+      message.style.backgroundColor = '#e9f5ff';
-      message.style.borderRadius = "8px";
+      message.style.borderRadius = '8px';
-      message.style.margin = "20px";
+      message.style.margin = '20px';
      // Add it to the page
      homePage.prepend(message);
@@ -50,10 +46,10 @@ const myFirstPlugin: Plugin = {
    // Return a cleanup function that removes our message when the plugin is disabled
    return () => {
-      const message = document.querySelector(".home-page > div");
+      const message = document.querySelector('.home-page > div');
      message?.remove();
    };
-  },
+  }
 };
 export default myFirstPlugin;
@@ -68,11 +64,10 @@ Let's break down what's happening here:
   - `description`: Explain what your plugin does
   - `version`: Your plugin's version number
 3. We set `disableToggle: true` so users can turn our plugin on/off in settings
-4. We set `beta: true` to mark the plugin as beta
+4. The `run` function is where we put our plugin's code
-5. 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 use `api.seqta.onMount` to wait for the homepage to load
+6. We create and style a message element
-7. We create and style a message element
+7. We return a cleanup function that removes our changes when the plugin is disabled
 8. We return a cleanup function that removes our changes when the plugin is disabled
 ## The Plugin API
@@ -84,13 +79,13 @@ This helps you interact with SEQTA's pages:
 ```typescript
 // Wait for an element to appear on the page
-api.seqta.onMount(".some-class", (element) => {
+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);
+  console.log('User went to:', page);
 });
 // Get the current page
@@ -102,12 +97,8 @@ const currentPage = api.seqta.getCurrentPage();
 Want to let users customize your plugin? Use settings!
 ```typescript
-import { BasePlugin } from "@/plugins/core/settings";
+import { BasePlugin } from '@/plugins/core/settings';
-import {
+import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
  booleanSetting,
  defineSettings,
  Setting,
 } from "@/plugins/core/settingsHelpers";
 // Define your settings
 const settings = defineSettings({
@@ -115,7 +106,7 @@ const settings = defineSettings({
    default: true,
    title: "Show Welcome Message",
    description: "Show a friendly message on the homepage",
-  }),
+  })
 });
 // Create a class for your plugin
@@ -138,14 +129,14 @@ const myPlugin: Plugin<typeof settings> = {
    }
    // Listen for setting changes
-    api.settings.onChange("showMessage", (newValue) => {
+    api.settings.onChange('showMessage', (newValue) => {
      if (newValue) {
        // Show the message
      } else {
        // Hide the message
      }
    });
-  },
+  }
 };
 ```
@@ -155,14 +146,14 @@ Need to save some data? The storage API has got you covered:
 ```typescript
 // Save some data
-await api.storage.set("lastVisit", new Date().toISOString());
+await api.storage.set('lastVisit', new Date().toISOString());
 // Get it back later
-const lastVisit = await api.storage.get("lastVisit");
+const lastVisit = await api.storage.get('lastVisit');
 // Listen for changes
-api.storage.onChange("lastVisit", (newValue) => {
+api.storage.onChange('lastVisit', (newValue) => {
-  console.log("Last visit updated:", newValue);
+  console.log('Last visit updated:', newValue);
 });
 ```
@@ -172,12 +163,12 @@ Want your plugin to be able to interface with other plugins? Then use events!
 ```typescript
 // Listen for an event
-api.events.on("myCustomEvent", (data) => {
+api.events.on('myCustomEvent', (data) => {
-  console.log("Got event:", data);
+  console.log('Got event:', data);
 });
 // Send an event
-api.events.emit("myCustomEvent", { some: "data" });
+api.events.emit('myCustomEvent', { some: 'data' });
 ```
 ## Adding Styles
@@ -208,7 +199,7 @@ const myPlugin: Plugin = {
  run: async (api) => {
    // Your plugin code here
-  },
+  }
 };
 ```
@@ -217,31 +208,28 @@ const myPlugin: Plugin = {
 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");
+     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
@@ -250,37 +238,10 @@ Here are some tips to make your plugin awesome:
   - Add clear settings with good descriptions
   - Use `disableToggle: true` so users can turn it off if needed
   - Add helpful error messages if something goes wrong
   - Use `beta: true` for experimental features to let users know they're trying something new
 ## Plugin Metadata Options
 Your plugin object supports several optional flags to customize how it appears and behaves:
 ```typescript
 const myPlugin: Plugin = {
  id: "my-plugin",
  name: "My Plugin",
  description: "What my plugin does",
  version: "1.0.0",
  // Optional flags:
  disableToggle: true,     // Show enable/disable toggle in settings
  defaultEnabled: false,   // Start disabled by default (requires disableToggle: true)
  beta: true,             // Show "Beta" tag in settings UI
  // Your plugin code...
  run: async (api) => { /* ... */ },
 };
 ```
 - **`disableToggle`**: When `true`, users can enable/disable your plugin in settings
 - **`defaultEnabled`**: When `false`, your plugin starts disabled (only works with `disableToggle: true`)
 - **`beta`**: When `true`, shows an orange "Beta" tag next to your plugin name in settings
 ## Examples
 Want to see more examples? Check out our built-in plugins:
 - [themes](../../src/plugins/built-in/themes/index.ts): Shows how to change SEQTA's appearance
 - [notificationCollector](../../src/plugins/built-in/notificationCollector/index.ts): Shows how to work with SEQTA's notifications
 - [timetable](../../src/plugins/built-in/timetable/index.ts): Shows how to modify SEQTA's timetable view
@@ -289,7 +250,6 @@ Want to see more examples? Check out our built-in plugins:
 ## 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)
@@ -7,13 +7,9 @@ This document provides detailed technical information about BetterSEQTA+'s plugi
 Here's how a plugin is structured:
 ```typescript
-import type { Plugin } from "@/plugins/core/types";
+import type { Plugin } from '@/plugins/core/types';
-import { BasePlugin } from "@/plugins/core/settings";
+import { BasePlugin } from '@/plugins/core/settings';
-import {
+import { booleanSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
  booleanSetting,
  defineSettings,
  Setting,
 } from "@/plugins/core/settingsHelpers";
 // First, define your settings
 const settings = defineSettings({
@@ -21,7 +17,7 @@ const settings = defineSettings({
    default: true,
    title: "Enable Feature",
    description: "Turn this feature on or off",
-  }),
+  })
 });
 // Create a class to handle your settings
@@ -35,92 +31,59 @@ const settingsInstance = new MyPluginClass();
 // Create your plugin
 const myPlugin: Plugin<typeof settings> = {
-  id: "my-plugin",
+  id: 'my-plugin',
-  name: "My Plugin",
+  name: 'My Plugin',
-  description: "A cool plugin that does things",
+  description: 'A cool plugin that does things',
-  version: "1.0.0",
+  version: '1.0.0',
  settings: settingsInstance.settings,
  disableToggle: true,
  beta: true,
  run: async (api) => {
-    console.log("Plugin is running!");
+    console.log('Plugin is running!');
    // Do stuff when settings change
-    api.settings.onChange("enabled", (enabled) => {
+    api.settings.onChange('enabled', (enabled) => {
      if (enabled) {
-        console.log("Feature enabled!");
+        console.log('Feature enabled!');
      }
    });
    // Return a cleanup function
    return () => {
-      console.log("Plugin cleanup");
+      console.log('Plugin cleanup');
    };
-  },
+  }
 };
 export default myPlugin;
 ```
 ## Plugin Metadata
 The plugin object supports several metadata fields and options:
 ```typescript
 interface Plugin {
  // Required fields
  id: string;                    // Unique identifier (lowercase, dashes)
  name: string;                  // Display name shown to users
  description: string;           // Brief description of what the plugin does
  version: string;               // Semantic version (e.g., "1.0.0")
  settings: PluginSettings;      // Plugin settings object
  run: (api: PluginAPI) => void; // Main plugin function
  // Optional fields
  styles?: string;               // CSS styles to inject
  disableToggle?: boolean;       // Show enable/disable toggle in settings
  defaultEnabled?: boolean;      // Start enabled/disabled (requires disableToggle)
  beta?: boolean;               // Show "Beta" tag in settings UI
 }
 ```
 ### Metadata Options
 - **`disableToggle`**: When `true`, users can enable/disable your plugin in the settings page
 - **`defaultEnabled`**: When `false`, your plugin starts disabled by default (only works with `disableToggle: true`)
 - **`beta`**: When `true`, displays an orange "Beta" tag next to your plugin name in the settings UI
 - **`styles`**: CSS string that gets injected into the page when your plugin runs
 ## SEQTA API
 The SEQTA API helps you interact with SEQTA's pages:
 ```typescript
-import type { Plugin } from "@/plugins/core/types";
+import type { Plugin } from '@/plugins/core/types';
 const seqtaPlugin: Plugin<typeof settings> = {
-  id: "seqta-example",
+  id: 'seqta-example',
-  name: "SEQTA Example",
+  name: 'SEQTA Example',
-  description: "Shows how to use the SEQTA API",
+  description: 'Shows how to use the SEQTA API',
-  version: "1.0.0",
+  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    // Wait for elements to appear
-    const { unregister: timetableUnregister } = api.seqta.onMount(
+    const { unregister: timetableUnregister } = api.seqta.onMount('.timetable', (timetable) => {
-      ".timetable",
+      const button = document.createElement('button');
-      (timetable) => {
+      button.textContent = 'Export';
        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);
+      console.log('User went to:', page);
    });
    // Clean up when disabled
@@ -128,7 +91,7 @@ const seqtaPlugin: Plugin<typeof settings> = {
      timetableUnregister();
      pageUnregister();
    };
-  },
+  }
 };
 export default seqtaPlugin;
@@ -139,29 +102,22 @@ export default seqtaPlugin;
 Here's how to add settings to your plugin:
 ```typescript
-import type { Plugin } from "@/plugins/core/types";
+import type { Plugin } from '@/plugins/core/types';
-import { BasePlugin } from "@/plugins/core/settings";
+import { BasePlugin } from '@/plugins/core/settings';
-import {
+import { booleanSetting, stringSetting, numberSetting, selectSetting, defineSettings, Setting } from '@/plugins/core/settingsHelpers';
  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",
+    description: "Enable dark mode"
  }),
  userName: stringSetting({
    default: "",
    title: "User Name",
    description: "Your display name",
-    placeholder: "Enter your name...",
+    placeholder: "Enter your name..."
  }),
  theme: selectSetting({
    default: "light",
@@ -169,9 +125,9 @@ const settings = defineSettings({
    description: "Choose your theme",
    options: [
      { value: "light", label: "Light" },
-      { value: "dark", label: "Dark" },
+      { value: "dark", label: "Dark" }
-    ],
+    ]
-  }),
+  })
 });
 // Create your settings class
@@ -188,29 +144,29 @@ class ThemePluginClass extends BasePlugin<typeof settings> {
 // Create the plugin
 const themePlugin: Plugin<typeof settings> = {
-  id: "theme-example",
+  id: 'theme-example',
-  name: "Theme Example",
+  name: 'Theme Example',
-  description: "Shows how to use settings",
+  description: 'Shows how to use settings',
-  version: "1.0.0",
+  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");
+      document.body.classList.add('dark');
    }
    // Listen for changes
-    const { unregister } = api.settings.onChange("darkMode", (enabled) => {
+    const { unregister } = api.settings.onChange('darkMode', (enabled) => {
-      document.body.classList.toggle("dark", enabled);
+      document.body.classList.toggle('dark', enabled);
    });
    return () => {
      unregister();
-      document.body.classList.remove("dark");
+      document.body.classList.remove('dark');
    };
-  },
+  }
 };
 export default themePlugin;
@@ -221,13 +177,13 @@ export default themePlugin;
 Here's how to use storage in your plugin:
 ```typescript
-import type { Plugin } from "@/plugins/core/types";
+import type { Plugin } from '@/plugins/core/types';
 const storagePlugin: Plugin<typeof settings> = {
-  id: "storage-example",
+  id: 'storage-example',
-  name: "Storage Example",
+  name: 'Storage Example',
-  description: "Shows how to use storage",
+  description: 'Shows how to use storage',
-  version: "1.0.0",
+  version: '1.0.0',
  settings: {},
  disableToggle: true,
@@ -236,21 +192,21 @@ const storagePlugin: Plugin<typeof settings> = {
    await api.storage.loaded;
    // Save some data
-    await api.storage.set("lastVisit", new Date().toISOString());
+    await api.storage.set('lastVisit', new Date().toISOString());
    // Get saved data
-    const lastVisit = await api.storage.get("lastVisit");
+    const lastVisit = await api.storage.get('lastVisit');
-    console.log("Last visit:", lastVisit);
+    console.log('Last visit:', lastVisit);
    // Listen for changes
-    const { unregister } = api.storage.onChange("lastVisit", (newValue) => {
+    const { unregister } = api.storage.onChange('lastVisit', (newValue) => {
-      console.log("Last visit updated:", newValue);
+      console.log('Last visit updated:', newValue);
    });
    return () => {
      unregister();
    };
-  },
+  }
 };
 export default storagePlugin;
@@ -261,39 +217,33 @@ export default storagePlugin;
 Here's how to use events in your plugin:
 ```typescript
-import type { Plugin } from "@/plugins/core/types";
+import type { Plugin } from '@/plugins/core/types';
 const eventsPlugin: Plugin<typeof settings> = {
-  id: "events-example",
+  id: 'events-example',
-  name: "Events Example",
+  name: 'Events Example',
-  description: "Shows how to use events",
+  description: 'Shows how to use events',
-  version: "1.0.0",
+  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    // Listen for theme changes
-    const { unregister: themeListener } = api.events.on(
+    const { unregister: themeListener } = api.events.on('theme.changed', (theme) => {
-      "theme.changed",
+      console.log('Theme changed to:', theme);
-      (theme) => {
+    });
        console.log("Theme changed to:", theme);
      },
    );
    // Listen for notifications
-    const { unregister: notifyListener } = api.events.on(
+    const { unregister: notifyListener } = api.events.on('notification.new', (notification) => {
-      "notification.new",
+      console.log('New notification:', notification);
-      (notification) => {
+    });
        console.log("New notification:", notification);
      },
    );
    // Clean up listeners
    return () => {
      themeListener();
      notifyListener();
    };
-  },
+  }
 };
 export default eventsPlugin;
@@ -304,20 +254,20 @@ export default eventsPlugin;
 Here's how to write efficient plugins:
 ```typescript
-import type { Plugin } from "@/plugins/core/types";
+import type { Plugin } from '@/plugins/core/types';
 const efficientPlugin: Plugin<typeof settings> = {
-  id: "efficient-example",
+  id: 'efficient-example',
-  name: "Efficient Example",
+  name: 'Efficient Example',
-  description: "Shows performance best practices",
+  description: 'Shows performance best practices',
-  version: "1.0.0",
+  version: '1.0.0',
  settings: {},
  disableToggle: true,
  run: async (api) => {
    // ✅ Good: Use onMount
-    const { unregister } = api.seqta.onMount(".timetable", (el) => {
+    const { unregister } = api.seqta.onMount('.timetable', (el) => {
-      el.classList.add("enhanced");
+      el.classList.add('enhanced');
    });
    // ❌ Bad: Don't use intervals
@@ -327,7 +277,7 @@ const efficientPlugin: Plugin<typeof settings> = {
    // }, 100);
    // ✅ Good: Cache DOM elements
-    const header = document.querySelector(".header");
+    const header = document.querySelector('.header');
    if (header) {
      // Reuse header instead of querying again
    }
@@ -335,7 +285,7 @@ const efficientPlugin: Plugin<typeof settings> = {
    // ✅ Good: Batch DOM updates
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 10; i++) {
-      const div = document.createElement("div");
+      const div = document.createElement('div');
      fragment.appendChild(div);
    }
    document.body.appendChild(fragment);
@@ -344,14 +294,13 @@ const efficientPlugin: Plugin<typeof settings> = {
      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
@@ -359,7 +308,6 @@ Each plugin should be in its own file and exported as the default export. The pl
 5. Export the plugin as default
 Remember to always:
 - Use proper TypeScript types
 - Clean up when your plugin is disabled
 - Handle errors gracefully
@@ -1,17 +0,0 @@
 export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src'],
  testMatch: [
    '**/__tests__/**/*.ts',
    '**/?(*.)+(spec|test).ts'
  ],
  transform: {
    '^.+\\.ts$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'js', 'json'],
  collectCoverageFrom: [
    'src/**/*.ts',
    '!src/**/*.d.ts',
  ],
 }; 
@@ -1,46 +1,13 @@
 import fs from "fs";
 import mime from "mime-types";
 /**
 * A Vite plugin designed to load files as base64 encoded data URLs.
 * This plugin intercepts module imports that have a `?base64` query parameter
 * appended to the file path. It then reads the targeted file, converts its content
 * to a base64 string, and constructs a data URL which is then exported as the
 * default export of a new JavaScript module.
 *
 * @example
 * // To use this loader, import a file with ?base64 query:
 * // import myImageBase64 from './path/to/myimage.png?base64';
 * // myImageBase64 will then be a string like "data:image/png;base64,..."
 */
 export const base64Loader = {
  /**
   * The name of the Vite plugin.
   * @type {string}
   */
  name: "base64-loader",
  /**
   * The core transformation function of the Vite plugin.
   * It is called by Vite for modules that might need transformation. This function
   * checks if the module ID includes the `?base64` query. If so, it reads the
   * specified file, converts it to a base64 data URL, and returns a new
   * JavaScript module that default exports this data URL.
   *
   * @param {any} _ The original code of the file. This parameter is unused by this loader.
   * @param {string} id The ID of the module being transformed. This string typically
   *                    contains the absolute file path and any query parameters
   *                    (e.g., "/path/to/file.png?base64").
   * @returns {string | null} If the module ID does not contain `?base64` query,
   *                          it returns `null` to indicate no transformation.
   *                          Otherwise, it returns a string of JavaScript code
   *                          that default exports the base64 data URL of the file.
   *                          For example: `export default 'data:image/png;base64,xxxx';`
   */
  transform(_: any, id: string) {
    const [filePath, query] = id.split("?");
    if (query !== "base64") return null;
-    const data = fs.readFileSync(filePath, { encoding: "base64" });
+    const data = fs.readFileSync(filePath, { encoding: 'base64' });
    const mimeType = mime.lookup(filePath);
    const dataURL = `data:${mimeType};base64,${data}`;
@@ -1,58 +1,25 @@
 // ref: https://stackoverflow.com/a/76920975
-import type { Plugin } from "vite";
+import type { Plugin } from 'vite';
 /**
 * Creates a Vite plugin designed to gracefully handle the conclusion of the build process.
 * This plugin utilizes the `buildEnd` and `closeBundle` hooks provided by Vite.
 * It checks for errors at the end of the build:
 * - If an error occurred during the build (`buildEnd` hook receives an error), it logs the error
 *   and explicitly exits the Node.js process with a status code of 1 (indicating failure).
 * - If the build completes without errors and the bundle is successfully generated
 *   (`closeBundle` hook is called), it logs a success message and exits the process
 *   with a status code of 0 (indicating success).
 * This explicit process exiting can be useful in CI/CD environments or scripts that
 * rely on the process status code to determine the build outcome.
 * The core logic for using these hooks to exit the process is inspired by
 * a solution found on StackOverflow (https://stackoverflow.com/a/76920975).
 *
 * @returns {Plugin} A Vite plugin object configured with `name`, `buildEnd`, and `closeBundle` hooks.
 */
 export default function ClosePlugin(): Plugin {
  return {
-    /**
+    name: 'ClosePlugin', // required, will show up in warnings and errors
     * The unique name of this Vite plugin. This name is used by Vite for identification
     * purposes and will appear in warnings, errors, and logs related to this plugin.
     * @type {string}
     */
    name: "ClosePlugin", // required, will show up in warnings and errors
-    /**
+    // use this to catch errors when building
     * A Vite hook that is called when the build process has finished, regardless of
     * whether it was successful or encountered an error.
     *
     * @param {Error} [error] An optional error object. If the build failed, this parameter
     *                        will contain the error that occurred. If the build was successful,
     *                        this parameter will be undefined or null.
     */
    buildEnd(error) {
      if(error) {
-        console.error("Error bundling");
+        console.error('Error bundling')
-        console.error(error);
+        console.error(error)
-        process.exit(1); // Exit with status 1 indicating an error
+        process.exit(1)
      } else {
-        console.log("Build ended"); // Log successful completion of the build phase
+        console.log('Build ended')
      }
    },
-    /**
+    // use this to catch the end of a build without errors
     * A Vite hook that is called after the `buildEnd` hook, but only if the build
     * was successful (i.e., no errors were passed to `buildEnd`) and all output
     * files have been generated and written to disk. This signifies the successful
     * completion of the entire bundling process.
     */
    closeBundle() {
-      console.log("Bundle closed"); // Log successful closure of the bundle
+      console.log('Bundle closed')
-      process.exit(0); // Exit with status 0 indicating a successful build
+      process.exit(0)
    },
-  };
+  }
 }
@@ -1,22 +1,12 @@
-import type { Browser, BuildTarget, Manifest } from "./types";
+import type { Browser, BuildTarget, Manifest } from './types'
-import type { AnyCase } from "./utils";
+import type { AnyCase } from './utils'
 /**
- * Packages a given manifest object with a specific target browser identifier.
+ *
 * This function is typically used in multi-browser extension build processes
 * to create a configuration object that pairs the manifest data with the browser
 * it's intended for. The `AnyCase<Browser>` type for the browser parameter
 * implies that browser names like 'chrome', 'firefox', etc., can be provided
 * in various casings.
 *
 * @export
- * @param {Manifest} manifest The core manifest data for the extension,
+ * @param {Manifest} manifest
- *                            compatible with `chrome.runtime.ManifestV3` as defined by the {@link Manifest} type.
+ * @param {AnyCase<Browser>} browser
- * @param {AnyCase<Browser>} browser The target browser identifier (e.g., 'chrome', 'firefox', 'CHROME').
+ * @return {*}  {@link BuildTarget}
 *                                   Refers to the {@link Browser} type, allowing for flexible casing.
 * @returns {BuildTarget} An object that pairs the `manifest` with its target `browser`.
 *                        The structure is `{ manifest: Manifest; browser: AnyCase<Browser>; }`
 *                        as defined by the {@link BuildTarget} type.
 */
 export function createManifest(
  manifest: Manifest,
@@ -25,22 +15,19 @@ export function createManifest(
  return {
    manifest,
    browser,
-  };
+  }
 }
 /**
- * Defines a base manifest object.
+ * create a base Manifest to inherit from
- * This function is typically used to establish a common, shared foundation for an extension's manifest
+ * type Manifest = chrome.runtime.ManifestV3
- * (compatible with `chrome.runtime.ManifestV3` as per the {@link Manifest} type).
+ *
- * This base can then be extended or modified for different browsers or specific build configurations.
+ * use as shared base to extend inBrowser manifests
 * For example, you might define core permissions and properties here, and then add
 * browser-specific keys in subsequent steps.
 *
 * @export
- * @param {Manifest} manifest The core manifest data to be used as a base.
+ * @param {Manifest} manifest
- *                            This should conform to the {@link Manifest} type structure.
+ * @return {*}  {@link Manifest}
 * @returns {Manifest} The provided manifest object, intended to serve as a reusable base.
 */
 export function createManifestBase(manifest: Manifest): Manifest {
-  return manifest;
+  return manifest
 }
@@ -1,70 +1,37 @@
 // vite-plugin-inline-worker-dev.ts
-// vite-plugin-inline-worker-dev.ts
+import { Plugin } from 'vite'
-import { Plugin } from "vite";
+import fs from 'fs/promises'
-import fs from "fs/promises";
+import { build, transform } from 'esbuild'
 import { build } from "esbuild";
 /**
 * Creates a Vite plugin designed for bundling and inlining web worker scripts during development.
 * This plugin specifically targets module imports that include a `?inlineWorker` query parameter.
 * When such an import is encountered, the plugin bundles the worker script using `esbuild`
 * and then generates JavaScript code that inlines this bundled worker as a Blob,
 * creating the worker instance via `URL.createObjectURL()`.
 * The name "vite:inline-worker-dev" suggests it's primarily intended for development builds.
 *
 * @returns {Plugin} A Vite plugin object with `name` and `load` properties.
 */
 export default function InlineWorkerDevPlugin(): Plugin {
  return {
-    /**
+    name: 'vite:inline-worker-dev',
     * The unique name of this Vite plugin.
     * @type {string}
     */
    name: "vite:inline-worker-dev",
    /**
     * The Vite hook responsible for loading and transforming modules.
     * This function intercepts modules imported with `?inlineWorker`.
     * For such modules, it bundles the worker script and returns JavaScript code
     * that, when executed, will create an instance of this worker from an inlined Blob.
     *
     * @async
     * @param {string} id The path or ID of the module Vite is attempting to load,
     *                    potentially including query parameters (e.g., "/path/to/worker.ts?inlineWorker").
     * @returns {Promise<string | null>} A promise that resolves to:
     *                                   - `null` if the module ID does not include `?inlineWorker`.
     *                                   - A string of JavaScript code if the module is an inline worker.
     *                                     This code will define a default export function (e.g., `InlineWorker`)
     *                                     that, when called, creates and returns a new `Worker` instance
     *                                     from the bundled and inlined worker script.
     */
    async load(id) {
-      if (id.includes("?inlineWorker")) {
+      if (id.includes('?inlineWorker')) {
-        const [cleanPath] = id.split("?");
+        const [cleanPath] = id.split('?')
-        // Note: Original code had `await fs.readFile(cleanPath, "utf-8");` but `code` wasn't used.
+        console.log('cleanPath', cleanPath)
-        // `esbuild` directly takes `cleanPath` as an entry point.
+        const code = await fs.readFile(cleanPath, 'utf-8')
        const result = await build({
-          entryPoints: [cleanPath], // esbuild uses the file path directly
+          entryPoints: [cleanPath],
          bundle: true,
-          write: false, // We want the output in memory, not written to disk
+          write: false,
-          platform: "browser", // Target environment for the worker code
+          platform: 'browser',
-          format: "iife", // Immediately Invoked Function Expression, suitable for workers
+          format: 'iife',
-          target: "esnext", // Transpile to modern JavaScript
+          target: 'esnext',
-        });
+        })
-        const workerCode = result.outputFiles[0].text;
+        const workerCode = result.outputFiles[0].text        
        // Construct JavaScript code that will create the worker from a Blob.
        // This code is what gets returned to Vite and replaces the original import.
        const workerBlobCode = `
          const code = ${JSON.stringify(workerCode)};
          export default function InlineWorker() {
            const blob = new Blob([code], { type: 'application/javascript' });
            return new Worker(URL.createObjectURL(blob), { type: 'module' });
          }
-        `;
+        `
-        return workerBlobCode;
+        return workerBlobCode
      }
      return null
    }
  }
      return null; // Let Vite handle other modules normally
    },
  };
 }
@@ -0,0 +1,79 @@
 /* 
  TEMPORARY FIX FOR CHROME 130+ builds
 */
 import path from 'node:path';
 import fs from 'fs';
 import { PluginOption } from 'vite';
 import { ManifestV3Export } from '@crxjs/vite-plugin';
 const manifestPath = path.resolve('dist/chrome/manifest.json');
 export function updateManifestPlugin(): PluginOption {
  return {
    name: 'update-manifest-plugin',
    enforce: 'post',
    closeBundle() {
      forceDisableUseDynamicUrl();
    },
    configureServer(server) {
      server.httpServer?.once('listening', () => {
        const updated = forceDisableUseDynamicUrl();
        if (updated) {
          server.ws.send({ type: 'full-reload' });
          console.log('** updated **');
        }
        // 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, () => {
            try {
              const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
              if (manifestContents.web_accessible_resources?.some((resource: any) => resource.use_dynamic_url)) {
                const updated = forceDisableUseDynamicUrl();
                if (updated) {
                  server.ws.send({ type: 'full-reload' });
                  console.log('** updated **');
                }
              }
            } catch (error) {
              console.log('Error reading manifest, will retry on next change:', error.message);
            }
          });
        };
        watchWithRetry();
      });
    },
    writeBundle() {
      console.log('### writeBundle ##');
      forceDisableUseDynamicUrl();
    },
  };
 }
 function forceDisableUseDynamicUrl() {
  if (!fs.existsSync(manifestPath)) {
    return false;
  }
  const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8')) as Awaited<ManifestV3Export>;
  if (typeof manifestContents === 'function' || !manifestContents.web_accessible_resources) return false;
  if (manifestContents.web_accessible_resources.every((resource) => !resource.use_dynamic_url)) return false;
  manifestContents.web_accessible_resources.forEach((resource) => {
    if (resource.use_dynamic_url) resource.use_dynamic_url = false;
  });
  fs.writeFileSync(manifestPath, JSON.stringify(manifestContents, null, 2));
  return true;
 }
@@ -1,199 +1,94 @@
-/**
+const glob = require('glob');
- * @fileoverview
+const semver = require('semver');
- * This script is a command-line utility for publishing the BetterSEQTA+ extension.
+const { execSync } = require('child_process');
- * It automates the process of finding the latest built extension ZIP files for specified
+const path = require('path');
 * browsers, zipping the project source code (for Firefox), and then invoking the
 * `publish-extension` tool with the appropriate arguments.
 *
 * To use this script, invoke it with Node.js followed by browser arguments:
 * e.g., `node lib/publish.js --b chrome firefox`
 * or `node lib/publish.js --b chrome`
 * or `node lib/publish.js --b firefox`
 */
 const glob = require("glob");
 const semver = require("semver");
 const { execSync } = require("child_process");
 const path = require("path");
 /**
 * Determines the latest version string from a list of filenames that include version numbers.
 * Filenames are expected to follow a pattern like `betterseqtaplus@3.4.5.1-chrome.zip`.
 * This function handles potential 4-part versions (e.g., `3.4.5.1`) by trimming them
 * to 3 parts (e.g., `3.4.5`) for comparison using the `semver` library. After identifying
 * the latest semver-compatible version, it returns the original full version string
 * (e.g., "3.4.5.1") that corresponds to this latest version.
 *
 * @param {string[]} files An array of filenames.
 * @returns {string | null} The latest version string (e.g., "3.4.5.1") found among the files,
 *                          or `null` if no valid version numbers are found or no files are provided.
 */
 function getLatestVersion(files) {
-  console.log("Files passed to getLatestVersion:", files);
+  console.log('Files passed to getLatestVersion:', files);
-  const versions = files
+  const versions = files.map(file => {
    .map((file) => {
    const match = file.match(/@([\d\.]+)-/);
-      console.log(
+    console.log('Matching file:', file, 'Version found:', match ? match[1] : 'None');
        "Matching file:",
        file,
        "Version found:",
        match ? match[1] : "None",
      );
    if (!match) return null;
    const fullVersion = match[1]; // Original version (e.g., 3.4.5.1)
-      // Trim to 3 parts for semver comparison, as semver typically handles X.Y.Z
+    const semverVersion = fullVersion.split('.').slice(0, 3).join('.'); // Trim to 3.4.5
      const semverVersion = fullVersion.split(".").slice(0, 3).join(".");
    return { fullVersion, semverVersion };
-    })
+  }).filter(Boolean);
    .filter(Boolean); // Remove null entries if any file didn't match
-  console.log(
+  console.log('Extracted versions:', versions.map(v => v.semverVersion));
    "Extracted versions:",
    versions.map((v) => v.semverVersion),
  );
  if (versions.length === 0) {
    console.log("No versions extracted.");
    return null;
  }
  // Find latest version using the trimmed semver format
-  const latestSemver = semver.maxSatisfying(
+  const latestSemver = semver.maxSatisfying(versions.map(v => v.semverVersion), '*');
-    versions.map((v) => v.semverVersion),
+  console.log('Latest SemVer-compatible version:', latestSemver);
    "*", // Satisfy any version, effectively finding the max
  );
  console.log("Latest SemVer-compatible version:", latestSemver);
-  if (!latestSemver) {
+  // Get the full version that matches the latest SemVer version
-    console.log("Could not determine latest semver version.");
+  const latestVersion = versions.find(v => v.semverVersion === latestSemver)?.fullVersion || null;
-    return null;
+
  console.log('Final selected latest version:', latestVersion);
  return latestVersion;
 }
  // Get the original full version string that matches the identified latest SemVer version
  const latestVersionData = versions.find(
    (v) => v.semverVersion === latestSemver,
  );
  const latestFullVersion = latestVersionData ? latestVersionData.fullVersion : null;
  console.log("Final selected latest version:", latestFullVersion);
  return latestFullVersion;
 }
 /**
 * Finds the path to the latest built ZIP file for a specific browser.
 * It constructs a glob pattern based on the browser name (e.g., `dist/betterseqtaplus@*-*chrome.zip`),
 * finds all matching files, and then uses `getLatestVersion` to identify the version string
 * of the most recent file. Finally, it returns the full path to that specific file.
 *
 * @param {string} browser A string indicating the target browser (e.g., "chrome", "firefox").
 * @returns {string | undefined} The filepath string to the latest ZIP file for the specified browser,
 *                               or `undefined` if no matching file is found or if the latest version
 *                               cannot be determined.
 */
 function getLatestFiles(browser) {
  const pattern = `dist/betterseqtaplus@*-*${browser}.zip`;
-  console.log("Glob pattern:", pattern);
+  console.log('Glob pattern:', pattern);
  const files = glob.sync(pattern);
-  console.log("Files found for browser", browser, ":", files);
+  console.log('Files found for browser', browser, ':', files);
  if (files.length === 0) {
    console.log("No files found for browser", browser);
    return undefined;
  }
  const latestVersion = getLatestVersion(files);
  if (!latestVersion) {
    console.log("Could not determine latest version for browser", browser);
    return undefined;
  }
-  // Find the exact file by matching the original full version string
+  // Find the exact file by matching the original full version
-  const latestFile = files.find((file) => file.includes(`@${latestVersion}-`));
+  const latestFile = files.find(file => file.includes(`@${latestVersion}-`));
-  console.log("Latest file for browser", browser, ":", latestFile);
+  console.log('Latest file for browser', browser, ':', latestFile);
  return latestFile;
 }
 /**
 * Creates a ZIP file of the project's source code, excluding specified development-related
 * files and directories such as `node_modules`, `dist`, `.git`, etc.
 * It uses the `7z` command-line tool to perform the archiving.
 * The output filename is fixed as `dist/betterseqtaplus@latest-sources.zip`.
 *
 * @returns {string} The filename of the created ZIP file (e.g., `dist/betterseqtaplus@latest-sources.zip`).
 */
 function zipSources() {
  const zipFileName = `dist/betterseqtaplus@latest-sources.zip`;
  const excludePatterns = [
-    "node_modules",
+    'node_modules',
-    "dist",
+    'dist',
-    ".env*",
+    '.env*',
-    ".git",
+    '.git',
-    ".github",
+    '.github',
-    ".vscode",
+    '.vscode',
-    "LICENSE",
+    'LICENSE',
-    "package.json",
+    'package.json'
-  ]
+  ].map(pattern => `-x!${pattern}`).join(' ');
    .map((pattern) => `-x!${pattern}`) // Format for 7z exclude syntax
    .join(" ");
  // Command to zip the current directory's contents into zipFileName, applying exclude patterns
  const zipCommand = `7z a ${zipFileName} . ${excludePatterns}`;
-  console.log("Zipping project sources with command:", zipCommand);
+  console.log('Zipping project sources with command:', zipCommand);
-  execSync(zipCommand, { stdio: "inherit" }); // Execute synchronously and show output
+  execSync(zipCommand, { stdio: 'inherit' });
  return zipFileName;
 }
 /**
 * Orchestrates the extension publishing process for the specified browsers.
 * This function performs the following steps:
 * 1. Calls `getLatestFiles` to find the latest built ZIP for Chrome if "chrome" is in `browsers`.
 * 2. Calls `getLatestFiles` to find the latest built ZIP for Firefox if "firefox" is in `browsers`.
 * 3. Calls `zipSources` to create a source code ZIP if "firefox" is in `browsers` (required for Mozilla Add-ons).
 * 4. Validates that all required files were found and that at least one browser was specified. Exits if not.
 * 5. Constructs the `publish-extension` command-line string with the appropriate arguments
 *    based on the found ZIP files for the specified browsers.
 * 6. Executes the constructed `publish-extension` command.
 *
 * @param {string[]} browsers An array of browser strings (e.g., ["chrome", "firefox"]) for which to publish the extension.
 */
 function runPublishCommand(browsers) {
-  const chromeZip = browsers.includes("chrome")
+  const chromeZip = browsers.includes('chrome') ? getLatestFiles('chrome') : null;
-    ? getLatestFiles("chrome")
+  const firefoxZip = browsers.includes('firefox') ? getLatestFiles('firefox') : null;
-    : null;
+  const firefoxSourcesZip = browsers.includes('firefox') ? zipSources() : null;
  const firefoxZip = browsers.includes("firefox")
    ? getLatestFiles("firefox")
    : null;
  // Sources are typically only needed for Firefox submissions
  const firefoxSourcesZip = browsers.includes("firefox") ? zipSources() : null;
-  console.log("Chrome zip:", chromeZip);
+  console.log('Chrome zip:', chromeZip);
-  console.log("Firefox zip:", firefoxZip);
+  console.log('Firefox zip:', firefoxZip);
-  console.log("Firefox sources zip:", firefoxSourcesZip);
+  console.log('Firefox sources zip:', firefoxSourcesZip);
  if (browsers.length === 0) {
-    console.log("No browsers specified. Exiting.");
+    console.log('No browsers specified. Exiting.');
-    process.exit(0); // Exit gracefully if no action is needed
+    process.exit(0);
  }
-  // Check if required files are missing for the specified browsers
+  if ((browsers.includes('chrome') && !chromeZip) || (browsers.includes('firefox') && (!firefoxZip || !firefoxSourcesZip))) {
-  if (
+    console.error('Could not find required zip files for specified browsers.');
-    (browsers.includes("chrome") && !chromeZip) ||
+    process.exit(1);
    (browsers.includes("firefox") && (!firefoxZip || !firefoxSourcesZip))
  ) {
    console.error("Could not find required zip files for specified browsers.");
    process.exit(1); // Exit with error status
  }
-  let command = "publish-extension";
+  let command = 'publish-extension';
  if (chromeZip) {
    command += ` --chrome-zip ${chromeZip}`;
  }
@@ -201,14 +96,13 @@ function runPublishCommand(browsers) {
    command += ` --firefox-zip ${firefoxZip} --firefox-sources-zip ${firefoxSourcesZip}`;
  }
-  console.log("Running command:", command);
+  console.log('Running command:', command);
-  execSync(command, { stdio: "inherit" }); // Execute and show output
+  execSync(command, { stdio: 'inherit' });
 }
-// Parse command-line arguments to determine which browsers to publish for
+// Parse command-line arguments
 const args = process.argv.slice(2);
-const browserIndex = args.indexOf("--b"); // Find the --b flag
+const browserIndex = args.indexOf('--b');
 // If --b is found, take all subsequent arguments as browser names
 const browsers = browserIndex !== -1 ? args.slice(browserIndex + 1) : [];
 runPublishCommand(browsers);
@@ -1,55 +1,17 @@
-import fs from "fs";
+import fs from 'fs';
 /**
 * Creates a Vite plugin designed to improve the reliability of Hot Module Replacement (HMR)
 * for global CSS files.
 *
 * When a JavaScript/TypeScript module that imports a CSS file is updated, Vite's HMR
 * might not always reliably update the styles injected by that global CSS. This plugin
 * attempts to mitigate this by listening for hot updates. If an updated module
 * has direct importers that are CSS files (e.g., a JS file imports a global CSS file),
 * this plugin will "touch" those CSS files by updating their access and modification
 * timestamps using `fs.utimesSync`. This action can help signal to Vite or the browser
 * that the CSS file has changed, potentially triggering a more reliable style reload.
 *
 * @returns {import('vite').Plugin} A Vite plugin object configured with `name` and `handleHotUpdate` hooks.
 */
 export default function touchGlobalCSSPlugin() {
  return {
-    /**
+    name: 'touch-global-css',
     * The unique name of this Vite plugin.
     * This name is used by Vite for identification purposes and will appear in logs.
     * @type {string}
     */
    name: "touch-global-css",
    /**
     * A Vite hook that is called when a module is hot-updated.
     * This function inspects the importers of the updated module. If any of these
     * importers are CSS files, their filesystem timestamps are updated ("touched").
     *
     * @param {object} context The context object provided by Vite's `handleHotUpdate` hook.
     * @param {Array<import('vite').ModuleNode>} context.modules An array of `ModuleNode` instances that have been updated.
     *                                                            This plugin specifically accesses `modules[0]._clientModule.importers`
     *                                                            to find CSS files that import the updated module.
     */
    handleHotUpdate({ modules }) {
-      // It's assumed `modules[0]` is the primary updated module of interest.
+      // log all of the staticImportedUrls
-      // `_clientModule` and `importers` might be internal or less stable Vite APIs.
+      const importers = modules[0]._clientModule.importers
      const importers = modules[0]?._clientModule?.importers;
      if (importers) {
      importers.forEach((importer) => {
-          // Check if the importer is a CSS file
+        if (importer.file.includes('.css')) {
-          if (importer.file && importer.file.includes(".css")) {
+          console.log("touching", importer.file)
-            console.log("[touch-global-css] touching", importer.file);
+          fs.utimesSync(importer.file, new Date(), new Date())
            try {
              // Update the access and modification times of the CSS file to the current time
              fs.utimesSync(importer.file, new Date(), new Date());
            } catch (err) {
              console.error(`[touch-global-css] Error touching file ${importer.file}:`, err);
        }
      })
    }
        });
      }
    },
  };
 }
@@ -1,240 +1,104 @@
-import type { ManifestV3Export } from "@crxjs/vite-plugin";
+import type { ManifestV3Export } from '@crxjs/vite-plugin'
-import { type AnyCase, createEnum, ObjectValues } from "./utils";
+import { type AnyCase, createEnum } from './utils'
 /**
 * Enumerates supported JavaScript frameworks for project generation or configuration.
 */
 export const FrameworkEnum = {
-  React: "React",
+  React: 'React',
-  Vanilla: "Vanilla",
+  Vanilla: 'Vanilla',
-  Preact: "Preact",
+  Preact: 'Preact',
-  Lit: "Lit",
+  Lit: 'Lit',
-  Svelte: "Svelte",
+  Svelte: 'Svelte',
-  Vue: "Vue",
+  Vue: 'Vue',
-} as const;
+} as const
 /**
 * Enumerates supported web browsers, typically for targeting builds or configurations.
 */
 export const BrowserEnum = {
-  Chrome: "Chrome",
+  Chrome: 'Chrome',
-  Brave: "Brave",
+  Brave: 'Brave',
-  Opera: "Opera",
+  Opera: 'Opera',
-  Edge: "Edge",
+  Edge: 'Edge',
-  Firefox: "Firefox",
+  Firefox: 'Firefox',
-  Safari: "Safari",
+  Safari: 'Safari',
-} as const;
+} as const
 /**
 * @private
 * Enumerates supported programming languages for project setup.
 * This enum is not exported, suggesting it's for internal use within this module or related modules.
 */
 const LanguageEnum = {
-  TypeScript: "TypeScript",
+  TypeScript: 'TypeScript',
-  JavaScript: "JavaScript",
+  JavaScript: 'JavaScript',
-} as const;
+} as const
 /**
 * Enumerates supported styling options or libraries.
 */
 export const StyleEnum = {
-  Tailwind: "Tailwind",
+  Tailwind: 'Tailwind',
-} as const;
+} as const
 /**
 * Enumerates supported package managers.
 */
 export const PackageManagerEnum = {
-  Bun: "Bun",
+  Bun: 'Bun',
-  PnPm: "PnPm",
+  PnPm: 'PnPm',
-  Npm: "Npm",
+  Npm: 'Npm',
-  Yarn: "Yarn",
+  Yarn: 'Yarn',
-} as const;
+} as const
-/**
+// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts
 * Defines the structure for browser-specific settings within a web extension manifest.
 * This is particularly used for Firefox (gecko) extensions to specify properties like
 * an extension ID, and minimum/maximum supported browser versions.
 * The structure is based on common manifest extensions for Firefox.
 * See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
 * The link in the original code (// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts)
 * also points to type definitions that include this structure.
 *
 * @property {object} [browser_specific_settings] - Container for browser-specific settings.
 * @property {object} [browser_specific_settings.gecko] - Settings specific to Gecko-based browsers (e.g., Firefox).
 * @property {string} [browser_specific_settings.gecko.id] - The unique identifier for the extension in Firefox.
 * @property {string} [browser_specific_settings.gecko.strict_min_version] - The minimum version of Firefox the extension is compatible with.
 * @property {string} [browser_specific_settings.gecko.strict_max_version] - The maximum version of Firefox the extension is compatible with.
 */
 export type BrowserSpecificSettings = {
  browser_specific_settings?: {
    gecko?: {
-      id: string;
+      id: string
-      strict_min_version?: string;
+      strict_min_version?: string
-      strict_max_version?: string;
+      strict_max_version?: string
-    };
+    }
-  };
+  }
-};
+}
-/**
+export type Manifest = ManifestV3Export
- * Represents the structure of a Chrome Manifest V3 file.
+export type ManifestIcons = chrome.runtime.ManifestIcons
- * This type is an alias for `ManifestV3Export` from the `@crxjs/vite-plugin`,
+export type ManifestBackground = chrome.runtime.ManifestV3['background']
 * which provides a comprehensive definition for Chrome extension manifests.
 */
 export type Manifest = ManifestV3Export;
 /** Alias for the `icons` property within a Chrome Manifest V3. */
 export type ManifestIcons = chrome.runtime.ManifestIcons;
 /** Alias for the `background` property within a Chrome Manifest V3. */
 export type ManifestBackground = chrome.runtime.ManifestV3["background"];
 /** Alias for the `content_scripts` property within a Chrome Manifest V3. */
 export type ManifestContentScripts =
-  chrome.runtime.ManifestV3["content_scripts"];
+  chrome.runtime.ManifestV3['content_scripts']
 /** Alias for the `web_accessible_resources` property within a Chrome Manifest V3. */
 export type ManifestWebAccessibleResources =
-  chrome.runtime.ManifestV3["web_accessible_resources"];
+  chrome.runtime.ManifestV3['web_accessible_resources']
-/** Alias for the `commands` property within a Chrome Manifest V3. */
+export type ManifestCommands = chrome.runtime.ManifestV3['commands']
-export type ManifestCommands = chrome.runtime.ManifestV3["commands"];
+export type ManifestAction = chrome.runtime.ManifestV3['action']
-/** Alias for the `action` property (or `browser_action`/`page_action`) within a Chrome Manifest V3. */
+export type ManifestPermissions = chrome.runtime.ManifestV3['permissions']
-export type ManifestAction = chrome.runtime.ManifestV3["action"];
+export type ManifestOptionsUI = chrome.runtime.ManifestV3['options_ui']
 /** Alias for the `permissions` property within a Chrome Manifest V3. */
 export type ManifestPermissions = chrome.runtime.ManifestV3["permissions"];
 /** Alias for the `options_ui` property within a Chrome Manifest V3. */
 export type ManifestOptionsUI = chrome.runtime.ManifestV3["options_ui"];
 /** Alias for the `chrome_url_overrides` property within a Chrome Manifest V3. */
 export type ManifestURLOverrides =
-  chrome.runtime.ManifestV3["chrome_url_overrides"];
+  chrome.runtime.ManifestV3['chrome_url_overrides']
-/**
+export type BrowserName<T extends string> = Capitalize<T> | Lowercase<T>
 * Creates a type that accepts a string literal `T` in either its capitalized or lowercase form.
 * Useful for defining types that should be case-insensitive for specific known strings.
 * @template T - A string literal type.
 */
 export type BrowserName<T extends string> = Capitalize<T> | Lowercase<T>;
 /**
 * Creates a record type where both keys and values are derived from a string literal `T`,
 * specifically using `BrowserName<T>` which allows for capitalized or lowercase forms.
 * This could be used to define an object where, for example, keys are 'Chrome' or 'chrome'
 * and values are also 'Chrome' or 'chrome'.
 * @template T - A string literal type, typically representing a browser name.
 */
 export type BrowserEnumType<T extends string> = {
-  [browser in BrowserName<T>]: BrowserName<T>;
+  [browser in BrowserName<T>]: BrowserName<T>
-};
+}
-/**
+export type BuildMode = AnyCase<Browser>
 * Represents the target browser for a build, allowing for various casings of browser names
 * (e.g., "chrome", "Chrome", "CHROME") through the `AnyCase<Browser>` utility type.
 * `Browser` itself is a union of specific browser name strings (e.g., "Chrome" | "Firefox").
 */
 export type BuildMode = AnyCase<Browser>;
 /**
 * Defines an object structure that pairs a web extension `Manifest`
 * with its target `browser` (represented as `AnyCase<Browser>`).
 * This is commonly used in build processes to manage configurations for different browsers.
 */
 export type BuildTarget = {
-  manifest: Manifest;
+  manifest: Manifest
-  browser: AnyCase<Browser>;
+  browser: AnyCase<Browser>
-};
+}
 /**
 * Defines the configuration options for a build process.
 * @property {"build" | "serve"} [command] - The type of build command (e.g., 'build' for production, 'serve' for development).
 * @property {AnyCase<Browser> | string | undefined} [mode] - The target build mode, typically a browser name (allowing various casings)
 *                                                           or potentially other custom mode strings.
 */
 export type BuildConfig = {
-  command?: "build" | "serve";
+  command?: 'build' | 'serve'
-  mode?: AnyCase<Browser> | string | undefined;
+  mode?: AnyCase<Browser> | string | undefined
-};
+}
 /**
 * Defines the structure for repository information, commonly found in `package.json`.
 * @property {string} type - The type of the repository (e.g., "git").
 * @property {string} [url] - The URL of the repository.
 * @property {Bugs} [bugs] - An object containing information about where to report bugs.
 */
 export interface Repository {
-  type: string;
+  type: string
-  url?: string;
+  url?: string
-  bugs?: Bugs;
+  bugs?: Bugs
 }
 /**
 * Defines the structure for bug reporting information, often part of the `Repository` interface.
 * @property {string} [url] - The URL of the issue tracker.
 * @property {string} [email] - The email address for reporting bugs.
 */
 export interface Bugs {
-  url?: string;
+  url?: string
-  email?: string;
+  email?: string
 }
-/**
+export type Browser = (typeof BrowserEnum)[keyof typeof BrowserEnum]
- * A string literal union type representing supported browser names, derived from the values of `BrowserEnum`.
+export const Browser: AnyCase<Browser> = createEnum(BrowserEnum)
 * e.g., "Chrome" | "Firefox" | ...
 */
 export type Browser = ObjectValues<typeof BrowserEnum>;
-/**
+export type PackageManager =
- * A constant intended to provide access to browser names, potentially in various casings.
+  (typeof PackageManagerEnum)[keyof typeof PackageManagerEnum]
 * Its type `AnyCase<Browser>` suggests it can be used where case-insensitivity for browser names is needed.
 * The `createEnum(BrowserEnum)` call aims to produce a representation of browser names from `BrowserEnum`.
 * Note: `createEnum` from `lib/utils.ts` has a declared return type of `ObjectValues<T>` (a union of values),
 * while its implementation uses `Object.values()` which returns an array. This constant will hold the
 * runtime array value, but its JSDoc type refers to the more restrictive `AnyCase<Browser>` union type.
 */
 export const Browser: AnyCase<Browser> = createEnum(BrowserEnum);
 /**
 * A string literal union type representing supported package managers, derived from the values of `PackageManagerEnum`.
 * e.g., "Bun" | "PnPm" | "Npm" | "Yarn"
 */
 export type PackageManager = ObjectValues<typeof PackageManagerEnum>;
 /**
 * A constant intended to provide access to package manager names, potentially in various casings.
 * Its type `AnyCase<PackageManager>` suggests it can be used where case-insensitivity for package manager names is needed.
 * Utilizes `createEnum(PackageManagerEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
 */
 export const PackageManager: AnyCase<PackageManager> =
-  createEnum(PackageManagerEnum);
+  createEnum(PackageManagerEnum)
-/**
+export type Framework = (typeof FrameworkEnum)[keyof typeof FrameworkEnum]
- * A string literal union type representing supported JavaScript frameworks, derived from the values of `FrameworkEnum`.
+export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum)
 * e.g., "React" | "Vanilla" | ...
 */
 export type Framework = ObjectValues<typeof FrameworkEnum>;
 /**
 * A constant intended to provide access to framework names, potentially in various casings.
 * Its type `AnyCase<Framework>` suggests it can be used where case-insensitivity for framework names is needed.
 * Utilizes `createEnum(FrameworkEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
 */
 export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum);
-/**
+export type Style = (typeof StyleEnum)[keyof typeof StyleEnum]
- * A string literal union type representing supported styling options, derived from the values of `StyleEnum`.
+export const Style: AnyCase<Style> = createEnum(StyleEnum)
 * e.g., "Tailwind"
 */
 export type Style = ObjectValues<typeof StyleEnum>;
 /**
 * A constant intended to provide access to style option names, potentially in various casings.
 * Its type `AnyCase<Style>` suggests it can be used where case-insensitivity for style names is needed.
 * Utilizes `createEnum(StyleEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
 */
 export const Style: AnyCase<Style> = createEnum(StyleEnum);
-/**
+export type Language = (typeof LanguageEnum)[keyof typeof LanguageEnum]
- * A string literal union type representing supported programming languages, derived from the values of `LanguageEnum`.
+export const Language: AnyCase<Language> = createEnum(LanguageEnum)
 * e.g., "TypeScript" | "JavaScript"
 */
 export type Language = ObjectValues<typeof LanguageEnum>;
 /**
 * A constant intended to provide access to programming language names, potentially in various casings.
 * Its type `AnyCase<Language>` suggests it can be used where case-insensitivity for language names is needed.
 * Utilizes `createEnum(LanguageEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
 */
 export const Language: AnyCase<Language> = createEnum(LanguageEnum);
@@ -1,84 +1,21 @@
-/**
+export type ObjectValues<T> = T[keyof T]
 * Extracts a union type of all values from the properties of an object type `T`.
 *
 * @template T - An object type (typically a Record or an enum-like object).
 * @example
 * type MyObject = { a: "foo", b: "bar", c: 123 };
 * type MyObjectValues = ObjectValues<MyObject>; // "foo" | "bar" | 123
 */
 export type ObjectValues<T> = T[keyof T];
 /**
 * Creates a union of an object's string values, often used to represent the set of possible values for an enum-like object.
 * Note: The implementation `Object.values(enumObj) as unknown as ObjectValues<T>` returns an array at runtime,
 * but the declared return type `ObjectValues<T>` is a union of the object's property values.
 * This type signature suggests it's intended to represent the set of possible string values from `enumObj`.
 *
 * @template T - An object type where keys are strings and values are strings (e.g., `const MyEnum = { VAL_A: "A", VAL_B: "B" }`).
 * @param {T} enumObj - The object from which to extract values.
 * @returns {ObjectValues<T>} A union type representing all possible string values of the `enumObj`.
 *                            For example, if `enumObj` is `{ A: "valA", B: "valB" }`, the return type is `"valA" | "valB"`.
 *                            (Runtime behavior of `Object.values()` is to return an array like `["valA", "valB"]`).
 */
 export function createEnum<T extends Record<string, string>>(enumObj: T) {
-  return Object.values(enumObj) as unknown as ObjectValues<T>;
+  return Object.values(enumObj) as unknown as ObjectValues<T>
 }
 /**
 * Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
 * of a given string literal type `T`.
 *
 * @template T - A string literal type.
 * @example
 * type MyString = "example";
 * type MyStringAnyCase = AnyCase<MyString>; // "EXAMPLE" | "example" | "Example" | "example" (Uncapitalize<"Example"> is "example")
 */
 export type AnyCase<T extends string> =
  | Uppercase<T>
  | Lowercase<T>
  | Capitalize<T>
-  | Uncapitalize<T>;
+  | Uncapitalize<T>
 /**
 * Creates a union type that includes various case formats (uppercase, lowercase, capitalized, uncapitalized)
 * of the union of two given string literal types `T` and `K`.
 * This is useful for representing a combined set of related string constants where case variations are permitted for each.
 *
 * @template T - A string literal type.
 * @template K - Another string literal type.
 * @example
 * type Lang1 = "english";
 * type Lang2 = "french";
 * type CombinedLangsAnyCase = AnyCaseLanguage<Lang1, Lang2>;
 * // Result includes: "ENGLISH" | "english" | "English" | "FRENCH" | "french" | "French" etc.
 * // for all case variations of "english" and "french".
 */
 export type AnyCaseLanguage<T extends string, K extends string> =
  | Uppercase<T | K>
  | Lowercase<T | K>
  | Capitalize<T | K>
-  | Uncapitalize<T | K>;
+  | Uncapitalize<T | K>
 /**
 * Extracts a new object type containing only the keys of `T` whose properties are optional
 * (i.e., their type includes `undefined`). The values associated with these keys retain their original types.
 *
 * @template T - An object type.
 * @example
 * type MyObject = {
 *   requiredProp: string;
 *   optionalProp?: number;
 *   anotherOptional?: boolean | undefined;
 *   nullProp: string | null;
 * };
 * type MyOptionalProps = OptionalKeys<MyObject>;
 * // MyOptionalProps would be conceptually equivalent to:
 * // {
 * //   optionalProp?: number;
 * //   anotherOptional?: boolean | undefined;
 * // }
 * // The actual resulting type is an object type with only these optional keys.
 */
 export type OptionalKeys<T> = {
-  [K in keyof T as undefined extends T[K] ? K : never]: T[K];
+  [K in keyof T as undefined extends T[K] ? K : never]: T[K]
-};
+}
@@ -1,6 +1,6 @@
 {
  "name": "betterseqtaplus",
-  "version": "3.4.7",
+  "version": "3.4.6.1",
  "type": "module",
  "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",
@@ -36,7 +36,7 @@
    "@babel/plugin-transform-runtime": "^7.26.9",
    "@babel/runtime": "^7.26.9",
    "@bedframe/cli": "^0.0.91",
-    "@crxjs/vite-plugin": "2.0.0-beta.32",
+    "@crxjs/vite-plugin": "2.0.0-beta.25",
    "@types/mime-types": "^2.1.4",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
@@ -64,17 +64,6 @@
    "@codemirror/view": "^6.36.4",
    "@sveltejs/vite-plugin-svelte": "^5.0.3",
    "@tailwindcss/forms": "^0.5.10",
    "@tiptap/core": "^2.14.0",
    "@tiptap/extension-bubble-menu": "^2.14.0",
    "@tiptap/extension-dropcursor": "^2.14.0",
    "@tiptap/extension-image": "^2.14.0",
    "@tiptap/extension-link": "^2.14.0",
    "@tiptap/extension-placeholder": "^2.14.0",
    "@tiptap/extension-task-item": "^2.14.0",
    "@tiptap/extension-task-list": "^2.14.0",
    "@tiptap/extension-typography": "^2.14.0",
    "@tiptap/starter-kit": "^2.14.0",
    "@tiptap/suggestion": "^2.14.0",
    "@tsconfig/svelte": "^5.0.4",
    "@types/chrome": "^0.0.308",
    "@types/color": "^4.2.0",
@@ -86,14 +75,12 @@
    "@uiw/codemirror-extensions-color": "^4.23.10",
    "@uiw/codemirror-theme-github": "^4.23.10",
    "autoprefixer": "^10.4.21",
-    "canvas-confetti": "^1.9.3",
+    "client-vector-search": "../client-vector-search",
    "codemirror": "^6.0.1",
    "color": "^5.0.0",
    "dompurify": "^3.2.4",
    "embeddia": "^1.2.1",
    "embla-carousel-autoplay": "^8.5.2",
    "embla-carousel-svelte": "^8.5.2",
    "esbuild": "^0.25.3",
    "events": "^3.3.0",
    "flexsearch": "^0.8.147",
    "fuse.js": "^7.1.0",
@@ -103,7 +90,6 @@
    "mathjs": "^14.4.0",
    "million": "^3.1.11",
    "motion": "^12.4.12",
    "motion-start": "^0.1.15",
    "postcss": "^8.5.3",
    "react": "17",
    "react-best-gradient-color-picker": "3.0.11",
@@ -111,7 +97,6 @@
    "rss-parser": "^3.13.0",
    "sortablejs": "^1.15.6",
    "svelte": "^5.22.6",
    "svelte-hero-icons": "^5.2.0",
    "typescript": "^5.8.2",
    "uuid": "^11.1.0",
    "vite": "^6.2.1",
@@ -1,80 +1,65 @@
 import {
  initializeSettingsState,
  settingsState,
-} from "@/seqta/utils/listeners/SettingsState";
+} from "@/seqta/utils/listeners/SettingsState"
-import documentLoadCSS from "@/css/documentload.scss?inline";
+import documentLoadCSS from "@/css/documentload.scss?inline"
-import icon48 from "@/resources/icons/icon-48.png?base64";
+import icon48 from "@/resources/icons/icon-48.png?base64"
-import browser from "webextension-polyfill";
+import browser from "webextension-polyfill"
-import * as plugins from "@/plugins";
+import * as plugins from "@/plugins"
-import { main } from "@/seqta/main";
+import { main } from "@/seqta/main"
 import { delay } from "./seqta/utils/delay";
 export let MenuOptionsOpen = false;
-var IsSEQTAPage = false;
+export let MenuOptionsOpen = false
-let hasSEQTAText = false;
+
 var IsSEQTAPage = false
 let hasSEQTAText = false
 // This check is placed outside of the document load event due to issues with EP (https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues/84)
 if (document.childNodes[1]) {
  hasSEQTAText =
    document.childNodes[1].textContent?.includes(
      "Copyright (c) SEQTA Software",
-    ) ?? false;
+    ) ?? false
-  init();
+  init()
 }
 /**
 * Initializes BetterSEQTA+ on a SEQTA page.
 *
 * This function performs the following steps:
 * 1. Verifies that the current page is a SEQTA page.
 * 2. Injects CSS styles for document loading.
 * 3. Changes the page's favicon.
 * 4. Initializes the extension's settings state.
 * 5. Sets default storage if settings are not already defined.
 * 6. Calls the main function to apply core BetterSEQTA+ modifications.
 * 7. Initializes legacy and new plugins if the extension is enabled.
 * 8. Logs success or error messages during initialization.
 */
 async function init() {
-  const hasSEQTATitle = document.title.includes("SEQTA Learn");
+  const hasSEQTATitle = document.title.includes("SEQTA Learn")
-  if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) {
+  if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) { // Verify we are on a SEQTA page
-    // Verify we are on a SEQTA page
+    IsSEQTAPage = true
-    IsSEQTAPage = true;
+    console.info("[BetterSEQTA+] Verified SEQTA Page")
    console.info("[BetterSEQTA+] Verified SEQTA Page");
-    const documentLoadStyle = document.createElement("style");
+    const documentLoadStyle = document.createElement("style")
-    documentLoadStyle.textContent = documentLoadCSS;
+    documentLoadStyle.textContent = documentLoadCSS
-    document.head.appendChild(documentLoadStyle);
+    document.head.appendChild(documentLoadStyle)
-    const icon = document.querySelector(
+    const icon = document.querySelector('link[rel*="icon"]')! as HTMLLinkElement
-      'link[rel*="icon"]',
+    icon.href = icon48 // Change the icon
    )! as HTMLLinkElement;
    icon.href = icon48; // Change the icon
    try {
-      await initializeSettingsState();
+      await initializeSettingsState()
      if (typeof settingsState.onoff === "undefined") {
-        await browser.runtime.sendMessage({ type: "setDefaultStorage" });
+        browser.runtime.sendMessage({ type: "setDefaultStorage" })
        await delay(5);
      }
-      await main();
+      await main()
      plugins.Monofile();
      if (settingsState.onoff) {
        // Initialize legacy plugins
        plugins.Monofile()
        // Initialize new plugin system
        await plugins.initializePlugins();
      }
      console.info(
        "[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
-      );
+      )
    } catch (error: any) {
-      console.error(error);
+      console.error(error)
    }
  }
 }
@@ -1,68 +1,63 @@
-import browser from "webextension-polyfill";
+import browser from 'webextension-polyfill'
 import type { SettingsState } from "@/types/storage";
-import { fetchNews } from "./background/news";
+import { fetchNews } from './background/news';
 function reloadSeqtaPages() {
-  const result = browser.tabs.query({});
+  const result = browser.tabs.query({})
    function open (tabs: any) {
    for (let tab of tabs) {
-      if (tab.title.includes("SEQTA Learn")) {
+      if (tab.title.includes('SEQTA Learn')) {
        browser.tabs.reload(tab.id);
      }
    }
  }
-  result.then(open, console.error);
+  result.then(open, console.error)
 }
 // @ts-ignore
-browser.runtime.onMessage.addListener(
+browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (response?: any) => void) => {
-  (request: any, _: any, sendResponse: (response?: any) => void) => {
+
  switch (request.type) {
-      case "reloadTabs":
+    case 'reloadTabs':
      reloadSeqtaPages();
      break;
-      case "extensionPages":
+    case 'extensionPages':
      browser.tabs.query({}).then(function (tabs) {
        for (let tab of tabs) {
-            if (tab.url?.includes("chrome-extension://")) {
+          if (tab.url?.includes('chrome-extension://')) {
            browser.tabs.sendMessage(tab.id!, request);
          }
        }
      });
      break;
-      case "currentTab":
+    case 'currentTab':
-        browser.tabs
+      browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
-          .query({ active: true, currentWindow: true })
+        browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
          .then(function (tabs) {
            browser.tabs
              .sendMessage(tabs[0].id!, request)
              .then(function (response) {
          sendResponse(response);
        });
      });
      return true;
-      case "githubTab":
+    case 'githubTab':
-        browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
+      browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
      break;
-      case "setDefaultStorage":
+    case 'setDefaultStorage':
      SetStorageValue(DefaultValues);
      break;
-      case "sendNews":
+    case 'sendNews':
-        fetchNews(request.source ?? "australia", sendResponse);
+      fetchNews(request.source ?? 'australia', sendResponse);
      return true;
    default:
-        console.log("Unknown request type");
+      console.log('Unknown request type');
  }
  return false;
-  },
+});
 );
 const DefaultValues: SettingsState = {
  onoff: true,
@@ -91,31 +86,66 @@ const DefaultValues: SettingsState = {
  },
  menuorder: [],
  subjectfilters: {},
-  selectedTheme: "",
+  selectedTheme: '',
-  selectedColor:
+  selectedColor: 'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)',
-    "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
+  originalSelectedColor: '',
  originalSelectedColor: "",
  DarkMode: true,
  animations: true,
  assessmentsAverage: true,
-  defaultPage: "home",
+  defaultPage: 'home',
  shortcuts: [
    {
-      name: "Outlook",
+      name: 'YouTube',
      enabled: false,
    },
    {
      name: 'Outlook',
      enabled: true,
    },
    {
-      name: "Office",
+      name: 'Office',
      enabled: true,
    },
    {
-      name: "Google",
+      name: 'Spotify',
      enabled: false,
    },
    {
      name: 'Google',
      enabled: true,
    },
    {
      name: 'DuckDuckGo',
      enabled: false,
    },
    {
      name: 'Cool Math Games',
      enabled: false,
    },
    {
      name: 'SACE',
      enabled: false,
    },
    {
      name: 'Google Scholar',
      enabled: false,
    },
    {
      name: 'Gmail',
      enabled: false,
    },
    {
      name: 'Netflix',
      enabled: false,
    },
    {
      name: 'Education Perfect',
      enabled: false,
    },
  ],
  customshortcuts: [],
  lettergrade: false,
-  newsSource: "australia",
+  newsSource: 'australia',
 };
 function SetStorageValue(object: any) {
@@ -128,8 +158,7 @@ function convertBksliderToSpeed(bksliderinput: number): number {
  const minBase = 50;
  const maxBase = 150;
-  const scaledValue =
+  const scaledValue = 2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
    2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
  const baseSpeed = 3;
  const speed = baseSpeed / scaledValue;
@@ -137,64 +166,50 @@ function convertBksliderToSpeed(bksliderinput: number): number {
 }
 async function migrateLegacySettings() {
-  const storage = (await browser.storage.local.get(
+  const storage = await browser.storage.local.get(null) as unknown as SettingsState;
    null,
  )) as unknown as SettingsState;
  // Animated Background Migration
-  if ("animatedbk" in storage || "bksliderinput" in storage) {
+  if ('animatedbk' in storage || 'bksliderinput' in storage) {
    const animatedSettings = {
      enabled: storage.animatedbk ?? true,
-      speed: storage.bksliderinput
+      speed: storage.bksliderinput ? convertBksliderToSpeed(parseFloat(storage.bksliderinput)) : 1
        ? convertBksliderToSpeed(parseFloat(storage.bksliderinput))
        : 1,
    };
-    await browser.storage.local.set({
+    await browser.storage.local.set({ 'plugin.animated-background.settings': animatedSettings });
      "plugin.animated-background.settings": animatedSettings,
    });
  }
  // Assessments Average Migration
-  if ("assessmentsAverage" in storage || "lettergrade" in storage) {
+  if ('assessmentsAverage' in storage || 'lettergrade' in storage) {
    const assessmentsSettings = {
      enabled: storage.assessmentsAverage ?? true,
-      lettergrade: storage.lettergrade ?? false,
+      lettergrade: storage.lettergrade ?? false
    };
-    await browser.storage.local.set({
+    await browser.storage.local.set({ 'plugin.assessments-average.settings': assessmentsSettings });
      "plugin.assessments-average.settings": assessmentsSettings,
    });
  }
-  if ("selectedTheme" in storage) {
+  if ('selectedTheme' in storage) {
    const themesSettings = { enabled: true };
-    await browser.storage.local.set({
+    await browser.storage.local.set({ 'plugin.themes.settings': themesSettings });
      "plugin.themes.settings": themesSettings,
    });
  }
  if (storage.notificationCollector !== false) {
-    await browser.storage.local.set({
+    await browser.storage.local.set({ 'plugin.notificationCollector.settings': { enabled: true } });
      "plugin.notificationCollector.settings": { enabled: true },
    });
  } else {
-    await browser.storage.local.set({
+    await browser.storage.local.set({ 'plugin.notificationCollector.settings': { enabled: false } });
      "plugin.notificationCollector.settings": { enabled: false },
    });
  }
  const keysToRemove = [
-    "animatedbk",
+    'animatedbk',
-    "bksliderinput",
+    'bksliderinput',
-    "assessmentsAverage",
+    'assessmentsAverage',
-    "lettergrade",
+    'lettergrade'
  ];
  await browser.storage.local.remove(keysToRemove);
 }
 browser.runtime.onInstalled.addListener(function (event) {
-  browser.storage.local.remove(["justupdated"]);
+  browser.storage.local.remove(['justupdated']);
-  browser.storage.local.remove(["data"]);
+  browser.storage.local.remove(['data']);
-  if (event.reason == "install" || event.reason == "update") {
+  if ( event.reason == 'install' || event.reason == 'update' ) {
    browser.storage.local.set({ justupdated: true });
    migrateLegacySettings();
  }
@@ -1,36 +1,17 @@
-import Parser from "rss-parser";
+import Parser from 'rss-parser';
 /**
 * Fetches news articles specifically for Australia from the NewsAPI.
 *
 * This function handles a specific case for fetching Australian news. It includes a
 * mechanism to retry the fetch operation by appending "%00" to the URL if a
 * rate limit error (`response.code == "rateLimited"`) is encountered. This is
 * likely a workaround for cache-busting or bypassing certain rate-limiting measures.
 *
 * @param {string} url The NewsAPI URL to fetch Australian news from.
 * @param {any} sendResponse A callback function (likely from a browser extension message listener)
 *                           to send the fetched news data back to the caller.
 *                           It's called with an object like `{ news: responseData }`.
 */
 const fetchAustraliaNews = async (url: string, sendResponse: any) => {
  fetch(url)
    .then((result) => result.json())
    .then((response) => {
-      if (response.code == "rateLimited") {
+      if (response.code == 'rateLimited') {
-        fetchAustraliaNews((url += "%00"), sendResponse);
+        fetchAustraliaNews(url += '%00', sendResponse);
      } else {
        sendResponse({ news: response });
      }
    });
 };
 /**
 * A record mapping lowercase country codes (e.g., "usa", "canada") to an array
 * of RSS feed URLs for news sources in that country.
 *
 * @type {Record<string, string[]>}
 */
 const rssFeedsByCountry: Record<string, string[]> = {
  usa: [
    "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
@@ -50,13 +31,13 @@ const rssFeedsByCountry: Record<string, string[]> = {
    "https://critica.com.pa/rss.xml",
    "https://www.panamaamerica.com.pa/rss.xml",
    "https://noticiassin.com/feed/",
-    "https://elcapitalfinanciero.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",
+    "https://www.montrealgazette.com/feed"
  ],
  singapore: [
    "https://www.straitstimes.com/news/singapore/rss.xml",
@@ -68,39 +49,23 @@ const rssFeedsByCountry: Record<string, string[]> = {
  ],
  japan: [
    "https://www3.nhk.or.jp/nhkworld/en/news/feeds/",
-    "https://news.livedoor.com/topics/rss/int.xml",
+    "https://news.livedoor.com/topics/rss/int.xml"
  ],
  netherlands: [
    "https://www.dutchnews.nl/feed/",
    "https://www.nrc.nl/rss/"
  ],
  netherlands: ["https://www.dutchnews.nl/feed/", "https://www.nrc.nl/rss/"],
 };
 /**
 * Fetches news articles based on a specified source.
 *
 * The source can be:
 * 1. The string "australia": Fetches news from Australian sources via NewsAPI,
 *    handled by the `fetchAustraliaNews` function.
 * 2. A lowercase country code (e.g., "usa", "canada"): Fetches news from a predefined
 *    list of RSS feeds for that country, as specified in `rssFeedsByCountry`.
 * 3. A direct RSS feed URL (starting with "http"): Fetches news directly from this URL.
 *
 * The fetched articles are then sent back to the caller using the `sendResponse` callback.
 *
 * @param {string} source The news source identifier. This can be "australia", a
 *                        lowercase country code, or a direct RSS feed URL.
 * @param {any} sendResponse A callback function (typically from a browser extension
 *                           message listener, like `chrome.runtime.onMessage`)
 *                           used to send the fetched news data back to the caller.
 *                           It's called with an object like `{ news: { articles: [...] } }`.
 */
 export async function fetchNews(source: string, sendResponse: any) {
  if (source === "australia") {
    const date = new Date();
    const from =
      date.getFullYear() +
-      "-" +
+      '-' +
      (date.getMonth() + 1) +
-      "-" +
+      '-' +
      (date.getDate() - 5);
    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
@@ -111,7 +76,7 @@ export async function fetchNews(source: string, sendResponse: any) {
  const parser = new Parser();
  let feeds: string[];
-  console.log("fetchNews", source);
+  console.log('fetchNews', source)
  if (rssFeedsByCountry[source.toLowerCase()]) {
    // If the source is a country, fetch from predefined feeds
@@ -120,9 +85,7 @@ export async function fetchNews(source: string, sendResponse: any) {
    // If the source is a URL, use it directly
    feeds = [source];
  } else {
-    throw new Error(
+    throw new Error("Invalid source. Provide a country code or a valid RSS feed URL.");
      "Invalid source. Provide a country code or a valid RSS feed URL.",
    );
  }
  const articlesPromises = feeds.map(async (feedUrl) => {
@@ -15,7 +15,7 @@
 * along with EvenBetterSEQTA.  If not, see <https://www.gnu.org/licenses/>.
 */
-@use "injected/popup.scss";
+@use 'injected/popup.scss';
 html {
  background: #161616 !important;
@@ -77,9 +77,7 @@ html {
  transform-origin: top;
  transition: transform 0.2s;
 }
-body:has(.outside-container:not(.hide))
+body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltiptext {
  #AddedSettings.tooltip:hover
  > .tooltiptext {
  transform: scale(0);
 }
 .assessmenttooltip svg {
@@ -1 +1 @@
-import "./documentload.scss";
+import './documentload.scss';
@@ -25,9 +25,7 @@ body {
  span,
  body {
    color: white !important;
-    text-shadow:
+    text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
      1px 1px 2px #161616,
      0 0 1em #161616;
  }
  body {
@@ -114,10 +112,3 @@ body {
    transition: text-shadow 0.5s;
  }
 }
 .cke_panel_listItem > a {
  &:hover {
    background: #3d3d3e !important;
  }
 }
@@ -12,13 +12,6 @@
  font-family: Rubik, sans-serif !important;
 }
 ::view-transition-old(root),
 ::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  pointer-events: none;
 }
 .hidden {
  display: none;
 }
@@ -671,12 +664,14 @@ td.colourBar {
 }
 #toolbar span:has(.search) {
  position: relative;
  /* Makes sure the pseudo-element is positioned relative to this element */
 }
 #toolbar .search {
  padding-left: 30px;
 }
 #toolbar span:has(.search)::before {
  content: "\eca5";
  /* Unicode for the search icon */
  position: absolute;
  left: 8px;
  z-index: 10;
@@ -689,7 +684,7 @@ td.colourBar {
 }
 #container #content .search {
  width: 100%;
-  border-radius: 8px;
+  border-radius: 16px;
  background: var(--background-primary);
 }
 #container #content .uiButton {
@@ -926,7 +921,6 @@ div > ol:has(.uiFileHandlerWrapper) {
 .notices-container {
  input {
    border: none;
    color: var(--text-color) !important;
    &:hover {
      border: none;
@@ -952,23 +946,6 @@ div > ol:has(.uiFileHandlerWrapper) {
  opacity: 0.8;
 }
 #content:has(#main > .course) #toolbar {
  top: 72px;
  left: 0px;
  z-index: 10;
  @media (min-width: 1401px) {
    position: absolute;
    left: 402px;
  }
 }
 #main > .course .content {
  @media (min-width: 1400px) {
    padding-top: 2.5rem;
  }
 }
 #main > .notices > .notice > .contents {
  background: var(--background-primary);
 }
@@ -1062,7 +1039,6 @@ div > ol:has(.uiFileHandlerWrapper) {
  max-width: 1050px;
  margin: auto;
  width: 1050px;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
@@ -1109,11 +1085,9 @@ div > ol:has(.uiFileHandlerWrapper) {
  transition: 200ms;
  width: 100%;
  height: 15em;
-  display: grid;
+  display: flex;
-  grid-auto-flow: column;
+  flex-direction: row;
  grid-auto-columns: minmax(130px, 1fr);
  border-radius: 16px;
  overflow-x: auto;
  .day:first-child {
    border-bottom-left-radius: 16px;
@@ -1176,6 +1150,11 @@ div > ol:has(.uiFileHandlerWrapper) {
  font-size: 20px;
  font-weight: 400;
 }
 .notices-container h2 {
  margin: 20px;
  font-size: 20px;
  font-weight: 400;
 }
 .notice {
  position: relative;
  padding: 20px;
@@ -1246,6 +1225,17 @@ div > ol:has(.uiFileHandlerWrapper) {
  position: relative;
  transition: 200ms;
 }
 .customshortcut::after {
  content: "Custom Shortcut";
  position: absolute;
  top: -4px;
  right: -15px;
  font-size: 8px;
  padding: 2px 5px;
  background: var(--better-alert-highlight);
  border-radius: 8px;
  color: white;
 }
 .shortcut:hover {
  background: var(--auto-background);
 }
@@ -1346,6 +1336,20 @@ div > ol:has(.uiFileHandlerWrapper) {
  font-size: 10px !important;
  font-weight: 500;
 }
 .day-empty {
  font-size: 30px;
  display: flex;
  width: 100%;
  border-radius: 16px 0;
  align-items: center;
 }
 .day-empty img {
  margin: 20px;
  height: 50%;
 }
 .day-empty p {
  margin: 0;
 }
 .waitWindow {
  background: var(--better-main);
 }
@@ -1371,13 +1375,10 @@ div > ol:has(.uiFileHandlerWrapper) {
  margin: 20px auto 0px;
  cursor: pointer;
 }
-.dark
+.dark [class*="notifications__detailsBody___"] > [class*="notifications__subtitle___"] {
  [class*="notifications__detailsBody___"]
  > [class*="notifications__subtitle___"] {
  color: #c1bcbc;
 }
-[class*="notifications__detailsBody___"]
+[class*="notifications__detailsBody___"] > [class*="notifications__subtitle___"] {
  > [class*="notifications__subtitle___"] {
  font-size: 12px;
 }
 [class*="notifications__notifications___"] > button {
@@ -1393,9 +1394,7 @@ div > ol:has(.uiFileHandlerWrapper) {
  height: 25px;
  width: 24px;
 }
-[class*="notifications__notifications___"]
+[class*="notifications__notifications___"] > button > [class*="notifications__bubble___"] {
  > button
  > [class*="notifications__bubble___"] {
  background: var(--better-alert-highlight);
  width: 25px;
  height: 25px;
@@ -1524,9 +1523,9 @@ div > ol:has(.uiFileHandlerWrapper) {
  background: var(--background-primary);
 }
 [class*="Input__Input___"]::before,
 .navigator .bar.flat::before,
 .ais-btnSearch::before {
  content: "";
  /* Unicode for the search icon */
  transform: translateY(-50%);
  color: currentColor;
  font-size: 16px;
@@ -1615,13 +1614,6 @@ iframe.userHTML {
 [class*="Thermoscore__Thermoscore___"] {
  background-image: unset;
  background: var(--auto-background);
  border-radius: 8px;
 }
 .dark [class*="Thermoscore__Thermoscore___"] {
  border: 2px solid rgba(255, 255, 255, 0.3);
 }
 [class*="AssessmentItem__meta___"] {
  padding-bottom: 8px;
 }
 #toolbar {
  color: var(--text-primary);
@@ -1636,6 +1628,9 @@ iframe.userHTML {
 .dailycal > .times > .time {
  padding: 0 !important;
 }
 .navigator {
  border-top-right-radius: 16px;
 }
 .programmeNavigator > .navigator,
 .programmeNavigator > .navigator > li > ul {
  background: var(--background-primary);
@@ -1644,132 +1639,10 @@ iframe.userHTML {
 .programmeNavigator > .navigator > .week > .lessons > .lesson:hover {
  background: var(--auto-background);
 }
-
+.programmeNavigator > .navigator > .week > .lessons > .lesson.selected,
-.pane .navigator::after {
+.programmeNavigator > .navigator > .cover.selected {
-  content: unset !important;
+  background: transparent;
 }
 .programmeNavigator {
  box-shadow: 0 0 40px 0px rgba(0,0,0,0.05);
  .navigator {
    padding: 6px !important;
    .bar.flat::before {
      z-index: 10;
      left: 8px;
      margin: 0;
      position: absolute;
      top: 50%;
    }
    &::after {
      content: "";
      position: fixed;
      z-index: 1;
      top: 70px;
      width: 390px;
      height: 60px;
      background: linear-gradient(to bottom, var(--background-primary) 50%, rgba(0, 0, 0, 0));
      pointer-events: none;
    }
    .search {
      padding: 10px;
      padding-left: 30px;
      top: 8px;
      margin-top: -50px;
      z-index: 2;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .bar {
      top: 13px;
      padding-right: 4px;
      position: sticky;
      pointer-events: none;
      button {
        position: unset;
        pointer-events: auto;
      }
    }
    .meta {
      border-radius: 8px;
    }
    .cover {
      padding: 12px;
    }
    .cover,
    .lesson {
      border-radius: 8px;
      transition: background 0.1s ease-out;
      position: relative;
  color: var(--text-primary) !important;
      z-index: 1;
      &:hover {
        background: transparent !important;
      }
      &.selected {
        background: transparent !important;
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background: var(--auto-background);
        opacity: 0;
        scale: 0.95;
        transition: opacity 0.2s ease-out, scale 0.1s ease-out;
        z-index: -1;
        pointer-events: none;
      }
      &:hover::before {
        opacity: 0.5;
        scale: 1;
      }
      &.selected::before {
        opacity: 1;
        scale: 1;
      }
    }
  }
 }
 .pane {
  .content:has(.programmeNavigator)  {
    margin: 0;
  }
  .programmeNavigator .navigator {
    .search {
      border-radius: 8px;
    }
    &::before {
      top: 83px;
    }
  }
 }
 .dark .programmeNavigator .navigator {
  .search {
    background: var(--background-secondary) !important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 15px 0px rgba(0, 0, 0, 0.1) !important;
  }
 }
 .dark #main > .course > .content > h1 {
  text-shadow: 0 0 10px black;
@@ -1819,19 +1692,12 @@ ul {
 .programmeNavigator {
  width: 400px;
  background: var(--background-primary);
  border-top-right-radius: 16px;
  position: relative;
 }
 #userActions > .details > .code {
  text-transform: initial;
 }
 div:has(> [class*="AssessmentDetails__AssessmentDetails___"]) {
  padding: 4px;
 }
 [class*="SelectedAssessment__due___"] {
  border-radius: 8px !important;
  background: var(--background-primary) !important;
 }
 [class*="SelectedAssessment__SelectedAssessment___"] {
  color: var(--text-primary);
 }
@@ -1844,9 +1710,7 @@ div:has(> [class*="AssessmentDetails__AssessmentDetails___"]) {
  > [class*="SelectedAssessment__meta___"] {
  border-bottom: 1px solid var(--better-main);
 }
-[class*="TabSet__TabSet___"]
+[class*="TabSet__TabSet___"] > ol[class*="TabSet__tabs___"] > li[class*="TabSet__selected___"] {
  > ol[class*="TabSet__tabs___"]
  > li[class*="TabSet__selected___"] {
  border-bottom-color: var(--better-main);
 }
 [class*="TabSet__TabSet___"] > ol[class*="TabSet__tabs___"] {
@@ -1982,15 +1846,6 @@ div.entry.class[style*="width: 46.5%"] {
  min-width: 0;
  width: auto !important;
 }
 div.entry.tutorial {
  border-radius: 4px;
 }
 div.entry.event {
  border-radius: 4px;
 }
 .uiFileHandler .uiButton {
  border-radius: 32px !important;
  color: var(--text-primary) !important;
@@ -2204,10 +2059,6 @@ div.bar.flat {
  }
 }
 .dark .cke_combo_button {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" viewBox="0 0 24 24"><path d="M6.984 9.984h10.031l-5.016 5.016z"/></svg>') !important;
 }
 .quicktable {
  border-radius: 12px;
 }
@@ -2296,23 +2147,6 @@ body {
 }
 [class*="Viewer__Viewer___"] {
  background: unset;
  [class*="ReadingPane__ReadingPane___"] {
    > [class*="Message__unread___"] > header {
      box-shadow: none !important;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        background: var(--better-main);
      }
    }
  }
 }
 .weekend {
  display: none !important;
@@ -2347,9 +2181,7 @@ body {
  border-radius: 1600px;
 }
-[class*="MessageList__MessageList___"]
+[class*="MessageList__MessageList___"] > ol > li[class*="MessageList__selected___"]
  > ol
  > li[class*="MessageList__selected___"]
  [class*="MessageList__unread___"] {
  box-shadow: none;
 }
@@ -2358,9 +2190,7 @@ body {
  box-shadow: none;
 }
-[class*="MessageList__MessageList___"]
+[class*="MessageList__MessageList___"] > ol > li[class*="MessageList__unread___"]::before,
  > ol
  > li[class*="MessageList__unread___"]::before,
 [class*="MessageList__MessageList___"] > ol > li::before {
  content: "";
  position: absolute;
@@ -2372,9 +2202,7 @@ body {
  transition: width 0.1s;
 }
-[class*="MessageList__MessageList___"]
+[class*="MessageList__MessageList___"] > ol > li[class*="MessageList__unread___"]::before {
  > ol
  > li[class*="MessageList__unread___"]::before {
  width: 3px;
 }
 .connectedNotificationsWrapper > div > button {
@@ -2455,13 +2283,9 @@ body {
  background: var(--background-secondary);
 }
-[class*="MessageList__MessageList___"]
+[class*="MessageList__MessageList___"] > ol > li[class*="MessageList__selected___"] {
  > ol
  > li[class*="MessageList__selected___"] {
  background: rgb(228 225 225);
  color: var(--text-primary);
  box-shadow: none !important;
  position: relative;
 }
 .NewsArticle {
  border-radius: 16px !important;
@@ -2605,17 +2429,21 @@ body {
 }
 [data-label="inbox"] > [class*="LabelList__name___"]::before {
  content: "\eb70";
  /* Unicode for the search icon */
  color: currentColor;
  font-size: 16px;
  margin-right: 8px;
  /* Adjusted to margin-right for the icon to be on the left */
  font-family: "IconFamily";
  pointer-events: none;
 }
 [data-label="outbox"] > [class*="LabelList__name___"]::before {
  content: "\eca6";
  /* Unicode for the search icon */
  color: currentColor;
  font-size: 16px;
  margin-right: 8px;
  /* Adjusted to margin-right for the icon to be on the left */
  font-family: "IconFamily";
  pointer-events: none;
 }
@@ -2624,14 +2452,17 @@ body {
  color: currentColor;
  font-size: 16px;
  margin-right: 8px;
  /* Adjusted to margin-right for the icon to be on the left */
  font-family: "IconFamily";
  pointer-events: none;
 }
 [data-label="trash"] > [class*="LabelList__name___"]::before {
  content: "\ed2c";
  /* Unicode for the search icon */
  color: currentColor;
  font-size: 16px;
  margin-right: 8px;
  /* Adjusted to margin-right for the icon to be on the left */
  font-family: "IconFamily";
  pointer-events: none;
 }
@@ -2731,11 +2562,9 @@ body {
  transform: translateY(-6px) rotate(-45deg);
 }
 .day-empty {
  font-size: 30px;
  display: flex;
  align-items: center;
  height: 15em;
  width: 100%;
  border-radius: 16px 0;
  img {
    margin: 20px;
@@ -2744,7 +2573,6 @@ body {
  p {
    margin: 0;
    font-size: 30px;
  }
 }
 .upcoming-submittedtext {
@@ -2954,6 +2782,7 @@ body {
  cursor: pointer;
 }
 .day {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
@@ -2981,6 +2810,18 @@ body {
 .dark .day h3 {
  color: #c1bcbc;
 }
 .day-empty {
  font-size: 30px;
  display: flex;
  align-items: center;
 }
 .day-empty img {
  margin: 20px;
  height: 50%;
 }
 .day-empty p {
  margin: 0;
 }
 .upcoming-items {
  background: var(--background-primary);
@@ -3270,7 +3111,7 @@ body {
  margin: 0 auto;
 }
 .whatsnewImg {
-  margin: 0 auto;
+  margin: 8px auto;
  width: 90%;
  border-radius: 16px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
@@ -3289,26 +3130,6 @@ body {
  text-indent: -1em;
  padding-left: 1em;
 }
 .whatsnewTextContainer .beta {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  margin-left: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9a3412;
  background-color: #ffedd569;
  border-radius: 9999px;
  border: 1px solid rgba(253, 186, 140, 0.3);
  background-color: #ffedd5;
  border-color: rgba(253, 186, 140, 0.3);
 }
 .dark .whatsnewTextContainer .beta {
  border-color: rgb(124 45 18 / 0.3);
  background-color: rgb(124 45 18 / 0.3);
  color: rgb(253 186 116);
 }
 .whatsnewTextHeader {
  font-size: 1.4em !important;
  color: #4dd868;
@@ -3534,415 +3355,3 @@ body {
  -ms-overflow-style: none;
  scrollbar-width: none !important;
 }
 #menu ul {
  -ms-overflow-style: none;
  scrollbar-width: none !important;
 }
 .notice-modal-content {
  border: none !important;
 }
 .notice-unified-content.notice-modal-state {
  border: none !important;
 }
 // Notice card hover effects for main page cards
 .notice-unified-content.notice-card-state:not([data-transitioning]) {
  cursor: pointer;
  &:hover {
    background: var(--background-secondary) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  }
  &:last-child {
    margin-bottom: 0;
  }
 }
 .notice-badge {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
 }
 .notice-staff {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.7;
 }
 .notice-preview {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 // Modal styles
 .notice-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
 }
 .notice-modal-transition {
  position: fixed;
  z-index: 10001;
  transition: none; // Controlled by motion animations
 }
 .notice-modal-content {
  background: var(--background-primary);
  border-radius: 16px;
  max-width: 600px;
  max-height: 80vh;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  &.notice-transitioning {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    position: relative;
  }
 }
 .notice-unified-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-primary);
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .dark .notice-unified-content {
  color: white;
 }
 .notice-unified-content {
  h1, h2, h3, h4, h5, h6 {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-shadow: none !important;
  }
  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    margin-bottom: 12px;
    gap: 16px;
  }
  .notice-content-title {
    font-size: 20px !important; // Nice middle ground - not too big, not too small
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
    flex-shrink: 0;
  }
  .notice-content-body {
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1;
    display: block;
    // Force stable layout dimensions - content renders at full size always
    min-width: 600px; // Ensure tables have consistent width for layout
    width: 100%;
  }
  // The ONLY difference between states is clipping!
  &.notice-card-state {    
    .notice-content-body {
      // Clip to show only 2 lines but keep full layout
      overflow: hidden;
      max-height: 3em; // ~2 lines worth of height
    }
  }
  &.notice-modal-state {
    .notice-close-btn {
      opacity: 1;
    }
    .notice-content-body {
      // Show full content with scrolling
      overflow-y: auto;
      // Custom scrollbar for long content
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
      }
             &::-webkit-scrollbar-thumb:hover {
         background: rgba(255, 255, 255, 0.3);
       }
       // Style content elements nicely
       p {
         margin-bottom: 12px;
         &:last-child {
           margin-bottom: 0;
         }
       }
       a {
         color: var(--theme-primary);
         text-decoration: none;
         &:hover {
           text-decoration: underline;
         }
       }
       ul, ol {
         margin: 12px 0;
         padding-left: 20px;
       }
       li {
         margin-bottom: 4px;
       }
     }
   }
 }
 .notice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
 }
 .notice-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
 }
 button.notice-close-btn {
  position: absolute !important;
  font-size: 20px !important;
  top: 12px;
  right: 12px;
  background: var(--background-secondary);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-primary);
  transition: all 0.2s ease !important;
  flex-shrink: 0;
  opacity: 0;
  &:hover {
    background: var(--background-tertiary);
    transform: scale(1.1);
  }
 }
 .notice-modal-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
 }
 .notice-modal-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
 }
 .notice-modal-staff {
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.8;
 }
 .notice-modal-close {
  background: var(--background-secondary);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-primary);
  transition: all 0.2s ease;
  flex-shrink: 0;
  &:hover {
    background: var(--background-tertiary);
    transform: scale(1.1);
  }
 }
 .notice-modal-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 20px 20px 20px;
  line-height: 1.3;
  flex-shrink: 0;
 }
 .notice-modal-body {
  padding: 0 20px 20px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
  overflow-y: auto;
  // Custom scrollbar
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  // Style content elements
  p {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  a {
    color: var(--theme-primary);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  ul, ol {
    margin: 12px 0;
    padding-left: 20px;
  }
  li {
    margin-bottom: 4px;
  }
 }
 // Dark mode adjustments
 .dark {
  .notice-card {
    border-color: rgba(255, 255, 255, 0.05);
    &:hover {
      border-color: rgba(255, 255, 255, 0.1);
    }
  }
  .notice-modal-content {
    border-color: rgba(255, 255, 255, 0.05);
  }
 }
 // Mobile responsiveness
@media (max-width: 768px) {
  .notice-modal-overlay {
    padding: 10px;
  }
  .notice-modal-content {
    max-height: 90vh;
  }
  .notice-modal-title {
    font-size: 20px;
    margin: 12px 16px 16px 16px;
  }
  .notice-modal-body {
    padding: 0 16px 16px 16px;
  }
  .notice-card {
    padding: 12px;
  }
  .notice-preview {
    font-size: 13px;
  }
 }
 h2.home-subtitle {
  margin: 20px;
  font-size: 20px;
  font-weight: 400;
 }
@@ -36,7 +36,5 @@
  transform-origin: 70% 0;
  will-change: opacity, transform;
  transform: translateZ(0); // promotes GPU rendering
-  transition:
+  transition: opacity 0.05s, transform 0.05s;
    opacity 0.05s,
    transform 0.05s;
 }
@@ -8,6 +8,7 @@ html.transparencyEffects:not(.dark) {
  --background-secondary: rgba(229, 231, 235, 0.6);
 }
 html.transparencyEffects {
  /* Background Fixes */
  [class*="notifications__item___"],
@@ -21,9 +22,6 @@ html.transparencyEffects {
  }
  /* Blurs */
  .search,
  .document,
  .border,
  .draggable,
  .notice,
  [class*="BasicPanel__BasicPanel___"],
@@ -39,28 +37,34 @@ html.transparencyEffects {
  [class*="LabelList__selected___"],
  .buttonChecklist,
  .pane,
-  .legacy-root button,
+  .legacy-root button, .legacy-root a,
  .legacy-root a,
  [class*="MessageList__MessageList___"] {
    backdrop-filter: blur(80px);
  }
  .filter-select,
  .report {
    backdrop-filter: blur(10px) !important;
  }
  #menu,
  .kanban-column,
  .whatsnewContainer,
  [class*="Message__Message___"] {
    backdrop-filter: blur(50px);
  }
  #menu {
    backdrop-filter: blur(20px);
  }
  .title > a {
    backdrop-filter: blur(0px) !important;
  }
  .search,
  .document,
  .border {
    backdrop-filter: blur(80px);
  }
  #main > .dashboard {
    section,
    .dashlet {
@@ -1,11 +1,11 @@
-declare module "*.mp4";
+declare module '*.mp4';
-declare module "*.woff";
+declare module '*.woff';
-declare module "*.scss";
+declare module '*.scss';
-declare module "*.png";
+declare module '*.png';
-declare module "*.html";
+declare module '*.html';
-declare module "*.svelte";
+declare module '*.svelte';
-declare module "*?inlineWorker" {
+declare module '*?inlineWorker' {
  const value: () => Worker;
  export default value;
 }
@@ -2,6 +2,6 @@
  let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
 </script>
-<button onclick={onClick} class='px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg'>
+<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
  {text}
 </button>
@@ -81,20 +81,20 @@
 </script>
 {#if standalone}
-  <div class="h-auto overflow-clip rounded-xl">
+  <div class="h-auto rounded-xl overflow-clip">
    <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
  </div>
 {:else}
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    bind:this={background}
-    class="flex absolute top-0 left-0 z-50 justify-center items-center w-full h-full shadow-2xl cursor-pointer bg-black/20 border border-[#DDDDDD]/30 dark:border-[#38373D]/30"
+    class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
    onclick={handleBackgroundClick}
    onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
  >
    <div
      bind:this={content}
-      class="p-4 h-auto bg-white rounded-xl border shadow-lg cursor-auto dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+      class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
    >
      <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
    </div>
@@ -1,6 +1,6 @@
-import ColorPicker from "react-best-gradient-color-picker";
+import ColorPicker from "react-best-gradient-color-picker"
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react"
-import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
 const defaultPresets = [
  "linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)",
@@ -22,12 +22,12 @@ const defaultPresets = [
  "rgba(30, 64, 175, 0.89)",
  "rgba(134, 25, 143, 1)",
  "rgba(14, 165, 233, 0.9)",
-];
+]
 interface PickerProps {
-  customOnChange?: (color: string) => void;
+  customOnChange?: (color: string) => void
-  customState?: string;
+  customState?: string
-  savePresets?: boolean;
+  savePresets?: boolean
 }
 export default function Picker({
@@ -35,44 +35,32 @@ export default function Picker({
  customState,
  savePresets = true,
 }: PickerProps) {
-  const [customThemeColor, setCustomThemeColor] = useState<string | null>();
+  const [customThemeColor, setCustomThemeColor] = useState<string | null>()
-  const [presets, setPresets] = useState<string[]>();
+  const [presets, setPresets] = useState<string[]>()
-  const latestValuesRef = useRef({
+  const latestValuesRef = useRef({ customThemeColor, customOnChange, savePresets, presets });
    customThemeColor,
    customOnChange,
    savePresets,
    presets,
  });
  useEffect(() => {
    if (customState !== undefined && customState !== null) {
-      setCustomThemeColor(customState);
+      setCustomThemeColor(customState)
    } else {
-      setCustomThemeColor(settingsState.selectedColor ?? null);
+      setCustomThemeColor(settingsState.selectedColor ?? null)
    }
    if (presets === undefined) {
-      const savedPresets = localStorage.getItem("colorPickerPresets");
+      const savedPresets = localStorage.getItem("colorPickerPresets")
-      setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets);
+      setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets)
    }
-  }, []);
+  }, [])
  useEffect(() => {
-    latestValuesRef.current = {
+    latestValuesRef.current = { customThemeColor, customOnChange, savePresets, presets };
      customThemeColor,
      customOnChange,
      savePresets,
      presets,
    };
  }, [customThemeColor, customOnChange, savePresets, presets]);
  useEffect(() => {
    return () => {
-      const { customThemeColor, customOnChange, savePresets, presets } =
+      const { customThemeColor, customOnChange, savePresets, presets } = latestValuesRef.current;
-        latestValuesRef.current;
+      if (!(customThemeColor && !customOnChange && savePresets && presets)) return;
      if (!(customThemeColor && !customOnChange && savePresets && presets))
        return;
      // Only proceed if presets are different (avoid unnecessary updates)
      const existingIndex = presets.indexOf(customThemeColor);
@@ -91,18 +79,15 @@ export default function Picker({
        updatedPresets = [customThemeColor, ...presets].slice(0, 18);
      }
-      localStorage.setItem(
+      localStorage.setItem("colorPickerPresets", JSON.stringify(updatedPresets));
-        "colorPickerPresets",
+    }
-        JSON.stringify(updatedPresets),
+  }, [])
      );
    };
  }, []);
  useEffect(() => {
    if (customThemeColor && !customOnChange) {
-      settingsState.selectedColor = customThemeColor;
+      settingsState.selectedColor = customThemeColor
    }
-  }, [customThemeColor, customOnChange]);
+  }, [customThemeColor, customOnChange])
  return (
    <ColorPicker
@@ -112,12 +97,12 @@ export default function Picker({
      value={customThemeColor ?? ""}
      onChange={(color: string) => {
        if (customOnChange) {
-          customOnChange(color);
+          customOnChange(color)
-          setCustomThemeColor(color);
+          setCustomThemeColor(color)
        } else {
-          setCustomThemeColor(color);
+          setCustomThemeColor(color)
        }
      }}
    />
-  );
+  )
 }
@@ -1,227 +0,0 @@
 <script lang="ts">
  import { isValidHotkey, parseHotkey } from '@/plugins/built-in/globalSearch/src/utils/hotkeyUtils';
  let { value, onChange } = $props<{ 
    value: string, 
    onChange: (newValue: string) => void 
  }>();
  let isRecording = $state(false);
  let recordedKeys = $state<Set<string>>(new Set());
  let inputElement = $state<HTMLInputElement>();
  const formatKeyForHotkey = (key: string): string => {
    // Map special keys to their hotkey format
    const keyMap: Record<string, string> = {
      'Control': 'ctrl',
      'Meta': 'cmd',
      'Alt': 'alt',
      'Shift': 'shift',
      ' ': 'space',
      'ArrowUp': 'up',
      'ArrowDown': 'down',
      'ArrowLeft': 'left',
      'ArrowRight': 'right',
      'Escape': 'esc',
      'Enter': 'enter',
      'Tab': 'tab',
      'Backspace': 'backspace',
      'Delete': 'delete',
    };
    return keyMap[key] || key.toLowerCase();
  };
  const formatKeyForDisplay = (key: string): string => {
    // Map keys to their display format
    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    const keyMap: Record<string, string> = {
      'ctrl': isMac ? '⌃' : 'Ctrl',
      'cmd': '⌘',
      'meta': '⌘',
      'alt': isMac ? '⌥' : 'Alt',
      'shift': isMac ? '⇧' : 'Shift',
      'space': 'Space',
      'up': '↑',
      'down': '↓',
      'left': '←',
      'right': '→',
      'esc': 'Esc',
      'enter': 'Enter',
      'tab': 'Tab',
      'backspace': 'Backspace',
      'delete': 'Delete',
    };
    return keyMap[key.toLowerCase()] || key.toUpperCase();
  };
  const getHotkeyParts = (hotkeyString: string): string[] => {
    if (!hotkeyString || !isValidHotkey(hotkeyString)) {
      return [];
    }
    const parsed = parseHotkey(hotkeyString);
    const parts: string[] = [];
    // Add modifiers in a consistent order
    if (parsed.ctrl) parts.push('ctrl');
    if (parsed.meta) parts.push('cmd');
    if (parsed.alt) parts.push('alt');
    if (parsed.shift) parts.push('shift');
    // Add the main key
    if (parsed.key) parts.push(parsed.key);
    return parts;
  };
  const startRecording = () => {
    isRecording = true;
    recordedKeys.clear();
    inputElement?.focus();
  };
  const stopRecording = () => {
    if (recordedKeys.size > 0) {
      if (recordedKeys.has('esc')) {
        onChange('');
        isRecording = false;
        recordedKeys.clear();
        inputElement?.blur();
        return;
      }
      // Build the hotkey string
      const modifiers: string[] = [];
      let mainKey = '';
      for (const key of recordedKeys) {
        if (['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
          modifiers.push(key);
        } else {
          mainKey = key;
        }
      }
      if (mainKey) {
        const hotkeyString = [...modifiers, mainKey].join('+');
        if (isValidHotkey(hotkeyString)) {
          onChange(hotkeyString);
        }
      }
    }
    isRecording = false;
    recordedKeys.clear();
    inputElement?.blur();
  };
  const handleKeyDown = (e: KeyboardEvent) => {
    if (!isRecording) return;
    e.preventDefault();
    e.stopPropagation();
    const key = formatKeyForHotkey(e.key);
    // Add modifiers
    if (e.ctrlKey) recordedKeys.add('ctrl');
    if (e.metaKey) recordedKeys.add('cmd');
    if (e.altKey) recordedKeys.add('alt');
    if (e.shiftKey) recordedKeys.add('shift');
    // Add the main key (ignore modifier keys themselves)
    if (!['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
      recordedKeys.add(key);
    }
    // Auto-stop recording if we have a main key
    if (!['ctrl', 'cmd', 'alt', 'shift'].includes(key)) {
      setTimeout(stopRecording, 100);
    }
  };
  const handleKeyUp = (e: KeyboardEvent) => {
    if (!isRecording) return;
    e.preventDefault();
    e.stopPropagation();
  };
  const handleBlur = () => {
    if (isRecording) {
      stopRecording();
    }
  };
  $effect(() => {
    if (isRecording && inputElement) {
      inputElement.focus();
    }
  });
  // Get the parts to display
  const hotkeyParts = $derived(isRecording 
    ? Array.from(recordedKeys).map(formatKeyForDisplay)
    : getHotkeyParts(value).map(formatKeyForDisplay));
 </script>
 <div class="flex gap-2 items-center">
  <div class="relative">
    {#if isRecording}
      <!-- Recording state -->
      <div 
        class="flex items-center justify-center px-3 py-1.5 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white border cursor-pointer text-nowrap"
        onclick={startRecording}
        onkeydown={startRecording}
        role="button"
        tabindex="0"
      >
        Press keys...
      </div>
    {:else if hotkeyParts.length > 0}
      <!-- Display current hotkey -->
      <div 
        class="flex gap-1 items-center text-sm rounded-md border-none cursor-pointer dark:text-white"
        onclick={startRecording}
        onkeydown={startRecording}
        role="button"
        tabindex="0"
      >
        {#each hotkeyParts as part}
          <div class="size-8 text-sm flex items-center justify-center rounded-md border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30">
            {part}
          </div>
        {/each}
      </div>
    {:else}
      <!-- Empty state -->
      <div 
        class="flex items-center justify-center px-3 py-2 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD] dark:text-white border-none cursor-pointer text-nowrap"
        onclick={startRecording}
        onkeydown={startRecording}
        role="button"
        tabindex="0"
      >
        <span class="text-gray-500 dark:text-gray-400">Click to set</span>
      </div>
    {/if}
    <!-- Hidden input for focus management -->
    <input
      bind:this={inputElement}
      type="text"
      readonly
      class="absolute inset-0 opacity-0 pointer-events-none"
      onkeydown={handleKeyDown}
      onkeyup={handleKeyUp}
      onblur={handleBlur}
    />
  </div>
 </div>
 <style>
  input:focus {
    outline: none;
  }
 </style> 
@@ -8,5 +8,5 @@
  aria-label="Color Picker Swatch"
  onclick={onClick}
  style="background: {$settingsState.selectedColor}"
-  class="w-16 h-8 rounded-md shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30"
+  class="w-16 h-8 rounded-md"
 ></button>
@@ -8,12 +8,11 @@
  let select: HTMLSelectElement;
 </script>
 <div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-lg w-full overflow-clip">
 <select
  bind:this={select}
  value={state}
  onchange={() => onChange(select.value)}
-    class="px-4 py-1 text-[0.75rem] dark:text-white w-full border-none bg-transparent focus:ring-0 focus:bg-white/20 dark:focus:bg-black/10"
+  class="px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md w-full"
 >
  {#each options as option}
    <option value={option.value}>
@@ -21,4 +20,3 @@
    </option>
  {/each}
 </select>
 </div>
@@ -16,9 +16,9 @@
    max={max}
    step={step}
    bind:value={state}
-    style={`background: linear-gradient(to right, #30d259ad 0%, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
+    style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
    onchange={(e) => onChange(Number(e.currentTarget.value))}
-    class="w-full h-1 rounded-full appearance-none cursor-pointer slider"
+    class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
  />
 </div>
@@ -38,7 +38,6 @@
    height: 24px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
    background: white;
    color: #30d259ad;
    cursor: pointer;
    border-radius: 50%;
  }
@@ -1,4 +1,4 @@
 .dark .switch[data-ison="true"],
 .switch[data-ison="true"] {
-  background-color: #30d259;
+  background-color: #30D259;
 }
@@ -30,7 +30,8 @@
 </script>
 <div
-  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr select-none shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30 {state ? 'to-[#30D259]/80 from-[#30D259] dark:from-[#30D259]/40 dark:to-[#30D259]' : 'dark:from-[#38373D]/50 dark:to-[#38373D] to-[#DDDDDD]/50 from-[#DDDDDD]'}"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch select-none"
  data-ison={state}
  onclick={() => onChange(!state)}
  onkeydown={(e) => e.key === "Enter" && onChange(!state)}
  role="switch"
@@ -42,3 +43,9 @@
    class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
  ></div>
 </div>
 <style>
  .switch[data-ison="true"] {
    background-color: #30D259;
  }
 </style>
@@ -43,7 +43,7 @@
  <div class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 px-2 tab-width-container">
    <div bind:this={containerRef} class="flex relative">
      <MotionDiv
-        class="absolute top-0 left-0 z-0 h-full bg-gradient-to-tr dark:from-[#38373D]/80 dark:to-[#38373D] from-[#DDDDDD]/80 to-[#DDDDDD] rounded-full opacity-40 tab-width"
+        class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
        animate={{ x: calcXPos(activeTab) }}
        transition={springTransition}
      />
@@ -65,9 +65,8 @@
    >
      <div class="flex">
        {#each tabs as { Content, props }, index}
-        <div class="absolute focus:outline-none w-full pt-2 transition-opacity duration-300 overflow-y-scroll no-scrollbar pb-2 h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
+          <div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
            style="left: {index * 100}%;">
          <div style="left: {index * 100}%;" class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-white dark:from-zinc-800 dark:to-transparent"></div>
             <Content {...props} />
          </div>
        {/each}
@@ -14,14 +14,12 @@
  let isDragging = $state(false);
  let tempTheme = $state(null);
-  const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
+  const handleThemeClick = async (theme: CustomTheme) => {
    if (isEditMode) return;
    if (theme.id === themes?.selectedTheme) {
      themeManager.setTransitionPoint(e.clientX, e.clientY);
      await themeManager.disableTheme();
      themes.selectedTheme = '';
    } else {
      themeManager.setTransitionPoint(e.clientX, e.clientY);
      await themeManager.setTheme(theme.id);
      if (!themes) return;
      themes.selectedTheme = theme.id;
@@ -129,7 +127,7 @@
      {#each themes.themes as theme (theme.id)}
        <button
          class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
-          onclick={(e) => handleThemeClick(theme, e)}
+          onclick={() => handleThemeClick(theme)}
        >
          {#if isEditMode}
            <div
@@ -1,20 +1,8 @@
-import { type DBSchema, type IDBPDatabase, openDB } from "idb";
+import { type DBSchema, type IDBPDatabase, openDB } from 'idb';
 /**
 * Defines the schema for the IndexedDB database used for storing background image data.
 *
 * @interface BackgroundDB
 * @extends {DBSchema}
 * @property {object} backgrounds - The object store for background images.
 * @property {string} backgrounds.key - The type of the key for the object store (in this case, it's `id` as defined in `keyPath`).
 * @property {object} backgrounds.value - The structure of the objects stored.
 * @property {string} backgrounds.value.id - The unique identifier for the background image record.
 * @property {string} backgrounds.value.type - The MIME type of the image (e.g., "image/png", "image/jpeg").
 * @property {Blob} backgrounds.value.blob - The binary large object (Blob) containing the image data.
 */
 interface BackgroundDB extends DBSchema {
  backgrounds: {
-    key: string; // Corresponds to the 'id' property due to keyPath: "id"
+    key: string;
    value: {
      id: string;
      type: string;
@@ -25,100 +13,43 @@ interface BackgroundDB extends DBSchema {
 let db: IDBPDatabase<BackgroundDB> | null = null;
 /**
 * Initializes and opens an IndexedDB connection or returns an existing one.
 * If the database doesn't exist or needs an upgrade, the `upgrade` callback
 * creates the 'backgrounds' object store with 'id' as the keyPath.
 *
 * @async
 * @returns {Promise<IDBPDatabase<BackgroundDB>>} A promise that resolves with the database instance.
 */
 export async function openDatabase(): Promise<IDBPDatabase<BackgroundDB>> {
  if (db) return db;
-  db = await openDB<BackgroundDB>("BackgroundDB", 1, {
+  db = await openDB<BackgroundDB>('BackgroundDB', 1, {
    upgrade(db: IDBPDatabase<BackgroundDB>) {
-      db.createObjectStore("backgrounds", { keyPath: "id" });
+      db.createObjectStore('backgrounds', { keyPath: 'id' });
    },
  });
  return db;
 }
-/**
+export async function readAllData(): Promise<Array<{ id: string; type: string; blob: Blob }>> {
 * Retrieves all background image records from the 'backgrounds' object store in IndexedDB.
 *
 * @async
 * @returns {Promise<Array<{id: string, type: string, blob: Blob}>>} A promise that resolves with an array of all background image records.
 */
 export async function readAllData(): Promise<
  Array<{ id: string; type: string; blob: Blob }>
 > {
  const db = await openDatabase();
-  return db.getAll("backgrounds");
+  return db.getAll('backgrounds');
 }
-/**
+export async function writeData(id: string, type: string, blob: Blob): Promise<void> {
 * Writes or updates a background image record in the 'backgrounds' object store.
 * If a record with the given `id` already exists, it will be updated. Otherwise, a new record is created.
 *
 * @async
 * @param {string} id - The unique identifier for the background image record.
 * @param {string} type - The MIME type of the image (e.g., "image/png").
 * @param {Blob} blob - The Blob object containing the image data.
 * @returns {Promise<void>} A promise that resolves when the data has been successfully written.
 */
 export async function writeData(
  id: string,
  type: string,
  blob: Blob,
 ): Promise<void> {
  const db = await openDatabase();
-  await db.put("backgrounds", { id, type, blob });
+  await db.put('backgrounds', { id, type, blob });
 }
 /**
 * Deletes a background image record from the 'backgrounds' object store by its ID.
 *
 * @async
 * @param {string} id - The unique identifier of the background image record to delete.
 * @returns {Promise<void>} A promise that resolves when the data has been successfully deleted.
 */
 export async function deleteData(id: string): Promise<void> {
  const db = await openDatabase();
-  await db.delete("backgrounds", id);
+  await db.delete('backgrounds', id);
 }
 /**
 * Clears all records from the 'backgrounds' object store in IndexedDB.
 *
 * @async
 * @returns {Promise<void>} A promise that resolves when all data has been successfully cleared.
 */
 export async function clearAllData(): Promise<void> {
  const db = await openDatabase();
-  await db.clear("backgrounds");
+  await db.clear('backgrounds');
 }
-/**
+export async function getDataById(id: string): Promise<{ id: string; type: string; blob: Blob } | undefined> {
 * Retrieves a single background image record from the 'backgrounds' object store by its ID.
 *
 * @async
 * @param {string} id - The unique identifier of the background image record to retrieve.
 * @returns {Promise<{id: string, type: string, blob: Blob} | undefined>} A promise that resolves with the
 *                                                                        background image record if found, or undefined otherwise.
 */
 export async function getDataById(
  id: string,
 ): Promise<{ id: string; type: string; blob: Blob } | undefined> {
  const db = await openDatabase();
-  return db.get("backgrounds", id);
+  return db.get('backgrounds', id);
 }
 /**
 * Closes the active IndexedDB connection and nullifies the global `db` variable.
 * This is important to release resources and allow for proper database management.
 */
 export function closeDatabase(): void {
  if (db) {
    db.close();
@@ -126,31 +57,17 @@ export function closeDatabase(): void {
  }
 }
-/**
+// Helper function to check if IndexedDB is supported
 * Checks if IndexedDB is supported by the current browser environment.
 *
 * @returns {boolean} True if IndexedDB is supported, false otherwise.
 */
 export function isIndexedDBSupported(): boolean {
-  return "indexedDB" in window;
+  return 'indexedDB' in window;
 }
-/**
+// Helper function to check if there's enough storage space
- * Estimates available storage space and checks if it's sufficient for the specified `requiredSpace`.
+export async function hasEnoughStorageSpace(requiredSpace: number): Promise<boolean> {
- * Uses the `navigator.storage.estimate()` API if available.
+  if ('storage' in navigator && 'estimate' in navigator.storage) {
 * If the API is not available or cannot determine space, it defaults to assuming enough space is available.
 *
 * @async
 * @param {number} requiredSpace - The amount of storage space required, in bytes.
 * @returns {Promise<boolean>} A promise that resolves with true if enough space is estimated to be available, false otherwise.
 */
 export async function hasEnoughStorageSpace(
  requiredSpace: number,
 ): Promise<boolean> {
  if ("storage" in navigator && "estimate" in navigator.storage) {
    const { quota, usage } = await navigator.storage.estimate();
    if (quota !== undefined && usage !== undefined) {
-      return quota - usage > requiredSpace;
+      return (quota - usage) > requiredSpace;
    }
  }
  // If we can't determine, assume there's enough space
@@ -1,21 +1,11 @@
 type BackgroundUpdateCallback = () => void;
 /**
 * A singleton class used to notify listeners about generic background updates or events.
 * These updates typically signify that UI components or other parts of the application
 * might need to refresh or re-evaluate background-related data (e.g., after a new background
 * image is added, removed, or changed).
 */
 class BackgroundUpdates {
  private static instance: BackgroundUpdates;
  private listeners: Set<BackgroundUpdateCallback> = new Set();
  private constructor() {}
  /**
   * Gets the singleton instance of the BackgroundUpdates class.
   * @returns {BackgroundUpdates} The singleton instance.
   */
  public static getInstance(): BackgroundUpdates {
    if (!BackgroundUpdates.instance) {
      BackgroundUpdates.instance = new BackgroundUpdates();
@@ -23,33 +13,16 @@ class BackgroundUpdates {
    return BackgroundUpdates.instance;
  }
  /**
   * Registers a callback function to be invoked when a background update is triggered.
   *
   * @param {BackgroundUpdateCallback} callback The function to call when a background update occurs.
   *                                            This callback takes no arguments and returns void.
   */
  public addListener(callback: BackgroundUpdateCallback): void {
    this.listeners.add(callback);
  }
  /**
   * Unregisters a previously added callback function.
   * After calling this method, the provided callback will no longer be invoked when a background update is triggered.
   *
   * @param {BackgroundUpdateCallback} callback The callback function to remove from the listeners.
   */
  public removeListener(callback: BackgroundUpdateCallback): void {
    this.listeners.delete(callback);
  }
  /**
   * Invokes all registered listener callbacks, signifying that a background update has occurred.
   * This method should be called whenever a change to background data happens that requires
   * other parts of the application to be notified.
   */
  public triggerUpdate(): void {
-    this.listeners.forEach((callback) => callback());
+    this.listeners.forEach(callback => callback());
  }
 }
@@ -21,32 +21,16 @@ class SettingsPopup {
    return SettingsPopup.instance;
  }
  /**
   * Registers a callback function to be invoked when the settings popup is closed.
   *
   * @param {SettingsPopupCallback} callback The function to call when the settings popup closes.
   *                                         This callback takes no arguments and returns void.
   */
  public addListener(callback: SettingsPopupCallback): void {
    this.listeners.add(callback);
  }
  /**
   * Unregisters a previously added callback function.
   * After calling this method, the provided callback will no longer be invoked when the settings popup closes.
   *
   * @param {SettingsPopupCallback} callback The callback function to remove from the listeners.
   */
  public removeListener(callback: SettingsPopupCallback): void {
    this.listeners.delete(callback);
  }
  /**
   * Invokes all registered listener callbacks.
   * This method should be called when the settings popup is closed to notify all subscribed components or services.
   */
  public triggerClose(): void {
-    this.listeners.forEach((callback) => callback());
+    this.listeners.forEach(callback => callback());
  }
 }
@@ -1,21 +1,11 @@
 type ThemeUpdateCallback = () => void;
 /**
 * A singleton class used to notify listeners about theme-related updates.
 * These updates can include events like theme changes, custom theme modifications,
 * or any other event that might require UI components to refresh their appearance
 * or re-apply theme styles.
 */
 class ThemeUpdates {
  private static instance: ThemeUpdates;
  private listeners: Set<ThemeUpdateCallback> = new Set();
  private constructor() {}
  /**
   * Gets the singleton instance of the ThemeUpdates class.
   * @returns {ThemeUpdates} The singleton instance.
   */
  public static getInstance(): ThemeUpdates {
    if (!ThemeUpdates.instance) {
      ThemeUpdates.instance = new ThemeUpdates();
@@ -23,33 +13,16 @@ class ThemeUpdates {
    return ThemeUpdates.instance;
  }
  /**
   * Registers a callback function to be invoked when a theme update is triggered.
   *
   * @param {ThemeUpdateCallback} callback The function to call when a theme update occurs.
   *                                       This callback takes no arguments and returns void.
   */
  public addListener(callback: ThemeUpdateCallback): void {
    this.listeners.add(callback);
  }
  /**
   * Unregisters a previously added callback function.
   * After calling this method, the provided callback will no longer be invoked when a theme update is triggered.
   *
   * @param {ThemeUpdateCallback} callback The callback function to remove from the listeners.
   */
  public removeListener(callback: ThemeUpdateCallback): void {
    this.listeners.delete(callback);
  }
  /**
   * Invokes all registered listener callbacks, signifying that a theme-related update has occurred.
   * This method should be called whenever a change related to themes happens that requires
   * other parts of the application to be notified.
   */
  public triggerUpdate(): void {
-    this.listeners.forEach((callback) => callback());
+    this.listeners.forEach(callback => callback());
  }
 }
@@ -1,4 +1,4 @@
-@import "./components/ColourPicker.css";
+@import './components/ColourPicker.css';
@tailwind base;
@tailwind components;
@@ -6,7 +6,7 @@
    <title>BetterSEQTA+ Settings</title>
  </head>
  <body class="h-[600px]">
-    <div id="app" style="height: 100%"></div>
+    <div id="app" style="height: 100%;"></div>
    <script type="module" src="./index.ts"></script>
  </body>
 </html>
@@ -1,34 +1,29 @@
-import "./index.css";
+import "./index.css"
-import Settings from "./pages/settings.svelte";
+import Settings from "./pages/settings.svelte"
-import IconFamily from "@/resources/fonts/IconFamily.woff";
+import IconFamily from '@/resources/fonts/IconFamily.woff'
-import browser from "webextension-polyfill";
+import browser from "webextension-polyfill"
-import renderSvelte from "./main";
+import renderSvelte from "./main"
 import { initializeSettingsState } from "@/seqta/utils/listeners/SettingsState";
 function InjectCustomIcons() {
-  console.info("[BetterSEQTA+] Injecting Icons");
+  console.info('[BetterSEQTA+] Injecting Icons')
-  const style = document.createElement("style");
+  const style = document.createElement('style')
-  style.setAttribute("type", "text/css");
+  style.setAttribute('type', 'text/css')
  style.innerHTML = `
    @font-face {
      font-family: 'IconFamily';
      src: url('${browser.runtime.getURL(IconFamily)}') format('woff');
      font-weight: normal;
      font-style: normal;
-    }`;
+    }`
-  document.head.appendChild(style);
+  document.head.appendChild(style)
 }
-const mountPoint = document.getElementById("app");
+const mountPoint = document.getElementById('app')
 if (!mountPoint) {
-  console.error("Mount point #app not found");
+  console.error('Mount point #app not found')
-  throw new Error("Mount point #app not found");
+  throw new Error('Mount point #app not found')
 }
-InjectCustomIcons();
+InjectCustomIcons()
-
+renderSvelte(Settings, mountPoint, { standalone: true })
 (async () => {
  await initializeSettingsState();
  renderSvelte(Settings, mountPoint, { standalone: true });
 })();
@@ -1,4 +1,4 @@
-import "./index.css";
+import './index.css';
 declare module "*.png";
 declare module "*.svg";
@@ -1,6 +1,6 @@
-import { mount } from "svelte";
+import { mount } from "svelte"
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponent } from "svelte"
-import style from "./index.css?inline";
+import style from './index.css?inline'
 export default function renderSvelte(
  Component: SvelteComponent | any,
@@ -13,13 +13,11 @@ export default function renderSvelte(
      standalone: false,
      ...props,
    },
-  });
+  })
-  if (mountPoint instanceof ShadowRoot) {
+  const styleElement = document.createElement('style')
-    const styleElement = document.createElement("style");
+  styleElement.textContent = style
-    styleElement.textContent = style;
+  mountPoint.appendChild(styleElement)
    mountPoint.appendChild(styleElement);
  }
-  return app;
+  return app
 }
@@ -7,7 +7,7 @@
  import { standalone as StandaloneStore } from '../utils/standalone.svelte';
  import { onMount } from 'svelte'
-  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
  import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
@@ -52,19 +52,21 @@
  let { standalone } = $props<{ standalone?: boolean }>();
  let showColourPicker = $state<boolean>(false);
-  onMount(async () => {
+  onMount(() => {
    settingsPopup.addListener(() => {
      showColourPicker = false;
    });
    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="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
-    <div class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40">
+    <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} />
@@ -3,7 +3,6 @@
  import Button from "../../components/Button.svelte"
  import Slider from "../../components/Slider.svelte"
  import Select from "@/interface/components/Select.svelte"
  import HotkeyInput from "@/interface/components/HotkeyInput.svelte"
  import browser from "webextension-polyfill"
@@ -13,7 +12,7 @@
  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
  import { getAllPluginSettings } from "@/plugins"
-  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
+  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting } from "@/plugins/core/types"
  // Union type representing all possible settings
  type SettingType = 
@@ -24,26 +23,12 @@
      type: 'select', 
      id: string, 
      options: string[]
    }) |
    (Omit<ButtonSetting, 'type'> & {
      type: 'button',
      id: string
    }) |
    (Omit<HotkeySetting, 'type'> & {
      type: 'hotkey',
      id: string
    }) |
    (Omit<ComponentSetting, 'type'> & {
      type: 'component',
      id: string,
      component: any
    });
  interface Plugin {
    pluginId: string;
    name: string;
    description: string;
    beta?: boolean;
    settings: Record<string, SettingType>;
  }
@@ -60,11 +45,7 @@
      pluginSettingsValues[plugin.pluginId] = stored[storageKey] || {};
      for (const [key, setting] of Object.entries(plugin.settings)) {
-        if (
+        if (pluginSettingsValues[plugin.pluginId][key] === undefined) {
          pluginSettingsValues[plugin.pluginId][key] === undefined &&
          setting.type !== 'button' &&
          setting.type !== 'component'
        ) {
          pluginSettingsValues[plugin.pluginId][key] = setting.default;
        }
      }
@@ -203,20 +184,12 @@
  {/each}
  {#each pluginSettings as plugin}
-  <div class="border-none">
+    <div>
    <div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40 {!(plugin as any).disableToggle && Object.keys(plugin.settings).length === 0 ? 'hidden' : ''}">
      <!-- Always show enable toggle if disableToggle is true -->
      {#if (plugin as any).disableToggle}
        <div class="flex justify-between items-center px-4 py-3">
          <div class="pr-4">
-              <h2 class="flex gap-2 items-center text-sm font-bold">
+            <h2 class="text-sm font-bold">Enable {plugin.name}</h2>
                Enable {plugin.name}
                {#if plugin.beta}
                  <span class="px-2 py-0.5 text-xs font-medium text-orange-800 bg-orange-100 rounded-full border border-orange-300/30 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-900/30">
                    Beta
                  </span>
                {/if}
              </h2>
            <p class="text-xs">{plugin.description}</p>
          </div>
          <div>
@@ -228,6 +201,7 @@
        </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 -->
@@ -254,7 +228,7 @@
                {:else if setting.type === 'string'}
                  <input
                    type="text"
-                      class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D]/50 bg-[#DDDDDD] dark:text-white border-none"
+                    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)}
                  />                
@@ -267,21 +241,6 @@
                    label: opt.charAt(0).toUpperCase() + opt.slice(1)
                    }))}
                  />
                  {:else if setting.type === 'button'}
                    <Button
                      onClick={() => setting.trigger?.()}
                      text={setting.title}
                    />
                  {:else if setting.type === 'hotkey'}
                    <HotkeyInput
                      value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                      onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                    />
                  {:else if setting.type === 'component'}
                    {#if setting.component}
                      {@const Component = setting.component}
                      <Component />
                    {/if}
                {/if}
              </div>
            </div>
@@ -289,11 +248,8 @@
        {/each}
      {/if}
    </div>
  </div>
  {/each}
  <div class="p-1 border-none"></div>
  {@render Setting({
    title: "BetterSEQTA+",
    description: "Enables BetterSEQTA+ features",
@@ -306,8 +262,7 @@
  })}
  {#if $settingsState.devMode}
-    <div class="flex-col p-1 my-1 bg-gradient-to-br from-white rounded-xl border shadow-sm to-zinc-100 border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
+    <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
      <div class="flex justify-between items-center px-4 py-3">
      <div class="pr-4">
        <h2 class="text-sm font-bold">Developer Mode</h2>
        <p class="text-xs">Enables developer mode, allowing you to test new features and changes.</p>
@@ -328,18 +283,5 @@
        />
      </div>
    </div>
      <div class="flex justify-between items-center px-4 py-3">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Mock Notices</h2>
          <p class="text-xs">Use fake notice data on homepage instead of real data</p>
        </div>
        <div>
          <Switch 
            state={$settingsState.mockNotices ?? false} 
            onChange={(isOn: boolean) => settingsState.mockNotices = isOn} 
          />
        </div>
      </div>
    </div>
  {/if}
 </div>
@@ -3,10 +3,8 @@
  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
  import Switch from "@/interface/components/Switch.svelte"
  import { onMount } from 'svelte';
  import Shortcuts from "@/seqta/content/links.json"
  let isLoaded = $state(false);
  let fileInput = $state<HTMLInputElement | null>(null);
  onMount(async () => {
    // Wait for settingsState to be initialized
@@ -23,38 +21,15 @@
    });
  });
-  const switchChange = (shortcut: any) => {    
+  const switchChange = (index: number) => {    
-    const value = $settingsState.shortcuts.find(s => s.name === shortcut);
+    const updatedShortcuts = [...settingsState.shortcuts];
-    if (value) {
+    updatedShortcuts[index].enabled = !updatedShortcuts[index].enabled;
-      value.enabled = !value.enabled;
+    settingsState.shortcuts = updatedShortcuts;
      settingsState.shortcuts = settingsState.shortcuts;
    } else {
      settingsState.shortcuts = [...settingsState.shortcuts, { name: shortcut, enabled: true }];
    }
  }
  let isFormVisible = $state(false);
  let newTitle = $state("");
  let newURL = $state("");
  let newIcon = $state<string | null>(null);
  function handleIconChange(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file && file.type === "image/svg+xml") {
      const reader = new FileReader();
      reader.onload = () => {
        newIcon = reader.result as string;
      };
      reader.readAsText(file);
    }
  }
  const clearIcon = () => {
    newIcon = null;
    if (fileInput) {
      fileInput.value = ""; // Clear the file input so the same file can be re-selected
    }
  };
  const toggleForm = () => {
    isFormVisible = !isFormVisible;
@@ -74,13 +49,11 @@
  const addNewCustomShortcut = () => {
    if (isValidTitle(newTitle) && isValidURL(newURL)) {
-      const icon = newIcon || newTitle[0];
+      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon };
      settingsState.customshortcuts = [...settingsState.customshortcuts, newShortcut];
      newTitle = "";
      newURL = "";
      newIcon = null;
      isFormVisible = false;
    } else {
      alert("Please enter a valid title and URL.");
@@ -92,6 +65,15 @@
  };
 </script>
 {#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
 <div class="flex justify-between items-center px-4 py-3">
  <div class="pr-4">
    <h2 class="text-sm">{Shortcut.name}</h2>
  </div>
  <Switch state={Shortcut.enabled} onChange={() => switchChange(parseInt(index))} />
 </div>
 {/snippet}
 <div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
  {#if isLoaded}
    <div>
@@ -123,7 +105,7 @@
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.05, duration: 0.2 }}
-              class="flex gap-2 w-full"
+              class="w-full"
            >
              <input
                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"
@@ -131,48 +113,6 @@
                placeholder="URL eg. https://google.com"
                bind:value={newURL}
              />
                <input
                  bind:this={fileInput}
                  class="p-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
                  type="file"
                  accept=".svg"
                  onchange={handleIconChange}
                  hidden
                />
                <button
                  type="button"
                  class="flex justify-between items-center p-2 my-2 text-left rounded-lg border border-dashed transition text-nowrap text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-700/50 hover:bg-zinc-200/50 dark:hover:bg-zinc-700/30 focus:bg-zinc-200/50 dark:focus:bg-zinc-600/50 border-zinc-300 dark:border-zinc-600"
                  onclick={() => fileInput?.click()}
                >
                  {#if newIcon}
                    <div class="flex overflow-hidden items-center">
                      <div class="flex-shrink-0 mr-2 w-6 h-6">
                        <img src={`data:image/svg+xml;base64,${btoa(newIcon)}`} alt="Selected Icon" class="object-contain w-full h-full" />
                      </div>
                      <span class="truncate">Selected Icon</span>
                    </div>
                    <span
                      class="p-1 ml-2 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600"
                      aria-label="Clear icon"
                      role="button"
                      tabindex="0"
                      onclick={(event) => { event.stopPropagation(); clearIcon(); }}
                      onkeydown={(event) => {
                        if (event.key === 'Enter' || event.key === ' ') {
                          event.preventDefault();
                          clearIcon();
                        }
                      }}
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  {:else}
                    <span class="font-IconFamily">{ '\ued47' }</span>
                    <span class="ml-2">SVG icon <span class="text-xs italic text-zinc-400 dark:text-zinc-500">(Optional)</span></span>
                  {/if}
                </button>
            </MotionDiv>
          </div>
        {/if}
@@ -196,14 +136,8 @@
      </MotionDiv>
    </div>
-    {#each Object.entries(Shortcuts) as shortcut}
+    {#each Object.entries($settingsState.shortcuts) as shortcut}
-      <div class="flex justify-between items-center px-4 py-3">
+      {@render Shortcuts(shortcut)}
        <div class="pr-4">
          <!-- Use DisplayName if it exists, otherwise use the key (shortcut[0]) as a fallback -->
          <h2 class="text-sm">{shortcut[1].DisplayName || shortcut[0]}</h2>
        </div>
        <Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
      </div>
    {/each}
    <!-- Custom Shortcuts Section -->
@@ -2,6 +2,6 @@ export interface SettingsList {
  title: string;
  id: number;
  description: string;
-  Component: any /* TODO: Give this a type */;
+  Component: any; /* TODO: Give this a type */
  props?: any;
 }
@@ -16,7 +16,7 @@ export class Standalone {
 	public setStandalone(value: boolean) {
 		this._standalone = value;
-    this.subscribers.forEach((subscriber) => subscriber(value));
+		this.subscribers.forEach(subscriber => subscriber(value));
 	}
 	public get standalone() {
@@ -1,49 +1,23 @@
-import type { LoadedCustomTheme } from "@/types/CustomThemes";
+import type { LoadedCustomTheme } from '@/types/CustomThemes';
 /**
 * Generates a random 9-character alphanumeric string to be used as a unique ID for images.
 * This helps in identifying and managing custom images within a theme.
 *
 * @returns {string} A randomly generated unique ID string.
 */
 export function generateImageId(): string {
  return Math.random().toString(36).substr(2, 9);
 }
-/**
+export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> | LoadedCustomTheme {
 * Handles the upload of a new custom image from a file input event.
 * If a file is selected, it reads the file using FileReader, converts it to a Blob,
 * generates a unique ID and a default variable name for it, and then adds this new image
 * to the `CustomImages` array within the provided `theme` object.
 *
 * @param {Event} event The file input change event, typically from an `<input type="file">` element.
 * @param {LoadedCustomTheme} theme The current theme object to which the new image will be added.
 * @returns {Promise<LoadedCustomTheme> | LoadedCustomTheme} A Promise that resolves with the updated theme object
 *                                                          containing the new image if a file was processed.
 *                                                          Returns the original theme object synchronously if no file was selected.
 */
 export function handleImageUpload(
  event: Event,
  theme: LoadedCustomTheme,
 ): Promise<LoadedCustomTheme> | LoadedCustomTheme {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
-  input.value = "";
+  input.value = '';
  if (file) {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = async () => {
-        const imageBlob = await fetch(reader.result as string).then((res) =>
+        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
          res.blob(),
        );
        const imageId = generateImageId();
        const variableName = `custom-image-${theme.CustomImages.length}`;
        resolve({
          ...theme,
-          CustomImages: [
+          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: null }],
            ...theme.CustomImages,
            { id: imageId, blob: imageBlob, variableName, url: null },
          ],
        });
      };
      reader.readAsDataURL(file);
@@ -52,75 +26,31 @@ export function handleImageUpload(
  return theme;
 }
-/**
+export function handleRemoveImage(imageId: string, theme: LoadedCustomTheme): LoadedCustomTheme {
 * Removes a custom image from the theme based on its ID.
 * It filters out the image with the specified `imageId` from the `CustomImages` array
 * in the `theme` object.
 *
 * @param {string} imageId The unique ID of the custom image to be removed.
 * @param {LoadedCustomTheme} theme The current theme object from which the image will be removed.
 * @returns {LoadedCustomTheme} A new theme object with the specified image removed from its `CustomImages` array.
 *                              This function is synchronous.
 */
 export function handleRemoveImage(
  imageId: string,
  theme: LoadedCustomTheme,
 ): LoadedCustomTheme {
  return {
    ...theme,
    CustomImages: theme.CustomImages.filter((image) => image.id !== imageId),
  } as LoadedCustomTheme;
 }
-/**
+export function handleImageVariableChange(imageId: string, variableName: string, theme: LoadedCustomTheme): LoadedCustomTheme {
 * Updates the CSS variable name associated with a specific custom image in the theme.
 * It finds the image by `imageId` in the `CustomImages` array of the `theme` object
 * and updates its `variableName` property.
 *
 * @param {string} imageId The unique ID of the custom image whose variable name is to be updated.
 * @param {string} variableName The new CSS variable name to assign to the image.
 * @param {LoadedCustomTheme} theme The current theme object containing the image to be updated.
 * @returns {LoadedCustomTheme} A new theme object with the updated image variable name.
 *                              This function is synchronous.
 */
 export function handleImageVariableChange(
  imageId: string,
  variableName: string,
  theme: LoadedCustomTheme,
 ): LoadedCustomTheme {
  return {
    ...theme,
    CustomImages: theme.CustomImages.map((image) =>
-      image.id === imageId ? { ...image, variableName } : image,
+      image.id === imageId ? { ...image, variableName } : image
    ),
  } as LoadedCustomTheme;
 }
-/**
+export function handleCoverImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> {
 * Handles the upload of a cover image for the theme from a file input event.
 * If a file is selected, it reads the file using FileReader, converts it to a Blob,
 * and then updates the `coverImage` property of the provided `theme` object with this new blob.
 *
 * @param {Event} event The file input change event, typically from an `<input type="file">` element.
 * @param {LoadedCustomTheme} theme The current theme object whose cover image will be updated.
 * @returns {Promise<LoadedCustomTheme>} A Promise that resolves with the updated theme object
 *                                       containing the new cover image if a file was processed.
 *                                       Returns a Promise resolving with the original theme object if no file was selected.
 */
 export function handleCoverImageUpload(
  event: Event,
  theme: LoadedCustomTheme,
 ): Promise<LoadedCustomTheme> {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
-  input.value = "";
+  input.value = '';
  if (file) {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = async () => {
-        const imageBlob = await fetch(reader.result as string).then((res) =>
+        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
          res.blob(),
        );
        resolve({ ...theme, coverImage: imageBlob });
      };
      reader.readAsDataURL(file);
@@ -1,12 +1,9 @@
-import { createManifest } from "../../lib/createManifest";
+import { createManifest } from '../../lib/createManifest'
-import baseManifest from "./manifest.json";
+import baseManifest from './manifest.json'
-import pkg from "../../package.json";
+import pkg from '../../package.json'
-export const brave = createManifest(
+export const brave = createManifest({
  {
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
-  },
+}, 'brave')
  "brave",
 );
@@ -1,12 +1,9 @@
-import { createManifest } from "../../lib/createManifest";
+import { createManifest } from '../../lib/createManifest'
-import baseManifest from "./manifest.json";
+import baseManifest from './manifest.json'
-import pkg from "../../package.json";
+import pkg from '../../package.json'
-export const chrome = createManifest(
+export const chrome = createManifest({
  {
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
-  },
+}, 'chrome')
  "chrome",
 );
@@ -1,12 +1,9 @@
-import { createManifest } from "../../lib/createManifest";
+import { createManifest } from '../../lib/createManifest'
-import baseManifest from "./manifest.json";
+import baseManifest from './manifest.json'
-import pkg from "../../package.json";
+import pkg from '../../package.json'
-export const edge = createManifest(
+export const edge = createManifest({
  {
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
-  },
+}, 'edge')
  "edge",
 );
@@ -1,6 +1,6 @@
-import { createManifest } from "../../lib/createManifest";
+import { createManifest } from '../../lib/createManifest'
-import baseManifest from "./manifest.json";
+import baseManifest from './manifest.json'
-import pkg from "../../package.json";
+import pkg from '../../package.json'
 const updatedFirefoxManifest = {
  ...baseManifest,
@@ -10,13 +10,13 @@ const updatedFirefoxManifest = {
    scripts: [baseManifest.background.service_worker],
  },
  action: {
-    default_popup: "interface/index.html#settings",
+    "default_popup": "interface/index.html#settings",
  },
  browser_specific_settings: {
    gecko: {
      id: pkg.author.email,
    },
-  },
+  }
-};
+}
-export const firefox = createManifest(updatedFirefoxManifest, "firefox");
+export const firefox = createManifest(updatedFirefoxManifest, 'firefox')
@@ -32,7 +32,7 @@
  ],
  "web_accessible_resources": [
    {
-      "resources": ["resources/icons/*", "resources/update-image.webp"],
+      "resources": ["*/*", "resources/*", "seqta/utils/migration/migrate.html", "plugins/built-in/globalSearch/*"],
      "matches": ["*://*/*"]
    }
  ]
@@ -1,12 +1,9 @@
-import { createManifest } from "../../lib/createManifest";
+import { createManifest } from '../../lib/createManifest'
-import baseManifest from "./manifest.json";
+import baseManifest from './manifest.json'
-import pkg from "../../package.json";
+import pkg from '../../package.json'
-export const opera = createManifest(
+export const opera = createManifest({
  {
    ...baseManifest,
    version: pkg.version,
    description: pkg.description,
-  },
+}, 'opera')
  "opera",
 );
@@ -1,6 +1,6 @@
-import { createManifest } from "../../lib/createManifest";
+import { createManifest } from '../../lib/createManifest'
-import baseManifest from "./manifest.json";
+import baseManifest from './manifest.json'
-import pkg from "../../package.json";
+import pkg from '../../package.json'
 const updatedSafariManifest = {
  ...baseManifest,
@@ -8,12 +8,12 @@ const updatedSafariManifest = {
  description: pkg.description,
  browser_specific_settings: {
    safari: {
-      strict_min_version: "15.4",
+      strict_min_version: '15.4',
-      strict_max_version: "*",
+      strict_max_version: '*',
    },
    // ^^^ https://developer.apple.com/documentation/safariservices/safari_web_extensions/optimizing_your_web_extension_for_safari#3743239
    //     https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#safari_properties
  },
-};
+}
-export const safari = createManifest(updatedSafariManifest, "safari");
+export const safari = createManifest(updatedSafariManifest, 'safari')
@@ -3,8 +3,8 @@ class ReactFiber {
    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.fibers = this.nodes.map(node => this.getFiberNode(node));
-    this.components = this.fibers.map((fiber) => this.getOwnerComponent(fiber));
+    this.components = this.fibers.map(fiber => this.getOwnerComponent(fiber));
    if (this.debug) {
      console.log("Selected Nodes:", this.nodes);
@@ -19,10 +19,8 @@ class ReactFiber {
  getFiberNode(node) {
    if (!node) return null;
-    const fiberKey = Object.getOwnPropertyNames(node).find(
+    const fiberKey = Object.getOwnPropertyNames(node).find(name =>
-      (name) =>
+      name.startsWith('__reactFiber') || name.startsWith('__reactInternalInstance')
        name.startsWith("__reactFiber") ||
        name.startsWith("__reactInternalInstance"),
    );
    return fiberKey ? node[fiberKey] : null;
  }
@@ -30,10 +28,7 @@ class ReactFiber {
  getOwnerComponent(fiberNode) {
    let current = fiberNode;
    while (current) {
-      if (
+      if (current.stateNode && (current.stateNode.setState || current.stateNode.forceUpdate)) {
        current.stateNode &&
        (current.stateNode.setState || current.stateNode.forceUpdate)
      ) {
        return current.stateNode;
      }
      current = current.return;
@@ -47,7 +42,7 @@ class ReactFiber {
    if (key === undefined) {
      return state;
-    } else if (typeof key === "string") {
+    } else if (typeof key === 'string') {
      return state?.[key];
    } else if (Array.isArray(key)) {
      const filteredState = {};
@@ -62,25 +57,23 @@ class ReactFiber {
  }
  setState(update) {
-    this.components.forEach((component) => {
+    this.components.forEach(component => {
      if (component?.setState) {
-        if (typeof update === "function") {
+        if (typeof update === 'function') {
          // Functional update
-          component.setState((prevState) => {
+          component.setState(prevState => {
            const newState = update(prevState);
-            if (this.debug)
+            if (this.debug) console.log("✅ Updated State (Functional):", newState);
              console.log("✅ Updated State (Functional):", newState);
            return newState;
          });
        } else {
          // Object update (merge with existing state)
-          component.setState((prevState) => {
+          component.setState(prevState => {
            const newState = {
              ...prevState,
-              ...update,
+              ...update
            };
-            if (this.debug)
+            if (this.debug) console.log("✅ Updated State (Object Merge):", newState);
              console.log("✅ Updated State (Object Merge):", newState);
            return newState;
          });
        }
@@ -100,7 +93,7 @@ class ReactFiber {
  }
  setProp(propName) {
-    this.fibers.forEach((fiber) => {
+    this.fibers.forEach(fiber => {
      if (fiber?.memoizedProps) {
        fiber.memoizedProps[propName] = value;
      }
@@ -109,7 +102,7 @@ class ReactFiber {
  }
  forceUpdate() {
-    this.components.forEach((component) => {
+    this.components.forEach(component => {
      if (component?.forceUpdate) {
        component.forceUpdate();
        if (this.debug) console.log("🔄 Forced React Re-render");
@@ -120,12 +113,12 @@ class ReactFiber {
 }
 function makeSerializable(obj) {
-  if (typeof obj !== "object" || obj === null) {
+  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
-    return obj.map((item) => makeSerializable(item));
+    return obj.map(item => makeSerializable(item));
  }
  const serializableObj = {};
@@ -133,17 +126,17 @@ function makeSerializable(obj) {
    if (Object.hasOwn(obj, key)) {
      let value = obj[key];
-      if (typeof value === "function") {
+      if (typeof value === 'function') {
-        value = "[Function]";
+        value = '[Function]';
      } else if (value instanceof HTMLElement) {
        value = {
-          type: "HTMLElement",
+          type: 'HTMLElement',
          id: value.id,
-          tagName: value.tagName,
+          tagName: value.tagName
        }; // Replace DOM node with ID/tag info
-      } else if (typeof value === "symbol") {
+      } else if (typeof value === 'symbol') {
        value = value.toString();
-      } else if (typeof value === "object" && value !== null) {
+      } else if (typeof value === 'object' && value !== null) {
        value = makeSerializable(value);
      }
@@ -153,11 +146,17 @@ function makeSerializable(obj) {
  return serializableObj;
 }
-window.addEventListener("message", (event) => {
+window.addEventListener('message', (event) => {
  if (event.data.type === "reactFiberRequest") {
-    const { selector, action, payload, debug, messageId } = event.data;
+    const {
-    const fiberInstance = ReactFiber.find(selector, {
+      selector,
      action,
      payload,
      debug,
      messageId
    } = event.data;
    const fiberInstance = ReactFiber.find(selector, {
      debug
    });
    let response;
@@ -168,7 +167,7 @@ window.addEventListener("message", (event) => {
      case "setState":
        // Handle both function and object updates
        if (payload.updateFn) {
-          const updateFn = new Function('return ' + payload.updateFn)();
+          const updateFn = eval(`(${payload.updateFn})`);
          fiberInstance.setState(updateFn);
        } else {
          fiberInstance.setState(payload.updateObject);
@@ -192,53 +191,14 @@ window.addEventListener("message", (event) => {
        response = null;
    }
-    if (response !== null && typeof response === "object") {
+    if (response !== null && typeof response === 'object') {
      response = makeSerializable(response);
    }
-    window.postMessage(
+    window.postMessage({
      {
      type: "reactFiberResponse",
      response,
      messageId,
      },
      "*",
    );
  } else if (event.data.type === "triggerKeyboardEvent") {
    // Handle keyboard event triggering from content script
    const { key, code, altKey, ctrlKey, metaKey, shiftKey, keyCode } = event.data;
    const keyboardEvent = new KeyboardEvent('keydown', {
      key,
      code,
      keyCode: keyCode || 0,
      which: keyCode || 0,
      altKey: altKey || false,
      ctrlKey: ctrlKey || false,
      metaKey: metaKey || false,
      shiftKey: shiftKey || false,
      bubbles: true,
      cancelable: true
    });
    document.dispatchEvent(keyboardEvent);
  } else if (event.data.type === "ckeditorSetData") {
    // Handle CKEditor data setting
    const { editorId, content } = event.data;
    if (window.CKEDITOR && window.CKEDITOR.instances && window.CKEDITOR.instances[editorId]) {
      window.CKEDITOR.instances[editorId].setData(content);
    } else {
      console.warn(`[pageState] CKEditor instance '${editorId}' not found`);
    }
  } else if (event.data.type === "ckeditorGetData") {
    const { editorId } = event.data;
    if (window.CKEDITOR && window.CKEDITOR.instances && window.CKEDITOR.instances[editorId]) {
      const data = window.CKEDITOR.instances[editorId].getData();
      window.postMessage({
        type: "ckeditorGetDataResponse",
        data,
    }, "*");
  }
  }
 });
@@ -1,11 +1,7 @@
-import { BasePlugin } from "../../core/settings";
+import { BasePlugin } from '../../core/settings';
-import { type Plugin } from "@/plugins/core/types";
+import { type Plugin } from '@/plugins/core/types';
-import {
+import { defineSettings, numberSetting, Setting } from '@/plugins/core/settingsHelpers';
-  defineSettings,
+import styles from './styles.css?inline';
  numberSetting,
  Setting,
 } from "@/plugins/core/settingsHelpers";
 import styles from "./styles.css?inline";
 const settings = defineSettings({
  speed: numberSetting({
@@ -14,8 +10,8 @@ const settings = defineSettings({
    description: "Controls how fast the background moves",
    min: 0.1,
    max: 2,
-    step: 0.05,
+    step: 0.05
-  }),
+  })
 });
 class AnimatedBackgroundPluginClass extends BasePlugin<typeof settings> {
@@ -26,10 +22,10 @@ class AnimatedBackgroundPluginClass extends BasePlugin<typeof settings> {
 const instance = new AnimatedBackgroundPluginClass();
 const animatedBackgroundPlugin: Plugin<typeof settings> = {
-  id: "animated-background",
+  id: 'animated-background',
-  name: "Animated Background",
+  name: 'Animated Background',
-  description: "Adds an animated background to BetterSEQTA+",
+  description: 'Adds an animated background to BetterSEQTA+',
-  version: "1.0.0",
+  version: '1.0.0',
  disableToggle: true,
  styles: styles,
  settings: instance.settings,
@@ -46,12 +42,12 @@ const animatedBackgroundPlugin: Plugin<typeof settings> = {
    const backgrounds = [
      { classes: ["bg"] },
      { classes: ["bg", "bg2"] },
-      { classes: ["bg", "bg3"] },
+      { classes: ["bg", "bg3"] }
    ];
    backgrounds.forEach(({ classes }) => {
      const bk = document.createElement("div");
-      classes.forEach((cls) => bk.classList.add(cls));
+      classes.forEach(cls => bk.classList.add(cls));
      container.insertBefore(bk, menu);
    });
@@ -59,23 +55,20 @@ const animatedBackgroundPlugin: Plugin<typeof settings> = {
    updateAnimationSpeed(api.settings.speed);
    // Listen for speed changes
-    const speedUnregister = api.settings.onChange(
+    const speedUnregister = api.settings.onChange('speed', updateAnimationSpeed);
      "speed",
      updateAnimationSpeed,
    );
    // Return cleanup function
    return () => {
      speedUnregister.unregister();
      // Remove background elements
-      const backgrounds = document.getElementsByClassName("bg");
+      const backgrounds = document.getElementsByClassName('bg');
-      Array.from(backgrounds).forEach((element) => element.remove());
+      Array.from(backgrounds).forEach(element => element.remove());
    };
-  },
+  }
 };
 function updateAnimationSpeed(speed: number) {
-  const bgElements = document.getElementsByClassName("bg");
+  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`;
@@ -13,12 +13,12 @@ export function CreateBackground() {
  const backgrounds = [
    { classes: ["bg"] },
    { classes: ["bg", "bg2"] },
-    { classes: ["bg", "bg3"] },
+    { classes: ["bg", "bg3"] }
  ];
  backgrounds.forEach(({ classes }) => {
    const bk = document.createElement("div");
-    classes.forEach((cls) => bk.classList.add(cls));
+    classes.forEach(cls => bk.classList.add(cls));
    container.insertBefore(bk, menu);
  });
 } 
@@ -2,5 +2,5 @@ export function RemoveBackground() {
  const backgrounds = document.getElementsByClassName("bg");
  // Convert HTMLCollection to Array and remove each element
-  Array.from(backgrounds).forEach((element) => element.remove());
+  Array.from(backgrounds).forEach(element => element.remove());
 } 
@@ -1,9 +1,5 @@
 import { BasePlugin } from "@/plugins/core/settings";
-import {
+import { booleanSetting, defineSettings, Setting } from "@/plugins/core/settingsHelpers";
  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";
@@ -12,7 +8,7 @@ const settings = defineSettings({
  lettergrade: booleanSetting({
    default: false,
    title: "Letter Grades",
-    description: "Display the average as a letter instead of a percentage",
+    description: "Display the average as a letter instead of a percentage"
  }),
 });
@@ -38,105 +34,62 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
        "#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
        true,
        10,
-        1000,
+        1000
      );
      // Helper function to find actual class names by their base pattern
-      const getClassByPattern = (
+      const getClassByPattern = (element: Element | Document, basePattern: string): string => {
        element: Element | Document,
        basePattern: string,
      ): string => {
        // Find all classes on the element
-        const classes = Array.from(element.querySelectorAll("*"))
+        const classes = Array.from(element.querySelectorAll('*'))
-          .flatMap((el) => Array.from(el.classList))
+          .flatMap(el => Array.from(el.classList))
-          .filter((className) => className.startsWith(basePattern));
+          .filter(className => className.startsWith(basePattern));
-        return classes.length ? classes[0] : "";
+        return classes.length ? classes[0] : '';
      };
      // Find actual class names from the DOM
-      const sampleAssessmentItem = document.querySelector(
+      const sampleAssessmentItem = document.querySelector("[class*='AssessmentItem__AssessmentItem___']");
        "[class*='AssessmentItem__AssessmentItem___']",
      );
      if (!sampleAssessmentItem) return;
      // Extract all necessary class patterns from a sample assessment item
-      const assessmentItemClass =
+      const assessmentItemClass = Array.from(sampleAssessmentItem.classList)
-        Array.from(sampleAssessmentItem.classList).find((c) =>
+        .find(c => c.startsWith('AssessmentItem__AssessmentItem___')) || '';
          c.startsWith("AssessmentItem__AssessmentItem___"),
        ) || "";
-      const metaContainerClass = getClassByPattern(
+      const metaContainerClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__metaContainer___');
-        sampleAssessmentItem,
+      const metaClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__meta___');
-        "AssessmentItem__metaContainer___",
+      const simpleResultClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__simpleResult___');
-      );
+      const titleClass = getClassByPattern(sampleAssessmentItem, 'AssessmentItem__title___');
      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(
+      const thermoscoreElement = document.querySelector("[class*='Thermoscore__Thermoscore___']");
        "[class*='Thermoscore__Thermoscore___']",
      );
      if (!thermoscoreElement) return;
-      const thermoscoreClass =
+      const thermoscoreClass = Array.from(thermoscoreElement.classList)
-        Array.from(thermoscoreElement.classList).find((c) =>
+        .find(c => c.startsWith('Thermoscore__Thermoscore___')) || '';
-          c.startsWith("Thermoscore__Thermoscore___"),
+      const fillClass = getClassByPattern(thermoscoreElement, 'Thermoscore__fill___');
-        ) || "";
+      const textClass = getClassByPattern(thermoscoreElement, 'Thermoscore__text___');
      const fillClass = getClassByPattern(
        thermoscoreElement,
        "Thermoscore__fill___",
      );
      const textClass = getClassByPattern(
        thermoscoreElement,
        "Thermoscore__text___",
      );
      // Find assessment list
-      const assessmentsList = document.querySelector(
+      const assessmentsList = document.querySelector("#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']");
        "#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
      );
      if (!assessmentsList) return;
-      const gradeElements = document.querySelectorAll(
+      const gradeElements = document.querySelectorAll("[class*='Thermoscore__text___']");
        "[class*='Thermoscore__text___']",
      );
      if (!gradeElements.length) return;
      // Parse and average grades
      const letterToNumber: Record<string, number> = {
-        "A+": 100,
+        "A+": 100, A: 95, "A-": 90,
-        A: 95,
+        "B+": 85, B: 80, "B-": 75,
-        "A-": 90,
+        "C+": 70, C: 65, "C-": 60,
-        "B+": 85,
+        "D+": 55, D: 50, "D-": 45,
-        B: 80,
+        "E+": 40, E: 35, "E-": 30,
        "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));
+          const [raw, max] = str.split("/").map(n => parseFloat(n));
          return (raw / max) * 100;
        }
        if (str.includes("%")) {
@@ -159,23 +112,16 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
      const avg = total / count;
      const rounded = Math.ceil(avg / 5) * 5;
-      const numberToLetter = Object.entries(letterToNumber).reduce(
+      const numberToLetter = Object.entries(letterToNumber).reduce((acc, [k, v]) => {
        (acc, [k, v]) => {
        acc[v] = k;
        return acc;
-        },
+      }, {} as Record<number, string>);
        {} as Record<number, string>,
      );
      const letterAvg = numberToLetter[rounded] ?? "N/A";
-      const display = api.settings.lettergrade
+      const display = api.settings.lettergrade ? letterAvg : `${avg.toFixed(2)}%`;
        ? letterAvg
        : `${avg.toFixed(2)}%`;
      // Prevent duplicate
-      const existing = assessmentsList.querySelector(
+      const existing = assessmentsList.querySelector(`[class*='AssessmentItem__title___']`);
        `[class*='AssessmentItem__title___']`,
      );
      if (existing?.textContent === "Subject Average") return;
      // Use the dynamic class names in the HTML template
@@ -198,7 +144,7 @@ const assessmentsAveragePlugin: Plugin<typeof settings> = {
      assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
    });
-  },
+  }
 };
 export default assessmentsAveragePlugin;
@@ -1,384 +0,0 @@
 <script lang="ts">
  import { determineStatus, formatDate, getGradeValue } from "./utils";
  import { settingsState } from "@/seqta/utils/listeners/SettingsState";
  import confetti from "canvas-confetti";
  export let data: any;
  interface FilterOptions {
    subject: string;
    sortBy: "due" | "grade" | "subject" | "title";
  }
  function percentageToLetter(percentage: number): string {
    const letterMap: Record<number, string> = {
      100: "A+",
      95: "A",
      90: "A-",
      85: "B+",
      80: "B",
      75: "B-",
      70: "C+",
      65: "C",
      60: "C-",
      55: "D+",
      50: "D",
      45: "D-",
      40: "E+",
      35: "E",
      30: "E-",
      0: "F",
    };
    const rounded = Math.ceil(percentage / 5) * 5;
    return letterMap[rounded] || "F";
  }
  let currentFilters: FilterOptions = {
    subject: "all",
    sortBy: "due",
  };
  let filteredAssessments: any[] = [];
  let statusGroups: Record<string, any[]> = {};
  function updateAssessments() {
    filteredAssessments = data.assessments.filter((a: any) => {
      const subjectMatch =
        currentFilters.subject === "all" || a.code === currentFilters.subject;
      return subjectMatch;
    });
    filteredAssessments.sort((a: any, b: any) => {
      switch (currentFilters.sortBy) {
        case "due":
          return new Date(a.due).getTime() - new Date(b.due).getTime();
        case "grade":
          const gradeA = getGradeValue(a);
          const gradeB = getGradeValue(b);
          if (gradeA === null && gradeB === null) return 0;
          if (gradeA === null) return 1;
          if (gradeB === null) return -1;
          return gradeB - gradeA;
        case "subject":
          return a.code.localeCompare(b.code);
        case "title":
          return a.title.localeCompare(b.title);
        default:
          return 0;
      }
    });
    statusGroups = {
      UPCOMING: [],
      DUE_SOON: [],
      OVERDUE: [],
      SUBMITTED: [],
      MARKS_RELEASED: [],
    };
    filteredAssessments.forEach((assessment) => {
      const status = determineStatus(assessment);
      if (statusGroups[status]) {
        statusGroups[status].push(assessment);
      }
    });
  }
  function getDueDateClass(assessment: any): string {
    const status = determineStatus(assessment);
    switch (status) {
      case "OVERDUE":
        return "overdue";
      case "DUE_SOON":
        return "due-soon";
      case "UPCOMING":
        return "upcoming";
      default:
        return "";
    }
  }
  function markAssessmentCompleted(assessment: any) {
    const completedKey = "betterseqta-completed-assessments";
    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
    if (!completed.includes(assessment.id)) {
      completed.push(assessment.id);
      localStorage.setItem(completedKey, JSON.stringify(completed));
      updateAssessments();
      checkForCelebration();
    }
  }
  function unmarkAssessmentCompleted(assessment: any) {
    const completedKey = "betterseqta-completed-assessments";
    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
    const index = completed.indexOf(assessment.id);
    if (index > -1) {
      completed.splice(index, 1);
      localStorage.setItem(completedKey, JSON.stringify(completed));
      updateAssessments();
    }
  }
  function checkForCelebration() {
    const overdueCount = statusGroups.OVERDUE?.length || 0;
    const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
    if (overdueCount === 0 && dueSoonCount === 0) {
      setTimeout(() => {
        try {
          const duration = 100;
          const end = Date.now() + duration;
          (function frame() {
            confetti({
              particleCount: 17,
              angle: 60,
              spread: 65,
              drift: 0.8,
              startVelocity: 40,
              scalar: 2,
              gravity: 2,
              decay: 0.97,
              ticks: 300,
              origin: { x: 0, y: 1 },
              disableForReducedMotion: true,
            });
            confetti({
              particleCount: 17,
              angle: 120,
              spread: 65,
              drift: -0.8,
              startVelocity: 40,
              scalar: 2,
              decay: 0.97,
              ticks: 300,
              gravity: 2,
              origin: { x: 1, y: 1 },
              disableForReducedMotion: true,
            });
            if (Date.now() < end) {
              requestAnimationFrame(frame);
            }
          }());
        } catch (e) {
          console.log("Confetti celebration failed:", e);
        }
      }, 500);
    } else if (overdueCount === 0 || dueSoonCount === 0) {
      setTimeout(() => {
        try {
          confetti({
            particleCount: 100,
            spread: 70,
            origin: { y: 0.6 },
            scalar: 0.9,
            disableForReducedMotion: true,
          });
        } catch (e) {
          console.log("Confetti celebration failed:", e);
        }
      }, 500);
    }
  }
  function isManuallyCompleted(assessmentId: string): boolean {
    const completedKey = "betterseqta-completed-assessments";
    const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
    return completed.includes(assessmentId);
  }
  function handleCardClick(assessment: any, event: Event) {
    if ((event.target as HTMLElement).closest(".card-menu")) {
      return;
    }
    window.location.hash = `#?page=/assessments/${assessment.programmeID}:${assessment.metaclassID}&item=${assessment.id}`;
  }
  let openMenuId: string | null = null;
  function toggleMenu(assessmentId: string, event: Event) {
    event.stopPropagation();
    openMenuId = openMenuId === assessmentId ? null : assessmentId;
  }
  function closeAllMenus() {
    openMenuId = null;
  }
  $: {
    if (data) {
      updateAssessments();
    }
  }
  const columns = [
    {
      key: "UPCOMING",
      title: "Upcoming",
      className: "column-upcoming",
      icon: "📅",
    },
    {
      key: "DUE_SOON",
      title: "Due Soon",
      className: "column-due-soon",
      icon: "⏰",
    },
    {
      key: "OVERDUE",
      title: "Overdue",
      className: "column-overdue",
      icon: "🚨",
    },
    {
      key: "SUBMITTED",
      title: "Submitted",
      className: "column-submitted",
      icon: "📝",
    },
    {
      key: "MARKS_RELEASED",
      title: "Marked",
      className: "column-marked",
      icon: "✅",
    },
  ];
 </script>
 <svelte:window on:click={closeAllMenus} />
 <div id="grid-view-container">
  <div class="grid-view-header">
    <h1 class="grid-view-title">Assessments</h1>
    <div class="grid-view-filters">
      <select class="filter-select" bind:value={currentFilters.subject}>
        <option value="all">All Subjects</option>
        {#each data.subjects as subject}
          <option value={subject.code}>{subject.code} - {subject.title}</option>
        {/each}
      </select>
      <select class="filter-select" bind:value={currentFilters.sortBy}>
        <option value="due">Sort by Due Date</option>
        <option value="grade">Sort by Grade</option>
        <option value="subject">Sort by Subject</option>
        <option value="title">Sort by Title</option>
      </select>
    </div>
  </div>
  <div id="main-grid-content">
    {#if filteredAssessments.length === 0}
      <div class="empty-state">
        <div class="empty-icon">📋</div>
        <p>No assessments found matching your filters</p>
      </div>
    {:else}
      <div class="kanban-board">
        {#each columns as column}
          {#if statusGroups[column.key]?.length > 0}
            <div class="kanban-column-parent">
              <div class="kanban-column {column.className}">
                <div class="column-header">
                  <div class="column-title">
                    {column.icon} {column.title}
                    <span class="column-count">{statusGroups[column.key].length}</span>
                  </div>
                </div>
                <div class="column-cards" id="{column.key.toLowerCase()}-cards">
                  {#each statusGroups[column.key] as assessment}
                    {@const status = determineStatus(assessment)}
                    {@const dueDateClass = getDueDateClass(assessment)}
                    {@const isCompleted = isManuallyCompleted(assessment.id)}
                    {@const color = data.colors[assessment.code] || "#6366f1"}
                    <div 
                      class="assessment-card"
                      data-subject={assessment.code}
                      data-status={status}
                      style="--subject-color: {color}"
                      on:click={(e) => handleCardClick(assessment, e)}
                      role="button"
                      tabindex="0"
                      on:keydown={(e) => e.key === 'Enter' && handleCardClick(assessment, e)}
                    >
                      <div class="card-labels">
                        <span class="card-label label-subject">{assessment.code}</span>
                        {#if assessment.submitted}
                          <span class="card-label label-submitted" style="background: #10b981; color: white;">Submitted</span>
                        {/if}
                        {#if isCompleted && status === "MARKS_RELEASED" && !assessment.results}
                          <span class="card-label label-completed" style="background: #059669; color: white;">Completed</span>
                        {/if}
                      </div>
                      {#if status !== "MARKS_RELEASED" || isCompleted}
                        <div class="card-menu">
                          <button 
                            class="menu-button" 
                            data-assessment-id={assessment.id}
                            on:click={(e) => toggleMenu(assessment.id, e)}
                            aria-label="Open menu"
                          >
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                              <circle cx="12" cy="5" r="2"/>
                              <circle cx="12" cy="12" r="2"/>
                              <circle cx="12" cy="19" r="2"/>
                            </svg>
                          </button>
                          <div class="menu-dropdown" style="display: {openMenuId === assessment.id ? 'block' : 'none'};">
                            {#if status !== "MARKS_RELEASED"}
                              <button class="menu-item mark-completed" on:click={() => markAssessmentCompleted(assessment)}>
                                Mark as Completed
                              </button>
                            {:else if isCompleted}
                              <button class="menu-item mark-not-completed" on:click={() => unmarkAssessmentCompleted(assessment)}>
                                Mark as Not Complete
                              </button>
                            {/if}
                          </div>
                        </div>
                      {/if}
                      <h3 class="assessment-title">{assessment.title}</h3>
                      {#if !assessment.results && !isCompleted}
                        <div class="assessment-meta">
                          <div class="due-date {dueDateClass}">
                            📅 {formatDate(assessment.due, assessment.submitted)}
                          </div>
                        </div>
                      {/if}
                      {#if assessment.results}
                        <div class="card-footer">
                          <div class="Thermoscore__Thermoscore___WFpL3" style="--fill-colour: {color}">
                            <div style="width: {assessment.results.percentage}%" class="Thermoscore__fill___ojxDI">
                              <div title="{assessment.results.percentage}%" class="Thermoscore__text___XSR_M">
                                {(() => {
                                  const allSettings = settingsState.getAll() as unknown as any;
                                  const letterGradeSetting = allSettings["plugin.assessments-average.settings"]?.lettergrade;
                                  return letterGradeSetting 
                                    ? percentageToLetter(assessment.results.percentage)
                                    : `${assessment.results.percentage}%`;
                                })()}
                              </div>
                            </div>
                          </div>
                        </div>
                      {/if}
                    </div>
                  {/each}
                </div>
              </div>
            </div>
          {/if}
        {/each}
      </div>
    {/if}
  </div>
 </div>
@@ -1,8 +0,0 @@
 <script lang="ts">
  export let error: string;
 </script>
 <div class="error-container">
  <p class="error-text">Failed to load assessments</p>
  <p style="color: #94a3b8; font-size: 0.875rem;">{error}</p>
 </div>
@@ -1,78 +0,0 @@
 <div id="grid-view-container">
  <div class="grid-view-header">
    <h1 class="grid-view-title">Assessments</h1>
    <div class="grid-view-filters">
      <select class="filter-select" disabled>
        <option value="all">Loading subjects...</option>
      </select>
      <select class="filter-select" disabled>
        <option value="due">Sort by Due Date</option>
      </select>
    </div>
  </div>
  <div id="main-grid-content">
    <div class="kanban-board">
      {#each columns as column}
        <div class="kanban-column-parent">
          <div class="kanban-column {column.className}">
            <div class="column-header">
              <div class="column-title">
                {column.icon} {column.title}
                <span class="column-count">...</span>
              </div>
            </div>
            <div class="column-cards" id="{column.key.toLowerCase()}-cards">
              {#each Array(column.skeletonCount) as _}
                <div class="assessment-card">
                  <div class="skeleton-element skeleton-label"></div>
                  <div class="skeleton-element skeleton-title"></div>
                  <div class="skeleton-element skeleton-title-line2"></div>
                  <div class="skeleton-element skeleton-meta"></div>
                  {#if column.key === "MARKS_RELEASED"}
                    <div class="skeleton-footer">
                      <div class="skeleton-element" style="height: 16px; width: 100%;"></div>
                    </div>
                  {/if}
                </div>
              {/each}
            </div>
          </div>
        </div>
      {/each}
    </div>
  </div>
 </div>
 <script lang="ts">
  const columns = [
    {
      key: "UPCOMING",
      title: "Upcoming",
      className: "column-upcoming",
      icon: "📅",
      skeletonCount: 3,
    },
    {
      key: "DUE_SOON",
      title: "Due Soon",
      className: "column-due-soon",
      icon: "⏰",
      skeletonCount: 2,
    },
    {
      key: "OVERDUE",
      title: "Overdue",
      className: "column-overdue",
      icon: "🚨",
      skeletonCount: 1,
    },
    {
      key: "MARKS_RELEASED",
      title: "Marked",
      className: "column-marked",
      icon: "✅",
      skeletonCount: 4,
    },
  ];
 </script>
@@ -1,131 +0,0 @@
 interface Subject {
  code: string;
  programme: number;
  metaclass: number;
  title: string;
 }
 interface PrefItem {
  name: string;
  value: string;
 }
 let cache: { time: number; data: any } | null = null;
 const CACHE_MS = 10 * 60 * 1000;
 const student = 69;
 async function fetchJSON(url: string, body: any) {
  const res = await fetch(`${location.origin}${url}`, {
    method: "POST",
    credentials: "include",
    headers: { "Content-Type": "application/json; charset=utf-8" },
    body: JSON.stringify(body),
  });
  return res.json();
 }
 async function loadSubjects() {
  const res = await fetchJSON("/seqta/student/load/subjects?", {});
  return res.payload
    .filter((s: any) => s.active === 1)
    .flatMap((s: any) => s.subjects);
 }
 async function loadPrefs(student: number) {
  const res = await fetchJSON("/seqta/student/load/prefs?", {
    request: "userPrefs",
    asArray: true,
    user: student,
  });
  const colors: Record<string, string> = {};
  res.payload.forEach((p: PrefItem) => {
    if (p.name.startsWith("timetable.subject.colour.")) {
      const code = p.name.replace("timetable.subject.colour.", "");
      colors[code] = p.value;
    }
  });
  return colors;
 }
 async function loadUpcoming(student: number) {
  const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", {
    student,
  });
  return res.payload;
 }
 async function loadPast(student: number, subjects: Subject[]) {
  const map: Record<number, any> = {};
  await Promise.all(
    subjects.map(async (s) => {
      const res = await fetchJSON("/seqta/student/assessment/list/past?", {
        programme: s.programme,
        metaclass: s.metaclass,
        student,
      });
      if (res.payload.tasks) {
        res.payload.tasks.forEach((t: any) => {
          map[t.id] = t;
        });
      }
    }),
  );
  return map;
 }
 async function loadSubmissions(student: number, assessments: any[]) {
  const submissionMap: Record<number, boolean> = {};
  await Promise.all(
    assessments.map(async (assessment) => {
      try {
        const res = await fetchJSON(
          "/seqta/student/assessment/submissions/get",
          {
            assessment: assessment.id,
            metaclass: assessment.metaclassID,
            student,
          },
        );
        submissionMap[assessment.id] = res.payload && res.payload.length > 0;
      } catch (error) {
        console.warn(
          `Failed to fetch submission for assessment ${assessment.id}:`,
          error,
        );
        submissionMap[assessment.id] = false;
      }
    }),
  );
  return submissionMap;
 }
 export async function getAssessmentsData() {
  if (cache && Date.now() - cache.time < CACHE_MS) return cache.data;
  const [subjects, colors, upcoming] = await Promise.all([
    loadSubjects(),
    loadPrefs(student),
    loadUpcoming(student),
  ]);
  const pastMap = await loadPast(student, subjects);
  const map: Record<number, any> = {};
  upcoming.forEach((a: any) => {
    map[a.id] = { ...a };
  });
  Object.values(pastMap).forEach((t: any) => {
    if (map[t.id]) Object.assign(map[t.id], t);
    else map[t.id] = t;
  });
  const allAssessments = Object.values(map);
  const submissions = await loadSubmissions(student, allAssessments);
  allAssessments.forEach((assessment: any) => {
    assessment.submitted = submissions[assessment.id] || false;
  });
  const data = { assessments: allAssessments, subjects, colors };
  cache = { time: Date.now(), data };
  return data;
 }
@@ -1,86 +0,0 @@
 import type { Plugin } from "../../core/types";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import { getAssessmentsData } from "./api";
 import { renderSkeletonLoader, renderErrorState } from "./ui";
 import styles from "./styles.css?inline";
 import { delay } from "@/seqta/utils/delay";
 const assessmentsOverviewPlugin: Plugin<{}> = {
  id: "assessments-overview",
  name: "Assessments Overview",
  description:
    "Adds an overview option to the assessments page that organizes assessments by status",
  version: "1.0.0",
  settings: {},
  disableToggle: false,
  styles,
  run: async () => {
    const menu = (await waitForElm(
      '[data-key="assessments"] > .sub > ul',
      true,
      100,
      60,
    )) as HTMLElement;
    const gridItem = document.createElement("li");
    gridItem.className = "item";
    const label = document.createElement("label");
    label.textContent = "Overview";
    gridItem.appendChild(label);
    menu.insertBefore(gridItem, menu.children[1] || null);
    if (window.location.hash.includes("/assessments/overview")) {
      loadGridView();
    }
    const clickHandler = (e: Event) => {
      e.preventDefault();
      loadGridView();
    };
    gridItem.addEventListener("click", clickHandler);
    async function loadGridView() {
      await delay(1);
      window.history.pushState({}, "", "/#?page=/assessments/overview");
      document.title = "Overview ― SEQTA Learn";
      const main = document.getElementById("main");
      if (!main) return;
      document
        .querySelectorAll('[data-key="assessments"] .item')
        .forEach((item) => {
          item.classList.remove("active");
        });
      gridItem.classList.add("active");
      document
        .querySelector('[data-key="assessments"]')
        ?.classList.add("active");
      main.innerHTML = '<div id="grid-view-container"></div>';
      const container = document.getElementById(
        "grid-view-container",
      ) as HTMLElement;
      renderSkeletonLoader(container);
      try {
        const data = await getAssessmentsData();
        const { renderGrid } = await import("./ui");
        renderGrid(container, data);
      } catch (err) {
        console.error("Failed to load assessments:", err);
        renderErrorState(
          container,
          err instanceof Error ? err.message : "Unknown error",
        );
      }
    }
    return () => {
      gridItem.removeEventListener("click", clickHandler);
      gridItem.remove();
    };
  },
 };
 export default assessmentsOverviewPlugin;
@@ -1,798 +0,0 @@
 #grid-view-container {
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
 }
 .grid-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  flex-shrink: 0;
 }
 .grid-view-title {
  font-size: 1.875rem !important;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
 }
 /* Dark mode support */
 .dark .grid-view-title {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 .grid-view-filters {
  display: flex;
  gap: 0.75rem;
  align-items: center;
 }
 .filter-select {
  background: #ffffff !important;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  color: #1a1a1a;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-width: 180px;
 }
 .filter-select:focus {
  outline: none;
  border-color: #d41e3a;
  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.1);
 }
 .filter-select:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 /* Dark mode dropdowns */
 .dark .filter-select {
  background: var(--background-primary) !important;
  border-color: var(--background-secondary);
  color: var(--text-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 .dark .filter-select:focus {
  border-color: #d41e3a;
  box-shadow: 0 0 0 3px rgba(212, 30, 58, 0.2);
 }
 .dark .filter-select:hover {
  border-color: var(--background-secondary);
  background: var(--background-secondary);
 }
 .dark .filter-select option {
  background: var(--background-primary);
  color: var(--text-primary);
 }
 #main-grid-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
 }
 /* Kanban Board Layout */
 .kanban-board {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem;
  flex: 0 1 auto;
 }
 .kanban-column-parent {
  flex: 0 0 320px;
 }
 .kanban-column {
  max-height: 100%;
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #e2e8f0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 /* Dark mode columns */
 .dark .kanban-column {
  background: var(--background-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 }
 .column-header {
  padding: 1rem 1.25rem;
  border-bottom: 2px solid #e2e8f0;
  background: #ffffff;
  border-radius: 12px 12px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
 }
 /* Dark mode column headers */
 .dark .column-header {
  background: var(--background-secondary);
  border-bottom-color: rgba(255, 255, 255, 0.1);
 }
 .column-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .dark .column-title {
  color: var(--text-primary);
 }
 .column-count {
  background: #e2e8f0;
  color: #64748b;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
 }
 .dark .column-count {
  background: var(--background-secondary);
  color: var(--text-primary);
 }
 .column-cards {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
 }
 /* Assessment Cards */
 .assessment-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  border-left: 4px solid var(--subject-color, #d41e3a);
  border: 1px solid #e2e8f0;
 }
 .assessment-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  border-color: #cbd5e1;
 }
 /* Dark mode cards */
 .dark .assessment-card {
  background: var(--background-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 .dark .assessment-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
 }
 .card-labels {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
 }
 .card-label {
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.025em;
 }
 .label-subject {
  background: var(--subject-color, #d41e3a);
 }
 .card-menu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 20;
 }
 .menu-button {
  background: transparent !important;
  border: none !important;
  padding: 0.25rem !important;
  cursor: pointer;
  border-radius: 4px;
  color: #64748b;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
 }
 .menu-button:hover {
  background: #f1f5f9 !important;
  color: #1a1a1a;
 }
 .menu-button svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  display: block !important;
 }
 .dark .menu-button {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .dark .menu-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1;
 }
 .menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  z-index: 30;
  margin-top: 4px;
 }
 .dark .menu-dropdown {
  background: var(--background-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 .menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  color: #1a1a1a;
  transition: background-color 0.2s ease;
  white-space: nowrap;
 }
 .menu-item:hover {
  background: #f8fafc;
 }
 .dark .menu-item {
  color: var(--text-primary);
 }
 .dark .menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
 }
 .menu-item.mark-completed {
  color: #059669;
  font-weight: 500;
 }
 .dark .menu-item.mark-completed {
  color: #10b981;
 }
 .menu-item.mark-not-completed {
  color: #dc2626;
  font-weight: 500;
 }
 .dark .menu-item.mark-not-completed {
  color: #ef4444;
 }
 .assessment-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
  padding-right: 2rem; /* Make room for menu button */
 }
 .dark .assessment-title {
  color: var(--text-primary);
 }
 .assessment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #64748b;
 }
 .dark .assessment-meta {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .due-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
 }
 .due-date.overdue {
  color: #dc2626;
 }
 .due-date.due-soon {
  color: #d97706;
 }
 .due-date.upcoming {
  color: #059669;
 }
 .card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
 }
 .dark .card-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
 }
 .grade-display {
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
 }
 .grade-good {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
 }
 .grade-average {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
 }
 .grade-bad {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 .grade-empty {
  color: #64748b;
  font-style: italic;
  font-weight: 500;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
 }
 .dark .grade-empty {
  color: var(--text-primary);
  opacity: 0.7;
  background: var(--background-secondary);
  border-color: var(--background-secondary);
 }
 /* Column-specific styling */
 .column-upcoming .column-header {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
 }
 .column-due-soon .column-header {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
 }
 .column-overdue .column-header {
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
 }
 .column-submitted .column-header {
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
 }
 .column-marked .column-header {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
 }
 /* Dark mode column headers */
 .dark .column-upcoming .column-header {
  background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
 }
 .dark .column-due-soon .column-header {
  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
 }
 .dark .column-overdue .column-header {
  background: linear-gradient(135deg, var(--background-secondary) 0%, #991b1b 100%);
 }
 .dark .column-submitted .column-header {
  background: linear-gradient(135deg, var(--background-secondary) 0%, #92400e 100%);
 }
 .dark .column-marked .column-header {
  background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
 }
 /* Subject filter view */
 .subject-section {
  margin-bottom: 2rem;
 }
 .subject-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  border-left: 4px solid var(--subject-color, #d41e3a);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 .dark .subject-header {
  background: var(--background-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 .subject-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
 }
 .subject-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
 }
 .dark .subject-title {
  color: var(--text-primary);
 }
 .subject-code {
  font-size: 0.875rem;
  color: #64748b;
 }
 .dark .subject-code {
  color: var(--text-primary);
  opacity: 0.7;
 }
 /* Loading and error states */
 .loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .dark .loading-container {
  background: var(--background-primary);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 .loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #d41e3a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 }
 .dark .loading-spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: #d41e3a;
 }
 .loading-text {
  margin-top: 1rem;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
 }
 .dark .loading-text {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #fecaca;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .dark .error-container {
  background: var(--background-primary);
  border-color: #991b1b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 .error-text {
  color: #ef4444;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
 }
 .empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
 }
 .dark .empty-state {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .empty-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
  min-height: 200px;
 }
 .dark .empty-column {
  color: var(--text-primary);
  opacity: 0.7;
 }
 .empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
 }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
 }
 .skeleton-element {
  background: linear-gradient(
    90deg,
    #f1f5f9 0%,
    #e2e8f0 50%,
    #f1f5f9 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: 4px;
 }
 .dark .skeleton-element {
  background: linear-gradient(
    90deg,
    var(--background-primary) 0%,
    var(--background-secondary) 50%,
    var(--background-primary) 100%
  );
  background-size: 1000px 100%;
 }
 .skeleton-label {
  height: 20px;
  width: 60px;
  margin-bottom: 0.75rem;
  border-radius: 6px;
 }
 .skeleton-title {
  height: 16px;
  width: 80%;
  margin-bottom: 0.5rem;
 }
 .skeleton-title-line2 {
  height: 16px;
  width: 60%;
  margin-bottom: 0.75rem;
 }
 .skeleton-meta {
  height: 12px;
  width: 40%;
  margin-top: 0.75rem;
 }
 .skeleton-footer {
  height: 8px;
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
 }
 .dark .skeleton-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
 }
 /* Responsive design */
@media (max-width: 768px) {
  #grid-view-container {
    padding: 1rem;
  }
  .grid-view-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  .grid-view-filters {
    justify-content: center;
    flex-wrap: wrap;
  }
  .kanban-board {
    flex-direction: column;
    gap: 1rem;
  }
  .kanban-column {
    flex: none;
    max-height: none;
  }
  .filter-select {
    min-width: 140px;
  }
 }
@media (max-width: 480px) {
  .grid-view-title {
    font-size: 1.5rem !important;
  }
  .filter-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    min-width: 120px;
  }
  .assessment-card {
    padding: 0.75rem;
  }
  .card-footer {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
 }
 /* Scrollbar styling for webkit browsers */
 .column-cards::-webkit-scrollbar {
  width: 6px;
 }
 .column-cards::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
 }
 .column-cards::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
 }
 .column-cards::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
 }
 /* Dark mode scrollbars */
 .dark .column-cards::-webkit-scrollbar-track {
  background: var(--background-secondary);
 }
 .dark .column-cards::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
 }
 .dark .column-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
 }
@@ -1,45 +0,0 @@
 import renderSvelte from "@/interface/main";
 import AssessmentsOverview from "./AssessmentsOverview.svelte";
 import SkeletonLoader from "./SkeletonLoader.svelte";
 import ErrorState from "./ErrorState.svelte";
 import { unmount } from "svelte";
 let currentApp: any = null;
 export function renderGrid(container: HTMLElement, data: any) {
  if (currentApp) {
    unmount(currentApp);
  }
  container.innerHTML = "";
  container.className = "";
  currentApp = renderSvelte(AssessmentsOverview, container, { data });
 }
 export function renderSkeletonLoader(container: HTMLElement) {
  if (currentApp) {
    unmount(currentApp);
  }
  container.innerHTML = "";
  container.className = "";
  currentApp = renderSvelte(SkeletonLoader, container);
 }
 export function renderLoadingState(container: HTMLElement) {
  renderSkeletonLoader(container);
 }
 export function renderErrorState(container: HTMLElement, error: string) {
  if (currentApp) {
    unmount(currentApp);
  }
  container.innerHTML = "";
  container.className = "";
  currentApp = renderSvelte(ErrorState, container, { error });
 }
@@ -1,101 +0,0 @@
 export function formatDate(dateStr: string, submitted?: boolean): string {
  const d = new Date(dateStr);
  const now = new Date();
  const diffTime = d.getTime() - now.getTime();
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  if (diffDays < 0 && !submitted) {
    const overdueDays = Math.abs(diffDays);
    if (overdueDays === 1) return "1 day overdue";
    return `${overdueDays} days overdue`;
  }
  if (diffDays === 0) return "Today";
  if (diffDays === 1) return "Tomorrow";
  if (diffDays <= 7) {
    const weekdayName = d.toLocaleDateString(undefined, { weekday: "long" });
    return diffDays < 0 ? `Last ${weekdayName}` : weekdayName;
  }
  return d.toLocaleDateString(undefined, {
    weekday: "short",
    month: "short",
    day: "numeric",
    year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
  });
 }
 export function determineStatus(item: any): string {
  if (
    item.status === "MARKS_RELEASED" ||
    item.grade ||
    (item.percentage !== undefined && item.percentage !== null) ||
    (item.achieved !== undefined && item.achieved !== null)
  ) {
    return "MARKS_RELEASED";
  }
  const completedKey = "betterseqta-completed-assessments";
  const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
  if (completed.includes(item.id)) {
    return "MARKS_RELEASED";
  }
  if (item.submitted) {
    return "SUBMITTED";
  }
  const now = new Date();
  const due = new Date(item.due);
  const diffTime = due.getTime() - now.getTime();
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  if (diffDays < 0) {
    return "OVERDUE";
  }
  if (diffDays <= 7) {
    return "DUE_SOON";
  }
  return "UPCOMING";
 }
 export function getGradeValue(assessment: any): number | null {
  if (
    assessment.results?.percentage !== undefined &&
    assessment.results.percentage !== null
  ) {
    return assessment.results.percentage;
  }
  if (assessment.percentage !== undefined && assessment.percentage !== null) {
    return assessment.percentage;
  }
  if (
    assessment.achieved !== undefined &&
    assessment.outOf !== undefined &&
    assessment.achieved !== null &&
    assessment.outOf !== null &&
    assessment.outOf > 0
  ) {
    return (assessment.achieved / assessment.outOf) * 100;
  }
  if (
    assessment.results?.achieved !== undefined &&
    assessment.results?.outOf !== undefined &&
    assessment.results.achieved !== null &&
    assessment.results.outOf !== null &&
    assessment.results.outOf > 0
  ) {
    return (assessment.results.achieved / assessment.results.outOf) * 100;
  }
  return null;
 }
@@ -1,65 +0,0 @@
 <script lang="ts">
  import Editor from './Editor/Editor.svelte';
  import EditorStyles from './Editor/EditorStyles.css?raw';
  import EditorOverrideStyles from './Editor/EditorOverrideStyles.css?raw';
  import TiptapStyles from './Editor/TiptapStyles.css?raw';
  import { onMount } from 'svelte';
  import { settingsState } from '@/seqta/utils/listeners/SettingsState';
  interface Props {
    onchange: (value: string) => void;
    initialContent?: string;
    scale?: number; // Scale factor for the editor (1.0 = normal, 1.2 = 120%, etc.)
  }
  let { onchange, initialContent = '', scale = 1.3 }: Props = $props();
  let content = $state('');
  let betterEditor = $state<HTMLElement | null>(null);
  // Watch for content changes and call the callback
  $effect(() => {
    if (onchange) {
      onchange(content);
    }
  });
  onMount(async () => {
    if (betterEditor) {
      const styles = EditorStyles + EditorOverrideStyles + TiptapStyles;
      const scalingCSS = `
        .better-editor {
          --scale-factor: ${scale};
        }
        .better-editor .editor-prose {
          transform-origin: top left;
          zoom: ${scale};
          -moz-transform: scale(${scale});
          -moz-transform-origin: 0 0;
        }
        /* For Firefox which doesn't support zoom */
        @-moz-document url-prefix() {
          .better-editor .editor-prose {
            transform: scale(${scale});
            width: ${100 / scale}%;
          }
        }
      `;
      const styleElement = document.createElement('style');
      styleElement.textContent = styles + scalingCSS;
      betterEditor.appendChild(styleElement);
    }
  });
 </script>
 <div
  class="h-full better-editor {settingsState.DarkMode ? 'dark' : ''}" 
  bind:this={betterEditor}
  style="font-size: {scale * 16}px; --editor-scale: {scale};"
 >
  <Editor bind:content {initialContent} />
 </div>
@@ -1,154 +0,0 @@
 <script lang="ts">
  import Placeholder from '@tiptap/extension-placeholder';
  import Commands from './Plugins/Commands/command';
  import { Dropcursor } from '@tiptap/extension-dropcursor';
  import Image from '@tiptap/extension-image'
  import BubbleMenu from '@tiptap/extension-bubble-menu';
  import Typography from '@tiptap/extension-typography';
  import TaskList from '@tiptap/extension-task-list';
  import TaskItem from '@tiptap/extension-task-item';
  import StarterKit from '@tiptap/starter-kit';
  import Link from '@tiptap/extension-link';
  import { Editor } from '@tiptap/core';
  import CommandList from './Plugins/Commands/CommandList.svelte';
  import suggestion from './Plugins/Commands/suggestion';
  import { slashVisible } from './Plugins/Commands/stores';
  import { get } from 'svelte/store';
  import BubbleMenuComponent from './Plugins/BubbleMenu.svelte';
  import { onMount, onDestroy } from 'svelte';
  import EditorStyles from './EditorOverrideStyles.css?raw';
  // Make htmlContent bindable from parent components
  let { content = $bindable(''), initialContent = '' } = $props<{ content: string; initialContent?: string }>();
  let commandListInstance = $state<any>(null);
  let element = $state<HTMLElement | null>(null);
  let editor = $state<Editor | null>(null);
  onMount(() => {
    editor = new Editor({
      element: element!,
      content: initialContent || '',
      editorProps: {
        attributes: {
          class: 'focus:outline-none px-3 md:px-0',
        },
        handleKeyDown: (_, event) => {
          // Handle keyboard events when slash menu is visible
          if (get(slashVisible) && commandListInstance) {
            if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
              const handled = commandListInstance.handleKeydown(event, editor);
              if (handled) {
                return true; // Prevent TipTap from handling this event
              }
            }
          }
          return false; // Let TipTap handle other events
        },
      },
      extensions: [
        StarterKit,
        Placeholder.configure({
          placeholder: ({ node }: { node: any }) => {
            if (node.type.name === 'heading') {
              return 'Heading';
            } else if (node.type.name === 'paragraph') {
              return "Type '/' for commands";
            }
            return 'Type something...';
          },
        }),
        TaskList,
        TaskItem,
        Link,
        Typography,
        Commands.configure({
          suggestion,
        }),
        BubbleMenu.configure({
          element: document.querySelector('.menu') as HTMLElement,
        }),
        Dropcursor.configure({ width: 5, color: '#ddeeff' }),
        Image.configure({
          allowBase64: true,
        }),
      ],
      onTransaction: () => {
        // force re-render so `editor.isActive` works as expected
        editor = editor;
      },
      onUpdate: ({ editor }: { editor: Editor }) => {
        // Update the htmlContent with the editor's HTML plus CSS
        const editorHTML = editor.getHTML();
        content = `<div class="editor-prose">${editorHTML}<${''}style>${EditorStyles}</${''}style></div>`;
      },
    });
  });
  onMount(() => {
    if (initialContent) {
      content = initialContent;
    }
  });
  onDestroy(() => {
    if (editor) {
      editor.destroy();
    }
  });
  function handleKeydownCapture(event: KeyboardEvent) {
    if (commandListInstance && editor && get(slashVisible)) {
      if (event.key === 'Escape') {
        if (commandListInstance.handleKeydown(event, editor)) {
          event.preventDefault();
          event.stopPropagation();
        }
      }
    }
  }
  function handleClick(event: MouseEvent) {
    if (!editor) return;
    // Check if the click happened in empty space below content
    const editorElement = element;
    if (!editorElement) return;
    const clickY = event.clientY;
    // Get the last node in the editor
    const lastNode = editorElement.lastElementChild;
    if (lastNode) {
      const lastNodeRect = lastNode.getBoundingClientRect();
      // If click is below the last content node, move cursor to end
      if (clickY > lastNodeRect.bottom) {
        const docSize = editor.state.doc.content.size;
        editor.commands.setTextSelection(docSize);
        editor.commands.focus();
        event.preventDefault();
      }
    }
  }
 </script>
 <div class="relative h-full">
  <div
    class="w-full min-h-full editor-prose"
    bind:this={element}
    onkeydown={handleKeydownCapture}
    onclick={handleClick}
    role="textbox"
    tabindex="-1">
  </div>
  <CommandList bind:this={commandListInstance} />
 </div>
 <BubbleMenuComponent bind:editor />
@@ -1,398 +0,0 @@
 .editor-prose {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    sans-serif !important;
  line-height: 1.6 !important;
  color: #374151 !important;
  font-size: 14px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  .dark & * {
    color: #d1d5db !important;
  }
  * {
    color: #374151 !important;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol {
    width: 100% !important;
    min-width: 2px !important;
    box-sizing: border-box !important;
  }
  h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0.75rem 0 0.5rem 0 !important;
    line-height: 1.3 !important;
    color: #111827 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    .dark & {
      color: #f9fafb !important;
    }
  }
  h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0.6rem 0 0.4rem 0 !important;
    line-height: 1.4 !important;
    color: #1f2937 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    .dark & {
      color: #e5e7eb !important;
    }
  }
  h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0.3rem 0 !important;
    line-height: 1.4 !important;
    color: #374151 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    .dark & {
      color: #d1d5db !important;
    }
  }
  p {
    margin: 0.4rem 0 !important;
    line-height: 1.6 !important;
    font-size: 0.875rem !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: inherit !important;
    text-shadow: none !important;
  }
  ul {
    margin: 0.5rem 0 !important;
    padding-left: 1.25rem !important;
    list-style-type: disc !important;
    border: none !important;
    background: none !important;
    ul {
      list-style-type: circle !important;
      ul {
        list-style-type: square !important;
      }
    }
    &[data-type='taskList'] {
      list-style: none !important;
      padding: 0 !important;
      margin: 0.5rem 0 !important;
      border: none !important;
      background: none !important;
      p {
        margin: 0 !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        color: inherit !important;
        text-shadow: none !important;
      }
      li {
        display: flex !important;
        align-items: flex-start !important;
        margin: 0.25rem 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        color: inherit !important;
        text-shadow: none !important;
        list-style: none !important;
        > label {
          flex: 0 0 auto !important;
          margin-right: 0.5rem !important;
          margin-top: 0.125rem !important;
          user-select: none !important;
          padding: 0 !important;
          border: none !important;
          background: none !important;
          input[type='checkbox'] {
            width: 1rem !important;
            height: 1rem !important;
            border-radius: 0.25rem !important;
            border: 2px solid #d1d5db !important;
            background-color: #fff !important;
            cursor: pointer !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            position: relative !important;
            margin: 0 !important;
            padding: 0 !important;
            box-shadow: none !important;
            &:hover {
              border-color: #3b82f6 !important;
            }
            &:checked {
              background-color: #3b82f6 !important;
              border-color: #3b82f6 !important;
              &::after {
                content: '' !important;
                position: absolute !important;
                left: 0.125rem !important;
                top: 0.0625rem !important;
                width: 0.375rem !important;
                height: 0.625rem !important;
                border: 2px solid white !important;
                border-top: 0 !important;
                border-left: 0 !important;
                transform: rotate(45deg) !important;
              }
            }
            .dark & {
              border-color: #4b5563 !important;
              background-color: #374151 !important;
              &:hover {
                border-color: #60a5fa !important;
              }
              &:checked {
                background-color: #60a5fa !important;
                border-color: #60a5fa !important;
              }
            }
          }
        }
        > div {
          flex: 1 1 auto !important;
          margin: 0 !important;
          padding: 0 !important;
          border: none !important;
          background: none !important;
          color: inherit !important;
        }
      }
    }
    li {
      margin: 0.25rem 0 !important;
      line-height: 1.5 !important;
      font-size: 0.875rem !important;
      display: list-item !important;
      list-style-type: disc !important;
      padding: 0 !important;
      border: none !important;
      background: none !important;
      color: inherit !important;
      text-shadow: none !important;
    }
  }
  ol {
    margin: 0.5rem 0 !important;
    padding-left: 1.25rem !important;
    list-style-type: decimal !important;
    border: none !important;
    background: none !important;
    li {
      margin: 0.25rem 0 !important;
      line-height: 1.5 !important;
      font-size: 0.875rem !important;
      display: list-item !important;
      list-style-type: decimal !important;
      padding: 0 !important;
      border: none !important;
      background: none !important;
      color: inherit !important;
      text-shadow: none !important;
    }
  }
  strong {
    font-weight: 600 !important;
    color: #111827 !important;
    text-shadow: none !important;
    .dark & {
      color: #f9fafb !important;
    }
  }
  em {
    font-style: italic !important;
    text-shadow: none !important;
  }
  a {
    color: #3b82f6 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(59, 130, 246, 0.3) !important;
    text-shadow: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    &:hover {
      text-decoration-color: #3b82f6 !important;
      background: none !important;
    }
    .dark & {
      color: #60a5fa !important;
      &:hover {
        text-decoration-color: #60a5fa !important;
      }
    }
  }
  blockquote {
    padding: 0.2rem 1rem !important;
    margin: 1rem 0 !important;
    font-style: italic !important;
    color: #6b7280 !important;
    text-align: left !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background-color: #d1d5db;
      z-index: 1;
      border-radius: 0.5rem;
    }
    .dark &::before {
      background-color: #4b5563;
    }
    .dark & {
      color: #9ca3af !important;
    }
  }
  pre {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    margin: 1rem 0 !important;
    overflow-x: auto !important;
    font-family:
      ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    white-space: pre !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    .dark & {
      background-color: rgba(35, 36, 41, 0.5) !important;
      border: 1px solid rgba(35, 36, 41, 0.5) !important;
      color: #e5e7eb !important;
    }
    code {
      background-color: transparent !important;
      color: inherit !important;
      padding: 0 !important;
      border-radius: 0 !important;
      font-size: inherit !important;
      font-family: inherit !important;
      border: none !important;
      margin: 0 !important;
      .dark & {
        background-color: transparent !important;
        color: inherit !important;
      }
    }
  }
  hr {
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    margin: 1rem 0 !important;
    width: 100% !important;
    background: none !important;
    height: 0 !important;
    padding: 0 !important;
    .dark & {
      border-top-color: #3f4854 !important;
    }
  }
  code {
    background-color: #f3f4f6 !important;
    color: #d97706 !important;
    padding: 0.125rem 0.25rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.8125rem !important;
    font-family:
      ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace !important;
    border: none !important;
    margin: 0 !important;
    text-shadow: none !important;
    .dark & {
      background-color: #374151 !important;
      color: #fbbf24 !important;
    }
  }
 }
@@ -1,256 +0,0 @@
 /* Editor-specific styles (animations, transitions, editor-only features) - !these are not applied to sent messages! */
 /* Nested content styling with animated borders */
 .editor-prose li > *:not(:first-child) {
  position: relative;
  margin-left: -0.5rem;
 }
 .editor-prose li:not(:has(> label)) > *:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background-color: #e5e7eb7e;
  transform-origin: top;
  animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .dark .editor-prose li > *:not(:first-child)::before {
  background-color: #4b55637b;
 }
 /* Special handling for nested lists to extend the line properly */
 .editor-prose li > ul,
 .editor-prose li > ol {
  margin-left: -0.5rem;
 }
 .editor-prose li > ul::before,
 .editor-prose li > ol::before {
  bottom: -0.25rem; /* Extend slightly below for better visual connection */
 }
@keyframes expandDown {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
 }
 /* Placeholders for editor-only */
 .editor-prose p::before,
 .editor-prose h1::before,
 .editor-prose h2::before,
 .editor-prose h3::before,
 .editor-prose h4::before,
 .editor-prose h5::before,
 .editor-prose h6::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  float: left;
  height: 0;
 }
 .dark .editor-prose p::before,
 .dark .editor-prose h1::before,
 .dark .editor-prose h2::before,
 .dark .editor-prose h3::before,
 .dark .editor-prose h4::before,
 .dark .editor-prose h5::before,
 .dark .editor-prose h6::before {
  color: #6b7280;
 }
 .bnEditor {
  outline: none;
  padding-inline: 50px;
  border-radius: 8px;
  /* Define a set of colors to be used throughout the app for consistency
  see https://atlassian.design/foundations/color for more info */
  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
 }
 /*
 bnRoot should be applied to all top-level elements
 This includes the Prosemirror editor, but also <div> element such as 
 Tippy popups that are appended to document.body directly
 */
 .bnRoot {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 .bnRoot *,
 .bnRoot *::before,
 .bnRoot *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
 }
 /* reset styles, they will be set on blockContent */
 .defaultStyles p,
 .defaultStyles h1,
 .defaultStyles h2,
 .defaultStyles h3,
 .defaultStyles li {
  all: unset !important;
  margin: 0;
  padding: 0;
  font-size: inherit;
  /* min width to make sure cursor is always visible */
  min-width: 2px !important;
 }
 .defaultStyles {
  font-size: 16px;
  font-weight: normal;
  font-family:
    'Inter',
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Open Sans',
    'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 .dragPreview {
  position: absolute;
  top: -1000px;
 }
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
 }
 /* Animate headers only */
 .editor-prose h1,
 .editor-prose h2,
 .editor-prose h3,
 .editor-prose h4,
 .editor-prose h5,
 .editor-prose h6 {
  animation: fadeInScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center;
 }
 /* Smooth transitions for all interactive elements */
 .editor-prose {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 /* Bold and italic transitions */
 .editor-prose strong,
 .editor-prose em {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 /* Selected node styling (Notion-like) */
 .ProseMirror-selectednode {
  box-shadow: 0 0 0 4px #3b82f6;
  border-radius: 4px;
  background-color: rgba(59, 130, 246, 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
 }
 .dark .ProseMirror-selectednode {
  box-shadow: 0 0 0 2px #3a3e44;
  background-color: rgba(96, 165, 250, 0.08);
 }
 /* Ensure selected nodes have proper spacing */
 .ProseMirror-selectednode {
  margin: 2px;
 }
 /* Drag and drop containment */
 .editor-prose {
  position: relative;
  overflow: hidden;
  contain: layout style;
 }
 /* Image drag styling */
 .editor-prose img.tiptap-image {
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
  max-width: 100%;
  height: auto;
 }
 .editor-prose img.tiptap-image:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
 }
 .editor-prose img.tiptap-image:active {
  cursor: grabbing;
  transform: scale(0.98);
 }
 /* Dropcursor styling */
 .tiptap-dropcursor {
  pointer-events: none;
  border-radius: 2px;
  animation: pulse 1.5s ease-in-out infinite;
 }
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
 }
 /* Prevent drag operations outside editor */
 .editor-prose * {
  -webkit-user-drag: auto;
  -moz-user-drag: auto;
  user-drag: auto;
 }
 /* Ensure only images within editor are draggable */
 .editor-prose img {
  -webkit-user-drag: element;
  -moz-user-drag: element;
  user-drag: element;
 }
 /* Prevent text selection during drag */
 .editor-prose.ProseMirror-dragover * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
 }
@@ -1,196 +0,0 @@
 <script lang="ts">
  import { Icon, Bold, Italic, Strikethrough, CodeBracket, ChevronDown } from 'svelte-hero-icons';
  import { M } from 'motion-start';
  import type { Editor } from '@tiptap/core';
  let { editor = $bindable() } = $props<{ editor: Editor | null }>();
  // Turn into dropdown state
  let showTurnInto = $state(false);
  // Turn into options
  const turnIntoOptions = [
    { id: 'paragraph', label: 'Text', icon: 'T', iconClass: 'font-mono' },
    { id: 'heading1', label: 'Heading 1', icon: 'H1', iconClass: 'font-bold' },
    { id: 'heading2', label: 'Heading 2', icon: 'H2', iconClass: 'font-bold' },
    { id: 'heading3', label: 'Heading 3', icon: 'H3', iconClass: 'font-bold' },
    { id: 'separator' },
    { id: 'bulletList', label: 'Bulleted list', icon: '•' },
    { id: 'orderedList', label: 'Numbered list', icon: '1.' },
    { id: 'taskList', label: 'To-do list', icon: '☐' },
    { id: 'separator' },
    { id: 'codeBlock', label: 'Code', icon: '</>' },
    { id: 'blockquote', label: 'Quote', icon: '"' }
  ];
  function getCurrentBlockType(): string {
    if (!editor) return 'Text';
    if (editor.isActive('heading', { level: 1 })) return 'Heading 1';
    if (editor.isActive('heading', { level: 2 })) return 'Heading 2';
    if (editor.isActive('heading', { level: 3 })) return 'Heading 3';
    if (editor.isActive('bulletList')) return 'Bulleted list';
    if (editor.isActive('orderedList')) return 'Numbered list';
    if (editor.isActive('taskList')) return 'To-do list';
    if (editor.isActive('codeBlock')) return 'Code';
    if (editor.isActive('blockquote')) return 'Quote';
    return 'Text';
  }
  function turnInto(type: string) {
    if (!editor) return;
    switch (type) {
      case 'paragraph':
        editor.chain().focus().setParagraph().run();
        break;
      case 'heading1':
        editor.chain().focus().toggleHeading({ level: 1 }).run();
        break;
      case 'heading2':
        editor.chain().focus().toggleHeading({ level: 2 }).run();
        break;
      case 'heading3':
        editor.chain().focus().toggleHeading({ level: 3 }).run();
        break;
      case 'bulletList':
        editor.chain().focus().toggleBulletList().run();
        break;
      case 'orderedList':
        editor.chain().focus().toggleOrderedList().run();
        break;
      case 'taskList':
        editor.chain().focus().toggleTaskList().run();
        break;
      case 'codeBlock':
        editor.chain().focus().toggleCodeBlock().run();
        break;
      case 'blockquote':
        editor.chain().focus().toggleBlockquote().run();
        break;
    }
    showTurnInto = false;
  }
  function handleKeydown(event: KeyboardEvent) {
    // Close modals/dropdowns on Escape
    if (event.key === 'Escape') {
      if (showTurnInto) {
        showTurnInto = false;
        event.preventDefault();
      }
    }
  }
  function handleClick(event: MouseEvent) {
    // Close turn into dropdown if clicking outside
    if (showTurnInto && !(event.target as Element).closest('.turn-into-dropdown')) {
      showTurnInto = false;
    }
  }
 </script>
 <svelte:window onkeydown={handleKeydown} onclick={handleClick} />
 <!-- Main Bubble Menu -->
 <M.div 
  class="flex gap-1 items-center p-1 rounded-lg border shadow-xl backdrop-blur-lg menu dark:bg-zinc-900/90 bg-white/90 dark:border-zinc-700/30 border-zinc-200/50"
  layout
  transition={{ duration: 0.3, ease: "easeInOut" }}
 >
  {#if editor}
    <M.div 
      class="flex gap-1 items-center"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.2 }}
    >
      <!-- Turn Into Dropdown -->
      <div class="relative turn-into-dropdown">
        <M.button
          onclick={() => showTurnInto = !showTurnInto}
          class="flex gap-1 items-center px-3 py-2 text-sm rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800"
          title="Turn into"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          {getCurrentBlockType()}
          <M.div
            animate={{ rotate: showTurnInto ? 180 : 0 }}
            transition={{ duration: 0.2 }}
          >
            <Icon src={ChevronDown} size="14" />
          </M.div>
        </M.button>
        {#if showTurnInto}
          <M.div 
            class="absolute left-0 top-full z-50 mt-1 w-48 bg-white rounded-lg border shadow-xl dark:bg-zinc-800 border-zinc-200/40 dark:border-zinc-700/40"
            initial={{ opacity: 0, y: -10, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -10, scale: 0.95 }}
            transition={{ duration: 0.15 }}
          >
            {#each turnIntoOptions as option}
              {#if option.id === 'separator'}
                <div class="my-1 h-px bg-zinc-200/60 dark:bg-zinc-600/60"></div>
              {:else}
                <button 
                  onclick={() => turnInto(option.id)} 
                  class="flex gap-2 items-center px-3 py-2 w-full text-sm text-left transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-700/40"
                >
                  <span class="{option.iconClass || ''}">{option.icon}</span> 
                  {option.label}
                </button>
              {/if}
            {/each}
          </M.div>
        {/if}
      </div>
      <div class="mx-1 w-px h-6 bg-zinc-300 dark:bg-zinc-600"></div>
      <M.button
        onclick={() => editor.chain().focus().toggleBold().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('bold') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Bold"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={Bold} size="16" />
      </M.button>
      <M.button
        onclick={() => editor.chain().focus().toggleItalic().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('italic') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Italic"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={Italic} size="16" />
      </M.button>
      <M.button
        onclick={() => editor.chain().focus().toggleStrike().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('strike') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Strikethrough"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={Strikethrough} size="16" />
      </M.button>
      <M.button
        onclick={() => editor.chain().focus().toggleCode().run()}
        class="p-2 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800 {editor.isActive('code') ? 'bg-zinc-200 dark:bg-zinc-700' : '' }"
        title="Code"
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <Icon src={CodeBracket} size="16" />
      </M.button>
    </M.div>
  {/if}
 </M.div> 
@@ -1,172 +0,0 @@
 <script lang="ts">
  import { slashVisible, slashItems, slashLocation, slashProps, selectedIndex } from './stores';
  import { fly } from 'svelte/transition';
  import { get } from 'svelte/store';
  let height = $state(0);
  let elements = $state<any[]>([]);
  export function handleKeydown(event: any, editor: any) {
    if (!get(slashVisible)) return;
    if (event.key === 'ArrowUp') {
      event.preventDefault();
      upHandler();
      return true;
    }
    if (event.key === 'ArrowDown') {
      event.preventDefault();
      downHandler();
      return true;
    }
    if (event.key === 'Enter') {
      event.preventDefault();
      selectItem(editor);
      return true;
    }
    return false;
  }
  function upHandler() {
    const currentIndex = get(selectedIndex);
    const itemsLength = get(slashItems).length;
    const newIndex = currentIndex === 0 ? itemsLength - 1 : currentIndex - 1;
    selectedIndex.set(newIndex);
  }
  function downHandler() {
    const currentIndex = get(selectedIndex);
    const itemsLength = get(slashItems).length;
    const newIndex = currentIndex === itemsLength - 1 ? 0 : currentIndex + 1;
    selectedIndex.set(newIndex);
  }
  $effect(() => {
    const element = elements[$selectedIndex];
    if (!element) return;
    const container = element.closest('.overflow-auto');
    if (!container) return;
    const elementRect = element.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();
    const elementTop = elementRect.top - containerRect.top + container.scrollTop;
    const elementBottom = elementTop + elementRect.height;
    const containerHeight = containerRect.height;
    // Check if element is outside visible area
    if (elementTop < container.scrollTop) {
      // Element is above visible area
      container.scrollTop = elementTop - 8;
    } else if (elementBottom > container.scrollTop + containerHeight) {
      // Element is below visible area
      container.scrollTop = elementBottom - containerHeight + 8;
    }
  });
  function selectItem(editor: any) {
    const item = get(slashItems)[get(selectedIndex)];
    if (item) {
      let range = get(slashProps).range;
      item.command({ editor, range });
      slashVisible.set(false);
    }
  }
  function closeSlashMenu() {
    slashVisible.set(false);
    selectedIndex.set(0);
  }
  function handleItemClick(item: any) {
    const editor = get(slashProps).editor;
    const range = get(slashProps).range;
    slashVisible.set(false);
    selectedIndex.set(0);
    item.command({ editor, range });
  }
  function getCommandIcon(title: string): string {
    const icons: Record<string, string> = {
      'To Dos':
        '<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>',
      'Heading 1':
        '<svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path><text x="2" y="18" font-size="12" font-weight="bold" fill="currentColor">H1</text></svg>',
      'Heading 2':
        '<svg class="w-5 h-5 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path><text x="2" y="18" font-size="12" font-weight="bold" fill="currentColor">H2</text></svg>',
      'Heading 3':
        '<svg class="w-5 h-5 text-purple-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path><text x="2" y="18" font-size="12" font-weight="bold" fill="currentColor">H3</text></svg>',
      'Bullet List':
        '<svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>',
      'Numbered List':
        '<svg class="w-5 h-5 text-orange-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>',
      Text: '<svg class="w-5 h-5 text-zinc-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 0v12h8V4H6z" clip-rule="evenodd"></path><path d="M8 6h4M8 8h4M8 10h2"></path></svg>',
      Quote:
        '<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0-3a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0-3a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0-3a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm8-3a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path></svg>',
      'Code Block':
        '<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>',
      Divider:
        '<svg class="w-5 h-5 text-zinc-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>',
      'Bold Text':
        '<svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20"><path d="M6 4v12h3.5c2.5 0 4.5-2 4.5-4.5S12 7 9.5 7H9V4H6zm3 5.5h.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H9V9.5z"></path></svg>',
      'Italic Text':
        '<svg class="w-5 h-5 text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path d="M8 4h4l-2 12H6l2-12z"></path></svg>',
      Link: '<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg>',
      'Inline Code':
        '<svg class="w-5 h-5 text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm4.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L14.586 7l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>',
    };
    return (
      icons[title] ||
      '<svg class="w-5 h-5 text-zinc-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>'
    );
  }
 </script>
 <svelte:window bind:innerHeight={height} />
 {#if $slashVisible}
  <div
    class="fixed top-0 w-full h-screen"
    onkeydown={() => {}}
    onclick={closeSlashMenu}
    role="menu"
    tabindex="-1">
  </div>
  <div
    transition:fly={{ y: 10, duration: 300 }}
    class="overflow-auto absolute pb-2 w-80 max-w-full max-h-80 rounded-xl border shadow-xl backdrop-blur-lg origin-top-left scale-125 dark:bg-zinc-900/70 bg-zinc-100/70 dark:border-zinc-700/20 border-zinc-200"
    style="left: {$slashLocation.x}px; top: {$slashLocation.y + $slashLocation.height + 320 > height
      ? $slashLocation.y - $slashLocation.height - 320
      : $slashLocation.y + $slashLocation.height}px;">
    <div class="p-2 text-sm text-zinc-500">Basic Blocks</div>
    {#each $slashItems as { title, subtitle, command }, i}
      <div
        class="p-2 flex gap-3 cursor-pointer {i == $selectedIndex &&
          'dark:bg-zinc-950/50 bg-zinc-300/50'} dark:hover:bg-zinc-950/30 hover:bg-zinc-300/20 rounded-lg mx-2"
        onclick={() => handleItemClick({ command })}
        onkeydown={() => {}}
        role="menuitem"
        tabindex="-1"
        bind:this={elements[i]}>
        <div class="flex justify-center items-center w-8 h-8 rounded-lg bg-zinc-800">
          {@html getCommandIcon(title)}
        </div>
        <div class="flex-1 min-w-0">
          <div class="text-sm font-medium truncate dark:text-white">
            {title}
          </div>
          <p class="text-xs truncate text-zinc-400">
            {subtitle ? subtitle : ''}
          </p>
        </div>
      </div>
    {/each}
  </div>
 {/if}
@@ -1,26 +0,0 @@
 import { Extension } from '@tiptap/core';
 import Suggestion from '@tiptap/suggestion';
 export default Extension.create({
  name: 'slash',
  addOptions() {
    return {
      suggestion: {
        char: '/',
        command: ({ editor, range, props }: any) => {
          props.command({ editor, range });
        },
      },
    };
  },
  addProseMirrorPlugins() {
    return [
      Suggestion({
        editor: this.editor,
        ...this.options.suggestion,
      }),
    ];
  },
 });
@@ -1,46 +0,0 @@
 import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 type SlashItems = SlashItem[];
 type SlashItem = {
  title: string;
  subtitle: string;
  command: ({ editor, range }: EditorProps) => void;
 };
 type Component = {
  name: string;
  description: string;
  code: string;
 };
 type Components = Component[];
 type EditorProps = {
  editor: any;
  range: number | null;
 };
 type Location = {
  x: number;
  y: number;
  height: number;
 };
 // For now we'll keep using stores until we can fully convert to runes in all components
 export const slashItems: Writable<SlashItems> = writable([]);
 export const slashVisible: Writable<boolean> = writable(false);
 export const slashLocation: Writable<Location> = writable({
  x: 0,
  y: 0,
  height: 0,
 });
 export const slashProps: Writable<EditorProps> = writable({
  editor: null,
  range: null,
 });
 export const desktopMenu: Writable<boolean> = writable(true);
 export const components: Writable<Components> = writable([]);
 export const editorWidth: Writable<number> = writable(0);
 export const selectedIndex: Writable<number> = writable(0);
@@ -1,159 +0,0 @@
 import { slashVisible, slashItems, slashLocation, slashProps, selectedIndex } from './stores';
 export default {
  items: ({ query }: any) => {
    return [
      {
        title: 'To Dos',
        subtitle: 'Create a to do list with checkboxes',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).toggleTaskList().run();
        },
      },
      {
        title: 'Heading 1',
        subtitle: 'BIG heading',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run();
        },
      },
      {
        title: 'Heading 2',
        subtitle: 'Less Big heading',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run();
        },
      },
      {
        title: 'Heading 3',
        subtitle: 'Medium big heading',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run();
        },
      },
      {
        title: 'Bullet List',
        subtitle: 'Pew pew pew',
        command: ({ editor, range }: any) => {
          editor.commands.deleteRange(range);
          editor.commands.toggleBulletList();
        },
      },
      {
        title: 'Numbered List',
        subtitle: '1, 2, 3, 4...',
        command: ({ editor, range }: any) => {
          editor.commands.deleteRange(range);
          editor.commands.toggleOrderedList();
        },
      },
      {
        title: 'Text',
        subtitle: 'Just plain text paragraph',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).setNode('paragraph').run();
        },
      },
      {
        title: 'Quote',
        subtitle: 'Capture important quotes',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).toggleBlockquote().run();
        },
      },
      {
        title: 'Code Block',
        subtitle: 'Formatted code snippet',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
        },
      },
      {
        title: 'Divider',
        subtitle: 'Add a horizontal line',
        command: ({ editor, range }: any) => {
          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
        },
      },
      {
        title: 'Bold Text',
        subtitle: 'Make text bold',
        command: ({ editor, range }: any) => {
          editor.commands.deleteRange(range);
          editor.commands.toggleBold();
        },
      },
      {
        title: 'Italic Text',
        subtitle: 'Make text italic',
        command: ({ editor, range }: any) => {
          editor.commands.deleteRange(range);
          editor.commands.toggleItalic();
        },
      },
      {
        title: 'Link',
        subtitle: 'Add a web link',
        command: ({ editor, range }: any) => {
          const url = prompt('Enter the URL:');
          if (url) {
            editor
              .chain()
              .focus()
              .deleteRange(range)
              .setLink({ href: url })
              .insertContent('Link text')
              .run();
          }
        },
      },
      {
        title: 'Inline Code',
        subtitle: 'Inline code snippet',
        command: ({ editor, range }: any) => {
          editor.commands.deleteRange(range);
          editor.commands.toggleCode();
        },
      },
    ]
      .filter((item) => item.title.toLowerCase().startsWith(query.toLowerCase()))
      .slice(0, 10);
  },
  render: () => {
    return {
      onStart: (props: any) => {
        let editor = props.editor;
        let range = props.range;
        let location = props.clientRect();
        const editorRect = editor.view.dom.getBoundingClientRect();
        slashProps.set({ editor, range });
        slashVisible.set(true);
        slashLocation.set({
          x: location.x - editorRect.left,
          y: location.y - editorRect.top + location.height / 2 + 4,
          height: location.height,
        });
        slashItems.set(props.items);
        selectedIndex.set(0);
      },
      onUpdate(props: any) {
        slashItems.set(props.items);
        selectedIndex.set(0);
      },
      onKeyDown(props: any) {
        if (props.event.key === 'Escape') {
          slashVisible.set(false);
          return true;
        }
      },
      onExit() {
        slashVisible.set(false);
        selectedIndex.set(0);
      },
    };
  },
 };
@@ -1,75 +0,0 @@
 .ProseMirror {
  position: relative;
 }
 .ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
 }
 .ProseMirror [contenteditable="false"] {
  white-space: normal;
 }
 .ProseMirror [contenteditable="false"] [contenteditable="true"] {
  white-space: pre-wrap;
 }
 .ProseMirror pre {
  white-space: pre-wrap;
 }
 img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
 }
 .ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
  margin: 0;
 }
 .ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
 }
@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
 }
 .ProseMirror-hideselection *::selection {
  background: transparent;
 }
 .ProseMirror-hideselection *::-moz-selection {
  background: transparent;
 }
 .ProseMirror-hideselection * {
  caret-color: transparent;
 }
 .ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
 }
 .tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0
 }
@@ -1,238 +0,0 @@
 /* SEQTA Applied styles on DMs (applied to ensure consistency) */
 .editor-prose {
  font-family: 'Roboto', sans-serif;
  border: 0;
  padding: 0 8px;
  margin: 0;
  line-height: 1.2;
  /* Removed font size because drag and drop text content within the editor insert html span with font sizing */
  font-size: 10pt;
  /* Macro: Image  */
  /* Macro: Image gallery (display) */
  /* Fake macro element from plugin "seqta-macro" */
  img[data-macro],
  a[data-macro] {
    border: 2px dashed #ccc;
    padding: 8px;
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
  }
  img[data-macro].selected,
  a[data-macro].selected {
    border: 2px solid #204a87;
    box-shadow: inset 0 0 4px #204a87;
  }
  img[data-macro='Resource'] {
    background-image: repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0) 12px,
      rgba(0, 0, 0, 0.05) 12px,
      rgba(0, 0, 0, 0.05) 24px
    );
  }
  img[data-macro='Embed'] {
    background-image: repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0) 12px,
      rgba(0, 0, 0, 0.05) 12px,
      rgba(0, 0, 0, 0.05) 24px
    );
  }
  img[data-macro='Embed'][data-full] {
    width: 100%;
  }
  img[data-macro='Gallery'] {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
  }
  /* Direqt message-specific styling */
  blockquote.forward {
    margin: 0;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  blockquote.forward > .preamble {
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px;
  }
  blockquote.forward > .preamble > .date > .label,
  blockquote.forward > .preamble > .sender > .label {
    color: rgba(0, 0, 0, 0.7);
  }
  blockquote.forward > .preamble > .date > .value,
  blockquote.forward > .preamble > .sender > .value {
    color: rgba(0, 0, 0, 0.9);
  }
  blockquote.forward > .body {
    padding: 8px;
  }
  /** Assessment display **/
  .assessmentWrapper {
    position: relative;
    display: inline-block;
    bottom: -15px;
  }
  .macro-assessment {
    padding: 8px 16px;
    margin: 0 8px;
    border: 4px solid rgba(0, 0, 0, 0.25);
    display: inline-block;
    width: 256px;
    background-color: #fff;
    overflow: hidden;
    text-shadow: none;
    position: relative;
    word-wrap: break-word;
    min-height: 30px;
  }
  .macro-assessment > .title {
    font-size: 150%;
    max-width: 230px;
  }
  .macro-assessment > .due > span.weight {
    padding-left: 24px;
  }
  .macro-assessment > .due > span.marked {
    padding-left: 24px;
    font-weight: bold;
  }
  .macro-assessment > .hidden,
  .macro-assessment > .deleted {
    font-style: italic;
    max-width: 230px;
  }
  /** Syllabus display **/
  .macro-syllabus {
    padding: 8px;
    margin: 0 8px;
    border: 4px solid #eee;
    display: inline-block;
    max-width: 200px;
    background-color: #fff;
    overflow: hidden;
    color: #444;
    text-shadow: none;
    position: relative;
    bottom: -15px;
  }
  .macro-syllabus > .label {
    font-weight: bold;
  }
  .macro-syllabus > .extra {
    font-style: italic;
  }
  .macro-syllabus > .meta {
    text-transform: uppercase;
    font-size: var(--small-text);
    color: #999;
  }
  /* Drop-down menu for plugins like "seqta-macro" */
  .cke_panel_block > h1 {
    display: none;
  }
  .cke_panel_block > .cke_panel_list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .cke_panel_block > .cke_panel_list > li {
    color: #888;
    margin: 0;
    cursor: pointer;
  }
  .cke_panel_block > .cke_panel_list > li:hover {
    color: white;
    background: #1b315e;
  }
  .cke_panel_block > .cke_panel_list > li > a {
    display: block;
    color: inherit;
    text-decoration: inherit;
    text-transform: uppercase;
    font-size: 90%;
    padding: 8px; /* Padding on the <a>, not the <li>, so our click target is full size. */
    text-shadow: none;
  }
  .cke_panel_block > .cke_panel_list > li > a > p,
  .cke_panel_block > .cke_panel_list > li > a > h1,
  .cke_panel_block > .cke_panel_list > li > a > h2,
  .cke_panel_block > .cke_panel_list > li > a > h3,
  .cke_panel_block > .cke_panel_list > li > a > pre {
    margin: 0;
    color: inherit;
    padding: 0;
  }
  .moodleFrame > .userHTML {
    width: 100%;
    height: 600px;
    margin: 16px 0 16px 0;
  }
  .application.restricted {
    display: block;
    max-width: 320px;
    margin: 32px auto;
    border: 1px dashed #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 24px;
    background: #f8f8f8;
    background-image: -webkit-linear-gradient(315deg, #fff, #f8f8f8);
    background-image: linear-gradient(135deg, #fff, #f8f8f8);
    border-radius: 8px;
    box-sizing: border-box;
  }
  .application.restricted > .title {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: bold;
    color: #666;
  }
  .application.restricted > .message {
    margin: 0;
    padding: 0;
    font-size: var(--small-text);
  }
 }
@@ -1,236 +0,0 @@
 import type { Plugin } from "@/plugins/core/types";
 import { BasePlugin } from "@/plugins/core/settings";
 import { defineSettings } from "@/plugins/core/settingsHelpers";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 import renderSvelte from "@/interface/main";
 import BetterEditor from "./BetterEditor.svelte";
 import { unmount } from "svelte";
 const settings = defineSettings({});
 class CustomMessageEditorPlugin extends BasePlugin<typeof settings> {}
 const settingsInstance = new CustomMessageEditorPlugin();
 const customMessageEditorPlugin: Plugin<typeof settings> = {
  id: "custom-message-editor",
  name: "Custom Message Editor",
  description: "Enhanced message editor with better editing capabilities",
  version: "1.0.0",
  settings: settingsInstance.settings,
  defaultEnabled: true,
  run: async (api) => {
    let currentShadowContainer: HTMLElement | null = null;
    let currentSvelteApp: any = null;
    let currentEditorId: string | null = null;
    let lastCKEditorContent: string = "";
    const cleanup = (resetEditorId = true) => {
      if (currentSvelteApp) {
        unmount(currentSvelteApp);
        currentSvelteApp = null;
      }
      if (currentShadowContainer) {
        currentShadowContainer.remove();
        currentShadowContainer = null;
      }
      if (resetEditorId) {
        currentEditorId = null;
      }
    };
    const handleEditorChange = (value: string) => {
      if (currentEditorId) {
        window.postMessage(
          {
            type: "ckeditorSetData",
            editorId: currentEditorId,
            content: value,
          },
          "*",
        );
      }
    };
    const getCKEditorContent = () => {
      if (currentEditorId) {
        window.postMessage(
          {
            type: "ckeditorGetData",
            editorId: currentEditorId,
          },
          "*",
        );
      }
    };
    const messageListener = (event: MessageEvent) => {
      if (event.data.type === "ckeditorGetDataResponse") {
        lastCKEditorContent = event.data.data;
        console.log("Retrieved CKEditor content:", lastCKEditorContent);
      }
    };
    window.addEventListener("message", messageListener);
    const injectBetterEditorButton = async (composer: Element) => {
      try {
        const pillbox = await waitForElm(
          ".coneqtMessage.composer .footer .pillbox",
          true,
          100,
          50,
        );
        if (!pillbox) {
          console.error("Could not find pillbox element");
          return;
        }
        if (pillbox.querySelector(".better-editor-btn")) {
          return;
        }
        const betterEditorBtn = document.createElement("button");
        betterEditorBtn.type = "button";
        betterEditorBtn.className = "notLast editorMode better-editor-btn";
        betterEditorBtn.textContent = "Better Editor";
        betterEditorBtn.setAttribute("data-key", "better");
        const htmlEditorBtn = pillbox.querySelector(
          'button[data-key="html"]',
        ) as HTMLButtonElement;
        if (!htmlEditorBtn) {
          console.error("Could not find HTML editor button");
          return;
        }
        pillbox.insertBefore(betterEditorBtn, htmlEditorBtn);
        betterEditorBtn.addEventListener("click", async () => {
          const simpleEditorBtn = pillbox.querySelector(
            'button[data-key="content"]',
          ) as HTMLButtonElement;
          if (simpleEditorBtn) {
            simpleEditorBtn.click();
          }
          pillbox.querySelectorAll(".editorMode").forEach((btn) => {
            btn.classList.remove("depressed");
          });
          if (simpleEditorBtn) {
            simpleEditorBtn.classList.add("depressed");
          }
          const wrapper = composer.querySelector(
            ".prime .body .formattedText .wrapper",
          );
          const ckeElement = wrapper?.querySelector(".cke");
          if (!wrapper || !ckeElement) {
            console.error("Could not find wrapper or CKE elements");
            return;
          }
          if (ckeElement.id) {
            const ckeMatch = ckeElement.id.match(/^cke_(.+)$/);
            if (ckeMatch) {
              currentEditorId = ckeMatch[1];
              console.log("Found CKEditor ID:", currentEditorId);
            }
          }
          let initialContent = "";
          if (currentEditorId) {
            window.postMessage(
              {
                type: "ckeditorGetData",
                editorId: currentEditorId,
              },
              "*",
            );
            initialContent = await new Promise<string>((resolve) => {
              const timeout = setTimeout(() => resolve(""), 1000);
              const responseListener = (event: MessageEvent) => {
                if (event.data.type === "ckeditorGetDataResponse") {
                  clearTimeout(timeout);
                  window.removeEventListener("message", responseListener);
                  resolve(event.data.data || "");
                }
              };
              window.addEventListener("message", responseListener);
            });
          }
          (ckeElement as HTMLElement).style.display = "none";
          cleanup(false);
          const shadowContainer = document.createElement("div");
          shadowContainer.className = "better-editor-container";
          shadowContainer.style.cssText =
            "width: 100%; height: 100%; min-height: 200px; overflow-y: scroll; background: var(--background-primary); border-radius: 16px; padding: 4px;";
          const shadowRoot = shadowContainer.attachShadow({ mode: "open" });
          currentSvelteApp = renderSvelte(BetterEditor, shadowRoot, {
            initialContent,
            onchange: handleEditorChange,
          });
          wrapper.appendChild(shadowContainer);
          currentShadowContainer = shadowContainer;
          pillbox.querySelectorAll(".editorMode").forEach((btn) => {
            btn.classList.remove("depressed");
          });
          betterEditorBtn.classList.add("depressed");
        });
        pillbox
          .querySelectorAll(".editorMode:not(.better-editor-btn)")
          .forEach((btn) => {
            btn.addEventListener("click", () => {
              getCKEditorContent();
              cleanup(false);
              const wrapper = composer.querySelector(
                ".prime .body .formattedText .wrapper",
              );
              const ckeElement = wrapper?.querySelector(".cke");
              if (ckeElement) {
                (ckeElement as HTMLElement).style.display = "";
              }
            });
          });
      } catch (error) {
        console.error("Error injecting Better Editor button:", error);
      }
    };
    const { unregister } = api.seqta.onMount(".uiSlidePane", (slidePane) => {
      console.log("Found slide pane, checking for message composer");
      const messageComposer = slidePane.querySelector(
        ".coneqtMessage.composer",
      );
      if (messageComposer) {
        console.log("Found message composer, injecting Better Editor button");
        injectBetterEditorButton(messageComposer);
      }
    });
    return () => {
      cleanup();
      unregister();
      window.removeEventListener("message", messageListener);
    };
  },
 };
 export default customMessageEditorPlugin;
@@ -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;
  }
 }
 ```
@@ -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> 
@@ -1,6 +1,7 @@
 <script lang="ts">
  import { createEventDispatcher, onDestroy } from 'svelte';
-  import { calculateExpression } from '../utils/calculator';
+  import { unitFullNames } from './unitMap';
  import * as math from 'mathjs';
  let { searchTerm = '', isSelected = false } = $props<{ searchTerm: string, isSelected: boolean }>();
@@ -12,32 +13,73 @@
  let isCalculating = $state(false);
  let inputUnit = $state<string>('');
  let outputUnit = $state<string>('');
  let isPartial = $state(false);
  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;
-    try {
+      // Let mathjs handle everything
-      const calcResult = calculateExpression(input);
+      const evaluated = math.evaluate(input.replace('**', '^'));
-      if (calcResult.isValid) {
+      // Format the result
-        result = calcResult.result;
+      if (evaluated !== undefined) {
-        inputUnit = calcResult.inputUnit;
+        if (math.typeOf(evaluated) === 'Unit') {
-        outputUnit = calcResult.outputUnit;
+          // Handle unit conversion results
-        isPartial = calcResult.isPartial;
+          result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
-        dispatch('hasResult', calcResult.result);
+          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 = '';
        isPartial = false;
        dispatch('hasResult', null);
      }
    } catch (e) {
      // If mathjs throws an error, this isn't a valid expression
      result = null;
      inputUnit = '';
      outputUnit = '';
      isPartial = false;
      dispatch('hasResult', null);
    } finally {
      isCalculating = false;
@@ -54,7 +96,7 @@
 </script>
 {#if result !== null}
-<div class="">
+<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">
@@ -82,7 +124,7 @@
          {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 || (isPartial ? 'Partial' : 'Result')}
+          {outputUnit || 'Result'}
        </div>
      </div>
    {:else}
@@ -6,108 +6,31 @@
  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 } from '../indexing/types';
+  import type { IndexItem, HydratedIndexItem } from '../indexing/types';
  import debounce from 'lodash/debounce';
  import { renderComponentMap } from '../indexing/renderComponents';
  import HighlightedText from '../utils/HighlightedText.svelte';
  import { matchesHotkey } from '../utils/hotkeyUtils';
  import browser from 'webextension-polyfill';
  const { 
    transparencyEffects, 
-    searchHotkey: initialSearchHotkey
+    showRecentFirst
  } = $props<{ 
    transparencyEffects: boolean, 
-    searchHotkey: string
+    showRecentFirst: boolean 
  }>();
  let currentSearchHotkey = $state(initialSearchHotkey);
  let commandsFuse = $state<Fuse<StaticCommandItem>>();
-  let dynamicContentFuse = $state<Fuse<IndexItem>>();
+  let dynamicContentFuse = $state<Fuse<HydratedIndexItem>>();
-  const dynamicIdToItemMap = $state(new Map<string, IndexItem>());
+  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);
  let commandPalleteOpen = $state(false);
  let searchTerm = $state('');
  let selectedIndex = $state(0);
  let combinedResults = $state<CombinedResult[]>([]);
  let searchbar = $state<HTMLInputElement>();
  let isLoading = $state(false);
  let calculatorResult = $state<string | null>(null);
  let resultsList = $state<HTMLUListElement>();
  const updateCalculatorState = (hasResult: string | null) => {
    calculatorResult = hasResult;
  };
  let keydownHandler: ((e: KeyboardEvent) => void) | null = null;
  // Listen for setting changes
  $effect(() => {
    const loadSettings = async () => {
      const settings = await browser.storage.local.get('plugin.global-search.settings');
      const pluginSettings = settings['plugin.global-search.settings'] as { searchHotkey?: string } | undefined;
      if (pluginSettings?.searchHotkey) {
        currentSearchHotkey = pluginSettings.searchHotkey;
      }
    };
    loadSettings();
    // Listen for storage changes
    const handleStorageChange = (changes: any, area: string) => {
      if (area === 'local' && changes['plugin.global-search.settings']) {
        const newSettings = changes['plugin.global-search.settings'].newValue as { searchHotkey?: string } | undefined;
        if (newSettings?.searchHotkey) {
          currentSearchHotkey = newSettings.searchHotkey;
        }
      }
    };
    browser.storage.onChanged.addListener(handleStorageChange);
    return () => {
      browser.storage.onChanged.removeListener(handleStorageChange);
    };
  });
  // Update keydown handler when hotkey changes
  $effect(() => {
    if (keydownHandler) {
      window.removeEventListener('keydown', keydownHandler);
    }
    keydownHandler = (e: KeyboardEvent) => {
      if (matchesHotkey(e, currentSearchHotkey)) {
        e.preventDefault();
        commandPalleteOpen = true;
        tick().then(() => searchbar?.focus());
      }
      if (e.key === 'Escape') {
        commandPalleteOpen = false;
      }
    };
    window.addEventListener('keydown', keydownHandler);
    return () => {
      if (keydownHandler) {
        window.removeEventListener('keydown', keydownHandler);
        keydownHandler = null;
      }
    };
  });
  onMount(() => {
    const progressHandler = (event: CustomEvent) => {
      const { completed, total, indexing } = event.detail;
@@ -119,18 +42,12 @@
    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);
    setupSearchIndexes();
    // @ts-ignore - Intentionally adding to window
    window.setCommandPalleteOpen = (open: boolean) => {
      commandPalleteOpen = open;
    };
    return () => {
      window.removeEventListener('indexing-progress', progressHandler as EventListener);
      window.removeEventListener('dynamic-items-updated', itemsUpdatedHandler);
@@ -151,23 +68,58 @@
    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;
    tick().then(() => {
      const selectedElement = resultsList?.querySelector(`li:nth-child(1)`);
      selectedElement?.scrollIntoView({ block: 'nearest' });
    });
    const term = searchTerm.trim().toLowerCase();
    if (commandsFuse && dynamicContentFuse) {
      combinedResults = await doSearch(
        term, 
        commandsFuse, 
        dynamicContentFuse, 
        commandIdToItemMap, 
        dynamicIdToItemMap,
        showRecentFirst
      );
    } else {
      combinedResults = [];
@@ -176,7 +128,7 @@
    isLoading = false;
  };
-  const debouncedPerformSearch = debounce(performSearch, 20);
+  const debouncedPerformSearch = debounce(performSearch, 10);
  $effect(() => {
    if (commandPalleteOpen) {
@@ -189,6 +141,7 @@
    } else {
      searchTerm = '';
      selectedIndex = 0;
      prevSearchTerm = '';
      combinedResults = [];
    }
  });
@@ -203,24 +156,16 @@
    const maxIndex = (calculatorResult ? 1 : 0) + combinedResults.length - 1;
    if (selectedIndex < maxIndex) {
      selectedIndex++;
      tick().then(() => {
        const selectedElement = resultsList?.querySelector(`li:nth-child(${selectedIndex + 1})`);
        selectedElement?.scrollIntoView({ block: 'nearest' });
      });
    }
  };
  const selectPrev = () => {
    if (selectedIndex > 0) {
      selectedIndex--;
      tick().then(() => {
        const selectedElement = resultsList?.querySelector(`li:nth-child(${selectedIndex + 1})`);
        selectedElement?.scrollIntoView({ block: 'nearest' });
      });
    }
  };
-  function executeItemAction(item: StaticCommandItem | IndexItem) {
+  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]) {
@@ -243,7 +188,6 @@
  };
  const handleKeyNav = (e: KeyboardEvent) => {
    // Handle regular navigation
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      selectNext();
@@ -266,18 +210,18 @@
      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 scale-120 origin-top" 
+    <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: KeyboardEvent) => e.key === 'Escape' && (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-xl' : 'bg-white dark:bg-zinc-900' }"
+        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: MouseEvent) => {
+        onclick={(e) => {
          e.stopPropagation();
        }}
-        onkeydown={(e: KeyboardEvent) => {
+        onkeydown={(e) => {
          if (e.key === 'Escape') {
            commandPalleteOpen = false;
          }
@@ -298,10 +242,7 @@
          />
        </div>
-        <ul 
+        <ul class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
          bind:this={resultsList}
          class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-2 gap-0.5 flex flex-col"
        >
          <Calculator 
            searchTerm={searchTerm} 
            isSelected={selectedIndex === 0} 
@@ -316,39 +257,40 @@
                {#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 transition-colors duration-100 ring-0 dark:ring-zinc-600/50
+                    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 dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+                    {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 scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br {staticItem.category === 'navigation' ? 'from-[#FA5D5D] to-[#DC2F30]' : 'from-[#4FBBFE] to-[#2090F3]'} rounded-md text-white">{staticItem.icon}</div>
+                    <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">
-                      <HighlightedText text={staticItem.text} term={searchTerm} matches={result.matches} />
+                      {@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 IndexItem}
+                  {@const dynamicItem = item as HydratedIndexItem}
-                  {@const RenderComponent = renderComponentMap[dynamicItem.renderComponentId]}
+                  {#if dynamicItem.renderComponent}
-                  {#if RenderComponent}
+                    <dynamicItem.renderComponent 
                    <RenderComponent 
                      item={dynamicItem} 
                      isSelected={isSelected}
                      searchTerm={searchTerm} 
                      matches={result.matches} 
-                      onclick={() => executeItemAction(dynamicItem)}
+                      on:click={() => executeItemAction(dynamicItem)} 
                      onkeydown={() => executeItemAction(dynamicItem)}
                      role="button"
                      tabindex="0"
                    />
                  {: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 dark:ring-[1px]' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+                      {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">
-                          <HighlightedText text={dynamicItem.text} term={searchTerm} matches={result.matches} />
+                          {@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} 
@@ -356,7 +298,7 @@
                      </div>
                      {#if dynamicItem.content}
                        <div class="mt-1 ml-12 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 text-start">
-                          <HighlightedText text={dynamicItem.content} term={searchTerm} matches={result.matches} />
+                          {@html stripHtmlButKeepHighlights(highlightSnippet(dynamicItem.content, searchTerm, result.matches))}
                        </div>
                      {/if}
                    </button>
@@ -380,7 +322,18 @@
        </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-7 text-sm text-zinc-500 dark:text-zinc-400">
+            <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}
@@ -403,6 +356,7 @@
                  </div>
                {/if}
              </div>
            </div>
          {/if}
        </div>
      </div>
@@ -414,9 +368,23 @@
  <div class="flex gap-2 items-center">
    <div class="flex gap-1 items-center">
      {#each keybind as key}
-        <kbd class="size-6 text-[0.9rem] flex justify-center items-center rounded bg-zinc-100 dark:bg-zinc-100/10">{key}</kbd>
+        <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>
@@ -1,34 +0,0 @@
 <script lang="ts">
  import HighlightedText from '../../utils/HighlightedText.svelte';
  import type { DynamicContentItem } from '../../utils/dynamicItems';
  import type { FuseResultMatch } from '../../core/types';
  const { item, isSelected, searchTerm, matches, onclick } = $props<{
    item: DynamicContentItem;
    isSelected: boolean;
    searchTerm: string;
    matches?: readonly FuseResultMatch[];
    onclick: () => void;
  }>();
 </script>
 <button
  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
  onclick={onclick}
  >
  <div class="flex items-center w-full">
    <div class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br from-[#59F675] to-[#1BC636] rounded-md text-white">{item.metadata?.icon || '\uebee'}</div>
    <span class="ml-4 text-lg truncate">
      <HighlightedText text={item.text} term={searchTerm} matches={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">
      <HighlightedText text={item.content} term={searchTerm} matches={matches} />
    </div>
  {/if}
 </button>
@@ -1,29 +0,0 @@
 <script lang="ts">
  import HighlightedText from '../../utils/HighlightedText.svelte';
  import type { DynamicContentItem } from '../../utils/dynamicItems';
  import type { FuseResultMatch } from '../../core/types';
  const { item, isSelected, searchTerm, matches, onclick } = $props<{
    item: DynamicContentItem;
    isSelected: boolean;
    searchTerm: string;
    matches?: readonly FuseResultMatch[];
    onclick: () => void;
  }>();
 </script>
 <button
  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
  onclick={onclick}
  >
  <div class="flex items-center w-full">
    <div class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white bg-gradient-to-br from-[#59aaf6] to-[#1b62c6] rounded-md">{item.metadata?.icon || '\uebe7'}</div>
    <span class="ml-4 text-lg truncate {item.metadata?.closed ? 'line-through opacity-80' : ''}">
      <HighlightedText text={item.text} term={searchTerm} matches={matches} />
    </span>
    <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
      {item.category} 
    </span>
  </div>
 </button>
@@ -1,36 +0,0 @@
 <script lang="ts">
  import HighlightedText from '../../utils/HighlightedText.svelte';
 import type { IndexItem } from '../../indexing/types';
  import type { FuseResultMatch } from '../../core/types';
  export let item: IndexItem;
  export let isSelected: boolean;
  export let searchTerm: string;
  export let matches: readonly FuseResultMatch[] | undefined;
  export let onclick: (() => void) | undefined;
 </script>
 <button
  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
  onclick={onclick}
 >
  <div class="flex items-center w-full">
    <div class="flex-none scale-90 w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white {item.metadata?.type === 'assessments' ? 'bg-gradient-to-br from-[#fa915d] to-[#dc6c2f] rounded-md' : 'bg-gradient-to-br from-[#4FBBFE] to-[#2090F3] rounded-md'} {item.metadata.isActive ? 'opacity-100' : 'opacity-80'}">
      {item.metadata?.type === 'assessments' ? '\ueac3' : '\ueb4d'}
    </div>
    <span class="ml-4 text-lg truncate {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
      <HighlightedText text={item.text} term={searchTerm} matches={matches} />
    </span>
    <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400 {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
      {item.metadata?.subjectCode}
    </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">
      <HighlightedText text={item.content} term={searchTerm} matches={matches} />
    </div>
  {/if}
 </button> 
@@ -190,31 +190,4 @@ export const unitFullNames: Record<string, string> = {
  NOK: "Norwegian Krone",
  SGD: "Singapore Dollars",
  HKD: "Hong Kong Dollars",
  KRW: "South Korean Won",
  MXN: "Mexican Peso",
  BRL: "Brazilian Real",
  RUB: "Russian Ruble", 
  TRY: "Turkish Lira",
  ZAR: "South African Rand",
  PLN: "Polish Zloty",
  THB: "Thai Baht",
  DKK: "Danish Krone",
  CZK: "Czech Koruna",
  HUF: "Hungarian Forint",
  ILS: "Israeli Shekel",
  PHP: "Philippine Peso",
  TWD: "Taiwan Dollar",
  MYR: "Malaysian Ringgit",
  // --- Cryptocurrencies ---
  BTC: "Bitcoin",
  ETH: "Ethereum",
  XRP: "Ripple",
  LTC: "Litecoin",
  ADA: "Cardano",
  DOT: "Polkadot",
  SOL: "Solana",
  MATIC: "Polygon",
  AVAX: "Avalanche",
  UNI: "Uniswap",
 };
@@ -1,6 +1,5 @@
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
 import { waitForElm } from "@/seqta/utils/waitForElm";
 export interface BaseCommandItem {
  id: string;
@@ -17,127 +16,14 @@ export interface StaticCommandItem extends BaseCommandItem {
  keybindLabel?: string[];
 }
 // Function to get current lesson
 async function getCurrentLesson() {
  const date = new Date();
  const todayFormatted = formatDate(date);
  try {
    const response = await fetch(`${location.origin}/seqta/student/load/timetable?`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        from: todayFormatted,
        until: todayFormatted,
        student: 69,
      }),
    });
    const timetableData = await response.json();
    if (!timetableData.payload.items.length) {
      alert("No lessons today!");
      return null;
    }
    const lessons = timetableData.payload.items.sort((a: any, b: any) =>
      a.from.localeCompare(b.from)
    );
    const currentTime = new Date();
    for (const lesson of lessons) {
      const [startHour, startMinute] = lesson.from.split(":").map(Number);
      const [endHour, endMinute] = lesson.until.split(":").map(Number);
      const startDate = new Date(currentTime);
      startDate.setHours(startHour, startMinute, 0);
      const endDate = new Date(currentTime);
      endDate.setHours(endHour, endMinute, 0);
      if (startDate <= currentTime && endDate > currentTime) {
        return lesson;
      }
    }
    alert("There is no current lesson!");
    return null;
  } catch (error) {
    console.error("Error fetching current lesson:", error);
    alert("Error getting current lesson. Please try again.");
    return null;
  }
 }
 async function navigateToSpecificLesson(lesson: any) {
  try {
    await waitForElm(".course .navigator", true, 100, 100);
    const today = new Date();
    const todayDateString = today.toLocaleDateString('en-GB', { 
      day: 'numeric', 
      month: 'short' 
    });
    const weeks = document.querySelectorAll(".course .navigator .week");
    for (const week of weeks) {
      // Look for lessons in this week
      const lessons = week.querySelectorAll(".lesson");
      for (const lessonElement of lessons) {
        const metaElement = lessonElement.querySelector(".meta");
        if (!metaElement) continue;
        const dateElement = metaElement.querySelector(".date");
        const periodElement = metaElement.querySelector(".period");
        if (!dateElement || !periodElement) continue;
        const lessonDate = dateElement.textContent?.trim();
        const lessonPeriod = periodElement.textContent?.trim().match(/\d+/)?.[0];
        // extract the number from the period
        const normalizedLessonPeriod = lesson.period?.match(/\d+/)?.[0];
        // Check if this lesson matches today's date and the current lesson's period
        if (lessonDate === todayDateString && lessonPeriod === normalizedLessonPeriod) {
          // Found the exact matching lesson, click it
          (lessonElement as HTMLElement).click();
          console.log(`Navigated to exact lesson: ${lessonDate} ${lessonPeriod}`);
          return true;
        }
      }
    }
    const todayButton = Array.from(document.querySelectorAll('#toolbar .uiButton'))
      .find(button => button.textContent?.trim() === 'Today') as HTMLElement;
    if (todayButton) {
      todayButton.click();
    }
    return true;
  } catch (error) {
    console.error("Error navigating to specific lesson:", error);
    return false;
  }
 }
 function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}-${month}-${day}`;
 }
 const staticCommands: StaticCommandItem[] = [
  {
    id: "home",
    icon: "\ueb4c",
    category: "navigation",
    text: "Home",
    keybind: ["alt+h"],
    keybindLabel: ["Alt", "H"],
    action: () => {
      window.location.hash = "?page=/home";
      loadHomePage();
@@ -149,6 +35,8 @@ const staticCommands: StaticCommandItem[] = [
    icon: "\uebfd",
    category: "navigation",
    text: "Direct Messages",
    keybind: ["alt+m"],
    keybindLabel: ["Alt", "M"],
    action: () => {
      window.location.hash = "?page=/messages";
    },
@@ -159,27 +47,13 @@ const staticCommands: StaticCommandItem[] = [
    icon: "\ue9cd",
    category: "navigation",
    text: "Timetable",
    keybind: ["alt+t"],
    keybindLabel: ["Alt", "T"],
    action: () => {
      window.location.hash = "?page=/timetable";
    },
    priority: 4,
  },
  {
    id: "Current Lesson",
    icon: "\ue9a5",
    category: "navigation",
    text: "Current Lesson",
    priority: 4,
    action: async () => {
      const currentLesson = await getCurrentLesson();
      if (currentLesson && currentLesson.programmeID !== 0) {
        // Navigate to course page first
        window.location.hash = `?page=/courses/${currentLesson.programmeID}:${currentLesson.metaID}`;
        await navigateToSpecificLesson(currentLesson);
      }
    },
  },
  {
    id: "assessments",
    icon: "\ueac3",
@@ -188,44 +62,17 @@ const staticCommands: StaticCommandItem[] = [
    keybind: ["alt+a"],
    keybindLabel: ["Alt", "A"],
    action: () => {
-      window.location.hash = "?page=/assessments/upcoming";
+      window.location.hash = "?page=/assessments";
    },
    priority: 4,
  },
  {
    id: "dashboard",
    icon: "\ueb87",
    category: "navigation",
    text: "Dashboard",
    priority: 4,
    action: () => {
      window.location.hash = "?page=/dashboard";
    },
  },
  {
    id: "compose-message",
    icon: "\ue924",
    category: "action",
    text: "Compose Message",
    action: () => {
      window.postMessage({
        type: "triggerKeyboardEvent",
        key: 'm',
        code: 'KeyM',
        keyCode: 77,
        altKey: true
      }, "*");
    },
    keywords: ["compose", "message", "dm", "direct message", "new message"],
    priority: 3,
  },
  {
    id: "toggle-dark-mode",
    icon: "\uecfe",
    category: "action",
    text: "Toggle Dark Mode",
    action: () => (settingsState.DarkMode = !settingsState.DarkMode),
-    priority: 3,
+    priority: 2,
    keywords: ["theme", "appearance"],
  },
 ];
--- a/Show More
+++ b/Show More
`@@ -1 +1 @@`
	`import "./documentload.scss";`	`import './documentload.scss';`