Merge pull request #230 from BetterSEQTA/en-masse-upgrade

Upgrade every package to respective newer versions

.postcssrc.json

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

docs/README.md

@@ -0,0 +1,60 @@
+# BetterSEQTA+ Documentation
+
+🚧 DOCS UNDER CONSTRUCTION! 🚧
+
+Welcome to the BetterSEQTA+ documentation! This documentation will help you understand how BetterSEQTA+ works and how to extend it with plugins and new features.
+
+## Table of Contents
+
+### Getting Started
+- [Project Overview](./README.md) - This file
+- [Installation Guide](./installation.md) - How to install and set up BetterSEQTA+
+- [Contributing Guide](../CONTRIBUTING.md) - How to contribute to BetterSEQTA+
+
+### Plugin System
+- [Plugin System Overview](./plugins/README.md) - Overview of the plugin system
+- [Creating Your First Plugin](./plugins/creating-plugins.md) - Guide to creating a simple plugin
+
+### Settings System
+- [Settings System Overview](./settings/README.md) - How the type-safe settings system works
+- [Creating Plugins with Settings](./settings/creating-plugins.md) - How to use the decorator-based settings in plugins
+- [Creating Custom UI Components](./settings/custom-ui-components.md) - How to create custom UI components for settings
+
+### Advanced Topics
+- [TypeScript Type System](./advanced/typescript.md) - How BetterSEQTA+ leverages TypeScript for type safety
+- [Plugin API Reference](./advanced/plugin-api.md) - Detailed reference for the Plugin API
+- [Storage API Reference](./advanced/storage-api.md) - Detailed reference for the Storage API
+
+## 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.
+
+2. **Type-Safe Settings**: Each plugin can define settings that are type-safe and automatically rendered in the settings UI. The settings system uses TypeScript decorators to make it easy to define settings with proper typing.
+
+3. **Storage API**: Plugins can use the Storage API to persist data between sessions. The Storage API is also type-safe, ensuring that plugins can only access their own data.
+
+4. **SEQTA Integration**: BetterSEQTA+ integrates with SEQTA Learn by injecting code into the page. This allows plugins to modify the SEQTA UI and add new features.
+
+## Getting Help
+
+If you need help with BetterSEQTA+, you can:
+
+- [Open an Issue](https://github.com/SeqtaLearning/betterseqta-plus/issues) - Report bugs or request features
+- [Join the Discord](https://discord.gg/YzmbnCDkat) - Chat with the community
+- [Email the Maintainers](mailto:betterseqta.plus@gmail.com) - Contact the maintainers directly
+
+## Contributing to the Documentation
+
+We welcome contributions to the documentation! If you find something unclear or missing, please open an issue or submit a pull request.
+
+To contribute to the documentation:
+
+1. Fork the repository
+2. Make your changes to the documentation files
+3. Submit a pull request with a clear description of your changes
+
+## License
+
+BetterSEQTA+ is licensed under the [MIT License](../LICENSE). 

docs/contributing.md

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

docs/installation.md

@@ -0,0 +1,181 @@
+# 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:
+
+- [Configure your settings](./settings/README.md)
+- [Create your own plugins](./plugins/creating-plugins.md)
+- [Contribute to the project](../CONTRIBUTING.md) 

docs/plugins/README.md

@@ -0,0 +1,155 @@
+# BetterSEQTA+ Plugin System
+
+BetterSEQTA+ features a powerful plugin system that allows developers to extend and customize the functionality of SEQTA Learn. This document provides an overview of how the plugin system works and how to get started with creating your own plugins.
+
+## What is a Plugin?
+
+A plugin is a self-contained piece of code that adds functionality to BetterSEQTA+. Plugins can:
+
+- Add new UI elements to SEQTA Learn
+- Modify existing UI elements
+- Add new features to SEQTA Learn
+- Modify or extend existing features
+- Store and retrieve user data
+- Respond to events in SEQTA Learn
+
+Each plugin is isolated from other plugins, with its own settings, storage, and lifecycle. This ensures that plugins can be enabled, disabled, or removed without affecting other parts of the system.
+
+## Plugin Architecture
+
+The BetterSEQTA+ plugin system consists of several key components:
+
+### 1. Plugin Interface
+
+All plugins implement the `Plugin` interface, which defines the structure and lifecycle methods of a plugin:
+
+```typescript
+export interface Plugin<T extends PluginSettings = PluginSettings, S = any> {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  settings: T;
+  run: (api: PluginAPI<T, S>) => void | Promise<void> | (() => void) | Promise<(() => void)>;
+}
+```
+
+### 2. Plugin API
+
+When a plugin is run, it receives an instance of the `PluginAPI`, which provides access to various services and utilities:
+
+```typescript
+export interface PluginAPI<T extends PluginSettings, S = any> {
+  seqta: SEQTAAPI;
+  settings: SettingsAPI<T>;
+  storage: TypedStorageAPI<S>;
+  events: EventsAPI;
+}
+```
+
+- **SEQTA API**: Provides methods for interacting with the SEQTA Learn UI
+- **Settings API**: Provides type-safe access to plugin settings
+- **Storage API**: Provides type-safe persistent storage for plugin data
+- **Events API**: Allows plugins to emit and listen for events
+
+### 3. Plugin Manager
+
+The Plugin Manager is responsible for loading, starting, stopping, and managing plugins. It handles the lifecycle of each plugin and ensures that plugins have access to the resources they need.
+
+### 4. Plugin Registry
+
+The Plugin Registry is a central repository of all available plugins. Built-in plugins are automatically registered, and additional plugins can be registered dynamically.
+
+## Plugin Lifecycle
+
+Plugins follow a simple lifecycle:
+
+1. **Registration**: The plugin is registered with the Plugin Manager
+2. **Loading**: The plugin's settings and storage are loaded
+3. **Running**: The plugin's `run` method is called with the Plugin API
+4. **Cleanup**: If the plugin returns a cleanup function, it is called when the plugin is stopped
+
+## Creating a Plugin
+
+Creating a plugin for BetterSEQTA+ involves a few simple steps:
+
+1. Define your plugin's interface
+2. Implement the Plugin interface
+3. Register your plugin with the Plugin Manager
+
+For a detailed guide on creating plugins, see [Creating Your First Plugin](./creating-plugins.md).
+
+## Built-in Plugins
+
+BetterSEQTA+ comes with several built-in plugins that provide core functionality:
+
+- **Timetable**: Enhances the SEQTA timetable view
+- **Notification Collector**: Improves the notification system
+- **Theme Customizer**: Allows customization of the SEQTA theme
+- **Assessment Enhancer**: Adds features to the assessment view
+
+These plugins serve as good examples of how to use the plugin system effectively.
+
+## Type-Safe Settings and Storage
+
+One of the key features of the BetterSEQTA+ plugin system is its type-safe settings and storage. Using TypeScript generics, plugins can define the structure of their settings and storage, ensuring that they are used correctly throughout the codebase.
+
+### Settings Example
+
+```typescript
+interface MyPluginSettings extends PluginSettings {
+  enabled: {
+    type: 'boolean';
+    default: boolean;
+    title: string;
+    description: string;
+  };
+  refreshInterval: {
+    type: 'number';
+    default: number;
+    title: string;
+    description: string;
+    min: number;
+    max: number;
+  };
+}
+```
+
+### Storage Example
+
+```typescript
+interface MyPluginStorage {
+  lastRefresh: string;
+  savedItems: string[];
+  userPreferences: {
+    theme: 'light' | 'dark';
+    fontSize: number;
+  };
+}
+```
+
+## Decorator-Based Settings
+
+BetterSEQTA+ also offers a more modern, decorator-based approach to defining settings. For more information, see [Creating Plugins with Settings](../settings/creating-plugins.md).
+
+## Plugin API Reference
+
+The Plugin API provides a rich set of features for interacting with SEQTA Learn. For a complete reference, see [Plugin API Reference](../advanced/plugin-api.md).
+
+## Best Practices
+
+When creating plugins for BetterSEQTA+, consider these best practices:
+
+1. **Use TypeScript**: Take advantage of TypeScript's type system to ensure type safety in your plugins.
+2. **Keep Plugins Focused**: Each plugin should do one thing well.
+3. **Handle Cleanup**: Always return a cleanup function from your plugin's `run` method to ensure proper resource management.
+4. **Document Your Code**: Add clear documentation to your code, especially for public APIs.
+5. **Test Thoroughly**: Test your plugins in different environments and with different configurations.
+6. **Follow UI Guidelines**: When adding UI elements, follow the SEQTA Learn UI guidelines to maintain a consistent experience.
+7. **Optimize Performance**: Be mindful of performance impact, especially for plugins that run on every page.
+
+## Next Steps
+
+- [Creating Your First Plugin](./creating-plugins.md)
+- [Plugin API Reference](../advanced/plugin-api.md)
+- [Typed Storage API](../advanced/storage-api.md) 

docs/plugins/creating-plugins.md

@@ -0,0 +1,269 @@
+# Creating Your First Plugin
+
+This guide will walk you through the process of creating a plugin for BetterSEQTA+, from setup to implementation to testing.
+
+## Prerequisites
+
+Before you start creating a plugin, make sure you have:
+
+- Basic knowledge of TypeScript
+- Familiarity with the BetterSEQTA+ codebase
+- A development environment set up according to the [Installation Guide](../installation.md)
+
+## Plugin Structure
+
+A typical BetterSEQTA+ plugin consists of:
+
+1. **Plugin Definition**: A TypeScript file that defines the plugin's metadata and functionality
+2. **Settings Interface**: (Optional) A TypeScript interface that defines the plugin's settings
+3. **Storage Interface**: (Optional) A TypeScript interface that defines the plugin's storage structure
+
+## Step 1: Planning Your Plugin
+
+Before you start coding, take some time to plan your plugin:
+
+1. **Identify the Problem**: What issue or need does your plugin address?
+2. **Define the Scope**: What specific features will your plugin include?
+3. **Consider the User Experience**: How will users interact with your plugin?
+
+## Step 2: Creating the Plugin File
+
+Create a new TypeScript file for your plugin. The convention is to place it in the `src/plugins/` directory, either in the `built-in` folder or a new folder if it's a third-party plugin.
+
+```typescript
+// src/plugins/my-plugin/index.ts
+
+import { Plugin, PluginAPI, PluginSettings } from '../../core/types';
+
+export interface MyPluginSettings extends PluginSettings {
+  enabled: {
+    type: 'boolean';
+    default: true;
+    title: 'Enable My Plugin';
+    description: 'Turn my plugin on or off';
+  };
+  // Add more settings as needed
+}
+
+export interface MyPluginStorage {
+  lastRun: string;
+  // Add more storage fields as needed
+}
+
+const myPlugin: Plugin<MyPluginSettings, MyPluginStorage> = {
+  id: 'my-plugin',
+  name: 'My Plugin',
+  description: 'A simple plugin for BetterSEQTA+',
+  version: '1.0.0',
+  settings: {
+    enabled: {
+      type: 'boolean',
+      default: true,
+      title: 'Enable My Plugin',
+      description: 'Turn my plugin on or off',
+    },
+    // Initialize your settings here
+  },
+  run: (api) => {
+    if (!api.settings.enabled) {
+      return;
+    }
+
+    // Initialize storage with default values if needed
+    if (api.storage.lastRun === undefined) {
+      api.storage.lastRun = new Date().toISOString();
+    }
+
+    // Your plugin logic goes here
+    console.log('My Plugin is running!');
+    
+    // Access the SEQTA API
+    api.seqta.onPageLoad('/timetable', () => {
+      // Code to run when the timetable page loads
+    });
+    
+    // Return a cleanup function (optional but recommended)
+    return () => {
+      console.log('My Plugin is cleaning up!');
+      // Cleanup logic goes here
+    };
+  },
+};
+
+export default myPlugin;
+```
+
+## Step 3: Registering Your Plugin
+
+To make your plugin available to BetterSEQTA+, you need to register it with the Plugin Manager. For built-in plugins, you can add your plugin to the `src/plugins/built-in/index.ts` file:
+
+```typescript
+// src/plugins/built-in/index.ts
+
+import myPlugin from './my-plugin';
+// Other imports...
+
+export const builtInPlugins = [
+  myPlugin,
+  // Other plugins...
+];
+```
+
+For third-party plugins, you'll need to follow a different approach, as detailed in [Third-Party Plugins](../advanced/third-party-plugins.md).
+
+## Step 4: Implementing Your Plugin Logic
+
+The main functionality of your plugin goes in the `run` method. Here are some common patterns:
+
+### Responding to Page Loads
+
+```typescript
+api.seqta.onPageLoad('/timetable', () => {
+  // Code to run when the timetable page loads
+});
+```
+
+### Modifying the UI
+
+```typescript
+api.seqta.onPageLoad('/timetable', () => {
+  const timetableElement = document.querySelector('.timetable');
+  if (timetableElement) {
+    // Modify the timetable element
+    const controlsDiv = document.createElement('div');
+    controlsDiv.className = 'my-plugin-controls';
+    controlsDiv.innerHTML = '<button>Zoom In</button><button>Zoom Out</button>';
+    timetableElement.appendChild(controlsDiv);
+    
+    // Add event listeners
+    controlsDiv.querySelector('button:first-child').addEventListener('click', () => {
+      // Zoom in logic
+    });
+  }
+});
+```
+
+### Working with Settings
+
+```typescript
+// Get a setting value
+const isEnabled = api.settings.enabled;
+
+// Listen for settings changes
+api.settings.onChange('enabled', (newValue) => {
+  if (newValue) {
+    // Enable functionality
+  } else {
+    // Disable functionality
+  }
+});
+```
+
+### Working with Storage
+
+```typescript
+// Get a stored value
+const lastRun = api.storage.lastRun;
+
+// Set a stored value
+api.storage.lastRun = new Date().toISOString();
+
+// Listen for storage changes
+api.storage.onChange('lastRun', (newValue) => {
+  console.log(`Last run updated to: ${newValue}`);
+});
+```
+
+### Working with Events
+
+```typescript
+// Listen for events
+api.events.on('assessmentLoaded', (data) => {
+  console.log(`Assessment loaded: ${data.id}`);
+});
+
+// Emit an event
+api.events.emit('myPluginEvent', { message: 'Hello from My Plugin!' });
+```
+
+## Step 5: Testing Your Plugin
+
+To test your plugin:
+
+1. Run the development server:
+   ```
+   npm run dev
+   ```
+
+2. Open SEQTA Learn in your browser with BetterSEQTA+ enabled.
+
+3. Check the console for any error messages.
+
+4. Verify that your plugin works as expected.
+
+## Step 6: Adding Plugin Settings UI
+
+If your plugin has settings, they will automatically appear in the BetterSEQTA+ settings panel. The UI is generated based on the settings interface you defined.
+
+For more control over the settings UI, you can use the decorator-based settings system. See [Creating Plugins with Settings](../settings/creating-plugins.md) for more information.
+
+## Best Practices for Plugin Development
+
+1. **Follow TypeScript Best Practices**: Use proper typing for all variables and functions.
+
+2. **Handle Errors Gracefully**: Wrap your code in try-catch blocks to prevent crashes.
+   ```typescript
+   try {
+     // Your code
+   } catch (error) {
+     console.error('My Plugin Error:', error);
+   }
+   ```
+
+3. **Clean Up After Yourself**: Always return a cleanup function from your plugin's `run` method.
+   ```typescript
+   const cleanup = () => {
+     // Remove event listeners, DOM elements, etc.
+   };
+   return cleanup;
+   ```
+
+4. **Document Your Code**: Add comments to explain complex logic or unusual patterns.
+
+5. **Keep It Simple**: Start with a simple plugin and add features incrementally.
+
+## Example Plugins
+
+For inspiration, check out these example plugins in the BetterSEQTA+ codebase:
+
+1. **Timetable Plugin**: Enhances the SEQTA timetable view with zoom controls and filtering options.
+   - Location: `src/plugins/built-in/timetable/index.ts`
+
+2. **Notification Collector**: Improves the notification system in SEQTA Learn.
+   - Location: `src/plugins/built-in/notification-collector/index.ts`
+
+## Troubleshooting
+
+### Plugin Not Loading
+
+- Check that your plugin is properly registered
+- Verify that there are no TypeScript errors
+- Look for error messages in the console
+
+### Plugin Not Working as Expected
+
+- Ensure that your plugin's `enabled` setting is true
+- Check that your selectors match the SEQTA DOM structure
+- Use `console.log` statements to debug your code
+
+### TypeScript Errors
+
+- Make sure your interfaces are properly defined
+- Check that you're using the correct types for the plugin API
+- Verify that your plugin implements the `Plugin` interface correctly
+
+## Next Steps
+
+- [Learn About Type-Safe Settings](../settings/creating-plugins.md)
+- [Explore the Plugin API](../advanced/plugin-api.md)
+- [Contribute to BetterSEQTA+](../contributing.md) 

docs/settings/README.md

@@ -0,0 +1,301 @@
+# BetterSEQTA+ Settings System
+
+BetterSEQTA+ includes a powerful, type-safe settings system that uses TypeScript decorators to create a seamless API for plugin developers. This document explains how the settings system works and how to extend it.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Existing Setting Types](#existing-setting-types)
+- [Using Settings in Plugins](#using-settings-in-plugins)
+- [Adding New Setting Types](#adding-new-setting-types)
+- [Rendering in the UI](#rendering-in-the-ui)
+
+## Overview
+
+The settings system is built around TypeScript decorators and uses TypeScript's type system to provide type safety for plugin settings. The system consists of a few key components:
+
+1. **Setting Type Interfaces** in `src/plugins/core/types.ts` - Define the structure of the setting
+2. **Setting Decorator Options** in `src/plugins/core/settings.ts` - Define the options for the decorator
+3. **Setting Decorators** in `src/plugins/core/settings.ts` - Register the setting in the plugin
+4. **BasePlugin Class** in `src/plugins/core/settings.ts` - Base class that handles the settings
+
+## Existing Setting Types
+
+BetterSEQTA+ currently supports the following setting types:
+
+- **Boolean Settings** - Simple on/off toggle
+- **String Settings** - Text input with optional validation
+- **Number Settings** - Numeric input with optional min/max/step
+- **Select Settings** - Dropdown selection from predefined options
+
+Each setting type has a corresponding interface, options interface, and decorator.
+
+## Using Settings in Plugins
+
+Here's how to use the settings system in a plugin:
+
+```typescript
+import { BasePlugin, BooleanSetting, StringSetting } from '../../core/settings';
+
+// Define the plugin settings class
+class MyPluginClass extends BasePlugin {
+  @BooleanSetting({
+    default: true,
+    title: "Enable Feature",
+    description: "Enables the awesome feature."
+  })
+  enabled!: boolean;
+
+  @StringSetting({
+    default: "Default Value",
+    title: "Custom Text",
+    description: "Enter your custom text here.",
+    maxLength: 100
+  })
+  customText!: string;
+}
+
+// Create an instance to extract settings
+const settingsInstance = new MyPluginClass();
+
+// Use in plugin definition
+const myPlugin = {
+  id: 'my-plugin',
+  name: 'My Plugin',
+  description: 'Does awesome things',
+  version: '1.0.0',
+  settings: settingsInstance.settings,
+  run: async (api) => {
+    // Access settings via api.settings
+    if (api.settings.enabled) {
+      console.log(api.settings.customText);
+    }
+    
+    // Listen for settings changes
+    api.settings.onChange('enabled', (value) => {
+      console.log(`Enabled changed to: ${value}`);
+    });
+  }
+};
+```
+
+## Adding New Setting Types
+
+To add a new setting type, you need to follow these steps:
+
+### 1. Define the Setting Interface in `src/plugins/core/types.ts`
+
+```typescript
+export interface ColorSetting {
+  type: 'color';
+  default: string; // HEX color code
+  title: string;
+  description?: string;
+  presets?: string[]; // Optional color presets
+}
+
+// Update the PluginSetting type to include the new setting type
+export type PluginSetting = BooleanSetting | StringSetting | NumberSetting | 
+  SelectSetting<string> | ColorSetting;
+
+// Update the SettingValue type helper
+type SettingValue<T extends PluginSetting> = T extends BooleanSetting ? boolean :
+  T extends StringSetting ? string :
+  T extends NumberSetting ? number :
+  T extends SelectSetting<infer O> ? O :
+  T extends ColorSetting ? string : // Add this line
+  never;
+```
+
+### 2. Define the Options Interface in `src/plugins/core/settings.ts`
+
+```typescript
+interface ColorSettingOptions extends BaseSettingOptions {
+  default: string; // HEX color
+  presets?: string[];
+}
+```
+
+### 3. Create the Decorator Function in `src/plugins/core/settings.ts`
+
+```typescript
+export function ColorSetting(options: ColorSettingOptions): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    // Ensure the settings property exists on the constructor's prototype
+    const proto = target.constructor.prototype;
+    if (!proto.hasOwnProperty('settings')) {
+      proto.settings = {};
+    }
+    
+    // Add the setting to the prototype's settings object
+    proto.settings[propertyKey] = {
+      type: 'color',
+      ...options
+    };
+  };
+}
+```
+
+### 4. Create a Corresponding UI Component (if needed)
+
+If your setting type needs a custom UI component, create one in the `src/interface/components` directory.
+
+For example, you might create a `ColorPicker.svelte` component.
+
+### 5. Update the Settings UI in `src/interface/pages/settings/general.svelte`
+
+Update the `getPluginSettingEntries` function to handle your new setting type:
+
+```javascript
+entries.push({
+  title: setting.title || key,
+  description: setting.description || '',
+  id,
+  Component: setting.type === 'boolean' ? Switch :
+            setting.type === 'select' ? Select :
+            setting.type === 'number' ? Slider : 
+            setting.type === 'color' ? ColorPicker : // Add this line
+            setting.type === 'string' ? (setting.options ? Select : null) : Switch,
+  props: {
+    state: pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default,
+    onChange: (value: any) => {
+      updatePluginSetting(plugin.pluginId, key, value);
+    },
+    options: setting.options,
+    presets: setting.presets // Add this line if needed for your component
+  }
+});
+```
+
+## Rendering in the UI
+
+The settings UI is handled in `src/interface/pages/settings/general.svelte`. This file does a few key things:
+
+1. Loads settings for all plugins from storage
+2. Maps setting types to UI components
+3. Handles updating settings when users interact with the UI
+
+For most setting types, you'll need to ensure there's a corresponding Svelte component in the `src/interface/components` directory that can render and edit the setting value.
+
+## Example: Adding a Color Setting
+
+Here's a complete example of adding a color setting type:
+
+1. Define the setting interface in `types.ts`:
+
+```typescript
+export interface ColorSetting {
+  type: 'color';
+  default: string;
+  title: string;
+  description?: string;
+  presets?: string[];
+}
+
+export type PluginSetting = BooleanSetting | StringSetting | NumberSetting | 
+  SelectSetting<string> | ColorSetting;
+  
+type SettingValue<T extends PluginSetting> = T extends BooleanSetting ? boolean :
+  T extends StringSetting ? string :
+  T extends NumberSetting ? number :
+  T extends SelectSetting<infer O> ? O :
+  T extends ColorSetting ? string :
+  never;
+```
+
+2. Create the options interface and decorator in `settings.ts`:
+
+```typescript
+interface ColorSettingOptions extends BaseSettingOptions {
+  default: string;
+  presets?: string[];
+}
+
+export function ColorSetting(options: ColorSettingOptions): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const proto = target.constructor.prototype;
+    if (!proto.hasOwnProperty('settings')) {
+      proto.settings = {};
+    }
+    
+    proto.settings[propertyKey] = {
+      type: 'color',
+      ...options
+    };
+  };
+}
+```
+
+3. Create a ColorPicker component in `src/interface/components/ColorPicker.svelte`:
+
+```html
+<script lang="ts">
+  export let state = "#000000";
+  export let onChange = (value: string) => {};
+  export let presets: string[] = ["#ff0000", "#00ff00", "#0000ff"];
+</script>
+
+<div class="color-picker">
+  <input 
+    type="color" 
+    value={state} 
+    on:change={(e) => onChange(e.currentTarget.value)} 
+  />
+  <div class="presets">
+    {#each presets as preset}
+      <button 
+        class="preset" 
+        style="background-color: {preset}" 
+        on:click={() => onChange(preset)}
+      ></button>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .color-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .presets {
+    display: flex;
+    gap: 0.25rem;
+  }
+  
+  .preset {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    cursor: pointer;
+  }
+</style>
+```
+
+4. Update the UI renderer in `general.svelte`:
+
+```javascript
+Component: setting.type === 'boolean' ? Switch :
+          setting.type === 'select' ? Select :
+          setting.type === 'number' ? Slider : 
+          setting.type === 'color' ? ColorPicker :
+          setting.type === 'string' ? (setting.options ? Select : null) : Switch,
+```
+
+5. Use the new setting type in a plugin:
+
+```typescript
+class ThemePlugin extends BasePlugin {
+  @ColorSetting({
+    default: "#4285f4",
+    title: "Primary Color",
+    description: "The main color for the theme",
+    presets: ["#4285f4", "#ea4335", "#fbbc05", "#34a853"]
+  })
+  primaryColor!: string;
+}
+```
+
+With these steps, you've added a completely new setting type to the BetterSEQTA+ plugin system! 

docs/settings/creating-plugins.md

@@ -0,0 +1,335 @@
+# Creating Plugins with Decorator-Based Settings
+
+This guide will walk you through creating a BetterSEQTA+ plugin using the new decorator-based settings system.
+
+## Prerequisites
+
+- Understand basic TypeScript concepts (classes, interfaces, decorators)
+- Familiarity with the BetterSEQTA+ plugin system
+
+## Plugin Structure
+
+A typical plugin consists of:
+
+1. A settings class that defines the plugin's settings using decorators
+2. The plugin definition object
+3. The actual plugin functionality
+
+## Step by Step Guide
+
+### 1. Create a Plugin File
+
+Start by creating a new file in the `src/plugins/built-in` directory. For example, `myFeature/index.ts`.
+
+### 2. Define Storage Type (Optional)
+
+If your plugin needs to store data, define a storage interface:
+
+```typescript
+interface MyFeatureStorage {
+  lastUsed: string;
+  favoriteItems: string[];
+}
+```
+
+### 3. Create a Settings Class
+
+Create a class that extends `BasePlugin` and use decorators to define settings:
+
+```typescript
+import { BasePlugin, BooleanSetting, StringSetting, NumberSetting, SelectSetting } from '../../core/settings';
+
+class MyFeaturePluginClass extends BasePlugin {
+  @BooleanSetting({
+    default: true,
+    title: "Enable My Feature",
+    description: "Enables the awesome new feature."
+  })
+  enabled!: boolean;
+  
+  @StringSetting({
+    default: "Default text",
+    title: "Custom Message",
+    description: "Sets a custom message for the feature",
+    maxLength: 100
+  })
+  message!: string;
+  
+  @NumberSetting({
+    default: 5,
+    title: "Refresh Interval",
+    description: "How often to refresh the data (in seconds)",
+    min: 1,
+    max: 60,
+    step: 1
+  })
+  refreshInterval!: number;
+  
+  @SelectSetting({
+    default: "small",
+    options: ["small", "medium", "large"] as const,
+    title: "Display Size",
+    description: "Control how large the feature appears"
+  })
+  displaySize!: "small" | "medium" | "large";
+}
+```
+
+### 4. Create a Plugin Instance
+
+Create an instance of your settings class and define the plugin object:
+
+```typescript
+// Create an instance to extract settings
+const settingsInstance = new MyFeaturePluginClass();
+
+const myFeaturePlugin: Plugin<typeof settingsInstance.settings, MyFeatureStorage> = {
+  id: 'myFeature',
+  name: 'My Awesome Feature',
+  description: 'Adds an awesome new feature to SEQTA',
+  version: '1.0.0',
+  settings: settingsInstance.settings,
+  run: async (api) => {
+    // Plugin implementation goes here
+  }
+};
+
+export default myFeaturePlugin;
+```
+
+### 5. Implement Plugin Functionality
+
+Implement your plugin's functionality in the `run` function:
+
+```typescript
+run: async (api) => {
+  // Initialize storage with defaults if needed
+  if (api.storage.lastUsed === undefined) {
+    api.storage.lastUsed = new Date().toISOString();
+  }
+  
+  if (api.storage.favoriteItems === undefined) {
+    api.storage.favoriteItems = [];
+  }
+  
+  // Only run if enabled
+  if (!api.settings.enabled) return;
+  
+  // Main plugin logic
+  const initializeFeature = () => {
+    console.log(`Initializing feature with message: ${api.settings.message}`);
+    console.log(`Using display size: ${api.settings.displaySize}`);
+    
+    // Set up refreshing
+    const intervalId = setInterval(() => {
+      refreshData();
+    }, api.settings.refreshInterval * 1000);
+    
+    // Clean up function returned here
+    return () => {
+      clearInterval(intervalId);
+      console.log('Feature cleaned up');
+    };
+  };
+  
+  const refreshData = () => {
+    console.log('Refreshing data...');
+    api.storage.lastUsed = new Date().toISOString();
+  };
+  
+  // Listen for elements we need
+  api.seqta.onMount('.some-element', (element) => {
+    // Do something when element appears
+  });
+  
+  // Listen for settings changes
+  api.settings.onChange('refreshInterval', (newValue) => {
+    console.log(`Refresh interval changed to ${newValue} seconds`);
+  });
+  
+  // Return cleanup function
+  return initializeFeature();
+}
+```
+
+### 6. Register the Plugin
+
+Make sure your plugin is registered in the plugin system. In the `src/plugins/index.ts` file, add your plugin to the list of built-in plugins:
+
+```typescript
+import myFeaturePlugin from './built-in/myFeature';
+
+// Add your plugin to this array
+const builtInPlugins = [
+  // ... other plugins
+  myFeaturePlugin,
+];
+```
+
+## Advanced Features
+
+### Reacting to Settings Changes
+
+You can listen for settings changes with the `onChange` method:
+
+```typescript
+api.settings.onChange('enabled', (value) => {
+  if (value) {
+    // Setting was turned on
+    initialize();
+  } else {
+    // Setting was turned off
+    cleanup();
+  }
+});
+```
+
+### Using Storage
+
+The storage API lets you persist data between sessions:
+
+```typescript
+// Read from storage
+const favorites = api.storage.favoriteItems;
+
+// Write to storage
+api.storage.favoriteItems = [...favorites, 'new item'];
+
+// Listen for storage changes
+api.storage.onChange('favoriteItems', (newValue) => {
+  console.log('Favorites updated:', newValue);
+});
+```
+
+### Cleaning Up
+
+Always return a cleanup function from your plugin's `run` method if you have any resources to clean up:
+
+```typescript
+run: async (api) => {
+  // Set up resources
+  const intervalId = setInterval(() => {
+    // Do something
+  }, 1000);
+  
+  // Return cleanup function
+  return () => {
+    clearInterval(intervalId);
+    // Clean up any other resources
+  };
+}
+```
+
+## Best Practices
+
+1. **Initialize Storage Values**: Always check if storage values are undefined and set defaults
+2. **Handle Enabled State**: Check if your plugin is enabled before running main functionality
+3. **Use TypeScript**: Take advantage of TypeScript's type system to ensure type safety
+4. **Clean Up Resources**: Always clean up resources when a plugin is disabled
+5. **Document Settings**: Use clear titles and descriptions for your settings
+
+## Complete Example
+
+Here's a complete example of a simple plugin that changes the color of elements:
+
+```typescript
+import { BasePlugin, BooleanSetting, ColorSetting } from '../../core/settings';
+import type { Plugin } from '../../core/types';
+
+interface ColorChangerStorage {
+  lastApplied: string;
+}
+
+class ColorChangerPluginClass extends BasePlugin {
+  @BooleanSetting({
+    default: true,
+    title: "Enable Color Changer",
+    description: "Applies custom colors to elements on the page."
+  })
+  enabled!: boolean;
+  
+  @ColorSetting({
+    default: "#4285f4",
+    title: "Heading Color",
+    description: "Color for headings on the page",
+    presets: ["#4285f4", "#ea4335", "#fbbc05", "#34a853"]
+  })
+  headingColor!: string;
+  
+  @ColorSetting({
+    default: "#34a853",
+    title: "Button Color",
+    description: "Color for buttons on the page",
+    presets: ["#4285f4", "#ea4335", "#fbbc05", "#34a853"]
+  })
+  buttonColor!: string;
+}
+
+const settingsInstance = new ColorChangerPluginClass();
+
+const colorChangerPlugin: Plugin<typeof settingsInstance.settings, ColorChangerStorage> = {
+  id: 'colorChanger',
+  name: 'Color Changer',
+  description: 'Changes colors of various elements on the page',
+  version: '1.0.0',
+  settings: settingsInstance.settings,
+  run: async (api) => {
+    if (api.storage.lastApplied === undefined) {
+      api.storage.lastApplied = new Date().toISOString();
+    }
+    
+    const applyColors = () => {
+      if (!api.settings.enabled) return;
+      
+      // Apply heading color
+      document.querySelectorAll('h1, h2, h3').forEach(heading => {
+        (heading as HTMLElement).style.color = api.settings.headingColor;
+      });
+      
+      // Apply button color
+      document.querySelectorAll('button').forEach(button => {
+        (button as HTMLElement).style.backgroundColor = api.settings.buttonColor;
+      });
+      
+      api.storage.lastApplied = new Date().toISOString();
+    };
+    
+    // Apply colors initially
+    applyColors();
+    
+    // Apply colors when DOM changes
+    api.seqta.onMount('h1, h2, h3, button', applyColors);
+    
+    // Listen for color changes
+    api.settings.onChange('headingColor', applyColors);
+    api.settings.onChange('buttonColor', applyColors);
+    api.settings.onChange('enabled', (enabled) => {
+      if (enabled) {
+        applyColors();
+      } else {
+        // Reset colors
+        document.querySelectorAll('h1, h2, h3').forEach(heading => {
+          (heading as HTMLElement).style.color = '';
+        });
+        
+        document.querySelectorAll('button').forEach(button => {
+          (button as HTMLElement).style.backgroundColor = '';
+        });
+      }
+    });
+    
+    // No cleanup needed for this plugin
+    return () => {};
+  }
+};
+
+export default colorChangerPlugin;
+```
+
+This plugin demonstrates:
+- Using multiple setting types including a custom color setting
+- Handling the enabled state
+- Initializing storage
+- Listening for setting changes
+- Applying and resetting styles based on settings
+- Proper cleanup when disabled 

docs/settings/custom-ui-components.md

@@ -0,0 +1,541 @@
+# Creating Custom UI Components for Settings
+
+When adding new setting types to BetterSEQTA+, you'll often need to create custom UI components to render and edit these settings. This guide covers how to create Svelte components for the settings UI and how to integrate them with the settings system.
+
+## Understanding the Settings UI
+
+Settings in BetterSEQTA+ are rendered by the `src/interface/pages/settings/general.svelte` component. This component:
+
+1. Loads settings from all plugins
+2. Maps setting types to appropriate UI components
+3. Renders the settings UI
+4. Handles updates when settings are changed
+
+## Basic Component Requirements
+
+Every setting UI component should follow these conventions:
+
+1. **Accept a `state` prop** for the current value
+2. **Accept an `onChange` prop** for updating the value
+3. **Accept any additional props** specific to the setting type (e.g., `options`, `min`, `max`)
+4. **Handle user input** and call `onChange` with the new value
+
+## Creating a Basic Component
+
+Here's an example of a basic Svelte component for a custom setting type:
+
+```svelte
+<!-- src/interface/components/MyCustomSetting.svelte -->
+<script lang="ts">
+  // Current value
+  export let state: any = null;
+  
+  // Callback for updates
+  export let onChange = (newValue: any) => {};
+  
+  // Other props specific to your setting type
+  export let customOption: string = "default";
+  
+  // Local state or methods if needed
+  function handleChange(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    onChange(value);
+  }
+</script>
+
+<div class="my-custom-setting">
+  <input 
+    type="text" 
+    value={state} 
+    on:input={handleChange} 
+    data-option={customOption}
+  />
+</div>
+
+<style>
+  .my-custom-setting {
+    /* Your component styles */
+  }
+</style>
+```
+
+## Example: Slider Component
+
+BetterSEQTA+ includes a Slider component for number settings:
+
+```svelte
+<!-- src/interface/components/Slider.svelte -->
+<script lang="ts">
+  export let state: number | string = 0;
+  export let onChange = (value: number) => {};
+  export let min = 0;
+  export let max = 100;
+  export let step = 1;
+  
+  let stringValue = typeof state === "string" ? state : state.toString();
+  
+  function handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const newValue = parseFloat(input.value);
+    stringValue = input.value;
+    onChange(newValue);
+  }
+</script>
+
+<div class="relative flex items-center">
+  <input 
+    type="range" 
+    class="w-24 accent-indigo-500" 
+    min={min} 
+    max={max} 
+    step={step}
+    value={state}
+    on:input={handleChange}
+  />
+  <span class="ml-2 text-xs text-zinc-500 dark:text-zinc-400 w-8">{stringValue}</span>
+</div>
+```
+
+## Example: Color Picker Component
+
+Here's a more complex example of a color picker component:
+
+```svelte
+<!-- src/interface/components/ColorPicker.svelte -->
+<script lang="ts">
+  export let state = "#000000";
+  export let onChange = (value: string) => {};
+  export let presets: string[] = ["#ff0000", "#00ff00", "#0000ff"];
+  
+  let isOpen = false;
+  
+  function handleColorChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    onChange(input.value);
+  }
+  
+  function selectPreset(color: string) {
+    onChange(color);
+    isOpen = false;
+  }
+  
+  function togglePicker() {
+    isOpen = !isOpen;
+  }
+</script>
+
+<div class="color-picker relative">
+  <button 
+    class="color-swatch" 
+    style="background-color: {state}" 
+    on:click={togglePicker}
+    aria-label="Open color picker"
+  ></button>
+  
+  {#if isOpen}
+    <div class="picker-popup">
+      <input 
+        type="color" 
+        value={state} 
+        on:input={handleColorChange}
+      />
+      
+      <div class="presets">
+        {#each presets as preset}
+          <button 
+            class="preset-swatch" 
+            style="background-color: {preset}" 
+            on:click={() => selectPreset(preset)}
+            aria-label={`Select color ${preset}`}
+          ></button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .color-picker {
+    position: relative;
+  }
+  
+  .color-swatch {
+    width: 2rem;
+    height: 1.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid #ccc;
+    cursor: pointer;
+  }
+  
+  .picker-popup {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+  
+  .presets {
+    display: flex;
+    gap: 0.25rem;
+    margin-top: 0.5rem;
+  }
+  
+  .preset-swatch {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    cursor: pointer;
+  }
+</style>
+```
+
+## Integrating with the Settings System
+
+Once you've created your component, you need to update `general.svelte` to use it for your custom setting type.
+
+### 1. Import Your Component
+
+At the top of `src/interface/pages/settings/general.svelte`, add an import for your component:
+
+```typescript
+import ColorPicker from "../../components/ColorPicker.svelte"
+```
+
+### 2. Update Component Mapping
+
+Find the `getPluginSettingEntries` function in `general.svelte` and update the component mapping:
+
+```typescript
+function getPluginSettingEntries() {
+  const entries: any[] = [];
+  
+  pluginSettings.forEach(plugin => {
+    if (Object.keys(plugin.settings).length === 0) return;
+    
+    Object.entries(plugin.settings).forEach(([key, setting]) => {
+      const id = getPluginSettingId(plugin.pluginId, key);
+      
+      entries.push({
+        title: setting.title || key,
+        description: setting.description || '',
+        id,
+        Component: setting.type === 'boolean' ? Switch :
+                  setting.type === 'select' ? Select :
+                  setting.type === 'number' ? Slider : 
+                  setting.type === 'color' ? ColorPicker : // Add your component here
+                  setting.type === 'string' ? (setting.options ? Select : null) : Switch,
+        props: {
+          state: pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default,
+          onChange: (value: any) => {
+            updatePluginSetting(plugin.pluginId, key, value);
+          },
+          options: setting.options,
+          // Add any additional props your component needs
+          presets: setting.presets,
+          min: setting.min,
+          max: setting.max,
+          step: setting.step
+        }
+      });
+    });
+  });
+  
+  return entries;
+}
+```
+
+## Handling Different UI Needs
+
+Different setting types may have different UI needs:
+
+### Toggle Switches
+
+For boolean settings, a toggle switch is usually appropriate:
+
+```svelte
+<script lang="ts">
+  export let state = false;
+  export let onChange = (value: boolean) => {};
+</script>
+
+<button
+  class="switch"
+  class:active={state}
+  on:click={() => onChange(!state)}
+>
+  <div class="toggle"></div>
+</button>
+
+<style>
+  .switch {
+    position: relative;
+    width: 40px;
+    height: 24px;
+    background-color: #ccc;
+    border-radius: 12px;
+    cursor: pointer;
+  }
+  
+  .switch.active {
+    background-color: #4CAF50;
+  }
+  
+  .toggle {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.2s;
+  }
+  
+  .switch.active .toggle {
+    transform: translateX(16px);
+  }
+</style>
+```
+
+### Text Inputs
+
+For string settings, a text input with validation:
+
+```svelte
+<script lang="ts">
+  export let state = "";
+  export let onChange = (value: string) => {};
+  export let maxLength: number | undefined = undefined;
+  export let pattern: string | undefined = undefined;
+  
+  let error = "";
+  
+  function validate(value: string) {
+    if (maxLength && value.length > maxLength) {
+      error = `Value must be under ${maxLength} characters`;
+      return false;
+    }
+    
+    if (pattern && !new RegExp(pattern).test(value)) {
+      error = "Value doesn't match the required pattern";
+      return false;
+    }
+    
+    error = "";
+    return true;
+  }
+  
+  function handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const newValue = input.value;
+    
+    if (validate(newValue)) {
+      onChange(newValue);
+    }
+  }
+</script>
+
+<div class="text-input">
+  <input 
+    type="text" 
+    value={state} 
+    on:input={handleInput}
+    maxlength={maxLength}
+    pattern={pattern}
+  />
+  {#if error}
+    <div class="error">{error}</div>
+  {/if}
+</div>
+
+<style>
+  .text-input {
+    position: relative;
+  }
+  
+  input {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+  }
+  
+  .error {
+    color: red;
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+  }
+</style>
+```
+
+### Complex Interactive Components
+
+For more complex settings, you may need more interactive components with dropdowns, modals, or other features. Consider using additional Svelte features like:
+
+- `{#if}...{/if}` blocks for conditional rendering
+- Svelte transitions for animations
+- Svelte actions for DOM interactions
+- Svelte stores for shared state
+
+## Best Practices
+
+1. **Keep Components Focused**: Each component should do one thing well
+2. **Use TypeScript**: Define proper types for your props
+3. **Handle Errors**: Validate input and show meaningful error messages
+4. **Use Clear UI**: Make it obvious how to interact with the component
+5. **Add Accessibility**: Include proper ARIA attributes and keyboard handling
+6. **Support Theming**: Use CSS variables or design system tokens for consistent styling
+7. **Test Edge Cases**: Ensure your component handles all possible inputs
+
+## Complete Example
+
+Here's a complete example of a custom file picker component:
+
+```svelte
+<!-- src/interface/components/FilePicker.svelte -->
+<script lang="ts">
+  export let state: string | null = null;
+  export let onChange = (value: string | null) => {};
+  export let accept = ".txt,.pdf,.doc,.docx";
+  export let maxSize = 1024 * 1024 * 5; // 5MB
+  
+  let error = "";
+  let fileName = state ? state.split('/').pop() : "No file selected";
+  let inputEl: HTMLInputElement;
+  
+  function handleFileChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const files = input.files;
+    
+    if (!files || files.length === 0) {
+      onChange(null);
+      fileName = "No file selected";
+      error = "";
+      return;
+    }
+    
+    const file = files[0];
+    
+    // Validate file size
+    if (file.size > maxSize) {
+      error = `File too large. Maximum size is ${maxSize / (1024 * 1024)}MB.`;
+      input.value = "";
+      return;
+    }
+    
+    error = "";
+    fileName = file.name;
+    
+    // Read file as data URL
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target && typeof e.target.result === 'string') {
+        onChange(e.target.result);
+      }
+    };
+    reader.readAsDataURL(file);
+  }
+  
+  function clearFile() {
+    if (inputEl) inputEl.value = "";
+    onChange(null);
+    fileName = "No file selected";
+    error = "";
+  }
+</script>
+
+<div class="file-picker">
+  <div class="file-input">
+    <button class="browse-btn" on:click={() => inputEl.click()}>
+      Browse...
+    </button>
+    <span class="file-name">{fileName}</span>
+    {#if state}
+      <button class="clear-btn" on:click={clearFile}>
+        ✕
+      </button>
+    {/if}
+  </div>
+  
+  <input 
+    type="file" 
+    bind:this={inputEl}
+    on:change={handleFileChange}
+    {accept}
+    class="hidden"
+  />
+  
+  {#if error}
+    <div class="error">{error}</div>
+  {/if}
+</div>
+
+<style>
+  .file-picker {
+    width: 100%;
+  }
+  
+  .file-input {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+  }
+  
+  .browse-btn {
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    cursor: pointer;
+  }
+  
+  .file-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+  }
+  
+  .clear-btn {
+    color: #999;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 0.5rem;
+  }
+  
+  .hidden {
+    display: none;
+  }
+  
+  .error {
+    color: red;
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+  }
+</style>
+```
+
+To use this in the settings system, you would:
+
+1. Define a `FileSetting` interface in `types.ts`
+2. Create a `FileSetting` decorator in `settings.ts`
+3. Update the `getPluginSettingEntries` function in `general.svelte`
+
+This component demonstrates:
+- Handling file input (a more complex input type)
+- Input validation
+- Error handling
+- Multiple interactive elements
+- Binding to DOM elements
+- Clean UI that follows platform conventions 

lib/patchPackage.ts

@@ -34,7 +34,6 @@ export function updateManifestPlugin(): PluginOption {
           }
 
           fs.watchFile(manifestPath, () => {
-            console.log('** watchFile **');
             try {
               const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
               if (manifestContents.web_accessible_resources?.some((resource: any) => resource.use_dynamic_url)) {

lib/touchGlobalCSS.ts

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

package.json

@@ -11,6 +11,7 @@
     "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",
@@ -32,66 +33,69 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.26.9",
-    "@babel/runtime": "^7.26.7",
+    "@babel/runtime": "^7.26.9",
-    "@bedframe/cli": "^0.0.85",
+    "@bedframe/cli": "^0.0.91",
     "@crxjs/vite-plugin": "2.0.0-beta.25",
     "@types/mime-types": "^2.1.4",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "cross-env": "^7.0.3",
     "dependency-cruiser": "^16.10.0",
-    "eslint": "^8.57.1",
+    "eslint": "9.22.0",
     "glob": "^11.0.1",
     "mime-types": "^2.1.35",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "process": "^0.11.10",
     "publish-browser-extension": "^3.0.0",
-    "sass": "^1.83.4",
+    "sass": "^1.85.1",
-    "sass-loader": "^13.3.3",
+    "sass-loader": "^16.0.5",
     "semver": "^7.7.1",
+    "tailwindcss": "3",
     "url": "^0.11.4"
   },
   "dependencies": {
-    "@codemirror/lang-css": "^6.3.0",
+    "@codemirror/autocomplete": "^6.18.6",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@codemirror/commands": "^6.8.0",
-    "@tailwindcss/forms": "^0.5.9",
+    "@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.270",
+    "@types/chrome": "^0.0.308",
-    "@types/color": "^3.0.6",
+    "@types/color": "^4.2.0",
-    "@types/dompurify": "^3.2.0",
+    "@types/lodash": "^4.17.16",
-    "@types/lodash": "^4.17.15",
+    "@types/node": "^22.13.10",
-    "@types/node": "^20.17.17",
-    "@types/react": "^17.0.83",
-    "@types/react-dom": "^17.0.26",
     "@types/sortablejs": "^1.15.8",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
-    "@types/webextension-polyfill": "^0.10.7",
+    "@types/webextension-polyfill": "^0.12.3",
-    "@uiw/codemirror-extensions-color": "^4.23.8",
+    "@uiw/codemirror-extensions-color": "^4.23.10",
-    "@uiw/codemirror-theme-github": "^4.23.8",
+    "@uiw/codemirror-theme-github": "^4.23.10",
-    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
-    "autoprefixer": "^10.4.20",
     "codemirror": "^6.0.1",
-    "color": "^4.2.3",
+    "color": "^5.0.0",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.2.4",
-    "embla-carousel-autoplay": "^8.3.1",
+    "embla-carousel-autoplay": "^8.5.2",
-    "embla-carousel-svelte": "^8.3.1",
+    "embla-carousel-svelte": "^8.5.2",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "^7.1.0",
-    "idb": "^8.0.0",
+    "idb": "^8.0.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "million": "^3.1.11",
-    "motion": "^11.12.0",
+    "motion": "^12.4.12",
-    "postcss": "^8.4.45",
+    "postcss": "^8.5.3",
     "react": "17",
-    "react-best-gradient-color-picker": "^3.0.10",
+    "react-best-gradient-color-picker": "3.0.11",
     "react-dom": "17",
     "rss-parser": "^3.13.0",
-    "sortablejs": "^1.15.3",
+    "sortablejs": "^1.15.6",
-    "svelte": "^5.1.9",
+    "svelte": "^5.22.6",
-    "tailwindcss": "^3.4.11",
+    "typescript": "^5.8.2",
-    "typescript": "^5.6.2",
+    "uuid": "^11.1.0",
-    "uuid": "^9.0.1",
+    "vite": "^6.2.1",
-    "vite": "^5.4.14",
+    "webextension-polyfill": "^0.12.0"
-    "webextension-polyfill": "^0.10.0"
   }
 }

settings.patch

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

src/background.ts

@@ -14,7 +14,7 @@ function reloadSeqtaPages() {
   result.then(open, console.error)
 }
 
-// Main message listener
+// @ts-ignore
 browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (response?: any) => void) => {
 
   switch (request.type) {
@@ -38,7 +38,7 @@ browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (resp
           sendResponse(response);
         });
       });
-      return true; // Keep message channel open for async response
+      return true;
 
     case 'githubTab':
       browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
@@ -49,13 +49,14 @@ browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (resp
       break;
 
     case 'sendNews':
-
       fetchNews(request.source ?? 'australia', sendResponse);
       return true;
   
     default:
       console.log('Unknown request type');
   }
+  
+  return false;
 });
 
 const DefaultValues: SettingsState = {
@@ -64,7 +65,6 @@ const DefaultValues: SettingsState = {
   bksliderinput: "50",
   transparencyEffects: false,
   lessonalert: true,
-  notificationcollector: true,
   defaultmenuorder: [],
   menuitems: {
     assessments: { toggle: true },
@@ -154,54 +154,63 @@ function SetStorageValue(object: any) {
   }
 }
 
-async function UpdateCurrentValues() {
+function convertBksliderToSpeed(bksliderinput: number): number {
-  try {
+  const minBase = 50;
-    const items = await browser.storage.local.get();
+  const maxBase = 150;
-    const CurrentValues = items;
 
-    const NewValue = Object.assign({}, DefaultValues, CurrentValues);
+  const scaledValue = 2 + ((maxBase - bksliderinput) / (maxBase - minBase)) ** 4;
+  const baseSpeed = 3;
 
-    function CheckInnerElement(element: any) {
+  const speed = baseSpeed / scaledValue;
-      for (let i in element) {
+  return speed;
-        if (typeof element[i] === 'object') {
+}
-          // @ts-expect-error
-          if (!Array.isArray(DefaultValues[i])) {
-            // @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);
+async function migrateLegacySettings() {
+  const storage = await browser.storage.local.get(null) as unknown as SettingsState;
 
-    if (items['customshortcuts']) {
+  // Animated Background Migration
-      NewValue['customshortcuts'] = items['customshortcuts'];
+  if ('animatedbk' in storage || 'bksliderinput' in storage) {
-    }
+    const animatedSettings = {
-
+      enabled: storage.animatedbk ?? true,
-    SetStorageValue(NewValue);
+      speed: storage.bksliderinput ? convertBksliderToSpeed(parseFloat(storage.bksliderinput)) : 1
-    console.log('[BetterSEQTA+] Values updated successfully');
+    };
-  } catch (error) {
+    await browser.storage.local.set({ 'plugin.animated-background.settings': animatedSettings });
-    console.error('[BetterSEQTA+] Error updating values:', error);
   }
+
+  // Assessments Average Migration
+  if ('assessmentsAverage' in storage || 'lettergrade' in storage) {
+    const assessmentsSettings = {
+      enabled: storage.assessmentsAverage ?? true,
+      lettergrade: storage.lettergrade ?? false
+    };
+    await browser.storage.local.set({ 'plugin.assessments-average.settings': assessmentsSettings });
+  }
+
+  if ('selectedTheme' in storage) {
+    const themesSettings = { enabled: true };
+    await browser.storage.local.set({ 'plugin.themes.settings': themesSettings });
+  }
+  if (storage.notificationCollector !== false) {
+    await browser.storage.local.set({ 'plugin.notificationCollector.settings': { enabled: true } });
+  } else {
+    await browser.storage.local.set({ 'plugin.notificationCollector.settings': { enabled: false } });
+  }
+
+  const keysToRemove = [
+    'animatedbk',
+    'bksliderinput',
+    'assessmentsAverage',
+    'lettergrade'
+  ];
+  await browser.storage.local.remove(keysToRemove);
 }
 
 browser.runtime.onInstalled.addListener(function (event) {
   browser.storage.local.remove(['justupdated']);
   browser.storage.local.remove(['data']);
 
-  UpdateCurrentValues();
+  if ( event.reason == 'install' || event.reason == 'update' ) {
-  if ( event.reason == 'install', event.reason == 'update' ) {
     browser.storage.local.set({ justupdated: true });
+    migrateLegacySettings();
   }
 });

src/background/news.ts

@@ -55,6 +55,7 @@ const rssFeedsByCountry: Record<string, string[]> = {
 export async function fetchNews(source: string, sendResponse: any) {
   const parser = new Parser();
   let feeds: string[];
+  console.log('fetchNews', source)
 
   if (source === "australia") {
     const date = new Date();

src/css/injected.scss

@@ -1010,34 +1010,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   margin-right: 157.5px;
   gap: 12px;
 }
-.bg {
-  animation: slide 3s ease-in-out infinite alternate;
-  background: var(--better-main);
-  bottom: 0;
-  left: -50%;
-  opacity: 0.5;
-  position: fixed;
-  right: -50%;
-  top: 0;
-  z-index: 0 !important;
-  overflow: hidden;
-  scale: 1.5;
-}
-.bg2 {
-  animation-direction: alternate-reverse;
-  animation-duration: 4s;
-}
-.bg3 {
-  animation-duration: 5s;
-}
-@keyframes slide {
-  0% {
-    transform: translate(50%) rotate(-60deg);
-  }
-  100% {
-    transform: translateX(5%) rotate(-60deg);
-  }
-}
 .home-root {
   width: 100%;
   display: flex;
@@ -2174,6 +2146,7 @@ body {
   > .entriesWrapper
   > .entry {
   padding: 3px;
+  transition: opacity 0.2s ease-in-out;
 }
 .Viewer__Viewer___32BH- {
   background: unset;

src/interface/components/Slider.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
-  let { state, onChange } = $props<{ state: number, onChange: (value: number) => void }>();
+  let { state, onChange, min = 0, max = 100, step = 1 } = $props<{ 
-  let percentage = $derived((state / 100) * 100);
+    state: number, 
+    onChange: (value: number) => void,
+    min?: number,
+    max?: number,
+    step?: number
+  }>();
+  let percentage = $derived(((state - min) / (max - min)) * 100);
 </script>
 
-<div class="relative w-full max-w-lg mx-auto">
+<div class="relative mx-auto w-full max-w-lg">
   <input
     type="range"
-    min="0"
+    min={min}
-    max="100"
+    max={max}
+    step={step}
     bind:value={state}
     style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
     onchange={(e) => onChange(Number(e.currentTarget.value))}

src/interface/components/TabbedContainer.svelte

@@ -41,7 +41,7 @@
 
 <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="relative flex">
+    <div bind:this={containerRef} class="flex relative">
       <MotionDiv
         class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
         animate={{ x: calcXPos(activeTab) }}
@@ -57,7 +57,7 @@
       {/each}
     </div>
   </div>
-  <div class="h-full px-4 overflow-hidden">
+  <div class="overflow-hidden px-4 h-full">
     <MotionDiv
       class="h-full"
       animate={{ x: `${-activeTab * 100}%` }}

src/interface/components/store/Backgrounds.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
-  import { setTheme } from '@/seqta/ui/themes/setTheme';
   import Spinner from '../Spinner.svelte';
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
   import Fuse from 'fuse.js';
   import { 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 }>();
@@ -170,13 +172,13 @@
   
   function selectNoBackground() {
     selectedBackground = null;
-    setTheme('');
+    themeManager.setTheme('');
   }
 </script>
 
 <div class="flex h-full">
   <!-- Sidebar -->
-  <div class="w-64 h-full p-4 border-r border-zinc-200 dark:border-zinc-700">
+  <div class="p-4 w-64 h-full border-r border-zinc-200 dark:border-zinc-700">
     <div class="mb-8">
       <h2 class="mb-4 text-lg font-semibold">Categories</h2>
       <nav class="space-y-2">
@@ -208,15 +210,15 @@
   </div>
 
   <!-- Main Content -->
-  <div class="flex-1 overflow-auto">
+  <div class="overflow-auto flex-1">
     <!-- Header -->
     <div class="sticky top-0 z-10 p-4 border-b bg-[#F1F1F3] dark:bg-zinc-900 dark:border-zinc-700">
-      <div class="flex items-center justify-between mb-4">
+      <div class="flex justify-between items-center mb-4">
         <h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
-        <div class="flex items-center gap-4">
+        <div class="flex gap-4 items-center">
           <select 
             bind:value={sortBy} 
-            class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
+            class="p-2 rounded-lg border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
           >
             <option value="newest">Newest</option>
             <option value="name">Name</option>
@@ -230,7 +232,7 @@
           <button
             class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
               ${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' : 
-                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-1 dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
+                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
             onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
           >
             {tab}
@@ -244,15 +246,15 @@
       {#if isLoading}
         <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {#each Array(9) as _}
-            <div class="relative overflow-hidden rounded-lg animate-pulse">
+            <div class="overflow-hidden relative rounded-lg animate-pulse">
               <!-- Image placeholder -->
               <div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
               <!-- Gradient overlay -->
-              <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-zinc-300 dark:from-zinc-700 to-transparent">
+              <div class="absolute right-0 bottom-0 left-0 h-16 to-transparent bg-linear-to-t from-zinc-300 dark:from-zinc-700">
                 <!-- Title placeholder -->
-                <div class="absolute bottom-2 left-2 right-2">
+                <div class="absolute right-2 bottom-2 left-2">
                   <div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
-                  <div class="w-1/2 h-3 mt-2 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
+                  <div class="mt-2 w-1/2 h-3 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
                 </div>
               </div>
             </div>
@@ -271,7 +273,7 @@
             return true;
           }) as background (background.id)}
             <div
-              class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer group"
+              class="overflow-hidden relative rounded-lg shadow-lg cursor-pointer group"
               onclick={() => toggleBackgroundInstallation(background)}
               onkeydown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
@@ -286,7 +288,7 @@
               {:else}
                 <video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
               {/if}
-              <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
+              <div class={`flex absolute inset-0 justify-center items-center opacity-0 transition-opacity duration-300 bg-black/50 group-hover:opacity-100 ${installingBackgrounds.has(background.id) ? 'opacity-100' : ''}`}>
                 {#if installingBackgrounds.has(background.id)}
                   <Spinner />
                 {:else if savedBackgrounds.includes(background.id)}

src/interface/components/store/CoverSwiper.svelte

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

src/interface/components/store/FilterPanel.svelte

@@ -48,8 +48,6 @@
     </div>
   </div>
     
-  <!-- Add similar sections for color, resolution, and orientation -->
-  
   <button 
     class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
     onclick={clearFilters}

src/interface/components/store/Header.svelte

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

src/interface/components/store/ThemeCard.svelte

@@ -11,7 +11,7 @@
     <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
       {theme.name}
     </div>
-    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80'></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>

src/interface/components/store/ThemeModal.svelte

@@ -54,7 +54,7 @@
 </script>
 
 <div 
-  class="flex fixed inset-0 z-50 justify-center items-end bg-black bg-opacity-70" 
+  class="flex fixed inset-0 z-50 justify-center items-end bg-black/70" 
   onclick={(e) => {
     if (e.target === e.currentTarget) hideModal();
   }} 
@@ -115,7 +115,7 @@
               <div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5">
                 {relatedTheme.name}
               </div>
-              <div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80"></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>

src/interface/components/themes/BackgroundItem.svelte

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

src/interface/components/themes/ThemeSelector.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
   import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
-  import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
   import { onDestroy, onMount } from 'svelte'
-  import { OpenThemeCreator } from '@/seqta/ui/ThemeCreator'
+  import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
-  import shareTheme from '@/seqta/ui/themes/shareTheme'
-  import { InstallTheme } from '@/seqta/ui/themes/downloadTheme'
-  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
-  import { setTheme } from '@/seqta/ui/themes/setTheme'
-  import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
   import { OpenStorePage } from '@/seqta/ui/renderStore'
   import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
-  import { closeExtensionPopup } from '@/SEQTA'
+  import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
+
+  const themeManager = ThemeManager.getInstance();
 
   let themes = $state<ThemeList | null>(null);
   let { isEditMode } = $props<{ isEditMode: boolean }>();
@@ -20,10 +17,10 @@
   const handleThemeClick = async (theme: CustomTheme) => {
     if (isEditMode) return;
     if (theme.id === themes?.selectedTheme) {
-      await disableTheme();
+      await themeManager.disableTheme();
       themes.selectedTheme = '';
     } else {
-      await setTheme(theme.id);
+      await themeManager.setTheme(theme.id);
       if (!themes) return;
       themes.selectedTheme = theme.id;
     }
@@ -31,13 +28,13 @@
 
   const handleThemeDelete = async (themeId: string) => {
     try {
-      await deleteTheme(themeId);
+      await themeManager.deleteTheme(themeId);
       if (!themes) return;
 
       themes.themes = themes.themes.filter(theme => theme.id !== themeId);
       if (themeId === themes.selectedTheme) {
         themes.selectedTheme = '';
-        await disableTheme();
+        await themeManager.disableTheme();
       }
     } catch (error) {
       console.error('Error deleting theme:', error);
@@ -46,7 +43,7 @@
 
   const handleShareTheme = async (theme: CustomTheme) => {
     try {
-      await shareTheme(theme.id);
+      await themeManager.shareTheme(theme.id);
     } catch (error) {
       console.error('Error sharing theme:', error);
     }
@@ -72,9 +69,10 @@
       try {
         const result = JSON.parse(event.target?.result as string);
         tempTheme = result;
-        await InstallTheme(result);
+        await themeManager.installTheme(result);
         await fetchThemes();
       } catch (error) {
+        console.error('Error parsing file:', error);
         alert('Error parsing file. Please upload a valid JSON theme file.');
       }
       tempTheme = null;
@@ -83,7 +81,10 @@
   }
 
   const fetchThemes = async () => {
-    themes = await getAvailableThemes();
+    themes = {
+      themes: await themeManager.getAvailableThemes(),
+      selectedTheme: themeManager.getSelectedThemeId() || '',
+    }
   }
 
   onMount(async () => {

src/interface/index.css

@@ -4,14 +4,8 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+button {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  @apply cursor-pointer;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
 }
 
 ::-webkit-scrollbar {

src/interface/index.html

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

src/interface/index.ts

@@ -1,25 +1,8 @@
 import "./index.css"
-import { mount } from "svelte"
-import type { ComponentType } from "svelte"
 import Settings from "./pages/settings.svelte"
 import IconFamily from '@/resources/fonts/IconFamily.woff'
 import browser from "webextension-polyfill"
-
+import renderSvelte from "./main"
-export default function renderSvelte(
-  Component: ComponentType | any,
-  mountPoint: ShadowRoot | HTMLElement,
-  props: Record<string, any> = {},
-) {
-  const app = mount(Component, {
-    target: mountPoint,
-    props: {
-      standalone: true,
-      ...props,
-    },
-  })
-
-  return app
-}
 
 function InjectCustomIcons() {
   console.info('[BetterSEQTA+] Injecting Icons')
@@ -43,4 +26,4 @@ if (!mountPoint) {
 }
 
 InjectCustomIcons()
-renderSvelte(Settings, mountPoint)
+renderSvelte(Settings, mountPoint, { standalone: true })

src/interface/main.ts

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

src/interface/pages/settings.svelte

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

src/interface/pages/settings/general.svelte

@@ -11,6 +11,67 @@
   import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
   import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
 
+  import { getAllPluginSettings } from "@/plugins"
+  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting } from "@/plugins/core/types"
+
+  // Union type representing all possible settings
+  type SettingType = 
+    (Omit<BooleanSetting, 'type'> & { type: 'boolean', id: string }) |
+    (Omit<StringSetting, 'type'> & { type: 'string', id: string }) |
+    (Omit<NumberSetting, 'type'> & { type: 'number', id: string }) |
+    (Omit<SelectSetting<string>, 'type'> & { 
+      type: 'select', 
+      id: string, 
+      options: string[]
+    });
+
+  interface Plugin {
+    pluginId: string;
+    name: string;
+    description: string;
+    settings: Record<string, SettingType>;
+  }
+
+  const pluginSettings = getAllPluginSettings() as Plugin[];
+  const pluginSettingsValues = $state<Record<string, Record<string, any>>>({});
+  
+  async function loadPluginSettings() {
+    for (const plugin of pluginSettings) {
+      if (Object.keys(plugin.settings).length === 0) continue;
+      
+      const storageKey = `plugin.${plugin.pluginId}.settings`;
+      const stored = await browser.storage.local.get(storageKey);
+      
+      pluginSettingsValues[plugin.pluginId] = stored[storageKey] || {};
+      
+      for (const [key, setting] of Object.entries(plugin.settings)) {
+        if (pluginSettingsValues[plugin.pluginId][key] === undefined) {
+          pluginSettingsValues[plugin.pluginId][key] = setting.default;
+        }
+      }
+    }
+  }
+  
+  async function updatePluginSetting(pluginId: string, key: string, value: any) {
+    const storageKey = `plugin.${pluginId}.settings`;
+    
+    if (!pluginSettingsValues[pluginId]) {
+      pluginSettingsValues[pluginId] = {};
+    }
+    pluginSettingsValues[pluginId][key] = value;
+    
+    const stored = await browser.storage.local.get(storageKey);
+    const currentSettings = (stored[storageKey] || {}) as Record<string, any>;
+    
+    currentSettings[key] = value;
+    
+    await browser.storage.local.set({ [storageKey]: currentSettings });
+  }
+
+  $effect(() => {
+    loadPluginSettings();
+  })
+
   const { showColourPicker } = $props<{ showColourPicker: () => void }>();
 </script>
 
@@ -28,7 +89,6 @@
 
 <div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
   {#each [
-
     {
       title: "Transparency Effects",
       description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
@@ -39,26 +99,6 @@
         onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
       }
     },
-    {
-      title: "Animated Background",
-      description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
-      id: 2,
-      Component: Switch,
-      props: {
-        state: $settingsState.animatedbk,
-        onChange: (isOn: boolean) => settingsState.animatedbk = isOn
-      }
-    },
-    {
-      title: "Animated Background Speed",
-      description: "Controls the speed of the animated background.",
-      id: 3,
-      Component: Slider,
-      props: {
-        state: $settingsState.bksliderinput,
-        onChange: (value: number) => settingsState.bksliderinput = `${value}`
-      }
-    },
     {
       title: "Custom Theme Colour",
       description: "Customise the overall theme colour of SEQTA Learn.",
@@ -88,46 +128,6 @@
         onChange: (isOn: boolean) => settingsState.animations = isOn
       }
     },
-    {
-      title: "Notification Collector",
-      description: "Uncaps the 9+ limit for notifications, showing the real number.",
-      id: 7,
-      Component: Switch,
-      props: {
-        state: $settingsState.notificationcollector,
-        onChange: (isOn: boolean) => settingsState.notificationcollector = isOn
-      }
-    },
-    {
-      title: "Assessment Average",
-      description: "Shows your subject average for assessments.",
-      id: 8,
-      Component: Switch,
-      props: {
-        state: $settingsState.assessmentsAverage,
-        onChange: (isOn: boolean) => settingsState.assessmentsAverage = isOn
-      }
-    },
-    {
-      title: "Letter Grade Averages",
-      description: "Shows the letter grade instead of the percentage in subject averages.",
-      id: 8,
-      Component: Switch,
-      props: {
-        state: $settingsState.lettergrade,
-        onChange: (isOn: boolean) => settingsState.lettergrade = isOn
-      }
-    },
-    {
-      title: "Lesson Alerts",
-      description: "Sends a native browser notification ~5 minutes prior to lessons.",
-      id: 8,
-      Component: Switch,
-      props: {
-        state: $settingsState.lessonalert,
-        onChange: (isOn: boolean) => settingsState.lessonalert = isOn
-      }
-    },
     {
       title: "12 Hour Time",
       description: "Prefer 12 hour time format for SEQTA",
@@ -178,21 +178,89 @@
           { value: "netherlands", label: "Netherlands" }
         ]
       }
-    },
-    {
-      title: "BetterSEQTA+",
-      description: "Enables BetterSEQTA+ features",
-      id: 12,
-      Component: Switch,
-      props: {
-        state: $settingsState.onoff,
-        onChange: (isOn: boolean) => settingsState.onoff = isOn
-      }
     }
   ] as option}
     {@render Setting(option)}
   {/each}
   
+  {#each pluginSettings as plugin}
+    <div>
+      <!-- Always show enable toggle if disableToggle is true -->
+      {#if (plugin as any).disableToggle}
+        <div class="flex justify-between items-center px-4 py-3">
+          <div class="pr-4">
+            <h2 class="text-sm font-bold">Enable {plugin.name}</h2>
+            <p class="text-xs">{plugin.description}</p>
+          </div>
+          <div>
+            <Switch
+              state={pluginSettingsValues[plugin.pluginId]?.enabled ?? true}
+              onChange={(value) => updatePluginSetting(plugin.pluginId, 'enabled', value)}
+            />
+          </div>
+        </div>
+      {/if}
+
+      <!-- Only show other settings if plugin is enabled or has no disableToggle -->
+      {#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
+        {#each Object.entries(plugin.settings) as [key, setting]}
+          <!-- Skip the 'enabled' setting if it's part of the settings object -->
+          {#if key !== 'enabled'}
+            <div class="flex justify-between items-center px-4 py-3">
+              <div class="pr-4">
+                <h2 class="text-sm font-bold">{setting.title || key}</h2>
+                <p class="text-xs">{setting.description || ''}</p>
+              </div>
+              <div>
+                {#if setting.type === 'boolean'}
+                  <Switch
+                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                  />
+                {:else if setting.type === 'number'}
+                  <Slider
+                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                    min={setting.min}
+                    max={setting.max}
+                    step={setting.step}
+                  />
+                {:else if setting.type === 'string'}
+                  <input
+                    type="text"
+                    class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white"
+                    value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    oninput={(e) => updatePluginSetting(plugin.pluginId, key, e.currentTarget.value)}
+                  />                
+                {:else if setting.type === 'select'}
+                  <Select
+                  state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                  onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                  options={(setting.options as string[]).map(opt => ({
+                    value: opt,
+                    label: opt.charAt(0).toUpperCase() + opt.slice(1)
+                    }))}
+                  />
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </div>
+  {/each}
+
+  {@render Setting({
+    title: "BetterSEQTA+",
+    description: "Enables BetterSEQTA+ features",
+    id: 12,
+    Component: Switch,
+    props: {
+      state: $settingsState.onoff,
+      onChange: (isOn: boolean) => settingsState.onoff = isOn
+    }
+  })}
+
   {#if $settingsState.devMode}
     <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
       <div class="pr-4">

src/interface/pages/store.svelte

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

src/interface/pages/themeCreator.svelte

@@ -7,7 +7,6 @@
   import { type LoadedCustomTheme } from '@/types/CustomThemes'
 
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
-  import { getTheme } from '@/seqta/ui/themes/getTheme'
 
   import Divider from '@/interface/components/themeCreator/divider.svelte'
   import Switch from '@/interface/components/Switch.svelte'
@@ -22,14 +21,13 @@
     handleImageVariableChange,
     handleCoverImageUpload
   } from '../utils/themeImageHandlers';
-  import { ClearThemePreview, UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview'
+  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
-  import { saveTheme } from '@/seqta/ui/themes/saveTheme'
-  import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
   import { themeUpdates } from '../hooks/ThemeUpdates'
-  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
+  import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
-  import { setTheme } from '@/seqta/ui/themes/setTheme'
 
   const { themeID } = $props<{ themeID: string }>()
+  const themeManager = ThemeManager.getInstance();
+
   let theme = $state<LoadedCustomTheme>({
     id: uuidv4(),
     name: '',
@@ -53,7 +51,12 @@
     codeEditorFullscreen = !codeEditorFullscreen;
   }
 
-  function toggleAccordion(title: string) {
+  function toggleAccordion(title: string, e: MouseEvent | KeyboardEvent) {
+    // if the target is the fullscreen button return
+    if (e.target instanceof HTMLButtonElement && e.target.classList.contains('fullscreen-toggle')) {
+      return;
+    }
+
     if (closedAccordions.includes(title)) {
       closedAccordions = closedAccordions.filter(t => t !== title);
     } else {
@@ -62,10 +65,10 @@
   }
 
   onMount(async () => {
-    await disableTheme();
+    await themeManager.disableTheme();
 
     if (themeID) {
-      const tempTheme = await getTheme(themeID)
+      const tempTheme = await themeManager.getTheme(themeID)
 
       if (!tempTheme) return
 
@@ -73,16 +76,12 @@
       const loadedTheme = {
         ...tempTheme,
         CustomImages: tempTheme.CustomImages.map(image => ({
-          ...image,
+          ...image
-          url: image.blob ? URL.createObjectURL(image.blob) : null
+        }))
-        })),
-        coverImageUrl: tempTheme.coverImage ? URL.createObjectURL(tempTheme.coverImage) : undefined
       }
 
-      if (tempTheme) {
+      theme = loadedTheme
-        theme = loadedTheme
+      themeLoaded = true
-        themeLoaded = true
-      }
     } else {
       themeLoaded = true
     }
@@ -106,7 +105,7 @@
     theme = await handleCoverImageUpload(event, theme);
   }
 
-  function submitTheme() {
+  async function submitTheme() {
     const themeClone = JSON.parse(JSON.stringify(theme));
 
     // re-insert blobs into themeClone
@@ -116,15 +115,17 @@
     }))
     themeClone.coverImage = theme.coverImage
 
-    ClearThemePreview();
+    themeManager.clearPreview();
-    saveTheme(themeClone);
+    await themeManager.saveTheme(themeClone);
-    setTheme(themeClone.id);
+    await themeManager.setTheme(themeClone.id);
     themeUpdates.triggerUpdate();
     CloseThemeCreator();
   }
 
   $effect(() => {
-    UpdateThemePreview(theme);
+    if (themeLoaded) {
+      void themeManager.updatePreviewDebounced(theme);
+    }
   });
 
   type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload' | 'conditional' | 'lightDarkToggle';
@@ -164,8 +165,8 @@
     <div class="flex justify-between {item.direction === 'vertical' ? 'flex-col items-start' : 'items-center'} py-3">
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
-        onclick={() => { item.direction === 'vertical' && toggleAccordion(item.title) }}
+        onclick={(e) => { item.direction === 'vertical' && toggleAccordion(item.title, e) }}
-        onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title) }}
+        onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title, e) }}
         class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">
 
         <div>
@@ -177,7 +178,7 @@
           <div class="flex justify-center items-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
             {#if item.type === 'codeEditor'}
               <!-- Fullscreen toggle button -->
-              <button onclick={toggleCodeEditorFullscreen} class="mr-2 text-lg font-IconFamily">
+              <button onclick={toggleCodeEditorFullscreen} class="px-2 mr-2 text-lg font-IconFamily fullscreen-toggle">
                 {'\uebdb'}
               </button>
             {/if}
@@ -210,14 +211,14 @@
             {#each theme.CustomImages as image (image.id)}
               <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
                 <div class="h-full">
-                  <img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
+                  <img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded" />
                 </div>
                 <input
                   type="text"
                   bind:value={image.variableName}
                   oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
                   placeholder="CSS Variable Name"
-                  class="flex-grow flex-[3] w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
+                  class="p-2 w-full rounded-lg border-0 transition grow flex-3 dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
                 />
                 <button onclick={() => onRemoveImage(image.id)} class="p-2 transition dark:text-white">
                   <span class='text-xl font-IconFamily'>{'\ued8c'}</span>
@@ -255,7 +256,7 @@
 
 <div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
   {#if codeEditorFullscreen}
-    <div class="absolute inset-0 z-[10000] bg-white dark:bg-zinc-900 dark:text-white">
+    <div class="absolute inset-0 bg-white z-[10000] dark:bg-zinc-900 dark:text-white">
       <div class="sticky top-0 px-2 h-screen">
         <div class="flex justify-between items-center my-4">
           <h2 class="text-xl font-bold">Custom CSS</h2>
@@ -310,7 +311,7 @@
       {/if}
       {#if theme.coverImage}
         <div class="absolute z-20 w-full h-full opacity-0 transition-opacity pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-        <img src={theme.coverImageUrl} alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
+        <img src="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
       {/if}
     </div>
 

src/interface/utils/themeImageHandlers.ts

@@ -17,7 +17,7 @@ export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promi
         const variableName = `custom-image-${theme.CustomImages.length}`;
         resolve({
           ...theme,
-          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: URL.createObjectURL(imageBlob) }],
+          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: null }],
         });
       };
       reader.readAsDataURL(file);
@@ -51,7 +51,7 @@ export function handleCoverImageUpload(event: Event, theme: LoadedCustomTheme):
       const reader = new FileReader();
       reader.onload = async () => {
         const imageBlob = await fetch(reader.result as string).then(res => res.blob());
-        resolve({ ...theme, coverImage: imageBlob, coverImageUrl: URL.createObjectURL(imageBlob) });
+        resolve({ ...theme, coverImage: imageBlob });
       };
       reader.readAsDataURL(file);
     });

src/manifests/manifest.json

@@ -32,7 +32,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["*://*/*"],
+      "resources": ["*/*"],
       "matches": ["*://*/*"]
     },
     {

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,115 @@
+import { BasePlugin } from "@/plugins/core/settings";
+import { booleanSetting, defineSettings, Setting } from "@/plugins/core/settingsHelpers";
+import { type Plugin } from "@/plugins/core/types";
+import stringToHTML from "@/seqta/utils/stringToHTML";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+
+const settings = defineSettings({
+  lettergrade: booleanSetting({
+    default: false,
+    title: "Letter Grades",
+    description: "Display the average as a letter instead of a percentage"
+  }),
+});
+
+class AssessmentsAveragePluginClass extends BasePlugin<typeof settings> {
+  @Setting(settings.lettergrade)
+  lettergrade!: boolean;
+}
+
+const instance = new AssessmentsAveragePluginClass();
+
+const assessmentsAveragePlugin: Plugin<typeof settings> = {
+  id: "assessments-average",
+  name: "Assessment Averages",
+  description: "Adds an average grade to the Assessments page",
+  version: "1.0.0",
+  disableToggle: true,
+  settings: instance.settings,
+
+  run: async (api) => {
+    api.seqta.onMount(".assessmentsWrapper", async () => {
+      await waitForElm(
+        "#main > .assessmentsWrapper .assessments .AssessmentItem__AssessmentItem___2EZ95",
+        true,
+        10,
+        1000
+      )
+
+      const assessmentsList = document.querySelector("#main > .assessmentsWrapper .assessments .AssessmentList__items___3LcmQ");
+      if (!assessmentsList) return;
+
+      const gradeElements = document.querySelectorAll(".Thermoscore__text___1NdvB");
+      if (!gradeElements.length) return;
+
+      // Parse and average grades
+      const letterToNumber: Record<string, number> = {
+        "A+": 100, A: 95, "A-": 90,
+        "B+": 85, B: 80, "B-": 75,
+        "C+": 70, C: 65, "C-": 60,
+        "D+": 55, D: 50, "D-": 45,
+        "E+": 40, E: 35, "E-": 30,
+        F: 0,
+      };
+
+      function parseGrade(text: string): number {
+        const str = text.trim().toUpperCase();
+        if (str.includes("/")) {
+          const [raw, max] = str.split("/").map(n => parseFloat(n));
+          return (raw / max) * 100;
+        }
+        if (str.includes("%")) {
+          return parseFloat(str.replace("%", "")) || 0;
+        }
+        return letterToNumber[str] ?? 0;
+      }
+
+      let total = 0;
+      let count = 0;
+      gradeElements.forEach((el) => {
+        const grade = parseGrade(el.textContent || "");
+        if (grade > 0) {
+          total += grade;
+          count++;
+        }
+      });
+
+      if (!count) return;
+
+      const avg = total / count;
+      const rounded = Math.ceil(avg / 5) * 5;
+      const numberToLetter = Object.entries(letterToNumber).reduce((acc, [k, v]) => {
+        acc[v] = k;
+        return acc;
+      }, {} as Record<number, string>);
+
+      const letterAvg = numberToLetter[rounded] ?? "N/A";
+      const display = api.settings.lettergrade ? letterAvg : `${avg.toFixed(2)}%`;
+
+      // Prevent duplicate
+      const existing = assessmentsList.querySelector(".AssessmentItem__title___2bELn");
+      if (existing?.textContent === "Subject Average") return;
+
+      const averageElement = stringToHTML(/* html */ `
+        <div class="AssessmentItem__AssessmentItem___2EZ95">
+          <div class="AssessmentItem__metaContainer___dMKma">
+            <div class="AssessmentItem__meta___WNSiK">
+              <div class="AssessmentItem__simpleResult___iBCeC">
+                <div class="AssessmentItem__title___2bELn">Subject Average</div>
+              </div>
+            </div>
+          </div>
+          <div class="Thermoscore__Thermoscore___2tWMi">
+            <div class="Thermoscore__fill___35WjF" style="width: ${avg.toFixed(2)}%">
+              <div class="Thermoscore__text___1NdvB" title="${display}">${display}</div>
+            </div>
+          </div>
+        </div>
+      `).firstChild;
+
+      assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
+    });
+  }
+};
+
+export default assessmentsAveragePlugin;

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

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

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

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

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

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

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

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

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

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

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

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

src/plugins/core/createAPI.ts

@@ -0,0 +1,258 @@
+import type { EventsAPI, Plugin, PluginAPI, PluginSettings, SEQTAAPI, SettingsAPI, SettingValue, StorageAPI } from './types';
+import { eventManager } from '@/seqta/utils/listeners/EventManager';
+import ReactFiber from '@/seqta/utils/ReactFiber';
+import browser from 'webextension-polyfill';
+
+function createSEQTAAPI(): SEQTAAPI {
+  return {
+    onMount: (selector, callback) => {
+      return eventManager.register(
+        `${selector}Added`,
+        {
+          customCheck: (element) => element.matches(selector),
+        },
+        callback
+      );
+    },
+    getFiber: (selector) => {
+      return ReactFiber.find(selector);
+    },
+    getCurrentPage: () => {
+      const path = window.location.hash.split('?page=/')[1] || '';
+      return path.split('/')[0];
+    },
+    onPageChange: (callback) => {
+      const handler = () => {
+        const page = window.location.hash.split('?page=/')[1] || '';
+        callback(page.split('/')[0]);
+      };
+    
+      window.addEventListener('hashchange', handler);
+    
+      // Return an unregister function
+      return {
+        unregister: () => {
+          window.removeEventListener('hashchange', handler);
+        }
+      };
+    }
+  };
+}
+
+function createSettingsAPI<T extends PluginSettings>(plugin: Plugin<T>): SettingsAPI<T> & { loaded: Promise<void> } {
+  const storageKey = `plugin.${plugin.id}.settings`;
+  const listeners = new Map<keyof T, Set<(value: any) => void>>();
+
+  // Initialize with default values
+  const settingsWithMeta: any = {
+    onChange: <K extends keyof T>(key: K, callback: (value: SettingValue<T[K]>) => void) => {
+      if (!listeners.has(key)) {
+        listeners.set(key, new Set());
+      }
+      listeners.get(key)!.add(callback);
+      return {
+        unregister: () => {
+          listeners.get(key)!.delete(callback);
+        }
+      };
+    },
+    offChange: <K extends keyof T>(key: K, callback: (value: SettingValue<T[K]>) => void) => {
+      listeners.get(key)?.delete(callback);
+    },
+    loaded: Promise.resolve() // will be replaced below
+  };
+
+  // Fill with defaults first
+  for (const key in plugin.settings) {
+    settingsWithMeta[key] = plugin.settings[key].default;
+  }
+
+  // Load stored settings and override defaults
+  const loaded = (async () => {
+    try {
+      const stored = await browser.storage.local.get(storageKey);
+      const storedSettings = stored[storageKey] as Partial<Record<keyof T, any>>;
+      if (storedSettings) {
+        for (const key in storedSettings) {
+          if (key in settingsWithMeta) {
+            settingsWithMeta[key] = storedSettings[key];
+            listeners.get(key as keyof T)?.forEach(cb => cb(storedSettings[key]));
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`[BetterSEQTA+] Error loading settings for plugin ${plugin.id}:`, error);
+    }
+  })();
+
+  settingsWithMeta.loaded = loaded;
+
+  // Listen for storage changes and update settingsWithMeta
+  const handleStorageChange = (changes: { [key: string]: browser.Storage.StorageChange }, area: string) => {
+    if (area !== 'local' || !(storageKey in changes)) return;
+
+    const newValue = changes[storageKey].newValue as Partial<Record<keyof T, any>> | undefined;
+    if (!newValue) return;
+
+    for (const key in newValue) {
+      const typedKey = key as keyof T;
+      settingsWithMeta[typedKey] = newValue[typedKey];
+      listeners.get(typedKey)?.forEach(cb => cb(newValue[typedKey]));
+    }
+  };
+
+  browser.storage.onChanged.addListener(handleStorageChange);
+
+  const proxy = new Proxy(settingsWithMeta, {
+    get(target, prop) {
+      return target[prop];
+    },
+    set(target, prop, value) {
+      if (['onChange', 'offChange', 'loaded'].includes(prop as string)) return false;
+
+      target[prop] = value;
+
+      // Reconstruct just the data keys for storage (excluding metadata methods)
+      const dataToStore: any = {};
+      for (const key in plugin.settings) {
+        dataToStore[key] = target[key];
+      }
+
+      browser.storage.local.set({ [storageKey]: dataToStore });
+
+      listeners.get(prop as keyof T)?.forEach(cb => cb(value));
+      return true;
+    }
+  }) as SettingsAPI<T> & { loaded: Promise<void> };
+
+  return proxy;
+}
+
+function createStorageAPI<T = any>(pluginId: string): StorageAPI<T> & { [K in keyof T]: T[K] } {
+  const prefix = `plugin.${pluginId}.storage.`;
+  const cache: Record<string, any> = {};
+  const listeners = new Map<string, Set<(value: any) => void>>();
+  const storageListeners = new Set<(changes: { [key: string]: any }, area: string) => void>();
+  
+  // Load all existing storage values for this plugin
+  const loadStoragePromise = (async () => {
+    try {
+      const allStorage = await browser.storage.local.get(null);
+      
+      // Filter for this plugin's storage keys and populate cache
+      Object.entries(allStorage).forEach(([key, value]) => {
+        if (key.startsWith(prefix)) {
+          const shortKey = key.slice(prefix.length);
+          cache[shortKey] = value;
+        }
+      });
+    } catch (error) {
+      console.error(`[BetterSEQTA+] Error loading storage for plugin ${pluginId}:`, error);
+    }
+  })();
+  
+  // Listen for storage changes
+  const handleStorageChange = (changes: { [key: string]: any }, area: string) => {
+    if (area === 'local') {
+      Object.entries(changes).forEach(([key, change]) => {
+        if (key.startsWith(prefix)) {
+          const shortKey = key.slice(prefix.length);
+          cache[shortKey] = change.newValue;
+          
+          // Notify listeners
+          listeners.get(shortKey)?.forEach(callback => callback(change.newValue));
+        }
+      });
+    }
+  };
+  browser.storage.onChanged.addListener(handleStorageChange);
+  storageListeners.add(handleStorageChange);
+  
+  // Create the proxy for direct property access
+  return new Proxy(cache, {
+    get(target, prop: string) {
+      if (prop === 'onChange') {
+        return (key: keyof T, callback: (value: T[keyof T]) => void) => {
+          if (!listeners.has(key as string)) {
+            listeners.set(key as string, new Set());
+          }
+          listeners.get(key as string)!.add(callback);
+          return {
+            unregister: () => {
+              listeners.get(key as string)?.delete(callback);
+            }
+          };
+        };
+      }
+      if (prop === 'offChange') {
+        return (key: keyof T, callback: (value: T[keyof T]) => void) => {
+          listeners.get(key as string)?.delete(callback);
+        };
+      }
+      if (prop === 'loaded') {
+        return loadStoragePromise;
+      }
+      
+      // Direct property access
+      return target[prop];
+    },
+    set(target, prop: string, value: any) {
+      if (['onChange', 'offChange', 'loaded'].includes(prop)) {
+        return false;
+      }
+      
+      // Update cache and store in browser storage
+      target[prop] = value;
+      browser.storage.local.set({ [prefix + prop]: value });
+      
+      // Notify listeners
+      listeners.get(prop)?.forEach(callback => callback(value));
+      
+      return true;
+    }
+  }) as StorageAPI<T> & { [K in keyof T]: T[K] };
+}
+
+function createEventsAPI(pluginId: string): EventsAPI {
+  const prefix = `plugin.${pluginId}.`;
+  const eventListeners = new Map<string, Set<{ callback: (...args: any[]) => void, listener: EventListener }>>();
+  
+  return {
+    on: (event, callback) => {
+      const fullEventName = prefix + event;
+      const listener = ((e: CustomEvent) => {
+        callback(...(e.detail || []));
+      }) as EventListener;
+      
+      document.addEventListener(fullEventName, listener);
+      
+      if (!eventListeners.has(event)) {
+        eventListeners.set(event, new Set());
+      }
+      eventListeners.get(event)!.add({ callback, listener });
+      
+      return {
+        unregister: () => {
+          document.removeEventListener(fullEventName, listener);
+          eventListeners.get(event)?.delete({ callback, listener });
+        }
+      };
+    },
+    emit: (event, ...args) => {
+      document.dispatchEvent(
+        new CustomEvent(prefix + event, {
+          detail: args.length > 0 ? args : null
+        })
+      );
+    },
+  };
+}
+
+export function createPluginAPI<T extends PluginSettings, S = any>(plugin: Plugin<T, S>): PluginAPI<T, S> {
+  return {
+    seqta: createSEQTAAPI(),
+    settings: createSettingsAPI(plugin),
+    storage: createStorageAPI<S>(plugin.id),
+    events: createEventsAPI(plugin.id),
+  };
+} 

src/plugins/core/manager.ts

@@ -0,0 +1,269 @@
+import type { BooleanSetting, NumberSetting, Plugin, PluginSettings, SelectSetting, StringSetting } from './types';
+import { createPluginAPI } from './createAPI';
+import browser from 'webextension-polyfill';
+
+interface PluginSettingsStorage {
+  enabled?: boolean;
+  [key: string]: any;
+}
+
+interface StorageChange<T = any> {
+  oldValue?: T;
+  newValue?: T;
+}
+
+export class PluginManager {
+  private static instance: PluginManager;
+  private plugins: Map<string, Plugin<any, any>> = new Map();
+  private runningPlugins: Map<string, boolean> = new Map();
+  private eventBacklog: Map<string, any[]> = new Map();
+  private cleanupFunctions: Map<string, () => void> = new Map();
+  private listeners: Map<string, Set<(...args: any[]) => void>> = new Map();
+  private styleElements: Map<string, HTMLStyleElement> = new Map();
+
+  private constructor() {
+    this.setupPluginStateListener();
+  }
+
+  public static getInstance(): PluginManager {
+    if (!PluginManager.instance) {
+      PluginManager.instance = new PluginManager();
+    }
+    return PluginManager.instance;
+  }
+
+  public dispatchPluginEvent(pluginId: string, event: string, args?: any) {
+    const fullEventName = `plugin.${pluginId}.${event}`;
+    
+    // Dispatch plugin event if it's running otherwise queue it
+    if (this.runningPlugins.get(pluginId)) {
+      document.dispatchEvent(new CustomEvent(fullEventName, { detail: args }));
+    } else {
+      const key = `${pluginId}:${event}`;
+      if (!this.eventBacklog.has(key)) {
+        this.eventBacklog.set(key, []);
+      }
+      this.eventBacklog.get(key)!.push(args);
+    }
+  }
+
+  private async processBackloggedEvents(pluginId: string) {
+    for (const [key, argsList] of this.eventBacklog.entries()) {
+      const [eventPluginId, event] = key.split(':');
+      if (eventPluginId === pluginId) {
+        for (const args of argsList) {
+          this.dispatchPluginEvent(pluginId, event, args);
+        }
+        this.eventBacklog.delete(key);
+      }
+    }
+  }
+
+  public registerPlugin<T extends PluginSettings, S>(plugin: Plugin<T, S>): void {
+    if (this.plugins.has(plugin.id)) {
+      throw new Error(`Plugin with id "${plugin.id}" is already registered`);
+    }
+    this.plugins.set(plugin.id, plugin);
+  }
+
+  public async startPlugin(pluginId: string): Promise<void> {
+    const plugin = this.plugins.get(pluginId);
+    if (!plugin) {
+      throw new Error(`Plugin "${pluginId}" not found`);
+    }
+
+    if (this.runningPlugins.get(pluginId)) {
+      console.warn(`Plugin "${pluginId}" is already running`);
+      return;
+    }
+
+    try {
+      const api = createPluginAPI(plugin);
+      
+      // Check if plugin is enabled before starting
+      if (plugin.disableToggle) {
+        const settings = await browser.storage.local.get(`plugin.${pluginId}.settings`);
+        const pluginSettings = settings[`plugin.${pluginId}.settings`] as PluginSettingsStorage | undefined;
+        const enabled = pluginSettings?.enabled ?? true;
+        if (!enabled) {
+          console.info(`Plugin "${pluginId}" is disabled, skipping initialization`);
+          return;
+        }
+      }
+
+      // Inject plugin styles if provided
+      if (plugin.styles) {
+        const styleElement = document.createElement('style');
+        styleElement.textContent = plugin.styles;
+        document.head.appendChild(styleElement);
+        this.styleElements.set(pluginId, styleElement);
+      }
+      
+      // Wait for both settings and storage to be loaded before starting the plugin
+      await Promise.all([
+        (api.settings as any).loaded,
+        api.storage.loaded
+      ]);
+      
+      const result = await plugin.run(api);
+      if (typeof result === 'function') {
+        this.cleanupFunctions.set(plugin.id, result);
+      }
+      this.runningPlugins.set(pluginId, true);
+      console.info(`Plugin "${pluginId}" started successfully`);
+      
+      // Process any backlogged events
+      await this.processBackloggedEvents(pluginId);
+    } catch (error) {
+      console.error(`[BetterSEQTA+] Failed to start plugin ${pluginId}:`, error);
+      throw error;
+    }
+  }
+
+  public async startAllPlugins(): Promise<void> {
+    const startPromises = Array.from(this.plugins.keys()).map(id => 
+      this.startPlugin(id).catch(error => {
+        console.error(`Failed to start plugin "${id}":`, error);
+        return Promise.reject(error);
+      })
+    );
+
+    await Promise.allSettled(startPromises);
+  }
+
+  public async stopPlugin(pluginId: string): Promise<void> {
+    // Remove plugin styles
+    const styleElement = this.styleElements.get(pluginId);
+    if (styleElement) {
+      styleElement.remove();
+      this.styleElements.delete(pluginId);
+    }
+
+    const cleanup = this.cleanupFunctions.get(pluginId);
+    if (cleanup) {
+      cleanup();
+      this.cleanupFunctions.delete(pluginId);
+    }
+    this.runningPlugins.set(pluginId, false);
+    console.info(`Plugin "${pluginId}" stopped`);
+    this.emit('plugin.stopped', pluginId);
+  }
+
+  public stopAllPlugins(): void {
+    Array.from(this.plugins.keys()).forEach(id => this.stopPlugin(id));
+  }
+
+  public getPlugin(pluginId: string): Plugin | undefined {
+    return this.plugins.get(pluginId);
+  }
+
+  public getAllPlugins(): Plugin[] {
+    return Array.from(this.plugins.values());
+  }
+
+  public getAllPluginSettings(): Array<{
+    pluginId: string;
+    name: string;
+    description: string;
+    settings: {
+      [key: string]: (Omit<BooleanSetting, 'type'> & { type: 'boolean', id: string }) |
+                     (Omit<StringSetting, 'type'> & { type: 'string', id: string }) |
+                     (Omit<NumberSetting, 'type'> & { type: 'number', id: string }) |
+                     (Omit<SelectSetting<string>, 'type'> & { type: 'select', id: string, options: Array<{ value: string, label: string }> });
+    }
+  }> {
+    return Array.from(this.plugins.entries()).map(([id, plugin]) => {
+      const settingsEntries = Object.entries(plugin.settings).map(([key, setting]) => {
+        const settingObj = setting as any;
+        // Create a copy of the setting object without any functions
+        const result: any = Object.fromEntries(
+          Object.entries(settingObj)
+            .filter(([_, value]) => typeof value !== 'function')
+        );
+        
+        // Ensure required properties are present
+        result.id = key;
+        result.title = result.title || key;
+        result.description = result.description || '';
+        
+        return [key, result];
+      });
+
+      if (plugin.disableToggle) {
+        settingsEntries.push([
+          'enabled', {
+            id: 'enabled',
+            title: plugin.name,
+            description: plugin.description,
+            type: 'boolean',
+            default: true
+          }
+        ])
+      }
+      return {
+        pluginId: id,
+        name: plugin.name,
+        description: plugin.description,
+        settings: Object.fromEntries(settingsEntries),
+        disableToggle: plugin.disableToggle
+      };
+    });
+  }
+
+  public isPluginRunning(pluginId: string): boolean {
+    return this.runningPlugins.get(pluginId) || false;
+  }
+
+  private emit(event: string, ...args: any[]): void {
+    const listeners = this.listeners.get(event);
+    if (listeners) {
+      listeners.forEach(listener => listener(...args));
+    }
+  }
+
+  public on(event: string, callback: (...args: any[]) => void): void {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event)!.add(callback);
+  }
+
+  public off(event: string, callback: (...args: any[]) => void): void {
+    const listeners = this.listeners.get(event);
+    if (listeners) {
+      listeners.delete(callback);
+    }
+  }
+
+  // Add handler for plugin enable/disable state changes
+  private async handlePluginStateChange(pluginId: string, enabled: boolean): Promise<void> {
+    if (enabled) {
+      await this.startPlugin(pluginId);
+    } else {
+      await this.stopPlugin(pluginId);
+    }
+  }
+
+  // Add listener for plugin settings changes
+  private setupPluginStateListener(): void {
+    browser.storage.onChanged.addListener((changes: { [key: string]: StorageChange }, area: string) => {
+      if (area !== 'local') return;
+      
+      for (const [key, change] of Object.entries(changes)) {
+        const match = key.match(/^plugin\.(.+)\.settings$/);
+        if (!match) continue;
+        
+        const pluginId = match[1];
+        const plugin = this.plugins.get(pluginId);
+        if (!plugin?.disableToggle) continue;
+        
+        const enabled = (change.newValue as PluginSettingsStorage)?.enabled ?? true;
+        const wasEnabled = (change.oldValue as PluginSettingsStorage)?.enabled ?? true;
+        
+        if (enabled !== wasEnabled) {
+          this.handlePluginStateChange(pluginId, enabled);
+        }
+      }
+    });
+  }
+} 

src/plugins/core/settings.ts

@@ -0,0 +1,39 @@
+import type { PluginSettings } from './types';
+
+export function Setting(settingDef: any): PropertyDecorator {
+  return (target, propertyKey) => {
+    const proto = target.constructor.prototype;
+    if (!proto.hasOwnProperty('settings')) {
+      Object.defineProperty(proto, 'settings', {
+        value: {},
+        writable: true,
+        configurable: true,
+        enumerable: true
+      });
+    }
+
+    proto.settings[propertyKey] = settingDef;
+  };
+}
+
+// Base plugin class that handles settings
+export abstract class BasePlugin<T extends PluginSettings = PluginSettings> {
+  // The settings property will be populated by decorators
+  // Keep the instance property and constructor logic as is,
+  // as changing it would require changing animated-background/index.ts
+  settings!: T; // Use definite assignment assertion
+
+  constructor() {
+    // Copy settings from the prototype to the instance
+    // This ensures that each instance has its own settings object
+    // IMPORTANT: Ensure the prototype actually HAS settings before copying
+    if (this.constructor.prototype.hasOwnProperty('settings')) {
+      // Deep clone might be safer if settings objects become complex,
+      // but a shallow clone is usually fine for this structure.
+      this.settings = { ...this.constructor.prototype.settings } as T;
+    } else {
+      // Fallback if decorators somehow didn't run or add the property
+      this.settings = {} as T;
+    }
+  }
+}

src/plugins/core/settingsHelpers.ts

@@ -0,0 +1,50 @@
+import type { BooleanSetting, NumberSetting, SelectSetting, StringSetting } from './types';
+
+export function numberSetting(options: Omit<NumberSetting, 'type'>): NumberSetting {
+  return {
+    type: 'number',
+    ...options
+  };
+}
+
+export function booleanSetting(options: Omit<BooleanSetting, 'type'>): BooleanSetting {
+  return {
+    type: 'boolean',
+    ...options
+  };
+}
+
+export function stringSetting(options: Omit<StringSetting, 'type'>): StringSetting {
+  return {
+    type: 'string',
+    ...options
+  };
+}
+
+export function selectSetting<T extends string>(options: Omit<SelectSetting<T>, 'type'>): SelectSetting<T> {
+  return {
+    type: 'select',
+    ...options
+  };
+}
+
+export function defineSettings<T extends Record<string, any>>(settings: T): T {
+  return settings;
+}
+
+export function Setting(settingDef: any): PropertyDecorator {
+  return (target, propertyKey) => {
+    const proto = target.constructor.prototype;
+    if (!proto.hasOwnProperty('settings')) {
+      Object.defineProperty(proto, 'settings', {
+        value: {},
+        writable: true,
+        configurable: true,
+        enumerable: true
+      });
+    }
+
+    proto.settings[propertyKey] = settingDef;
+  };
+}
+  

src/plugins/core/types.ts

@@ -0,0 +1,102 @@
+import ReactFiber from '@/seqta/utils/ReactFiber';
+
+export interface BooleanSetting {
+  type: 'boolean';
+  default: boolean;
+  title: string;
+  description?: string;
+}
+
+export interface StringSetting {
+  type: 'string';
+  default: string;
+  title: string;
+  description?: string;
+  maxLength?: number;
+  pattern?: string;
+}
+
+export interface NumberSetting {
+  type: 'number';
+  default: number;
+  title: string;
+  description?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export interface SelectSetting<T extends string> {
+  type: 'select';
+  options: readonly T[];
+  default: T;
+  title: string;
+  description?: string;
+}
+
+export type PluginSetting = BooleanSetting | StringSetting | NumberSetting | SelectSetting<string>;
+
+export type PluginSettings = {
+  [key: string]: PluginSetting;
+}
+
+// Helper type to extract the actual value type from a setting
+export type SettingValue<T extends PluginSetting> = T extends BooleanSetting ? boolean :
+  T extends StringSetting ? string :
+  T extends NumberSetting ? number :
+  T extends SelectSetting<infer O> ? O :
+  never;
+
+export type SettingsAPI<T extends PluginSettings> = {
+  [K in keyof T]: SettingValue<T[K]>;
+} & {
+  onChange: <K extends keyof T>(key: K, callback: (value: SettingValue<T[K]>) => void) => { unregister: () => void };
+  offChange: <K extends keyof T>(key: K, callback: (value: SettingValue<T[K]>) => void) => void;
+  loaded: Promise<void>;
+}  
+
+export interface SEQTAAPI {
+  onMount: (selector: string, callback: (element: Element) => void) => { unregister: () => void };
+  getFiber: (selector: string) => ReactFiber;
+  getCurrentPage: () => string;
+  onPageChange: (callback: (page: string) => void) => { unregister: () => void };
+}
+
+export interface StorageAPI<T = any> {
+  /**
+   * Register a callback to be called when a storage value changes
+   */
+  onChange: <K extends keyof T>(key: K, callback: (value: T[K]) => void) => { unregister: () => void };
+  
+  /**
+   * Promise that resolves when storage values are loaded
+   */
+  loaded: Promise<void>;
+}
+
+export type TypedStorageAPI<T> = StorageAPI<T> & {
+  [K in keyof T]: T[K];
+}
+
+export interface EventsAPI {
+  on: (event: string, callback: (...args: any[]) => void) => { unregister: () => void };
+  emit: (event: string, ...args: any[]) => void;
+}
+
+export interface PluginAPI<T extends PluginSettings, S = any> {
+  seqta: SEQTAAPI;
+  settings: SettingsAPI<T>;
+  storage: TypedStorageAPI<S>;
+  events: EventsAPI;
+}
+
+export interface Plugin<T extends PluginSettings = PluginSettings, S = any> {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  settings: T;
+  styles?: string;  // Optional CSS styles for the plugin
+  disableToggle?: boolean;  // Optional flag to show/hide the plugin's enable/disable toggle in settings
+  run: (api: PluginAPI<T, S>) => void | Promise<void> | (() => void) | Promise<(() => void)>;
+}

src/plugins/index.ts

@@ -0,0 +1,30 @@
+import { PluginManager } from './core/manager';
+
+// plugins
+import timetablePlugin from './built-in/timetable';
+import notificationCollectorPlugin from './built-in/notificationCollector';
+import themesPlugin from './built-in/themes';
+import animatedBackgroundPlugin from './built-in/animatedBackground';
+import assessmentsAveragePlugin from './built-in/assessmentsAverage';
+// Initialize plugin manager
+const pluginManager = PluginManager.getInstance();
+
+// Register built-in plugins
+pluginManager.registerPlugin(themesPlugin);
+pluginManager.registerPlugin(animatedBackgroundPlugin);
+pluginManager.registerPlugin(assessmentsAveragePlugin);
+pluginManager.registerPlugin(notificationCollectorPlugin);
+pluginManager.registerPlugin(timetablePlugin);
+//pluginManager.registerPlugin(testPlugin);
+
+export { init as Monofile } from './monofile';
+
+export async function initializePlugins(): Promise<void> {
+  await pluginManager.startAllPlugins();
+}
+
+export { pluginManager };
+
+export function getAllPluginSettings() {
+  return pluginManager.getAllPluginSettings();
+}

src/plugins/monofile.ts

@@ -0,0 +1,657 @@
+// Third-party libraries
+import browser from "webextension-polyfill"
+import { animate, stagger } from "motion"
+
+// Internal utilities and functions
+import { ChangeMenuItemPositions, MenuOptionsOpen } from "@/seqta/utils/Openers/OpenMenuOptions"
+import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour"
+import { waitForElm } from "@/seqta/utils/waitForElm"
+import { delay } from "@/seqta/utils/delay"
+import stringToHTML from "@/seqta/utils/stringToHTML"
+import { MessageHandler } from "@/seqta/utils/listeners/MessageListener"
+import {
+  settingsState,
+} from "@/seqta/utils/listeners/SettingsState"
+import { StorageChangeHandler } from "@/seqta/utils/listeners/StorageChanges"
+import { eventManager } from "@/seqta/utils/listeners/EventManager"
+
+// UI and theme management
+import RegisterClickListeners from "@/seqta/utils/listeners/ClickListeners"
+import { AddBetterSEQTAElements } from "@/seqta/ui/AddBetterSEQTAElements"
+import { updateAllColors } from "@/seqta/ui/colors/Manager"
+import loading from "@/seqta/ui/Loading"
+import { SendNewsPage } from "@/seqta/utils/SendNewsPage"
+import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage"
+import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew"
+
+// JSON content
+import MenuitemSVGKey from "@/seqta/content/MenuItemSVGKey.json"
+
+// Icons and fonts
+import IconFamily from "@/resources/fonts/IconFamily.woff"
+
+// Stylesheets
+import iframeCSS from "@/css/iframe.scss?raw"
+
+function SetDisplayNone(ElementName: string) {
+  return `li[data-key=${ElementName}]{display:var(--menuHidden) !important; transition: 1s;}`
+}
+
+async function HideMenuItems(): Promise<void> {
+  try {
+    let stylesheetInnerText: string = ""
+    for (const [menuItem, { toggle }] of Object.entries(
+      settingsState.menuitems,
+    )) {
+      if (!toggle) {
+        stylesheetInnerText += SetDisplayNone(menuItem)
+        console.info(`[BetterSEQTA+] Hiding ${menuItem} menu item`)
+      }
+    }
+
+    const menuItemStyle: HTMLStyleElement = document.createElement("style")
+    menuItemStyle.innerText = stylesheetInnerText
+    document.head.appendChild(menuItemStyle)
+  } catch (error) {
+    console.error("[BetterSEQTA+] An error occurred:", error)
+  }
+}
+
+export function hideSideBar() {
+  const sidebar = document.getElementById("menu") // The sidebar element to be closed
+  const main = document.getElementById("main") // The main content element that must be resized to fill the page
+
+  const currentMenuWidth = window.getComputedStyle(sidebar!).width // Get the styles of the different elements
+  const currentContentPosition = window.getComputedStyle(main!).position
+
+  if (currentMenuWidth != "0") {
+    // Actually modify it to collapse the sidebar
+    sidebar!.style.width = "0"
+  } else {
+    sidebar!.style.width = "100%"
+  }
+
+  if (currentContentPosition != "relative") {
+    main!.style.position = "relative"
+  } else {
+    main!.style.position = "absolute"
+  }
+}
+
+
+
+export async function finishLoad() {
+  try {
+    document.querySelector(".legacy-root")?.classList.remove("hidden")
+
+    const loadingbk = document.getElementById("loading")
+    loadingbk?.classList.add("closeLoading")
+    await delay(501)
+    loadingbk?.remove()
+  } catch (err) {
+    console.error("Error during loading cleanup:", err)
+  }
+
+  if (settingsState.justupdated && !document.getElementById("whatsnewbk")) {
+    OpenWhatsNewPopup()
+  }
+}
+
+export function GetCSSElement(file: string) {
+  const cssFile = browser.runtime.getURL(file)
+  const fileref = document.createElement("link")
+  fileref.setAttribute("rel", "stylesheet")
+  fileref.setAttribute("type", "text/css")
+  fileref.setAttribute("href", cssFile)
+
+  return fileref
+}
+
+function removeThemeTagsFromNotices() {
+  // Grabs an array of the notice iFrames
+  const userHTMLArray = document.getElementsByClassName("userHTML")
+  // Iterates through the array, applying the iFrame css
+  for (const item of userHTMLArray) {
+    // Grabs the HTML of the body tag
+    const item1 = item as HTMLIFrameElement
+    const body = item1.contentWindow!.document.querySelectorAll("body")[0]
+    if (body) {
+      // Replaces the theme tag with nothing
+      const bodyText = body.innerHTML
+      body.innerHTML = bodyText
+        .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
+        .replace(/ +/, " ")
+    }
+  }
+}
+
+async function updateIframesWithDarkMode(): Promise<void> {
+  const cssLink = document.createElement("style")
+  cssLink.classList.add("iframecss")
+  const cssContent = document.createTextNode(iframeCSS)
+  cssLink.appendChild(cssContent)
+
+  eventManager.register(
+    "iframeAdded",
+    {
+      elementType: "iframe",
+      customCheck: (element: Element) =>
+        !element.classList.contains("iframecss"),
+    },
+    (element) => {
+      const iframe = element as HTMLIFrameElement
+      try {
+        applyDarkModeToIframe(iframe, cssLink)
+
+        if (element.classList.contains("cke_wysiwyg_frame")) {
+          (async () => {
+            await delay(100)
+            iframe.contentDocument?.body.setAttribute("spellcheck", "true")
+          })()
+        }
+      } catch (error) {
+        console.error("Error applying dark mode:", error)
+      }
+    },
+  )
+}
+
+function applyDarkModeToIframe(
+  iframe: HTMLIFrameElement,
+  cssLink: HTMLStyleElement,
+): void {
+  const iframeDocument = iframe.contentDocument
+  if (!iframeDocument) return
+
+  iframe.onload = () => {
+    applyDarkModeToIframe(iframe, cssLink)
+  }
+
+  if (settingsState.DarkMode) {
+    iframeDocument.documentElement.classList.add("dark")
+  }
+
+  const head = iframeDocument.head
+  if (head && !head.innerHTML.includes("iframecss")) {
+    head.innerHTML += cssLink.outerHTML
+  }
+}
+
+function SortMessagePageItems(messagesParentElement: any) {
+  let filterbutton = document.createElement("div")
+  filterbutton.classList.add("messages-filterbutton")
+  filterbutton.innerText = "Filter"
+
+  let header = document.getElementsByClassName(
+    "MessageList__MessageList___3DxoC",
+  )[0].firstChild as HTMLElement
+  header.append(filterbutton)
+  messagesParentElement
+}
+
+async function LoadPageElements(): Promise<void> {
+  await AddBetterSEQTAElements()
+  const sublink: string | undefined = window.location.href.split("/")[4]
+
+  eventManager.register(
+    "messagesAdded",
+    {
+      elementType: "div",
+      className: "messages",
+    },
+    handleMessages,
+  )
+
+  eventManager.register(
+    "noticesAdded",
+    {
+      elementType: "div",
+      className: "notices",
+    },
+    CheckNoticeTextColour,
+  )
+
+  eventManager.register(
+    "dashboardAdded",
+    {
+      elementType: "div",
+      className: "dashboard",
+    },
+    handleDashboard,
+  )
+
+  eventManager.register(
+    "documentsAdded",
+    {
+      elementType: "div",
+      className: "documents",
+    },
+    handleDocuments,
+  )
+
+  eventManager.register(
+    "reportsAdded",
+    {
+      elementType: "div",
+      className: "reports",
+    },
+    handleReports,
+  )
+
+  /* eventManager.register(
+    "timetableAdded",
+    {
+      elementType: "div",
+      className: "timetablepage",
+    },
+    handleTimetable,
+  ) */
+
+  eventManager.register(
+    "noticesAdded",
+    {
+      elementType: "div",
+      className: "notice",
+    },
+    handleNotices,
+  )
+
+  RegisterClickListeners()
+
+  await handleSublink(sublink)
+}
+
+async function handleNotices(node: Element): Promise<void> {
+  if (!(node instanceof HTMLElement)) return
+  if (!settingsState.animations) return
+
+  node.style.opacity = "0"
+
+  // get index of node in relation to parent
+  const index = Array.from(node.parentElement!.children).indexOf(node)
+
+  animate(
+    node,
+    { opacity: [0, 1], y: [50, 0], scale: [0.99, 1] },
+    {
+      delay: 0.1 * index,
+      type: "spring",
+      stiffness: 250,
+      damping: 20,
+    },
+  )
+}
+
+async function handleSublink(sublink: string | undefined): Promise<void> {
+  switch (sublink) {
+    case "news":
+      await handleNewsPage()
+      break
+    case undefined:
+      window.location.replace(`${location.origin}/#?page=/${settingsState.defaultPage}`)
+      if (settingsState.defaultPage === "home") loadHomePage()
+      if (settingsState.defaultPage === "documents")
+        handleDocuments(document.querySelector(".documents")!)
+      if (settingsState.defaultPage === "reports")
+        handleReports(document.querySelector(".reports")!)
+      if (settingsState.defaultPage === "messages")
+        handleMessages(document.querySelector(".messages")!)
+
+      finishLoad()
+      break
+    case "home":
+      window.location.replace(`${location.origin}/#?page=/home`)
+      console.info("[BetterSEQTA+] Started Init")
+      if (settingsState.onoff) loadHomePage()
+      finishLoad()
+      break
+
+    default:
+      await handleDefault()
+      break
+  }
+}
+
+async function handleNewsPage(): Promise<void> {
+  console.info("[BetterSEQTA+] Started Init")
+  if (settingsState.onoff) {
+    SendNewsPage()
+    finishLoad()
+  }
+}
+
+async function handleDefault(): Promise<void> {
+  finishLoad()
+}
+
+async function handleMessages(node: Element): Promise<void> {
+  if (!(node instanceof HTMLElement)) return
+
+  const element = document.getElementById("title")!.firstChild as HTMLElement
+  element.innerText = "Direct Messages"
+  document.title = "Direct Messages ― SEQTA Learn"
+  SortMessagePageItems(node)
+
+  if (!settingsState.animations) return
+
+  // Hides messages on page load
+  const style = document.createElement("style")
+  style.classList.add("messageHider")
+  style.innerHTML = "[data-message]{opacity: 0 !important;}"
+  document.head.append(style)
+
+  await waitForElm("[data-message]", true, 10)
+  const messages = Array.from(
+    document.querySelectorAll("[data-message]"),
+  ).slice(0, 35)
+  animate(
+    messages,
+    { opacity: [0, 1], y: [10, 0] },
+    {
+      delay: stagger(0.03),
+      duration: 0.5,
+      ease: [0.22, 0.03, 0.26, 1],
+    },
+  )
+
+  document.head.querySelector("style.messageHider")?.remove()
+}
+
+async function handleDashboard(node: Element): Promise<void> {
+  if (!(node instanceof HTMLElement)) return
+  if (!settingsState.animations) return
+
+  const style = document.createElement("style")
+  style.classList.add("dashboardHider")
+  style.innerHTML = ".dashboard{opacity: 0 !important;}"
+  document.head.append(style)
+
+  await waitForElm(".dashlet", true, 10)
+  animate(
+    ".dashboard > *",
+    { opacity: [0, 1], y: [10, 0] },
+    {
+      delay: stagger(0.1),
+      duration: 0.5,
+      ease: [0.22, 0.03, 0.26, 1],
+    },
+  )
+
+  document.head.querySelector("style.dashboardHider")?.remove()
+}
+
+async function handleDocuments(node: Element): Promise<void> {
+  if (!(node instanceof HTMLElement)) return
+  if (!settingsState.animations) return
+
+  await waitForElm(".document", true, 10)
+  animate(
+    ".documents tbody tr.document",
+    { opacity: [0, 1], y: [10, 0] },
+    {
+      delay: stagger(0.05),
+      duration: 0.5,
+      ease: [0.22, 0.03, 0.26, 1],
+    },
+  )
+}
+
+async function handleReports(node: Element): Promise<void> {
+  if (!(node instanceof HTMLElement)) return
+  if (!settingsState.animations) return
+
+  await waitForElm(".report", true, 10)
+  animate(
+    ".reports .item",
+    { opacity: [0, 1], y: [10, 0] },
+    {
+      delay: stagger(0.05, { startDelay: 0.2 }),
+      duration: 0.5,
+      ease: [0.22, 0.03, 0.26, 1],
+    },
+  )
+}
+
+function CheckNoticeTextColour(notice: any) {
+  eventManager.register(
+    "noticeAdded",
+    {
+      elementType: "div",
+      className: "notice",
+      parentElement: notice,
+    },
+    (node) => {
+      var hex = (node as HTMLElement).style.cssText.split(" ")[1]
+      if (hex) {
+        const hex1 = hex.slice(0, -1)
+        var threshold = GetThresholdOfColor(hex1)
+        if (settingsState.DarkMode && threshold < 100) {
+          (node as HTMLElement).style.cssText = "--color: undefined;"
+        }
+      }
+    },
+  )
+}
+
+export function tryLoad() {
+  waitForElm(".login").then(() => {
+    finishLoad()
+  })
+
+  waitForElm(".day-container").then(() => {
+    finishLoad()
+  })
+
+  waitForElm("[data-key=welcome]").then((elm: any) => {
+    elm.classList.remove("active")
+  })
+
+  waitForElm(".code", true, 50).then((elm: any) => {
+    if (!elm.innerText.includes("BetterSEQTA")) LoadPageElements()
+  })
+
+  updateIframesWithDarkMode()
+  // Waits for page to call on load, run scripts
+  document.addEventListener(
+    "load",
+    function () {
+      removeThemeTagsFromNotices()
+    },
+    true,
+  )
+}
+
+
+
+function ReplaceMenuSVG(element: HTMLElement, svg: string) {
+  let item = element.firstChild as HTMLElement
+  item!.firstChild!.remove()
+
+  item.innerHTML = `<span>${item.innerHTML}</span>`
+
+  let newsvg = stringToHTML(svg).firstChild
+  item.insertBefore(newsvg as Node, item.firstChild)
+}
+
+export async function ObserveMenuItemPosition() {
+  await waitForElm("#menu > ul > li")
+  await delay(100)
+
+  eventManager.register(
+    "menuList",
+    {
+      parentElement: document.querySelector("#menu")!.firstChild as Element,
+    },
+    (element: Element) => {
+      const node = element as HTMLElement
+      if (!node?.dataset?.checked && !MenuOptionsOpen) {
+        const key =
+          MenuitemSVGKey[node?.dataset?.key! as keyof typeof MenuitemSVGKey]
+        if (key) {
+          ReplaceMenuSVG(
+            node,
+            MenuitemSVGKey[node.dataset.key as keyof typeof MenuitemSVGKey],
+          )
+        } else if (node?.firstChild?.nodeName === "LABEL") {
+          const label = node.firstChild as HTMLElement
+          let textNode = label.lastChild as HTMLElement
+
+          if (
+            textNode.nodeType === 3 &&
+            textNode.parentNode &&
+            textNode.parentNode.nodeName !== "SPAN"
+          ) {
+            const span = document.createElement("span")
+            span.textContent = textNode.nodeValue
+
+            label.replaceChild(span, textNode)
+          }
+        }
+        ChangeMenuItemPositions(settingsState.menuorder)
+      }
+    },
+  )
+}
+
+export function showConflictPopup() {
+  if (document.getElementById("conflict-popup")) return
+  document.body.classList.remove("hidden")
+
+  const background = document.createElement("div")
+  background.id = "conflict-popup"
+  background.classList.add("whatsnewBackground")
+  background.style.zIndex = "10000000"
+
+  const container = document.createElement("div")
+  container.classList.add("whatsnewContainer")
+  container.style.height = "auto"
+
+  const headerHTML = /* html */ `
+    <div class="whatsnewHeader">
+      <h1>Extension Conflict Detected</h1>
+      <p>Legacy BetterSEQTA Installed</p>
+    </div>
+  `
+  const header = stringToHTML(headerHTML).firstChild
+
+  const textHTML = /* html */ `
+    <div class="whatsnewTextContainer" style="overflow-y: auto; font-size: 1.3rem;">
+      <p>
+        It appears that you have the legacy BetterSEQTA extension installed alongside BetterSEQTA+.
+        This conflict may cause unexpected behavior. (and breaks the extension)
+      </p>
+      <p>
+        Please remove the older BetterSEQTA extension to ensure that BetterSEQTA+ works correctly.
+      </p>
+    </div>
+  `
+  const text = stringToHTML(textHTML).firstChild
+
+  const exitButton = document.createElement("div")
+  exitButton.id = "whatsnewclosebutton"
+
+  if (header) container.append(header)
+  if (text) container.append(text)
+  container.append(exitButton)
+
+  background.append(container)
+
+  document.getElementById("container")?.append(background)
+
+  if (settingsState.animations) {
+    animate([background as HTMLElement], { opacity: [0, 1] })
+  }
+
+  background.addEventListener("click", (event) => {
+    if (event.target === background) {
+      background.remove()
+    }
+  })
+
+  exitButton.addEventListener("click", () => {
+    background.remove()
+  })
+}
+
+export function init() {
+  const handleDisabled = () => {
+    waitForElm(".code", true, 50).then(AppendElementsToDisabledPage)
+  }
+
+  if (settingsState.onoff) {
+    console.info("[BetterSEQTA+] Enabled")
+    if (settingsState.DarkMode) document.documentElement.classList.add("dark")
+
+    document.querySelector(".legacy-root")?.classList.add("hidden")
+
+    new StorageChangeHandler()
+    new MessageHandler()
+
+    updateAllColors()
+    loading()
+    InjectCustomIcons()
+    HideMenuItems()
+    tryLoad()
+
+    setTimeout(() => {
+      const legacyElement = document.querySelector(
+        ".outside-container .bottom-container",
+      )
+      if (legacyElement) {
+        console.log("Legacy extension detected")
+        showConflictPopup()
+      }
+    }, 1000)
+  } else {
+    handleDisabled()
+    window.addEventListener("load", handleDisabled)
+  }
+}
+
+function InjectCustomIcons() {
+  console.info("[BetterSEQTA+] Injecting Icons")
+
+  const style = document.createElement("style")
+  style.setAttribute("type", "text/css")
+  style.innerHTML = `
+    @font-face {
+      font-family: 'IconFamily';
+      src: url('${browser.runtime.getURL(IconFamily)}') format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }`
+  document.head.appendChild(style)
+}
+
+export function AppendElementsToDisabledPage() {
+  console.info("[BetterSEQTA+] Appending elements to disabled page")
+  AddBetterSEQTAElements()
+
+  let settingsStyle = document.createElement("style")
+  settingsStyle.innerHTML = /* css */ `
+  .addedButton {
+    position: absolute !important;
+    right: 50px;
+    width: 35px;
+    height: 35px;
+    padding: 6px !important;
+    overflow: unset !important;
+    border-radius: 50%;
+    margin: 7px !important;
+    cursor: pointer;
+    color: white !important;
+  }
+  .addedButton svg {
+    margin: 6px;
+  }
+  .outside-container {
+    top: 48px !important;
+  }
+  #ExtensionPopup {
+    border-radius: 1rem;
+    box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
+    transform-origin: 70% 0;
+  }
+  `
+  document.head.append(settingsStyle)
+}

src/postcss.config.cjs

@@ -1,6 +1,7 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  },
+  }
 }
+  

src/seqta/main.ts

@@ -0,0 +1,45 @@
+// Third-party libraries
+import browser from "webextension-polyfill"
+
+// Internal utilities and functions
+import {
+  initializeSettingsState,
+  settingsState,
+} from "@/seqta/utils/listeners/SettingsState"
+
+// UI and theme management
+import pageState from "@/pageState.js?url"
+
+// Stylesheets
+import injectedCSS from "@/css/injected.scss?inline"
+
+export async function main() {
+  return new Promise(async (resolve, reject) => {
+    try {
+      await initializeSettingsState()
+
+      if (settingsState.onoff) {
+        injectPageState()
+
+        // TEMP FIX for bug! -> this is a hack to get the injected.css file to have HMR in development mode as this import system is currently broken with crxjs
+        if (import.meta.env.MODE === "development") {
+          import("../css/injected.scss")
+        } else {
+          const injectedStyle = document.createElement("style")
+          injectedStyle.textContent = injectedCSS
+          document.head.appendChild(injectedStyle)
+        }
+      }
+      resolve(true)
+    } catch (error: any) {
+      console.error(error)
+      reject(error)
+    }
+  })
+}
+
+function injectPageState() {
+  const mainScript = document.createElement("script")
+  mainScript.src = browser.runtime.getURL(pageState)
+  document.head.appendChild(mainScript)
+}

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -1,5 +1,10 @@
-import { addExtensionSettings, enableAnimatedBackground, GetThresholdOfColor, loadHomePage, SendNewsPage, setupSettingsButton } from "@/SEQTA";
+import { addExtensionSettings } from "@/seqta/utils/Adders/AddExtensionSettings";
-import { updateBgDurations } from "./Animation";
+import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
+import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
+import { setupSettingsButton } from "@/seqta/utils/setupSettingsButton";
+
+
+import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import { appendBackgroundToUI } from "./ImageBackgrounds";
 import stringToHTML from "@/seqta/utils/stringToHTML";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
@@ -35,7 +40,6 @@ async function getUserInfo() {
 
 export async function AddBetterSEQTAElements() {
   if (settingsState.onoff) {    
-    initializeSettings();
     if (settingsState.DarkMode) {
       document.documentElement.classList.add('dark');
     }
@@ -69,11 +73,6 @@ export async function AddBetterSEQTAElements() {
   setupSettingsButton();
 }
 
-function initializeSettings() {
-  enableAnimatedBackground();
-  updateBgDurations();
-}
-
 function createHomeButton(fragment: DocumentFragment, menuList: HTMLElement) {
   const container = document.getElementById('content')!;
   const div = document.createElement('div');

src/seqta/ui/Animation.ts

@@ -1,37 +0,0 @@
-import { settingsState } from "@/seqta/utils/listeners/SettingsState";
-
-/**
- * Update the background animation durations based on the slider input.
- * @param {Object} item - The object containing the bksliderinput property.
- * @param {number} [minDuration=1] - The minimum animation duration in seconds.
- * @param {number} [maxDuration=10] - The maximum animation duration in seconds.
- */
-export function updateBgDurations() {
-  // Class names to look for
-  const bgClasses = ['bg', 'bg2', 'bg3'];
-    
-  // Function to calculate animation duration
-  const calcDuration = (
-    baseValue: number, 
-    offset = 0, 
-    minBase = 50, 
-    maxBase = 150, 
-  ) => {
-    const scaledValue = 2 + ((maxBase - baseValue) / (maxBase - minBase)) ** 4;
-    return scaledValue + offset;
-  };
-    
-  // Iterate through each class name to update its animation duration
-  bgClasses.forEach((className, index) => {
-    const elements = document.getElementsByClassName(className);
-
-    if (elements.length === 0) {
-      return;
-    }
-    
-    const offset = index * 0.05;
-    const duration = calcDuration(parseInt(settingsState.bksliderinput), offset);
-    (elements[0] as HTMLElement).style.animationDuration = `${duration}s`;
-    (elements[0] as HTMLElement).style.animationDelay = `${offset * 5}s`;
-  });
-}

src/seqta/ui/colors/Manager.ts

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill'
-import { GetThresholdOfColor } from '@/SEQTA';
+import { GetThresholdOfColor } from '@/seqta/ui/colors/getThresholdColour';
 import { lightenAndPaleColor } from './lightenAndPaleColor';
 import ColorLuminance from './ColorLuminance';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';

src/seqta/ui/colors/getThresholdColour.ts

@@ -0,0 +1,38 @@
+import Color from "color"
+export function GetThresholdOfColor(color: any) {
+    if (!color) return 0
+    // Case-insensitive regular expression for matching RGBA colors
+    const rgbaRegex = /rgba?\(([^)]+)\)/gi
+  
+    // Check if the color string is a gradient (linear or radial)
+    if (color.includes("gradient")) {
+      let gradientThresholds = []
+  
+      // Find and replace all instances of RGBA in the gradient
+      let match
+      while ((match = rgbaRegex.exec(color)) !== null) {
+        // Extract the individual components (r, g, b, a)
+        const rgbaString = match[1]
+        const [r, g, b] = rgbaString.split(",").map((str) => str.trim())
+  
+        // Compute the threshold using your existing algorithm
+        const threshold = Math.sqrt(
+          parseInt(r) ** 2 + parseInt(g) ** 2 + parseInt(b) ** 2,
+        )
+  
+        // Store the computed threshold
+        gradientThresholds.push(threshold)
+      }
+  
+      // Calculate the average threshold
+      const averageThreshold =
+        gradientThresholds.reduce((acc, val) => acc + val, 0) /
+        gradientThresholds.length
+  
+      return averageThreshold
+    } else {
+      // Handle the color as a simple RGBA (or hex, or whatever the Color library supports)
+      const rgb = Color.rgb(color).object()
+      return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2)
+    }
+  }

src/seqta/ui/themes/Themes.ts

@@ -1,15 +0,0 @@
-export const imageData: Record<string, { url: string; variableName: string }> = {};
-
-export function applyCustomCSS(customCSS: string) {
-  let styleElement = document.getElementById('custom-theme');
-  if (!styleElement) {
-    styleElement = document.createElement('style');
-    styleElement.id = 'custom-theme';
-    document.head.appendChild(styleElement);
-  }
-  styleElement.textContent = customCSS;
-}
-
-export function removeImageFromDocument(variableName: string) {
-  document.documentElement.style.removeProperty('--' + variableName);
-}

src/seqta/ui/themes/UpdateThemePreview.ts

@@ -1,75 +0,0 @@
-import type { LoadedCustomTheme } from '@/types/CustomThemes';
-import { applyCustomCSS, removeImageFromDocument } from './Themes';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-
-let previousImageVariableNames: string[] = [];
-let originalColor: string | null = null;
-let originalTheme: boolean | null = null;
-
-export const UpdateThemePreview = async (updatedTheme: LoadedCustomTheme) => {
-  const { CustomCSS, CustomImages, defaultColour, forceDark } = updatedTheme;
-
-  // Update dark mode setting
-  if (forceDark !== undefined) {
-    // Store the original theme if it hasn't been stored yet
-    if (originalTheme === null) {
-      originalTheme = settingsState.DarkMode;
-    }
-    settingsState.DarkMode = forceDark;
-  }
-
-  // Get the new image variable names
-  const newImageVariableNames = CustomImages.map(image => image.variableName);
-
-  // Remove images that are no longer present
-  previousImageVariableNames.forEach(variableName => {
-    if (!newImageVariableNames.includes(variableName)) {
-      removeImageFromDocument(variableName);
-    }
-  });
-
-  // Update or add new images
-  CustomImages.forEach((image: any) => {
-    document.documentElement.style.setProperty(`--${image.variableName}`, `url(${image.url})`);
-  });
-
-  // Update the previousImageVariableNames for the next run
-  previousImageVariableNames = newImageVariableNames;
-
-  // Apply custom CSS
-  applyCustomCSS(CustomCSS);
-
-  // Apply default color
-  if (defaultColour) {
-    // Store the original color if it hasn't been stored yet
-    if (originalColor === null) {
-      originalColor = settingsState.selectedColor;
-    }
-    settingsState.selectedColor = defaultColour;
-  }
-};
-
-export const ClearThemePreview = () => {
-  previousImageVariableNames.forEach(variableName => {
-    removeImageFromDocument(variableName);
-  });
-
-  previousImageVariableNames = [];
-
-  let styleElement = document.getElementById('custom-theme');
-  if (styleElement) {
-    styleElement.remove();
-  }
-
-  // Reset the color to the original value
-  if (originalColor !== null) {
-    settingsState.selectedColor = originalColor;
-    originalColor = null;
-  }
-
-  // Reset the theme (dark/light mode) to the original value
-  if (originalTheme !== null) {
-    settingsState.DarkMode = originalTheme;
-    originalTheme = null;
-  }
-}

src/seqta/ui/themes/applyTheme.ts

@@ -1,26 +0,0 @@
-import type { CustomImage, CustomTheme } from '@/types/CustomThemes';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-import { applyCustomCSS } from './Themes';
-
-
-export const applyTheme = async (theme: CustomTheme, reEnable?: boolean) => {
-  let CustomCSS = '';
-  let CustomImages: CustomImage[] = [];
-
-  if (theme?.CustomCSS) CustomCSS = theme.CustomCSS;
-  if (theme?.CustomImages) CustomImages = theme.CustomImages;
-  if (theme?.forceDark != undefined) {
-    if (!reEnable) settingsState.originalDarkMode = settingsState.DarkMode
-
-    settingsState.DarkMode = theme.forceDark
-  }
-
-  // Apply custom CSS
-  applyCustomCSS(CustomCSS);
-
-  // Apply custom images
-  CustomImages.forEach((image) => {
-    const imageUrl = URL.createObjectURL(image.blob);
-    document.documentElement.style.setProperty('--' + image.variableName, `url(${imageUrl})`);
-  });
-};

src/seqta/ui/themes/deleteTheme.ts

@@ -1,23 +0,0 @@
-import localforage from 'localforage';
-import type { CustomTheme } from '@/types/CustomThemes';
-import { removeTheme } from './removeTheme';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-
-
-export const deleteTheme = async (themeId: string) => {
-  try {
-    const theme = await localforage.getItem(themeId) as CustomTheme;
-    removeTheme(theme);
-
-    await localforage.removeItem(themeId);
-    const themeIds = await localforage.getItem('customThemes') as string[] | null;
-    if (themeIds) {
-      const updatedThemeIds = themeIds.filter((id) => id !== themeId);
-      await localforage.setItem('customThemes', updatedThemeIds);
-    }
-
-    settingsState.selectedTheme = ''
-  } catch (error) {
-    console.error('Error deleting theme:', error);
-  }
-};

src/seqta/ui/themes/disableTheme.ts

@@ -1,36 +0,0 @@
-import localforage from 'localforage';
-import type { CustomTheme } from '@/types/CustomThemes';
-import { removeTheme } from './removeTheme';
-import { Mutex } from '@/seqta/utils/mutex';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-
-const mutex = new Mutex();
-let isDisabling = false;
-
-export const disableTheme = async () => {
-  if (isDisabling) return;
-
-  if (!settingsState.selectedTheme || settingsState.selectedTheme === '') {
-    console.debug('Theme is already disabled, exit early')
-    // Theme is already disabled, exit early
-    return;
-  }
-  isDisabling = true;
-  const unlock = await mutex.lock();
-  try {
-    if (settingsState.selectedTheme) {
-      console.debug('Disabling theme:', settingsState.selectedTheme);
-      const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
-      if (theme) {
-        await removeTheme(theme);
-      }
-    }
-
-    settingsState.selectedTheme = ''
-  } catch (error) {
-    console.error('Error disabling theme:', error);
-  } finally {
-    unlock();
-    isDisabling = false;
-  }
-};

src/seqta/ui/themes/downloadTheme.ts

@@ -1,79 +0,0 @@
-import localforage from 'localforage';
-import base64ToBlob from '@/seqta/utils/base64ToBlob';
-
-type Theme = {
-  name: string;
-  description: string;
-  coverImage: string;
-  marqueeImage: string;
-  id: string;
-}
-
-type ThemeContent = {
-  id: string;
-  name: string;
-  coverImage: string; // base64
-  description: string;
-  defaultColour: string;
-  CanChangeColour: boolean;
-  CustomCSS: string;
-  hideThemeName: boolean;
-  images: { id: string, variableName: string, data: string }[]; // data: base64
-};
-
-function stripBase64Prefix(base64String: string): string {
-  if (!base64String) return '';
-  
-  const prefixRegex = /^data:[^;]+;base64,/;
-  try {
-    // Check if the string actually has a base64 prefix
-    if (prefixRegex.test(base64String)) {
-      return base64String.replace(prefixRegex, '');
-    }
-    // If no prefix found, return the original string (assuming it's already base64)
-    return base64String;
-  } catch(err) {
-    console.error('Error stripping base64 prefix:', err);
-    return '';
-  }
-}
-
-export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
-  if (!theme.themeContent.id) return;
-
-  const themeContent = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${theme.themeContent.id}/theme.json`);
-  const themeData = await themeContent.json() as ThemeContent;
-
-  await InstallTheme(themeData);
-};
-
-export const InstallTheme = async (themeData: ThemeContent) => {
-  const strippedCoverImage = stripBase64Prefix(themeData.coverImage);
-
-  const coverImageBlob = base64ToBlob(strippedCoverImage);
-
-  const images = themeData.images.map((image) => ({
-    ...image,
-    blob: base64ToBlob(stripBase64Prefix(image.data))
-  }));
-
-  let availableThemes = await localforage.getItem('customThemes') as string[];
-  if (availableThemes && !availableThemes.includes(themeData.id)) {
-    availableThemes.push(themeData.id);
-  } else if (!availableThemes) {
-    availableThemes = [themeData.id];
-  }
-  await localforage.setItem('customThemes', availableThemes);
-
-  await localforage.setItem(themeData.id, {
-    ...themeData,
-    webURL: themeData.id,
-    coverImage: coverImageBlob,
-    CustomImages: themeData.images.map((image) => {
-      return {
-        ...image,
-        blob: images.find((img) => image.id === img.id)?.blob
-      };
-    })
-  });
-};

src/seqta/ui/themes/enableCurrent.ts

@@ -1,14 +0,0 @@
-import localforage from 'localforage';
-import type { CustomTheme } from '@/types/CustomThemes';
-import { applyTheme } from './applyTheme';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-
-
-export const enableCurrentTheme = async () => {
-  if (settingsState.selectedTheme) {
-    const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
-    if (theme) {
-      await applyTheme(theme, true);
-    }
-  }
-};

src/seqta/ui/themes/getAvailableThemes.ts

@@ -1,29 +0,0 @@
-import localforage from 'localforage';
-import type { CustomTheme, ThemeList } from '@/types/CustomThemes';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-
-export const getAvailableThemes = async (): Promise<ThemeList> => {
-  try {
-    const themeIds = await localforage.getItem('customThemes') as string[] | null;
-    if (themeIds) {
-      const themes = await Promise.all(
-        themeIds.map(async (id) => {
-          const theme = await localforage.getItem(id) as CustomTheme;
-          return theme;
-        })
-      );
-
-      return { themes, selectedTheme: settingsState.selectedTheme ? settingsState.selectedTheme : '' };
-    }
-    return {
-      themes: [],
-      selectedTheme: '',
-    };
-  } catch (error) {
-    console.error('Error getting available themes:', error);
-    return {
-      themes: [],
-      selectedTheme: ''
-    };
-  }
-};

src/seqta/ui/themes/getTheme.ts

@@ -1,14 +0,0 @@
-import localforage from 'localforage';
-import type { LoadedCustomTheme } from '@/types/CustomThemes';
-
-
-export const getTheme = async (themeId: string): Promise<LoadedCustomTheme | null> => {
-  try {
-    const theme = await localforage.getItem(themeId) as LoadedCustomTheme;
-
-    return theme;
-  } catch (error) {
-    console.error('Error getting theme:', error);
-    return null;
-  }
-};

src/seqta/ui/themes/removeTheme.ts

@@ -1,36 +0,0 @@
-import localforage from 'localforage';
-import type { CustomTheme } from '@/types/CustomThemes';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-
-export const removeTheme = async (theme: CustomTheme) => {
-  // Remove custom CSS
-  const styleElement = document.getElementById('custom-theme');
-  if (styleElement) {
-    styleElement.parentNode?.removeChild(styleElement);
-  }
-
-  const selectedTheme = await localforage.getItem(theme.id) as CustomTheme;
-  localforage.setItem(theme.id, {
-    ...selectedTheme,
-    selectedColor: settingsState.selectedColor
-  })
-  
-  // Reset default color
-  if (settingsState.originalSelectedColor !== '') {
-    settingsState.selectedColor = settingsState.originalSelectedColor
-  }
-
-  if (settingsState.originalDarkMode !== undefined) {
-    settingsState.DarkMode = settingsState.originalDarkMode
-    settingsState.originalDarkMode = undefined
-  }
-  
-  // Remove custom images
-  const customImageVariables = theme.CustomImages.map((image) => image.variableName);
-  customImageVariables.forEach((variableName) => {
-    const blobUrl = document.documentElement.style.getPropertyValue('--' + variableName);
-    URL.revokeObjectURL(blobUrl);
-
-    document.documentElement.style.removeProperty('--' + variableName);
-  });
-};

src/seqta/ui/themes/saveTheme.ts

@@ -1,30 +0,0 @@
-import localforage from 'localforage';
-import type { LoadedCustomTheme } from '@/types/CustomThemes';
-import { disableTheme } from './disableTheme';
-import { themeUpdates } from '@/interface/hooks/ThemeUpdates';
-
-
-export const saveTheme = async (theme: LoadedCustomTheme) => {
-  try {
-    disableTheme();
-
-    console.debug('Theme to save:', theme);
-   
-    await localforage.setItem(theme.id, theme);
-    await localforage.getItem('customThemes').then((themes: unknown) => {
-      const themeList = themes as string[] | null;
-      if (themeList) {
-        if (!themeList.includes(theme.id)) {
-          themeList.push(theme.id);
-          localforage.setItem('customThemes', themeList);
-        }
-      } else {
-        localforage.setItem('customThemes', [theme.id]);
-      }
-    });
-    console.debug('Theme saved successfully!');
-    themeUpdates.triggerUpdate();
-  } catch (error) {
-    console.error('Error saving theme:', error);
-  }
-};

src/seqta/ui/themes/setTheme.ts

@@ -1,37 +0,0 @@
-import localforage from 'localforage';
-import type { CustomTheme } from '@/types/CustomThemes';
-import { applyTheme } from './applyTheme';
-import { removeTheme } from './removeTheme';
-import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-
-
-export const setTheme = async (themeId: string) => {
-  try {
-    const theme = await localforage.getItem(themeId) as CustomTheme;
-
-    console.debug('Loading theme', theme);
-
-    let originalSelectedColor = { selectedColor: '' };
-
-    const styleElement = document.getElementById('custom-theme');
-
-    // Remove the currently enabled theme
-    if (settingsState.selectedTheme || styleElement) {
-      const currentTheme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
-      if (currentTheme) {
-        await removeTheme(currentTheme);
-      }
-      originalSelectedColor = { selectedColor: settingsState.originalSelectedColor };
-    } else {
-      originalSelectedColor = { selectedColor: settingsState.selectedColor };
-    }
-
-    await applyTheme(theme);
-
-    settingsState.selectedTheme = themeId
-    settingsState.selectedColor = theme.selectedColor ? theme.selectedColor : (theme.defaultColour !== '' ? theme.defaultColour : '#007bff')
-    settingsState.originalSelectedColor = originalSelectedColor.selectedColor
-  } catch (error) {
-    console.error('Error setting theme:', error);
-  }
-};

src/seqta/ui/themes/shareTheme.ts

@@ -1,74 +0,0 @@
-import { getTheme } from './getTheme';
-
-const saveThemeFile = (data: object, fileName: string) => {
-  const fileData = JSON.stringify(data, null, 2);
-  const blob = new Blob([fileData], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `${fileName}.json.theme`;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-};
-
-const shareTheme = async (themeID: string) => {
-  try {
-    // Use getTheme to retrieve the theme data
-    const themeData = await getTheme(themeID);
-    if (!themeData) {
-      console.error('Failed to retrieve theme data');
-      return;
-    }
-
-    // Extract images and coverImage from themeData, if they exist
-    const { CustomImages = [], coverImage, ...themeWithoutImages } = themeData;
-
-    // Helper function to convert Blob to Base64
-    const blobToBase64 = (blob: Blob) => new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        const base64String = reader.result as string;
-        // Extract just the base64 data without the data URL prefix
-        const base64Data = base64String.split(',')[1];
-        resolve(base64Data);
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-
-    // Convert cover image to Base64
-    let coverImageBase64 = null;
-    if (coverImage) {
-      coverImageBase64 = await blobToBase64(coverImage);
-    }
-
-    // Convert custom images to Base64
-    const finalImages = await Promise.all(CustomImages.map(async (image) => {
-      const imageBase64 = await blobToBase64(image.blob);
-      return {
-        id: image.id,
-        variableName: image.variableName,
-        data: imageBase64,
-      };
-    }));
-
-    // Prepare the non-file data for uploading
-    const data = {
-      ...themeWithoutImages,
-      images: finalImages.map((image) => ({
-        id: image.id,
-        variableName: image.variableName,
-        data: image.data,
-      })),
-      coverImage: coverImageBase64,
-    };
-
-    saveThemeFile(data, themeData.name || 'Unnamed_Theme');
-  } catch (error) {
-    console.error('Error sharing theme:', error);
-  }
-};
-
-export default shareTheme;

src/seqta/utils/Adders/AddExtensionSettings.ts

@@ -0,0 +1,36 @@
+import { changeSettingsClicked, closeExtensionPopup, SettingsClicked } from "../Closers/closeExtensionPopup"
+import renderSvelte from "@/interface/main"
+import { SettingsResizer } from "@/seqta/ui/SettingsResizer"
+import Settings from "@/interface/pages/settings.svelte"
+
+export function addExtensionSettings() {
+    const extensionPopup = document.createElement("div")
+    extensionPopup.classList.add("outside-container", "hide")
+    extensionPopup.id = "ExtensionPopup"
+  
+    const extensionContainer = document.querySelector(
+      "#container",
+    ) as HTMLDivElement
+    if (extensionContainer) extensionContainer.appendChild(extensionPopup)
+  
+    // create shadow dom and render svelte app
+    try {
+      const shadow = extensionPopup.attachShadow({ mode: "open" })
+      requestIdleCallback(() => renderSvelte(Settings, shadow))
+    } catch (err) {
+      console.error(err)
+    }
+  
+    const container = document.getElementById("container")
+  
+    new SettingsResizer()
+  
+    container!.onclick = (event) => {
+      if (!SettingsClicked) return
+  
+      if (!(event.target as HTMLElement).closest("#AddedSettings")) {
+        if (event.target == extensionPopup) return
+        changeSettingsClicked(closeExtensionPopup())
+      }
+    }
+  }

src/seqta/utils/Adders/AddShortcuts.ts

@@ -0,0 +1,46 @@
+import ShortcutLinks from "@/seqta/content/links.json"
+import stringToHTML from "../stringToHTML"
+
+export function addShortcuts(shortcuts: any) {
+  for (let i = 0; i < shortcuts.length; i++) {
+    const currentShortcut = shortcuts[i]
+
+    if (currentShortcut?.enabled) {
+      const Itemname = (currentShortcut?.name ?? "").replace(/\s/g, "")
+
+      const linkDetails =
+        ShortcutLinks?.[Itemname as keyof typeof ShortcutLinks]
+      if (linkDetails) {
+        createNewShortcut(
+          linkDetails.link,
+          linkDetails.icon,
+          linkDetails.viewBox,
+          currentShortcut?.name,
+        )
+      } else {
+        console.warn(`No link details found for '${Itemname}'`)
+      }
+    }
+  }
+}
+
+function createNewShortcut(link: any, icon: any, viewBox: any, title: any) {
+  // Creates the stucture and element information for each seperate shortcut
+  let shortcut = document.createElement("a")
+  shortcut.setAttribute("href", link)
+  shortcut.setAttribute("target", "_blank")
+  let shortcutdiv = document.createElement("div")
+  shortcutdiv.classList.add("shortcut")
+
+  let image = stringToHTML(
+    `<svg style="width:39px;height:39px" viewBox="${viewBox}"><path fill="currentColor" d="${icon}" /></svg>`,
+  ).firstChild
+  ;(image! as HTMLElement).classList.add("shortcuticondiv")
+  let text = document.createElement("p")
+  text.textContent = title
+  shortcutdiv.append(image as HTMLElement)
+  shortcutdiv.append(text)
+  shortcut.append(shortcutdiv)
+
+  document.getElementById("shortcuts")!.appendChild(shortcut)
+}

src/seqta/utils/Closers/closeExtensionPopup.ts

@@ -0,0 +1,34 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { animate } from "motion"
+
+import { settingsPopup } from "@/interface/hooks/SettingsPopup"
+
+export let SettingsClicked = false
+
+export const closeExtensionPopup = (extensionPopup?: HTMLElement) => {
+    if (!extensionPopup)
+      extensionPopup = document.getElementById("ExtensionPopup")!
+  
+    extensionPopup.classList.add("hide")
+    if (settingsState.animations) {
+      animate(1, 0, {
+        onUpdate: (progress) => {
+          extensionPopup.style.opacity = Math.max(0, progress).toString()
+          extensionPopup.style.transform = `scale(${Math.max(0, progress)})`
+        },
+        type: "spring",
+        stiffness: 520,
+        damping: 20,
+      })
+    } else {
+      extensionPopup.style.opacity = "0"
+      extensionPopup.style.transform = "scale(0)"
+    }
+  
+    settingsPopup.triggerClose()
+    return SettingsClicked = false
+  }
+
+  export function changeSettingsClicked(newVal: boolean) {
+    SettingsClicked = newVal
+  }

src/seqta/utils/CreateEnable/CreateCustomShortcutDiv.ts

@@ -0,0 +1,37 @@
+import stringToHTML from "../stringToHTML"
+
+export function CreateCustomShortcutDiv(element: any) {
+  // Creates the stucture and element information for each seperate shortcut
+  var shortcut = document.createElement("a")
+  shortcut.setAttribute("href", element.url)
+  shortcut.setAttribute("target", "_blank")
+  var shortcutdiv = document.createElement("div")
+  shortcutdiv.classList.add("shortcut")
+  shortcutdiv.classList.add("customshortcut")
+
+  let image = stringToHTML(
+    `
+    <svg style="width:39px;height:39px" viewBox="0 0 40 40" class="shortcuticondiv">
+      <text
+        text-anchor="middle"
+        x="50%"
+        y="50%"
+        dy=".35em"
+        fill="var(--text-primary)"
+        font-weight="bold"
+        font-size="32"
+        dominant-baseline="middle">
+        ${element.icon}
+      </text>
+    </svg>
+    `,
+  ).firstChild
+  ;(image as HTMLElement).classList.add("shortcuticondiv")
+  var text = document.createElement("p")
+  text.textContent = element.name
+  shortcutdiv.append(image!)
+  shortcutdiv.append(text)
+  shortcut.append(shortcutdiv)
+
+  document.getElementById("shortcuts")!.append(shortcut)
+}

src/seqta/utils/CreateEnable/CreateElement.ts

@@ -0,0 +1,26 @@
+export function CreateElement(
+    type: string,
+    class_?: any,
+    id?: any,
+    innerText?: string,
+    innerHTML?: string,
+    style?: string,
+  ) {
+    let element = document.createElement(type)
+    if (class_ !== undefined) {
+      element.classList.add(class_)
+    }
+    if (id !== undefined) {
+      element.id = id
+    }
+    if (innerText !== undefined) {
+      element.innerText = innerText
+    }
+    if (innerHTML !== undefined) {
+      element.innerHTML = innerHTML
+    }
+    if (style !== undefined) {
+      element.style.cssText = style
+    }
+    return element
+  }

src/seqta/utils/DisableRemove/RemoveShortcutDiv.ts

@@ -0,0 +1,24 @@
+export function RemoveShortcutDiv(elements: any) {
+  if (elements.length === 0) return
+
+  elements.forEach((element: any) => {
+    const shortcuts = document.querySelectorAll(".shortcut")
+    shortcuts.forEach((shortcut) => {
+      const anchorElement = shortcut.parentElement // the <a> element is the parent
+      const textElement = shortcut.querySelector("p") // <p> is a direct child of .shortcut
+      const title = textElement ? textElement.textContent : ""
+
+      let shouldRemove = title === element.name
+
+      // Check href only if element.url exists
+      if (element.url) {
+        shouldRemove =
+          shouldRemove && anchorElement!.getAttribute("href") === element.url
+      }
+
+      if (shouldRemove) {
+        anchorElement!.remove()
+      }
+    })
+  })
+}

src/seqta/utils/FilterUpcomingAssessments.ts

@@ -0,0 +1,67 @@
+import { CreateElement } from "@/seqta/utils/CreateEnable/CreateElement"
+
+export function FilterUpcomingAssessments(subjectoptions: any) {
+  for (var item in subjectoptions) {
+    let subjectdivs = document.querySelectorAll(`[data-subject="${item}"]`)
+
+    for (let i = 0; i < subjectdivs.length; i++) {
+      const element = subjectdivs[i]
+
+      if (!subjectoptions[item]) {
+        element.classList.add("hidden")
+      }
+      if (subjectoptions[item]) {
+        element.classList.remove("hidden")
+      }
+      (element.parentNode! as HTMLElement).classList.remove("hidden")
+
+      let children = element.parentNode!.parentNode!.children
+      for (let i = 0; i < children.length; i++) {
+        const element = children[i]
+        if (element.hasAttribute("data-hidden")) {
+          element.remove()
+        }
+      }
+
+      if (
+        element.parentNode!.children.length ==
+        element.parentNode!.querySelectorAll(".hidden").length
+      ) {
+        if (element.parentNode!.querySelectorAll(".hidden").length > 0) {
+          if (
+            !(element.parentNode!.parentNode! as HTMLElement).hasAttribute(
+              "data-day",
+            )
+          ) {
+            (element.parentNode!.parentNode! as HTMLElement).classList.add(
+              "hidden",
+            )
+          } else {
+            AddPlaceHolderToParent(
+              element.parentNode!.parentNode,
+              element.parentNode!.querySelectorAll(".hidden").length,
+            )
+          }
+        }
+      } else {
+        (element.parentNode!.parentNode! as HTMLElement).classList.remove(
+          "hidden",
+        )
+      }
+    }
+  }
+}
+
+function AddPlaceHolderToParent(parent: any, numberofassessments: any) {
+  let textcontainer = CreateElement("div", "upcoming-blank")
+  let textblank = CreateElement("p", "upcoming-hiddenassessment")
+  let s = ""
+  if (numberofassessments > 1) {
+    s = "s"
+  }
+  textblank.innerText = `${numberofassessments} hidden assessment${s} due`
+  textcontainer.append(textblank)
+  textcontainer.setAttribute("data-hidden", "true")
+
+  parent.append(textcontainer)
+}

src/seqta/utils/Openers/OpenAboutPage.ts

@@ -0,0 +1,107 @@
+import stringToHTML from "../stringToHTML"
+import browser from "webextension-polyfill"
+import { settingsState } from "../listeners/SettingsState"
+import { animate, stagger } from "motion"
+import { DeleteWhatsNew } from "../Whatsnew"
+
+export function OpenAboutPage() {
+    const background = document.createElement("div")
+    background.id = "whatsnewbk"
+    background.classList.add("whatsnewBackground")
+  
+    const container = document.createElement("div")
+    container.classList.add("whatsnewContainer")
+  
+    var header: any = stringToHTML(
+      /* html */
+      `<div class="whatsnewHeader">
+        <h1>About</h1>
+        <p>BetterSEQTA+ V${browser.runtime.getManifest().version}</p>
+      </div>`,
+    ).firstChild
+  
+    let text = stringToHTML(/* html */ `
+      <div class="whatsnewTextContainer" style="overflow-y: scroll;">
+        <img src="${settingsState.DarkMode ? "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/branding/dark.jpg" : "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/branding/light.jpg"}" class="aboutImg" />
+  
+        <p>BetterSEQTA+ is a fork of BetterSEQTA which was originally developed by Nulkem, which was discontinued. BetterSEQTA+ continued development of BetterSEQTA, while incorporating a plethora of features. </p>
+        <p>We are currently working on fixing bugs and adding good features. If you want to make a feature request or report a bug, you can do so on GitHub (find icon below).</p>
+        <h1>Credits</h1>
+        <p>Nulkem created the original extension, was ported to Manifest V3 by MEGA-Dawg68, and is under active development by Crazypersonalph and SethBurkart123.</p>
+      </div>
+    `).firstChild
+  
+    let footer = stringToHTML(/* html */ `
+      <div class="whatsnewFooter">
+        <div>
+        Report bugs and feedback:
+          <a class="socials" href="https://github.com/BetterSEQTA/BetterSEQTA-Plus" style="background: none !important; margin: 0 5px; padding:0;">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25px" height="25px" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
+              <g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="currentColor" /></g>
+            </svg>
+          </a>
+          <a class="socials" href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel" style="background: none !important; margin: 0 5px; padding:0;">
+            <svg style="width:25px;height:25px" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+            </svg>
+          </a>
+          <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0;">
+            <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
+              <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="currentColor"/>
+            </svg>
+          </a>
+        </div>
+      </div>
+    `).firstChild
+  
+    let exitbutton = document.createElement("div")
+    exitbutton.id = "whatsnewclosebutton"
+  
+    container.append(header)
+    container.append(text as ChildNode)
+    container.append(footer as ChildNode)
+    container.append(exitbutton)
+  
+    background.append(container)
+  
+    document.getElementById("container")!.append(background)
+  
+    let bkelement = document.getElementById("whatsnewbk")
+    let popup = document.getElementsByClassName("whatsnewContainer")[0]
+  
+    if (settingsState.animations) {
+      animate(
+        [popup, bkelement as HTMLElement],
+        { scale: [0, 1] },
+        {
+          type: "spring",
+          stiffness: 220,
+          damping: 18,
+        },
+      )
+  
+      animate(
+        ".whatsnewTextContainer *",
+        { opacity: [0, 1], y: [10, 0] },
+        {
+          delay: stagger(0.05, { startDelay: 0.1 }),
+          duration: 0.5,
+          ease: [0.22, 0.03, 0.26, 1],
+        },
+      )
+    }
+  
+    delete settingsState.justupdated
+  
+    bkelement!.addEventListener("click", function (event) {
+      // Check if the click event originated from the element itself and not any of its children
+      if (event.target === bkelement) {
+        DeleteWhatsNew()
+      }
+    })
+  
+    var closeelement = document.getElementById("whatsnewclosebutton")
+    closeelement!.addEventListener("click", function () {
+      DeleteWhatsNew()
+    })
+  }

src/seqta/utils/Openers/OpenMenuOptions.ts

@@ -0,0 +1,256 @@
+
+import { settingsState } from "../listeners/SettingsState"
+import stringToHTML from "../stringToHTML"
+import Sortable from "sortablejs"
+
+export let MenuOptionsOpen = false
+
+
+export function OpenMenuOptions() {
+    var container = document.getElementById("container")
+    var menu = document.getElementById("menu")
+  
+    if (settingsState.defaultmenuorder.length == 0) {
+      let childnodes = menu!.firstChild!.childNodes
+      let newdefaultmenuorder = []
+      for (let i = 0; i < childnodes.length; i++) {
+        const element = childnodes[i]
+        newdefaultmenuorder.push((element as HTMLElement).dataset.key)
+        settingsState.defaultmenuorder = newdefaultmenuorder
+      }
+    }
+    let childnodes = menu!.firstChild!.childNodes
+    if (settingsState.defaultmenuorder.length != childnodes.length) {
+      for (let i = 0; i < childnodes.length; i++) {
+        const element = childnodes[i]
+        if (
+          !settingsState.defaultmenuorder.indexOf(
+            (element as HTMLElement).dataset.key,
+          )
+        ) {
+          let newdefaultmenuorder = settingsState.defaultmenuorder
+          newdefaultmenuorder.push((element as HTMLElement).dataset.key)
+          settingsState.defaultmenuorder = newdefaultmenuorder
+        }
+      }
+    }
+  
+    MenuOptionsOpen = true
+  
+    var cover = document.createElement("div")
+    cover.classList.add("notMenuCover")
+    menu!.style.zIndex = "20"
+    menu!.style.setProperty("--menuHidden", "flex")
+    container!.append(cover)
+  
+    var menusettings = document.createElement("div")
+    menusettings.classList.add("editmenuoption-container")
+  
+    var defaultbutton = document.createElement("div")
+    defaultbutton.classList.add("editmenuoption")
+    defaultbutton.innerText = "Restore Default"
+    defaultbutton.id = "restoredefaultoption"
+  
+    var savebutton = document.createElement("div")
+    savebutton.classList.add("editmenuoption")
+    savebutton.innerText = "Save"
+    savebutton.id = "restoredefaultoption"
+  
+    menusettings.appendChild(defaultbutton)
+    menusettings.appendChild(savebutton)
+  
+    menu!.appendChild(menusettings)
+  
+    var ListItems = menu!.firstChild!.childNodes
+    for (let i = 0; i < ListItems.length; i++) {
+      const element1 = ListItems[i]
+      const element = element1 as HTMLElement
+  
+      ;(element as HTMLElement).classList.add("draggable")
+      if ((element as HTMLElement).classList.contains("hasChildren")) {
+        (element as HTMLElement).classList.remove("active")
+        ;(element.firstChild as HTMLElement).classList.remove("noscroll")
+      }
+  
+      let MenuItemToggle = stringToHTML(
+        `<div class="onoffswitch" style="margin: auto 0;"><input class="onoffswitch-checkbox notification menuitem" type="checkbox" id="${(element as HTMLElement).dataset.key}"><label for="${(element as HTMLElement).dataset.key}" class="onoffswitch-label"></label>`,
+      ).firstChild
+      ;(element as HTMLElement).append(MenuItemToggle!)
+  
+      if (!element.dataset.betterseqta) {
+        const a = document.createElement("section")
+        a.innerHTML = element.innerHTML
+        cloneAttributes(a, element)
+        menu!.firstChild!.insertBefore(a, element)
+        element.remove()
+      }
+    }
+  
+    if (Object.keys(settingsState.menuitems).length == 0) {
+      menubuttons = menu!.firstChild!.childNodes
+      let menuItems = {} as any
+      for (var i = 0; i < menubuttons.length; i++) {
+        var id = (menubuttons[i] as HTMLElement).dataset.key
+        const element: any = {}
+        element.toggle = true
+        ;(menuItems[id as keyof typeof menuItems] as any) = element
+      }
+      settingsState.menuitems = menuItems
+    }
+  
+    var menubuttons: any = document.getElementsByClassName("menuitem")
+  
+    let menuItems = settingsState.menuitems as any
+    let buttons = document.getElementsByClassName("menuitem")
+    for (let i = 0; i < buttons.length; i++) {
+      let id = buttons[i].id as string | undefined
+      if (menuItems[id as keyof typeof menuItems]) {
+        (buttons[i] as HTMLInputElement).checked =
+          menuItems[id as keyof typeof menuItems].toggle
+      } else {
+        (buttons[i] as HTMLInputElement).checked = true
+      }
+      (buttons[i] as HTMLInputElement).checked = true
+    }
+  
+    try {
+      var el = document.querySelector("#menu > ul")
+      var sortable = Sortable.create(el as HTMLElement, {
+        draggable: ".draggable",
+        dataIdAttr: "data-key",
+        animation: 150,
+        easing: "cubic-bezier(.5,0,.5,1)",
+        onEnd: function () {
+          saveNewOrder(sortable)
+        },
+      })
+    } catch (err) {
+      console.error(err)
+    }
+  
+    function changeDisplayProperty(element: any) {
+      if (!element.checked) {
+        element.parentNode.parentNode.style.display = "var(--menuHidden)"
+      }
+      if (element.checked) {
+        element.parentNode.parentNode.style.setProperty(
+          "display",
+          "flex",
+          "important",
+        )
+      }
+    }
+  
+    function StoreMenuSettings() {
+      let menu = document.getElementById("menu")
+      const menuItems: any = {}
+      let menubuttons = menu!.firstChild!.childNodes
+      const button = document.getElementsByClassName("menuitem")
+      for (let i = 0; i < menubuttons.length; i++) {
+        const id = (menubuttons[i] as HTMLElement).dataset.key
+        const element: any = {}
+        element.toggle = (button[i] as HTMLInputElement).checked
+  
+        menuItems[id as keyof typeof menuItems] = element
+      }
+      settingsState.menuitems = menuItems
+    }
+  
+    for (let i = 0; i < menubuttons.length; i++) {
+      const element = menubuttons[i]
+      element.addEventListener("change", () => {
+        element.parentElement.parentElement.getAttribute("data-key")
+        StoreMenuSettings()
+        changeDisplayProperty(element)
+      })
+    }
+  
+    function closeAll() {
+      menusettings?.remove()
+      cover?.remove()
+      MenuOptionsOpen = false
+      menu!.style.setProperty("--menuHidden", "none")
+  
+      for (let i = 0; i < ListItems.length; i++) {
+        const element1 = ListItems[i]
+        const element = element1 as HTMLElement
+        element.classList.remove("draggable")
+        element.setAttribute("draggable", "false")
+  
+        if (!element.dataset.betterseqta) {
+          const a = document.createElement("li")
+          a.innerHTML = element.innerHTML
+          cloneAttributes(a, element)
+          menu!.firstChild!.insertBefore(a, element)
+          element.remove()
+        }
+      }
+  
+      let switches = menu!.querySelectorAll(".onoffswitch")
+      for (let i = 0; i < switches.length; i++) {
+        switches[i].remove()
+      }
+    }
+  
+    cover?.addEventListener("click", closeAll)
+    savebutton?.addEventListener("click", closeAll)
+  
+    defaultbutton?.addEventListener("click", function () {
+      const options = settingsState.defaultmenuorder
+      settingsState.menuorder = options
+  
+      ChangeMenuItemPositions(options)
+  
+      for (let i = 0; i < menubuttons.length; i++) {
+        const element = menubuttons[i]
+        element.checked = true
+        element.parentNode.parentNode.style.setProperty(
+          "display",
+          "flex",
+          "important",
+        )
+      }
+      saveNewOrder(sortable)
+    })
+  }
+  
+  function saveNewOrder(sortable: any) {
+    var order = sortable.toArray()
+    settingsState.menuorder = order
+  }
+  
+  function cloneAttributes(target: any, source: any) {
+    [...source.attributes].forEach((attr) => {
+      target.setAttribute(attr.nodeName, attr.nodeValue)
+    })
+  }
+
+  export function ChangeMenuItemPositions(storage: any) {
+    let menuorder = storage
+  
+    var menuList = document.querySelector("#menu")!.firstChild!.childNodes
+  
+    let listorder = []
+    for (let i = 0; i < menuList.length; i++) {
+      const menu = menuList[i] as HTMLElement
+  
+      let a = menuorder.indexOf(menu.dataset.key)
+  
+      listorder.push(a)
+    }
+  
+    var newArr = []
+    for (var i = 0; i < listorder.length; i++) {
+      newArr[listorder[i]] = menuList[i]
+    }
+  
+    let listItemsDOM = document.getElementById("menu")!.firstChild
+    for (let i = 0; i < newArr.length; i++) {
+      const element = newArr[i]
+      if (element) {
+        const elem = element as HTMLElement
+        elem.setAttribute("data-checked", "true")
+        listItemsDOM!.appendChild(element)
+      }
+    }
+  }

src/seqta/utils/SendNewsPage.ts

@@ -0,0 +1,103 @@
+import { AppendLoadingSymbol } from "@/seqta/ui/Loading"
+import stringToHTML from "./stringToHTML"
+import { delay } from "./delay"
+import { settingsState } from "./listeners/SettingsState"
+import browser from "webextension-polyfill"
+import LogoLightOutline from "@/resources/icons/betterseqta-light-outline.png"
+import { animate, stagger } from "motion"
+
+export async function SendNewsPage() {
+  console.info("[BetterSEQTA+] Started Loading News Page")
+  document.title = "News ― SEQTA Learn"
+  await delay(100)
+
+  const element = document.querySelector("[data-key=news]")
+  element!.classList.add("active")
+
+  // Remove all current elements in the main div to add new elements
+  const main = document.getElementById("main")
+  main!.innerHTML = ""
+
+  const html = stringToHTML(/* html */ `
+    <div class="home-root">
+      <div class="home-container" id="news-container">
+      <h1 class="border">Latest Headlines in ${settingsState.newsSource ? settingsState.newsSource.charAt(0).toUpperCase() + settingsState.newsSource.slice(1) : "Australia"}</h1>
+      </div>
+    </div>`)
+
+  main!.append(html.firstChild!)
+
+  const titlediv = document.getElementById("title")!.firstChild
+  ;(titlediv! as HTMLElement).innerText = "News"
+  AppendLoadingSymbol("newsloading", "#news-container")
+
+  const response = (await browser.runtime.sendMessage({
+    type: "sendNews",
+    source: settingsState.newsSource,
+  })) as any
+  const newscontainer = document.querySelector("#news-container")
+  document.getElementById("newsloading")?.remove()
+
+  // Create a document fragment to batch DOM operations
+  const fragment = document.createDocumentFragment()
+
+  // Map over articles to create elements
+  response.news.articles.forEach((article: any) => {
+    const newsarticle = document.createElement("a")
+    newsarticle.classList.add("NewsArticle")
+    newsarticle.href = article.url
+    newsarticle.target = "_blank"
+
+    const articleimage = document.createElement("div")
+    articleimage.classList.add("articleimage")
+
+    if (article.urlToImage == "null" || article.urlToImage == null) {
+      articleimage.style.cssText = `
+        background-image: url(${browser.runtime.getURL(LogoLightOutline)});
+        width: 20%;
+        margin: 0 7.5%;
+      `
+    } else {
+      articleimage.style.backgroundImage = `url(${article.urlToImage})`
+    }
+
+    const articletext = document.createElement("div")
+    articletext.classList.add("ArticleText")
+
+    const title = document.createElement("a")
+    title.innerText = article.title
+    title.href = article.url
+    title.target = "_blank"
+
+    const description = document.createElement("p")
+
+    article.description =
+      article.description.length > 400
+        ? article.description.substring(0, 400) + "..."
+        : article.description
+    description.innerHTML = article.description
+
+    articletext.append(title, description)
+    newsarticle.append(articleimage, articletext)
+    fragment.append(newsarticle)
+  })
+
+  // Single DOM update to append all articles
+  newscontainer?.append(fragment)
+
+  if (!settingsState.animations) return
+
+  const articles = Array.from(document.querySelectorAll(".NewsArticle"))
+
+  animate(
+    articles.slice(0, 20),
+    { opacity: [0, 1], y: [10, 0], scale: [0.99, 1] },
+    {
+      delay: stagger(0.1),
+      type: "spring",
+      stiffness: 341,
+      damping: 20,
+      mass: 1,
+    },
+  )
+}

src/seqta/utils/Whatsnew.ts

@@ -0,0 +1,320 @@
+import { settingsState } from "./listeners/SettingsState"
+import { animate, stagger } from "motion"
+import stringToHTML from "./stringToHTML"
+import browser from "webextension-polyfill"
+import kofi from "@/resources/kofi.png"
+
+export async function DeleteWhatsNew() {
+  const bkelement = document.getElementById("whatsnewbk")
+  const popup = document.getElementsByClassName("whatsnewContainer")[0]
+
+  if (!settingsState.animations) {
+    bkelement?.remove()
+    return
+  }
+
+  animate(
+    [popup, bkelement!],
+    { opacity: [1, 0], scale: [1, 0] },
+    { ease: [0.22, 0.03, 0.26, 1] },
+  ).then(() => {
+    bkelement?.remove()
+  })
+}
+
+export function OpenWhatsNewPopup() {
+    const background = document.createElement("div")
+    background.id = "whatsnewbk"
+    background.classList.add("whatsnewBackground")
+  
+    const container = document.createElement("div")
+    container.classList.add("whatsnewContainer")
+  
+    var header: any = stringToHTML(
+      /* html */
+      `<div class="whatsnewHeader">
+        <h1>What's New</h1>
+        <p>BetterSEQTA+ V${browser.runtime.getManifest().version}</p>
+      </div>`,
+    ).firstChild
+  
+    let imagecont = document.createElement("div")
+    imagecont.classList.add("whatsnewImgContainer")
+  
+    let video = document.createElement("video")
+    let source = document.createElement("source")
+  
+    source.setAttribute(
+      "src",
+      "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/update-video.mp4",
+    )
+    video.autoplay = true
+    video.muted = true
+    video.loop = true
+    video.appendChild(source)
+    video.classList.add("whatsnewImg")
+    imagecont.appendChild(video)
+  
+    let textcontainer = document.createElement("div")
+    textcontainer.classList.add("whatsnewTextContainer")
+  
+    let text = stringToHTML(/* html */ `
+    <div class="whatsnewTextContainer" style="height: 50%;overflow-y: scroll;">
+      <h1>3.4.6 - Massive internal reworks!</h1>
+      <li>Reworked internals to function as a plugin system (more on this soon)</li>
+      <li>Rebuilt theme system that is significantly less buggy</li>
+      <li>Performance improvements</li>
+      <li>Other minor bug fixes</li>
+
+      <h1>3.4.5 - News, Bug Fixes, and improvements!</h1>
+      <li>Added alternative news sources</li>
+      <li>Notifications now open direct messages</li>
+      <li>Added Toggle for Letter/Percent Grades</li>
+      <li>Added fullscreen to the theme creator CSS editor</li>
+      <li>Added warning if BetterSEQTA is installed</li>
+      <li>Removed max width from theme creator</li>
+      <li>Fixed discord icon colour in light mode</li>
+      <li>Fixed subject averages not showing up with letter grades</li>
+      <li>Tweaked compose UI</li>
+  
+      <h1>3.4.4 - Bug Fixes and Improvements</h1>
+      <li>Added vertical zoom to the timetable</li>
+      <li>Fixed theme importing failing when images were included</li>
+      <li>Removed broken gradients on the backgrounds of certain buttons</li>
+      <li>Fixed timetable quickbar arrow receiving the wrong colour</li>
+      <li>Auto-applied selected theme after saving in theme creator</li>
+      <li>Fixed a bug where timetable was clipped at certain times</li>
+      <li>Fixed custom sidebar layouts not applying on page load</li>
+      <li>Improved spacing of the message editor buttons</li>
+      <li>Added HEX colour input to the theme creator</li>
+      <li>Fixed theme application in the creator</li>
+      <li>Performance improvements</li>
+      <li>Other minor bug fixes</li>
+  
+      <h1>3.4.3 - Minor Bug Fixes</h1>
+      <li>Fixed a bug where timetable colours couldn't be changed</li>
+      <li>Other minor bug fixes</li>
+  
+      <h1>3.4.2 - Minor Bug Fixes</h1>
+      <li>Fixed a bug where Assessment Average wasn't enabled by default</li>
+      <li>Fixed floating menus would sometimes be placed behind other elements</li>
+  
+      <h1>3.4.1 - Bug Fixes and Performance Improvements</h1>
+      <li>Added a new "Subject Average" section to the assessments page</li>
+      <li>Fixed a bug where animations wouldn't play correctly</li>
+      <li>Added loading animations to the home page</li>
+      <li>Under the hood performance improvements</li>
+      <li>Improved animation performance</li>
+      <li>Better Animations!</li>
+      <li>Minor style tweaks</li>
+  
+      <h1>3.4.0 - Major Performance Update</h1>
+      <li>Completely rebuilt the extension popup using Svelte for dramatically improved performance</li>
+      <li>Added a brand new background store with search functionality and downloadable backgrounds</li>
+      <li>Significant code cleanup and optimization across the extension</li>
+      <li>Improved overall responsiveness and load times</li>
+      <li>Smoother animations and improved scrolling</li>
+      <li>Fixed Firefox compatibility issues</li>
+      <li>Other minor bug fixes and under the hood improvements</li>
+  
+      <h1>3.3.1 - Hot Fix</h1>
+      <li>Fixed assessments not loading when no notices are available</li>
+  
+      <h1>3.3.0 - Overhauled Theming System</h1>
+      <li>Added a theme store!</li>
+      <li>Added the new theme creator!</li>
+      <li>Fixed Notices not working on home page</li>
+      <li>Fixed dark/light button labels inverted</li>
+      <li>Switched to GitHub for hosting the update video</li>
+      <li>Fixed an issue where the settings menu wouldn't change theme</li>
+      <li>Fixed custom shortcuts not allowing ports to be used</li>
+      <li>Fixed occasional flashing when using animations</li>
+      <li>Fixed loading of the tab icon</li>
+      <li>Made animations toggle apply to settings</li>
+      <li>Small styling improvements</li>
+      <li>Other minor bug fixes</li>
+  
+  
+      <h1>3.2.7 - Minor Improvements</h1>
+      <li>Improved performance!</li>
+      <li>Fixed a bug where the icon wasn't showing up</li>
+  
+      <h1>3.2.6 - Bug fixes and performance improvements</h1>
+      <li>Improved contrast for notifications</li>
+      <li>Added 12-hour time format toggle</li>
+      <li>Using external update video to ensure smaller package size</li>
+      <li>Refactored underlying code to improve performance</li>
+      <li>Removed old theme system <span style="font-style: italic;">*revamp coming soon*</span></li>
+      <li>Improved notices contrast</li>
+      <li>Remove Telemetry completely - as we weren't using it too much</li>
+      <li>Added Error handling to settings interface</li>
+      <li>Fixed HTML message editor cursor becoming misaligned</li>
+      <li>Enabled spellcheck inside of direct messages</li>
+      <li>Fixed timetable dates being misaligned</li>
+      <li>Other minor bug fixes and under the hood improvements</li>
+  
+      <h1>3.2.5 - More Bug Fixes</h1>
+      <li>New direct message scroll animations</li>
+      <li>Added error message for brave browser shields breaking backgrounds</li>
+      <li>Fixed homepage assessment tooltips being cut off</li>
+      <li>Improved direct message styling</li>
+      <li>Made settings panel auto size to height of screen</li>
+      <li>Fixed timetable dates not visible</li>
+      <li>Other minor bug fixes</li>
+  
+      <h1>3.2.4 - Bug Fixes</h1>
+      <li>Added an open changelog button to settings</li>
+      <li>Fixed a memory overflow bug with Education Perfect</li>
+      <li>Fixed a bug where the background wouldn't change instantly</li>
+      <li>Fixed news feed not loading</li>
+      <li>Fixed home items duplicating</li>
+      <li>Fixed Upcoming assessments not showing</li>
+  
+      <h1>3.2.2 - Minor Improvements</h1>
+      <li>Added Settings open-close animation</li>
+      <li>Minor Bug Fixes</li>
+  
+      <h1>3.2.0 - Custom Themes</h1>
+      <li>Added transparency (blur) effects</li>
+      <li>Added custom themes</li>
+      <li>Added colour picker history</li>
+      <li>Heaps of bug fixes</li>
+  
+      <h1>3.1.3 - Custom Backgrounds</h1>
+      <li>Added custom backgrounds with support for images and videos</li>
+      <li>Overhauled topbar</li>
+      <li>New animated hamburger icon</li>
+      <li>Minor bug fixes</li>
+  
+      <h1>3.1.2 - New settings menu!</h1>
+      <li>Overhauled the settings menu</li>
+      <li>Added custom gradients</li>
+      <li>Added HEAPS of animations</li>
+      <li>Fixed a bug where shortcuts don't show up</li>
+      <li>Other minor bugs fixed</li>
+  
+      <h1>3.1.1 - Minor Bug fixes</h1>
+      <li>Fixed assessments overlapping</li>
+      <li>Fixed houses not displaying if they aren't a specific color</li>
+      <li>Fixed Chrome Webstore Link</li>
+  
+      <h1>3.1.0 - Design Improvements</h1>
+      <li>Minor UI improvements</li>
+      <li>Added Animation Speed Slider</li>
+      <li>Animation now enables and disables without reloading SEQTA</li>
+      <li>Changed logo</li>
+  
+      <h1>3.0.0 - BetterSEQTA+ *Complete Overhaul*</h1>
+      <li>Redesigned appearance</li>
+      <li>Upgraded to manifest V3 (longer support)</li>
+      <li>Fixed transitional glitches</li>
+      <li>Under the hood improvements</li>
+      <li>Fixed News Feed</li>
+  
+      <h1>2.0.7 - Added support to other domains + Minor bug fixes</h1>
+      <li>Fixed BetterSEQTA+ not loading on some pages</li>
+      <li>Fixed text colour of notices being unreadable</li>
+      <li>Fixed pages not reloading when saving changes</li>
+  
+      <h1>2.0.2 - Minor bug fixes</h1>
+      <li>Fixed indicator for current lesson</li>
+      <li>Fixed text colour for DM messages list in Light mode</li>
+      <li>Fixed user info text colour</li>
+  
+      <h1>Sleek New Layout</h1>
+      <li>Updated with a new font and presentation, BetterSEQTA+ has never looked better.</li>
+  
+      <h1>New Updated Sidebar</h1>
+      <li>Condensed appearance with new updated icons.</li>
+  
+      <h1>Independent Light Mode and Dark Mode</h1>
+      <li>Dark mode and Light mode are now available to pick alongside your chosen Theme Colour. Your Theme Colour will now become an accent colour for the page.
+      Light/Dark mode can be toggled with the new button, found in the top-right of the menu bar.</li>
+  
+      <h1>Create Custom Shortcuts</h1>
+      <li>Found in the BetterSEQTA+ Settings menu, custom shortcuts can now be created with a name and URL of your choice.</li>
+    </div>
+    `).firstChild
+  
+    let footer = stringToHTML(/* html */ `
+      <div class="whatsnewFooter">
+        <div>
+        Report bugs and feedback:
+          <a class="socials" href="https://github.com/BetterSEQTA/BetterSEQTA-Plus" style="background: none !important; margin: 0 5px; padding:0;">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25px" height="25px" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
+              <g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="currentColor" /></g>
+            </svg>
+          </a>
+          <a class="socials" href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel" style="background: none !important; margin: 0 5px; padding:0;">
+            <svg style="width:25px;height:25px" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+            </svg>
+          </a>
+          <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0;">
+            <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
+              <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="currentColor"/>
+            </svg>
+          </a>
+        </div>
+  
+        <div>
+          <a href="https://ko-fi.com/sethburkart" target="_blank" style="background: none !important; margin:0;margin-left:6px; padding:0;">
+           <img height="25" style="border:0px; height:25px; margin-right: -6px;" src="${browser.runtime.getURL(kofi)}" border="0" alt="Buy Me a Coffee at ko-fi.com" />
+          </a>
+        </div>
+      </div>
+    `).firstChild
+  
+    let exitbutton = document.createElement("div")
+    exitbutton.id = "whatsnewclosebutton"
+  
+    container.append(header)
+    container.append(imagecont)
+    container.append(textcontainer)
+    container.append(text as ChildNode)
+    container.append(footer as ChildNode)
+    container.append(exitbutton)
+  
+    background.append(container)
+  
+    document.getElementById("container")!.append(background)
+  
+    let bkelement = document.getElementById("whatsnewbk")
+    let popup = document.getElementsByClassName("whatsnewContainer")[0]
+  
+    if (settingsState.animations) {
+      animate(
+        [popup, bkelement as HTMLElement],
+        { scale: [0, 1] },
+        {
+          type: "spring",
+          stiffness: 220,
+          damping: 18,
+        },
+      )
+  
+      animate(
+        ".whatsnewTextContainer *",
+        { opacity: [0, 1], y: [10, 0] },
+        {
+          delay: stagger(0.05, { startDelay: 0.1 }),
+          duration: 0.5,
+          ease: [0.22, 0.03, 0.26, 1],
+        },
+      )
+    }
+  
+    delete settingsState.justupdated
+  
+    bkelement!.addEventListener("click", function (event) {
+      // Check if the click event originated from the element itself and not any of its children
+      if (event.target === bkelement) {
+        DeleteWhatsNew()
+      }
+    })
+  
+    var closeelement = document.getElementById("whatsnewclosebutton")
+    closeelement!.addEventListener("click", function () {
+      DeleteWhatsNew()
+    })
+  }

src/seqta/utils/convertTo12HourFormat.ts

@@ -0,0 +1,21 @@
+export function convertTo12HourFormat(
+    time: string,
+    noMinutes: boolean = false,
+  ): string {
+    let [hours, minutes] = time.split(":").map(Number)
+    let period = "AM"
+  
+    if (hours >= 12) {
+      period = "PM"
+      if (hours > 12) hours -= 12
+    } else if (hours === 0) {
+      hours = 12
+    }
+  
+    let hoursStr = hours.toString()
+    if (hoursStr.length === 2 && hoursStr.startsWith("0")) {
+      hoursStr = hoursStr.substring(1)
+    }
+  
+    return `${hoursStr}${noMinutes ? "" : `:${minutes.toString().padStart(2, "0")}`} ${period}`
+  }

src/seqta/utils/debounce.ts

@@ -0,0 +1,7 @@
+export default function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return function(this: ThisParameterType<T>, ...args: Parameters<T>) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn.apply(this, args), delay);
+  };
+}

src/seqta/utils/listeners/ClickListeners.ts

@@ -1,4 +1,4 @@
-import { waitForElm } from "@/SEQTA";
+import { waitForElm } from "@/seqta/utils/waitForElm"
 import ReactFiber from "../ReactFiber";
 
 const handleNotificationClick = async (target: HTMLElement) => {

src/seqta/utils/listeners/MessageListener.ts

@@ -1,20 +1,18 @@
 import browser from 'webextension-polyfill'
 
-import { closeExtensionPopup, MenuOptionsOpen, OpenMenuOptions } from '../../../SEQTA';
+import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
-import { deleteTheme } from '@/seqta/ui/themes/deleteTheme';
+import { MenuOptionsOpen, OpenMenuOptions } from "@/seqta/utils/Openers/OpenMenuOptions"
-import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes';
+
-import { saveTheme } from '@/seqta/ui/themes/saveTheme';
+import { CloseThemeCreator, OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator';
-import { UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview';
-import { getTheme } from '@/seqta/ui/themes/getTheme';
-import { setTheme } from '@/seqta/ui/themes/setTheme';
-import { disableTheme } from '@/seqta/ui/themes/disableTheme';
-import { CloseThemeCreator, OpenThemeCreator } from '@/seqta/ui/ThemeCreator';
-import ShareTheme from '@/seqta/ui/themes/shareTheme';
 import sendThemeUpdate from '@/seqta/utils/sendThemeUpdate';
 import hideSensitiveContent from '@/seqta/ui/dev/hideSensitiveContent';
+import { ThemeManager } from '@/plugins/built-in/themes/theme-manager';
+
+const themeManager = ThemeManager.getInstance();
 
 export class MessageHandler {
   constructor() {
+    // @ts-ignore
     browser.runtime.onMessage.addListener(this.routeMessage.bind(this));
   }
   routeMessage(request: any, _sender: any, sendResponse: any) {
@@ -30,46 +28,46 @@ export class MessageHandler {
       case 'UpdateThemePreview':
         if (request?.save == true) {
           const save = async () => {
-            await saveTheme(request.body)
+            await themeManager.saveTheme(request.body)
             if (request.body.enableTheme) {
-              await setTheme(request.body.id)
+              await themeManager.setTheme(request.body.id)
             }
             sendResponse({ status: 'success' })
             sendThemeUpdate()
           }
           save()
         } else {
-          UpdateThemePreview(request.body);
+          themeManager.updatePreview(request.body);
           sendResponse({ status: 'success' });
         }
         return true;
       
       case 'GetTheme':
-        getTheme(request.body.themeID).then((theme) => {
+        themeManager.getTheme(request.body.themeID).then((theme) => {
           sendResponse(theme);
         });
         return true;
   
       case 'SetTheme':
-        setTheme(request.body.themeID).then(() => {
+        themeManager.setTheme(request.body.themeID).then(() => {
           sendResponse({ status: 'success' });
         });
         break;
   
       case 'DisableTheme':
-        disableTheme().then(() => {
+        themeManager.disableTheme().then(() => {
           sendResponse({ status: 'success' });
         });
         break;
   
       case 'DeleteTheme':
-        deleteTheme(request.body.themeID).then(() => {
+        themeManager.deleteTheme(request.body.themeID).then(() => {
           sendResponse({ status: 'success' });
         });
         break;
 
       case 'ListThemes':
-        getAvailableThemes().then((themes) => {
+        themeManager.getAvailableThemes().then((themes) => {
           sendResponse(themes);
         });
         return true;
@@ -82,7 +80,7 @@ export class MessageHandler {
         break;
       
       case 'ShareTheme':
-        ShareTheme(request.body.themeID).then((id) => {
+        themeManager.shareTheme(request.body.themeID).then((id) => {
           sendResponse({ status: 'success', id });
         });
         return true;
@@ -104,7 +102,7 @@ export class MessageHandler {
   
       default:
         console.debug('Unknown request info:', request.info);
-    }
+      }
   }
 
   editSidebar() {

src/seqta/utils/listeners/SettingsState.ts

@@ -74,6 +74,7 @@ class StorageManager {
   }
 
   private async saveToStorage(): Promise<void> {
+    // @ts-expect-error
     await browser.storage.local.set(this.data);
     this.notifySubscribers();
   }

src/seqta/utils/listeners/StorageChanges.ts

@@ -1,16 +1,13 @@
 import { settingsState } from './SettingsState';
 import { updateAllColors } from '@/seqta/ui/colors/Manager';
-import {
+
-  addShortcuts,
+
-  CreateBackground,
+import { addShortcuts } from "@/seqta/utils/Adders/AddShortcuts";
-  CreateCustomShortcutDiv,
+import { CreateCustomShortcutDiv } from "@/seqta/utils/CreateEnable/CreateCustomShortcutDiv";
-  disableNotificationCollector,
+import { FilterUpcomingAssessments } from "@/seqta/utils/FilterUpcomingAssessments";
-  enableNotificationCollector,
+import { RemoveShortcutDiv } from "@/seqta/utils/DisableRemove/RemoveShortcutDiv";
-  FilterUpcomingAssessments,
+
-  RemoveBackground,
+
-  RemoveShortcutDiv,
-} from '@/SEQTA';
-import { updateBgDurations } from '@/seqta/ui/Animation';
 import browser from 'webextension-polyfill';
 import type { CustomShortcut } from '@/types/storage';
 
@@ -25,9 +22,6 @@ export class StorageChangeHandler {
     settingsState.register('onoff', this.handleOnOffChange.bind(this));
     settingsState.register('shortcuts', this.handleShortcutsChange.bind(this));
     settingsState.register('customshortcuts', this.handleCustomShortcutsChange.bind(this));
-    settingsState.register('notificationcollector', this.handleNotificationCollectorChange.bind(this));
-    settingsState.register('bksliderinput', updateBgDurations.bind(this));
-    settingsState.register('animatedbk', this.handleAnimatedBkChange.bind(this));
     settingsState.register('transparencyEffects', this.handleTransparencyEffectsChange.bind(this));
     settingsState.register('subjectfilters', FilterUpcomingAssessments.bind(this));
   }
@@ -41,14 +35,6 @@ export class StorageChangeHandler {
     browser.runtime.sendMessage({ type: 'reloadTabs' });
   }
 
-  private handleNotificationCollectorChange(newValue: boolean) {
-    if (newValue) {
-      enableNotificationCollector();
-    } else {
-      disableNotificationCollector();
-    }
-  }
-
   private handleCustomShortcutsChange(newValue: CustomShortcut[], oldValue: CustomShortcut[]) {
     if (newValue) {
       if (newValue.length > oldValue.length) {
@@ -92,15 +78,6 @@ export class StorageChangeHandler {
     RemoveShortcutDiv(removedShortcuts);
   }
 
-  private handleAnimatedBkChange(newValue: boolean) {
-    if (newValue) {
-      CreateBackground();
-    } else {
-      RemoveBackground();
-      document.getElementById('container')!.style.background = 'var(--background-secondary)';
-    }
-  }
-
   private handleTransparencyEffectsChange(newValue: boolean) {
     if (newValue) {
       document.documentElement.classList.add('transparencyEffects');

src/seqta/utils/setupSettingsButton.ts

@@ -0,0 +1,33 @@
+import { changeSettingsClicked, closeExtensionPopup, SettingsClicked } from "./Closers/closeExtensionPopup"
+import { animate } from "motion"
+import { settingsState } from "./listeners/SettingsState"
+
+export function setupSettingsButton() {
+    var AddedSettings = document.getElementById("AddedSettings")
+    var extensionPopup = document.getElementById("ExtensionPopup")
+  
+    AddedSettings!.addEventListener("click", async () => {
+      if (SettingsClicked) {
+        closeExtensionPopup(extensionPopup as HTMLElement)
+      } else {
+        if (settingsState.animations) {
+          animate(0, 1, {
+            onUpdate: (progress) => {
+              extensionPopup!.style.opacity = progress.toString()
+              extensionPopup!.style.transform = `scale(${progress})`
+            },
+            type: "spring",
+            stiffness: 280,
+            damping: 20,
+          })
+        } else {
+          extensionPopup!.style.opacity = "1"
+          extensionPopup!.style.transform = "scale(1)"
+          extensionPopup!.style.transition =
+            "opacity 0s linear, transform 0s linear"
+        }
+        extensionPopup!.classList.remove("hide")
+        changeSettingsClicked(true)
+      }
+    })
+  }

src/seqta/utils/waitForElm.ts

@@ -0,0 +1,75 @@
+import { eventManager } from "@/seqta/utils/listeners/EventManager"
+import { delay } from "@/seqta/utils/delay"
+
+export async function waitForElm(
+    selector: string,
+    usePolling: boolean = false,
+    interval: number = 100,
+    maxIterations?: number
+  ): Promise<Element> {
+    if (usePolling) {
+      return new Promise((resolve, reject) => {
+        let iterations = 0;
+        if (maxIterations) {
+          iterations = 0;
+        }
+        const checkForElement = () => {
+          const element = document.querySelector(selector)
+          if (element) {
+            resolve(element)
+          } else {
+            if (maxIterations) {
+              iterations++;
+              if (iterations >= maxIterations) {
+                reject(new Error("Element not found"));
+              }
+            }
+            setTimeout(checkForElement, interval)
+          }
+        }
+  
+        if (document.readyState === "loading") {
+          document.addEventListener("DOMContentLoaded", checkForElement)
+        } else {
+          checkForElement()
+        }
+      })
+    } else {
+      return new Promise((resolve) => {
+        const registerObserver = () => {
+          const { unregister } = eventManager.register(
+            `${selector}`,
+            {
+              customCheck: (element) => element.matches(selector),
+            },
+            async (element) => {
+              resolve(element)
+              await delay(1)
+              unregister() // Remove the listener once the element is found
+            },
+          )
+          return unregister
+        }
+  
+        let unregister = null
+  
+        if (document.readyState === "loading") {
+          // DOM is still loading, wait for it to be ready
+          document.addEventListener("DOMContentLoaded", () => {
+            unregister = registerObserver()
+          })
+        } else {
+          unregister = registerObserver()
+        }
+  
+        const querySelector = () => document.querySelector(selector)
+        const element = querySelector()
+  
+        if (element) {
+          if (unregister) unregister()
+          resolve(element)
+          return
+        }
+      })
+    }
+  }

src/types/CustomThemes.ts

@@ -20,9 +20,7 @@ export type LoadedCustomTheme = CustomTheme & {
     id: string;
     blob: Blob;
     variableName: string;
-    url: string | null;
   }[];
-  coverImageUrl?: string;
 };
 
 export type DownloadedTheme = CustomTheme & {

src/types/storage.ts

@@ -1,8 +1,6 @@
 export interface SettingsState {
   DarkMode: boolean;
   selectedTheme: string;
-  animatedbk: boolean;
-  bksliderinput: string;
   customshortcuts: CustomShortcut[];
   defaultmenuorder: any[];
   lessonalert: boolean;
@@ -25,7 +23,6 @@ export interface SettingsState {
     welcome: ToggleItem;
   };
   menuorder: any[];
-  notificationcollector: boolean;
   onoff: boolean;
   selectedColor: string;
   originalSelectedColor: string;
@@ -38,9 +35,14 @@ export interface SettingsState {
   defaultPage: string;
   devMode?: boolean;
   originalDarkMode?: boolean;
-  assessmentsAverage?: boolean;
-  lettergrade: boolean;
   newsSource?: string;
+  
+  // depreciated keys
+  animatedbk: boolean;
+  bksliderinput: string;
+  lettergrade: boolean;
+  assessmentsAverage?: boolean;
+  notificationCollector?: boolean;
 }
 
 interface ToggleItem {

tailwind.config.js

@@ -1,5 +1,3 @@
-import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
-
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -42,17 +40,6 @@ export default {
   },
   plugins: [
     require('@tailwindcss/forms'),
-    addVariablesForColors,
   ],
 };
   
-function addVariablesForColors({ addBase, theme }) {
-  let allColors = flattenColorPalette(theme("colors"));
-  let newVars = Object.fromEntries(
-    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
-  );
- 
-  addBase({
-    ":root": newVars,
-  });
-}

tsconfig.json

@@ -21,6 +21,10 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
+    /* Decorators */
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+
     "paths": {
       "@/*": ["./src/*"]
     },

vite.config.ts

@@ -1,12 +1,11 @@
 import { defineConfig } from 'vite';
-import { join, resolve } from 'path';
+import path, { join, resolve } from 'path';
-
+import fs from 'fs';
 import { updateManifestPlugin } from './lib/patchPackage';
 import { base64Loader } from './lib/base64loader';
 import type { BuildTarget } from './lib/types';
 import ClosePlugin from './lib/closePlugin';
 
-import react from '@vitejs/plugin-react';
 import million from "million/compiler";
 //import MillionLint from '@million/lint';
 
@@ -20,16 +19,17 @@ import { opera } from './src/manifests/opera';
 import { safari } from './src/manifests/safari';
 import { crx } from '@crxjs/vite-plugin';
 
+import touchGlobalCSSPlugin from './lib/touchGlobalCSS';
 const targets: BuildTarget[] = [
   chrome, brave, edge, firefox, opera, safari
 ]
 
-const mode = process.env.MODE || 'chrome';
+const mode = process.env.MODE || 'chrome'; // Check the environment variable to determine which build type to use.
+//const sourcemap = (process.env.SOURCEMAP === "true") || false; // Check whether we want sourcemaps.
 
 export default defineConfig(({ command }) => ({
   plugins: [
     base64Loader,
-    react(),
     svelte({
       emitCss: false
     }),
@@ -40,6 +40,7 @@ export default defineConfig(({ command }) => ({
       browser: mode.toLowerCase() === "firefox" ? "firefox" : "chrome"
     }),
     updateManifestPlugin(),
+    touchGlobalCSSPlugin(),
     ...(command === 'build' ? [ClosePlugin()] : [])
   ],
   root: resolve(__dirname, './src'),
@@ -73,6 +74,7 @@ export default defineConfig(({ command }) => ({
     outDir: resolve(__dirname, 'dist', mode),
     emptyOutDir: false,
     minify: false,
+    //sourcemap: sourcemap,
     rollupOptions: {
       input: {
         settings: join(__dirname, 'src', 'interface', 'index.html'),