bump(version): 3.4.9

Advertisement of MC in extension

.dependency-cruiser.cjs

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

.env.submit.example

@@ -0,0 +1,16 @@
+# Copy this file to .env.submit and fill in the values as you wish to publish
+CHROME_EXTENSION_ID=
+CHROME_CLIENT_ID=
+CHROME_CLIENT_SECRET=
+CHROME_REFRESH_TOKEN=
+CHROME_PUBLISH_TARGET=
+CHROME_SKIP_SUBMIT_REVIEW=
+FIREFOX_EXTENSION_ID=
+FIREFOX_JWT_ISSUER=
+FIREFOX_JWT_SECRET=
+FIREFOX_CHANNEL=
+EDGE_PRODUCT_ID=
+EDGE_CLIENT_ID=
+EDGE_CLIENT_SECRET=
+EDGE_ACCESS_TOKEN_URL=
+EDGE_SKIP_SUBMIT_REVIEW= # true or false

.eslintrc.json

@@ -3,21 +3,24 @@
     "browser": true,
     "commonjs": true,
     "es2021": true,
-    "node": true // add this line to allow Node.js-specific globals
+    "node": true
   },
   "extends": "eslint:recommended",
   "parserOptions": {
     "ecmaVersion": "latest",
-    "sourceType": "module" // add this line to allow 'import' and 'export' statements
+    "sourceType": "module"
   },
   "rules": {
     // allow importing ts extensions
-    "sort-imports": ["error", {
-      "ignoreCase": true,
-      "ignoreDeclarationSort": true,
-      "ignoreMemberSort": false,
-      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
-    }],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+      }
+    ],
     "import/extensions": [
       "error",
       "ignorePackages",
@@ -29,4 +32,4 @@
     ]
   },
   "plugins": ["import"]
-}
+}

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/ISSUE_TEMPLATE/new_contributor.yml

@@ -0,0 +1,114 @@
+name: 🙋 New Contributor - Need Help Getting Started
+description: Perfect for first-time contributors who need guidance
+labels: ["help wanted", "documentation"]
+title: "[NEW CONTRIBUTOR] "
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## Hi there! 👋
+        Welcome to BetterSEQTA+! We're excited to have you join our community.
+
+  - type: checkboxes
+    attributes:
+      label: Tell us about yourself (check all that apply)
+      options:
+        - label: "This is my first time contributing to open source"
+          required: false
+        - label: "I'm new to browser extensions"
+          required: false
+        - label: "I'm new to TypeScript/JavaScript"
+          required: false
+        - label: "I have some coding experience but new to this project"
+          required: false
+          
+  - type: checkboxes
+    attributes:
+      label: What would you like to work on? (check all that apply)
+      options:
+        - label: "Fix a bug 🐛"
+          required: false
+        - label: "Add a new feature ✨"
+          required: false
+        - label: "Improve documentation 📚"
+          required: false
+        - label: "Create a plugin 🧩"
+          required: false        
+        - label: "Improve the UI/design 🎨"
+          required: false
+        - label: "Write tests 🧪"
+          required: false
+        - label: "Not sure - I want to help but need guidance!"
+          required: false
+
+  - type: checkboxes
+    attributes:
+      label: Have you read our guides?
+      options:
+        - label: "Getting Started Guide (see docs/GETTING_STARTED_CONTRIBUTING.md)"
+          required: true
+        - label: "Architecture Guide (see docs/ARCHITECTURE.md)"
+          required: true
+        - label: "Plugin Development Guide (see docs/plugins/README.md)"
+          required: true
+
+  - type: checkboxes
+    attributes:
+      label: Have you set up the development environment yet?
+      options:
+        - label: Yes, everything works! 🎉
+          required: false
+        - label: Partially - I can run `npm run dev` but having some issues
+          required: false
+        - label: No, I need help with setup
+          required: false
+        - label: I tried but ran into errors (please describe below)
+          required: false
+
+  - type: input
+    attributes:
+      label: Errors
+      description: "Please list any encountered errors here:"
+      placeholder: "I am encountering issues with..."
+    validations:
+      required: false
+
+  - type: input
+    attributes:
+      label: Questions or Issues
+      description: "Tell us:
+                    1. What specifically would you like help with?
+                    2. Are you stuck on anything?
+                    3. Do you have any questions about the codebase?
+                    4. Is there anything in our documentation that's unclear?"
+      placeholder: "I want help with..."
+    validations:
+      required: false
+      
+  - type: input
+    attributes:
+      label: Ideas or Suggestions
+      description: "If you have any ideas for features, improvements, or just want to share your thoughts:"
+      placeholder: "It would be cool if I could help add..."
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: |
+        ## What happens next?
+
+        A maintainer will respond within 24-48 hours to:
+        - Answer your questions
+        - Suggest some good issues to work on
+        - Help you with setup if needed
+        - Point you to relevant documentation
+        
+        Don't worry if you're new to this - we're here to help! Every expert was once a beginner. 🚀
+        
+        **Join our [Discord server](https://discord.gg/YzmbnCDkat) for real-time help and community chat!** 
+      
+      
+                    
+        

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

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

.github/workflows/mvp.yml

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

.github/workflows/testing.yml

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

.gitignore

@@ -7,24 +7,17 @@ yarn.lock
 
 .parcel-cache
 .env
+.env.submit
+
+dependency-graph.svg
 
 # Build
 extension.zip
 build/
 dist/
+betterseqtaplus-safari/
 
 .million/
 .vscode/
 
-**/.DS_Store
-# Sentry Config File
-.env.sentry-build-plugin
-
-# Sentry Config File
-.env.sentry-build-plugin
-
-# Sentry Config File
-.env.sentry-build-plugin
-
-# Sentry Config File
-.sentryclirc
+**/.DS_Store

.postcssrc.json

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

.prettierrc

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

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- 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
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- 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
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

CONTRIBUTING.md

@@ -0,0 +1,72 @@
+# Contributing to BetterSEQTA+
+
+Hey there! 👋 Thanks for your interest in contributing to BetterSEQTA+! We're excited to have you join our community of contributors.
+
+## 🚀 New Contributors Start Here!
+
+**Never contributed to an open source project before?** No worries! We've made it super easy to get started:
+
+- **📖 Read our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)** - This walks you through everything step-by-step, from setting up your development environment to making your first pull request.
+- **🏗️ Understand the codebase** with our [Architecture Guide](./docs/ARCHITECTURE.md)
+- **🔧 Having issues?** Check our [Troubleshooting Guide](./docs/TROUBLESHOOTING.md)
+
+We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels that are perfect for beginners!
+
+## Discussion Before Contributing
+
+For significant changes, please first discuss what you'd like to change via:
+- Opening an issue
+- Joining our Discord server
+- Emailing the maintainers
+
+This helps ensure your contribution aligns with the project's goals and saves you time!
+
+## Community
+
+Join our community channels to discuss the project, get help, and connect with other contributors:
+
+- **Discord Server**: [Join our Discord](https://discord.gg/YzmbnCDkat)
+- **GitHub Discussions**: For longer-form conversations
+- **GitHub Issues**: For bug reports and feature requests
+
+## Creating Plugins
+
+If you're interested in creating plugins for BetterSEQTA+, check out our plugin development guides:
+
+- [Creating Your First Plugin](./docs/plugins/creating-plugins.md)
+- [Plugin API Reference](./docs/advanced/plugin-api.md)
+
+## Pull Request Process
+
+1. It is recommended to start by opening an issue to discuss the change you wish to make. This will allow us to discuss the change and ensure it is a good fit for the project.
+2. Fork the repo and create your branch from `main`.
+3. When writing your pull request, make sure to use the pull request template.
+
+### Pull Request Template
+
+```
+## Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+Fixes # (issue)
+
+## Type of change
+
+Please delete options that are not relevant.
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+```
+
+### Issues
+
+#### Create a new issue
+
+If you spot a problem with the readme or code, [search if an issue already exists](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues). If a related issue doesn't exist, you can open a new issue using a relevant [issue form](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues/new).
+
+#### Solve an issue
+
+Scan through our [existing issues](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) to find one that interests you. You can narrow down the search using `labels` as filters. As a general rule, we don’t assign issues to anyone. If you find an issue to work on, you are welcome to open a PR with a fix.

README.md

@@ -11,89 +11,88 @@
   <a target="_blank" href="https://discord.gg/YzmbnCDkat"><img src="https://github.com/SethBurkart123/EvenBetterSEQTA/assets/108050083/23055730-b16e-44c0-9bef-221d8545af92" width="240" style="border-radius:10%;" /></a>
 </p>
 
-## Table of contents
-
-- [Features](#features)
-- [Getting Started](#getting-started)
-
-## Release Videos
-<video autoplay loop muted controls="false" width="33%" src="https://github.com/SethBurkart123/EvenBetterSEQTA/assets/108050083/3084644a-edbc-40e5-b1ad-1fdea4f0ca18"></video>
-
 <div>
   <img src="https://img.shields.io/chrome-web-store/users/afdgaoaclhkhemfkkkonemoapeinchel" />
   <img src="https://img.shields.io/chrome-web-store/rating/afdgaoaclhkhemfkkkonemoapeinchel" />
 </div>
 
+## Table of contents
+
+- [Features](#features)
+- [Creating Custom Themes](#creating-custom-themes)
+- [Getting Started](#getting-started)
+  - [Running Development](#running-development)
+  - [Building for production](#building-for-production)
+  - [Folder Structure](#folder-structure)
+- [Contributors](#contributors)
+- [Credits](#credits)
+- [Star History](#star-history)
+
 ## Features
 
 - Dark mode
-  - Custom Background
+  - Custom Background/Themes
 - Improved Styling/CSS
   - Improved look for SEQTA Learn
 - Custom Home Page including:
   - Daily Lessons
   - Shortcuts
   - Easier Access Notices
+  - Assessments
 - Options to remove certain items from the side menu
+- Grades calculator
+- Fully customisable themes and an official theme store
 - Notification for next lesson (sent 5 minutes before end of the lesson)
 - Browser Support
-  - Chrome Supported
-  - Edge Supported
-  - Brave Supported
-  - Opera Supported
-  - Vivaldi Supported
-  - Firefox (Experimental - available [here](https://addons.mozilla.org/en-US/firefox/addon/betterseqta-plus/))
-  - Safari (Experimental - only available via compilation)
+  - Chrome, Edge, Brave, Opera and other Chromium-Based browsers are supported
+  - Firefox Supported: [here](https://addons.mozilla.org/en-US/firefox/addon/betterseqta-plus/)!
+  - Safari (Experimental and not recommended - only available via compilation)
 
-## Getting started
+## Creating Custom Themes
 
-1. Clone the repository
+If you are looking to create custom themes, I would recommend you start at the official documentation [here](https://betterseqta.gitbook.io/betterseqta-docs). You can see some premade examples along with a compilation script that can be used to allow for CSS frameworks and libraries such as SCSS to be used [here](https://github.com/BetterSEQTA/BetterSEQTA-Theme-Generator).
 
-```
-git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
+Don't worry- if you get stuck feel free to ask around in the [discord](https://discord.gg/YzmbnCDkat). We're open and happy to help out! Happy creating :)
+
+## 🚀 Want to Contribute?
+
+**New contributors welcome!** 🎉 We've made it easy to get started:
+
+- **👋 New to the project?** Start with our [Getting Started Guide](./docs/GETTING_STARTED_CONTRIBUTING.md)
+- **🏗️ Want to understand the code?** Check out our [Architecture Guide](./docs/ARCHITECTURE.md)
+- **🧩 Interested in plugins?** Read our [Plugin Development Guide](./docs/plugins/README.md)
+- **🐛 Found a bug?** Open an [issue](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) or fix it yourself!
+- **💬 Need help?** Join our [Discord community](https://discord.gg/YzmbnCDkat)
+
+We have lots of [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) labels perfect for beginners!
+
+## Quick Development Setup
+
+&nbsp;&nbsp;&nbsp; **1. Fork & Clone**
+```bash
+git clone https://github.com/YOUR_USERNAME/BetterSEQTA-Plus
+cd BetterSEQTA-Plus
 ```
 
-### Running Development
-
-1. Install dependencies
-
-```
-npm install # or your preferred package manager like pnpm or yarn
-```
-
-2. Run the dev script (it updates as you save files)
-
-```
+&nbsp;&nbsp;&nbsp; **2. Install & Run**
+```bash
+npm install --legacy-peer-deps
 npm run dev
 ```
 
-3. Load the extension into chrome
+&nbsp;&nbsp;&nbsp; **3. Load in Browser**
+1. Go to `chrome://extensions`
+2. Enable "Developer mode"
+3. Click "Load unpacked" → Select `dist` folder
+4. Visit a SEQTA page to see it work! 🎉
 
-- Go to `chrome://extensions`
-- Enable developer mode
-- Click `Load unpacked`
-- Select the `dist` folder
+📚 **Need more details?** Check our [detailed setup guide](./docs/GETTING_STARTED_CONTRIBUTING.md#your-first-30-minutes)
 
-Just remember, in order to update changes to the extension, you need to click the refresh button on the extension in `chrome://extensions` whenever anything's changed.
+### Building for Production
 
-### Building for production
-
-1. Install dependencies
-
-```
-npm install # or your preferred package manager like pnpm or yarn
-```
-
-2. Run the build script
-
-```
-npm run build
-```
-
-3. Package it up (optional)
-
-```
-npm run package # this requires 7zip to be installed in order to work
+```bash
+npm run build     # Build for all browsers
+npm run zip       # Package for distribution (requires 7-Zip)
 ```
 
 ## Folder Structure
@@ -102,23 +101,24 @@ The folder structure is as follows:
 
 - The `src` folder contains source files that are compiled to the build directory.
 
-- The `src/interface` folder contains source React files that are required for the Settings page.
+- The `src/plugins` folder contains vital loaders required for BetterSEQTA+ functionality.
+
+- The `src/interface` folder contains source React & Svelte files that are required for the Settings page.
 
 - The `dist` folder is where the compiled code ends up, this is the folder what you need to load into chrome as an unpacked extension for development.
 
-- The `safari` folder is an Xcode project, building it for MacOS does work, IOS needs a few modifications to the manifest to work, but I have managed to get it working. It will give an error, to fix this you need to regenerate it, you can delete the safari folder and then run the command `xcrun safari-web-extension-converter <extension-folder>/dist` and it will automatically generate the xcode project where you are.
-
 ## Contributors
 
 <a href="https://github.com/betterseqta/betterseqta-plus/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=betterseqta/betterseqta-plus" />
 </a>
 
-Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/contribute.md)
+Want to contribute? [Click Here!](https://github.com/BetterSEQTA/BetterSEQTA-Plus/blob/main/CONTRIBUTING.md)
+
 ## Credits
 
-This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development by [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph)
+This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [MEGA-Dawg68](https://github.com/MEGA-Dawg68) and is currently under active development from lead developers [SethBurkart123](https://github.com/SethBurkart123) and [Crazypersonalph](https://github.com/Crazypersonalph) with help from other volunteers.
 
 ## Star History
 
-[![Star History Chart](https://api.star-history.com/svg?repos=BetterSEQTA/BetterSEQTA-Plus&type=Date)](https://star-history.com/#sethburkart123/EvenBetterSEQTA&Date)
+[![Star History Chart](https://api.star-history.com/svg?repos=BetterSEQTA/BetterSEQTA-Plus&type=Date)](https://star-history.com/#BetterSEQTA/BetterSEQTA-Plus&Date)

SECURITY.md

@@ -0,0 +1,16 @@
+# Security Policy
+
+## Supported Versions
+
+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

contribute.md

@@ -1,39 +0,0 @@
-# Contributing
-
-When contributing to this repository, please first discuss the change you wish to make via issue,
-email, or any other method with the owners of this repository before making a change.
-
-## Pull Request Process
-
-1. It is recommended to start by opening an issue to discuss the change you wish to make. This will allow us to discuss the change and ensure it is a good fit for the project.
-2. Fork the repo and create your branch from `master`.
-3. When writing your pull request, make sure to use the pull request template.
-
-### Pull Request Template
-
-```
-## Description
-
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-
-Fixes # (issue)
-
-## Type of change
-
-Please delete options that are not relevant.
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
-```
-
-### Issues
-
-#### Create a new issue
-
-If you spot a problem with the readme or code, [search if an issue already exists](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues). If a related issue doesn't exist, you can open a new issue using a relevant [issue form](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues/new).
-
-#### Solve an issue
-
-Scan through our [existing issues](https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues) to find one that interests you. You can narrow down the search using `labels` as filters. As a general rule, we don’t assign issues to anyone. If you find an issue to work on, you are welcome to open a PR with a fix.

docs/ARCHITECTURE.md

@@ -0,0 +1,235 @@
+# BetterSEQTA+ Architecture
+
+Hey there! 👋 New to the codebase and feeling a bit lost? Don't worry - this guide will help you understand how everything fits together!
+
+## Table of Contents
+
+- [Overview](#overview)
+- [High-Level Architecture](#high-level-architecture)
+- [Core Components](#core-components)
+- [Plugin System](#plugin-system)
+- [File Structure Explained](#file-structure-explained)
+- [Data Flow](#data-flow)
+- [Browser Extension Basics](#browser-extension-basics)
+
+## Overview
+
+BetterSEQTA+ is a browser extension that enhances SEQTA Learn by:
+- Adding new features through a plugin system
+- Providing customizable themes and UI improvements
+- Offering better navigation and user experience
+
+Think of it like this: **SEQTA Learn + BetterSEQTA+ = Enhanced SEQTA Experience**
+
+## High-Level Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    BROWSER EXTENSION                        │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  ┌─────────────────┐    ┌──────────────────┐                │
+│  │  Background     │    │  Content Script  │                │
+│  │  Script         │    │  (SEQTA.ts)      │                │
+│  │                 │    │                  │                │
+│  │  - Settings     │◄───┤  - Page Detection│                │
+│  │  - Storage      │    │  - Plugin Loading│                │
+│  │  - Updates      │    │  - UI Injection  │                │
+│  └─────────────────┘    └──────────────────┘                │
+│                                   │                         │
+│                         ┌─────────▼─────────┐               │
+│                         │   Plugin System   │               │
+│                         │                   │               │
+│                         │  ┌─────────────┐  │               │
+│                         │  │ Built-in    │  │               │
+│                         │  │ Plugins     │  │               │
+│                         │  │             │  │               │
+│                         │  │ - Themes    │  │               │
+│                         │  │ - Search    │  │               │
+│                         │  │ - Timetable │  │               │
+│                         │  │ - etc...    │  │               │
+│                         │  └─────────────┘  │               │
+│                         └───────────────────┘               │
+│                                   │                         │
+│                         ┌─────────▼─────────┐               │
+│                         │   Settings UI     │               │
+│                         │   (Svelte App)    │               │
+│                         │                   │               │
+│                         │  - Plugin Config  │               │
+│                         │  - Theme Creator  │               │
+│                         │  - General Settings│              │
+│                         └───────────────────┘               │
+└─────────────────────────────────────────────────────────────┘
+                                   │
+                         ┌─────────▼─────────┐
+                         │   SEQTA Learn     │
+                         │   Website         │
+                         └───────────────────┘
+```
+
+## Core Components
+
+### 1. Entry Point (`src/SEQTA.ts`)
+This is where it all begins! When you visit a SEQTA page:
+1. Detects if you're on a SEQTA Learn page
+2. Injects our CSS styles
+3. Changes the favicon to BetterSEQTA+ icon
+4. Loads settings from storage
+5. Initializes the plugin system
+
+### 2. Plugin System (`src/plugins/`)
+The heart of BetterSEQTA+! This is what makes it extensible:
+- **Plugin Manager**: Registers and manages all plugins
+- **Built-in Plugins**: Pre-made plugins (themes, search, etc.)
+- **Plugin API**: Provides plugins with tools to interact with SEQTA
+
+### 3. Settings UI (`src/interface/`)
+A Svelte application that lets users:
+- Enable/disable plugins
+- Configure plugin settings
+- Create custom themes
+- Browse the theme store
+
+### 4. Background Script (`src/background.ts`)
+Runs in the background and handles:
+- Extension-wide settings storage
+- Communication between different parts
+- Update notifications
+
+## Plugin System
+
+Our plugin system is what makes BetterSEQTA+ so powerful. Here's how it works:
+
+### Plugin Lifecycle
+```
+Plugin Registration → Settings Loading → Plugin Initialization → Running → Cleanup
+```
+
+### Built-in Plugins Overview
+
+| Plugin | What it does | Files |
+|--------|-------------|-------|
+| **Themes** | Custom CSS themes and backgrounds | `src/plugins/built-in/themes/` |
+| **Global Search** | Search across all SEQTA content | `src/plugins/built-in/globalSearch/` |
+| **Timetable** | Enhanced timetable features | `src/plugins/built-in/timetable/` |
+| **Profile Picture** | Custom profile pictures | `src/plugins/built-in/profilePicture/` |
+| **Animated Background** | Moving background animations | `src/plugins/built-in/animatedBackground/` |
+
+### Creating a Plugin
+Every plugin follows this structure:
+```typescript
+const myPlugin: Plugin = {
+  id: "unique-plugin-id",
+  name: "Human Readable Name",
+  description: "What does this plugin do?",
+  version: "1.0.0",
+  settings: { /* user configurable options */ },
+  run: async (api) => {
+    // Your plugin code goes here!
+  }
+};
+```
+
+## File Structure Explained
+
+```
+src/
+├── SEQTA.ts              # 🚀 Main entry point - start reading here!
+├── background.ts         # 🔧 Background script for extension
+├── manifests/           # 📦 Browser extension manifests
+├── plugins/             # 🧩 Plugin system (the magic happens here!)
+│   ├── core/           # 🏗️  Plugin infrastructure 
+│   ├── built-in/       # 🎁 Pre-made plugins
+│   └── index.ts        # 📋 Plugin registration
+├── interface/          # 🎨 Settings UI (Svelte app)
+│   ├── pages/          # 📄 Settings pages
+│   ├── components/     # 🧱 Reusable UI components
+│   └── main.ts         # 🏠 Settings app entry point
+├── seqta/              # 🔗 SEQTA-specific utilities
+│   ├── main.ts         # 🎯 Core SEQTA modifications
+│   ├── ui/             # 🎨 UI manipulation helpers
+│   └── utils/          # 🛠️  Helper functions
+└── css/                # 💄 Styles and themes
+```
+
+### Where to Start Reading?
+1. **New to the project?** Start with `src/SEQTA.ts`
+2. **Want to understand plugins?** Look at `src/plugins/core/types.ts`
+3. **Want to see a simple plugin?** Check out `src/plugins/built-in/profilePicture/`
+4. **Interested in the UI?** Explore `src/interface/main.ts`
+
+## Data Flow
+
+Here's how data flows through the system:
+
+```
+User visits SEQTA → SEQTA.ts detects page → Loads settings from storage
+                                                        │
+                                                        ▼
+Plugin Manager initializes → Each plugin gets API access → Plugins modify SEQTA
+                                                        │
+                                                        ▼
+User opens settings → Svelte UI loads → Settings changed → Storage updated
+                                                        │
+                                                        ▼
+Storage change detected → Plugins notified → UI updates automatically
+```
+
+## Browser Extension Basics
+
+Never worked on a browser extension before? Here's what you need to know:
+
+### Content Scripts vs Background Scripts
+- **Content Script** (`SEQTA.ts`): Runs on SEQTA pages, can access and modify the page
+- **Background Script** (`background.ts`): Runs in the background, handles storage and messaging
+
+### Manifest Files
+Each browser needs a slightly different manifest file:
+- `manifests/chrome.ts` - Chrome, Edge, Brave
+- `manifests/firefox.ts` - Firefox
+- `manifests/safari.ts` - Safari (experimental)
+
+### Communication
+Different parts of the extension communicate using:
+- `browser.runtime.sendMessage()` - Send messages
+- `browser.storage` - Shared storage, but we have created a custom storage system that is easier to use:
+```ts
+settingsState.[the setting name] = [whatever you want to set it to]
+console.log(settingsState.[the setting name])
+```
+- Custom events for plugin communication
+
+## Development Tips
+
+### Debugging
+1. **Chrome DevTools**: Right-click → Inspect → Console tab
+2. **Extension Console**: `chrome://extensions` → BetterSEQTA+ → "Inspect views: background page"
+3. **Look for logs**: We log everything with `[BetterSEQTA+]` prefix
+
+### Making Changes
+1. Edit code → Save → Browser auto-reloads extension → Refresh SEQTA page
+2. For UI changes: The dev server hot-reloads automatically
+3. For plugin changes: May need to disable/enable the plugin in settings
+
+### Common Gotchas
+- Settings take a moment to load (use `api.settings.loaded` promise)
+- Some SEQTA elements load dynamically (use `api.seqta.onMount()`)
+- Plugin cleanup is important (always return a cleanup function)
+
+## Next Steps
+
+Ready to contribute? Here's what to do next:
+
+1. **Read the code**: Start with `src/SEQTA.ts` and follow the flow
+2. **Try creating a simple plugin**: Follow our [plugin guide](./plugins/README.md)
+3. **Look at existing issues**: Check our [GitHub issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues) for "good first issue" labels
+4. **Join our Discord**: Get help from the community!
+
+## Questions?
+
+Still confused about something? That's totally normal! Here are your options:
+- 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
+- 🐛 Open an issue on GitHub
+- 📧 Email us at betterseqta@betterseqta.com
+
+Remember: **Every expert was once a beginner!** We're here to help you learn and contribute. 🚀 

docs/GETTING_STARTED_CONTRIBUTING.md

@@ -0,0 +1,285 @@
+# Getting Started as a Contributor
+
+Welcome to BetterSEQTA+! 🎉 This guide will walk you through making your first contribution, even if you're completely new to the project.
+
+## Table of Contents
+
+- [Before You Start](#before-you-start)
+- [Your First 30 Minutes](#your-first-30-minutes)
+- [Making Your First Contribution](#making-your-first-contribution)
+- [Types of Contributions](#types-of-contributions)
+- [Finding Something to Work On](#finding-something-to-work-on)
+- [Development Workflow](#development-workflow)
+- [Getting Help](#getting-help)
+
+## Before You Start
+
+### What You'll Need
+- **Node.js** (v16 or higher) - [Download here](https://nodejs.org/)
+- **Git** - [Download here](https://git-scm.com/)
+- **A code editor** - We recommend [VS Code](https://code.visualstudio.com/)
+- **A Chromium browser** (Chrome, Edge, Brave) for testing (recommended, however you can use firefox although it requires being built every time you make a change)
+
+### Helpful Background (but not required!)
+- Basic JavaScript/TypeScript knowledge
+- Some familiarity with HTML/CSS
+- Understanding of browser extensions (we'll teach you!)
+
+**Don't worry if you're missing some of these!** We're happy to help you learn. 🤗
+
+## Your First 30 Minutes
+
+Let's get you up and running quickly:
+
+### 1. Get the Code (3 minutes)
+```bash
+# Fork the repository on GitHub first, then:
+git clone https://github.com/YOUR_USERNAME/BetterSEQTA-plus.git
+cd BetterSEQTA-plus
+```
+
+### 2. Install Dependencies (3 minutes)
+```bash
+npm install --legacy-peer-deps
+```
+
+### 3. Start Development Server (2 minutes)
+```bash
+npm run dev
+```
+
+### 4. Load Extension in Browser (4 minutes)
+1. Open Chrome and go to `chrome://extensions`
+2. Enable "Developer mode" (toggle in top right)
+3. Click "Load unpacked"
+4. Select the `dist` folder in your project
+5. Visit a SEQTA Learn page to see BetterSEQTA+ in action!
+
+### 5. Make a Tiny Change (5 minutes)
+Let's prove everything works:
+1. Open `src/SEQTA.ts`
+2. Find the line that says `"[BetterSEQTA+] Successfully initialised"`
+3. Change it to `"[BetterSEQTA+] Successfully initialised - Hello [YOUR_NAME]!"`
+4. Save the file
+5. Go to `chrome://extensions`, click the refresh icon on BetterSEQTA+
+6. Refresh a SEQTA page and check the browser console (F12) - you should see your message!
+
+### 6. Reset Your Change (3 minutes)
+```bash
+git checkout -- src/SEQTA.ts
+```
+
+**Congratulations! 🎉 You've successfully set up BetterSEQTA+ for development!**
+
+## Making Your First Contribution
+
+### Easy First Contributions
+
+Here are some great starter contributions:
+
+1. **Fix a typo in documentation** - Super easy and always appreciated!
+2. **Improve error messages** - Make them more helpful
+3. **Add comments to code** - Help other contributors understand
+4. **Create a simple plugin** - Follow our plugin guide
+5. **Fix a bug you found** - If you found a bug, fix it!
+
+### Step-by-Step: Your First Pull Request
+
+#### Step 1: Pick an Issue
+- Go to our [Issues page](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
+- Look for labels like:
+  - `good first issue` - Perfect for beginners
+  - `help wanted` - We'd love help with these
+  - `documentation` - Improve our docs
+  - `bug` - Fix something broken
+
+#### Step 2: Claim the Issue
+Comment on the issue saying "I'd like to work on this!" We'll assign it to you.
+
+#### Step 3: Create a Branch
+```bash
+git checkout -b fix-issue-123  # Replace 123 with the issue number
+```
+
+#### Step 4: Make Your Changes
+- Follow the patterns you see in existing code
+- Test your changes thoroughly
+- Keep changes focused and small
+
+#### Step 5: Test Everything
+```bash
+# Test the extension still loads
+npm run dev
+
+# Test in browser
+# 1. Reload extension at chrome://extensions
+# 2. Visit SEQTA page
+# 3. Verify everything still works
+```
+
+#### Step 6: Commit Your Changes
+```bash
+git add .
+git commit -m "Fix issue #123: Brief description of what you fixed"
+```
+
+#### Step 7: Push and Create Pull Request
+```bash
+git push origin fix-issue-123
+```
+
+Then go to GitHub and create a pull request with:
+- **Clear title**: "Fix issue #123: Brief description"
+- **Description**: Explain what you changed and why
+- **Testing**: Describe how you tested it
+
+## Types of Contributions
+
+### 🐛 Bug Fixes
+- Fix broken features
+- Improve error handling
+- Resolve compatibility issues
+
+**Example**: "The theme selector doesn't work on Firefox"
+
+### ✨ New Features
+- Add new plugins
+- Enhance existing functionality
+- Improve user experience
+
+**Example**: "Add keyboard shortcuts for common actions"
+
+### 📚 Documentation
+- Fix typos and unclear explanations
+- Add examples and tutorials
+- Improve code comments
+
+**Example**: "Add more examples to the plugin guide"
+
+### 🎨 Design & UI
+- Improve the settings interface
+- Make things more user-friendly
+- Add animations and polish
+
+**Example**: "Make the theme creator more intuitive"
+
+### 🔧 Technical Improvements
+- Refactor code for clarity
+- Add tests
+- Improve performance
+
+**Example**: "Simplify the plugin loading logic"
+
+## Finding Something to Work On
+
+### Browse Issues by Label
+- [`good first issue`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/good%20first%20issue) - Perfect for beginners
+- [`help wanted`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/help%20wanted) - We need help with these
+- [`documentation`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/documentation) - Improve our docs
+- [`bug`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/bug) - Fix something broken
+- [`enhancement`](https://github.com/BetterSEQTA/BetterSEQTA-plus/labels/enhancement) - Add new features
+
+### Create Your Own Issue
+Found a bug or have an idea? Create an issue first to discuss it!
+
+### Plugin Ideas
+Want to create a plugin? Here are some ideas:
+- **Study Timer**: Track study time across SEQTA pages
+- **Grade Tracker**: Better visualization of grades over time
+- **Quick Notes**: Add notes to any SEQTA page
+- **Homework Reminder**: Smart notifications for upcoming due dates
+- **Custom Shortcuts**: User-defined keyboard shortcuts
+
+## Development Workflow
+
+### Daily Development
+```bash
+# Start working
+git pull origin main
+npm run dev
+
+# Make changes, test, commit
+git add .
+git commit -m "Descriptive commit message"
+
+# Push when ready
+git push origin your-branch-name
+```
+
+### Before Submitting PR
+1. **Test thoroughly** - Make sure nothing breaks
+2. **Check console** - No new errors
+3. **Test in different browsers** - Chrome and Firefox
+4. **Update documentation** - If you changed how something works
+
+### Code Style
+- Use TypeScript where possible
+- Follow existing naming conventions
+- Add comments for complex logic
+- Keep functions small and focused
+
+## Getting Help
+
+### Stuck? Here's How to Get Unstuck
+
+1. **Check the docs** - [Architecture guide](./ARCHITECTURE.md) explains everything
+2. **Search existing issues** - Someone might have had the same problem
+3. **Ask in Discord** - Our community is super helpful
+4. **Create an issue** - If you found a bug or need help
+
+### Discord Community
+Join our [Discord server](https://discord.gg/YzmbnCDkat) for:
+- Real-time help and discussion
+- Collaboration on features
+- Sharing ideas and feedback
+- Getting to know the community
+
+### Code Review Process
+- All contributions need code review
+- We'll provide helpful feedback
+- Don't worry about making mistakes - we're here to help!
+- Reviews usually happen within 24-48 hours
+
+## Common Questions
+
+**Q: I'm new to browser extensions. Is this too advanced for me?**
+A: Not at all! We have lots of beginner-friendly issues, and our plugin system makes it easy to add features without understanding all the browser extension complexities.
+
+**Q: How long does it take to get my first PR merged?**
+A: For simple fixes, usually 1-3 days. For larger features, it might take a week or two as we discuss the best approach.
+
+**Q: I made a mistake in my PR. What do I do?**
+A: No worries! Just push more commits to the same branch and they'll be added to your PR automatically.
+
+**Q: Can I work on multiple issues at once?**
+A: It's better to focus on one issue at a time, especially when starting out. This makes code review easier and reduces conflicts.
+
+**Q: What if I start working on something and get stuck?**
+A: Ask for help! Create a draft PR with what you have so far, and we'll help you figure out the next steps.
+
+## Recognition
+
+All contributors get:
+- Recognition in our README
+- Contributor badge in Discord
+- Our eternal gratitude! 🙏
+
+Significant contributors may also get:
+- Special Discord roles
+- Input on project direction
+- Maintainer status
+
+## Next Steps
+
+Ready to contribute? Here's what to do:
+
+1. ✅ **Set up your development environment** (follow the 30-minute guide above)
+2. 🔍 **Find an issue to work on** (check the "good first issue" label)
+3. 💬 **Join our Discord** and introduce yourself
+4. 🚀 **Make your first contribution** and submit a PR
+
+Remember: **Every expert was once a beginner!** We're excited to help you learn and grow as a contributor. Welcome to the team! 🎉
+
+---
+
+*Questions? Suggestions for improving this guide? Open an issue or message us on Discord!* 

docs/README.md

@@ -0,0 +1,55 @@
+# BetterSEQTA+ Documentation
+
+🚧 DOCS UNDER CONSTRUCTION! 🚧
+
+Welcome to the BetterSEQTA+ documentation! This documentation will help you understand how BetterSEQTA+ works and how to extend it with plugins and new features.
+
+## Table of Contents
+
+### Getting Started
+
+- [Project Overview](./README.md) - This file
+- [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
+- [Getting Started Contributing](./GETTING_STARTED_CONTRIBUTING.md) - **Start here!** Complete beginner-friendly guide
+- [Architecture Guide](./ARCHITECTURE.md) - How BetterSEQTA+ works under the hood
+- [Contributing Guide](../CONTRIBUTING.md) - Official contribution guidelines
+- [Troubleshooting](./TROUBLESHOOTING.md) - Common issues and solutions
+
+### Plugin System
+
+- [Creating Your First Plugin](./plugins/README.md) - A comprehensive, beginner-friendly guide to creating plugins
+- [Plugin API Reference](./plugins/api-reference.md) - Detailed technical documentation of the plugin APIs
+
+## Core Concepts
+
+BetterSEQTA+ is built around several core concepts:
+
+1. **Plugin System**: BetterSEQTA+ uses a plugin system to extend SEQTA with new features. Plugins are self-contained pieces of code that can be enabled or disabled by the user. Check out our [plugin guide](./plugins/README.md) to learn how to create your own!
+
+2. **Type-Safe Settings**: Each plugin can define settings that are type-safe and automatically rendered in the settings UI. The settings system uses TypeScript decorators to make it easy to define settings with proper typing.
+
+3. **Storage API**: Plugins can use the Storage API to persist data between sessions. The Storage API is also type-safe, ensuring that plugins can only access their own data.
+
+4. **SEQTA Integration**: BetterSEQTA+ integrates with SEQTA Learn by injecting code into the page. This allows plugins to modify the SEQTA UI and add new features.
+
+## Getting Help
+
+If you need help with BetterSEQTA+, you can:
+
+- [Open an Issue](https://github.com/SeqtaLearning/betterseqta-plus/issues) - Report bugs or request features
+- [Join the Discord](https://discord.gg/YzmbnCDkat) - Chat with the community
+- [Email the Maintainers](mailto:betterseqta.plus@gmail.com) - Contact the maintainers directly
+
+## Contributing to the Documentation
+
+We welcome contributions to the documentation! If you find something unclear or missing, please open an issue or submit a pull request.
+
+To contribute to the documentation:
+
+1. Fork the repository
+2. Make your changes to the documentation files
+3. Submit a pull request with a clear description of your changes
+
+## License
+
+BetterSEQTA+ is licensed under the [MIT License](../LICENSE).

docs/TROUBLESHOOTING.md

@@ -0,0 +1,348 @@
+# Troubleshooting Guide
+
+Having issues with BetterSEQTA+ development? This guide covers the most common problems and their solutions.
+
+## Table of Contents
+
+- [Installation Issues](#installation-issues)
+- [Development Server Issues](#development-server-issues)
+- [Browser Extension Issues](#browser-extension-issues)
+- [Plugin Development Issues](#plugin-development-issues)
+- [Build Issues](#build-issues)
+- [Still Stuck?](#still-stuck)
+
+## Installation Issues
+
+### ❌ "npm install" fails with peer dependency errors
+
+**Problem**: You see errors about peer dependencies or conflicting packages.
+
+**Solution**:
+```bash
+rm -rf node_modules package-lock.json
+npm install --legacy-peer-deps
+```
+
+### ❌ "Cannot find module" errors
+
+**Problem**: Node.js can't find required packages.
+
+**Solutions**:
+1. **Clear and reinstall**:
+   ```bash
+   rm -rf node_modules
+   npm install --legacy-peer-deps
+   ```
+
+2. **Check Node.js version**:
+   ```bash
+   node --version  # Should be v16 or higher
+   ```
+
+3. **Try with npm cache clean**:
+   ```bash
+   npm cache clean --force
+   npm install --legacy-peer-deps
+   ```
+
+### ❌ Permission errors on macOS/Linux
+
+**Problem**: "EACCES" or permission denied errors.
+
+**Solution**:
+```bash
+sudo chown -R $(whoami) ~/.npm
+sudo chown -R $(whoami) /usr/local/lib/node_modules
+```
+
+## Development Server Issues
+
+### ❌ "npm run dev" fails
+
+**Problem**: Development server won't start.
+
+**Solutions**:
+1. **Check if port is in use**:
+   ```bash
+   lsof -i :5173  # Kill the process using the port
+   ```
+
+2. **Clear dist folder**:
+   ```bash
+   rm -rf dist
+   npm run dev
+   ```
+
+3. **Check for TypeScript errors**:
+   ```bash
+   npx tsc --noEmit  # Check for type errors
+   ```
+
+### ❌ Changes not reflecting in browser
+
+**Problem**: You make code changes but don't see them in the browser.
+
+**Solutions**:
+1. **Reload the extension**:
+   - Go to `chrome://extensions`
+   - Find BetterSEQTA+ and click the refresh icon
+   - Refresh your SEQTA page
+
+2. **Check if dev server is running**:
+   - Look for "Build completed" in your terminal
+   - If not, restart `npm run dev`
+
+3. **Hard refresh the page**:
+   - Press `Ctrl+Shift+R` (or `Cmd+Shift+R` on Mac)
+
+## Browser Extension Issues
+
+### ❌ Extension doesn't load in Chrome
+
+**Problem**: Extension appears in `chrome://extensions` but doesn't work.
+
+**Solutions**:
+1. **Check for errors**:
+   - Go to `chrome://extensions`
+   - Click "Errors" button on BetterSEQTA+
+   - Fix any JavaScript errors shown
+
+2. **Verify manifest**:
+   - Check if `dist/manifest.json` exists
+   - Ensure it has proper structure
+
+3. **Check permissions**:
+   - Extension needs permission to access SEQTA pages
+   - Click "Details" → "Site access" → "On all sites"
+
+### ❌ Extension doesn't appear on SEQTA pages
+
+**Problem**: Extension loads but doesn't modify SEQTA.
+
+**Solutions**:
+1. **Check if you're on a SEQTA Learn page**:
+   - URL should contain "seqta" or "learn"
+   - Page title should include "SEQTA Learn"
+
+2. **Check browser console**:
+   - Press `F12` → Console tab
+   - Look for "[BetterSEQTA+]" messages
+   - If no messages, extension isn't running
+
+3. **Verify page detection**:
+   - Extension only runs on actual SEQTA Learn pages
+   - Test on a real SEQTA instance
+
+### ❌ Settings page won't open
+
+**Problem**: Clicking the extension icon doesn't open settings.
+
+**Solutions**:
+1. **Check popup errors**:
+   - Right-click extension icon → "Inspect popup"
+   - Look for JavaScript errors
+
+2. **Clear extension storage**:
+   ```javascript
+   // In browser console on any page:
+   chrome.storage.local.clear()
+   ```
+
+3. **Reload extension and try again**
+
+## Plugin Development Issues
+
+### ❌ My plugin doesn't appear in settings
+
+**Problem**: Created a plugin but it's not showing up.
+
+**Solutions**:
+1. **Check plugin registration**:
+   - Ensure your plugin is imported in `src/plugins/index.ts`
+   - Verify `pluginManager.registerPlugin(yourPlugin)` is called
+
+2. **Check plugin structure**:
+   ```typescript
+   // Ensure your plugin has all required fields
+   const myPlugin: Plugin = {
+     id: "unique-id",      // Must be unique
+     name: "Display Name",
+     description: "What it does",
+     version: "1.0.0",
+     run: async (api) => {
+       // Your code here
+     }
+   };
+   ```
+
+3. **Check for errors**:
+   - Look in browser console for plugin loading errors
+
+### ❌ Plugin settings not working
+
+**Problem**: Plugin settings don't save or load properly.
+
+**Solutions**:
+1. **Check settings definition**:
+   ```typescript
+   import { defineSettings, booleanSetting } from "@/plugins/core/settingsHelpers";
+   
+   const settings = defineSettings({
+     myOption: booleanSetting({
+       default: true,
+       title: "My Option",
+       description: "What this does"
+     })
+   });
+   ```
+
+2. **Wait for settings to load**:
+   ```typescript
+   run: async (api) => {
+     await api.settings.loaded;  // Wait for settings to load
+     console.log(api.settings.myOption);  // Now you can use settings
+   }
+   ```
+
+### ❌ Plugin API functions not working
+
+**Problem**: `api.seqta.onMount()` or other API functions don't work.
+
+**Solutions**:
+1. **Check selector specificity**:
+   ```typescript
+   // Be specific with selectors
+   api.seqta.onMount(".home-page", (element) => {
+     // Your code
+   });
+   ```
+
+2. **Wait for elements**:
+   ```typescript
+   // Some elements load after page navigation
+   api.seqta.onPageChange((page) => {
+     if (page === "home") {
+       api.seqta.onMount(".home-content", (element) => {
+         // Now element should exist
+       });
+     }
+   });
+   ```
+
+## Build Issues
+
+### ❌ "npm run build" fails
+
+**Problem**: Production build fails with errors.
+
+**Solutions**:
+1. **Check TypeScript errors**:
+   ```bash
+   npx tsc --noEmit
+   ```
+
+2. **Clear cache and rebuild**:
+   ```bash
+   rm -rf dist node_modules
+   npm install --legacy-peer-deps
+   npm run build
+   ```
+
+3. **Check for import errors**:
+   - Ensure all imports use correct paths
+   - Check for missing files
+
+### ❌ Built extension doesn't work
+
+**Problem**: `npm run build` succeeds but extension doesn't work.
+
+**Solutions**:
+1. **Test the built extension**:
+   - Load the `dist` folder as unpacked extension
+   - Check console for errors
+
+2. **Compare with dev version**:
+   - If dev works but build doesn't, there might be a build configuration issue
+
+3. **Check manifest generation**:
+   - Verify `dist/manifest.json` looks correct
+   - Compare with working version
+
+## Common Error Messages
+
+### "Cannot access contents of the URL"
+- **Cause**: Extension permissions issue
+- **Fix**: Go to `chrome://extensions` → BetterSEQTA+ → Details → Site access → "On all sites"
+
+### "Extension context invalidated"
+- **Cause**: Extension was reloaded while page was open
+- **Fix**: Refresh the SEQTA page
+
+### "Uncaught ReferenceError: browser is not defined"
+- **Cause**: Missing webextension-polyfill import
+- **Fix**: Add `import browser from "webextension-polyfill";` at top of file
+
+### "Module not found: Can't resolve '@/...' "
+- **Cause**: TypeScript path mapping issue
+- **Fix**: Check `tsconfig.json` and `vite.config.ts` for path configuration
+
+## Performance Issues
+
+### Extension makes SEQTA slow
+1. **Check for memory leaks**:
+   - Use Chrome DevTools → Performance tab
+   - Look for growing memory usage
+
+2. **Optimize plugin code**:
+   - Remove unnecessary listeners
+   - Clean up intervals/timeouts
+   - Use efficient selectors
+
+3. **Profile your changes**:
+   - Test with extension disabled vs enabled
+   - Identify which plugin is causing issues
+
+## Still Stuck?
+
+If none of these solutions work:
+
+1. **🔍 Search existing issues**: [GitHub Issues](https://github.com/BetterSEQTA/BetterSEQTA-plus/issues)
+
+2. **💬 Ask on Discord**: [Join our server](https://discord.gg/YzmbnCDkat) - fastest way to get help!
+
+3. **📝 Create a new issue**: Include:
+   - Your operating system
+   - Node.js version (`node --version`)
+   - Browser version
+   - Exact error message
+   - Steps to reproduce
+   - What you've already tried
+
+4. **📧 Email us**: betterseqta.plus@gmail.com for urgent issues
+
+## Getting More Debug Info
+
+### Enable verbose logging
+Add this to your plugin's `run` function:
+```typescript
+console.log("[DEBUG] Plugin starting:", api);
+```
+
+### Check extension background page
+1. Go to `chrome://extensions`
+2. Click "Details" on BetterSEQTA+
+3. Click "Inspect views: background page"
+4. Check console for background script errors
+
+### Export debug info
+Run this in browser console on a SEQTA page:
+```javascript
+console.log("Extension info:", {
+  version: chrome.runtime.getManifest().version,
+  url: window.location.href,
+  userAgent: navigator.userAgent,
+  storage: await chrome.storage.local.get()
+});
+```
+
+Remember: **Don't give up!** Every developer faces these issues. The community is here to help, and solving these problems makes you a better developer. 💪 

docs/contributing.md

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

docs/installation.md

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

docs/plugins/EXAMPLE_PLUGIN.md

@@ -0,0 +1,335 @@
+# Example Plugin Template
+
+This is a complete, working example of a simple BetterSEQTA+ plugin. You can copy this code and modify it to create your own plugin!
+
+## What This Example Does
+
+This plugin adds a friendly welcome message to the SEQTA homepage and lets users customize the message through settings.
+
+## Complete Plugin Code
+
+Create a new file in `src/plugins/built-in/my-first-plugin/index.ts`:
+
+```typescript
+import type { Plugin } from "@/plugins/core/types";
+import { BasePlugin } from "@/plugins/core/settings";
+import { 
+  defineSettings, 
+  booleanSetting, 
+  stringSetting 
+} from "@/plugins/core/settingsHelpers";
+import { Setting } from "@/plugins/core/settingsHelpers";
+
+// Define the plugin settings
+const settings = defineSettings({
+  enabled: booleanSetting({
+    default: true,
+    title: "Show Welcome Message",
+    description: "Display a welcome message on the SEQTA homepage"
+  }),
+  customMessage: stringSetting({
+    default: "Welcome to SEQTA! 🎉",
+    title: "Custom Message",
+    description: "The message to display on the homepage",
+    maxLength: 100
+  }),
+  showEmoji: booleanSetting({
+    default: true,
+    title: "Show Emoji",
+    description: "Include emojis in the welcome message"
+  })
+});
+
+// Create settings class
+class MyFirstPluginSettings extends BasePlugin<typeof settings> {
+  @Setting(settings.enabled)
+  enabled!: boolean;
+
+  @Setting(settings.customMessage)
+  customMessage!: string;
+
+  @Setting(settings.showEmoji)
+  showEmoji!: boolean;
+}
+
+// Create settings instance
+const settingsInstance = new MyFirstPluginSettings();
+
+// Define the plugin
+const myFirstPlugin: Plugin<typeof settings> = {
+  id: "my-first-plugin",
+  name: "My First Plugin",
+  description: "Adds a customizable welcome message to the SEQTA homepage",
+  version: "1.0.0",
+  
+  // Link our settings
+  settings: settingsInstance.settings,
+  
+  // Mark as beta (optional)
+  beta: true,
+  
+  // Add some CSS styles (optional)
+  styles: `
+    .my-plugin-welcome {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 20px;
+      border-radius: 12px;
+      margin: 20px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      text-align: center;
+      font-size: 18px;
+      animation: slideIn 0.5s ease-out;
+    }
+    
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    
+    .my-plugin-welcome .close-btn {
+      float: right;
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      color: white;
+      padding: 5px 10px;
+      border-radius: 20px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+    
+    .my-plugin-welcome .close-btn:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  `,
+  
+  // Main plugin function
+  run: async (api) => {
+    console.log("[My First Plugin] Starting up! 🚀");
+    
+    // Wait for settings to load
+    await api.settings.loaded;
+    
+    let welcomeElement: HTMLElement | null = null;
+    
+    // Function to create the welcome message
+    const createWelcomeMessage = () => {
+      // Only show if enabled in settings
+      if (!api.settings.enabled) {
+        return;
+      }
+      
+      // Remove existing message if it exists
+      if (welcomeElement) {
+        welcomeElement.remove();
+      }
+      
+      // Create the message element
+      welcomeElement = document.createElement("div");
+      welcomeElement.className = "my-plugin-welcome";
+      
+      // Build the message content
+      let message = api.settings.customMessage;
+      if (!api.settings.showEmoji) {
+        // Remove emojis if disabled
+        message = message.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu, '');
+      }
+      
+      welcomeElement.innerHTML = `
+        <button class="close-btn" onclick="this.parentElement.remove()">×</button>
+        <div>${message}</div>
+        <small style="opacity: 0.8; margin-top: 10px; display: block;">
+          Powered by My First Plugin
+        </small>
+      `;
+      
+      return welcomeElement;
+    };
+    
+    // Function to add message to homepage
+    const addToHomepage = () => {
+      api.seqta.onMount(".home-page, .dashboard, [class*='home']", (homePage) => {
+        console.log("[My First Plugin] Found homepage, adding welcome message");
+        
+        const message = createWelcomeMessage();
+        if (message) {
+          // Add to the top of the homepage
+          homePage.insertBefore(message, homePage.firstChild);
+        }
+      });
+    };
+    
+    // Add message when plugin starts
+    addToHomepage();
+    
+    // Re-add message when user navigates to homepage
+    api.seqta.onPageChange((page) => {
+      console.log("[My First Plugin] Page changed to:", page);
+      if (page.includes("home") || page.includes("dashboard")) {
+        // Small delay to let the page load
+        setTimeout(addToHomepage, 500);
+      }
+    });
+    
+    // Listen for settings changes and update the message
+    api.settings.onChange("enabled", (enabled) => {
+      console.log("[My First Plugin] Enabled setting changed:", enabled);
+      if (enabled) {
+        addToHomepage();
+      } else if (welcomeElement) {
+        welcomeElement.remove();
+        welcomeElement = null;
+      }
+    });
+    
+    api.settings.onChange("customMessage", (newMessage) => {
+      console.log("[My First Plugin] Message changed:", newMessage);
+      if (welcomeElement && api.settings.enabled) {
+        // Update existing message
+        addToHomepage();
+      }
+    });
+    
+    api.settings.onChange("showEmoji", (showEmoji) => {
+      console.log("[My First Plugin] Show emoji changed:", showEmoji);
+      if (welcomeElement && api.settings.enabled) {
+        // Update existing message
+        addToHomepage();
+      }
+    });
+    
+    // Return cleanup function (called when plugin is disabled)
+    return () => {
+      console.log("[My First Plugin] Cleaning up...");
+      if (welcomeElement) {
+        welcomeElement.remove();
+        welcomeElement = null;
+      }
+    };
+  }
+};
+
+export default myFirstPlugin;
+```
+
+## How to Use This Example
+
+### Step 1: Create the Plugin File
+1. Create a new folder: `src/plugins/built-in/my-first-plugin/`
+2. Create `index.ts` in that folder
+3. Copy the code above into `index.ts`
+
+### Step 2: Register the Plugin
+Add this to `src/plugins/index.ts`:
+
+```typescript
+// Add this import at the top
+import myFirstPlugin from "./built-in/my-first-plugin";
+
+// Add this line where other plugins are registered
+pluginManager.registerPlugin(myFirstPlugin);
+```
+
+### Step 3: Test It
+1. Run `npm run dev`
+2. Reload your extension in Chrome
+3. Visit a SEQTA page
+4. You should see your welcome message!
+5. Open BetterSEQTA+ settings to customize it
+
+## Key Concepts Explained
+
+### 1. Plugin Structure
+```typescript
+const myPlugin: Plugin = {
+  id: "unique-id",           // Must be unique across all plugins
+  name: "Display Name",      // Shown in settings
+  description: "What it does", // Shown in settings
+  version: "1.0.0",         // Plugin version
+  settings: settingsObject, // User-configurable options
+  styles: "/* CSS here */", // Optional CSS styles
+  run: async (api) => {     // Main plugin code
+    // Your code here
+  }
+};
+```
+
+### 2. Settings System
+```typescript
+// Define what settings your plugin has
+const settings = defineSettings({
+  myOption: booleanSetting({
+    default: true,
+    title: "My Option",
+    description: "What this option does"
+  })
+});
+
+// Use in your plugin
+if (api.settings.myOption) {
+  // Do something
+}
+```
+
+### 3. SEQTA Integration
+```typescript
+// Wait for elements to appear
+api.seqta.onMount(".some-selector", (element) => {
+  // Modify the element
+});
+
+// Detect page changes
+api.seqta.onPageChange((page) => {
+  if (page === "home") {
+    // User navigated to homepage
+  }
+});
+```
+
+### 4. Cleanup
+Always return a cleanup function to remove your changes when the plugin is disabled:
+
+```typescript
+run: async (api) => {
+  // Add your features
+  
+  return () => {
+    // Remove your features
+  };
+}
+```
+
+## Customization Ideas
+
+Want to modify this example? Here are some ideas:
+
+1. **Change the styling**: Modify the CSS to use different colors, animations, or layouts
+2. **Add more settings**: Number settings, select dropdowns, hotkeys
+3. **Different trigger**: Show on different pages, or based on time of day
+4. **Add interactions**: Buttons that do things when clicked
+5. **Store data**: Use `api.storage` to remember user preferences
+6. **Communicate with other plugins**: Use `api.events` to send/receive events
+
+## Next Steps
+
+Once you've got this working:
+
+1. **Experiment**: Try changing things and see what happens
+2. **Read other plugins**: Look at the built-in plugins for inspiration
+3. **Check the API docs**: Learn about all available API functions
+4. **Share your creation**: Show it off in Discord!
+
+## Need Help?
+
+- 💬 Ask in our [Discord server](https://discord.gg/YzmbnCDkat)
+- 📚 Read our [Plugin Development Guide](./README.md)
+- 🐛 Check the [Troubleshooting Guide](../TROUBLESHOOTING.md)
+- 📝 Open an issue on GitHub
+
+Happy coding! 🎉 

docs/plugins/README.md

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

docs/plugins/api-reference.md

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

jest.config.js

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

lib/base64loader.ts

@@ -0,0 +1,49 @@
+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 mimeType = mime.lookup(filePath);
+    const dataURL = `data:${mimeType};base64,${data}`;
+
+    return `export default '${dataURL}';`;
+  },
+};

lib/closePlugin.ts

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

lib/createManifest.ts

@@ -0,0 +1,46 @@
+import type { Browser, BuildTarget, Manifest } from "./types";
+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,
+ *                            compatible with `chrome.runtime.ManifestV3` as defined by the {@link Manifest} type.
+ * @param {AnyCase<Browser>} browser The target browser identifier (e.g., 'chrome', 'firefox', 'CHROME').
+ *                                   Refers to the {@link Browser} type, allowing for flexible casing.
+ * @returns {BuildTarget} An object that pairs the `manifest` with its target `browser`.
+ *                        The structure is `{ manifest: Manifest; browser: AnyCase<Browser>; }`
+ *                        as defined by the {@link BuildTarget} type.
+ */
+export function createManifest(
+  manifest: Manifest,
+  browser: AnyCase<Browser>,
+): BuildTarget {
+  return {
+    manifest,
+    browser,
+  };
+}
+
+/**
+ * Defines a base manifest object.
+ * This function is typically used to establish a common, shared foundation for an extension's manifest
+ * (compatible with `chrome.runtime.ManifestV3` as per the {@link Manifest} type).
+ * This base can then be extended or modified for different browsers or specific build configurations.
+ * For example, you might define core permissions and properties here, and then add
+ * browser-specific keys in subsequent steps.
+ *
+ * @export
+ * @param {Manifest} manifest The core manifest data to be used as a base.
+ *                            This should conform to the {@link Manifest} type structure.
+ * @returns {Manifest} The provided manifest object, intended to serve as a reusable base.
+ */
+export function createManifestBase(manifest: Manifest): Manifest {
+  return manifest;
+}

lib/inlineWorker.ts

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

lib/publish.js

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

lib/touchGlobalCSS.ts

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

lib/types.ts

@@ -0,0 +1,240 @@
+import type { ManifestV3Export } from "@crxjs/vite-plugin";
+import { type AnyCase, createEnum, ObjectValues } from "./utils";
+
+/**
+ * Enumerates supported JavaScript frameworks for project generation or configuration.
+ */
+export const FrameworkEnum = {
+  React: "React",
+  Vanilla: "Vanilla",
+  Preact: "Preact",
+  Lit: "Lit",
+  Svelte: "Svelte",
+  Vue: "Vue",
+} as const;
+
+/**
+ * Enumerates supported web browsers, typically for targeting builds or configurations.
+ */
+export const BrowserEnum = {
+  Chrome: "Chrome",
+  Brave: "Brave",
+  Opera: "Opera",
+  Edge: "Edge",
+  Firefox: "Firefox",
+  Safari: "Safari",
+} 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",
+  JavaScript: "JavaScript",
+} as const;
+
+/**
+ * Enumerates supported styling options or libraries.
+ */
+export const StyleEnum = {
+  Tailwind: "Tailwind",
+} as const;
+
+/**
+ * Enumerates supported package managers.
+ */
+export const PackageManagerEnum = {
+  Bun: "Bun",
+  PnPm: "PnPm",
+  Npm: "Npm",
+  Yarn: "Yarn",
+} as const;
+
+/**
+ * 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;
+      strict_min_version?: string;
+      strict_max_version?: string;
+    };
+  };
+};
+
+/**
+ * Represents the structure of a Chrome Manifest V3 file.
+ * This type is an alias for `ManifestV3Export` from the `@crxjs/vite-plugin`,
+ * which provides a comprehensive definition for Chrome extension manifests.
+ */
+export type Manifest = ManifestV3Export;
+
+/** Alias for the `icons` property within a Chrome Manifest V3. */
+export type ManifestIcons = chrome.runtime.ManifestIcons;
+/** Alias for the `background` property within a Chrome Manifest V3. */
+export type ManifestBackground = chrome.runtime.ManifestV3["background"];
+/** Alias for the `content_scripts` property within a Chrome Manifest V3. */
+export type ManifestContentScripts =
+  chrome.runtime.ManifestV3["content_scripts"];
+/** Alias for the `web_accessible_resources` property within a Chrome Manifest V3. */
+export type ManifestWebAccessibleResources =
+  chrome.runtime.ManifestV3["web_accessible_resources"];
+/** Alias for the `commands` property within a Chrome Manifest V3. */
+export type ManifestCommands = chrome.runtime.ManifestV3["commands"];
+/** Alias for the `action` property (or `browser_action`/`page_action`) within a Chrome Manifest V3. */
+export type ManifestAction = chrome.runtime.ManifestV3["action"];
+/** Alias for the `permissions` property within a Chrome Manifest V3. */
+export type ManifestPermissions = chrome.runtime.ManifestV3["permissions"];
+/** Alias for the `options_ui` property within a Chrome Manifest V3. */
+export type ManifestOptionsUI = chrome.runtime.ManifestV3["options_ui"];
+/** Alias for the `chrome_url_overrides` property within a Chrome Manifest V3. */
+export type ManifestURLOverrides =
+  chrome.runtime.ManifestV3["chrome_url_overrides"];
+
+/**
+ * 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>;
+};
+
+/**
+ * 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;
+  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";
+  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;
+  url?: string;
+  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;
+  email?: string;
+}
+
+/**
+ * A string literal union type representing supported browser names, derived from the values of `BrowserEnum`.
+ * e.g., "Chrome" | "Firefox" | ...
+ */
+export type Browser = ObjectValues<typeof BrowserEnum>;
+
+/**
+ * A constant intended to provide access to browser names, potentially in various casings.
+ * Its type `AnyCase<Browser>` suggests it can be used where case-insensitivity for browser names is needed.
+ * The `createEnum(BrowserEnum)` call aims to produce a representation of browser names from `BrowserEnum`.
+ * Note: `createEnum` from `lib/utils.ts` has a declared return type of `ObjectValues<T>` (a union of values),
+ * while its implementation uses `Object.values()` which returns an array. This constant will hold the
+ * runtime array value, but its JSDoc type refers to the more restrictive `AnyCase<Browser>` union type.
+ */
+export const Browser: AnyCase<Browser> = createEnum(BrowserEnum);
+
+/**
+ * A string literal union type representing supported package managers, derived from the values of `PackageManagerEnum`.
+ * e.g., "Bun" | "PnPm" | "Npm" | "Yarn"
+ */
+export type PackageManager = ObjectValues<typeof PackageManagerEnum>;
+/**
+ * A constant intended to provide access to package manager names, potentially in various casings.
+ * Its type `AnyCase<PackageManager>` suggests it can be used where case-insensitivity for package manager names is needed.
+ * Utilizes `createEnum(PackageManagerEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
+export const PackageManager: AnyCase<PackageManager> =
+  createEnum(PackageManagerEnum);
+
+/**
+ * A string literal union type representing supported JavaScript frameworks, derived from the values of `FrameworkEnum`.
+ * e.g., "React" | "Vanilla" | ...
+ */
+export type Framework = ObjectValues<typeof FrameworkEnum>;
+/**
+ * A constant intended to provide access to framework names, potentially in various casings.
+ * Its type `AnyCase<Framework>` suggests it can be used where case-insensitivity for framework names is needed.
+ * Utilizes `createEnum(FrameworkEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
+export const Framework: AnyCase<Framework> = createEnum(FrameworkEnum);
+
+/**
+ * A string literal union type representing supported styling options, derived from the values of `StyleEnum`.
+ * e.g., "Tailwind"
+ */
+export type Style = ObjectValues<typeof StyleEnum>;
+/**
+ * A constant intended to provide access to style option names, potentially in various casings.
+ * Its type `AnyCase<Style>` suggests it can be used where case-insensitivity for style names is needed.
+ * Utilizes `createEnum(StyleEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
+export const Style: AnyCase<Style> = createEnum(StyleEnum);
+
+/**
+ * A string literal union type representing supported programming languages, derived from the values of `LanguageEnum`.
+ * e.g., "TypeScript" | "JavaScript"
+ */
+export type Language = ObjectValues<typeof LanguageEnum>;
+/**
+ * A constant intended to provide access to programming language names, potentially in various casings.
+ * Its type `AnyCase<Language>` suggests it can be used where case-insensitivity for language names is needed.
+ * Utilizes `createEnum(LanguageEnum)`. Refer to notes on `Browser` constant regarding `createEnum` behavior.
+ */
+export const Language: AnyCase<Language> = createEnum(LanguageEnum);

lib/utils.ts

@@ -0,0 +1,84 @@
+/**
+ * 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>;
+}
+
+/**
+ * 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>;
+
+/**
+ * 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>;
+
+/**
+ * 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];
+};

manifest.firefox.json

@@ -1,32 +0,0 @@
-{
-  "manifest_version": 3,
-  "name": "BetterSEQTA+",
-  "version": "3.2.6",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, and incorporate a plethora of new features!",
-  "icons": {
-    "32": "src/resources/icons/icon-32.png",
-    "48": "src/resources/icons/icon-48.png",
-    "64": "src/resources/icons/icon-64.png"
-  },
-  "action": {
-    "browser_style": true,
-    "default_popup": "src/interface/index.html#settings",
-    "default_icon": {
-      "32": "src/resources/icons/icon-32.png",
-      "48": "src/resources/icons/icon-48.png",
-      "64": "src/resources/icons/icon-64.png"
-    }
-  },
-  "permissions": ["tabs", "notifications", "storage", "activeTab", "scripting"],
-  "host_permissions": ["<all_urls>"],
-  "background": {
-    "scripts": ["src/background.ts"]
-  },
-  "content_scripts": [
-    {
-      "matches": ["*://*/*"],
-      "js": ["src/SEQTA.ts"],
-      "run_at": "document_start"
-    }
-  ]
-}

manifest.json

@@ -1,46 +0,0 @@
-{
-  "manifest_version": 3,
-  "name": "BetterSEQTA+",
-  "version": "3.3.0",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, and incorporate a plethora of new features!",
-  "icons": {
-    "32": "src/resources/icons/icon-32.png",
-    "48": "src/resources/icons/icon-48.png",
-    "64": "src/resources/icons/icon-64.png"
-  },
-  "action": {
-    "browser_style": true,
-    "default_popup": "src/interface/index.html#settings",
-    "default_icon": {
-      "32": "src/resources/icons/icon-32.png",
-      "48": "src/resources/icons/icon-48.png",
-      "64": "src/resources/icons/icon-64.png"
-    }
-  },
-  "permissions": ["tabs", "notifications", "storage", "scripting"],
-  "host_permissions": ["https://newsapi.org/", "*://*/*"],
-  "background": {
-    "service_worker": "src/background.ts"
-  },
-  "content_scripts": [
-    {
-      "matches": ["*://*/*"],
-      "js": ["src/SEQTA.ts"],
-      "run_at": "document_start"
-    }
-  ],
-  "web_accessible_resources": [
-    {
-      "resources": ["src/interface/index.html"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["src/seqta/ui/background/background.html"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["*://*/*"],
-      "matches": ["*://*/*"]
-    }
-  ]
-}

package.json

@@ -1,15 +1,22 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.2.6",
+  "version": "3.4.9",
   "type": "module",
-  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, and incorporate a plethora of new features!",
+  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
-    "dev": "vite dev",
-    "dev:firefox": "VITE_TARGET=firefox vite build --watch",
-    "build": "vite build",
-    "build:firefox": "VITE_TARGET=firefox vite build",
-    "package": "rimraf ./dist/*.map && 7z a -tzip extension.zip ./dist/*"
+    "dev": "cross-env MODE=chrome vite dev",
+    "dev:firefox": "cross-env MODE=firefox vite build --watch",
+    "build": "cross-env MODE=chrome vite build && cross-env MODE=firefox vite build",
+    "build:chrome": "cross-env MODE=chrome vite build",
+    "build:firefox": "cross-env MODE=firefox vite build",
+    "build:safari": "cross-env MODE=safari vite build",
+    "build:dev": "cross-env MODE=chrome SOURCEMAP=true vite build && cross-env MODE=firefox SOURCEMAP=true vite build",
+    "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
+    "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
+    "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
+    "publish": "bun lib/publish.js --b",
+    "zip": "bedframe zip"
   },
   "targets": {
     "prod": {
@@ -19,64 +26,82 @@
     }
   },
   "keywords": [],
-  "author": "",
+  "author": {
+    "name": "SethBurkart123",
+    "email": "betterseqta.plus@gmail.com",
+    "url": "https://github.com/BetterSEQTA/BetterSEQTA-plus"
+  },
   "license": "MIT",
   "devDependencies": {
-    "@crxjs/vite-plugin": "^2.0.0-beta.23",
+    "@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",
     "@types/mime-types": "^2.1.4",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "eslint": "^8.56.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "cross-env": "^7.0.3",
+    "dependency-cruiser": "^16.10.0",
+    "eslint": "9.22.0",
+    "glob": "^11.0.1",
     "mime-types": "^2.1.35",
-    "parcel": "^2.11.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.5.3",
     "process": "^0.11.10",
-    "sass": "^1.70.0",
-    "sass-loader": "^13.3.3",
-    "url": "^0.11.3"
+    "publish-browser-extension": "^3.0.0",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
+    "semver": "^7.7.1",
+    "tailwindcss": "3",
+    "url": "^0.11.4"
   },
   "dependencies": {
-    "@blocknote/core": "^0.14.1",
-    "@blocknote/mantine": "^0.14.1",
-    "@blocknote/react": "^0.14.1",
-    "@codemirror/lang-less": "^6.0.2",
-    "@heroicons/react": "^2.1.3",
-    "@million/lint": "latest",
-    "@tailwindcss/forms": "^0.5.7",
-    "@types/color": "^3.0.6",
-    "@types/dompurify": "^3.0.5",
-    "@types/lodash": "^4.17.4",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@types/sortablejs": "^1.15.7",
-    "@types/uuid": "^9.0.8",
-    "@types/webextension-polyfill": "^0.10.7",
-    "@uiw/codemirror-extensions-color": "^4.21.25",
-    "@uiw/codemirror-theme-github": "^4.21.25",
-    "@uiw/react-codemirror": "^4.21.25",
-    "autoprefixer": "^10.4.17",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "dompurify": "^3.0.8",
-    "framer-motion": "^11.0.25",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/language": "^6.10.8",
+    "@codemirror/search": "^6.5.10",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.4",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/chrome": "^0.0.308",
+    "@types/color": "^4.2.0",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.13.10",
+    "@types/sortablejs": "^1.15.8",
+    "@types/uuid": "^10.0.0",
+    "@types/webextension-polyfill": "^0.12.3",
+    "@uiw/codemirror-extensions-color": "^4.23.10",
+    "@uiw/codemirror-theme-github": "^4.23.10",
+    "autoprefixer": "^10.4.21",
+    "canvas-confetti": "^1.9.3",
+    "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",
+    "idb": "^8.0.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "million": "latest",
-    "motion": "^10.17.0",
-    "react": "^18.2.0",
-    "react-best-gradient-color-picker": "3.0.5",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.13",
-    "react-router-dom": "^6.22.0",
-    "react-toastify": "^10.0.5",
-    "rimraf": "^5.0.5",
-    "sortablejs": "^1.15.2",
-    "swiper": "latest",
-    "tailwindcss": "^3.4.1",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
-    "uuid": "^9.0.1",
-    "vite": "^5.2.2",
-    "webextension-polyfill": "^0.10.0"
+    "mathjs": "^14.4.0",
+    "million": "^3.1.11",
+    "motion": "^12.4.12",
+    "postcss": "^8.5.3",
+    "react": "17",
+    "react-best-gradient-color-picker": "3.0.11",
+    "react-dom": "17",
+    "rss-parser": "^3.13.0",
+    "sortablejs": "^1.15.6",
+    "svelte": "^5.22.6",
+    "typescript": "^5.8.2",
+    "uuid": "^11.1.0",
+    "vite": "^6.2.1",
+    "webextension-polyfill": "^0.12.0"
   }
 }

src/background.ts

@@ -1,236 +1,134 @@
-import browser from 'webextension-polyfill'
-import { SettingsState } from "./types/storage";
-import { applyYoutubeStyles } from './seqta/ui/VideoLoader';
-
-export const openDB = () => {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open('MyDatabase', 1);
-
-    request.onupgradeneeded = (event: any) => {
-      const db = event.target.result;
-      db.createObjectStore('backgrounds', { keyPath: 'id' });
-    };
-
-    request.onsuccess = () => {
-      resolve(request.result);
-    };
-
-    request.onerror = (event: any) => {
-      reject('Error opening database: ' + event.target.errorCode);
-    };
-  });
-};
-
-export const writeData = async (type: any, data: any) => {
-  const db: any = await openDB();
-
-  const tx = db.transaction('backgrounds', 'readwrite');
-  const store = tx.objectStore('backgrounds');
-  const request = await store.put({ id: 'customBackground', type, data });
-
-  return request.result;
-};
-
-export const readData = () => {
-  return new Promise((resolve, reject) => {
-    openDB()
-      .then((db: any) => {
-        const tx = db.transaction('backgrounds', 'readonly');
-        const store = tx.objectStore('backgrounds');
-
-        // Retrieve the custom background
-        const getRequest = store.get('customBackground');
-
-        // Attach success and error event handlers
-        getRequest.onsuccess = function(event: any) {
-          resolve(event.target.result);
-        };
-
-        getRequest.onerror = function(event: any) {
-          console.error('An error occurred:', event);
-          reject(event);
-        };
-      })
-      .catch(error => {
-        console.error('An error occurred:', error);
-        reject(error);
-      });
-  });
-};
+import browser from "webextension-polyfill";
+import type { SettingsState } from "@/types/storage";
+import { fetchNews } from "./background/news";
 
 function reloadSeqtaPages() {
-  const result = browser.tabs.query({})
-    function open (tabs: any) {
+  const result = browser.tabs.query({});
+  function open(tabs: any) {
     for (let tab of tabs) {
-      if (tab.title.includes('SEQTA Learn')) {
+      if (tab.title.includes("SEQTA Learn")) {
         browser.tabs.reload(tab.id);
       }
     }
   }
-  result.then(open, console.error)
+  result.then(open, console.error);
 }
 
-// Main message listener
-browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse: any) => {
-  switch (request.type) {
-  case 'reloadTabs':
-    reloadSeqtaPages();
-    break;
-  
-  case 'extensionPages':
-    browser.tabs.query({}).then(function (tabs) {
-      for (let tab of tabs) {
-        if (tab.url?.includes('chrome-extension://')) {
-          browser.tabs.sendMessage(tab.id!, request);
-        }
-      }
-    });
-    break;
-  
-  case 'currentTab':
-    browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
-      browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
-        sendResponse(response);
-      });
-    });
-    return true;
-  
-  case 'githubTab':
-    browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
-    break;
-    
-  case 'setDefaultStorage':
-    SetStorageValue(DefaultValues);
-    break;
+// @ts-ignore
+browser.runtime.onMessage.addListener(
+  (request: any, _: any, sendResponse: (response?: any) => void) => {
+    switch (request.type) {
+      case "reloadTabs":
+        reloadSeqtaPages();
+        break;
 
-  case 'sendNews':
-    const date = new Date();
+      case "extensionPages":
+        browser.tabs.query({}).then(function (tabs) {
+          for (let tab of tabs) {
+            if (tab.url?.includes("chrome-extension://")) {
+              browser.tabs.sendMessage(tab.id!, request);
+            }
+          }
+        });
+        break;
 
-    const from =
-      date.getFullYear() +
-      '-' +
-      (date.getMonth() + 1) +
-      '-' +
-      (date.getDate() - 5);
+      case "currentTab":
+        browser.tabs
+          .query({ active: true, currentWindow: true })
+          .then(function (tabs) {
+            browser.tabs
+              .sendMessage(tabs[0].id!, request)
+              .then(function (response) {
+                sendResponse(response);
+              });
+          });
+        return true;
 
-    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
+      case "githubTab":
+        browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
+        break;
 
-    GetNews(sendResponse, url);
-    return true;
+      case "setDefaultStorage":
+        SetStorageValue(getDefaultValues());
+        break;
 
-  case 'youtubeIframe':
-    const { hideControls } = request;
+      case "sendNews":
+        fetchNews(request.source ?? "australia", sendResponse);
+        return true;
 
-    browser.scripting.executeScript({
-      target: { tabId: _sender.tab.id, allFrames: true },
-      func: applyYoutubeStyles,
-      args: [hideControls]
-    });
-    break;
-      
-  default:
-    console.log('Unknown request type');
-  }
-});
+      default:
+        console.log("Unknown request type");
+    }
 
-function GetNews(sendResponse: any, url: string) {
-  fetch(url)
-    .then((result) => result.json())
-    .then((response) => {
-      if (response.code == 'rateLimited') {
-        GetNews(sendResponse, url += '%00');
-      } else {
-        sendResponse({ news: response });
-      }
-    });
-}
-
-const DefaultValues: SettingsState = {
-  onoff: true,
-  animatedbk: true,
-  bksliderinput: "50",
-  transparencyEffects: false,
-  lessonalert: true,
-  notificationcollector: true,
-  defaultmenuorder: [],
-  menuitems: {
-    assessments: { toggle: true },
-    courses: { toggle: true },
-    dashboard: { toggle: true },
-    documents: { toggle: true },
-    forums: { toggle: true },
-    goals: { toggle: true },
-    home: { toggle: true },
-    messages: { toggle: true },
-    myed: { toggle: true },
-    news: { toggle: true },
-    notices: { toggle: true },
-    portals: { toggle: true },
-    reports: { toggle: true },
-    settings: { toggle: true },
-    timetable: { toggle: true },
-    welcome: { toggle: true },
+    return false;
   },
-  menuorder: [],
-  subjectfilters: {},
-  selectedTheme: '',
-  selectedColor: 'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)',
-  originalSelectedColor: '',
-  DarkMode: true,
-  animations: true,
-  defaultPage: 'home',
-  shortcuts: [
-    {
-      name: 'YouTube',
-      enabled: false,
+);
+
+function detectLowEndDevice(): boolean {
+  // Check for low-end hardware indicators
+  const lowCoreCount = navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4;
+  const lowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory <= 2;
+  
+  return lowCoreCount || lowMemory;
+}
+
+function getDefaultValues(): SettingsState {
+  const isLowEndDevice = detectLowEndDevice();
+
+  return {
+    onoff: true,
+    animatedbk: true,
+    bksliderinput: "50",
+    transparencyEffects: false,
+    lessonalert: true,
+    defaultmenuorder: [],
+    menuitems: {
+      assessments: { toggle: true },
+      courses: { toggle: true },
+      dashboard: { toggle: true },
+      documents: { toggle: true },
+      forums: { toggle: true },
+      goals: { toggle: true },
+      home: { toggle: true },
+      messages: { toggle: true },
+      myed: { toggle: true },
+      news: { toggle: true },
+      notices: { toggle: true },
+      portals: { toggle: true },
+      reports: { toggle: true },
+      settings: { toggle: true },
+      timetable: { toggle: true },
+      welcome: { toggle: true },
     },
-    {
-      name: 'Outlook',
-      enabled: true,
-    },
-    {
-      name: 'Office',
-      enabled: true,
-    },
-    {
-      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: [],
-};
+    menuorder: [],
+    subjectfilters: {},
+    selectedTheme: "",
+    selectedColor:
+      "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
+    originalSelectedColor: "",
+    DarkMode: true,
+    animations: !isLowEndDevice,
+    assessmentsAverage: true,
+    defaultPage: "home",
+    shortcuts: [
+      {
+        name: "Outlook",
+        enabled: true,
+      },
+      {
+        name: "Office",
+        enabled: true,
+      },
+      {
+        name: "Google",
+        enabled: true,
+      },
+    ],
+    customshortcuts: [],
+    lettergrade: false,
+    newsSource: "australia",
+  };
+}
 
 function SetStorageValue(object: any) {
   for (var i in object) {
@@ -238,53 +136,11 @@ function SetStorageValue(object: any) {
   }
 }
 
-async function UpdateCurrentValues() {
-  try {
-    const items = await browser.storage.local.get();
-    const CurrentValues = items;
-
-    const NewValue = Object.assign({}, DefaultValues, CurrentValues);
-
-    function CheckInnerElement(element: any) {
-      for (let i in element) {
-        if (typeof element[i] === 'object') {
-          // @ts-expect-error
-          if (!Array.isArray(DefaultValues[i])) {
-            // @ts-expect-error
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
-          } else {
-            // @ts-expect-error
-            const length = DefaultValues[i].length;
-            // @ts-expect-error
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
-            let NewArray = [];
-            for (let j = 0; j < length; j++) {
-              NewArray.push(NewValue[i][j]);
-            }
-            NewValue[i] = NewArray;
-          }
-        }
-      }
-    }
-
-    CheckInnerElement(DefaultValues);
-
-    if (items['customshortcuts']) {
-      NewValue['customshortcuts'] = items['customshortcuts'];
-    }
-
-    SetStorageValue(NewValue);
-    console.log('[BetterSEQTA+] Values updated successfully');
-  } catch (error) {
-    console.error('[BetterSEQTA+] Error updating values:', error);
-  }
-}
-
 browser.runtime.onInstalled.addListener(function (event) {
-  browser.storage.local.remove(['justupdated']);
-  browser.storage.local.remove(['data']);
-  UpdateCurrentValues();
-  if ( event.reason == 'install', event.reason == 'update' ) {
+  browser.storage.local.remove(["justupdated"]);
+  browser.storage.local.remove(["data"]);
+
+  if (event.reason == "install" || event.reason == "update") {
     browser.storage.local.set({ justupdated: true });
   }
 });

src/background/news.ts

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

src/css/documentload.scss

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

src/css/documentload.ts

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

src/css/iframe.scss

@@ -15,7 +15,7 @@
  * along with EvenBetterSEQTA.  If not, see <https://www.gnu.org/licenses/>.
  */
 
- body {
+body {
   background: transparent;
 }
 
@@ -25,7 +25,9 @@
   span,
   body {
     color: white !important;
-    text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
+    text-shadow:
+      1px 1px 2px #161616,
+      0 0 1em #161616;
   }
 
   body {
@@ -111,4 +113,11 @@
     text-decoration: underline;
     transition: text-shadow 0.5s;
   }
+}
+
+.cke_panel_listItem > a {
+  
+  &:hover {
+    background: #3d3d3e !important;
+  }
 }

src/css/injected/popup.scss

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

src/css/injected/sidebar-animation.scss

@@ -25,7 +25,7 @@
   padding-top: 2px;
 }
 
-.sub:has(ul>li.hasChildren.active) > .nav > .back {
+.sub:has(ul > li.hasChildren.active) > .nav > .back {
   display: none !important;
 }
 
@@ -40,4 +40,4 @@
 
 #menu > ul:has(li.hasChildren.active) > li.active {
   background: transparent !important;
-}
+}

src/css/injected/theme.scss

@@ -12,4 +12,4 @@ html:not(.dark) {
   --theme-primary: #ffffff;
   --theme-secondary: #e5e7eb;
   --text-primary: black;
-}
+}

src/css/injected/transparency.scss

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

src/declarations.d.ts

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

src/interface/SettingsContext.tsx

@@ -1,50 +0,0 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react';
-import { SettingsState } from './types/AppProps';
-import useSettingsState from './hooks/settingsState';
-
-// Create a context with an initial state
-const SettingsContext = createContext<{
-  settingsState: SettingsState;
-  setSettingsState: React.Dispatch<React.SetStateAction<SettingsState>>;
-  showPicker: boolean;
-  setShowPicker: React.Dispatch<React.SetStateAction<boolean>>;
-  standalone: boolean;
-  setStandalone: React.Dispatch<React.SetStateAction<boolean>>;
-} | undefined>(undefined);
-
-export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [settingsState, setSettingsState] = useState<SettingsState>({
-    notificationCollector: false,
-    lessonAlerts: false,
-    animatedBackground: false,
-    animatedBackgroundSpeed: "0",
-    customThemeColor: "rgba(219, 105, 105, 1)",
-    betterSEQTAPlus: true,
-    shortcuts: [],
-    customshortcuts: [],
-    transparencyEffects: false,
-    selectedTheme: '',
-    animations: true,
-    defaultPage: 'home'
-  });
-
-  const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [standalone, setStandalone] = useState<boolean>(false);
-
-  useSettingsState({ settingsState, setSettingsState });
-
-  return (
-    <SettingsContext.Provider value={{ settingsState, setSettingsState, showPicker, setShowPicker, standalone, setStandalone }}>
-      {children}
-    </SettingsContext.Provider>
-  );
-};
-
-// eslint-disable-next-line
-export const useSettingsContext = () => {
-  const context = useContext(SettingsContext);
-  if (!context) {
-    throw new Error('useSettingsContext must be used within a SettingsContextProvider');
-  }
-  return context;
-};

src/interface/assets/presetBackgrounds.tsx

@@ -1,70 +0,0 @@
-const presetBackgrounds = [
-  // Images
-  {
-    id: 'image-preset-1',
-    type: 'image',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-1.jpg',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-1-thumb.jpg',
-    isPreset: true
-  },
-  {
-    id: 'image-preset-2',
-    type: 'image',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-2.jpg',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-2-thumb.jpg',
-    isPreset: true
-  },
-  {
-    id: 'image-preset-3',
-    type: 'image',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-3.jpg',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-3-thumb.jpg',
-    isPreset: true
-  },
-  {
-    id: 'image-preset-4',
-    type: 'image',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-4.jpg',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-4-thumb.jpg',
-    isPreset: true
-  },
-  {
-    id: 'image-preset-5',
-    type: 'image',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-5.jpg',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-5-thumb.jpg',
-    isPreset: true
-  },
-  {
-    id: 'image-preset-6',
-    type: 'image',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-6.jpg',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-6-thumb.jpg',
-    isPreset: true
-  },
-  {
-    id: 'image-preset-7',
-    type: 'image',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-7.jpg',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/images/background-7-thumb.jpg',
-    isPreset: true
-  },
-  
-  // Videos
-  {
-    id: 'video-preset-1',
-    type: 'video',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/videos/animated-1.mp4',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/videos/animation-1-thumb.mp4',
-    isPreset: true
-  },
-  {
-    id: 'video-preset-2',
-    type: 'video',
-    url: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/videos/animation-2.mp4',
-    previewUrl: 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/backgrounds/videos/animation-2-thumb.mp4',
-    isPreset: true
-  }
-];
-
-export default presetBackgrounds;

src/interface/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/interface/components/Accordian.tsx

@@ -1,32 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-
-const Accordion = ({ children, title, defaultOpened }: { children: React.ReactNode, title: string, defaultOpened?: boolean }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [shown, setShown] = useState<boolean>(false);
-
-  useEffect(() => {
-    const show = async () => {
-      if (defaultOpened) {
-        await new Promise(resolve => setTimeout(resolve, 100));
-        setShown(true);
-      }
-    };
-
-    show();
-  }, [])
-
-  return (
-    <div>
-      <button onClick={() => setShown(!shown)} className='flex items-center justify-between text-[15px] w-full'>
-        { title }
-        <ChevronDownIcon className={`transition-transform duration-300 ${shown ? 'rotate-180' : ''}`} height='24' aria-hidden />
-      </button>
-      <div ref={ref} className='overflow-y-hidden transition-all duration-300 ease-in-out' style={{ height: `${shown ? ref.current?.scrollHeight : '0'}px` }}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default Accordion;

src/interface/components/BackgroundSelector.css

@@ -1,21 +0,0 @@
-@keyframes shake {
-  0% {
-    transform: rotate(0);
-  }
-  25% {
-    transform: rotate(-1deg);
-  }
-  50% {
-    transform: rotate(1deg);
-  }
-  75% {
-    transform: rotate(-1deg);
-  }
-  100% {
-    transform: rotate(0);
-  }
-}
-
-.animate-shake {
-  animation: shake 0.5s linear infinite;
-}

src/interface/components/BackgroundSelector.tsx

@@ -1,252 +0,0 @@
-import { ChangeEvent, memo, useEffect, useState } from "react";
-import { downloadPresetBackground, openDB, readAllData, writeData } from "../hooks/BackgroundDataLoader";
-import presetBackgrounds from "../assets/presetBackgrounds";
-import "./BackgroundSelector.css";
-
-export interface Background {
-  id: string;
-  type: string;
-  blob: Blob;
-  url?: string;
-  previewUrl?: string;
-  isPreset?: boolean;
-  isDownloaded?: boolean;
-}
-
-interface BackgroundSelectorProps {
-  isEditMode: boolean;
-  disableTheme: () => void;
-}
-
-async function GetTheme() {
-  return localStorage.getItem('selectedBackground');
-}
-
-async function SetTheme(theme: string) {
-  localStorage.setItem('selectedBackground', theme);
-  //await browser.storage.local.set({ theme });
-}
-
-function BackgroundSelector({ isEditMode, disableTheme }: BackgroundSelectorProps) {
-  const [backgrounds, setBackgrounds] = useState<Background[]>([]);
-  const [selectedBackground, setSelectedBackground] = useState<string | null>();
-  const [downloadedPresetIds, setDownloadedPresetIds] = useState<string[]>([]);
-  const [downloadProgress, setDownloadProgress] = useState<Record<string, number>>({});
-
-  const [BackgroundsBlocked, setBackgroundsBlocked] = useState<boolean>(false);
-
-  useEffect(() => {
-    GetTheme().then((theme) => {
-      setSelectedBackground(theme);
-    });
-  }, []);
-
-  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const fileId = `${Date.now()}-${file.name}`;
-    const fileType = file.type.split('/')[0];
-    const blob = new Blob([file], { type: file.type });
-
-    await writeData(fileId, fileType, blob);
-    setBackgrounds(prev => [...prev, { id: fileId, type: fileType, blob, url: URL.createObjectURL(blob) }]);
-  };
-
-  const loadBackgrounds = async (): Promise<void> => {
-    const data = await readAllData();
-    const dataWithUrls = data.map(bg => ({ ...bg, url: URL.createObjectURL(bg.blob) }));
-  
-    // Update downloaded preset IDs
-    setDownloadedPresetIds(data.map(bg => bg.id));
-    
-    setBackgrounds(dataWithUrls);
-  };  
-
-  const handlePresetClick = async (bg: Background): Promise<void> => {
-    if (bg.isPreset) {
-      // Check if indexed DB is accessible or whether cross site cookies blocks it
-      try {
-        await openDB();
-      } catch (error) {
-        // @ts-expect-error - Brave is not in the navigator type (unless you are actually using brave browser)
-        if (navigator.brave && await navigator.brave.isBrave() || false) {
-          console.error('[BetterSEQTA+] Brave browser is blocking access to IndexedDB. Please disable the "Cross-site cookies blocked" setting in the Shields panel. (or you can just disable brave shields for SEQTA)');
-          setBackgroundsBlocked(true);
-          return;
-        }
-        alert("[BetterSEQTA+] IndexedDB is not accessible. Please check your browser settings (It's probably cross-site cookies that are blocked).");
-        return;
-      }
-
-      // Check if already exists in IndexedDB or is currently being downloaded
-      const existingBackgrounds = await readAllData();
-      const alreadyExists = existingBackgrounds.some(ebg => ebg.id === bg.id) || downloadProgress[bg.id] !== undefined;
-    
-      if (!alreadyExists) {
-        setDownloadProgress(prev => ({ ...prev, [bg.id]: 0 }));
-        const downloadedBg = await downloadPresetBackground(bg, progress => {
-          setDownloadProgress(prev => ({ ...prev, [bg.id]: progress }));
-        });
-        setDownloadProgress(prev => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { [bg.id]: _, ...rest } = prev;
-          return rest;
-        });
-        await writeData(downloadedBg.id, downloadedBg.type, downloadedBg.blob);
-        setBackgrounds(prev => [...prev, downloadedBg]);
-        setDownloadedPresetIds(prev => [...prev, downloadedBg.id]);
-      }
-      selectBackground(bg.id);
-    }
-  };
-  
-  const selectBackground = (fileId: string): void => {
-    if (selectedBackground == fileId) {
-      selectNoBackground();
-      return;
-    }
-
-    setSelectedBackground(fileId);
-    SetTheme(fileId);
-  };
-
-  const deleteBackground = async (fileId: string): Promise<void> => {
-    const db = await openDB();
-    const tx = db.transaction('backgrounds', 'readwrite');
-    const store = tx.objectStore('backgrounds');
-    store.delete(fileId);
-    setBackgrounds(prev => prev.filter(bg => bg.id !== fileId));
-  
-    // Check if the background being deleted is currently selected
-    if (fileId === selectedBackground) {
-      selectNoBackground();  // Disable the current background
-    }
-  };  
-
-  const selectNoBackground = (): void => {
-    setSelectedBackground(null);
-    SetTheme('');
-  };
-
-  const calcCircumference = (radius: number) => 2 * Math.PI * radius;
-  
-  useEffect(() => {
-    loadBackgrounds();
-  }, []);
-
-  return (
-    <>
-    <button
-      disabled={selectedBackground == null ? true : false}
-      className={`w-full px-4 py-2 mb-4 dark:text-white transition ${selectedBackground == null ? 'dark:bg-zinc-900 bg-zinc-100' : 'bg-blue-500 text-white'} rounded`}
-      onClick={() => { disableTheme(), selectNoBackground() }}>
-        {selectedBackground == null ? 'No Theme' : 'Remove Theme'}
-    </button>
-
-    {BackgroundsBlocked && (
-      <div className="p-4 mb-4 text-red-600 bg-red-100 rounded-md dark:text-red-300 dark:bg-red-500 dark:bg-opacity-20">
-        <h2 className="mb-2 text-lg font-bold">File Storage Blocked</h2>
-        <p>Brave browser is blocking access to IndexedDB. Please disable the "Cross-site cookies blocked" setting in the Shields panel. (or you can just disable brave shields for SEQTA)</p>
-        <img src="https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/brave.jpg" alt="Brave browser logo" className="w-1/2 mt-4" />
-      </div>
-    )}
-
-    <div className="relative px-1">
-      <h2 className="pb-2 text-lg font-bold">Background Images</h2>
-      <div className="flex flex-wrap gap-4">
-        { isEditMode ? <></> :
-        <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-100 dark:bg-zinc-900">
-          <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
-            {/*  Plus icon */}
-            
-          </div>
-          <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
-        </div>}
-        {backgrounds.filter(bg => bg.type === 'image').map(bg => (
-          <div key={bg.id}
-            onClick={() => selectBackground(bg.id)} 
-            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
-            {isEditMode && (
-              <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
-                  onClick={() => deleteBackground(bg.id)}>
-                <div className="w-4 h-0.5 bg-white"></div>
-              </div>
-            )}
-            <img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
-          </div>
-        ))}
-        {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (
-          <button key={bg.id}
-            onClick={() => handlePresetClick(bg)}
-            className={`relative w-16 h-16 transition cursor-pointer rounded-xl duration-300 ${ isEditMode ? 'opacity-0 pointer-events-none hidden' : 'opacity-100'}`}>
-            {bg.isPreset && downloadProgress[bg.id] !== undefined && (
-              <div className="absolute top-0 left-0 z-20 flex items-center justify-center w-full h-full">
-                <svg className="w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
-                  <circle stroke="currentColor" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset="0" transform="rotate(-90 18 18)"></circle>
-                  <circle stroke="#3B82F6" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset={`${calcCircumference(14) * (1 - (downloadProgress[bg.id] / 100))}`} transform="rotate(-90 18 18)"></circle>
-                </svg>
-              </div>
-            )}
-            <div className={`relative transition top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center ${downloadProgress[bg.id] === undefined ? 'hover:bg-black/20' : ''}`}>
-              <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
-                {downloadProgress[bg.id] === undefined ? '' : ''}
-              </span>
-            </div>
-            <img 
-              className="absolute top-0 object-cover w-full h-full rounded-xl" 
-              src={bg.isPreset ? bg.previewUrl : bg.url}
-              alt="swatch" />
-          </button>
-        ))}
-      </div>
-
-      <h2 className="py-2 text-lg font-bold">Background Videos</h2>
-      <div className="flex flex-wrap gap-4">
-        { isEditMode ? <></> :
-        <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-100 dark:bg-zinc-900">
-          <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
-            {/*  Plus icon */}
-            
-          </div>
-          <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
-        </div>
-        }
-        {backgrounds.filter(bg => bg.type === 'video').map(bg => (
-          <div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
-            {isEditMode && (
-              <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
-                  onClick={() => deleteBackground(bg.id)}>
-                <div className="w-4 h-0.5 bg-white"></div>
-              </div>
-            )}
-            <video muted loop autoPlay src={bg.url} className="object-cover w-full h-full rounded-xl" />
-          </div>
-        ))}
-        {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'video' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (
-          <div key={bg.id}
-            onClick={() => handlePresetClick(bg)}
-            className={`relative w-16 h-16 transition cursor-pointer rounded-xl duration-300 ${ isEditMode ? 'opacity-0 pointer-events-none hidden' : 'opacity-100'}`}>
-            {bg.isPreset && downloadProgress[bg.id] !== undefined && (
-              <div className="absolute top-0 left-0 z-20 flex items-center justify-center w-full h-full">
-                <svg className="w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
-                  <circle stroke="currentColor" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset="0" transform="rotate(-90 18 18)"></circle>
-                  <circle stroke="#3B82F6" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset={`${calcCircumference(14) * (1 - (downloadProgress[bg.id] / 100))}`} transform="rotate(-90 18 18)"></circle>
-                </svg>
-              </div>
-            )}
-            <div className={`relative transition top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center ${downloadProgress[bg.id] === undefined ? 'hover:bg-black/20' : ''}`}>
-              <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
-                {downloadProgress[bg.id] === undefined ? '' : ''}
-              </span>
-            </div>
-            <video muted loop autoPlay src={bg.isPreset ? bg.previewUrl : bg.url} className="absolute top-0 object-cover w-full h-full rounded-xl" />
-          </div>
-        ))}
-      </div>
-    </div>
-    </>
-  );
-}
-
-export default memo(BackgroundSelector);

src/interface/components/Button.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  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'>
+  {text}
+</button>

src/interface/components/Checkbox.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-type CheckboxProps = {
-  value: boolean;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-};
-
-const Checkbox: React.FC<CheckboxProps> = ({ value, onChange }) => {
-  return (
-    <label className="flex items-center cursor-pointer">
-      <div className="relative">
-        <input
-          type="checkbox"
-          className="absolute opacity-0"
-          checked={value}
-          onChange={onChange}
-        />
-        <div
-          className={`w-5 h-5 rounded-md bg-gradient-to-tr transition-colors duration-200 ${
-            value
-              ? 'from-blue-500 to-blue-600'
-              : 'from-gray-300 to-gray-400 dark:from-zinc-700 dark:to-zinc-700/50'
-          }`}
-        />
-        {value && (
-          <svg
-            className="absolute inset-0 m-auto text-white"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <polyline points="20 6 9 17 4 12" />
-          </svg>
-        )}
-      </div>
-    </label>
-  );
-};
-
-export default Checkbox;

src/interface/components/CodeEditor.css

@@ -1,11 +0,0 @@
-.cm-editor {
-  border-radius: 8px;
-}
-
-body:not(.dark) .cm-editor {
-  @apply bg-zinc-200;
-}
-
-.cm-editor.cm-focused {
-  outline: none;
-}

src/interface/components/CodeEditor.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { onDestroy, onMount } from 'svelte'
+
+  import { EditorState } from '@codemirror/state';
+  import { highlightSelectionMatches } from '@codemirror/search';
+  import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirror/commands';
+  import { indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+  import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+  import { highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView, dropCursor } from '@codemirror/view';
+  import { color } from '@uiw/codemirror-extensions-color'
+  import { Compartment } from '@codemirror/state';
+
+  // Theme
+  import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+
+  // Language
+  import { css } from "@codemirror/lang-css";
+
+  let editor = $state<HTMLDivElement | null>(null)
+  let view: EditorView | null = null;
+  let editorTheme = new Compartment();
+  let { value, onChange, className } = $props<{value: string, onChange: (value: string) => void, className?: string}>()
+
+  function createEditorState(initialContents: string) {
+      let extensions = [
+          highlightSpecialChars(),
+          history(),
+          drawSelection(),
+          indentUnit.of("  "),
+          EditorState.allowMultipleSelections.of(true),
+          indentOnInput(),
+          bracketMatching(),
+          closeBrackets(),
+          autocompletion(),
+          rectangularSelection(),
+          crosshairCursor(),
+          dropCursor(),
+          highlightActiveLine(),
+          highlightSelectionMatches(),
+          editorTheme.of(githubLight),
+          keymap.of([
+              indentWithTab,
+              ...closeBracketsKeymap,
+              ...defaultKeymap,
+              ...historyKeymap,
+              ...foldKeymap,
+              ...completionKeymap,
+          ]),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              onChange(update.state.doc.toString())
+            }
+          }),
+          css(),
+          color,
+          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      ];
+
+      return EditorState.create({
+          doc: initialContents,
+          extensions
+      });
+  }
+
+  function createEditorView(state: EditorState, parent: HTMLElement) {
+      return new EditorView({ state, parent });
+  }
+
+  onMount(() => {
+    if (editor) {
+      const state = createEditorState(value);
+      view = createEditorView(state, editor as HTMLElement);
+    }
+
+    settingsState.subscribe((settings) => {
+      if (view) {
+        view.dispatch({
+          effects: editorTheme.reconfigure(
+            settings.DarkMode ? githubDark : githubLight
+          )
+        })
+      }
+    });
+  });
+
+  onDestroy(() => {
+    if (view) {
+      view.destroy();
+    }
+  })
+</script>
+
+<div class={`rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900 ${className}`} bind:this={editor}></div>

src/interface/components/CodeEditor.tsx

@@ -1,48 +0,0 @@
-import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror'
-import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
-import { color } from '@uiw/codemirror-extensions-color';
-import { less } from '@codemirror/lang-less'
-import { useCallback, useEffect, useState } from 'react';
-import './CodeEditor.css'
-
-export default function CodeEditor({ 
-  className = '', 
-  height = '100%', 
-  value,
-  setValue
-}: {
-  className?: string;
-  height?: string;
-  value: string;
-  setValue: (value: string) => void;
-}) {
-  const [darkMode, setDarkMode] = useState(false)
-
-  useEffect(() => {
-    if (document.documentElement.classList.contains('dark')) {
-      setDarkMode(true)
-    }
-  }, [])
-
-  const onChange = useCallback((value: string, _: ViewUpdate) => {
-    setValue(value)
-  }, [])
-
-  return(
-    <CodeMirror
-      basicSetup={{
-        allowMultipleSelections: true,
-        lineNumbers: false,
-        foldGutter: false,
-        dropCursor: true,
-        tabSize: 2,
-      }}
-      theme={ darkMode ? githubDark : githubLight }
-      placeholder={"Happy coding!"}
-      className={`rounded-lg text-[13px] ${className}`}
-      value={value}
-      height={height}
-      extensions={[less(), color]}
-      onChange={onChange} />
-  )
-}

src/interface/components/ColourPicker.css

@@ -0,0 +1,93 @@
+div:has(> #rbgcp-wrapper) {
+  background: transparent !important;
+}
+
+.dark {
+  #rbgcp-wrapper {
+    div[style="padding-top: 11px; position: relative;"] div {
+      color: white !important;
+    }
+
+    #rbgcp-inputs-wrap #rbgcp-hex-input,
+    #rbgcp-inputs-wrap #rbgcp-input {
+      color: white !important;
+      background-color: #37373b !important;
+      border: none !important;
+    }
+
+    div:has(> #rbgcp-solid-btn),
+    div:has(> #rbgcp-advanced-btn),
+    #rbgcp-color-model-btn > div,
+    #rbgcp-gradient-controls-wrap {
+      background-color: #37373b !important;
+      color: white !important;
+
+      svg {
+        circle {
+          fill: white !important;
+        }
+
+        polyline,
+        line,
+        g,
+        path {
+          stroke: white !important;
+        }
+      }
+
+      #rbgcp-radial-btn,
+      #rbgcp-linear-btn {
+        &[style*="background: white;"] {
+          background-color: #28282b !important;
+        }
+
+        svg {
+          path,
+          g,
+          polyline,
+          circle {
+            stroke: white !important;
+            fill: transparent !important;
+          }
+        }
+      }
+
+      div:has(> #rbgcp-stop-input) svg {
+        path {
+          stroke: unset !important;
+          fill: white !important;
+        }
+      }
+
+      #rbgcp-comparibles-btn svg path {
+        fill: white !important;
+      }
+
+      > div {
+        color: white !important;
+
+        &[style*="background: white;"] {
+          background: #28282b !important;
+        }
+      }
+    }
+
+    div:has(> #rbgcp-degree-input) {
+      width: 70px !important;
+    }
+
+    #rbgcp-degree-input {
+      width: 50px !important;
+    }
+
+    #rbgcp-degree-input,
+    #rbgcp-stop-input {
+      color: white !important;
+    }
+
+    #rbgcp-gradient-controls-wrap > div,
+    #rbgcp-gradient-controls-wrap > div > div:not([role="button"]) {
+      background-color: #37373b !important;
+    }
+  }
+}

src/interface/components/ColourPicker.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import ColourPicker from './ColourPicker.tsx';
+  import ReactAdapter from './utils/ReactAdapter.svelte';
+  import { animate } from 'motion';
+  import { delay } from '@/seqta/utils/delay.ts'
+
+  const { hidePicker, standalone = false, savePresets = true, customOnChange = null, customState = null } = $props<{
+    hidePicker?: () => void,
+    standalone?: boolean,
+    savePresets?: boolean,
+    customOnChange?: (color: string) => void,
+    customState?: string
+  }>();
+
+  let background = $state<HTMLDivElement | null>(null);
+  let content = $state<HTMLDivElement | null>(null);
+
+  const closePicker = async () => {
+    if (standalone) return;
+    if (!background || !content) return;
+
+    animate(
+      content,
+      { scale: [1, 0.4], opacity: [1, 0] },
+      {
+        type: 'spring',
+        stiffness: 400,
+        damping: 30
+      }
+    );
+
+    animate(
+      background,
+      { opacity: [1, 0] },
+      { ease: [0.4, 0, 0.2, 1] }
+    );
+
+    await delay(400);
+    hidePicker();
+  }
+
+  onMount(() => {
+    if (standalone) return;
+    if (!background || !content) return;
+
+    animate(
+      background,
+      { opacity: [0, 1] },
+      { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
+    );
+
+    animate(
+      content,
+      { scale: [0.4, 1], opacity: [0, 1] },
+      {
+        type: 'spring',
+        stiffness: 400,
+        damping: 30
+      }
+    );
+
+    const handleEscapeKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closePicker();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  });
+
+  function handleBackgroundClick(event: MouseEvent) {
+    if (event.target === background) {
+      closePicker();
+    }
+  }
+</script>
+
+{#if standalone}
+  <div class="h-auto overflow-clip rounded-xl">
+    <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
+  </div>
+{:else}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={background}
+    class="flex absolute top-0 left-0 z-50 justify-center items-center w-full h-full shadow-2xl cursor-pointer bg-black/20 border border-[#DDDDDD]/30 dark:border-[#38373D]/30"
+    onclick={handleBackgroundClick}
+    onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
+  >
+    <div
+      bind:this={content}
+      class="p-4 h-auto bg-white rounded-xl border shadow-lg cursor-auto dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+    >
+      <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
+    </div>
+  </div>
+{/if}

src/interface/components/ColourPicker.tsx

@@ -0,0 +1,123 @@
+import ColorPicker from "react-best-gradient-color-picker";
+import { useEffect, useRef, useState } from "react";
+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%)",
+  "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
+  "linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)",
+  "linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)",
+  "linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)",
+  "linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)",
+  "radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)",
+  "radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)",
+  "linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)",
+  "rgba(114, 1, 170, 0.89)",
+  "rgba(93, 135, 63, 0.89)",
+  "rgba(4, 4, 138, 0.77)",
+  "rgba(21, 20, 20, 0.89)",
+  "linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)",
+  "radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)",
+  "rgba(17, 94, 89, 1)",
+  "rgba(30, 64, 175, 0.89)",
+  "rgba(134, 25, 143, 1)",
+  "rgba(14, 165, 233, 0.9)",
+];
+
+interface PickerProps {
+  customOnChange?: (color: string) => void;
+  customState?: string;
+  savePresets?: boolean;
+}
+
+export default function Picker({
+  customOnChange,
+  customState,
+  savePresets = true,
+}: PickerProps) {
+  const [customThemeColor, setCustomThemeColor] = useState<string | null>();
+  const [presets, setPresets] = useState<string[]>();
+
+  const latestValuesRef = useRef({
+    customThemeColor,
+    customOnChange,
+    savePresets,
+    presets,
+  });
+
+  useEffect(() => {
+    if (customState !== undefined && customState !== null) {
+      setCustomThemeColor(customState);
+    } else {
+      setCustomThemeColor(settingsState.selectedColor ?? null);
+    }
+
+    if (presets === undefined) {
+      const savedPresets = localStorage.getItem("colorPickerPresets");
+      setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets);
+    }
+  }, []);
+
+  useEffect(() => {
+    latestValuesRef.current = {
+      customThemeColor,
+      customOnChange,
+      savePresets,
+      presets,
+    };
+  }, [customThemeColor, customOnChange, savePresets, presets]);
+
+  useEffect(() => {
+    return () => {
+      const { customThemeColor, customOnChange, savePresets, presets } =
+        latestValuesRef.current;
+      if (!(customThemeColor && !customOnChange && savePresets && presets))
+        return;
+
+      // Only proceed if presets are different (avoid unnecessary updates)
+      const existingIndex = presets.indexOf(customThemeColor);
+      let updatedPresets;
+
+      if (existingIndex === 0) {
+        // No need to update if the selected color is already the first element
+        return;
+      } else if (existingIndex > -1) {
+        updatedPresets = [
+          customThemeColor,
+          ...presets.slice(0, existingIndex),
+          ...presets.slice(existingIndex + 1),
+        ];
+      } else {
+        updatedPresets = [customThemeColor, ...presets].slice(0, 18);
+      }
+
+      localStorage.setItem(
+        "colorPickerPresets",
+        JSON.stringify(updatedPresets),
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (customThemeColor && !customOnChange) {
+      settingsState.selectedColor = customThemeColor;
+    }
+  }, [customThemeColor, customOnChange]);
+
+  return (
+    <ColorPicker
+      disableDarkMode={true}
+      presets={presets}
+      hideInputs={customOnChange ? false : true}
+      value={customThemeColor ?? ""}
+      onChange={(color: string) => {
+        if (customOnChange) {
+          customOnChange(color);
+          setCustomThemeColor(color);
+        } else {
+          setCustomThemeColor(color);
+        }
+      }}
+    />
+  );
+}

src/interface/components/HotkeyInput.svelte

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

src/interface/components/LoadingSpinner.tsx

@@ -1,8 +0,0 @@
-const SpinnerIcon = ({ className }: { className: string }) => (
-  <svg className={className} width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <style>{`.spinner_7mtw{transform-origin:center;animation:spinner_jgYN .6s linear infinite}@keyframes spinner_jgYN{100%{transform:rotate(360deg)}}`}</style>
-    <path stroke="currentColor" fill="currentColor" className="spinner_7mtw" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
-  </svg>
-);
-
-export default SpinnerIcon;

src/interface/components/MotionDiv.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { animate as motionAnimate } from 'motion';
+
+  let { initial, animate, exit, transition, children, class: className } = $props<{ 
+    initial?: any, 
+    animate?: any, 
+    exit?: any, 
+    transition?: any, 
+    children?: any, 
+    class?: string 
+  }>();
+
+  let divElement: HTMLElement;
+
+  const playAnimation = (keyframe: any) => {
+    if (divElement && keyframe) {
+      let finalKeyframe = { ...keyframe };
+
+      if (finalKeyframe.height === 'auto') {
+        const prevHeight = divElement.style.height;
+        const prevVisibility = divElement.style.visibility;
+        
+        divElement.style.height = 'auto';
+        divElement.style.visibility = 'hidden';
+        divElement.style.position = 'absolute';
+        
+        const autoHeight = divElement.offsetHeight;
+        
+        divElement.style.height = prevHeight;
+        divElement.style.visibility = prevVisibility;
+        divElement.style.position = '';
+        
+        finalKeyframe.height = `${autoHeight}px`;
+      }
+
+      const defaultSpringConfig = { stiffness: 250, damping: 25 };
+
+      const animation = motionAnimate(
+        [divElement],
+        finalKeyframe,
+        {
+          type: 'spring',
+          stiffness: transition?.stiffness || defaultSpringConfig.stiffness,
+          damping: transition?.damping || defaultSpringConfig.damping
+        }
+      );
+      return animation;
+    }
+    return Promise.resolve();
+  };
+
+  onMount(async () => {
+    if (initial) {
+      Object.assign(divElement.style, initial);
+      await playAnimation(animate || {});
+    } else if (animate) {
+      await playAnimation(animate);
+    }
+  });
+  
+  $effect(() => {
+    if (animate) {
+      playAnimation(animate);
+    }
+  });
+
+  onDestroy(async () => {
+    if (exit) {
+      await playAnimation(exit);
+    }
+  });
+</script>
+
+<div class={className} bind:this={divElement} style="will-change: transform, opacity;">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

src/interface/components/Picker.css

@@ -1,32 +0,0 @@
-.dark [class*="rbgcpColorModelDropdown"],
-.dark [class*="rbgcpControlBtnWrapper"],
-.dark #rbgcp-gradient-controls-wrap {
-  background-color: #37373b !important;
-  color: white !important;
-}
-
-.dark [class*="rbgcpControlBtn"][class*="rbgcpControlBtnSelected"] {
-  color: #568cf5 !important;
-}
-
-.dark [class*="rbgcpControlBtn"] {
-  color: #CDCEC9 !important;
-}
-
-.dark [class*="rbgcpControlBtnSelected"] svg {
-  filter: none !important;
-}
-
-.dark [class*="rbgcpControlBtnSelected"] {
-  background-color: #28282b !important;
-}
-
-.dark [class*="rbgcpComparibleLabel"] {
-  color: #CDCEC9 !important;
-}
-
-.dark #rbgcp-stop-input,
-.dark #rbgcp-degree-input,
-.dark [class*="rbgcpControlBtnWrapper"] svg {
-  filter: invert();
-}

src/interface/components/Picker.tsx

@@ -1,127 +0,0 @@
-import ColorPicker from 'react-best-gradient-color-picker';
-import { useSettingsContext } from '../SettingsContext';
-import { motion } from "framer-motion";
-
-import "./Picker.css";
-import { memo, useEffect, useState } from 'react';
-
-function Picker() {
-  const { settingsState, setSettingsState, showPicker, setShowPicker } = useSettingsContext();
-
-  const defaultPresets = [
-    'linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)',
-    'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)',
-    'linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)',
-    'linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)',
-    'linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)',
-    'linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)',
-    'radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)',
-    'radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)',
-    'linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)',
-    'rgba(114, 1, 170, 0.89)',
-    'rgba(93, 135, 63, 0.89)',
-    'rgba(4, 4, 138, 0.77)',
-    'rgba(21, 20, 20, 0.89)',
-    'linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)',
-    'radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)',
-    'rgba(17, 94, 89, 1)',
-    'rgba(30, 64, 175, 0.89)',
-    'rgba(134, 25, 143, 1)',
-    'rgba(14, 165, 233, 0.9)'
-  ];
-  const [presets, setPresets] = useState(() => {
-    const savedPresets = localStorage.getItem('colorPickerPresets');
-    return savedPresets ? JSON.parse(savedPresets) : defaultPresets;
-  });
-
-  const handleMessage = (event: MessageEvent) => {
-    if (event.data === "popupClosed") {
-      setShowPicker(false);
-    }
-  };
-
-  useEffect(() => {
-    // Add event listener for 'message' event
-    window.addEventListener("message", handleMessage);
-
-    // Cleanup
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, []);
-
-  useEffect(() => {
-    // Watch for changes in showPicker and update the presets
-    if (!showPicker) {
-      // Check if the selected color is already in the presets
-      const existingIndex = presets.indexOf(settingsState.customThemeColor);
-
-      let updatedPresets;
-      if (existingIndex > -1) {
-        // If the color exists, move it to the front
-        updatedPresets = [
-          settingsState.customThemeColor,
-          ...presets.slice(0, existingIndex),
-          ...presets.slice(existingIndex + 1)
-        ];
-      } else {
-        // If the color is new, add it to the front and slice the array
-        updatedPresets = [settingsState.customThemeColor, ...presets].slice(0, 18);
-      }
-
-      setPresets(updatedPresets);
-      localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showPicker]);
-
-  const colorChange = (color: string) => {
-    setSettingsState({
-      ...settingsState,
-      customThemeColor: color,
-    });
-  };
-
-  // Define animation variants
-  const backgroundVariants = {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 },
-    exit: { opacity: 0 }
-  };
-
-  const scaleVariants = {
-    hidden: { scale: 0.3 },
-    visible: { scale: 1 },
-    exit: { scale: 0.4 } // Adding exit animation
-  };
-
-  return (
-    // Apply fade-in animation to background
-    <motion.div
-      initial="hidden"
-      animate={showPicker ? "visible" : "exit"}
-      exit="exit"
-      variants={backgroundVariants}
-      transition={{ duration: 0.2 }}
-      onClick={() => setShowPicker(false)}
-      className={`absolute top-0 left-0 z-50 flex justify-center w-full h-full pt-4 bg-black/20 ${!showPicker ? 'pointer-events-none' : ''}`}
-    >
-      <div>
-        {/* Apply springy scale animation */}
-        <motion.div
-          initial="hidden"
-          animate={showPicker ? "visible" : "exit"}
-          exit="exit"
-          variants={scaleVariants}
-          transition={{ type: "spring", stiffness: 500, damping: 40 }}
-          onClick={(e) => e.stopPropagation()}
-          className="h-auto p-4 bg-white border rounded-lg shadow-lg dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
-        >
-          <ColorPicker disableDarkMode={true} presets={presets} hideInputs={true} value={settingsState.customThemeColor} onChange={colorChange} />
-        </motion.div>
-      </div>
-    </motion.div>
-  );
-}
-
-export default memo(Picker);

src/interface/components/PickerSwatch.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+
+  let { onClick } = $props<{ onClick: () => void }>();
+</script>
+
+<button
+  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"
+></button>

src/interface/components/PickerSwatch.tsx

@@ -1,20 +0,0 @@
-import { memo } from 'react';
-import { useSettingsContext } from '../SettingsContext';
-
-const PickerSwatch = () => {
-  const { setShowPicker, settingsState } = useSettingsContext();
-
-  const enablePicker = () => {
-    setShowPicker(true);
-  };
-
-  return (
-    <button
-      onClick={enablePicker}
-      style={{ background: settingsState.customThemeColor }}
-      className="w-16 h-8 rounded-md"
-    ></button>
-  );
-};
-
-export default memo(PickerSwatch);

src/interface/components/Select.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  let { state, onChange, options } = $props<{
+    state: string,
+    onChange: (newState: string) => void,
+    options: Array<{ value: string, label: string }>
+  }>();
+
+  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"
+  >
+    {#each options as option}
+      <option value={option.value}>
+        {option.label}
+      </option>
+    {/each}
+  </select>
+</div>

src/interface/components/Select.tsx

@@ -1,7 +0,0 @@
-export default function Select({ state, onChange, options }: { state: string, onChange: (value: string) => void, options: { value: string, label: string }[] }) {
-  return (
-    <select className='px-4 py-1.5 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white focus:border-none rounded-md mt-2 block w-full border-0 pl-3 pr-10 text-gray-900 focus:outline-none sm:text-sm sm:leading-6' value={state} onChange={(e) => onChange(e.target.value)}>
-    {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-  </select>
-  )
-}

src/interface/components/SkeletonLoader.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  let { width, height} = $props<{width?: string, height?: string}>()
+</script>
+
+<div style="width: {width ? width : '100%'}; height: {height ? height : '100%'}; background: #e0e0e0;" class="animate-pulse"></div>

src/interface/components/Slider.css

@@ -1,19 +0,0 @@
-/* Slider Thumb */
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 24px;
-  height: 24px;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
-  background: white;
-  cursor: pointer;
-  border-radius: 50%;
-}
-
-.slider::-moz-range-thumb {
-  width: 24px;
-  height: 24px;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
-  background: white;
-  cursor: pointer;
-  border-radius: 50%;
-}

src/interface/components/Slider.svelte

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

src/interface/components/Slider.tsx

@@ -1,25 +0,0 @@
-import { memo } from "react";
-import "./Slider.css";
-
-interface SliderProps {
-  state: number;
-  onChange: (value: number) => void;
-}
-
-const Slider: React.FC<SliderProps> = ({ state, onChange }) => {
-
-  return (
-    <div className="relative w-full max-w-lg py-8 mx-auto">
-      <input
-        type="range"
-        min="0"
-        max="100"
-        value={state}
-        onChange={(e) => onChange(Number(e.target.value))}
-        className="w-full h-1 rounded-full appearance-none cursor-pointer slider dark:bg-[#38373D] bg-[#DDDDDD]"
-      />
-    </div>
-  );
-};
-
-export default memo(Slider);

src/interface/components/Spinner.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  let { size = 'md', color = 'currentColor' } = $props();
+
+  const sizeMap = {
+    sm: '1rem',
+    md: '2rem',
+    lg: '3rem',
+  };
+
+  let dimensions = $derived(sizeMap[size as keyof typeof sizeMap] || size);
+</script>
+
+<svg
+  class="animate-spin"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  width={dimensions}
+  height={dimensions}
+>
+  <circle
+    class="opacity-25"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke={color}
+    stroke-width="4"
+  ></circle>
+  <path
+    class="opacity-75"
+    fill={color}
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  ></path>
+</svg>

src/interface/components/Switch.css

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

src/interface/components/Switch.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { animate } from 'motion';
+  import { standalone } from '../utils/standalone.svelte'
+
+  let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
+  let handle: HTMLElement | null = null;
+
+  const springParams = {
+    stiffness: 600,
+    damping: 30,
+  };
+
+  const animateSwitch = (enabled: boolean) => {
+    if (!handle) return;
+    animate(
+      handle,
+      {
+        x: enabled ? (standalone.standalone ? 24 : 20) : 0,
+      },
+      {
+        type: 'spring',
+        stiffness: springParams.stiffness,
+        damping: springParams.damping,
+      }
+    );
+  };
+
+  // Trigger animation whenever state changes
+  $effect(() => animateSwitch(state));
+</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]'}"
+  onclick={() => onChange(!state)}
+  onkeydown={(e) => e.key === "Enter" && onChange(!state)}
+  role="switch"
+  aria-checked={state}
+  tabindex="0"
+>
+  <div
+    bind:this={handle}
+    class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
+  ></div>
+</div>

src/interface/components/Switch.tsx

@@ -1,35 +0,0 @@
-import { motion } from "framer-motion";
-import "./Switch.css";
-import type { SwitchProps } from "../types/SwitchProps";
-import { memo } from "react";
-
-function Switch(props: SwitchProps) {
-  const toggleSwitch = () => {
-    const newIsOn = !props.state;
-    props.onChange(newIsOn);
-  };
-
-  return (
-    <div
-      className="flex w-14 p-1 cursor-pointer rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
-      data-ison={props.state}
-      onClick={toggleSwitch}
-    >
-      <motion.div
-      
-        className="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
-        initial={{ x: props.state ? 0 : 0 }}
-        animate={{ x: props.state ? 24 : 0 }}
-        transition={spring}
-        />
-    </div>
-  );
-}
-
-const spring = {
-  type: "spring",
-  stiffness: 700,
-  damping: 30
-};
-
-export default memo(Switch);

src/interface/components/TabbedContainer.css

@@ -0,0 +1,3 @@
+.tab-width {
+  width: var(--tab-width);
+}

src/interface/components/TabbedContainer.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import MotionDiv from './MotionDiv.svelte';
+  import './TabbedContainer.css';
+  import { onMount } from 'svelte';
+
+  let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
+  let activeTab = $state(0);
+  let containerRef: HTMLElement | null = null;
+  let tabWidth = $state(0);
+
+  const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
+
+  const updateTabWidth = () => {
+    tabWidth = tabs.length > 0 ? 100 / tabs.length : 0;
+    if (!containerRef) return;
+    containerRef.style.setProperty('--tab-width', `${tabWidth}%`);
+  };
+
+  const calcXPos = (index: number | null) => {
+    if (containerRef) {
+      return tabWidth * (index !== null ? index : activeTab) * containerRef.getBoundingClientRect().width / 100;
+    }
+    return 0;
+  };
+
+  onMount(() => {
+    updateTabWidth();
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data === "popupClosed") {
+        activeTab = 0;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  });
+</script>
+
+<div class="flex flex-col h-full">
+  <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"
+        animate={{ x: calcXPos(activeTab) }}
+        transition={springTransition}
+      />
+      {#each tabs as { title }, index}
+        <button
+          class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
+          onclick={() => activeTab = index}
+        >
+          {title}
+        </button>
+      {/each}
+    </div>
+  </div>
+  <div class="overflow-hidden px-4 h-full">
+    <MotionDiv
+      class="h-full"
+      animate={{ x: `${-activeTab * 100}%` }}
+      transition={springTransition}
+    >
+      <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'}"
+          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}
+      </div>
+    </MotionDiv>
+  </div>
+</div>

src/interface/components/TabbedContainer.tsx

@@ -1,99 +0,0 @@
-import React, { memo, useEffect, useRef, useState } from 'react';
-import { motion } from 'framer-motion';
-import type { TabbedContainerProps } from '../types/TabbedContainerProps';
-
-const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
-  const [activeTab, setActiveTab] = useState(0);
-  const [hoveredTab, setHoveredTab] = useState<number | null>(null);
-  const [tabWidth, setTabWidth] = useState(0);
-  const [position, setPosition] = useState(0);
-  const positionRef = useRef(position);
-
-
-    // Function to handle message
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data === "popupClosed") {  
-        setActiveTab(0);
-      }
-    };
-  
-    useEffect(() => {
-      // Add event listener for 'message' event
-      window.addEventListener("message", handleMessage);
-  
-      // Cleanup
-      return () => {
-        window.removeEventListener("message", handleMessage);
-      };
-    }, []);
-
-
-  useEffect(() => {
-    const newPosition = -activeTab * 100;
-    setPosition(newPosition);
-    positionRef.current = newPosition;
-  }, [activeTab]);
-
-  const containerRef = useRef(null);
-
-  const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
-
-  useEffect(() => {
-    if (containerRef.current) {
-      // @ts-expect-error for some reason its giving an error in TS but it works...
-      const width = containerRef.current.getBoundingClientRect().width;
-      setTabWidth(width / tabs.length);
-    }
-  }, [tabs.length]);
-
-  const calcXPos = (index: number | null) => {
-    if (index !== null) {
-      return tabWidth * index;
-    }
-    return tabWidth * activeTab;
-  };
-
-  return (
-  <>
-    <div ref={containerRef} className="top-0 z-10 text-[0.875rem] pb-0.5 mx-4">
-      <div className="relative flex">          
-        <motion.div
-          className="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40"
-          style={{ width: `${tabWidth}px` }}
-          initial={false}
-          animate={{ x: calcXPos(hoveredTab) }}
-          transition={springTransition}
-        />
-        {tabs.map((tab, index) => (
-          <button
-            key={index}
-            className="relative z-10 flex-1 px-4 py-2"
-            onClick={() => setActiveTab(index)}
-            onMouseEnter={() => setHoveredTab(index)}
-            onMouseLeave={() => setHoveredTab(null)}
-          >
-            {tab.title}
-          </button>
-        ))}
-      </div>
-    </div>
-    <div className="h-full px-4 overflow-x-clip">
-      <motion.div
-        initial={false}
-        animate={{ x: `${position}%` }}
-        transition={springTransition}
-        className='flex'
-      >
-        {tabs.map((tab, index) => (
-        <div key={index} className={`absolute h-[100vh] focus-visible:outline-none overflow-y-scroll w-full pb-40 transition-opacity duration-300 ${activeTab === index ? 'opacity-100' : 'opacity-0'}`}
-          style={{left: `${index * 100}%`}}>
-            {tab.content}
-          </div>
-        ))}
-      </motion.div>
-    </div>
-  </>
-  );
-};
-
-export default memo(TabbedContainer);

src/interface/components/ThemeCover.tsx

@@ -1,104 +0,0 @@
-import React, { useState } from 'react';
-import { CustomTheme, DownloadedTheme } from '../types/CustomThemes';
-import browser from 'webextension-polyfill';
-import { ArrowUpOnSquareIcon, PencilIcon } from '@heroicons/react/24/outline';
-import { sendThemeUpdate, setTheme } from '../hooks/ThemeManagment';
-import { DeleteDownloadedTheme } from '../pages/Store';
-
-type ThemeCoverProps = {
-  theme: Omit<CustomTheme, 'CustomImages'> | DownloadedTheme;
-  isSelected: boolean;
-  isEditMode: boolean;
-  downloaded?: boolean;
-  onThemeSelect: (themeId: string) => void;
-  onThemeDelete: (themeId: string) => void;
-};
-
-export const ThemeCover: React.FC<ThemeCoverProps> = React.memo(({
-  theme,
-  downloaded,
-  isSelected,
-  isEditMode,
-  onThemeSelect,
-  onThemeDelete,
-}) => {
-  const [uploading, setUploading] = useState<boolean>(false);
-  const handleThemeClick = async () => {
-    if (isEditMode) return;
-    if (downloaded) {
-      await sendThemeUpdate(theme as DownloadedTheme, true)
-      DeleteDownloadedTheme(theme.id);
-      setTheme(theme.id);
-    } else {
-      onThemeSelect(theme.id);
-    }
-  };
-
-  const handleDeleteClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onThemeDelete(theme.id);
-  };
-
-  const handleShareClick = (event: React.MouseEvent) => {
-    event?.preventDefault();
-    setUploading(true);
-    browser.runtime.sendMessage({ type: 'currentTab', info: 'ShareTheme', body: { themeID: theme.id } }).then(() => {
-      setUploading(false);
-    });
-  };
-
-  return (
-    <button
-      className={`relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 ${
-        isSelected ? 'dark:ring-2 ring-4' : 'ring-0'
-      }`}
-      onClick={handleThemeClick}
-    >
-      {isEditMode && (
-        <div
-          className="absolute z-20 flex w-6 h-6 p-2 text-white transition-all rounded-full opacity-0 top-1 right-2 dark:bg-red-600 place-items-center group-hover:opacity-100 group-hover:top-2"
-          onClick={handleDeleteClick}
-        >
-          <div className="w-4 h-0.5 bg-white"></div>
-        </div>
-      )}
-      
-      { ( !isEditMode ) && !downloaded /* && !theme.webURL */ ? (
-      <>
-        <div
-          className="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-[1.25rem]"
-          onClick={(event) => { event?.preventDefault(), browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator', body: { themeID: theme.id } }) }}
-        >
-          <PencilIcon className="w-4 h-4" />
-        </div>
-
-        <div
-          className="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full opacity-0 top-1 right-12 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-[1.25rem]"
-          onClick={handleShareClick}
-        >
-          {uploading ? <LoadingSpinner size={16} /> : <ArrowUpOnSquareIcon className="w-4 h-4" />}
-        </div>
-      </>
-      ) : null}
-
-      <div className="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900">
-        {theme.coverImage &&
-          <img
-            src={(typeof theme.coverImage) == 'string' ? theme.coverImage as string : URL.createObjectURL(theme.coverImage as Blob)}
-            alt={theme.name}
-            className="absolute inset-0 z-0 object-cover w-full h-full pointer-events-none"
-          />
-        }
-        {
-          theme.hideThemeName ? <></> :
-          <div className={`z-10 ${theme.coverImage && 'text-white'}`}>{theme.name}</div>
-        }
-      </div>
-    </button>
-  );
-});
-
-const LoadingSpinner = ({ size }: { size: number }) => {
-  return <div style={{ width: `${size}px`, height: `${size}px` }} className={`animate-spin rounded-full border-2 border-white border-t-2 border-t-transparent`}></div>;
-};
-

src/interface/components/ThemeSelector.tsx

@@ -1,268 +0,0 @@
-import React, { forwardRef, ForwardRefExoticComponent, RefAttributes, useCallback, useEffect, useImperativeHandle, useState } from 'react';
-import { deleteTheme, disableTheme, getDownloadedThemes, listThemes, sendThemeUpdate, setTheme } from '../hooks/ThemeManagment';
-import { DeleteDownloadedTheme } from '../pages/Store';
-import { ThemeCover } from './ThemeCover';
-import browser from 'webextension-polyfill';
-import { CustomTheme, DownloadedTheme } from '../types/CustomThemes';
-import { useSettingsContext } from '../SettingsContext';
-import { SettingsState } from '../types/AppProps';
-import { InstallTheme } from '../../seqta/ui/themes/downloadTheme';
-import SpinnerIcon from './LoadingSpinner';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import useVisibility from './useVisibility';
-import { debounce } from 'lodash';
-import { Mutex } from '../../seqta/utils/mutex';
-
-interface ThemeSelectorProps {
-  isEditMode: boolean;
-  ref: React.Ref<any>;
-}
-
-const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> & RefAttributes<any>> = forwardRef(({ isEditMode = false }, ref) => {
-  const [themes, setThemes] = useState<Omit<CustomTheme, 'CustomImages'>[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [tempTheme, setTempTheme] = useState<any>(null);
-  const { settingsState, setSettingsState } = useSettingsContext();
-  const [elementRef, isVisible] = useVisibility({
-    root: null, // Use the viewport as the root
-    rootMargin: '0px',
-    threshold: 0.1, // 10% of the element needs to be visible
-  });
-
-  const mutex = new Mutex();
-
-  const setSelectedTheme = (themeId: string) => {
-    setSettingsState((prevState: SettingsState) => ({
-      ...prevState,
-      selectedTheme: themeId,
-    }));
-  }
-
-  useImperativeHandle(ref, () => ({
-    disableTheme: async () => {
-      await disableTheme();
-      setSelectedTheme('');
-    }
-  }));
-
-  useEffect(() => {
-    const handleThemeChange = async () => {
-      //await new Promise((resolve) => setTimeout(resolve, 500));
-      fetchThemes();
-    };
-
-    window.addEventListener('message', (message) => {
-      if (message.data.type === 'themeChanged') {
-        handleThemeChange();
-      }
-    });
-
-    return () => {
-      window.removeEventListener('message', (message) => {
-        if (message.data.type === 'themeChanged') {
-          handleThemeChange();
-        }
-      });
-    };
-  }, []);
-
-  useEffect(() => {
-    let intervalId: any;
-    if (isVisible) {
-      intervalId = setInterval(fetchThemes, 2000);
-    } else {
-      clearInterval(intervalId);
-    }
-
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [isVisible]);
-
-  const fetchThemes = async () => {
-    try {
-      const { themes, selectedTheme } = await listThemes();
-      let tempDownloadedThemes = await getDownloadedThemes();
-      
-      setThemes(themes);
-      setSelectedTheme(selectedTheme ? selectedTheme : '');
-            
-      const matchingThemes = themes.filter(theme => 
-        tempDownloadedThemes.some(downloadedTheme => downloadedTheme.id === theme.id)
-      );
-
-      if (matchingThemes.length > 0) {
-        matchingThemes.forEach((theme) => {
-          DeleteDownloadedTheme(theme.id);
-          tempDownloadedThemes = tempDownloadedThemes.filter(downloadedTheme => downloadedTheme.id !== theme.id);
-        })
-      }
-
-      tempDownloadedThemes.forEach(async (theme) => {
-        await sendThemeUpdate(theme as DownloadedTheme, true, false)
-        DeleteDownloadedTheme(theme.id);
-      });
-    } catch (error) {
-      console.error('Error fetching themes:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  
-  useEffect(() => {
-    fetchThemes();
-  }, []);
-
-  const handleThemeSelect = useCallback(
-    async (themeId: string) => {
-      const unlock = await mutex.lock();
-      try {
-        if (themeId === settingsState.selectedTheme) {
-          await disableTheme();
-          setSelectedTheme('');
-        } else {
-          const selectedTheme = themes.find((theme) => theme.id === themeId);
-          if (selectedTheme) {
-            await setTheme(selectedTheme.id);
-            setSelectedTheme(themeId);
-          }
-        }
-      } finally {
-        unlock();
-      }
-    },
-    [settingsState.selectedTheme, themes]
-  );
-
-  const handleThemeSelectDebounced = useCallback(
-    debounce(handleThemeSelect, 100),
-    [handleThemeSelect]
-  );
-
-  const handleThemeDelete = useCallback(
-    async (themeId: string) => {
-      try {
-        await deleteTheme(themeId);
-        setThemes((prevThemes) => prevThemes.filter((theme) => theme.id !== themeId));
-        if (themeId === settingsState.selectedTheme) {
-          setSelectedTheme('')
-          disableTheme();
-        }
-      } catch (error) {
-        console.error('Error deleting theme:', error);
-      }
-    },
-    [settingsState.selectedTheme]
-  );
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = () => {
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file: File = e.dataTransfer.files[0];
-    const reader: FileReader = new FileReader();
-
-    reader.onload = async (event: ProgressEvent<FileReader>) => {
-      try {
-        const result: any = JSON.parse(event.target!.result as string);
-        try {
-          setTempTheme(result);
-          await InstallTheme(result);
-          await fetchThemes();
-          setTempTheme(null);
-        } catch(error) {
-          toast.error('Invalid file type. Please upload a valid theme file.');
-          setTempTheme(null);
-        }
-      } catch (error) {
-        toast.error('Error parsing file. Please upload a valid JSON theme file.');
-        setTempTheme(null);
-      }
-    };
-
-    reader.readAsText(file);
-  };
-
-  if (isLoading) {
-    return <div className='text-center'>Loading themes...</div>;
-  }
-
-  return (
-    <div
-      ref={elementRef}
-      className={`my-3 w-full`}
-      onDragOver={handleDragOver} 
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-      >
-      <div className={`${isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50`}>
-        <div className='sticky w-full h-64 bg-white shadow-xl dark:bg-zinc-900 top-5 dark:text-white rounded-xl outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700'>
-          <div className='flex items-center justify-center h-full'>
-            <div className='flex flex-col items-center justify-center'>
-              <svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-                <g fill="currentColor">
-                  <path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
-                  <path d="M23.2,33.6a1,1,0,0,0,1.6,0l9-12A1,1,0,0,0,33,20H26V5a2,2,0,0,0-4,0V20H15a1,1,0,0,0-.8,1.6Z" fill="currentColor"/>
-                </g>
-              </svg>
-              <span className='text-lg'>Import Theme</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <h2 className="pb-2 text-lg font-bold">Themes</h2>
-      <div className="flex flex-col gap-2 px-1">
-
-        {themes.map((theme) => (
-          <ThemeCover
-            key={theme.id}
-            theme={theme}
-            isSelected={theme.id === settingsState.selectedTheme}
-            isEditMode={isEditMode}
-            onThemeSelect={handleThemeSelectDebounced}
-            onThemeDelete={handleThemeDelete}
-          />
-        ))}
-
-        {tempTheme && (
-          <div className="flex justify-center w-full bg-gray-200 rounded-xl dark:bg-zinc-700/50 place-items-center aspect-theme animate-pulse">
-            <SpinnerIcon className='opacity-50' />
-          </div>
-        )}
-
-        { themes.length > 0 && <div
-          id="divider"
-          className="w-full h-[1px] my-2 bg-zinc-100 dark:bg-zinc-600"
-        ></div>}
-
-        <button
-          onClick={() => browser.tabs.create({ url: browser.runtime.getURL('src/interface/index.html#store')})}
-          className="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
-        >
-          <span className="text-xl font-IconFamily">{'\uecc5'}</span>
-          <span className="ml-2">Theme Store</span>
-        </button>
-
-        <button
-          onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })}
-          className="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
-        >
-          <span className="text-xl font-IconFamily">{'\uec60'}</span>
-          <span className="ml-2">Create your own</span>
-        </button>
-      </div>
-    </div>
-  );
-});
-
-export default ThemeSelector;

src/interface/components/store/Backgrounds.svelte

@@ -0,0 +1,325 @@
+<script lang="ts">
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
+  import Spinner from '../Spinner.svelte';
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { Index } from 'flexsearch';
+  import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
+
+  const themeManager = ThemeManager.getInstance();
+
+  type Background = { id: string; category: string; type: string; lowResUrl: string; highResUrl: string; name: string; description: string; featured?: boolean };
+  let { searchTerm } = $props<{ searchTerm: string }>();
+
+  // Existing states
+  let backgrounds = $state<Background[]>([]);
+  let selectedCategory = $state<string>('All');
+  let error = $state<string | null>(null);
+  let selectedBackground = $state<string | null>(null);
+  let isLoading = $state<boolean>(true);
+  let savedBackgrounds = $state<string[]>([]);
+  let installingBackgrounds = $state<Set<string>>(new Set());
+  let debugInfo = $state<string>('');
+  let searchIndex = $state<Index | null>(null);
+
+  // New state variables
+  let activeTab = $state<'all' | 'installed' | 'photos' | 'videos'>('all');
+  let sortBy = $state<'newest' | 'popular' | 'name'>('newest');
+
+  // Existing functions
+  const loadStore = async () => {
+    try {
+      debugInfo = 'Fetching backgrounds...';
+      const response = await fetch('https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/backgrounds.json');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      backgrounds = data.backgrounds;
+      
+      // Initialize FlexSearch index
+      const index = new Index({
+        tokenize: "forward",
+        preset: "score"
+      });
+      
+      // Add backgrounds to the index
+      backgrounds.forEach((bg, i) => {
+        index.add(i, bg.name + " " + bg.description);
+      });
+      
+      searchIndex = index;
+      debugInfo = `Loaded ${backgrounds.length} backgrounds`;
+      await loadSavedBackgrounds();
+    } catch (e) {
+      error = 'Failed to load background store';
+      debugInfo = `Error: ${e instanceof Error ? e.message : 'Unknown error'}`;
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  async function loadSavedBackgrounds(): Promise<void> {
+    try {
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB.");
+      }
+      await openDatabase();
+      const data = await readAllData();
+      savedBackgrounds = data.map(item => item.id);
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Unknown error occurred';
+    }
+  }
+
+  // Load data on mount
+  loadStore();
+
+  // Derived states
+  let filteredBackgrounds = $derived((() => {
+    let filtered = backgrounds;
+    
+    // Use FlexSearch if there's a search term
+    if (searchTerm.trim() && searchIndex) {
+      const results = searchIndex.search(searchTerm) as number[];
+      filtered = results.map(i => backgrounds[i]);
+    }
+
+    // Apply category filtering
+    filtered = filtered.filter((bg: Background) => {
+      return selectedCategory === 'All' 
+        ? true 
+        : selectedCategory === 'Featured' 
+          ? bg.featured 
+          : bg.category === selectedCategory;
+    });
+
+    // Apply sorting
+    filtered.sort((a: Background, b: Background) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'newest':
+          return -1;
+        case 'popular':
+          return -1;
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  })());
+
+  let categories = $derived([...new Set(backgrounds.map(bg => bg.category))]);
+
+  // Background management functions
+  async function saveBackgroundFromUrl(url: string, id: string, fileType: string): Promise<void> {
+    try {
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB.");
+      }
+
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const hasSpace = await hasEnoughStorageSpace(blob.size);
+
+      if (!hasSpace) {
+        throw new Error("Not enough storage space.");
+      }
+
+      await writeData(id, fileType, blob);
+      savedBackgrounds = [...savedBackgrounds, id];
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Unknown error occurred';
+    }
+  }
+
+  async function deleteBackground(fileId: string): Promise<void> {
+    installingBackgrounds = new Set(installingBackgrounds).add(fileId);
+    try {
+      await deleteData(fileId);
+      savedBackgrounds = savedBackgrounds.filter(id => id !== fileId);
+
+      if (selectedBackground === fileId) {
+        selectNoBackground();
+      }
+    } catch (e) {
+      error = e instanceof Error ? `Failed to delete background: ${e.message}` : 'Unknown error occurred';
+    } finally {
+      installingBackgrounds = new Set(installingBackgrounds);
+      installingBackgrounds.delete(fileId);
+    }
+  }
+
+  async function installBackground(background: Background) {
+    installingBackgrounds = new Set(installingBackgrounds).add(background.id);
+    try {
+      await saveBackgroundFromUrl(background.highResUrl, background.id, background.type);
+      backgroundUpdates.triggerUpdate();
+    } finally {
+      installingBackgrounds = new Set(installingBackgrounds);
+      installingBackgrounds.delete(background.id);
+    }
+  }
+
+  async function toggleBackgroundInstallation(background: Background) {
+    if (savedBackgrounds.includes(background.id)) {
+      await deleteBackground(background.id);
+    } else {
+      await installBackground(background);
+    }
+  }
+  
+  function selectNoBackground() {
+    selectedBackground = null;
+    themeManager.setTheme('');
+  }
+</script>
+
+<div class="flex h-full">
+  <!-- Sidebar -->
+  <div class="p-4 w-64 h-full border-r border-zinc-200 dark:border-zinc-700">
+    <div class="mb-8">
+      <h2 class="mb-4 text-lg font-semibold">Categories</h2>
+      <nav class="space-y-2">
+        <button
+          class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'All' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
+          onclick={() => selectedCategory = 'All'}
+        >
+          All
+        </button>
+        <button
+          class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'Featured' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
+          onclick={() => selectedCategory = 'Featured'}
+        >
+          Featured
+        </button>
+        
+        <div class="my-2 border-b border-zinc-200 dark:border-zinc-700"></div>
+        
+        {#each categories as category}
+          <button
+            class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === category ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
+            onclick={() => selectedCategory = category}
+          >
+            {category}
+          </button>
+        {/each}
+      </nav>
+    </div>
+  </div>
+
+  <!-- Main Content -->
+  <div class="overflow-auto flex-1">
+    <!-- Header -->
+    <div class="sticky top-0 z-10 p-4 border-b bg-[#F1F1F3] dark:bg-zinc-900 dark:border-zinc-700">
+      <div class="flex justify-between items-center mb-4">
+        <h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
+        <div class="flex gap-4 items-center">
+          <select 
+            bind:value={sortBy} 
+            class="p-2 rounded-lg border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
+          >
+            <option value="newest">Newest</option>
+            <option value="name">Name</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Tabs -->
+      <div class="flex gap-2">
+        {#each ['All', 'Installed', 'Photos', 'Videos'] as tab}
+          <button
+            class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
+              ${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' : 
+                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
+            onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
+          >
+            {tab}
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Background Grid -->
+    <div class="p-4">
+      {#if isLoading}
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {#each Array(9) as _}
+            <div class="overflow-hidden relative rounded-lg animate-pulse">
+              <!-- Image placeholder -->
+              <div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
+              <!-- Gradient overlay -->
+              <div class="absolute right-0 bottom-0 left-0 h-16 to-transparent bg-linear-to-t from-zinc-300 dark:from-zinc-700">
+                <!-- Title placeholder -->
+                <div class="absolute right-2 bottom-2 left-2">
+                  <div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
+                  <div class="mt-2 w-1/2 h-3 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {:else if error}
+        <div class="p-4 text-red-500 bg-red-100 rounded-lg">
+          Error: {error}
+        </div>
+      {:else}
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {#each filteredBackgrounds.filter((bg: Background) => {
+            if (activeTab === 'installed') return savedBackgrounds.includes(bg.id);
+            if (activeTab === 'photos') return bg.type === 'image';
+            if (activeTab === 'videos') return bg.type !== 'image';
+            return true;
+          }) as background (background.id)}
+            <div
+              class="overflow-hidden relative rounded-lg shadow-lg cursor-pointer group"
+              onclick={() => toggleBackgroundInstallation(background)}
+              onkeydown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  toggleBackgroundInstallation(background);
+                }
+              }}
+              role="button"
+              tabindex="0"
+            >
+              {#if background.type === 'image'}
+                <img src={background.lowResUrl} alt={background.name} class="object-cover w-full h-48 transition-all duration-300 group-hover:scale-105" />
+              {:else}
+                <video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
+              {/if}
+              <div class={`flex absolute inset-0 justify-center items-center opacity-0 transition-opacity duration-300 bg-black/50 group-hover:opacity-100 ${installingBackgrounds.has(background.id) ? 'opacity-100' : ''}`}>
+                {#if installingBackgrounds.has(background.id)}
+                  <Spinner />
+                {:else if savedBackgrounds.includes(background.id)}
+                  <span class="flex items-center text-white">
+                    <span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true">&#xed2c;</span>
+                    <span class="text-sm font-semibold">Remove</span>
+                  </span>
+                {:else}
+                  <span class="flex items-center text-white">
+                    <span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true">&#xea9a;</span>
+                    <span class="text-sm font-semibold">Install</span>
+                  </span>
+                {/if}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+{#if settingsState.devMode}
+  <div class="p-4 mt-8 rounded bg-zinc-100 dark:bg-zinc-800">
+    <h3 class="mb-2 font-bold">Debug Info:</h3>
+    <p>{debugInfo}</p>
+    <p>Total backgrounds: {backgrounds.length}</p>
+    <p>Categories: {categories.join(', ') || '<empty>'}</p>
+    <p>Active Tab: {activeTab}</p>
+    <p>Selected Category: {selectedCategory}</p>
+  </div>
+{/if}
+

src/interface/components/store/CoverSwiper.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import type { Theme } from '@/interface/types/Theme';
+  import emblaCarouselSvelte from 'embla-carousel-svelte';
+  import Autoplay from 'embla-carousel-autoplay';
+
+  let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void }>();
+  let emblaApi = $state();
+
+  const options = { loop: true };
+  const plugins = [
+    Autoplay({
+      delay: 5000,
+      stopOnInteraction: false,
+      stopOnMouseEnter: true
+    })
+  ];
+
+  function onInit(event: CustomEvent) {
+    emblaApi = event.detail;
+  }
+
+  // @ts-ignore
+  const slidePrev = () => emblaApi?.scrollPrev();
+  // @ts-ignore
+  const slideNext = () => emblaApi?.scrollNext();
+</script>
+
+{#if coverThemes.length > 0}
+  <div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
+    <div 
+      class="w-full aspect-8/3" 
+      use:emblaCarouselSvelte={{ options, plugins }} 
+      onemblaInit={onInit}
+    >
+      <div class="flex">
+        {#each coverThemes as theme}
+          <div
+            class="relative flex-[0_0_100%] cursor-pointer rounded-xl overflow-clip"
+            role="button"
+            tabindex="0"
+            onkeydown={(e) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
+            onclick={() => setDisplayTheme(theme)}
+          >
+            <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
+            <div class='absolute bottom-0 left-0 p-8 z-[1]'>
+              <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
+              <p class='text-lg text-white'>{theme.description}</p>
+            </div>
+            <div class='absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80'></div>
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Navigation buttons -->
+    <div class='flex absolute right-2 bottom-2 z-10 gap-2'>
+      <button aria-label="Previous" onclick={slidePrev} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
+        </svg>
+      </button>
+      <button aria-label="Next" onclick={slideNext} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}

src/interface/components/store/FilterPanel.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  let dispatch = createEventDispatcher();
+
+  let filters = $state({
+    type: [] as string[],
+    color: [] as string[],
+    resolution: [] as string[],
+    orientation: [] as string[]
+  });
+
+  $effect(() => {
+    dispatch('filter', filters);
+  });
+
+  function toggleFilter(category: keyof typeof filters, value: string) {
+    if (filters[category].includes(value)) {
+      filters[category] = filters[category].filter(v => v !== value);
+    } else {
+      filters[category] = [...filters[category], value];
+    }
+  }
+
+  function clearFilters() {
+    filters = {
+      type: [],
+      color: [],
+      resolution: [],
+      orientation: []
+    };
+  }
+</script>
+
+<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
+  <h2 class="mb-4 text-xl font-semibold">Filters</h2>
+  
+  <div class="mb-4">
+    <h3 class="mb-2 font-medium">Type</h3>
+    <div class="space-y-2">
+      <label class="flex items-center">
+        <input type="checkbox" checked={filters.type.includes('image')} onchange={() => toggleFilter('type', 'image')}>
+        <span class="ml-2">Image</span>
+      </label>
+      <label class="flex items-center">
+        <input type="checkbox" checked={filters.type.includes('video')} onchange={() => toggleFilter('type', 'video')}>
+        <span class="ml-2">Video</span>
+      </label>
+    </div>
+  </div>
+    
+  <button 
+    class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
+    onclick={clearFilters}
+  >
+    Clear Filters
+  </button>
+</div>

src/interface/components/store/Header.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import logo from '@/resources/icons/betterseqta-dark-full.png';
+  import logoDark from '@/resources/icons/betterseqta-light-full.png';
+  import { closeStore } from '@/seqta/ui/renderStore'
+  import browser from 'webextension-polyfill';
+
+  // Props
+  let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
+    searchTerm: string,
+    setSearchTerm: (term: string) => void,
+    darkMode: boolean,
+    activeTab: string,
+    setActiveTab: (tab: string) => void
+  }>();
+
+  // Clear search input function
+  const clearSearch = () => {
+    setSearchTerm('');
+  };
+</script>
+
+<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
+  <div class="flex justify-between items-center px-4 py-1">
+    <div class="flex gap-4 place-items-center cursor-pointer" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
+      <img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
+      <img src={browser.runtime.getURL(logoDark)} class="h-14 {darkMode ? '' : 'hidden'}" alt="Dark Logo" />
+
+      <div class="w-[1px] h-10 my-auto bg-zinc-400 dark:bg-zinc-600"></div>
+
+      <button
+        class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'themes' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
+        onclick={() => setActiveTab('themes')}
+      >
+        Themes
+      </button>
+      <button
+        class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'backgrounds' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
+        onclick={() => setActiveTab('backgrounds')}
+      >
+        Backgrounds
+      </button>
+    </div>
+
+    <div class="flex relative gap-2">
+      <input
+        type="text"
+        placeholder="Search themes..."
+        value={searchTerm}
+        oninput={(e: any) => setSearchTerm(e.target.value)}
+        class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
+      <svg
+        class="absolute left-3 top-1/2 w-5 h-5 text-gray-400 transform -translate-y-1/2 dark:text-gray-200"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+
+      <!-- Close Button -->
+      <button
+        onclick={closeStore}
+        class="p-1 px-3"
+      >
+        <span class="text-2xl font-IconFamily">&#xed8a;</span>
+      </button>
+    </div>
+  </div>
+</header>

src/interface/components/store/ThemeCard.svelte

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

src/interface/components/store/ThemeGrid.svelte

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

src/interface/components/store/ThemeModal.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import type { Theme } from '@/interface/types/Theme'
+  import { fade } from 'svelte/transition';
+  import { animate } from 'motion';
+
+  let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme } = $props<{
+    theme: Theme | null;
+    currentThemes: string[];
+    setDisplayTheme: (theme: Theme | null) => void;
+    onInstall: (themeId: string) => void;
+    onRemove: (themeId: string) => void;
+    allThemes: Theme[];
+    displayTheme: Theme | null;
+  }>();
+  let installing = $state(false);
+  let modalElement: HTMLElement;
+
+  // Function to get related themes
+  function getRelatedThemes() {
+    return allThemes
+      .filter((t: Theme) => t.id !== theme.id)
+      .sort((a: Theme, b: Theme) => a.name.localeCompare(theme.name) - b.name.localeCompare(theme.name))
+      .slice(0, 4);
+  }
+
+  $effect(() => {
+    if (displayTheme) {
+      animate(
+        modalElement,
+        { y: [500, 0], opacity: [0, 1] },
+        {
+          type: 'spring',
+          stiffness: 150,
+          damping: 20
+        }
+      );
+    }
+  });
+
+  const hideModal = (relatedTheme?: Theme | null) => {
+    animate(
+      modalElement,
+      { y: [10, 500], opacity: [1, 0] },
+      {
+        type: 'spring',
+        stiffness: 150,
+        damping: 20
+      }
+    );
+    setTimeout(() => {
+      setDisplayTheme(relatedTheme ?? null);
+    }, 100);
+  }
+</script>
+
+<div 
+  class="flex fixed inset-0 z-50 justify-center items-end bg-black/70" 
+  onclick={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  onkeydown={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  role="button" 
+  tabindex="-1" 
+  transition:fade
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={modalElement}
+    class="w-full max-w-[600px] h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll no-scrollbar cursor-auto" 
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+  >
+    <div class="relative h-auto">
+      <button class="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200" onclick={() => hideModal()}>
+        {'\ued8a'}
+      </button>
+      <h2 class="mb-4 text-2xl font-bold">
+        {theme.name}
+      </h2>
+      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
+      <p class="mb-4 text-gray-700 dark:text-gray-300">
+        {theme.description}
+      </p>
+      {#if currentThemes.includes(theme.id)}
+        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+          {#if installing}
+            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
+            </svg>
+          {/if}
+          <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
+        </button>
+      {:else}
+        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+          {#if installing}
+            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
+            </svg>
+          {/if}
+          <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Install</span>
+        </button>
+      {/if}
+
+      <div class="my-8 border-b border-zinc-200 dark:border-zinc-700"></div>
+
+      <h3 class="mb-4 text-lg font-bold">
+        Similar Themes
+      </h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        {#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
+          <button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
+            <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border">
+              <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5">
+                {relatedTheme.name}
+              </div>
+              <div class="absolute bottom-0 z-0 w-full h-3/4 to-transparent from-black/80 bg-linear-to-t"></div>
+              <img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
+            </div>
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>

src/interface/components/store/header.tsx

@@ -1,36 +0,0 @@
-import logo from '../../../resources/icons/betterseqta-dark-full.png';
-import logoDark from '../../../resources/icons/betterseqta-light-full.png';
-
-export default function header({ searchTerm, setSearchTerm }: { searchTerm: string, setSearchTerm: (value: string) => void }) {
-  return <header className="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800/90 backdrop-blur-xl">
-    <div className="flex items-center justify-between px-4 py-1">
-      <div className="flex gap-4 cursor-pointer place-items-center" onClick={() => setSearchTerm('')}>
-        <img src={logo} className="h-14 dark:hidden" />
-        <img src={logoDark} className="hidden h-14 dark:block" />
-
-        <div className="w-[1px] h-10 my-auto bg-zinc-400 dark:bg-zinc-600" />
-
-        <h1 className="text-xl font-semibold">Theme Store</h1>
-      </div>
-      <div className="relative flex gap-2">
-        <input
-          type="text"
-          placeholder="Search themes..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
-        <svg
-          className="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
-          fill="none"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-        </svg>
-      </div>
-    </div>
-  </header>;
-}

src/interface/components/themeCreator/divider.svelte

@@ -0,0 +1,3 @@
+<script lang="ts"></script>
+
+<div class='w-full h-0.5 my-4 bg-zinc-200 dark:bg-zinc-700'></div>

src/interface/components/themes/BackgroundItem.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Background {
+    id: string;
+    type: string;
+    blob: Blob | null;
+    url?: string | undefined;
+  }
+
+  let { bg, isSelected, isEditMode, onClick, onDelete } = $props<{ bg: Background, isSelected: boolean, isEditMode: boolean, onClick: () => void, onDelete: () => void }>();
+
+</script>
+
+<div
+  onclick={onClick}
+  onkeydown={onClick}
+  tabindex="-1"
+  role="button"
+  class="relative w-16 h-16 cursor-pointer rounded-xl transition ring-3 dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
+>
+  {#if isEditMode}
+    <div
+      tabindex="-1"
+      role="button"
+      class="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
+      onclick={onDelete}
+      onkeydown={onDelete}
+    >
+      <div class="w-4 h-0.5 bg-white"></div>
+    </div>
+  {/if}
+  {#if bg.url}
+    {#if bg.type === 'image'}
+      <img class="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
+    {:else if bg.type === 'video'}
+      <video muted loop autoplay src={bg.url} class="object-cover w-full h-full rounded-xl"></video>
+    {/if}
+  {/if}
+</div>

src/interface/components/themes/BackgroundSelector.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader'
+  import BackgroundUploader from './BackgroundUploader.svelte';
+  import BackgroundItem from './BackgroundItem.svelte'
+  import { onMount, onDestroy } from 'svelte'
+  import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
+  import { delay } from 'lodash'
+  import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
+
+  let { isEditMode, selectNoBackground = $bindable(), selectedBackground = $bindable() } = $props<{ isEditMode: boolean, selectNoBackground: () => void, selectedBackground: string | null }>();
+  let backgrounds = $state<{ id: string; type: string; blob: Blob | null; url?: string }[]>([]);
+  let error = $state<string | null>(null);
+
+  let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
+  let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));
+
+  let isVisible = $state(false);
+  let element: HTMLElement;
+  let observer: MutationObserver;
+  let parentElement: HTMLElement | null = null;
+
+  async function getTheme() {
+    return localStorage.getItem('selectedBackground');
+  }
+
+  async function setTheme(theme: string) {
+    localStorage.setItem('selectedBackground', theme);
+  }
+
+  async function handleFileChange(file: File): Promise<void> {
+    if (!file) return;
+
+    try {
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to save backgrounds.");
+      }
+
+      const hasSpace = await hasEnoughStorageSpace(file.size);
+      if (!hasSpace) {
+        throw new Error("Not enough storage space to save this background.");
+      }
+
+      const fileId = `${Date.now()}-${file.name}`;
+      const fileType = file.type.split('/')[0];
+      const blob = new Blob([file], { type: file.type });
+
+      await writeData(fileId, fileType, blob);
+      backgrounds = [...backgrounds, { id: fileId, type: fileType, blob, url: URL.createObjectURL(blob) }];
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  async function loadBackgroundMetadata(): Promise<void> {
+    try {
+      error = null;
+
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
+      }
+
+      await openDatabase();
+      const data = await readAllData();
+      selectedBackground = await getTheme();
+      
+      // Only load metadata (id and type) for placeholders
+      backgrounds = data.map(({ id, type }) => ({ id, type, blob: null }));
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  async function syncBackgrounds(): Promise<void> {
+    try {
+      error = null;
+
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
+      }
+
+      const dbData = await readAllData();
+      
+      // Release existing object URLs to prevent memory leaks
+      backgrounds.forEach(bg => {
+        if (bg.url) URL.revokeObjectURL(bg.url);
+      });
+
+      // Create fresh background objects with new object URLs
+      backgrounds = dbData.map(bg => ({
+        id: bg.id,
+        type: bg.type,
+        blob: bg.blob,
+        url: URL.createObjectURL(bg.blob)
+      }));
+
+      // Check if selected background still exists
+      if (selectedBackground && !backgrounds.some(bg => bg.id === selectedBackground)) {
+        selectNoBackground();
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  function selectBackground(fileId: string): void {
+    if (selectedBackground === fileId) {
+      selectNoBackground();
+      return;
+    }
+    
+    selectedBackground = fileId;
+    setTheme(fileId);
+  }
+
+  async function deleteBackground(fileId: string): Promise<void> {
+    try {
+      await deleteData(fileId);
+      backgrounds = backgrounds.filter(bg => bg.id !== fileId);
+
+      if (selectedBackground === fileId) {
+        selectNoBackground();
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        error = `Failed to delete background: ${e.message}`;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  selectNoBackground = () => {
+    selectedBackground = null;
+    setTheme('');
+  }
+
+  $effect(() => {
+    loadBackground();
+    selectedBackground
+  });
+
+  $effect(() => {
+    if (error) {
+      console.error(error);
+    }
+  });
+
+  function checkActiveClass() {
+    if (parentElement?.classList.contains('active')) {
+      delay(() => {
+        isVisible = true;
+        syncBackgrounds();
+      }, 600);
+    }
+  }
+
+  onMount(() => {
+    loadBackgroundMetadata();
+    backgroundUpdates.addListener(syncBackgrounds);
+    
+    parentElement = element.closest('.tab');
+    if (parentElement) {
+      observer = new MutationObserver(checkActiveClass);
+      observer.observe(parentElement, { attributes: true, attributeFilter: ['class'] });
+
+      return () => {
+        observer.disconnect();
+        backgroundUpdates.removeListener(syncBackgrounds);
+      };
+    }
+  });
+
+  onDestroy(() => {
+    if (observer) {
+      observer.disconnect();
+    }
+  });
+</script>
+
+<div bind:this={element} class="relative px-1 { !( isEditMode && imageBackgrounds.length === 0 && videoBackgrounds.length === 0 ) && 'pt-2' }">
+  {#if !(imageBackgrounds.length === 0 && isEditMode)}
+    <h2 class="pb-2 text-lg font-bold">Background Images</h2>
+    <div class="flex flex-wrap gap-4 mb-4">
+      {#if !isEditMode}
+        <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
+      {/if}
+      {#each imageBackgrounds as bg (bg.id)}
+        {#if isVisible && bg.blob}
+          <BackgroundItem
+            bg={bg}
+            isSelected={selectedBackground === bg.id}
+            isEditMode={isEditMode}
+            onClick={() => selectBackground(bg.id)}
+            onDelete={() => deleteBackground(bg.id)}/>
+        {:else}
+          <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+
+  {#if !(videoBackgrounds.length === 0 && isEditMode)}
+    <h2 class="py-2 text-lg font-bold">Background Videos</h2>
+    <div class="flex flex-wrap gap-4">
+      {#if !isEditMode}
+        <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
+      {/if}
+      {#each videoBackgrounds as bg (bg.id)}
+        {#if isVisible && bg.blob}
+          <BackgroundItem
+            bg={bg}
+            isSelected={selectedBackground === bg.id}
+            isEditMode={isEditMode}
+            onClick={() => selectBackground(bg.id)}
+            onDelete={() => deleteBackground(bg.id)}
+          />
+        {:else}
+          <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>

src/interface/components/themes/BackgroundUploader.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  
+  const dispatch = createEventDispatcher();
+  
+  function handleFileChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) {
+      dispatch('fileChange', file);
+    }
+  }
+</script>
+
+<div class="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-100 dark:bg-zinc-900">
+  <div class="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
+    <!--  Plus icon -->
+    
+  </div>
+  <input
+    type="file"
+    accept="image/*, video/mp4"
+    on:change={handleFileChange}
+    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+  />
+</div>

src/interface/components/themes/ThemeSelector.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
+  import { onDestroy, onMount } from 'svelte'
+  import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
+  import { OpenStorePage } from '@/seqta/ui/renderStore'
+  import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
+  import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
+
+  const themeManager = ThemeManager.getInstance();
+
+  let themes = $state<ThemeList | null>(null);
+  let { isEditMode } = $props<{ isEditMode: boolean }>();
+  let isDragging = $state(false);
+  let tempTheme = $state(null);
+
+  const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
+    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;
+    }
+  }
+
+  const handleThemeDelete = async (themeId: string) => {
+    try {
+      await themeManager.deleteTheme(themeId);
+      if (!themes) return;
+
+      themes.themes = themes.themes.filter(theme => theme.id !== themeId);
+      if (themeId === themes.selectedTheme) {
+        themes.selectedTheme = '';
+        await themeManager.disableTheme();
+      }
+    } catch (error) {
+      console.error('Error deleting theme:', error);
+    }
+  }
+
+  const handleShareTheme = async (theme: CustomTheme) => {
+    try {
+      await themeManager.shareTheme(theme.id);
+    } catch (error) {
+      console.error('Error sharing theme:', error);
+    }
+  }
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    isDragging = true;
+  }
+
+  const handleDragLeave = () => {
+    isDragging = false;
+  }
+
+  const handleDrop = async (e: DragEvent) => {
+    e.preventDefault();
+    isDragging = false;
+    const file = e.dataTransfer?.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (event: ProgressEvent<FileReader>) => {
+      try {
+        const result = JSON.parse(event.target?.result as string);
+        tempTheme = result;
+        await themeManager.installTheme(result);
+        await fetchThemes();
+      } catch (error) {
+        console.error('Error parsing file:', error);
+        alert('Error parsing file. Please upload a valid JSON theme file.');
+      }
+      tempTheme = null;
+    };
+    reader.readAsText(file);
+  }
+
+  const fetchThemes = async () => {
+    themes = {
+      themes: await themeManager.getAvailableThemes(),
+      selectedTheme: themeManager.getSelectedThemeId() || '',
+    }
+  }
+
+  onMount(async () => {
+    await fetchThemes();
+
+    themeUpdates.addListener(fetchThemes);
+  })
+
+  onDestroy(() => {
+    themeUpdates.removeListener(fetchThemes);
+  })
+</script>
+
+<div
+  class="pt-5 mb-1 w-full"
+  role="list"
+  tabindex="-1"
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+>
+  <div class="{isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50">
+    <div class="sticky top-5 w-full h-64 bg-white rounded-xl shadow-xl dark:bg-zinc-900 dark:text-white outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
+      <div class="flex justify-center items-center h-full">
+        <div class="flex flex-col justify-center items-center">
+          <svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+            <g fill="currentColor">
+              <path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
+              <path d="M23.2,33.6a1,1,0,0,0,1.6,0l9-12A1,1,0,0,0,33,20H26V5a2,2,0,0,0-4,0V20H15a1,1,0,0,0-.8,1.6Z" fill="currentColor"/>
+            </g>
+          </svg>
+          <span class="text-lg">Import Theme</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <h2 class="pb-2 text-lg font-bold">Themes</h2>
+  <div class="flex flex-col gap-2 px-2">
+    {#if themes}
+      {#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)}
+        >
+          {#if isEditMode}
+            <div
+              class="flex absolute top-2 right-2 z-20 place-items-center p-2 w-6 h-6 text-white bg-red-600 rounded-full opacity-100"
+              onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
+              role="button"
+              tabindex="-1"
+            >
+              <div class="w-4 h-0.5 bg-white"></div>
+            </div>
+          {/if}
+
+          {#if !isEditMode}
+            <div
+              class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
+              onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') OpenThemeCreator(theme.id); closeExtensionPopup() }}
+              role="button"
+              tabindex="-1"
+            >
+              <span class="text-lg font-IconFamily">&#xeaa5;</span>
+            </div>
+
+            <div
+              class="flex absolute right-12 top-1/4 z-20 place-items-center p-2 w-8 h-8 text-center rounded-full opacity-0 transition-all -translate-y-1/2 text-white/80 bg-black/50 group-hover:opacity-100 group-hover:top-1/2"
+              onclick={(event) => { event.stopPropagation(); handleShareTheme(theme) }}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleShareTheme(theme) }}
+              role="button"
+              tabindex="-1"
+            >
+              <span class="text-lg font-IconFamily">&#xecb3;</span>
+            </div>
+          {/if}
+
+          <div class="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900 { isEditMode ? 'animate-shake brightness-90' : ''}">
+            {#if theme.coverImage}
+              <img
+                src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
+                alt={theme.name}
+                class="object-cover absolute inset-0 z-0 w-full h-full pointer-events-none"
+              />
+            {/if}
+            {#if !theme.hideThemeName}
+              <div class="z-10 {theme.coverImage ? 'text-white' : ''}">{theme.name}</div>
+            {/if}
+          </div>
+        </button>
+      {/each}
+    {/if}
+
+    {#if tempTheme}
+      <div class="flex justify-center place-items-center w-full bg-gray-200 rounded-xl animate-pulse dark:bg-zinc-700/50 aspect-theme">
+        <svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+    {/if}
+
+    {#if themes && themes.themes.length > 0}
+      <div id="divider" class="w-full h-[1px] my-2 bg-zinc-100 dark:bg-zinc-600"></div>
+    {/if}
+
+    <button
+      onclick={() => OpenStorePage()}
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+    >
+      <span class="text-xl font-IconFamily">&#xecc5;</span>
+      <span class="ml-2">Theme Store</span>
+    </button>
+
+    <button
+      onclick={() => { OpenThemeCreator(); closeExtensionPopup() }}
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+    >
+      <span class="text-xl font-IconFamily">&#xec60;</span>
+      <span class="ml-2">Create your own</span>
+    </button>
+  </div>
+</div>