fix: assessment tooltips on homepage

Added easter egg to AddBetterSEQTAElements.ts

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -2,6 +2,7 @@ name: Bug report
 description: Report an issue with the modpack in its unmodified state. For other issues, use Discord.
 labels: bug
 title: "[BUG]"
+type: "Bug"
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -2,6 +2,7 @@ name: Feature request
 description: Suggest a new Feature to be added or replaced in BetterSeqtaPLUS
 labels: enhancement
 title: "[FR]"
+
 body:
   - type: checkboxes
     attributes:

README.md

@@ -58,13 +58,13 @@ Don't worry- if you get stuck feel free to ask around in the [discord](https://d
 
 ## Getting started
 
-1. Clone the repository
+    **1. Clone the repository**
 
 ```
 git clone https://github.com/BetterSEQTA/BetterSEQTA-Plus
 ```
 
-1. Install dependencies
+    **2. Install dependencies**
 
 You may install the dependencies like below:
 
@@ -80,27 +80,27 @@ npm install --legacy-peer-deps # Only NPM supported
 
 ### Running Development
 
-2. Run the dev script (it updates as you save files)
+    **3. Run the dev script (it updates as you save files)**
 
 ```
-npm run dev # or use your perferred package manager
+npm run dev # or use your preferred package manager
 ```
 
 ### Building for production
 
-2. Run the build script
+    **4. Run the build script**
 
 ```
-npm run build # or use your perferred package manager
+npm run build # or use your preferred package manager
 ```
 
-2.1. Package it up (optional)
+    **4.1. Package it up (optional)**
 
 ```
-npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your perferred package manager
+npm run zip # This REQUIRES 7-Zip to be installed in order to work. You can also use your preferred package manager
 ```
 
-3. Load the extension into chrome
+    **5. Load the extension into chrome**
 
 - Go to `chrome://extensions`
 - Enable developer mode

lib/base64loader.ts

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

lib/closePlugin.ts

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

lib/createManifest.ts

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

lib/inlineWorker.ts

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

lib/publish.js

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

lib/touchGlobalCSS.ts

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

lib/types.ts

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

lib/utils.ts

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.4.6.1",
+  "version": "3.4.8",
   "type": "module",
   "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
   "browserslist": "> 0.5%, last 2 versions, not dead",
@@ -16,10 +16,7 @@
     "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
     "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
     "publish": "bun lib/publish.js --b",
-    "zip": "bedframe zip",
+    "zip": "bedframe zip"
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
   },
   "targets": {
     "prod": {
@@ -40,7 +37,6 @@
     "@babel/runtime": "^7.26.9",
     "@bedframe/cli": "^0.0.91",
     "@crxjs/vite-plugin": "2.0.0-beta.32",
-    "@types/jest": "^29.5.14",
     "@types/mime-types": "^2.1.4",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -48,7 +44,6 @@
     "dependency-cruiser": "^16.10.0",
     "eslint": "9.22.0",
     "glob": "^11.0.1",
-    "jest": "^29.7.0",
     "mime-types": "^2.1.35",
     "prettier": "^3.5.3",
     "process": "^0.11.10",
@@ -57,7 +52,6 @@
     "sass-loader": "^16.0.5",
     "semver": "^7.7.1",
     "tailwindcss": "3",
-    "ts-jest": "^29.3.4",
     "url": "^0.11.4"
   },
   "dependencies": {
@@ -81,6 +75,7 @@
     "@uiw/codemirror-extensions-color": "^4.23.10",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "autoprefixer": "^10.4.21",
+    "canvas-confetti": "^1.9.3",
     "codemirror": "^6.0.1",
     "color": "^5.0.0",
     "dompurify": "^3.2.4",

src/SEQTA.ts

@@ -9,6 +9,7 @@ import browser from "webextension-polyfill";
 import * as plugins from "@/plugins";
 import { main } from "@/seqta/main";
 import { delay } from "./seqta/utils/delay";
+import { initializeHideSensitiveToggle } from "@/seqta/utils/hideSensitiveToggle";
 
 export let MenuOptionsOpen = false;
 
@@ -24,6 +25,19 @@ if (document.childNodes[1]) {
   init();
 }
 
+/**
+ * Initializes BetterSEQTA+ on a SEQTA page.
+ *
+ * This function performs the following steps:
+ * 1. Verifies that the current page is a SEQTA page.
+ * 2. Injects CSS styles for document loading.
+ * 3. Changes the page's favicon.
+ * 4. Initializes the extension's settings state.
+ * 5. Sets default storage if settings are not already defined.
+ * 6. Calls the main function to apply core BetterSEQTA+ modifications.
+ * 7. Initializes legacy and new plugins if the extension is enabled.
+ * 8. Logs success or error messages during initialization.
+ */
 async function init() {
   const hasSEQTATitle = document.title.includes("SEQTA Learn");
 
@@ -51,15 +65,14 @@ async function init() {
       }
 
       await main();
+      plugins.Monofile();
 
       if (settingsState.onoff) {
-        // Initialize legacy plugins
-        plugins.Monofile();
-
-        // Initialize new plugin system
         await plugins.initializePlugins();
       }
 
+      initializeHideSensitiveToggle();
+
       console.info(
         "[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
       );

src/background/news.ts

@@ -1,5 +1,18 @@
 import Parser from "rss-parser";
 
+/**
+ * Fetches news articles specifically for Australia from the NewsAPI.
+ *
+ * This function handles a specific case for fetching Australian news. It includes a
+ * mechanism to retry the fetch operation by appending "%00" to the URL if a
+ * rate limit error (`response.code == "rateLimited"`) is encountered. This is
+ * likely a workaround for cache-busting or bypassing certain rate-limiting measures.
+ *
+ * @param {string} url The NewsAPI URL to fetch Australian news from.
+ * @param {any} sendResponse A callback function (likely from a browser extension message listener)
+ *                           to send the fetched news data back to the caller.
+ *                           It's called with an object like `{ news: responseData }`.
+ */
 const fetchAustraliaNews = async (url: string, sendResponse: any) => {
   fetch(url)
     .then((result) => result.json())
@@ -12,6 +25,12 @@ const fetchAustraliaNews = async (url: string, sendResponse: any) => {
     });
 };
 
+/**
+ * A record mapping lowercase country codes (e.g., "usa", "canada") to an array
+ * of RSS feed URLs for news sources in that country.
+ *
+ * @type {Record<string, string[]>}
+ */
 const rssFeedsByCountry: Record<string, string[]> = {
   usa: [
     "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
@@ -54,6 +73,25 @@ const rssFeedsByCountry: Record<string, string[]> = {
   netherlands: ["https://www.dutchnews.nl/feed/", "https://www.nrc.nl/rss/"],
 };
 
+/**
+ * Fetches news articles based on a specified source.
+ *
+ * The source can be:
+ * 1. The string "australia": Fetches news from Australian sources via NewsAPI,
+ *    handled by the `fetchAustraliaNews` function.
+ * 2. A lowercase country code (e.g., "usa", "canada"): Fetches news from a predefined
+ *    list of RSS feeds for that country, as specified in `rssFeedsByCountry`.
+ * 3. A direct RSS feed URL (starting with "http"): Fetches news directly from this URL.
+ *
+ * The fetched articles are then sent back to the caller using the `sendResponse` callback.
+ *
+ * @param {string} source The news source identifier. This can be "australia", a
+ *                        lowercase country code, or a direct RSS feed URL.
+ * @param {any} sendResponse A callback function (typically from a browser extension
+ *                           message listener, like `chrome.runtime.onMessage`)
+ *                           used to send the fetched news data back to the caller.
+ *                           It's called with an object like `{ news: { articles: [...] } }`.
+ */
 export async function fetchNews(source: string, sendResponse: any) {
   if (source === "australia") {
     const date = new Date();

src/css/documentload.scss

@@ -94,3 +94,57 @@ body:has(.outside-container:not(.hide))
   background: var(--text-primary) !important;
   color: var(--theme-primary) !important;
 }
+.fixed-tooltip {
+  display: inline-block;
+  z-index: 5 !important;
+  width: 28px;
+  background: none;
+  box-shadow: none;
+  padding: 2px;
+  position: absolute;
+}
+.fixed-tooltip svg {
+  fill: var(--theme-primary);
+}
+.tooltiptext-fixed {
+  width: 120px;
+  transform: scale(0);
+  transition: transform 0.2s;
+  transform-origin: top;
+  background: var(--background-primary);
+  color: var(--text-primary);
+  text-align: center;
+  border-radius: 6px;
+  padding: 2px;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  margin-left: -62px;
+}
+.tooltiptext-fixed::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent var(--text-primary) transparent;
+}
+.tooltiptext-fixed.show {
+  transform: scale(1);
+  transform-origin: top;
+  transition: transform 0.2s;
+}
+.tooltiptext-fixed p:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.3) !important;
+  transition: 200ms;
+}
+.tooltiptext-fixed p {
+  border-radius: 8px !important;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: 2px;
+}

src/css/injected.scss

@@ -926,6 +926,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 .notices-container {
   input {
     border: none;
+    color: var(--text-color) !important;
 
     &:hover {
       border: none;
@@ -1061,6 +1062,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   max-width: 1050px;
   margin: auto;
   width: 1050px;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
   gap: 32px;
@@ -1107,9 +1109,11 @@ div > ol:has(.uiFileHandlerWrapper) {
   transition: 200ms;
   width: 100%;
   height: 15em;
-  display: flex;
+  display: grid;
-  flex-direction: row;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(130px, 1fr);
   border-radius: 16px;
+  overflow-x: auto;
 
   .day:first-child {
     border-bottom-left-radius: 16px;
@@ -1172,11 +1176,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   font-size: 20px;
   font-weight: 400;
 }
-.notices-container h2 {
-  margin: 20px;
-  font-size: 20px;
-  font-weight: 400;
-}
 .notice {
   position: relative;
   padding: 20px;
@@ -1257,6 +1256,9 @@ div > ol:has(.uiFileHandlerWrapper) {
   word-wrap: break-word;
   line-height: 20px;
 }
+.customshortcut > svg {
+  border-radius: 0;
+}
 .colourbar {
   width: 100%;
   height: 3px;
@@ -1347,20 +1349,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   font-size: 10px !important;
   font-weight: 500;
 }
-.day-empty {
-  font-size: 30px;
-  display: flex;
-  width: 100%;
-  border-radius: 16px 0;
-  align-items: center;
-}
-.day-empty img {
-  margin: 20px;
-  height: 50%;
-}
-.day-empty p {
-  margin: 0;
-}
 .waitWindow {
   background: var(--better-main);
 }
@@ -1997,6 +1985,15 @@ div.entry.class[style*="width: 46.5%"] {
   min-width: 0;
   width: auto !important;
 }
+
+div.entry.tutorial {
+  border-radius: 4px;
+}
+
+div.entry.event {
+  border-radius: 4px;
+}
+
 .uiFileHandler .uiButton {
   border-radius: 32px !important;
   color: var(--text-primary) !important;
@@ -2736,10 +2733,13 @@ body {
 .menuShown #menuToggle .hamburger-line:nth-child(3) {
   transform: translateY(-6px) rotate(-45deg);
 }
-.day-empty {
+div.day-empty {
-  font-size: 30px;
   display: flex;
   align-items: center;
+  height: 15em;
+  width: 100%;
+  border-radius: 16px 0;
+  padding: 0 !important;
 
   img {
     margin: 20px;
@@ -2748,6 +2748,7 @@ body {
 
   p {
     margin: 0;
+    font-size: 30px;
   }
 }
 .upcoming-submittedtext {
@@ -2957,7 +2958,6 @@ body {
   cursor: pointer;
 }
 .day {
-  width: 100%;
   display: flex;
   flex-direction: column;
   box-shadow:
@@ -2985,18 +2985,6 @@ body {
 .dark .day h3 {
   color: #c1bcbc;
 }
-.day-empty {
-  font-size: 30px;
-  display: flex;
-  align-items: center;
-}
-.day-empty img {
-  margin: 20px;
-  height: 50%;
-}
-.day-empty p {
-  margin: 0;
-}
 
 .upcoming-items {
   background: var(--background-primary);
@@ -3286,7 +3274,7 @@ body {
   margin: 0 auto;
 }
 .whatsnewImg {
-  margin: 8px auto;
+  margin: 0 auto;
   width: 90%;
   border-radius: 16px;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
@@ -3305,6 +3293,26 @@ body {
   text-indent: -1em;
   padding-left: 1em;
 }
+.whatsnewTextContainer .beta {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  margin-left: 2px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #9a3412;
+  background-color: #ffedd569;
+  border-radius: 9999px;
+  border: 1px solid rgba(253, 186, 140, 0.3);
+  background-color: #ffedd5;
+  border-color: rgba(253, 186, 140, 0.3);
+}
+.dark .whatsnewTextContainer .beta {
+  border-color: rgb(124 45 18 / 0.3);
+  background-color: rgb(124 45 18 / 0.3);
+  color: rgb(253 186 116);
+}
 .whatsnewTextHeader {
   font-size: 1.4em !important;
   color: #4dd868;
@@ -3535,3 +3543,410 @@ body {
   -ms-overflow-style: none;
   scrollbar-width: none !important;
 }
+
+.notice-modal-content {
+  border: none !important;
+}
+
+.notice-unified-content.notice-modal-state {
+  border: none !important;
+}
+
+// Notice card hover effects for main page cards
+.notice-unified-content.notice-card-state:not([data-transitioning]) {
+  cursor: pointer;
+
+  &:hover {
+    background: var(--background-secondary) !important;
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.notice-badge {
+  padding: 4px 10px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.notice-staff {
+  font-size: 12px;
+  color: var(--text-secondary);
+  opacity: 0.7;
+}
+
+.notice-preview {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Modal styles
+.notice-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.notice-modal-transition {
+  position: fixed;
+  z-index: 10001;
+  transition: none; // Controlled by motion animations
+}
+
+.notice-modal-content {
+  background: var(--background-primary);
+  border-radius: 16px;
+  max-width: 600px;
+  max-height: 80vh;
+  width: 100%;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  &.notice-transitioning {
+    max-width: none;
+    max-height: none;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+}
+
+.notice-unified-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--background-primary);
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dark .notice-unified-content {
+  color: white;
+}
+
+.notice-unified-content {
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-weight: inherit !important;
+    color: inherit !important;
+    text-shadow: none !important;
+  }
+  
+  .notice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-shrink: 0;
+    margin-bottom: 12px;
+    gap: 16px;
+  }
+  
+  .notice-content-title {
+    font-size: 20px !important; // Nice middle ground - not too big, not too small
+    font-weight: 600 !important;
+    color: var(--text-primary) !important;
+    margin: 0 0 12px 0 !important;
+    line-height: 1.3 !important;
+    flex-shrink: 0;
+  }
+  
+  .notice-content-body {
+    font-size: 14px !important;
+    color: var(--text-secondary) !important;
+    line-height: 1.5 !important;
+    margin: 0 !important;
+    flex: 1;
+    display: block;
+    // Force stable layout dimensions - content renders at full size always
+    min-width: 600px; // Ensure tables have consistent width for layout
+    width: 100%;
+  }
+  
+  // The ONLY difference between states is clipping!
+  &.notice-card-state {    
+    .notice-content-body {
+      // Clip to show only 2 lines but keep full layout
+      overflow: hidden;
+      max-height: 3em; // ~2 lines worth of height
+    }
+  }
+  
+  &.notice-modal-state {
+    .notice-close-btn {
+      opacity: 1;
+    }
+    
+    .notice-content-body {
+      // Show full content with scrolling
+      overflow-y: auto;
+      
+      // Custom scrollbar for long content
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 3px;
+      }
+      
+             &::-webkit-scrollbar-thumb:hover {
+         background: rgba(255, 255, 255, 0.3);
+       }
+
+       // Style content elements nicely
+       p {
+         margin-bottom: 12px;
+         
+         &:last-child {
+           margin-bottom: 0;
+         }
+       }
+
+       a {
+         color: var(--theme-primary);
+         text-decoration: none;
+
+         &:hover {
+           text-decoration: underline;
+         }
+       }
+
+       ul, ol {
+         margin: 12px 0;
+         padding-left: 20px;
+       }
+
+       li {
+         margin-bottom: 4px;
+       }
+     }
+   }
+ }
+
+.notice-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.notice-badge-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+button.notice-close-btn {
+  position: absolute !important;
+  font-size: 20px !important;
+  top: 12px;
+  right: 12px;
+  background: var(--background-secondary);
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--text-primary);
+  transition: all 0.2s ease !important;
+  flex-shrink: 0;
+  opacity: 0;
+
+  &:hover {
+    background: var(--background-tertiary);
+    transform: scale(1.1);
+  }
+}
+
+.notice-modal-badge-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.notice-modal-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.notice-modal-staff {
+  font-size: 14px;
+  color: var(--text-secondary);
+  opacity: 0.8;
+}
+
+.notice-modal-close {
+  background: var(--background-secondary);
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--background-tertiary);
+    transform: scale(1.1);
+  }
+}
+
+.notice-modal-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 16px 20px 20px 20px;
+  line-height: 1.3;
+  flex-shrink: 0;
+}
+
+.notice-modal-body {
+  padding: 0 20px 20px 20px;
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  flex: 1;
+  overflow-y: auto;
+  
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  // Style content elements
+  p {
+    margin-bottom: 12px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: var(--theme-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul, ol {
+    margin: 12px 0;
+    padding-left: 20px;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+}
+
+// Dark mode adjustments
+.dark {
+  .notice-card {
+    border-color: rgba(255, 255, 255, 0.05);
+    
+    &:hover {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .notice-modal-content {
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+}
+
+// Mobile responsiveness
+@media (max-width: 768px) {
+  .notice-modal-overlay {
+    padding: 10px;
+  }
+
+  .notice-modal-content {
+    max-height: 90vh;
+  }
+
+  .notice-modal-title {
+    font-size: 20px;
+    margin: 12px 16px 16px 16px;
+  }
+
+  .notice-modal-body {
+    padding: 0 16px 16px 16px;
+  }
+
+  .notice-card {
+    padding: 12px;
+  }
+  
+  .notice-preview {
+    font-size: 13px;
+  }
+}
+
+h2.home-subtitle {
+  margin: 20px;
+  font-size: 20px;
+  font-weight: 400;
+}

src/css/injected/transparency.scss

@@ -21,6 +21,9 @@ html.transparencyEffects {
   }
 
   /* Blurs */
+  .search,
+  .document,
+  .border,
   .draggable,
   .notice,
   [class*="BasicPanel__BasicPanel___"],
@@ -42,29 +45,22 @@ html.transparencyEffects {
     backdrop-filter: blur(80px);
   }
 
+  .filter-select,
   .report {
     backdrop-filter: blur(10px) !important;
   }
 
+  #menu,
+  .kanban-column,
   .whatsnewContainer,
   [class*="Message__Message___"] {
     backdrop-filter: blur(50px);
   }
 
-  #menu {
-    backdrop-filter: blur(20px);
-  }
-
   .title > a {
     backdrop-filter: blur(0px) !important;
   }
 
-  .search,
-  .document,
-  .border {
-    backdrop-filter: blur(80px);
-  }
-
   #main > .dashboard {
     section,
     .dashlet {

src/interface/hooks/BackgroundDataLoader.ts

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

src/interface/hooks/BackgroundUpdates.ts

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

src/interface/hooks/SettingsPopup.ts

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

src/interface/hooks/ThemeUpdates.ts

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

src/interface/index.ts

@@ -3,6 +3,7 @@ import Settings from "./pages/settings.svelte";
 import IconFamily from "@/resources/fonts/IconFamily.woff";
 import browser from "webextension-polyfill";
 import renderSvelte from "./main";
+import { initializeSettingsState } from "@/seqta/utils/listeners/SettingsState";
 
 function InjectCustomIcons() {
   console.info("[BetterSEQTA+] Injecting Icons");
@@ -26,4 +27,8 @@ if (!mountPoint) {
 }
 
 InjectCustomIcons();
-renderSvelte(Settings, mountPoint, { standalone: true });
+
+(async () => {
+  await initializeSettingsState();
+  renderSvelte(Settings, mountPoint, { standalone: true });
+})();

src/interface/main.ts

@@ -15,9 +15,11 @@ export default function renderSvelte(
     },
   });
 
-  const styleElement = document.createElement("style");
+  if (mountPoint instanceof ShadowRoot) {
-  styleElement.textContent = style;
+    const styleElement = document.createElement("style");
-  mountPoint.appendChild(styleElement);
+    styleElement.textContent = style;
+    mountPoint.appendChild(styleElement);
+  }
 
   return app;
 }

src/interface/pages/settings.svelte

@@ -7,7 +7,7 @@
 
   import { standalone as StandaloneStore } from '../utils/standalone.svelte';
   import { onMount } from 'svelte'
-  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
   import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
   import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage"
@@ -52,13 +52,12 @@
   let { standalone } = $props<{ standalone?: boolean }>();
   let showColourPicker = $state<boolean>(false);
 
-  onMount(() => {
+  onMount(async () => {
     settingsPopup.addListener(() => {
       showColourPicker = false;
     });
     
     if (!standalone) return;
-    initializeSettingsState();
     StandaloneStore.setStandalone(true);
   });
 </script>

src/interface/pages/settings/general.svelte

@@ -10,10 +10,9 @@
   import type { SettingsList } from "@/interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
-  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
 
   import { getAllPluginSettings } from "@/plugins"
-  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting } from "@/plugins/core/types"
+  import type { BooleanSetting, StringSetting, NumberSetting, SelectSetting, ButtonSetting, HotkeySetting, ComponentSetting } from "@/plugins/core/types"
 
   // Union type representing all possible settings
   type SettingType =
@@ -32,6 +31,11 @@
     (Omit<HotkeySetting, 'type'> & {
       type: 'hotkey',
       id: string
+    }) |
+    (Omit<ComponentSetting, 'type'> & {
+      type: 'component',
+      id: string,
+      component: any
     });
 
   interface Plugin {
@@ -55,7 +59,11 @@
       pluginSettingsValues[plugin.pluginId] = stored[storageKey] || {};
       
       for (const [key, setting] of Object.entries(plugin.settings)) {
-        if (pluginSettingsValues[plugin.pluginId][key] === undefined && setting.type !== 'button') {
+        if (
+          pluginSettingsValues[plugin.pluginId][key] === undefined &&
+          setting.type !== 'button' &&
+          setting.type !== 'component'
+        ) {
           pluginSettingsValues[plugin.pluginId][key] = setting.default;
         }
       }
@@ -268,6 +276,11 @@
                       value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                       onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
                     />
+                  {:else if setting.type === 'component'}
+                    {#if setting.component}
+                      {@const Component = setting.component}
+                      <Component />
+                    {/if}
                   {/if}
                 </div>
               </div>
@@ -308,9 +321,21 @@
           <p class="text-xs">Replace sensitive content with mock data</p>
         </div>
         <div>
-          <Button 
+          <Switch
-            onClick={() => hideSensitiveContent()}
+            state={$settingsState.hideSensitiveContent ?? false}
-            text="Hide"
+            onChange={(isOn: boolean) => settingsState.hideSensitiveContent = isOn}
+          />
+        </div>
+      </div>
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Mock Notices</h2>
+          <p class="text-xs">Use fake notice data on homepage instead of real data</p>
+        </div>
+        <div>
+          <Switch 
+            state={$settingsState.mockNotices ?? false} 
+            onChange={(isOn: boolean) => settingsState.mockNotices = isOn} 
           />
         </div>
       </div>

src/interface/pages/settings/shortcuts.svelte

@@ -6,6 +6,7 @@
   import Shortcuts from "@/seqta/content/links.json"
 
   let isLoaded = $state(false);
+  let fileInput = $state<HTMLInputElement | null>(null);
 
   onMount(async () => {
     // Wait for settingsState to be initialized
@@ -35,6 +36,25 @@
   let isFormVisible = $state(false);
   let newTitle = $state("");
   let newURL = $state("");
+  let newIcon = $state<string | null>(null);
+
+  function handleIconChange(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (file && file.type === "image/svg+xml") {
+      const reader = new FileReader();
+      reader.onload = () => {
+        newIcon = reader.result as string;
+      };
+      reader.readAsText(file);
+    }
+  }
+
+  const clearIcon = () => {
+    newIcon = null;
+    if (fileInput) {
+      fileInput.value = ""; // Clear the file input so the same file can be re-selected
+    }
+  };
 
   const toggleForm = () => {
     isFormVisible = !isFormVisible;
@@ -54,11 +74,13 @@
 
   const addNewCustomShortcut = () => {
     if (isValidTitle(newTitle) && isValidURL(newURL)) {
-      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
+      const icon = newIcon || newTitle[0];
+      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon };
       settingsState.customshortcuts = [...settingsState.customshortcuts, newShortcut];
 
       newTitle = "";
       newURL = "";
+      newIcon = null;
       isFormVisible = false;
     } else {
       alert("Please enter a valid title and URL.");
@@ -101,14 +123,56 @@
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.05, duration: 0.2 }}
-              class="w-full"
+              class="flex gap-2 w-full"
             >
-              <input
+                <input
-                class="p-2 my-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                  class="p-2 my-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
-                type="text"
+                  type="text"
-                placeholder="URL eg. https://google.com"
+                  placeholder="URL eg. https://google.com"
-                bind:value={newURL}
+                  bind:value={newURL}
-              />
+                />
+                <input
+                  bind:this={fileInput}
+                  class="p-2 w-full rounded-lg border-0 transition placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                  type="file"
+                  accept=".svg"
+                  onchange={handleIconChange}
+                  hidden
+                />
+                <button
+                  type="button"
+                  class="flex justify-between items-center p-2 my-2 text-left rounded-lg border border-dashed transition text-nowrap text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-700/50 hover:bg-zinc-200/50 dark:hover:bg-zinc-700/30 focus:bg-zinc-200/50 dark:focus:bg-zinc-600/50 border-zinc-300 dark:border-zinc-600"
+                  onclick={() => fileInput?.click()}
+                >
+                  {#if newIcon}
+                    <div class="flex overflow-hidden items-center">
+                      <div class="flex-shrink-0 mr-2 w-6 h-6">
+                        <img src={`data:image/svg+xml;base64,${btoa(newIcon)}`} alt="Selected Icon" class="object-contain w-full h-full" />
+                      </div>
+                      <span class="truncate">Selected Icon</span>
+                    </div>
+                    <span
+                      class="p-1 ml-2 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600"
+                      aria-label="Clear icon"
+                      role="button"
+                      tabindex="0"
+                      onclick={(event) => { event.stopPropagation(); clearIcon(); }}
+                      onkeydown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          clearIcon();
+                        }
+                      }}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </span>
+                  {:else}
+                    <span class="font-IconFamily">{ '\ued47' }</span>
+                    <span class="ml-2">SVG icon <span class="text-xs italic text-zinc-400 dark:text-zinc-500">(Optional)</span></span>
+                  {/if}
+                </button>
             </MotionDiv>
           </div>
         {/if}

src/interface/utils/themeImageHandlers.ts

@@ -1,9 +1,27 @@
 import type { LoadedCustomTheme } from "@/types/CustomThemes";
 
+/**
+ * Generates a random 9-character alphanumeric string to be used as a unique ID for images.
+ * This helps in identifying and managing custom images within a theme.
+ *
+ * @returns {string} A randomly generated unique ID string.
+ */
 export function generateImageId(): string {
   return Math.random().toString(36).substr(2, 9);
 }
 
+/**
+ * Handles the upload of a new custom image from a file input event.
+ * If a file is selected, it reads the file using FileReader, converts it to a Blob,
+ * generates a unique ID and a default variable name for it, and then adds this new image
+ * to the `CustomImages` array within the provided `theme` object.
+ *
+ * @param {Event} event The file input change event, typically from an `<input type="file">` element.
+ * @param {LoadedCustomTheme} theme The current theme object to which the new image will be added.
+ * @returns {Promise<LoadedCustomTheme> | LoadedCustomTheme} A Promise that resolves with the updated theme object
+ *                                                          containing the new image if a file was processed.
+ *                                                          Returns the original theme object synchronously if no file was selected.
+ */
 export function handleImageUpload(
   event: Event,
   theme: LoadedCustomTheme,
@@ -34,6 +52,16 @@ export function handleImageUpload(
   return theme;
 }
 
+/**
+ * Removes a custom image from the theme based on its ID.
+ * It filters out the image with the specified `imageId` from the `CustomImages` array
+ * in the `theme` object.
+ *
+ * @param {string} imageId The unique ID of the custom image to be removed.
+ * @param {LoadedCustomTheme} theme The current theme object from which the image will be removed.
+ * @returns {LoadedCustomTheme} A new theme object with the specified image removed from its `CustomImages` array.
+ *                              This function is synchronous.
+ */
 export function handleRemoveImage(
   imageId: string,
   theme: LoadedCustomTheme,
@@ -44,6 +72,17 @@ export function handleRemoveImage(
   } as LoadedCustomTheme;
 }
 
+/**
+ * Updates the CSS variable name associated with a specific custom image in the theme.
+ * It finds the image by `imageId` in the `CustomImages` array of the `theme` object
+ * and updates its `variableName` property.
+ *
+ * @param {string} imageId The unique ID of the custom image whose variable name is to be updated.
+ * @param {string} variableName The new CSS variable name to assign to the image.
+ * @param {LoadedCustomTheme} theme The current theme object containing the image to be updated.
+ * @returns {LoadedCustomTheme} A new theme object with the updated image variable name.
+ *                              This function is synchronous.
+ */
 export function handleImageVariableChange(
   imageId: string,
   variableName: string,
@@ -57,6 +96,17 @@ export function handleImageVariableChange(
   } as LoadedCustomTheme;
 }
 
+/**
+ * Handles the upload of a cover image for the theme from a file input event.
+ * If a file is selected, it reads the file using FileReader, converts it to a Blob,
+ * and then updates the `coverImage` property of the provided `theme` object with this new blob.
+ *
+ * @param {Event} event The file input change event, typically from an `<input type="file">` element.
+ * @param {LoadedCustomTheme} theme The current theme object whose cover image will be updated.
+ * @returns {Promise<LoadedCustomTheme>} A Promise that resolves with the updated theme object
+ *                                       containing the new cover image if a file was processed.
+ *                                       Returns a Promise resolving with the original theme object if no file was selected.
+ */
 export function handleCoverImageUpload(
   event: Event,
   theme: LoadedCustomTheme,

src/manifests/manifest.json

@@ -32,7 +32,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["resources/icons/*"],
+      "resources": ["resources/icons/*", "resources/update-image.webp"],
       "matches": ["*://*/*"]
     }
   ]

src/pageState.js

@@ -168,7 +168,7 @@ window.addEventListener("message", (event) => {
       case "setState":
         // Handle both function and object updates
         if (payload.updateFn) {
-          const updateFn = eval(`(${payload.updateFn})`);
+          const updateFn = new Function('return ' + payload.updateFn)();
           fiberInstance.setState(updateFn);
         } else {
           fiberInstance.setState(payload.updateObject);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,101 @@
+export function formatDate(dateStr: string, submitted?: boolean): string {
+  const d = new Date(dateStr);
+  const now = new Date();
+  const diffTime = d.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0 && !submitted) {
+    const overdueDays = Math.abs(diffDays);
+    if (overdueDays === 1) return "1 day overdue";
+    return `${overdueDays} days overdue`;
+  }
+
+  if (diffDays === 0) return "Today";
+
+  if (diffDays === 1) return "Tomorrow";
+
+  if (diffDays <= 7) {
+    const weekdayName = d.toLocaleDateString(undefined, { weekday: "long" });
+
+    return diffDays < 0 ? `Last ${weekdayName}` : weekdayName;
+  }
+
+  return d.toLocaleDateString(undefined, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
+  });
+}
+
+export function determineStatus(item: any): string {
+  if (
+    item.status === "MARKS_RELEASED" ||
+    item.grade ||
+    (item.percentage !== undefined && item.percentage !== null) ||
+    (item.achieved !== undefined && item.achieved !== null)
+  ) {
+    return "MARKS_RELEASED";
+  }
+
+  const completedKey = "betterseqta-completed-assessments";
+  const completed = JSON.parse(localStorage.getItem(completedKey) || "[]");
+  if (completed.includes(item.id)) {
+    return "MARKS_RELEASED";
+  }
+
+  if (item.submitted) {
+    return "SUBMITTED";
+  }
+
+  const now = new Date();
+  const due = new Date(item.due);
+
+  const diffTime = due.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0) {
+    return "OVERDUE";
+  }
+
+  if (diffDays <= 7) {
+    return "DUE_SOON";
+  }
+
+  return "UPCOMING";
+}
+
+export function getGradeValue(assessment: any): number | null {
+  if (
+    assessment.results?.percentage !== undefined &&
+    assessment.results.percentage !== null
+  ) {
+    return assessment.results.percentage;
+  }
+
+  if (assessment.percentage !== undefined && assessment.percentage !== null) {
+    return assessment.percentage;
+  }
+
+  if (
+    assessment.achieved !== undefined &&
+    assessment.outOf !== undefined &&
+    assessment.achieved !== null &&
+    assessment.outOf !== null &&
+    assessment.outOf > 0
+  ) {
+    return (assessment.achieved / assessment.outOf) * 100;
+  }
+
+  if (
+    assessment.results?.achieved !== undefined &&
+    assessment.results?.outOf !== undefined &&
+    assessment.results.achieved !== null &&
+    assessment.results.outOf !== null &&
+    assessment.results.outOf > 0
+  ) {
+    return (assessment.results.achieved / assessment.results.outOf) * 100;
+  }
+
+  return null;
+}

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

@@ -24,7 +24,6 @@
     searchHotkey: string
   }>();
 
-  // Make searchHotkey reactive to setting changes
   let currentSearchHotkey = $state(initialSearchHotkey);
 
   let commandsFuse = $state<Fuse<StaticCommandItem>>();
@@ -177,7 +176,7 @@
     isLoading = false;
   };
 
-  const debouncedPerformSearch = debounce(performSearch, 10);
+  const debouncedPerformSearch = debounce(performSearch, 20);
 
   $effect(() => {
     if (commandPalleteOpen) {

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

@@ -126,6 +126,15 @@ const globalSearchPlugin: Plugin<typeof settings> = {
 
     initVectorSearch();
 
+    // Warm up vector worker in background to improve initial response time
+    setTimeout(async () => {
+      try {
+        VectorWorkerManager.getInstance();
+      } catch (error) {
+        console.warn("[Global Search] Vector worker warm-up failed:", error);
+      }
+    }, 1000);
+
     // Add debug helpers to window for troubleshooting
     // @ts-ignore
     window.globalSearchDebug = {

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

@@ -8,7 +8,7 @@ import browser from "webextension-polyfill";
 export function mountSearchBar(
   titleElement: Element,
   api: any,
-  appRef: { current: any },
+  appRef: { current: any; storageChangeHandler?: any },
 ) {
   if (titleElement.querySelector(".search-trigger")) {
     return;
@@ -49,6 +49,9 @@ export function mountSearchBar(
 
   browser.storage.onChanged.addListener(handleStorageChange);
 
+  // Store reference to cleanup function for proper removal
+  appRef.storageChangeHandler = handleStorageChange;
+
   const searchRoot = document.createElement("div");
   document.body.appendChild(searchRoot);
   const searchRootShadow = searchRoot.attachShadow({ mode: "open" });
@@ -69,7 +72,7 @@ export function mountSearchBar(
   }
 }
 
-export function cleanupSearchBar(appRef: { current: any }) {
+export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?: any }) {
   if (appRef.current) {
     try {
       unmount(appRef.current);
@@ -94,6 +97,8 @@ export function cleanupSearchBar(appRef: { current: any }) {
   // Clean up vector worker
   VectorWorkerManager.getInstance().terminate();
 
-  // Remove storage listener
+  if (appRef.storageChangeHandler) {
-  browser.storage.onChanged.removeListener(() => {});
+    browser.storage.onChanged.removeListener(appRef.storageChangeHandler);
+    appRef.storageChangeHandler = null;
+  }
 }

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

@@ -3,19 +3,22 @@ const META_STORE = "meta";
 const VERSION_KEY = "betterseqta-index-version";
 
 let dbPromise: Promise<IDBDatabase> | null = null;
+let cachedDb: IDBDatabase | null = null;
 
-// Get the current version from localStorage or start at 1
 function getCurrentVersion(): number {
   const storedVersion = localStorage.getItem(VERSION_KEY);
   return storedVersion ? parseInt(storedVersion, 10) : 1;
 }
 
-// Update the version in localStorage
 function updateVersion(version: number) {
   localStorage.setItem(VERSION_KEY, version.toString());
 }
 
 function openDB(): Promise<IDBDatabase> {
+  if (cachedDb && cachedDb.version >= getCurrentVersion()) {
+    return Promise.resolve(cachedDb);
+  }
+
   if (dbPromise) return dbPromise;
 
   const currentVersion = getCurrentVersion();
@@ -26,8 +29,11 @@ function openDB(): Promise<IDBDatabase> {
     try {
       request = indexedDB.open(DB_NAME, currentVersion);
     } catch (e) {
-      // If there's a version error, try to delete the database and start fresh
       console.warn("Database version conflict, recreating database...");
+      if (cachedDb) {
+        cachedDb.close();
+        cachedDb = null;
+      }
       indexedDB.deleteDatabase(DB_NAME);
       localStorage.removeItem(VERSION_KEY);
       request = indexedDB.open(DB_NAME, 1);
@@ -38,22 +44,37 @@ function openDB(): Promise<IDBDatabase> {
       const db = request.result;
       const existingStores = Array.from(db.objectStoreNames);
 
-      // Always ensure META_STORE exists
       if (!existingStores.includes(META_STORE)) {
         db.createObjectStore(META_STORE);
       }
 
-      // Update version in localStorage to match the database
       updateVersion(event.newVersion || 1);
     };
 
-    request.onsuccess = () => resolve(request.result);
+    request.onsuccess = () => {
+      if (cachedDb && cachedDb !== request.result) {
+        cachedDb.close();
+      }
+      cachedDb = request.result;
+
+      cachedDb.onclose = () => {
+        cachedDb = null;
+        dbPromise = null;
+      };
+
+      resolve(request.result);
+    };
 
     request.onerror = () => {
       console.error("Error opening database:", request.error);
-      // If there's an error, try to recover by deleting and recreating
+
+      if (cachedDb) {
+        cachedDb.close();
+        cachedDb = null;
+      }
       indexedDB.deleteDatabase(DB_NAME);
       localStorage.removeItem(VERSION_KEY);
+      dbPromise = null;
       reject(request.error);
     };
   });
@@ -64,11 +85,12 @@ function openDB(): Promise<IDBDatabase> {
 async function getStore(store: string, mode: IDBTransactionMode = "readonly") {
   const db = await openDB();
 
-  // Create store dynamically if needed
   if (!db.objectStoreNames.contains(store)) {
-    db.close();
     await upgradeDB(store);
-    return getStore(store, mode);
+
+    const upgradedDb = await openDB();
+    const tx = upgradedDb.transaction(store, mode);
+    return tx.objectStore(store);
   }
 
   const tx = db.transaction(store, mode);
@@ -80,11 +102,11 @@ function upgradeDB(newStore: string): Promise<void> {
     const currentVersion = getCurrentVersion();
     const newVersion = currentVersion + 1;
 
-    // Close any existing connections
+    if (cachedDb) {
-    if (dbPromise) {
+      cachedDb.close();
-      dbPromise.then((db) => db.close());
+      cachedDb = null;
-      dbPromise = null;
     }
+    dbPromise = null;
 
     const request = indexedDB.open(DB_NAME, newVersion);
 
@@ -93,11 +115,18 @@ function upgradeDB(newStore: string): Promise<void> {
       if (!db.objectStoreNames.contains(newStore)) {
         db.createObjectStore(newStore);
       }
-      // Update version in localStorage
+
       updateVersion(event.newVersion || newVersion);
     };
 
     request.onsuccess = () => {
+      cachedDb = request.result;
+
+      cachedDb.onclose = () => {
+        cachedDb = null;
+        dbPromise = null;
+      };
+
       dbPromise = Promise.resolve(request.result);
       resolve();
     };
@@ -183,11 +212,17 @@ export async function clear(store: string): Promise<void> {
   }
 }
 
-// Helper function to reset the database if needed
 export async function resetDatabase(): Promise<void> {
+  if (cachedDb) {
+    cachedDb.close();
+    cachedDb = null;
+  }
+
   if (dbPromise) {
-    const db = await dbPromise;
+    try {
-    db.close();
+      const db = await dbPromise;
+      db.close();
+    } catch (e) {}
     dbPromise = null;
   }
 

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

@@ -4,6 +4,7 @@ import { renderComponentMap } from "./renderComponents";
 import type { IndexItem, Job, JobContext } from "./types";
 import { VectorWorkerManager } from "./worker/vectorWorkerManager";
 import { loadDynamicItems } from "../utils/dynamicItems";
+import { getVectorizedItemIds } from "./utils";
 
 const META_STORE = "meta";
 const LOCK_KEY = "bsq-indexer-lock";
@@ -276,89 +277,98 @@ export async function runIndexing(): Promise<void> {
     );
   }
 
-  if (!hasStreamingJobs) {
+  let allItemsInPrimaryStores = await loadAllStoredItems();
-    const allItemsInPrimaryStores = await loadAllStoredItems();
 
-    if (allItemsInPrimaryStores.length > 0) {
+  if (allItemsInPrimaryStores.length > 0) {
+    console.debug(
+      `%c[Indexer] Checking ${allItemsInPrimaryStores.length} items for vectorization...`,
+      "color: #4ea1ff",
+    );
+    
+    // Pre-filter items to avoid initializing worker if nothing new
+    const vectorizedItemIds = await getVectorizedItemIds();
+    const newItemsToVectorize = allItemsInPrimaryStores.filter(item => !vectorizedItemIds.has(item.id));
+    
+    if (newItemsToVectorize.length > 0) {
       console.debug(
-        `%c[Indexer] Sending ${allItemsInPrimaryStores.length} items from primary stores to worker for vectorization check...`,
+        `%c[Indexer] Sending ${newItemsToVectorize.length} new items to worker for vectorization (${allItemsInPrimaryStores.length - newItemsToVectorize.length} already vectorized)`,
         "color: #4ea1ff",
       );
-      dispatchProgress(completedJobs, totalSteps, true, "Starting vectorization of stored items");
+      dispatchProgress(completedJobs, totalSteps, true, "Starting vectorization of new items");
 
       try {
         const workerManager = VectorWorkerManager.getInstance();
-        await workerManager.processItems(allItemsInPrimaryStores, (progress) => {
+        await workerManager.processItems(newItemsToVectorize, (progress) => {
-          let detailMessage = progress.message || "";
+        let detailMessage = progress.message || "";
-          if (
+        if (
-            progress.status === "processing" &&
+          progress.status === "processing" &&
-            progress.total &&
+          progress.total &&
-            progress.processed !== undefined
+          progress.processed !== undefined
-          ) {
+        ) {
-            detailMessage = `Vectorizing: ${progress.processed} / ${progress.total}`;
+          detailMessage = `Vectorizing: ${progress.processed} / ${progress.total}`;
-          } else if (progress.status === "complete") {
+        } else if (progress.status === "complete") {
-            detailMessage = "Vectorization complete";
+          detailMessage = "Vectorization complete";
-            completedJobs++;
+          completedJobs++;
-            dispatchProgress(
+          dispatchProgress(
-              completedJobs,
+            completedJobs,
-              totalSteps,
+            totalSteps,
-              false,
+            false,
-              "Indexing finished",
+            "Indexing finished",
-              detailMessage
+            detailMessage
-            );
+          );
-          } else if (progress.status === "error") {
+        } else if (progress.status === "error") {
-            detailMessage = `Vectorization error: ${progress.message}`;
+          detailMessage = `Vectorization error: ${progress.message}`;
-            dispatchProgress(
+          dispatchProgress(
-              completedJobs,
+            completedJobs,
-              totalSteps,
+            totalSteps,
-              false,
+            false,
-              "Vectorization failed",
+            "Vectorization failed",
-              detailMessage,
+            detailMessage,
-            );
+          );
-          } else if (progress.status === "started") {
+        } else if (progress.status === "started") {
-            detailMessage = `Vectorization started for ${progress.total} items`;
+          detailMessage = `Vectorization started for ${progress.total} items`;
-          } else if (progress.status === "cancelled") {
+        } else if (progress.status === "cancelled") {
-            detailMessage = `Vectorization cancelled: ${progress.message}`;
+          detailMessage = `Vectorization cancelled: ${progress.message}`;
-            dispatchProgress(
+          dispatchProgress(
-              completedJobs,
+            completedJobs,
-              totalSteps,
+            totalSteps,
-              false,
+            false,
-              "Vectorization cancelled",
+            "Vectorization cancelled",
-              detailMessage,
+            detailMessage,
-            );
+          );
-          }
+        }
 
-          if (progress.status !== "complete" && progress.status !== "error" && progress.status !== "cancelled") {
+        if (progress.status !== "complete" && progress.status !== "error" && progress.status !== "cancelled") {
-              dispatchProgress(
+            dispatchProgress(
-                completedJobs,
+              completedJobs,
-                totalSteps,
+              totalSteps,
-                true,
+              true,
-                "Vectorization in progress",
+              "Vectorization in progress",
-                detailMessage,
+              detailMessage,
-              );
+            );
-          }
+        }
-        });
+      });
-        console.debug(
+      console.debug(
-          "%c[Indexer] Vectorization task for stored items sent to worker.",
+        "%c[Indexer] Vectorization task for stored items sent to worker.",
-          "color: green",
+        "color: green",
-        );
+      );
-      } catch (error) {
+    } catch (error) {
-        console.error(
+      console.error(
-          `%c[Indexer] ❌ Failed to send items to vector worker:`,
+        `%c[Indexer] ❌ Failed to send items to vector worker:`,
-          "color: red",
+        "color: red",
-          error,
+        error,
-        );
+      );
-        dispatchProgress(
+      dispatchProgress(
-          completedJobs,
+        completedJobs,
-          totalSteps,
+        totalSteps,
-          false,
+        false,
-          "Vectorization failed",
+        "Vectorization failed",
-          String(error),
+        String(error),
-        );
+      );
-      }
+    }
     } else {
       console.debug(
-        "%c[Indexer] No items found in primary stores to send for vectorization.",
+        `%c[Indexer] All ${allItemsInPrimaryStores.length} items are already vectorized, skipping worker initialization.`,
         "color: gray",
       );
       completedJobs++;
@@ -366,26 +376,26 @@ export async function runIndexing(): Promise<void> {
         completedJobs,
         totalSteps,
         false,
-        "Indexing finished (no items for vectorization)",
+        "Indexing finished (all items already vectorized)",
       );
     }
   } else {
     console.debug(
-      "%c[Indexer] Skipping bulk vectorization - streaming jobs will handle vectorization",
+      "%c[Indexer] No items found in primary stores to send for vectorization.",
-      "color: #4ea1ff",
+      "color: gray",
     );
     completedJobs++;
     dispatchProgress(
       completedJobs,
       totalSteps,
       false,
-      "Indexing finished (streaming vectorization active)",
+      "Indexing finished (no items for vectorization)",
     );
   }
 
   stopHeartbeat();
 
-  const allItemsInPrimaryStores = await loadAllStoredItems();
+  allItemsInPrimaryStores = await loadAllStoredItems();
   allItemsInPrimaryStores.forEach(item => {
     const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
     if (jobDef) {

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

@@ -8,18 +8,20 @@ import { renderComponentMap } from "../renderComponents";
 import { jobs } from "../jobs";
 
 const RATE_LIMIT_CONFIG = {
-  minDelay: 50,
+  minDelay: 30,
-  maxDelay: 5000,
+  maxDelay: 3000,
-  baseDelay: 200,
+  baseDelay: 150,
-  backoffMultiplier: 1.5,
+  backoffMultiplier: 1.3,
   maxRetries: 3,
   adaptiveBatchSize: true,
-  minBatchSize: 10,
+  minBatchSize: 15,
-  maxBatchSize: 100,
+  maxBatchSize: 150,
-  baseBatchSize: 50,
+  baseBatchSize: 75,
-  vectorBatchSize: 5,
+  vectorBatchSize: 10,
-  parallelRequests: 5,
+  parallelRequests: 8,
-  parallelDelay: 100,
+  parallelDelay: 50,
+  circuitBreakerThreshold: 5,
+  circuitBreakerResetTime: 30000,
 };
 
 interface MessagesProgress {
@@ -33,6 +35,9 @@ interface MessagesProgress {
   processedIds: string[];
   streamingStarted: boolean;
   totalEstimated: number;
+  circuitBreakerOpen: boolean;
+  circuitBreakerOpenTime: number;
+  consecutiveFailures: number;
 }
 
 const fetchMessages = async (offset = 0, limit = 100) => {
@@ -99,50 +104,38 @@ function calculateAdaptiveDelay(
   progress: MessagesProgress,
   responseTime: number,
 ): number {
-  const { currentDelay, failedRequests, lastSuccessTime } = progress;
+  const {
+    currentDelay,
+    failedRequests,
+    lastSuccessTime,
+    circuitBreakerOpen,
+    consecutiveFailures,
+  } = progress;
   const timeSinceLastSuccess = Date.now() - lastSuccessTime;
 
-  if (failedRequests > 0 || responseTime > 2000) {
+  if (circuitBreakerOpen) {
+    return RATE_LIMIT_CONFIG.maxDelay;
+  }
+
+  if (consecutiveFailures > 2 || failedRequests > 3 || responseTime > 3000) {
     return Math.min(
-      currentDelay * RATE_LIMIT_CONFIG.backoffMultiplier,
+      currentDelay *
+        (RATE_LIMIT_CONFIG.backoffMultiplier + consecutiveFailures * 0.2),
       RATE_LIMIT_CONFIG.maxDelay,
     );
   }
 
-  if (responseTime < 500 && timeSinceLastSuccess > 10000) {
+  if (
-    return Math.max(currentDelay * 0.8, RATE_LIMIT_CONFIG.minDelay);
+    responseTime < 300 &&
+    timeSinceLastSuccess > 5000 &&
+    consecutiveFailures === 0
+  ) {
+    return Math.max(currentDelay * 0.7, RATE_LIMIT_CONFIG.minDelay);
   }
 
   return currentDelay;
 }
 
-function calculateAdaptiveBatchSize(
-  progress: MessagesProgress,
-  responseTime: number,
-): number {
-  if (!RATE_LIMIT_CONFIG.adaptiveBatchSize) {
-    return progress.currentBatchSize;
-  }
-
-  const { currentBatchSize, failedRequests } = progress;
-
-  if (failedRequests > 2 || responseTime > 3000) {
-    return Math.max(
-      Math.floor(currentBatchSize * 0.7),
-      RATE_LIMIT_CONFIG.minBatchSize,
-    );
-  }
-
-  if (failedRequests === 0 && responseTime < 1000) {
-    return Math.min(
-      Math.floor(currentBatchSize * 1.2),
-      RATE_LIMIT_CONFIG.maxBatchSize,
-    );
-  }
-
-  return currentBatchSize;
-}
-
 async function estimateMessageCount(): Promise<number> {
   try {
     const firstBatch = await fetchMessages(0, 100);
@@ -157,6 +150,73 @@ async function estimateMessageCount(): Promise<number> {
   }
 }
 
+function calculateAdaptiveBatchSize(
+  progress: MessagesProgress,
+  responseTime: number,
+): number {
+  if (!RATE_LIMIT_CONFIG.adaptiveBatchSize) {
+    return progress.currentBatchSize;
+  }
+
+  const {
+    currentBatchSize,
+    failedRequests,
+    circuitBreakerOpen,
+    consecutiveFailures,
+  } = progress;
+
+  if (circuitBreakerOpen) {
+    return RATE_LIMIT_CONFIG.minBatchSize;
+  }
+
+  if (consecutiveFailures > 1 || failedRequests > 2 || responseTime > 2500) {
+    return Math.max(
+      Math.floor(currentBatchSize * 0.6),
+      RATE_LIMIT_CONFIG.minBatchSize,
+    );
+  }
+
+  if (failedRequests === 0 && responseTime < 800 && consecutiveFailures === 0) {
+    return Math.min(
+      Math.floor(currentBatchSize * 1.4),
+      RATE_LIMIT_CONFIG.maxBatchSize,
+    );
+  }
+
+  return currentBatchSize;
+}
+
+function checkCircuitBreaker(progress: MessagesProgress): boolean {
+  const now = Date.now();
+
+  if (
+    !progress.circuitBreakerOpen &&
+    progress.consecutiveFailures >= RATE_LIMIT_CONFIG.circuitBreakerThreshold
+  ) {
+    progress.circuitBreakerOpen = true;
+    progress.circuitBreakerOpenTime = now;
+    console.warn(
+      `[Messages job] Circuit breaker opened due to ${progress.consecutiveFailures} consecutive failures`,
+    );
+    return true;
+  }
+
+  if (
+    progress.circuitBreakerOpen &&
+    now - progress.circuitBreakerOpenTime >
+      RATE_LIMIT_CONFIG.circuitBreakerResetTime
+  ) {
+    progress.circuitBreakerOpen = false;
+    progress.consecutiveFailures = 0;
+    console.info(
+      `[Messages job] Circuit breaker closed after ${RATE_LIMIT_CONFIG.circuitBreakerResetTime}ms`,
+    );
+    return false;
+  }
+
+  return progress.circuitBreakerOpen;
+}
+
 async function processMessagesInParallel(
   messages: any[],
   existingIds: Set<string>,
@@ -173,7 +233,6 @@ async function processMessagesInParallel(
   let consecutiveExisting = 0;
   const updatedProgress = { ...progress };
 
-  // Filter out messages older than 2 years
   const twoYearsAgo = Date.now() - 2 * 365 * 24 * 60 * 60 * 1000;
   let shouldStop = false;
 
@@ -181,9 +240,8 @@ async function processMessagesInParallel(
     const id = msg.id.toString();
     const messageDate = new Date(msg.date).getTime();
 
-    // If we encounter a message older than 2 years, we should stop processing
-    // since messages are sorted by date descending
     if (messageDate < twoYearsAgo) {
+      //! older than 2 years ago
       shouldStop = true;
       return false;
     }
@@ -320,6 +378,9 @@ export const messagesJob: Job = {
       processedIds: [],
       streamingStarted: false,
       totalEstimated: 0,
+      circuitBreakerOpen: false,
+      circuitBreakerOpenTime: 0,
+      consecutiveFailures: 0,
     };
 
     const existingIds = new Set((await ctx.getStoredItems()).map((i) => i.id));
@@ -451,6 +512,14 @@ export const messagesJob: Job = {
     }
 
     while (!progress.done) {
+      if (checkCircuitBreaker(progress)) {
+        console.warn(
+          "[Messages job] Circuit breaker is open, skipping processing",
+        );
+        await delay(RATE_LIMIT_CONFIG.maxDelay);
+        continue;
+      }
+
       await delay(progress.currentDelay);
       requestStartTime = Date.now();
 
@@ -459,6 +528,8 @@ export const messagesJob: Job = {
         list = await fetchMessages(progress.offset, progress.currentBatchSize);
         const responseTime = Date.now() - requestStartTime;
 
+        progress.consecutiveFailures = 0;
+
         progress.currentDelay = calculateAdaptiveDelay(progress, responseTime);
         progress.currentBatchSize = calculateAdaptiveBatchSize(
           progress,
@@ -467,6 +538,7 @@ export const messagesJob: Job = {
       } catch (e) {
         console.error("[Messages job] list fetch failed:", e);
         progress.failedRequests++;
+        progress.consecutiveFailures++;
         progress.currentDelay = Math.min(
           progress.currentDelay * RATE_LIMIT_CONFIG.backoffMultiplier,
           RATE_LIMIT_CONFIG.maxDelay,
@@ -479,6 +551,7 @@ export const messagesJob: Job = {
 
       if (list.status !== "200") {
         progress.failedRequests++;
+        progress.consecutiveFailures++;
 
         progress.processedIds = Array.from(processedIdsSet);
         await ctx.setProgress(progress);
@@ -507,7 +580,6 @@ export const messagesJob: Job = {
 
       itemsToStream.push(...processedItems);
 
-      // Update consecutive existing counter
       consecutiveExisting = newConsecutiveExisting;
       if (consecutiveExisting >= 20) {
         progress.done = true;
@@ -529,14 +601,17 @@ export const messagesJob: Job = {
         }
       }
 
-      // Dispatch incremental search update if we processed new items
       if (processedItems.length > 0) {
         try {
           const currentItems = await loadAllStoredItems();
-          currentItems.forEach(item => {
+          currentItems.forEach((item) => {
-            const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
+            const jobDef =
+              jobs[item.category] ||
+              Object.values(jobs).find((j) => j.id === item.category) ||
+              jobs[item.renderComponentId];
             if (jobDef) {
-              const renderComponent = renderComponentMap[jobDef.renderComponentId];
+              const renderComponent =
+                renderComponentMap[jobDef.renderComponentId];
               if (renderComponent) {
                 item.renderComponent = renderComponent;
               }
@@ -545,11 +620,21 @@ export const messagesJob: Job = {
             }
           });
           loadDynamicItems(currentItems);
-          window.dispatchEvent(new CustomEvent("dynamic-items-updated", { 
+          window.dispatchEvent(
-            detail: { incremental: true, jobId: "messages", newItemCount: processedItems.length, streaming: true } 
+            new CustomEvent("dynamic-items-updated", {
-          }));
+              detail: {
+                incremental: true,
+                jobId: "messages",
+                newItemCount: processedItems.length,
+                streaming: true,
+              },
+            }),
+          );
         } catch (error) {
-          console.warn("[Messages job] Failed to dispatch incremental search update:", error);
+          console.warn(
+            "[Messages job] Failed to dispatch incremental search update:",
+            error,
+          );
         }
       }
 
@@ -596,6 +681,9 @@ export const messagesJob: Job = {
         processedIds: [],
         streamingStarted: false,
         totalEstimated: 0,
+        circuitBreakerOpen: false,
+        circuitBreakerOpenTime: 0,
+        consecutiveFailures: 0,
       });
     } else {
       progress.processedIds = Array.from(processedIdsSet);

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

@@ -309,10 +309,7 @@ export const notificationsJob: Job = {
           await delay(NOTIFICATIONS_RATE_LIMIT.batchDelay);
         }
 
-        const { success, item } = await processNotification(
+        const { success, item } = await processNotification(notif, ctx);
-          notif,
-          ctx,
-        );
         if (!success) {
           if (progress.retryQueue.length < 10) {
             progress.retryQueue.push(notif.notificationID);
@@ -375,23 +372,38 @@ export const notificationsJob: Job = {
         if (items.length > 0) {
           try {
             const currentItems = await loadAllStoredItems();
-            currentItems.forEach(item => {
+            currentItems.forEach((item) => {
-              const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
+              const jobDef =
+                jobs[item.category] ||
+                Object.values(jobs).find((j) => j.id === item.category) ||
+                jobs[item.renderComponentId];
               if (jobDef) {
-                const renderComponent = renderComponentMap[jobDef.renderComponentId];
+                const renderComponent =
+                  renderComponentMap[jobDef.renderComponentId];
                 if (renderComponent) {
                   item.renderComponent = renderComponent;
                 }
               } else if (renderComponentMap[item.renderComponentId]) {
-                item.renderComponent = renderComponentMap[item.renderComponentId];
+                item.renderComponent =
+                  renderComponentMap[item.renderComponentId];
               }
             });
             loadDynamicItems(currentItems);
-            window.dispatchEvent(new CustomEvent("dynamic-items-updated", { 
+            window.dispatchEvent(
-              detail: { incremental: true, jobId: "notifications", newItemCount: items.length, streaming: true } 
+              new CustomEvent("dynamic-items-updated", {
-            }));
+                detail: {
+                  incremental: true,
+                  jobId: "notifications",
+                  newItemCount: items.length,
+                  streaming: true,
+                },
+              }),
+            );
           } catch (error) {
-            console.warn("[Notifications job] Failed to dispatch incremental search update:", error);
+            console.warn(
+              "[Notifications job] Failed to dispatch incremental search update:",
+              error,
+            );
           }
         }
       }

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

@@ -1,3 +1,58 @@
+/**
+ * Check which items are already vectorized in embeddia's IndexedDB
+ * Returns a Set of item IDs that are already indexed
+ */
+export async function getVectorizedItemIds(): Promise<Set<string>> {
+  return new Promise((resolve) => {
+    const request = indexedDB.open("embeddiaDB");
+    
+    request.onerror = () => {
+      console.debug("Could not open embeddiaDB, assuming no items are vectorized");
+      resolve(new Set());
+    };
+    
+    request.onsuccess = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      
+      if (!db.objectStoreNames.contains("embeddiaObjectStore")) {
+        console.debug("embeddiaObjectStore not found, assuming no items are vectorized");
+        db.close();
+        resolve(new Set());
+        return;
+      }
+      
+      try {
+        const transaction = db.transaction(["embeddiaObjectStore"], "readonly");
+        const store = transaction.objectStore("embeddiaObjectStore");
+        const getAllRequest = store.getAllKeys();
+        
+        getAllRequest.onsuccess = () => {
+          const vectorizedIds = new Set<string>();
+          getAllRequest.result.forEach(key => {
+            if (typeof key === 'string') {
+              vectorizedIds.add(key);
+            }
+          });
+          
+          console.debug(`Found ${vectorizedIds.size} already vectorized items in embeddia DB`);
+          db.close();
+          resolve(vectorizedIds);
+        };
+        
+        getAllRequest.onerror = () => {
+          console.warn("Error reading vectorized item keys, assuming no items are vectorized");
+          db.close();
+          resolve(new Set());
+        };
+      } catch (error) {
+        console.warn("Error accessing embeddia store, assuming no items are vectorized:", error);
+        db.close();
+        resolve(new Set());
+      }
+    };
+  });
+}
+
 export function htmlToPlainText(rawHtml: string): string {
   const parser = new DOMParser();
   const doc = parser.parseFromString(rawHtml, "text/html");

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

@@ -4,7 +4,7 @@ import type { IndexItem } from "../types";
 let vectorIndex: EmbeddingIndex | null = null;
 let isInitialized = false;
 let currentAbortController: AbortController | null = null;
-let loadedItemIds = new Set<string>(); // Track loaded items to prevent duplicates
+let loadedItemIds = new Set<string>();
 
 let streamingSession: {
   isActive: boolean;
@@ -26,15 +26,12 @@ async function initWorker() {
     await initializeModel();
     vectorIndex = new EmbeddingIndex([]);
 
-    // Load existing items but track them to prevent duplicates
     const stored = await vectorIndex.getAllObjectsFromIndexedDB();
     if (stored.length > 0) {
       console.debug(`Found ${stored.length} existing items in IndexedDB`);
 
-      // Clear any existing items from memory first
       loadedItemIds.clear();
 
-      // Add items and track their IDs
       stored.forEach((item) => {
         if (item.id && !loadedItemIds.has(item.id)) {
           vectorIndex!.add(item);
@@ -168,7 +165,6 @@ async function processStreamingItems() {
       streamingSession.batchSize,
     );
 
-    // Use our tracking set for more efficient deduplication
     const unprocessedItems = batchToProcess.filter((item) => {
       return item.id && !loadedItemIds.has(item.id);
     });
@@ -190,12 +186,12 @@ async function processStreamingItems() {
       try {
         successfullyVectorized.forEach((item) => {
           vectorIndex!.add(item);
-          loadedItemIds.add(item.id); // Track the added item
+          loadedItemIds.add(item.id);
         });
 
         if (
-          streamingSession.totalProcessed % (streamingSession.batchSize * 15) ===
+          streamingSession.totalProcessed % 50 === 0 ||
-          0
+          loadedItemIds.size % 200 === 0
         ) {
           await vectorIndex!.saveIndex("indexedDB");
           console.debug(
@@ -328,7 +324,6 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
     }
   }
 
-  // Use our tracking set for more efficient deduplication
   const unprocessedItems = items.filter((item) => {
     if (signal.aborted) return false;
     return item.id && !loadedItemIds.has(item.id);
@@ -347,15 +342,22 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
   }
 
   if (unprocessedItems.length === 0) {
-    console.debug(`No new items to process. ${loadedItemIds.size} items already in index.`);
+    console.debug(
+      `No new items to process. ${loadedItemIds.size} items already in index.`,
+    );
     self.postMessage({
       type: "progress",
-      data: { status: "complete", message: `No new items to process (${loadedItemIds.size} items already indexed)` },
+      data: {
+        status: "complete",
+        message: `No new items to process (${loadedItemIds.size} items already indexed)`,
+      },
     });
     return;
   }
 
-  console.debug(`Starting processing of ${unprocessedItems.length} items (${items.length - unprocessedItems.length} already processed).`);
+  console.debug(
+    `Starting processing of ${unprocessedItems.length} items (${items.length - unprocessedItems.length} already processed).`,
+  );
   self.postMessage({
     type: "progress",
     data: {
@@ -402,7 +404,7 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
       try {
         successfullyVectorized.forEach((item) => {
           vectorIndex!.add(item);
-          loadedItemIds.add(item.id); // Track the added item
+          loadedItemIds.add(item.id);
         });
       } catch (e) {
         console.error("Error adding batch to index:", e);
@@ -425,15 +427,22 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
       return;
     }
 
-    try {
+    if (
-      await vectorIndex!.saveIndex("indexedDB");
+      (i / BATCH_SIZE + 1) % 3 === 0 ||
-      console.debug(`Saved index after processing batch ${i / BATCH_SIZE + 1} (${loadedItemIds.size} total unique items)`);
+      i + BATCH_SIZE >= unprocessedItems.length
-    } catch (e) {
+    ) {
-      console.error("Error saving index batch:", e);
+      try {
-      self.postMessage({
+        await vectorIndex!.saveIndex("indexedDB");
-        type: "progress",
+        console.debug(
-        data: { status: "error", message: `Error saving index batch: ${e}` },
+          `Saved index after processing batch ${i / BATCH_SIZE + 1} (${loadedItemIds.size} total unique items)`,
-      });
+        );
+      } catch (e) {
+        console.error("Error saving index batch:", e);
+        self.postMessage({
+          type: "progress",
+          data: { status: "error", message: `Error saving index batch: ${e}` },
+        });
+      }
     }
 
     processedCount += batch.length;
@@ -448,7 +457,9 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
     });
   }
 
-  console.debug(`Processing complete. Total unique items in index: ${loadedItemIds.size}`);
+  console.debug(
+    `Processing complete. Total unique items in index: ${loadedItemIds.size}`,
+  );
   self.postMessage({
     type: "progress",
     data: {
@@ -463,19 +474,15 @@ async function processItems(items: IndexItem[], signal: AbortSignal) {
 async function resetWorker() {
   console.debug("Resetting vector worker state...");
 
-  // Clear tracking
   loadedItemIds.clear();
 
-  // Reset streaming session
   if (streamingSession?.isActive) {
     streamingSession.isActive = false;
     streamingSession = null;
   }
 
-  // Reset vector index
   if (vectorIndex) {
     try {
-      // Save current state before reset
       await vectorIndex.saveIndex("indexedDB");
       console.debug("Saved index before reset");
     } catch (e) {
@@ -483,13 +490,14 @@ async function resetWorker() {
     }
   }
 
-  // Reinitialize
   isInitialized = false;
   vectorIndex = null;
 
   await initWorker();
 
-  console.debug(`Vector worker reset complete. Loaded ${loadedItemIds.size} items.`);
+  console.debug(
+    `Vector worker reset complete. Loaded ${loadedItemIds.size} items.`,
+  );
 
   self.postMessage({
     type: "progress",

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

@@ -15,6 +15,9 @@ export class VectorWorkerManager {
   private isInitialized = false;
   private readyPromise: Promise<void> | null = null;
   private progressCallback: ProgressCallback | null = null;
+  private initializationMutex = false;
+  private idleTimer: NodeJS.Timeout | null = null;
+  private unloadTimer: NodeJS.Timeout | null = null;
 
   private streamingSession: {
     isActive: boolean;
@@ -23,7 +26,9 @@ export class VectorWorkerManager {
     batchBuffer: IndexItem[];
     batchSize: number;
     flushTimer: NodeJS.Timeout | null;
-    jobId?: string; // Track which job owns the session
+    jobId?: string;
+    inactivityTimer: NodeJS.Timeout | null;
+    lastActivityTime: number;
   } | null = null;
 
   private constructor() {}
@@ -43,7 +48,6 @@ export class VectorWorkerManager {
     console.debug("Lazy-loading vector worker...");
 
     return new Promise<void>((resolve, reject) => {
-      // Terminate any existing worker before creating a new one
       if (this.worker) {
         console.debug("Terminating existing worker before creating new one");
         this.worker.terminate();
@@ -62,8 +66,7 @@ export class VectorWorkerManager {
           this.worker = null;
         }
         this.isInitialized = false;
-        // Don't reset readyPromise here to prevent race conditions
+
-        // It will be reset when a new initialization is attempted
         reject(new Error("Worker initialization timed out"));
       }, 10000);
 
@@ -75,6 +78,7 @@ export class VectorWorkerManager {
           case "ready":
             this.isInitialized = true;
             clearTimeout(timeout);
+            this.updateActivity(); // Start idle timer after initialization
             console.debug("Vector worker initialized and ready.");
             resolve();
             break;
@@ -90,10 +94,19 @@ export class VectorWorkerManager {
                   this.endStreamingSession();
                 }
 
-                // Dispatch search update when vectorization completes
+                window.dispatchEvent(
-                window.dispatchEvent(new CustomEvent("dynamic-items-updated", { 
+                  new CustomEvent("dynamic-items-updated", {
-                  detail: { incremental: true, jobId: "vectorization", vectorUpdate: true } 
+                    detail: {
-                }));
+                      incremental: true,
+                      jobId: "vectorization",
+                      vectorUpdate: true,
+                    },
+                  }),
+                );
+              }
+
+              if (data.status === "complete" || data.status === "cancelled" || data.status === "error") {
+                this.scheduleUnload();
               }
             }
             break;
@@ -128,35 +141,91 @@ export class VectorWorkerManager {
     this.isInitialized = false;
     this.readyPromise = null;
     this.progressCallback = null;
+    this.initializationMutex = false;
+    this.clearIdleTimer();
+    this.clearUnloadTimer();
     if (this.streamingSession?.isActive) {
       this.endStreamingSession();
     }
   }
 
+  private startIdleTimer() {
+    this.clearIdleTimer();
+    this.idleTimer = setTimeout(() => {
+      if (!this.streamingSession?.isActive && this.isInitialized) {
+        console.debug("[VectorWorker] Auto-shutting down due to 2 minutes of inactivity");
+        this.resetWorkerState();
+      }
+    }, 120000); // 2 minutes
+  }
+
+  private clearIdleTimer() {
+    if (this.idleTimer) {
+      clearTimeout(this.idleTimer);
+      this.idleTimer = null;
+    }
+  }
+
+  private clearUnloadTimer() {
+    if (this.unloadTimer) {
+      clearTimeout(this.unloadTimer);
+      this.unloadTimer = null;
+    }
+  }
+
+  private scheduleUnload(delay: number = 10000) {
+    this.clearUnloadTimer();
+    this.unloadTimer = setTimeout(() => {
+      if (!this.streamingSession?.isActive && this.isInitialized) {
+        console.debug("[VectorWorker] Auto-unloading after processing complete");
+        this.resetWorkerState();
+      }
+    }, delay);
+  }
+
+  private updateActivity() {
+    this.clearUnloadTimer();
+    this.startIdleTimer();
+  }
+
   private async ensureReady() {
-    // If we already have a ready promise, wait for it regardless of outcome
+    if (this.initializationMutex) {
+      while (this.initializationMutex) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+
+      if (this.isInitialized && this.worker) {
+        return;
+      }
+    }
+
     if (this.readyPromise) {
       try {
         await this.readyPromise;
       } catch (error) {
-        // If the previous initialization failed, reset state and try again
+        console.warn(
-        console.warn("Previous worker initialization failed, resetting state and retrying...", error);
+          "Previous worker initialization failed, resetting state and retrying...",
+          error,
+        );
         this.resetWorkerState();
       }
     }
 
-    // Double-check if we're actually ready after waiting
     if (this.isInitialized && this.worker) {
       return;
     }
 
-    // If we're not ready and there's no active promise, create one
+    if (!this.readyPromise && !this.initializationMutex) {
-    if (!this.readyPromise) {
       console.warn("Worker not initialized, attempting init...");
-      this.readyPromise = this.initWorker();
+      this.initializationMutex = true;
+      try {
+        this.readyPromise = this.initWorker();
+        await this.readyPromise;
+      } finally {
+        this.initializationMutex = false;
+      }
     }
 
-    await this.readyPromise;
     if (!this.isInitialized || !this.worker) {
       throw new Error(
         "Vector Worker is not available after initialization attempt.",
@@ -165,27 +234,61 @@ export class VectorWorkerManager {
   }
 
   async processItems(items: IndexItem[], onProgress?: ProgressCallback) {
+    // Only initialize worker if we actually have items to process
+    if (items.length === 0) {
+      if (onProgress) {
+        onProgress({
+          status: "complete",
+          message: "No items to process"
+        });
+      }
+      return;
+    }
+
+    const uniqueItems = items.filter((item, index, arr) => {
+      return arr.findIndex((i) => i.id === item.id) === index;
+    });
+
+    if (uniqueItems.length !== items.length) {
+      console.debug(
+        `Filtered out ${items.length - uniqueItems.length} duplicate items before processing`,
+      );
+    }
+
+    // If after deduplication we have no items, don't initialize worker
+    if (uniqueItems.length === 0) {
+      if (onProgress) {
+        onProgress({
+          status: "complete",
+          message: "No unique items to process after deduplication"
+        });
+      }
+      return;
+    }
+
     await this.ensureReady();
 
-    // Don't allow regular processing if streaming is active
     if (this.streamingSession?.isActive) {
       console.warn("Cannot process items while streaming session is active");
       if (onProgress) {
         onProgress({
           status: "error",
-          message: "Cannot process items while streaming session is active"
+          message: "Cannot process items while streaming session is active",
         });
       }
       return;
     }
 
     this.progressCallback = onProgress || null;
+    this.updateActivity();
 
-    console.debug(`Sending ${items.length} items to worker for processing.`);
+    console.debug(
+      `Sending ${uniqueItems.length} unique items to worker for processing.`,
+    );
 
     this.worker!.postMessage({
       type: "process",
-      data: { items: items },
+      data: { items: uniqueItems },
     });
   }
 
@@ -195,19 +298,22 @@ export class VectorWorkerManager {
     batchSize: number = 10,
     jobId?: string,
   ): Promise<void> {
+    // Only initialize if we expect items to process
+    if (totalExpectedItems === 0) {
+      console.debug("[VectorWorker] No items expected, not starting streaming session");
+      return;
+    }
+
     await this.ensureReady();
 
-    // Check if another job already has an active streaming session
     if (this.streamingSession?.isActive) {
       if (this.streamingSession.jobId !== jobId) {
-        console.warn(`Cannot start streaming session for job ${jobId} - job ${this.streamingSession.jobId} already has an active session`);
+        console.warn(
-        if (onProgress) {
+          `Ending existing streaming session for job ${this.streamingSession.jobId} to start new session for job ${jobId}`,
-          onProgress({
+        );
-            status: "error",
+        await this.endStreamingSession();
-            message: `Another job (${this.streamingSession.jobId}) already has an active streaming session`
+
-          });
+        await new Promise((resolve) => setTimeout(resolve, 100));
-        }
-        return;
       } else {
         console.debug(`Streaming session for job ${jobId} already active`);
         return;
@@ -215,6 +321,7 @@ export class VectorWorkerManager {
     }
 
     this.progressCallback = onProgress || null;
+    this.updateActivity();
 
     this.streamingSession = {
       isActive: true,
@@ -224,6 +331,8 @@ export class VectorWorkerManager {
       batchSize,
       flushTimer: null,
       jobId,
+      inactivityTimer: null,
+      lastActivityTime: Date.now(),
     };
 
     console.debug(
@@ -252,7 +361,34 @@ export class VectorWorkerManager {
       );
     }
 
-    this.streamingSession.batchBuffer.push(...items);
+    const uniqueItems = items.filter((item, index, arr) => {
+      return arr.findIndex((i) => i.id === item.id) === index;
+    });
+
+    if (uniqueItems.length !== items.length) {
+      console.debug(
+        `[Streaming] Filtered out ${items.length - uniqueItems.length} duplicate items before streaming`,
+      );
+    }
+
+    if (uniqueItems.length > 0) {
+      this.streamingSession.batchBuffer.push(...uniqueItems);
+      this.streamingSession.lastActivityTime = Date.now();
+      this.updateActivity(); // Update worker activity
+
+      if (this.streamingSession.inactivityTimer) {
+        clearTimeout(this.streamingSession.inactivityTimer);
+      }
+
+      this.streamingSession.inactivityTimer = setTimeout(() => {
+        if (this.streamingSession?.isActive) {
+          console.debug(
+            "[VectorWorker] Auto-ending streaming session due to inactivity",
+          );
+          this.endStreamingSession();
+        }
+      }, 30000);
+    }
 
     if (
       this.streamingSession.batchBuffer.length >=
@@ -313,6 +449,10 @@ export class VectorWorkerManager {
       clearTimeout(this.streamingSession.flushTimer);
     }
 
+    if (this.streamingSession.inactivityTimer) {
+      clearTimeout(this.streamingSession.inactivityTimer);
+    }
+
     this.streamingSession.isActive = false;
 
     this.worker!.postMessage({
@@ -331,12 +471,14 @@ export class VectorWorkerManager {
     }
 
     this.streamingSession = null;
+    this.scheduleUnload();
   }
 
   async streamItem(item: IndexItem): Promise<void> {
     return this.streamItems([item]);
   }
 
+
   isStreamingActive(): boolean {
     return this.streamingSession?.isActive ?? false;
   }

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

@@ -3,6 +3,7 @@ import type { Plugin } from "../../core/types";
 interface NotificationCollectorStorage {
   lastNotificationCount: number;
   lastCheckedTime: string;
+  consecutiveErrors: number;
 }
 
 const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
@@ -15,13 +16,24 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
 
   run: async (api) => {
     let pollInterval: number | null = null;
+    let isVisible = !document.hidden;
+    let baseInterval = 30000; // 30 seconds
+    const maxInterval = 300000; // 5 minutes max
 
     // Store last notification count in storage
     if (!api.storage.lastNotificationCount) {
       api.storage.lastNotificationCount = 0;
     }
+    if (!api.storage.consecutiveErrors) {
+      api.storage.consecutiveErrors = 0;
+    }
 
     const checkNotifications = async () => {
+      // Skip if tab is not visible to save battery
+      if (!isVisible) {
+        return;
+      }
+
       try {
         const alertDiv = document.querySelector(
           "[class*='notifications__bubble___']",
@@ -52,6 +64,9 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
         api.storage.lastNotificationCount = notificationCount;
         api.storage.lastCheckedTime = new Date().toISOString();
         
+        // Reset error count on success
+        api.storage.consecutiveErrors = 0;
+
         if (alertDiv) {
           alertDiv.textContent = notificationCount.toString();
         } else {
@@ -59,18 +74,37 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
         }
       } catch (error) {
         console.error("[BetterSEQTA+] Error fetching notifications:", error);
+        api.storage.consecutiveErrors = (api.storage.consecutiveErrors || 0) + 1;
       }
     };
 
+    const getNextInterval = () => {
+      // Exponential backoff on errors, max 5 minutes
+      const errorMultiplier = Math.min(Math.pow(2, api.storage.consecutiveErrors || 0), 10);
+      return Math.min(baseInterval * errorMultiplier, maxInterval);
+    };
+
     const startPolling = () => {
       if (pollInterval) return; // Already polling
       checkNotifications();
-      pollInterval = window.setInterval(checkNotifications, 30000);
+      
+      const scheduleNext = () => {
+        const interval = getNextInterval();
+        pollInterval = window.setTimeout(() => {
+          checkNotifications().then(() => {
+            if (pollInterval) { // Only continue if not stopped
+              scheduleNext();
+            }
+          });
+        }, interval);
+      };
+      
+      scheduleNext();
     };
 
     const stopPolling = () => {
       if (pollInterval) {
-        window.clearInterval(pollInterval);
+        window.clearTimeout(pollInterval);
         pollInterval = null;
         const alertDiv = document.querySelector(
           "[class*='notifications__bubble___']",
@@ -85,12 +119,27 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
       }
     };
 
+    // Listen for visibility changes to pause/resume polling
+    const handleVisibilityChange = () => {
+      isVisible = !document.hidden;
+      if (isVisible && !pollInterval) {
+        // Resume polling when tab becomes visible
+        const alertDiv = document.querySelector("[class*='notifications__bubble___']");
+        if (alertDiv) {
+          startPolling();
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
     api.seqta.onMount("[class*='notifications__bubble___']", (_) => {
       startPolling();
     });
 
     return () => {
       stopPolling();
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
   },
 };

src/plugins/built-in/profilePicture/ProfilePictureSetting.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import localforage from 'localforage'
+  let value = $state<string | undefined>(undefined)
+  let fileInput = $state<HTMLInputElement | undefined>(undefined)
+  let dragging = $state(false)
+  let blobUrl = $state<string | undefined>(undefined)
+
+  // Setup localforage instance
+  const store = localforage.createInstance({
+    name: 'profile-picture-store',
+    storeName: 'profilePicture',
+  })
+
+  async function load() {
+    const blob = await store.getItem<Blob>('profile-picture')
+    if (blob && blob instanceof Blob) {
+      // Revoke old blobUrl if any
+      if (blobUrl) URL.revokeObjectURL(blobUrl)
+      blobUrl = URL.createObjectURL(blob)
+      value = blobUrl
+    } else {
+      value = undefined
+    }
+  }
+
+  load()
+
+  function triggerSelect() {
+    fileInput?.click()
+  }
+
+  async function handleFiles(files: FileList | null) {
+    const file = files?.[0]
+    if (!file) return
+
+    // Revoke old blob URL if it exists
+    if (blobUrl) {
+      URL.revokeObjectURL(blobUrl)
+    }
+
+    // Store the blob in localforage
+    await store.setItem('profile-picture', file)
+    const newBlobUrl = URL.createObjectURL(file)
+    value = newBlobUrl
+    blobUrl = newBlobUrl
+    window.dispatchEvent(new Event('profile-picture-updated'))
+  }
+
+  function onFileChange() {
+    handleFiles(fileInput?.files || null)
+  }
+
+  function onDrop(event: DragEvent) {
+    event.preventDefault()
+    dragging = false
+    handleFiles(event.dataTransfer?.files || null)
+  }
+
+  async function removeImage() {
+    if (blobUrl) {
+      URL.revokeObjectURL(blobUrl)
+      blobUrl = undefined
+    }
+    value = undefined
+    await store.removeItem('profile-picture')
+    window.dispatchEvent(new Event('profile-picture-updated'))
+  }
+</script>
+
+<div
+  class="flex relative justify-center items-center rounded-lg cursor-pointer select-none border-zinc-300 dark:border-zinc-600 bg-white/20 dark:bg-zinc-800/30"
+  onclick={() => value ? null : triggerSelect()}
+  ondragover={(e) => { e.stopPropagation(); dragging = true }}
+  ondragleave={() => dragging = false}
+  ondrop={onDrop}
+  onkeydown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerSelect()
+    }
+  }}
+  role="button"
+  tabindex="0"
+>
+  {#if value}
+    <img src={value} alt="Profile" class="object-cover rounded-full size-10" />
+    <button
+      class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
+      onclick={(e) => {
+        e.stopPropagation()
+        removeImage()
+      }}
+    >&#215;</button>
+  {:else}
+    <div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300">
+      <span class="text-lg font-IconFamily">{'\ued47'}</span>
+      <span>Upload</span>
+    </div>
+  {/if}
+  <input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} />
+  {#if dragging}
+    <div class="absolute inset-0 rounded-full bg-zinc-200/40 dark:bg-zinc-700/40"></div>
+  {/if}
+</div>

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

@@ -0,0 +1,86 @@
+import type { Plugin } from "@/plugins/core/types";
+import { defineSettings, componentSetting } from "@/plugins/core/settingsHelpers";
+import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
+import { waitForElm } from "@/seqta/utils/waitForElm";
+import styles from "./styles.css?inline";
+import localforage from "localforage";
+
+const settings = defineSettings({
+  picture: componentSetting({
+    title: "Profile Picture",
+    description: "Upload or remove your custom profile image",
+    component: ProfilePictureSetting,
+  }),
+});
+
+
+const profilePicturePlugin: Plugin<typeof settings> = {
+  id: "profile-picture",
+  name: "Custom Profile Picture",
+  description: "Use your own image in place of the profile icon",
+  version: "1.1.0",
+  settings: settings,
+  disableToggle: true,
+  defaultEnabled: false,
+  styles,
+
+  run: async (api) => {
+    await api.storage.loaded;
+    let container: Element;
+    try {
+      container = await waitForElm(".userInfosvgdiv", true, 100, 60);
+    } catch {
+      return () => {};
+    }
+
+    const svg = container.querySelector(".userInfosvg") as HTMLElement | null;
+    let img: HTMLImageElement | null = null;
+    let currentBlobUrl: string | undefined;
+
+    // Setup localforage instance
+    const store = localforage.createInstance({
+      name: "profile-picture-store",
+      storeName: "profilePicture",
+    });
+
+    async function updateImageFromStore() {
+      // Remove old image if present
+      if (img) {
+        img.remove();
+        img = null;
+      }
+      if (currentBlobUrl) {
+        URL.revokeObjectURL(currentBlobUrl);
+        currentBlobUrl = undefined;
+      }
+      const blob = await store.getItem<Blob>("profile-picture");
+      if (blob && blob instanceof Blob) {
+        currentBlobUrl = URL.createObjectURL(blob);
+        img = document.createElement("img");
+        img.className = "userInfoImg";
+        img.src = currentBlobUrl;
+        if (svg) svg.style.display = "none";
+        container.appendChild(img);
+      } else {
+        if (svg) svg.style.display = "";
+      }
+    }
+
+    // Initial load
+    await updateImageFromStore();
+
+    // Listen for profile picture updates
+    const handler = () => { updateImageFromStore(); };
+    window.addEventListener('profile-picture-updated', handler);
+
+    return () => {
+      window.removeEventListener('profile-picture-updated', handler);
+      if (img) img.remove();
+      if (svg) svg.style.display = "";
+      if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);
+    };
+  },
+};
+
+export default profilePicturePlugin;
+

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

@@ -0,0 +1,15 @@
+.userInfoImg {
+  width: 80%;
+  height: 80%;
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  border-radius: 50%;
+  object-fit: cover;
+  z-index: 4;
+  box-shadow: 0 0 0 3px #000000;
+}
+
+.dark .userInfoImg {
+  box-shadow: 0 0 0 3px #ffffff;
+}

src/plugins/core/createAPI.ts

@@ -11,6 +11,7 @@ import type {
 import { eventManager } from "@/seqta/utils/listeners/EventManager";
 import ReactFiber from "@/seqta/utils/ReactFiber";
 import browser from "webextension-polyfill";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 function createSEQTAAPI(): SEQTAAPI {
   return {
@@ -48,6 +49,40 @@ function createSEQTAAPI(): SEQTAAPI {
   };
 }
 
+/**
+ * Creates a reactive and persistent settings store for a given plugin.
+ * This store is a Svelte-like store, providing reactivity, persistence
+ * via `browser.storage.local`, and default value handling.
+ *
+ * @template T - Represents the structure of the plugin's settings, extending `PluginSettings`.
+ * @param {Plugin<T, any>} plugin The plugin instance for which the settings store is being created.
+ *                                `plugin.id` is used for namespacing the settings in storage,
+ *                                and `plugin.settings` provides the definitions and default values for each setting.
+ * @returns {SettingsAPI<T> & { loaded: Promise<void> }} An object that functions as a Svelte store,
+ *                                                       enhanced with specific methods for settings management.
+ *                                                       The object includes:
+ *    - Reactivity: Changes to settings can be subscribed to using Svelte's store subscription pattern
+ *                  (though not explicitly a Svelte store, it behaves similarly for direct property access and updates).
+ *                  The `onChange` method provides a more direct way to listen for specific key changes.
+ *    - Persistence: Settings are automatically loaded from `browser.storage.local` when the store is created
+ *                   and saved back whenever a setting is changed via the proxy's setter.
+ *    - Default Values: Uses default values from the `plugin.settings` definition if no stored value exists for a setting.
+ *    - `loaded`: A Promise that resolves when the settings have been successfully loaded from storage,
+ *                allowing operations to be deferred until settings are ready.
+ *    - Direct property access for getting values (e.g., `settingsStore.mySettingKey`).
+ *    - Direct property assignment for setting values (e.g., `settingsStore.mySettingKey = newValue`), which also persists the change.
+ *    - `onChange(key, callback)`: Method to listen for changes to a specific setting. (Note: The prompt mentioned `listen`, this is `onChange`).
+ *                                 Returns an object with an `unregister` method.
+ *    - `offChange(key, callback)`: Method to stop listening for changes to a specific setting.
+ *    The following methods are not explicitly present on the returned proxy from `createSettingsAPI` but are typically
+ *    expected in a full "Svelte store" settings manager. The current implementation relies on direct property
+ *    manipulation for get/set, and re-initialization for reset-like behavior or would require external implementation
+ *    of reset logic if needed:
+ *    - `get(key)`: (Achieved by direct property access: `settingsStore.key`)
+ *    - `set(key, value)`: (Achieved by direct property assignment: `settingsStore.key = value`)
+ *    - `reset(key)`: (Would require manual re-application of `plugin.settings[key].default` and then setting it)
+ *    - `resetAll()`: (Would require iterating through all `plugin.settings` and applying defaults, then setting them)
+ */
 function createSettingsAPI<T extends PluginSettings>(
   plugin: Plugin<T>,
 ): SettingsAPI<T> & { loaded: Promise<void> } {
@@ -81,16 +116,16 @@ function createSettingsAPI<T extends PluginSettings>(
 
   // Fill with defaults first
   for (const key in plugin.settings) {
-    settingsWithMeta[key] = plugin.settings[key].default;
+    if (plugin.settings[key].type !== 'component' && plugin.settings[key].type !== 'button') {
+      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 allSettings = settingsState.getAll() as unknown as Record<string, unknown>;
-      const storedSettings = stored[storageKey] as Partial<
+      const storedSettings = allSettings[storageKey] as Partial<Record<keyof T, any>>;
-        Record<keyof T, any>
-      >;
       if (storedSettings) {
         for (const key in storedSettings) {
           if (key in settingsWithMeta) {
@@ -171,7 +206,7 @@ function createStorageAPI<T = any>(
   // Load all existing storage values for this plugin
   const loadStoragePromise = (async () => {
     try {
-      const allStorage = await browser.storage.local.get(null);
+      const allStorage = settingsState.getAll();
 
       // Filter for this plugin's storage keys and populate cache
       Object.entries(allStorage).forEach(([key, value]) => {
@@ -293,6 +328,32 @@ function createEventsAPI(pluginId: string): EventsAPI {
   };
 }
 
+/**
+ * Creates and returns a tailored API object for a specific plugin.
+ * This API object provides the plugin with various functionalities such as
+ * managing settings, accessing namespaced storage, interacting with SEQTA-specific features,
+ * and handling plugin-specific events.
+ *
+ * @template T - The type of the plugin's settings, extending `PluginSettings`.
+ * @template S - The type of the data the plugin will store in its namespaced storage.
+ * @param {Plugin<T, S>} plugin The plugin instance for which the API is being created.
+ *                              The plugin's `id` and `name` are used internally by the API
+ *                              for namespacing and identification but are accessed from the `plugin` object directly.
+ * @returns {PluginAPI<T, S>} An API object containing the following key properties:
+ *    - `seqta`: An API for interacting with SEQTA-specific functionalities, created by `createSEQTAAPI()`.
+ *               This includes methods like `onMount` for DOM element appearance, `getFiber` for React component inspection,
+ *               `getCurrentPage` for getting the current SEQTA page, and `onPageChange` for listening to page navigations.
+ *    - `settings`: An API for managing plugin-specific settings, created by `createSettingsAPI(plugin)`.
+ *                  It allows getting, setting, and listening to changes in the plugin's settings,
+ *                  which are stored persistently and namespaced to the plugin. Includes a `loaded` promise.
+ *    - `storage`: An API for providing namespaced storage for the plugin, created by `createStorageAPI<S>(plugin.id)`.
+ *                 It allows the plugin to store and retrieve arbitrary data, namespaced to prevent conflicts
+ *                 with other plugins or parts of the extension. Includes a `loaded` promise and `onChange` listeners.
+ *    - `events`: An API for allowing the plugin to dispatch and listen for custom events within its own scope,
+ *                created by `createEventsAPI(plugin.id)`. It provides `on(event, callback)` to listen for
+ *                plugin-specific events and `emit(event, ...args)` to dispatch them. These events are namespaced
+ *                to the plugin.
+ */
 export function createPluginAPI<T extends PluginSettings, S = any>(
   plugin: Plugin<T, S>,
 ): PluginAPI<T, S> {

src/plugins/core/manager.ts

@@ -7,9 +7,11 @@ import type {
   StringSetting,
   ButtonSetting,
   HotkeySetting,
+  ComponentSetting,
 } from "./types";
 import { createPluginAPI } from "./createAPI";
 import browser from "webextension-polyfill";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 interface PluginSettingsStorage {
   enabled?: boolean;
@@ -21,6 +23,12 @@ interface StorageChange<T = any> {
   newValue?: T;
 }
 
+/**
+ * Singleton class responsible for the entire lifecycle of plugins.
+ * This includes registration, starting, stopping, event dispatching,
+ * managing plugin-specific styles, and listening for plugin setting changes
+ * to automatically start or stop plugins.
+ */
 export class PluginManager {
   private static instance: PluginManager;
   private plugins: Map<string, Plugin<any, any>> = new Map();
@@ -30,10 +38,18 @@ export class PluginManager {
   private listeners: Map<string, Set<(...args: any[]) => void>> = new Map();
   private styleElements: Map<string, HTMLStyleElement> = new Map();
 
+  /**
+   * Private constructor to enforce singleton pattern.
+   * Initializes the listener for plugin state changes from storage.
+   */
   private constructor() {
     this.setupPluginStateListener();
   }
 
+  /**
+   * Gets the singleton instance of the PluginManager.
+   * @returns {PluginManager} The singleton instance.
+   */
   public static getInstance(): PluginManager {
     if (!PluginManager.instance) {
       PluginManager.instance = new PluginManager();
@@ -41,6 +57,15 @@ export class PluginManager {
     return PluginManager.instance;
   }
 
+  /**
+   * Dispatches an event to a specific plugin.
+   * If the plugin is currently running, the event is dispatched immediately via a DOM CustomEvent.
+   * If the plugin is not running, the event is added to a backlog to be processed when the plugin starts.
+   *
+   * @param {string} pluginId The ID of the target plugin.
+   * @param {string} event The name of the event to dispatch (e.g., "update").
+   * @param {any} [args] Optional arguments to pass with the event.
+   */
   public dispatchPluginEvent(pluginId: string, event: string, args?: any) {
     const fullEventName = `plugin.${pluginId}.${event}`;
 
@@ -56,6 +81,14 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Processes and dispatches any events that were backlogged for a plugin.
+   * This is typically called after a plugin has successfully started.
+   *
+   * @private
+   * @param {string} pluginId The ID of the plugin for which to process backlogged events.
+   * @returns {Promise<void>}
+   */
   private async processBackloggedEvents(pluginId: string) {
     for (const [key, argsList] of this.eventBacklog.entries()) {
       const [eventPluginId, event] = key.split(":");
@@ -68,6 +101,15 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Registers a plugin with the manager.
+   * Plugins must have a unique ID.
+   *
+   * @template T - The type of settings the plugin uses.
+   * @template S - The type of storage the plugin uses.
+   * @param {Plugin<T, S>} plugin The plugin object to register.
+   * @throws {Error} If a plugin with the same ID is already registered.
+   */
   public registerPlugin<T extends PluginSettings, S>(
     plugin: Plugin<T, S>,
   ): void {
@@ -77,6 +119,22 @@ export class PluginManager {
     this.plugins.set(plugin.id, plugin);
   }
 
+  /**
+   * Starts a specific plugin by its ID.
+   * This involves:
+   * - Checking if the plugin exists and isn't already running.
+   * - Creating and providing the plugin API (settings, storage, etc.).
+   * - Checking if the plugin is enabled (if `disableToggle` is true), respecting its `defaultEnabled` status.
+   * - Injecting any CSS styles defined by the plugin into the document head.
+   * - Waiting for the plugin's settings and storage to be loaded.
+   * - Executing the plugin's `run` method.
+   * - Storing any cleanup function returned by `run` for later use in `stopPlugin`.
+   * - Marking the plugin as running and processing any backlogged events for it.
+   *
+   * @param {string} pluginId The ID of the plugin to start.
+   * @returns {Promise<void>} A promise that resolves when the plugin has started or is determined not to start (e.g., disabled).
+   * @throws {Error} If the plugin is not found, or if an error occurs during plugin initialization or execution.
+   */
   public async startPlugin(pluginId: string): Promise<void> {
     const plugin = this.plugins.get(pluginId);
     if (!plugin) {
@@ -93,10 +151,8 @@ export class PluginManager {
 
       // Check if plugin is enabled before starting
       if (plugin.disableToggle) {
-        const settings = await browser.storage.local.get(
+        const all = settingsState.getAll() as unknown as Record<string, unknown>;
-          `plugin.${pluginId}.settings`,
+        const pluginSettings = all[`plugin.${pluginId}.settings`] as
-        );
-        const pluginSettings = settings[`plugin.${pluginId}.settings`] as
           | PluginSettingsStorage
           | undefined;
         const enabled =
@@ -138,17 +194,36 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Attempts to start all registered plugins.
+   * Errors during the start of individual plugins are caught and logged,
+   * allowing other plugins to attempt to start.
+   *
+   * @returns {Promise<void>} A promise that resolves when all plugins have attempted to start.
+   *                          It uses `Promise.allSettled` to wait for all start operations.
+   */
   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);
+        return Promise.reject(error); // Still reject to indicate failure for this specific plugin if needed by caller
       }),
     );
 
     await Promise.allSettled(startPromises);
   }
 
+  /**
+   * Stops a specific plugin by its ID.
+   * This involves:
+   * - Removing any CSS styles injected by the plugin.
+   * - Executing the cleanup function that was returned by the plugin's `run` method (if any).
+   * - Marking the plugin as not running.
+   * - Emitting a "plugin.stopped" event with the pluginId.
+   *
+   * @param {string} pluginId The ID of the plugin to stop.
+   * @returns {Promise<void>} A promise that resolves when the plugin has been stopped.
+   */
   public async stopPlugin(pluginId: string): Promise<void> {
     // Remove plugin styles
     const styleElement = this.styleElements.get(pluginId);
@@ -167,18 +242,47 @@ export class PluginManager {
     this.emit("plugin.stopped", pluginId);
   }
 
+  /**
+   * Stops all currently running plugins.
+   * Iterates through all registered plugins and calls `stopPlugin` for each.
+   */
   public stopAllPlugins(): void {
     Array.from(this.plugins.keys()).forEach((id) => this.stopPlugin(id));
   }
 
+  /**
+   * Retrieves a registered plugin by its ID.
+   *
+   * @param {string} pluginId The ID of the plugin to retrieve.
+   * @returns {Plugin | undefined} The plugin object if found, otherwise undefined.
+   */
   public getPlugin(pluginId: string): Plugin | undefined {
     return this.plugins.get(pluginId);
   }
 
+  /**
+   * Retrieves an array of all registered plugin objects.
+   *
+   * @returns {Plugin[]} An array containing all registered plugin objects.
+   */
   public getAllPlugins(): Plugin[] {
     return Array.from(this.plugins.values());
   }
 
+  /**
+   * Retrieves a structured list of settings for all registered plugins.
+   * This is primarily used for building user interfaces for plugin configuration.
+   * It processes each plugin's defined settings, adding IDs, titles, descriptions,
+   * and default enabled states. For plugins with `disableToggle`, an "enabled"
+   * boolean setting is automatically included.
+   *
+   * @returns {Array<object>} An array of objects, where each object represents a plugin
+   *                          and contains its ID, name, description, beta status,
+   *                          and a processed `settings` object. The `settings` object
+   *                          maps setting keys to their detailed configuration (type, title, etc.).
+   *                          The specific structure of each setting object within `settings`
+   *                          depends on its type (boolean, string, number, select, button, hotkey).
+   */
   public getAllPluginSettings(): Array<{
     pluginId: string;
     name: string;
@@ -195,16 +299,19 @@ export class PluginManager {
             options: Array<{ value: string; label: string }>;
           })
         | (Omit<ButtonSetting, "type"> & { type: "button"; id: string; trigger?: () => void | Promise<void> })
-        | (Omit<HotkeySetting, "type"> & { type: "hotkey"; id: string });
+        | (Omit<HotkeySetting, "type"> & { type: "hotkey"; id: string })
+        | (Omit<ComponentSetting, "type"> & { type: "component"; id: string; component: any });
     };
+    // Actual type is more complex, see original code, but this gives the gist for the JSDoc.
+    // Array<{ pluginId: string; name: string; description: string; beta?: boolean; settings: Record<string, ProcessedSetting>; disableToggle?: boolean; }>
   }> {
     return Array.from(this.plugins.entries()).map(([id, plugin]) => {
       const settingsEntries = Object.entries(plugin.settings).map(
         ([key, setting]) => {
           const settingObj = setting as any;
           let result: any;
-          if (settingObj.type === "button") {
+          if (settingObj.type === "button" || settingObj.type === "component") {
-            // For button, keep the trigger function
+            // For button or component, keep the functions
             result = { ...settingObj };
           } else {
             // For others, strip functions
@@ -245,10 +352,24 @@ export class PluginManager {
     });
   }
 
+  /**
+   * Checks if a specific plugin is currently running.
+   *
+   * @param {string} pluginId The ID of the plugin to check.
+   * @returns {boolean} True if the plugin is running, false otherwise.
+   */
   public isPluginRunning(pluginId: string): boolean {
     return this.runningPlugins.get(pluginId) || false;
   }
 
+  /**
+   * Emits an event to all registered listeners for that event.
+   * This is an internal event bus for the PluginManager itself.
+   *
+   * @private
+   * @param {string} event The name of the event to emit.
+   * @param {any[]} args Arguments to pass to the event listeners.
+   */
   private emit(event: string, ...args: any[]): void {
     const listeners = this.listeners.get(event);
     if (listeners) {
@@ -256,6 +377,12 @@ export class PluginManager {
     }
   }
 
+  /**
+   * Registers an event listener for PluginManager's internal events.
+   *
+   * @param {string} event The name of the event to listen for (e.g., "plugin.stopped").
+   * @param {(...args: any[]) => void} callback The function to call when the event is emitted.
+   */
   public on(event: string, callback: (...args: any[]) => void): void {
     if (!this.listeners.has(event)) {
       this.listeners.set(event, new Set());
@@ -263,6 +390,12 @@ export class PluginManager {
     this.listeners.get(event)!.add(callback);
   }
 
+  /**
+   * Unregisters an event listener for PluginManager's internal events.
+   *
+   * @param {string} event The name of the event.
+   * @param {(...args: any[]) => void} callback The callback function to remove.
+   */
   public off(event: string, callback: (...args: any[]) => void): void {
     const listeners = this.listeners.get(event);
     if (listeners) {
@@ -270,7 +403,16 @@ export class PluginManager {
     }
   }
 
-  // Add handler for plugin enable/disable state changes
+  /**
+   * Handles the change in a plugin's enabled state.
+   * Starts or stops the plugin based on the new `enabled` value.
+   * This is typically called by `setupPluginStateListener` when a relevant storage change is detected.
+   *
+   * @private
+   * @param {string} pluginId The ID of the plugin whose state has changed.
+   * @param {boolean} enabled The new enabled state of the plugin.
+   * @returns {Promise<void>}
+   */
   private async handlePluginStateChange(
     pluginId: string,
     enabled: boolean,
@@ -282,7 +424,14 @@ export class PluginManager {
     }
   }
 
-  // Add listener for plugin settings changes
+  /**
+   * Sets up a listener for browser storage changes.
+   * This listener monitors changes to plugin settings (specifically the `enabled` property
+   * for plugins with `disableToggle: true`) and calls `handlePluginStateChange`
+   * to automatically start or stop plugins accordingly.
+   *
+   * @private
+   */
   private setupPluginStateListener(): void {
     browser.storage.onChanged.addListener(
       (changes: { [key: string]: StorageChange }, area: string) => {

src/plugins/core/settingsHelpers.ts

@@ -5,8 +5,20 @@ import type {
   SelectSetting,
   StringSetting,
   HotkeySetting,
+  PluginSettings,
+  ComponentSetting,
 } from "./types";
 
+/**
+ * Creates a complete `NumberSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "number".
+ * It's used for defining a numeric setting for a plugin.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @param {Omit<NumberSetting, "type">} options The configuration options for the number setting,
+ *                                              excluding the `type` property (e.g., `title`, `default`, `min`, `max`).
+ * @returns {NumberSetting} A complete number setting object with `type: "number"`.
+ */
 export function numberSetting(
   options: Omit<NumberSetting, "type">,
 ): NumberSetting {
@@ -16,6 +28,16 @@ export function numberSetting(
   };
 }
 
+/**
+ * Creates a complete `BooleanSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "boolean".
+ * It's used for defining a boolean (true/false) setting for a plugin.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @param {Omit<BooleanSetting, "type">} options The configuration options for the boolean setting,
+ *                                               excluding the `type` property (e.g., `title`, `default`).
+ * @returns {BooleanSetting} A complete boolean setting object with `type: "boolean"`.
+ */
 export function booleanSetting(
   options: Omit<BooleanSetting, "type">,
 ): BooleanSetting {
@@ -25,6 +47,16 @@ export function booleanSetting(
   };
 }
 
+/**
+ * Creates a complete `StringSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "string".
+ * It's used for defining a text-based setting for a plugin.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @param {Omit<StringSetting, "type">} options The configuration options for the string setting,
+ *                                              excluding the `type` property (e.g., `title`, `default`, `placeholder`).
+ * @returns {StringSetting} A complete string setting object with `type: "string"`.
+ */
 export function stringSetting(
   options: Omit<StringSetting, "type">,
 ): StringSetting {
@@ -34,15 +66,36 @@ export function stringSetting(
   };
 }
 
-export function selectSetting<T extends string>(
+/**
-  options: Omit<SelectSetting<T>, "type">,
+ * Creates a complete `SelectSetting` object from its options.
-): SelectSetting<T> {
+ * This helper function ensures the `type` property is correctly set to "select".
+ * It's used for defining a setting where the user can choose from a predefined list of options.
+ * This function itself does not handle storage or persistence; it defines the setting's structure.
+ *
+ * @template TValue - The type of the value for each option in the select list (extends string).
+ * @param {Omit<SelectSetting<TValue>, "type">} options The configuration options for the select setting,
+ *                                                     excluding the `type` property (e.g., `title`, `default`, `options` array).
+ * @returns {SelectSetting<TValue>} A complete select setting object with `type: "select"`.
+ */
+export function selectSetting<TValue extends string>(
+  options: Omit<SelectSetting<TValue>, "type">,
+): SelectSetting<TValue> {
   return {
     type: "select",
     ...options,
   };
 }
 
+/**
+ * Creates a complete `ButtonSetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "button".
+ * It's used for defining a button in the plugin's settings UI, which can trigger an action.
+ * This function itself does not handle storage or persistence; it defines the button's structure and action.
+ *
+ * @param {Omit<ButtonSetting, "type">} options The configuration options for the button setting,
+ *                                              excluding the `type` property (e.g., `title`, `label`, `trigger` function).
+ * @returns {ButtonSetting} A complete button setting object with `type: "button"`.
+ */
 export function buttonSetting(
   options: Omit<ButtonSetting, "type">,
 ): ButtonSetting {
@@ -52,6 +105,26 @@ export function buttonSetting(
   };
 }
 
+/**
+ * Creates a complete `HotkeySetting` object from its options.
+ * This helper function ensures the `type` property is correctly set to "hotkey".
+ * It's used for defining a setting where the user can configure a keyboard shortcut.
+ * This function itself does not handle storage or persistence; it defines the hotkey setting's structure.
+ *
+ * @param {Omit<HotkeySetting, "type">} options The configuration options for the hotkey setting,
+ *                                              excluding the `type` property (e.g., `title`, `default` hotkey string).
+ * @returns {HotkeySetting} A complete hotkey setting object with `type: "hotkey"`.
+ */
+
+export function componentSetting(
+  options: Omit<ComponentSetting, "type">,
+): ComponentSetting {
+  return {
+    type: "component",
+    ...options,
+  };
+}
+
 export function hotkeySetting(
   options: Omit<HotkeySetting, "type">,
 ): HotkeySetting {
@@ -61,10 +134,42 @@ export function hotkeySetting(
   };
 }
 
-export function defineSettings<T extends Record<string, any>>(settings: T): T {
+/**
+ * Defines a collection of settings for a plugin.
+ * This function currently acts as an identity function, returning the settings object as is.
+ * Its primary purpose is to provide type inference and a structured way to define
+ * the entire settings configuration for a plugin, ensuring it conforms to the expected type.
+ * This function itself does not handle storage or persistence; it's for structural definition.
+ *
+ * @template TSettings - A record type where keys are setting names and values are setting definition objects
+ *                       (e.g., `NumberSetting`, `BooleanSetting`).
+ * @param {TSettings} settings The complete settings configuration object for the plugin.
+ * @returns {TSettings} The same settings configuration object, primarily for type checking/inference.
+ */
+export function defineSettings<TSettings extends Record<string, any>>(settings: TSettings): TSettings {
   return settings;
 }
 
+/**
+ * A property decorator for declaratively defining a plugin setting on a class property.
+ * When a class property is decorated with `@Setting({...})`, this decorator adds the
+ * provided setting definition (`settingDef`) to a static `settings` object on the
+ * class's prototype. This allows settings to be defined alongside their related class logic.
+ * This decorator itself does not handle runtime storage or persistence of setting *values*;
+ * it is for defining the *structure* and *metadata* of a setting.
+ *
+ * Example:
+ * ```typescript
+ * class MyPlugin extends BasePlugin {
+ *   @Setting(numberSetting({ title: "My Number", default: 10 }))
+ *   myNumberSetting: number; // Type annotation for the setting's value
+ * }
+ * ```
+ *
+ * @param {any} settingDef The setting definition object, typically created by one of the
+ *                         helper functions like `numberSetting(...)`, `booleanSetting(...)`, etc.
+ * @returns {PropertyDecorator} A property decorator function.
+ */
 export function Setting(settingDef: any): PropertyDecorator {
   return (target, propertyKey) => {
     const proto = target.constructor.prototype;

src/plugins/core/types.ts

@@ -48,13 +48,21 @@ export interface HotkeySetting {
   description?: string;
 }
 
+export interface ComponentSetting {
+  type: "component";
+  title: string;
+  description?: string;
+  component: any;
+}
+
 export type PluginSetting =
   | BooleanSetting
   | StringSetting
   | NumberSetting
   | SelectSetting<string>
   | ButtonSetting
-  | HotkeySetting;
+  | HotkeySetting
+  | ComponentSetting;
 
 export type PluginSettings = {
   [key: string]: PluginSetting;
@@ -71,7 +79,9 @@ export type SettingValue<T extends PluginSetting> = T extends BooleanSetting
         ? O
         : T extends HotkeySetting
           ? string
-          : never;
+          : T extends ComponentSetting
+            ? never
+            : never;
 
 export type SettingsAPI<T extends PluginSettings> = {
   [K in keyof T]: SettingValue<T[K]>;

src/plugins/index.ts

@@ -7,6 +7,8 @@ import themesPlugin from "./built-in/themes";
 import animatedBackgroundPlugin from "./built-in/animatedBackground";
 import assessmentsAveragePlugin from "./built-in/assessmentsAverage";
 import globalSearchPlugin from "./built-in/globalSearch/src/core";
+import profilePicturePlugin from "./built-in/profilePicture";
+import assessmentsOverviewPlugin from "./built-in/assessmentsOverview";
 //import testPlugin from './built-in/test';
 
 // Initialize plugin manager
@@ -19,6 +21,8 @@ pluginManager.registerPlugin(assessmentsAveragePlugin);
 pluginManager.registerPlugin(notificationCollectorPlugin);
 pluginManager.registerPlugin(timetablePlugin);
 pluginManager.registerPlugin(globalSearchPlugin);
+pluginManager.registerPlugin(profilePicturePlugin);
+pluginManager.registerPlugin(assessmentsOverviewPlugin);
 //pluginManager.registerPlugin(testPlugin);
 
 export { init as Monofile } from "./monofile";

src/plugins/monofile.ts

@@ -24,6 +24,9 @@ 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";
+import {
+  updateTimetableTimes,
+} from "@/seqta/utils/updateTimetableTimes";
 
 // JSON content
 import MenuitemSVGKey from "@/seqta/content/MenuItemSVGKey.json";
@@ -241,14 +244,16 @@ async function LoadPageElements(): Promise<void> {
     handleReports,
   );
 
-  /* eventManager.register(
+  eventManager.register(
     "timetableAdded",
     {
       elementType: "div",
       className: "timetablepage",
     },
-    handleTimetable,
+    async () => {
-  ) */
+      await updateTimetableTimes();
+    },
+  );
 
   eventManager.register(
     "noticesAdded",
@@ -503,7 +508,7 @@ export async function ObserveMenuItemPosition() {
         return;
       }
 
-      if (!node?.dataset?.checked && !MenuOptionsOpen) {
+      if (!MenuOptionsOpen) {
         const key =
           MenuitemSVGKey[node?.dataset?.key! as keyof typeof MenuitemSVGKey];
         if (key) {
@@ -626,6 +631,7 @@ export function init() {
     }, 1000);
   } else {
     handleDisabled();
+    InjectCustomIcons();
     window.addEventListener("load", handleDisabled);
   }
 }

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -12,6 +12,8 @@ import { delay } from "@/seqta/utils/delay";
 
 let cachedUserInfo: any = null;
 
+let LightDarkModeSnakeEggButton = 0;
+
 async function getUserInfo() {
   if (cachedUserInfo) return cachedUserInfo;
 
@@ -79,7 +81,7 @@ function createHomeButton(fragment: DocumentFragment, _: HTMLElement) {
   container.append(div);
 
   const NewButton = stringToHTML(
-    '<li class="item" data-key="home" id="homebutton" data-path="/home" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span>Home</span></label></li>',
+    /* html */`<li class="item" data-key="home" id="homebutton" data-path="/home" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span>Home</span></label></li>`
   );
   if (NewButton.firstChild) {
     fragment.appendChild(NewButton.firstChild);
@@ -287,6 +289,14 @@ async function addDarkLightToggle() {
   lightDarkModeButtonElement.addEventListener("click", async () => {
     const darklightText = document.getElementById("darklighttooliptext");
 
+    LightDarkModeSnakeEggButton += 1;
+
+    if (LightDarkModeSnakeEggButton >= 10) {
+      window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
+      LightDarkModeSnakeEggButton = 0;
+    }
+
+
     if (
       settingsState.originalDarkMode !== undefined &&
       settingsState.selectedTheme

src/seqta/ui/ImageBackgrounds.ts

@@ -20,6 +20,8 @@ export async function appendBackgroundToUI() {
   return;
 }
 
+let lastLoadedId: string | null = null;
+
 export async function loadBackground() {
   if (!isIndexedDBSupported()) {
     console.error("IndexedDB is not supported. Unable to load background.");
@@ -33,12 +35,21 @@ export async function loadBackground() {
       if (backgroundContainer) {
         backgroundContainer.remove();
       }
+      lastLoadedId = null;
       return;
     }
 
     const background = await getDataById(selectedBackgroundId);
     if (!background) return;
 
+    // Skip reload if background hasn't changed and media element already exists
+    if (
+      selectedBackgroundId === lastLoadedId &&
+      document.querySelector("#media-container > .background")
+    ) {
+      return;
+    }
+
     let backgroundContainer = document.querySelector(".imageBackground");
     if (!backgroundContainer) {
       backgroundContainer = document.createElement("div");
@@ -77,6 +88,7 @@ export async function loadBackground() {
     }
 
     mediaContainer.appendChild(mediaElement);
+    lastLoadedId = selectedBackgroundId;
   } catch (error) {
     console.error("Error loading background:", error);
   }

src/seqta/ui/dev/hideSensitiveContent.ts

@@ -7,6 +7,21 @@ interface ContentConfig {
   [key: string]: ElementConfig;
 }
 
+// Track processed elements to avoid re-randomizing
+const processedElements = new WeakSet<Element>();
+
+function debounce(func: Function, wait: number): Function {
+  let timeout: NodeJS.Timeout;
+  return function executedFunction(...args: any[]) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
 function getRandomElement(array: string[]): string {
   return array[Math.floor(Math.random() * array.length)];
 }
@@ -164,9 +179,32 @@ const contentConfig: ContentConfig = {
     },
   },
   forumTopics: {
-    selector: "#menu .sub ul li label",
+    selector: "#menu .sub ul li:not([data-colour]):not(.hasChildren) label",
     action: (element) => {
-      element.textContent = "Forum Topic Redacted";
+      // Only redact if not in assessments section
+      const assessmentsSection = element.closest('[data-key="assessments"]');
+      if (!assessmentsSection) {
+        element.textContent = "Forum Topic Redacted";
+      }
+    },
+  },
+  assessmentSubjects: {
+    selector: '[data-key="assessments"] .sub ul li[data-colour] label',
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.subjects);
+    },
+  },
+  assessmentYearGroups: {
+    selector: '[data-key="assessments"] .sub ul li.hasChildren:not([data-colour]) label',
+    action: (element) => {
+      const yearGroup = Math.floor(Math.random() * 5) + 8; // Years 8-12
+      element.textContent = `Year ${yearGroup}`;
+    },
+  },
+  assessmentSubYearGroups: {
+    selector: '[data-key="assessments"] .sub .sub ul li[data-colour] label',
+    action: (element) => {
+      element.textContent = getRandomElement(mockData.subjects);
     },
   },
   courseNames: {
@@ -370,13 +408,339 @@ const mockData = {
       "Mrs. Martinez",
     ],
   },
+  noticesData: [
+    {
+      id: 1,
+      title: "Academic Lunch Support", 
+      contents: `The following table shows the names of the students who are required to attend at the beginning of lunchtime on the respective days.<br>
+&nbsp;
+<table>
+  <thead>
+    <tr>
+      <th>
+        <p style="padding-left: 0px; padding-right: 0px;">Monday 16/06<br>
+          Room S201<br>
+          Week A Mrs Thompson<br>
+          Week B Mrs Smith</p></th>
+      <th>
+        <p style="padding-left: 0px; padding-right: 0px;">Wednesday 18/06<br>
+          Room S201<br>
+          Week A Mrs Smith<br>
+          Week B Mrs Smith</p></th>
+      <th>
+        <p style="padding-left: 0px; padding-right: 0px;">Friday 20/06<br>
+          Room M201&nbsp;<br>
+          Week A Ms Anderson<br>
+          Week B Ms Anderson&nbsp; &nbsp;&nbsp;</p></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>No Academic Support for year 9 and 10&nbsp;<br>
+        due to exam in P5/6</td>
+      <td>
+        <div>
+        </div>John Smith (Mrs Jones)<br>
+        Wednesday&nbsp;<br>
+        Michael Brown<br>
+        James Wilson (Miss Davis)<br>
+        <br>
+        &nbsp;</td>
+      <td>Friday 20/6<br>
+        Michael Brown<br>
+        &nbsp;</td>
+    </tr>
+  </tbody>
+</table>
+<div>
+</div>`,
+      staff: "Mrs Jones",
+      colour: "#9c27b0",
+      label: 1,
+      label_title: "Middle & Senior School (5-12)"
+    },
+    {
+      id: 2,
+      title: "Year 12 Study Period Changes",
+      contents: `Please note the following changes to Year 12 study periods for this week:<br><br>
+<ul>
+  <li><strong>Tuesday:</strong> Study hall relocated to Library - periods 3 & 4</li>
+  <li><strong>Wednesday:</strong> No supervised study - students may use common areas</li>
+  <li><strong>Friday:</strong> Extended study session until 4:30 PM in Room A205</li>
+</ul>
+<br>
+Students are expected to bring all necessary materials and maintain academic focus during these sessions.`,
+      staff: "Mr. David Chen",
+      colour: "#2196f3",
+      label: 2,
+      label_title: "Year 12 Students"
+    },
+    {
+      id: 3,
+      title: "Upcoming Science Fair Preparations",
+      contents: `The Annual Science Fair is scheduled for <strong>Friday, June 28th</strong>. All participating students should note:<br><br>
+<table border="1" style="border-collapse: collapse; width: 100%;">
+  <thead>
+    <tr style="background-color: #f0f0f0;">
+      <th style="padding: 8px;">Activity</th>
+      <th style="padding: 8px;">Date</th>
+      <th style="padding: 8px;">Location</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="padding: 8px;">Project Setup</td>
+      <td style="padding: 8px;">Thursday 27/06 - Period 5</td>
+      <td style="padding: 8px;">Main Hall</td>
+    </tr>
+    <tr>
+      <td style="padding: 8px;">Practice Presentations</td>
+      <td style="padding: 8px;">Thursday 27/06 - Period 6</td>
+      <td style="padding: 8px;">Science Labs 1-3</td>
+    </tr>
+    <tr>
+      <td style="padding: 8px;">Final Event</td>
+      <td style="padding: 8px;">Friday 28/06 - All Day</td>
+      <td style="padding: 8px;">Main Hall & Courtyard</td>
+    </tr>
+  </tbody>
+</table>
+<br>Please ensure all safety protocols are followed and display materials are ready by Thursday afternoon.`,
+      staff: "Dr. Sarah Mitchell",
+      colour: "#4caf50",
+      label: 3,
+      label_title: "Science Students"
+    },
+    {
+      id: 4,
+      title: "Library Resource Updates",
+      contents: `Our library has received several important updates this week:<br><br>
+<strong>New Digital Resources:</strong>
+<ul>
+  <li>Access to Research Database Plus - now available through student portal</li>
+  <li>Updated online textbook collection for all core subjects</li>
+  <li>New citation management tools for senior students</li>
+</ul>
+<br>
+<strong>Facility Changes:</strong><br>
+The quiet study area has been expanded and now includes 8 additional desks with power outlets. Bookings can be made through the student portal under "Library Services".
+<br><br>
+For assistance with any digital resources, please contact the library staff during operating hours: 7:30 AM - 4:00 PM.`,
+      staff: "Ms. Rebecca Torres",
+      colour: "#ff9800",
+      label: 4,
+      label_title: "All Students"
+    },
+    {
+      id: 5,
+      title: "Sports Carnival Team Registrations",
+      contents: `House Sports Carnival is approaching on <strong>August 15th</strong>! Team registrations are now open for all year levels.<br><br>
+Available Events:
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0;">
+  <div>
+    <strong>Track Events:</strong>
+    <ul>
+      <li>100m Sprint</li>
+      <li>200m Sprint</li>
+      <li>400m Race</li>
+      <li>800m Distance</li>
+      <li>1500m Distance</li>
+      <li>Relay Races</li>
+    </ul>
+  </div>
+  <div>
+    <strong>Field Events:</strong>
+    <ul>
+      <li>Long Jump</li>
+      <li>High Jump</li>
+      <li>Shot Put</li>
+      <li>Discus</li>
+      <li>Javelin</li>
+      <li>Triple Jump</li>
+    </ul>
+  </div>
+</div>
+<br>
+<strong>Registration Deadline:</strong> July 25th<br>
+<strong>Training Sessions:</strong> Tuesdays & Thursdays, 3:30-4:30 PM<br>
+<br>
+Register through the PE department or see your house captains for more information.`,
+      staff: "Coach Michael Park",
+      colour: "#e91e63",
+      label: 5,
+      label_title: "All Houses"
+    }
+  ]
 };
 
-export default function hideSensitiveContent() {
+export function getMockNotices() {
+  return {
+    payload: mockData.noticesData
+  };
+}
+
+export function getMockAssessmentsData() {
+  const subjects = mockData.subjects.slice(0, 5).map((title, i) => ({
+    code: `SUBJ${i + 1}`,
+    programme: i + 1,
+    metaclass: i + 1,
+    title,
+  }));
+
+  const colors: Record<string, string> = {};
+  subjects.forEach((s) => {
+    colors[s.code] = `hsl(${Math.floor(Math.random() * 360)},70%,60%)`;
+  });
+
+  const statusTemplates = [
+    // Marked with scores (70-90%) - goes to MARKS_RELEASED
+    { submitted: true, score: () => Math.floor(Math.random() * 21) + 70, dayOffset: () => Math.floor(Math.random() * -30) - 7 }, // Past due, marked with score
+    { submitted: true, score: () => Math.floor(Math.random() * 21) + 70, dayOffset: () => Math.floor(Math.random() * -14) - 1 }, // Recently marked with score
+    { submitted: true, score: () => Math.floor(Math.random() * 21) + 70, dayOffset: () => Math.floor(Math.random() * -7) }, // Very recently marked with score
+    
+    // Submitted but unmarked - goes to SUBMITTED
+    { submitted: true, score: null, dayOffset: () => Math.floor(Math.random() * -5) - 1 }, // Recently submitted, awaiting marking
+    { submitted: true, score: null, dayOffset: () => Math.floor(Math.random() * -3) }, // Very recently submitted, awaiting marking
+    { submitted: true, score: null, dayOffset: () => Math.floor(Math.random() * -2) }, // Just submitted, awaiting marking
+    
+    // Due soon (not submitted) - only a couple
+    { submitted: false, score: null, dayOffset: () => 0 }, // Due today
+    { submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * 3) + 2 }, // Due in next few days
+    
+    // Due later (not submitted) - most assessments
+    { submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * 7) + 8 }, // Due in 1-2 weeks
+    { submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * 14) + 14 }, // Due in 2-4 weeks
+    { submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * 21) + 21 }, // Due in 3-6 weeks
+    { submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * 14) + 35 }, // Due in 5-7 weeks
+    
+    // Few overdue (not submitted) - less common
+    { submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * -3) - 1 }, // Recently overdue
+  ];
+
+  const assessments = Array.from({ length: 12 }, (_, i) => {
+    const subj = subjects[i % subjects.length];
+    const template = statusTemplates[i % statusTemplates.length];
+    const due = new Date();
+    due.setDate(due.getDate() + template.dayOffset());
+    
+    const assessment: any = {
+      id: i + 1,
+      title: mockData.assessmentTitles[i % mockData.assessmentTitles.length],
+      code: subj.code,
+      programmeID: subj.programme,
+      metaclassID: subj.metaclass,
+      due: due.toISOString(),
+      submitted: template.submitted,
+    };
+
+    if (template.score && typeof template.score === 'function') {
+      assessment.percentage = template.score(); // This triggers MARKS_RELEASED
+      assessment.results = {
+        percentage: template.score() // This displays the thermometer
+      };
+    }
+
+    return assessment;
+  });
+
+  return { assessments, subjects, colors };
+}
+
+// Create a debounced processing function
+const debouncedProcessElements = debounce(processNewElements, 1);
+
+function processNewElements() {
   Object.entries(contentConfig).forEach(([_, { selector, action }]) => {
     const elements = document.querySelectorAll(selector);
     elements.forEach((element: Element) => {
-      action(element);
+      // Only process elements that haven't been processed before
+      if (!processedElements.has(element)) {
+        action(element);
+        processedElements.add(element);
+      }
     });
   });
 }
+
+let observer: MutationObserver | null = null;
+let intervalId: NodeJS.Timeout | null = null;
+
+export default function hideSensitiveContent() {
+  // Initial processing of existing elements
+  processNewElements();
+
+  // Set up MutationObserver if not already created
+  if (!observer) {
+    observer = new MutationObserver((mutations) => {
+      let shouldProcess = false;
+      
+      mutations.forEach((mutation) => {
+        // Check for both childList and subtree changes
+        if (mutation.type === 'childList') {
+          // Check added nodes
+          if (mutation.addedNodes.length > 0) {
+            mutation.addedNodes.forEach((node) => {
+              if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node as Element;
+                // Check if the added element or its children match any of our selectors
+                for (const config of Object.values(contentConfig)) {
+                  if (element.matches?.(config.selector) || element.querySelector?.(config.selector)) {
+                    shouldProcess = true;
+                    break;
+                  }
+                }
+              }
+            });
+          }
+          
+          // Also trigger on large DOM replacements (like page navigation)
+          if (mutation.addedNodes.length > 5 || mutation.removedNodes.length > 5) {
+            shouldProcess = true;
+          }
+        }
+        
+        // Check for attribute changes that might affect our selectors
+        if (mutation.type === 'attributes') {
+          const target = mutation.target as Element;
+          for (const config of Object.values(contentConfig)) {
+            if (target.matches?.(config.selector)) {
+              shouldProcess = true;
+              break;
+            }
+          }
+        }
+      });
+
+      if (shouldProcess) {
+        debouncedProcessElements();
+      }
+    });
+
+    // Start observing with more comprehensive options
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['class', 'id'] // Watch for class/id changes that might affect our selectors
+    });
+  }
+  
+  // Fallback: periodic check for new elements (especially useful for SPA navigation)
+  if (!intervalId) {
+    intervalId = setInterval(() => {
+      debouncedProcessElements();
+    }, 500); // Check every 500ms as a fallback
+  }
+}
+
+// Function to stop observing (useful for cleanup)
+export function stopHidingSensitiveContent() {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
+}

src/seqta/utils/CreateEnable/CreateCustomShortcutDiv.ts

@@ -9,23 +9,35 @@ export function CreateCustomShortcutDiv(element: any) {
   shortcutdiv.classList.add("shortcut");
   shortcutdiv.classList.add("customshortcut");
 
-  let image = stringToHTML(
+  let image: ChildNode | null = null;
-    `
+
-    <svg style="width:39px;height:39px" viewBox="0 0 40 40" class="shortcuticondiv">
+  if (typeof element.icon === "string" && element.icon.trim().startsWith("<")) {
-      <text
+    image = stringToHTML(element.icon).firstChild;
-        text-anchor="middle"
+  } else if (typeof element.icon === "string" && element.icon.startsWith("data:image")) {
-        x="50%"
+    const img = document.createElement("img");
-        y="50%"
+    img.src = element.icon;
-        dy=".35em"
+    img.style.width = "39px";
-        fill="var(--text-primary)"
+    img.style.height = "39px";
-        font-weight="bold"
+    image = img;
-        font-size="32"
+  } else {
-        dominant-baseline="middle">
+    image = stringToHTML(
-        ${element.icon}
+      /* html */`
-      </text>
+      <svg style="width:39px;height:39px" viewBox="0 0 40 40" class="shortcuticondiv">
-    </svg>
+        <text
-    `,
+          text-anchor="middle"
-  ).firstChild;
+          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;

src/seqta/utils/DisableRemove/RemoveShortcutDiv.ts

@@ -10,7 +10,7 @@ export function RemoveShortcutDiv(elements: any) {
       const textElement = shortcut.querySelector("p"); // <p> is a direct child of .shortcut
       const title = textElement ? textElement.textContent : "";
 
-      const elementName = links[element.name as keyof typeof links].DisplayName || element.name;
+      const elementName = links[element.name as keyof typeof links]?.DisplayName || element.name;
 
       let shouldRemove = title === elementName;
 

src/seqta/utils/Loaders/LoadHomePage.ts

@@ -1,58 +1,50 @@
-import { delay } from "../delay";
-import stringToHTML from "../stringToHTML";
 import { animate, stagger } from "motion";
-import { settingsState } from "../listeners/SettingsState";
-
-import { addShortcuts } from "../Adders/AddShortcuts";
-
 import browser from "webextension-polyfill";
-import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import LogoLight from "@/resources/icons/betterseqta-light-icon.png";
-import { CreateCustomShortcutDiv } from "@/seqta/utils/CreateEnable/CreateCustomShortcutDiv";
-
 import assessmentsicon from "@/seqta/icons/assessmentsIcon";
 import coursesicon from "@/seqta/icons/coursesIcon";
-
+import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
-import { FilterUpcomingAssessments } from "@/seqta/utils/FilterUpcomingAssessments";
+import { addShortcuts } from "../Adders/AddShortcuts";
-
-import { CreateElement } from "@/seqta/utils/CreateEnable/CreateElement";
-
 import { convertTo12HourFormat } from "../convertTo12HourFormat";
+import { delay } from "../delay";
+import { settingsState } from "../listeners/SettingsState";
+import stringToHTML from "../stringToHTML";
+import { CreateCustomShortcutDiv } from "@/seqta/utils/CreateEnable/CreateCustomShortcutDiv";
+import { CreateElement } from "@/seqta/utils/CreateEnable/CreateElement";
+import { FilterUpcomingAssessments } from "@/seqta/utils/FilterUpcomingAssessments";
+import { getMockNotices } from "@/seqta/ui/dev/hideSensitiveContent";
+import { setupFixedTooltips } from "@/seqta/utils/fixedTooltip";
 
 let LessonInterval: any;
 let currentSelectedDate = new Date();
+let loadingTimeout: any;
 
 export async function loadHomePage() {
   console.info("[BetterSEQTA+] Started Loading Home Page");
 
-  // Wait for the DOM to finish clearing
+  currentSelectedDate = new Date();
+
   await delay(10);
 
   document.title = "Home ― SEQTA Learn";
   const element = document.querySelector("[data-key=home]");
   element?.classList.add("active");
 
-  // Cache DOM queries
   const main = document.getElementById("main");
   if (!main) {
     console.error("[BetterSEQTA+] Main element not found.");
     return;
   }
 
-  // Create root container first
+  const homeRoot = stringToHTML(`<div id="home-root" class="home-root"></div>`);
-  const homeRoot = stringToHTML(
-    /* html */ `<div id="home-root" class="home-root"></div>`,
-  );
 
-  // Clear main and add home root
   main.innerHTML = "";
   main.appendChild(homeRoot?.firstChild!);
 
-  // Get reference to home container for all subsequent additions
   const homeContainer = document.getElementById("home-root");
   if (!homeContainer) return;
 
-  const skeletonStructure = stringToHTML(/* html */ `
+  const skeletonStructure = stringToHTML(`
       <div class="home-container" id="home-container">
         <div class="border shortcut-container">
           <div class="border shortcuts" id="shortcuts"></div>
@@ -90,10 +82,8 @@ export async function loadHomePage() {
         </div>
       </div>`);
 
-  // Add skeleton structure
   homeContainer.appendChild(skeletonStructure.firstChild!);
 
-  // Run animations if enabled
   if (settingsState.animations) {
     animate(
       ".home-container > div",
@@ -108,10 +98,8 @@ export async function loadHomePage() {
     );
   }
 
-  // Setup event listeners with cleanup
   const cleanup = setupTimetableListeners();
 
-  // Initialize shortcuts immediately
   try {
     addShortcuts(settingsState.shortcuts);
   } catch (err: any) {
@@ -119,13 +107,10 @@ export async function loadHomePage() {
   }
   AddCustomShortcutsToPage();
 
-  // Get current date
   const date = new Date();
   const TodayFormatted = formatDate(date);
 
-  // Start all data fetching in parallel
   const [timetablePromise, assessmentsPromise, classesPromise, prefsPromise] = [
-    // Timetable data
     fetch(`${location.origin}/seqta/student/load/timetable?`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -136,13 +121,10 @@ export async function loadHomePage() {
       }),
     }).then((res) => res.json()),
 
-    // Assessments data
     GetUpcomingAssessments(),
 
-    // Classes data
     GetActiveClasses(),
 
-    // Preferences data
     fetch(`${location.origin}/seqta/student/load/prefs?`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -150,7 +132,6 @@ export async function loadHomePage() {
     }).then((res) => res.json()),
   ];
 
-  // Process all data in parallel
   const [timetableData, assessments, classes, prefs] = await Promise.all([
     timetablePromise,
     assessmentsPromise,
@@ -158,7 +139,6 @@ export async function loadHomePage() {
     prefsPromise,
   ]);
 
-  // Process timetable data
   const dayContainer = document.getElementById("day-container");
   if (dayContainer && timetableData.payload.items.length > 0) {
     const lessonArray = timetableData.payload.items.sort((a: any, b: any) =>
@@ -166,7 +146,6 @@ export async function loadHomePage() {
     );
     const colours = await GetLessonColours();
 
-    // Process and display lessons
     dayContainer.innerHTML = "";
     for (let i = 0; i < lessonArray.length; i++) {
       const lesson = lessonArray[i];
@@ -198,7 +177,6 @@ export async function loadHomePage() {
       dayContainer.appendChild(div.firstChild!);
     }
 
-    // Check current lessons
     if (currentSelectedDate.getDate() === date.getDate()) {
       for (let i = 0; i < lessonArray.length; i++) {
         CheckCurrentLesson(lessonArray[i], i + 1);
@@ -206,7 +184,7 @@ export async function loadHomePage() {
       CheckCurrentLessonAll(lessonArray);
     }
   } else if (dayContainer) {
-    dayContainer.innerHTML = /* html */ `
+    dayContainer.innerHTML = `
         <div class="day-empty">
           <img src="${browser.runtime.getURL(LogoLight)}" />
           <p>No lessons available.</p>
@@ -214,7 +192,6 @@ export async function loadHomePage() {
   }
   dayContainer?.classList.remove("loading");
 
-  // Process assessments data
   const activeClass = classes.find((c: any) => c.hasOwnProperty("active"));
   const activeSubjects = activeClass?.subjects || [];
   const activeSubjectCodes = activeSubjects.map((s: any) => s.code);
@@ -228,7 +205,6 @@ export async function loadHomePage() {
     upcomingItems.classList.remove("loading");
   }
 
-  // Process notices data
   const labelArray = prefs.payload
     .filter((item: any) => item.name === "notices.filters")
     .map((item: any) => item.value);
@@ -273,6 +249,18 @@ function setupTimetableListeners() {
   const timetableForward = document.getElementById("home-timetable-forward");
 
   function changeTimetable(value: number) {
+    if (loadingTimeout) {
+      clearTimeout(loadingTimeout);
+    }
+
+    loadingTimeout = setTimeout(() => {
+      const dayContainer = document.getElementById("day-container");
+      if (dayContainer) {
+        dayContainer.classList.add("loading");
+        dayContainer.innerHTML = "";
+      }
+    }, 200);
+
     currentSelectedDate.setDate(currentSelectedDate.getDate() + value);
     const formattedDate = formatDate(currentSelectedDate);
     callHomeTimetable(formattedDate, true);
@@ -328,19 +316,25 @@ function setupNotices(labelArray: string[], date: string) {
   ) as HTMLInputElement;
 
   const fetchNotices = async (date: string) => {
-    const response = await fetch(
+    let data;
-      `${location.origin}/seqta/student/load/notices?`,
+
-      {
+    if (settingsState.mockNotices) {
-        method: "POST",
+      data = getMockNotices();
-        headers: { "Content-Type": "application/json; charset=utf-8" },
+    } else {
-        body: JSON.stringify({ date }),
+      const response = await fetch(
-      },
+        `${location.origin}/seqta/student/load/notices?`,
-    );
+        {
-    const data = await response.json();
+          method: "POST",
+          headers: { "Content-Type": "application/json; charset=utf-8" },
+          body: JSON.stringify({ date }),
+        },
+      );
+      data = await response.json();
+    }
+
     processNotices(data, labelArray);
   };
 
-  // Debounce the input handler
   const debouncedInputChange = debounce((e: Event) => {
     const target = e.target as HTMLInputElement;
     fetchNotices(target.value);
@@ -387,7 +381,6 @@ function processNotices(response: any, labelArray: string[]) {
   const NoticeContainer = document.getElementById("notice-container");
   if (!NoticeContainer) return;
 
-  // Clear existing notices
   NoticeContainer.innerHTML = "";
 
   const notices = response.payload;
@@ -399,19 +392,20 @@ function processNotices(response: any, labelArray: string[]) {
     return;
   }
 
-  // Create document fragment for batch DOM updates
   const fragment = document.createDocumentFragment();
 
-  // Process notices in batch
   notices.forEach((notice: any) => {
-    if (labelArray.includes(JSON.stringify(notice.label))) {
+    const shouldInclude =
+      settingsState.mockNotices ||
+      labelArray.includes(JSON.stringify(notice.label));
+
+    if (shouldInclude) {
       const colour = processNoticeColor(notice.colour);
       const noticeElement = createNoticeElement(notice, colour);
       fragment.appendChild(noticeElement);
     }
   });
 
-  // Single DOM update
   NoticeContainer.appendChild(fragment);
 }
 
@@ -426,132 +420,436 @@ function processNoticeColor(colour: string): string | undefined {
 }
 
 function createNoticeElement(notice: any, colour: string | undefined): Node {
-  const htmlContent = `
+  const cleanContent = notice.contents
-      <div class="notice" style="--colour: ${colour}">
+    .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
-        <h3 style="color:var(--colour)">${notice.title}</h3>
+    .replace(/ +/, " ");
-        ${notice.label_title !== undefined ? `<h5 style="color:var(--colour)">${notice.label_title}</h5>` : ""}
+  const noticeId = `notice-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        <h6 style="color:var(--colour)">${notice.staff}</h6>
-        ${notice.contents.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "").replace(/ +/, " ")}
-        <div class="colourbar" style="background: var(--colour)"></div>
-      </div>`;
 
-  const element = stringToHTML(htmlContent).firstChild;
+  const htmlContent = `
-  if (element instanceof HTMLElement) {
+    <div class="notice-unified-content notice-card-state" data-notice-id="${noticeId}" style="--colour: ${colour || "#8e8e8e"}; position: relative; background: var(--background-primary); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);">
-    element.style.setProperty("--colour", colour ?? "");
+      <div class="notice-header">
+        <div class="notice-badge-row">
+          <span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
+            ${notice.label_title || "General"}
+          </span>
+          <span class="notice-staff">${notice.staff}</span>
+        </div>
+        <button class="notice-close-btn" style="opacity: 0; pointer-events: none;">&times;</button>
+      </div>
+      <h2 class="notice-content-title">${notice.title}</h2>
+      <div class="notice-content-body">${cleanContent}</div>
+    </div>`;
+
+  const element = stringToHTML(htmlContent).firstChild as HTMLElement;
+  if (element) {
+    element.addEventListener("click", () =>
+      openNoticeModal(notice, colour, element),
+    );
   }
   return element!;
 }
 
+function openNoticeModal(
+  notice: any,
+  colour: string | undefined,
+  sourceElement: HTMLElement,
+) {
+  const cleanContent = notice.contents
+    .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
+    .replace(/ +/, " ");
+
+  const existingModal = document.getElementById("notice-modal");
+  if (existingModal) {
+    existingModal.remove();
+  }
+
+  const sourceRect = sourceElement.getBoundingClientRect();
+  let scrollY = Math.round(window.scrollY);
+  let scrollX = Math.round(window.scrollX);
+
+  let sourceLeft = sourceRect.left;
+  let sourceTop = sourceRect.top;
+  let sourceWidth = sourceRect.width;
+  let sourceHeight = sourceRect.height;
+
+  const modalHtml = `
+    <div id="notice-modal" class="notice-modal-overlay" style="opacity: 0;">
+      <div class="notice-modal-transition" style="
+        position: fixed;
+        left: ${sourceLeft + scrollX}px;
+        top: ${sourceTop + scrollY}px;
+        width: ${sourceWidth}px;
+        height: ${sourceHeight}px;
+        transform-origin: center;
+        z-index: 10001;
+      ">
+        <div class="notice-modal-content notice-transitioning">
+          <div class="notice-unified-content notice-card-state">
+            <div class="notice-header">
+              <div class="notice-badge-row">
+                <span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
+                  ${notice.label_title || "General"}
+                </span>
+                <span class="notice-staff">${notice.staff}</span>
+              </div>
+              <button class="notice-close-btn">&times;</button>
+            </div>
+            <h2 class="notice-content-title">${notice.title}</h2>
+            <div class="notice-content-body">${cleanContent}</div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+
+  const modal = stringToHTML(modalHtml).firstChild as HTMLElement;
+  const transitionContainer = modal.querySelector(
+    ".notice-modal-transition",
+  ) as HTMLElement;
+  const unifiedContent = modal.querySelector(
+    ".notice-unified-content",
+  ) as HTMLElement;
+  const closeBtn = modal.querySelector(".notice-close-btn") as HTMLElement;
+
+  document.body.appendChild(modal);
+
+  sourceElement.setAttribute("data-transitioning", "true");
+  sourceElement.style.opacity = "0";
+  sourceElement.style.transform = "scale(0.95)";
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  let targetWidth = Math.round(
+    Math.min(Math.max(sourceWidth, 800), viewportWidth - 40),
+  );
+
+  const tempMeasureDiv = document.createElement("div");
+  tempMeasureDiv.style.position = "absolute";
+  tempMeasureDiv.style.left = "-9999px";
+  tempMeasureDiv.style.width = targetWidth + "px";
+  tempMeasureDiv.style.visibility = "hidden";
+  tempMeasureDiv.innerHTML = `
+    <div class="notice-unified-content notice-modal-state" style="position: relative; width: 100%; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.1);">
+      <div class="notice-header">
+        <div class="notice-badge-row">
+          <span class="notice-badge">${notice.label_title || "General"}</span>
+          <span class="notice-staff">${notice.staff}</span>
+        </div>
+        <button class="notice-close-btn">&times;</button>
+      </div>
+      <h2 class="notice-content-title">${notice.title}</h2>
+      <div class="notice-content-body">${cleanContent}</div>
+    </div>
+  `;
+  document.body.appendChild(tempMeasureDiv);
+  const measuredHeight =
+    tempMeasureDiv.firstElementChild!.getBoundingClientRect().height;
+  document.body.removeChild(tempMeasureDiv);
+
+  let targetHeight = Math.round(
+    Math.min(Math.max(measuredHeight, 200), viewportHeight * 0.85),
+  );
+
+  let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
+  let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
+
+  const closeModal = () => {
+    window.removeEventListener("resize", handleResize);
+    document.removeEventListener("keydown", handleEscape);
+
+    if (!settingsState.animations) {
+      modal.remove();
+      sourceElement.style.opacity = "1";
+      sourceElement.style.transform = "";
+      sourceElement.removeAttribute("data-transitioning");
+      return;
+    }
+
+    animate(
+      modal,
+      {
+        backgroundColor: ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0)"],
+        backdropFilter: ["blur(4px)", "blur(0px)"],
+      },
+      { duration: 0.2 },
+    );
+
+    animate(
+      transitionContainer,
+      { opacity: [1, 0] },
+      { duration: 0.2, delay: 0.3 },
+    );
+
+    sourceElement.style.opacity = "1";
+    sourceElement.style.transform = "";
+
+    modal.style.pointerEvents = "none";
+
+    animate(
+      transitionContainer,
+      {
+        left: [targetLeft + scrollX, sourceLeft + scrollX],
+        top: [targetTop, sourceTop + scrollY],
+        width: [targetWidth, sourceWidth],
+        height: [targetHeight, sourceHeight],
+        scale: [1, 1],
+      },
+      {
+        duration: 0.35,
+        type: "spring",
+        stiffness: 400,
+        damping: 35,
+      },
+    ).finished.then(async () => {
+      modal.remove();
+      sourceElement.removeAttribute("data-transitioning");
+    });
+  };
+
+  closeBtn?.addEventListener("click", closeModal);
+  modal?.addEventListener("click", (e) => {
+    if (e.target === modal) {
+      closeModal();
+    }
+  });
+
+  const handleEscape = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      closeModal();
+      document.removeEventListener("keydown", handleEscape);
+      window.removeEventListener("resize", handleResize);
+    }
+  };
+  document.addEventListener("keydown", handleEscape);
+
+  const handleResize = () => {
+    const newSourceRect = sourceElement.getBoundingClientRect();
+    const newScrollY = Math.round(window.scrollY);
+    const newScrollX = Math.round(window.scrollX);
+
+    // Get the current scale applied to the source element and compensate for it
+    const computedStyle = getComputedStyle(sourceElement);
+    const transform = computedStyle.transform;
+    let scaleX = 1,
+      scaleY = 1;
+
+    if (transform && transform !== "none") {
+      const matrix = transform.match(/matrix.*\((.+)\)/);
+      if (matrix) {
+        const values = matrix[1].split(", ");
+        scaleX = parseFloat(values[0]);
+        scaleY = parseFloat(values[3]);
+      }
+    }
+
+    // Apply inverse scale to get true original dimensions and positions
+    const newSourceWidth = newSourceRect.width / scaleX;
+    const newSourceHeight = newSourceRect.height / scaleY;
+
+    // Calculate position shift due to center-based scaling
+    const deltaX = (newSourceWidth - newSourceRect.width) / 2;
+    const deltaY = (newSourceHeight - newSourceRect.height) / 2;
+
+    const newSourceLeft = newSourceRect.left - deltaX;
+    const newSourceTop = newSourceRect.top - deltaY;
+
+    const newViewportWidth = window.innerWidth;
+    const newViewportHeight = window.innerHeight;
+    const newTargetWidth = Math.round(
+      Math.min(Math.max(newSourceWidth, 800), newViewportWidth - 40),
+    );
+
+    // Just measure the existing modal content
+    const currentHeight = unifiedContent.getBoundingClientRect().height;
+    const newTargetHeight = Math.round(
+      Math.min(Math.max(currentHeight, 200), newViewportHeight * 0.85),
+    );
+
+    const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
+    const newTargetTop =
+      Math.round((newViewportHeight - newTargetHeight) / 2) + newScrollY;
+
+    transitionContainer.style.left =
+      Math.round(newTargetLeft + newScrollX) + "px";
+    transitionContainer.style.top = Math.round(newTargetTop) + "px";
+    transitionContainer.style.width = Math.round(newTargetWidth) + "px";
+    transitionContainer.style.height = Math.round(newTargetHeight) + "px";
+
+    sourceLeft = newSourceLeft;
+    sourceTop = newSourceTop;
+    sourceWidth = newSourceWidth;
+    sourceHeight = newSourceHeight;
+    targetLeft = newTargetLeft;
+    targetTop = newTargetTop;
+    targetWidth = newTargetWidth;
+    targetHeight = newTargetHeight;
+    scrollY = newScrollY;
+    scrollX = newScrollX;
+  };
+
+  window.addEventListener("resize", handleResize);
+
+  if (settingsState.animations) {
+    animate(modal, { opacity: [0, 1] }, { duration: 0.2 });
+
+    animate(
+      transitionContainer,
+      {
+        left: [sourceLeft + scrollX, targetLeft + scrollX],
+        top: [sourceTop + scrollY, targetTop],
+        width: [sourceWidth, targetWidth],
+        height: [sourceHeight, targetHeight],
+        scale: [1, 1],
+      },
+      {
+        duration: 0.5,
+        type: "spring",
+        stiffness: 280,
+        damping: 24,
+      },
+    );
+
+    unifiedContent.classList.remove("notice-card-state");
+    unifiedContent.classList.add("notice-modal-state");
+  } else {
+    modal.style.opacity = "1";
+    transitionContainer.style.left = Math.round(targetLeft + scrollX) + "px";
+    transitionContainer.style.top = Math.round(targetTop) + "px";
+    transitionContainer.style.width = Math.round(targetWidth) + "px";
+    transitionContainer.style.height = Math.round(targetHeight) + "px";
+    unifiedContent.classList.remove("notice-card-state");
+    unifiedContent.classList.add("notice-modal-state");
+  }
+}
+
 function callHomeTimetable(date: string, change?: any) {
-  // Creates a HTTP Post Request to the SEQTA page for the students timetable
   var xhr = new XMLHttpRequest();
   xhr.open("POST", `${location.origin}/seqta/student/load/timetable?`, true);
-  // Sets the response type to json
+
   xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
 
   xhr.onreadystatechange = function () {
-    // Once the response is ready
     if (xhr.readyState === 4) {
-      var serverResponse = JSON.parse(xhr.response);
+      if (loadingTimeout) {
-      let lessonArray: Array<any> = [];
+        clearTimeout(loadingTimeout);
+        loadingTimeout = null;
+      }
+
       const DayContainer = document.getElementById("day-container")!;
-      // If items in response:
-      if (serverResponse.payload.items.length > 0) {
-        if (DayContainer.innerText || change) {
-          for (let i = 0; i < serverResponse.payload.items.length; i++) {
-            lessonArray.push(serverResponse.payload.items[i]);
-          }
-          lessonArray.sort(function (a, b) {
-            return a.from.localeCompare(b.from);
-          });
-          // If items in the response, set each corresponding value into divs
-          // lessonArray = lessonArray.splice(1)
-          GetLessonColours().then((colours) => {
-            let subjects = colours;
-            for (let i = 0; i < lessonArray.length; i++) {
-              let subjectname = `timetable.subject.colour.${lessonArray[i].code}`;
 
-              let subject = subjects.find(
+      try {
-                (element: any) => element.name === subjectname,
+        var serverResponse = JSON.parse(xhr.response);
-              );
+        let lessonArray: Array<any> = [];
-              if (!subject) {
-                lessonArray[i].colour = "--item-colour: #8e8e8e;";
-              } else {
-                lessonArray[i].colour = `--item-colour: ${subject.value};`;
-                let result = GetThresholdOfColor(subject.value);
 
-                if (result > 300) {
+        if (serverResponse.payload.items.length > 0) {
-                  lessonArray[i].invert = true;
+          if (DayContainer.innerText || change) {
-                }
+            for (let i = 0; i < serverResponse.payload.items.length; i++) {
-              }
+              lessonArray.push(serverResponse.payload.items[i]);
-              // Removes seconds from the start and end times
-              lessonArray[i].from = lessonArray[i].from.substring(0, 5);
-              lessonArray[i].until = lessonArray[i].until.substring(0, 5);
-
-              if (settingsState.timeFormat === "12") {
-                lessonArray[i].from = convertTo12HourFormat(
-                  lessonArray[i].from,
-                );
-                lessonArray[i].until = convertTo12HourFormat(
-                  lessonArray[i].until,
-                );
-              }
-
-              // Checks if attendance is unmarked, and sets the string to " ".
-              lessonArray[i].attendanceTitle = CheckUnmarkedAttendance(
-                lessonArray[i].attendance,
-              );
             }
-            // If on home page, apply each lesson to HTML with information in each div
+            lessonArray.sort(function (a, b) {
-            DayContainer.innerText = "";
+              return a.from.localeCompare(b.from);
-            for (let i = 0; i < lessonArray.length; i++) {
+            });
-              var div = makeLessonDiv(lessonArray[i], i + 1);
-              // Append each of the lessons into the day-container
-              if (lessonArray[i].invert) {
-                const div1 = div.firstChild! as HTMLElement;
-                div1.classList.add("day-inverted");
-              }
 
-              DayContainer.append(div.firstChild as HTMLElement);
+            GetLessonColours().then((colours) => {
-            }
+              let subjects = colours;
-
-            const today = new Date();
-            if (currentSelectedDate.getDate() == today.getDate()) {
               for (let i = 0; i < lessonArray.length; i++) {
-                CheckCurrentLesson(lessonArray[i], i + 1);
+                let subjectname = `timetable.subject.colour.${lessonArray[i].code}`;
+
+                let subject = subjects.find(
+                  (element: any) => element.name === subjectname,
+                );
+                if (!subject) {
+                  lessonArray[i].colour = "--item-colour: #8e8e8e;";
+                } else {
+                  lessonArray[i].colour = `--item-colour: ${subject.value};`;
+                  let result = GetThresholdOfColor(subject.value);
+
+                  if (result > 300) {
+                    lessonArray[i].invert = true;
+                  }
+                }
+
+                lessonArray[i].from = lessonArray[i].from.substring(0, 5);
+                lessonArray[i].until = lessonArray[i].until.substring(0, 5);
+
+                if (settingsState.timeFormat === "12") {
+                  lessonArray[i].from = convertTo12HourFormat(
+                    lessonArray[i].from,
+                  );
+                  lessonArray[i].until = convertTo12HourFormat(
+                    lessonArray[i].until,
+                  );
+                }
+
+                lessonArray[i].attendanceTitle = CheckUnmarkedAttendance(
+                  lessonArray[i].attendance,
+                );
               }
-              // For each lesson, check the start and end times
+
-              CheckCurrentLessonAll(lessonArray);
+              DayContainer.innerText = "";
-            }
+              for (let i = 0; i < lessonArray.length; i++) {
-          });
+                var div = makeLessonDiv(lessonArray[i], i + 1);
+
+                if (lessonArray[i].invert) {
+                  const div1 = div.firstChild! as HTMLElement;
+                  div1.classList.add("day-inverted");
+                }
+
+                DayContainer.append(div.firstChild as HTMLElement);
+              }
+
+              DayContainer.classList.remove("loading");
+
+              const today = new Date();
+              if (currentSelectedDate.getDate() == today.getDate()) {
+                for (let i = 0; i < lessonArray.length; i++) {
+                  CheckCurrentLesson(lessonArray[i], i + 1);
+                }
+
+                CheckCurrentLessonAll(lessonArray);
+              }
+            });
+          }
+        } else {
+          DayContainer.innerHTML = "";
+          var dummyDay = document.createElement("div");
+          dummyDay.classList.add("day-empty");
+          let img = document.createElement("img");
+          img.src = browser.runtime.getURL(LogoLight);
+          let text = document.createElement("p");
+          text.innerText = "No lessons available.";
+          dummyDay.append(img);
+          dummyDay.append(text);
+          DayContainer.append(dummyDay);
+
+          DayContainer.classList.remove("loading");
         }
-      } else {
+      } catch (error) {
+        console.error("Error loading timetable data:", error);
+
+        DayContainer.classList.remove("loading");
+
         DayContainer.innerHTML = "";
-        var dummyDay = document.createElement("div");
+        const errorDiv = document.createElement("div");
-        dummyDay.classList.add("day-empty");
+        errorDiv.classList.add("day-empty");
-        let img = document.createElement("img");
+        errorDiv.innerHTML = `
-        img.src = browser.runtime.getURL(LogoLight);
+          <img src="${browser.runtime.getURL(LogoLight)}" />
-        let text = document.createElement("p");
+          <p>Error loading lessons. Please try again.</p>
-        text.innerText = "No lessons available.";
+        `;
-        dummyDay.append(img);
+        DayContainer.append(errorDiv);
-        dummyDay.append(text);
-        DayContainer.append(dummyDay);
       }
     }
   };
   xhr.send(
     JSON.stringify({
-      // Information sent to SEQTA page as a request with the dates and student number
       from: date,
       until: date,
-      // Funny number
+
       student: 69,
     }),
   );
 }
 
 function CheckCurrentLessonAll(lessons: any) {
-  // Checks each lesson and sets an interval to run every 60 seconds to continue updating
   LessonInterval = setInterval(
     function () {
       for (let i = 0; i < lessons.length; i++) {
@@ -573,7 +871,6 @@ async function CheckCurrentLesson(lesson: any, num: number) {
   } = lesson;
   const currentDate = new Date();
 
-  // Create Date objects for start and end times
   const [startHour, startMinute] = startTime.split(":").map(Number);
   const [endHour, endMinute] = endTime.split(":").map(Number);
 
@@ -583,7 +880,6 @@ async function CheckCurrentLesson(lesson: any, num: number) {
   const endDate = new Date(currentDate);
   endDate.setHours(endHour, endMinute, 0);
 
-  // Check if the current time is within the lesson time range
   const isValidTime = startDate < currentDate && endDate > currentDate;
 
   const elementId = `${code}${num}`;
@@ -646,8 +942,7 @@ function makeLessonDiv(lesson: any, num: number) {
     assessments,
   } = lesson;
 
-  // Construct the base lesson string with default values using ternary operators
+  let lessonString = `
-  let lessonString = /* html */ `
       <div class="day" id="${code + num}" style="${colour}">
         <h2>${description || "Unknown"}</h2>
         <h3>${staff || "Unknown"}</h3>
@@ -656,15 +951,13 @@ function makeLessonDiv(lesson: any, num: number) {
         <h5>${attendanceTitle || "Unknown"}</h5>
     `;
 
-  // Add buttons for assessments and courses if applicable
   if (programmeID !== 0) {
-    lessonString += /* html */ `
+    lessonString += `
         <div class="day-button clickable" style="right: 5px;" onclick="location.href='${buildAssessmentURL(programmeID, metaID)}'">${assessmentsicon}</div>
         <div class="day-button clickable" style="right: 35px;" onclick="location.href='../#?page=/courses/${programmeID}:${metaID}'">${coursesicon}</div>
       `;
   }
 
-  // Add assessments if they exist
   if (assessments && assessments.length > 0) {
     const assessmentString = assessments
       .map(
@@ -673,8 +966,8 @@ function makeLessonDiv(lesson: any, num: number) {
       )
       .join("");
 
-    lessonString += /* html */ `
+    lessonString += `
-        <div class="tooltip assessmenttooltip">
+        <div class="fixed-tooltip assessmenttooltip">
           <svg style="width:28px;height:28px;border-radius:0;" viewBox="0 0 24 24">
             <path fill="#ed3939" d="M16 2H4C2.9 2 2 2.9 2 4V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V4C18 2.9 17.11 2 16 2M16 20H4V4H6V12L8.5 9.75L11 12V4H16V20M20 15H22V17H20V15M22 7V13H20V7H22Z" />
           </svg>
@@ -684,8 +977,9 @@ function makeLessonDiv(lesson: any, num: number) {
   }
 
   lessonString += "</div>";
-
+  const element = stringToHTML(lessonString);
-  return stringToHTML(lessonString);
+  setupFixedTooltips(element);
+  return element;
 }
 
 function buildAssessmentURL(programmeID: any, metaID: any, itemID = "") {
@@ -711,7 +1005,6 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
 
   var Today = new Date();
 
-  // Removes overdue assessments from the upcoming assessments array and pushes to overdue array
   for (let i = 0; i < assessments.length; i++) {
     const assessment = assessments[i];
     let assessmentdue = new Date(assessment.due);
@@ -741,7 +1034,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
       assessments[i].colour = "--item-colour: #8e8e8e;";
     } else {
       assessments[i].colour = `--item-colour: ${subject.value};`;
-      GetThresholdOfColor(subject.value); // result (originally) result = GetThresholdOfColor
+      GetThresholdOfColor(subject.value);
     }
   }
 
@@ -762,9 +1055,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
 
   CreateFilters(activeSubjects);
 
-  // @ts-ignore
   let type;
-  // @ts-ignore
   let class_;
 
   for (let i = 0; i < assessments.length; i++) {
@@ -772,10 +1063,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
     if (!upcomingDates[element.due as keyof typeof upcomingDates]) {
       let dateObj: any = new Object();
       dateObj.div = CreateElement(
-        // TODO: not sure whats going on here?
-        // eslint-disable-next-line
         (type = "div"),
-        // eslint-disable-next-line
         (class_ = "upcoming-date-container"),
       );
       dateObj.assessments = [];
@@ -804,7 +1092,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
       assessmentDate = createAssessmentDateDiv(
         date,
         upcomingDates[date as keyof typeof upcomingDates],
-        // eslint-disable-next-line
+
         datecase,
       );
     } else {
@@ -909,9 +1197,6 @@ function createAssessmentDateDiv(date: string, value: any, datecase?: any) {
         if (response.payload.length > 0) {
           const assessment = document.querySelector(`#assessment${element.id}`);
 
-          // ticksvg = stringToHTML(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="var(--item-colour)" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>`).firstChild
-          // ticksvg.classList.add('upcoming-tick')
-          // assessment.append(ticksvg)
           let submittedtext = document.createElement("div");
           submittedtext.classList.add("upcoming-submittedtext");
           submittedtext.innerText = "Submitted";
@@ -968,7 +1253,7 @@ function CreateFilters(subjects: any) {
   let filterdiv = document.querySelector("#upcoming-filters");
   for (let i = 0; i < subjects.length; i++) {
     const element = subjects[i];
-    // eslint-disable-next-line
+
     if (!Object.prototype.hasOwnProperty.call(filteroptions, element.code)) {
       filteroptions[element.code] = true;
       settingsState.subjectfilters = filteroptions;

src/seqta/utils/Openers/OpenAboutPage.ts

@@ -21,13 +21,22 @@ export function OpenAboutPage() {
   ).firstChild;
 
   let text = stringToHTML(/* html */ `
-      <div class="whatsnewTextContainer" style="overflow-y: scroll;">
+      <div class="whatsnewTextContainer" style="overflow-y: hidden;">
         <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 (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 useful features. If you want to make a feature request or report a bug, you can do so on GitHub (find icon below). We are always looking for more contributors!</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, SethBurkart123 and other contributors.</p>
+        <p style="margin: 0;">
+  Nulkem created the original extension, was ported to Manifest V3 by MEGA-Dawg68, and is under active development by Crazypersonalph, SethBurkart123, and other contributors.
+</p>
+  <h1 style="text-align: left; font-weight: bold; margin: 0;">
+    All Contributors:
+  </h1>
+<div style="max-width: 600px; margin: auto;">
+  <img
+    src="https://contrib.rocks/image?repo=BetterSEQTA/BetterSEQTA-Plus&columns=13"
+    style="width: 100%; max-width: 500px; height: auto; object-fit: contain; display: block; margin: -110px auto 0;">
+</div>
       </div>
     `).firstChild;
 
@@ -35,18 +44,18 @@ export function OpenAboutPage() {
       <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;">
+          <a class="socials" href="https://github.com/BetterSEQTA/BetterSEQTA-Plus" style="background: none !important; margin: 0 5px; padding: 0; display: flex; align-items: center;">
-            <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">
+           <svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 256 250" preserveAspectRatio="xMidYMid" style="vertical-align: middle;">
               <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;">
+         <a class="socials" href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel" style="background: none !important; margin: 0 5px; padding: 0; display: flex; align-items: center;">
-            <svg style="width:25px;height:25px" viewBox="0 0 24 24">
+           <svg style="width:25px; height:25px; vertical-align: middle;" 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;">
+          <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0; display: flex; align-items: center;">
-            <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
+            <svg style="width: 25px; height: 25px; vertical-align: middle;" 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>

src/seqta/utils/SendNewsPage.ts

@@ -9,7 +9,7 @@ import { animate, stagger } from "motion";
 export async function SendNewsPage() {
   console.info("[BetterSEQTA+] Started Loading News Page");
   document.title = "News ― SEQTA Learn";
-  await delay(100);
+  await delay(10);
 
   const element = document.querySelector("[data-key=news]");
   element!.classList.add("active");

src/seqta/utils/Whatsnew.ts

@@ -55,11 +55,40 @@ export function OpenWhatsNewPopup() {
   video.classList.add("whatsnewImg");
   imagecont.appendChild(video);
 
+  /* let whatsnewimg = document.createElement("img");
+  //whatsnewimg.src = "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/update-image.webp";
+  whatsnewimg.src = browser.runtime.getURL('../../resources/update-image.webp');
+  whatsnewimg.classList.add("whatsnewImg");
+  imagecont.appendChild(whatsnewimg); */
+
   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.8 - Improvements!</h1>
+      <li>Added new assessments kanban overview</li>
+      <li>Added custom pictures</li>
+      <li>Added custom shortcut icons</li>
+      <li>Added modern and animated notices on homepage</li>
+      <li>Improved global search performance and bug fixes</li>
+      <li>Fixed sidebar icons reverting to old style after reload</li>
+      <li>Fixed settings popup not appearing on disabled pages</li>
+      <li>Fixed 12-hour time not applying correctly in timetable</li>
+      <li>Fixed background flickering on page load</li>
+      <li>Fixed homepage lessons not properly changing days</li>
+      <li>Performance improvements for global search</li>
+      <li>Performance improvements across the extension</li>
+      <li>Other bug fixes and improvements</li>
+
+      <h1>3.4.7 - Global Search</h1>
+      <li>Added a new global search bar (enable in settings)
+        <span class="beta">beta</span>
+      </li>
+      <li>Fixed news feed not loading</li>
+      <li>Style changes and improvements</li>
+      <li>Other bug fixes</li>
+
       <h1>3.4.6.1 - Hot patch!</h1>
       <li>Fixed storage not updating and sometimes being replaced with default values</li>
 
@@ -243,26 +272,25 @@ export function OpenWhatsNewPopup() {
   let footer = stringToHTML(/* html */ `
       <div class="whatsnewFooter">
         <div>
-        Report bugs and feedback:
+         Report bugs and feedback: 
-          <a class="socials" href="https://github.com/BetterSEQTA/BetterSEQTA-Plus" style="background: none !important; margin: 0 5px; padding:0;">
+          <a class="socials" href="https://github.com/BetterSEQTA/BetterSEQTA-Plus" style="background: none !important; margin: 0 5px; padding: 0; display: flex; align-items: center;">
-            <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">
+           <svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 256 250" preserveAspectRatio="xMidYMid" style="vertical-align: middle;">
               <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;">
+         <a class="socials" href="https://chromewebstore.google.com/detail/betterseqta+/afdgaoaclhkhemfkkkonemoapeinchel" style="background: none !important; margin: 0 5px; padding: 0; display: flex; align-items: center;">
-            <svg style="width:25px;height:25px" viewBox="0 0 24 24">
+           <svg style="width:25px; height:25px; vertical-align: middle;" 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;">
+          <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0; display: flex; align-items: center;">
-            <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
+            <svg style="width: 25px; height: 25px; vertical-align: middle;" 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;">
+          <a href="https://ko-fi.com/sethburkart" target="_blank" style="background: none !important; margin:0;margin-left:6px; padding:0; display: flex; align-items: center;">
            <img height="25" style="border:0px; height:25px; margin-right: -6px;" src="${kofi}" border="0" alt="Buy Me a Coffee at ko-fi.com" />
           </a>
         </div>

src/seqta/utils/convertTo12HourFormat.ts

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

src/seqta/utils/delay.ts

@@ -1,3 +1,12 @@
+/**
+ * Pauses execution for a specified number of milliseconds.
+ *
+ * This function returns a Promise that resolves after the given delay,
+ * allowing it to be used with `async/await` to pause asynchronous operations.
+ *
+ * @param {number} ms The number of milliseconds to delay.
+ * @returns {Promise<void>} A Promise that resolves after the specified delay.
+ */
 export function delay(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

src/seqta/utils/fixedTooltip.ts

@@ -0,0 +1,59 @@
+export function setupFixedTooltips(root: Document | HTMLElement = document) {
+  const elements = root.querySelectorAll<HTMLElement>(".fixed-tooltip");
+  elements.forEach((tooltip) => {
+    const text = tooltip.querySelector<HTMLElement>(".tooltiptext");
+    if (!text) return;
+    tooltip.removeChild(text);
+    text.classList.add("tooltiptext-fixed");
+
+    let hideTimeout: number | undefined;
+
+    const show = () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = undefined;
+      }
+      document.body.appendChild(text);
+      const rect = tooltip.getBoundingClientRect();
+      text.style.left = `${rect.left + rect.width / 2}px`;
+      text.style.top = `${rect.bottom + 5}px`;
+      requestAnimationFrame(() => text.classList.add("show"));
+    };
+
+    const scheduleHide = () => {
+      hideTimeout = window.setTimeout(() => {
+        text.classList.remove("show");
+        setTimeout(() => {
+          if (text.parentElement === document.body) {
+            document.body.removeChild(text);
+          }
+        }, 200);
+      }, 300);
+    };
+
+    tooltip.addEventListener("mouseenter", show);
+    tooltip.addEventListener("mouseleave", scheduleHide);
+    tooltip.addEventListener("blur", scheduleHide);
+    tooltip.addEventListener("click", scheduleHide);
+
+    text.addEventListener("mouseenter", () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = undefined;
+      }
+    });
+    text.addEventListener("mouseleave", scheduleHide);
+    text.addEventListener("click", () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = undefined;
+      }
+      text.classList.remove("show");
+      setTimeout(() => {
+        if (text.parentElement === document.body) {
+          document.body.removeChild(text);
+        }
+      }, 200);
+    });
+  });
+}

src/seqta/utils/hideSensitiveToggle.ts

@@ -0,0 +1,18 @@
+import { settingsState } from "./listeners/SettingsState";
+import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent";
+
+function maybeHide() {
+  if (settingsState.hideSensitiveContent) {
+    hideSensitiveContent();
+  }
+}
+
+export function initializeHideSensitiveToggle() {
+  maybeHide();
+  window.addEventListener("hashchange", maybeHide);
+  settingsState.register("hideSensitiveContent", (val) => {
+    if (val) {
+      maybeHide();
+    }
+  });
+}

src/seqta/utils/mutex.ts

@@ -1,12 +1,51 @@
-// Simple mutex implementation
+/**
+ * @callback UnlockFunction
+ * @description A function that must be called to release the mutex.
+ * @returns {void}
+ */
+
+/**
+ * A simple mutex implementation for managing asynchronous operations.
+ * It ensures that only one operation can hold the lock at a time.
+ * Operations queue up and are granted access sequentially.
+ */
 export class Mutex {
   private mutex = Promise.resolve();
 
-  lock(): PromiseLike<() => void> {
+  /**
-    let begin: (unlock: () => void) => void;
+   * Acquires the mutex.
+   *
+   * This method returns a Promise that resolves with an {@link UnlockFunction}.
+   * The calling code *must* call this {@link UnlockFunction} to release the mutex
+   * once the critical section of code has completed.
+   *
+   * If the mutex is already locked, this method will wait until it is released
+   * before resolving the Promise.
+   *
+   * @returns {Promise<UnlockFunction>} A Promise that resolves with the function to call to release the lock.
+   */
+  acquire(): Promise<() => void> {
+    let begin: (unlock: () => void) => void = () => {}; // Initialize with a no-op
 
-    this.mutex = this.mutex.then(() => new Promise(begin));
+    const newPromise = new Promise<void>((resolve) => {
+      begin = resolve;
+    });
 
-    return new Promise((res) => (begin = res));
+    const chainedPromise = this.mutex.then(() => {
+      return new Promise<() => void>((resolveOuter) => {
+        // The 'begin' function, when called, will resolve the newPromise,
+        // effectively passing control to the next then() in the chain.
+        // We pass 'begin' itself as the unlock function.
+        // So, when the user calls unlock (which is 'begin'), newPromise resolves.
+        resolveOuter(begin);
+      });
+    });
+    
+    this.mutex = newPromise;
+
+    return chainedPromise;
   }
+
+  // Note: There isn't a separate `release()` method in this pattern.
+  // The lock is released by calling the function returned by `acquire()`.
 }

src/seqta/utils/stringToHTML.ts

@@ -1,5 +1,17 @@
 import DOMPurify from "dompurify";
 
+/**
+ * Converts an HTML string into a DOM element, with sanitization and optional styling.
+ *
+ * This function first sanitizes the input HTML string using DOMPurify to prevent XSS attacks.
+ * The sanitization process allows 'onclick' attributes and specific URI schemes.
+ * Then, it parses the sanitized string into an HTML document and returns its body.
+ * Optionally, it can apply predefined CSS styles to the body element.
+ *
+ * @param {string} str The HTML string to convert.
+ * @param {boolean} [styles=false] Whether to apply predefined styles to the document body.
+ * @returns {HTMLElement} The body element of the parsed and sanitized HTML document.
+ */
 export default function stringToHTML(str: string, styles = false) {
   const parser = new DOMParser();
 

src/seqta/utils/updateTimetableTimes.ts

@@ -0,0 +1,176 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { convertTo12HourFormat } from "./convertTo12HourFormat";
+import { waitForElm } from "./waitForElm";
+
+let timetableObserver: MutationObserver | null = null;
+let isOnTimetablePage = false;
+let isInitialized = false;
+let abortController: AbortController | null = null;
+
+function updateTimeElements(): void {
+  if (!settingsState.timeFormat || settingsState.timeFormat !== "12") return;
+
+  const timetablePage = document.querySelector(".timetablepage");
+  if (!timetablePage) return;
+
+  const times = timetablePage.querySelectorAll<HTMLElement>(".content .times .time");
+  times.forEach((el) => {
+    if (!el.dataset.original) el.dataset.original = el.textContent || "";
+    const original = el.dataset.original;
+    if (!original) return;
+
+    el.textContent = convertTo12HourFormat(original, true)
+      .toLowerCase()
+      .replace(" ", "");
+  });
+
+  const entryTimes = timetablePage.querySelectorAll<HTMLElement>(".entry .times");
+  entryTimes.forEach((el) => {
+    if (!el.dataset.original) el.dataset.original = el.textContent || "";
+    const original = el.dataset.original || "";
+    if (!original.includes("–") && !original.includes("-")) return;
+
+    const [start, end] = original.split(/[-–]/).map((p) => p.trim());
+    if (!start || !end) return;
+
+    const start12 = convertTo12HourFormat(start).toLowerCase().replace(" ", "");
+    const end12 = convertTo12HourFormat(end).toLowerCase().replace(" ", "");
+    el.textContent = `${start12}–${end12}`;
+  });
+}
+
+function checkIfOnTimetablePage(): boolean {
+  return window.location.hash.includes("page=/timetable");
+}
+
+function startTimetableMonitoring(): void {
+  if (timetableObserver) return;
+
+  const timetablePage = document.querySelector(".timetablepage");
+  if (!timetablePage) return;
+
+  // Create observer for timetable content changes
+  timetableObserver = new MutationObserver((mutations) => {
+    let shouldUpdate = false;
+    
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList") {
+        // Check if any time elements were added or modified
+        const addedNodes = Array.from(mutation.addedNodes);
+        const hasTimeElements = addedNodes.some(node => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node as Element;
+            return element.querySelector(".time, .times") || 
+                   element.classList.contains("time") || 
+                   element.classList.contains("times");
+          }
+          return false;
+        });
+        
+        if (hasTimeElements) {
+          shouldUpdate = true;
+        }
+      }
+    });
+
+    if (shouldUpdate) {
+      updateTimeElements();
+    }
+  });
+
+  timetableObserver.observe(timetablePage, {
+    childList: true,
+    subtree: true,
+  });
+}
+
+function stopTimetableMonitoring(): void {
+  if (timetableObserver) {
+    timetableObserver.disconnect();
+    timetableObserver = null;
+  }
+}
+
+function handleUrlChange(): void {
+  const currentlyOnTimetable = checkIfOnTimetablePage();
+  
+  if (currentlyOnTimetable !== isOnTimetablePage) {
+    isOnTimetablePage = currentlyOnTimetable;
+    
+    if (isOnTimetablePage) {
+      // Wait a bit for the page to load, then start monitoring
+      setTimeout(() => {
+        updateTimeElements();
+        startTimetableMonitoring();
+      }, 100);
+    } else {
+      stopTimetableMonitoring();
+    }
+  } else if (isOnTimetablePage) {
+    // Even if we're still on timetable page, update times in case navigation happened
+    updateTimeElements();
+  }
+}
+
+function startUrlMonitoring(): void {
+  if (isInitialized) return;
+  isInitialized = true;
+
+  // Create abort controller for cleanup
+  abortController = new AbortController();
+  const signal = abortController.signal;
+
+  // Listen for hash changes (more efficient than polling)
+  window.addEventListener('hashchange', handleUrlChange, { signal });
+  window.addEventListener('popstate', handleUrlChange, { signal });
+  
+  // Initial check
+  handleUrlChange();
+}
+
+function stopUrlMonitoring(): void {
+  if (!isInitialized) return;
+  isInitialized = false;
+
+  // Abort all event listeners at once
+  if (abortController) {
+    abortController.abort();
+    abortController = null;
+  }
+  
+  stopTimetableMonitoring();
+}
+
+export async function updateTimetableTimes(): Promise<void> {
+  if (!settingsState.timeFormat) return;
+
+  const timetablePage = document.querySelector(".timetablepage");
+  if (!timetablePage) return;
+
+  // Wait for time elements to exist if page is still loading
+  try {
+    await waitForElm(".timetablepage .time", true, 10);
+  } catch {
+    return;
+  }
+
+  updateTimeElements();
+  
+  // Start continuous monitoring when this function is called
+  isOnTimetablePage = checkIfOnTimetablePage();
+  if (isOnTimetablePage) {
+    startTimetableMonitoring();
+    startUrlMonitoring();
+  }
+}
+
+// Initialize monitoring on page load
+if (typeof window !== "undefined") {
+  // Start URL monitoring immediately
+  startUrlMonitoring();
+}
+
+// Cleanup function for when the module is unloaded
+export function cleanup(): void {
+  stopUrlMonitoring();
+}

src/seqta/utils/waitForElm.ts

@@ -1,6 +1,20 @@
 import { eventManager } from "@/seqta/utils/listeners/EventManager";
 import { delay } from "@/seqta/utils/delay";
 
+/**
+ * Asynchronously waits for an element to be present in the DOM.
+ *
+ * This function can use either a polling mechanism (via `setTimeout`) or
+ * a `MutationObserver` (via `eventManager.register`) to detect the element.
+ * By default, it uses the `eventManager` which is more efficient.
+ *
+ * @param {string} selector The CSS selector for the target element.
+ * @param {boolean} [usePolling=false] If true, forces the use of `setTimeout` for polling.
+ * @param {number} [interval=100] The polling interval in milliseconds (only applicable if `usePolling` is true).
+ * @param {number} [maxIterations] Optional. The maximum number of polling attempts before rejecting (only applicable if `usePolling` is true).
+ * @returns {Promise<Element>} A Promise that resolves with the found DOM Element.
+ * If `usePolling` is true and `maxIterations` is reached, the Promise rejects with an Error.
+ */
 export async function waitForElm(
   selector: string,
   usePolling: boolean = false,

src/types/canvas-confetti.d.ts

@@ -0,0 +1,4 @@
+declare module 'canvas-confetti' {
+  const confetti: any;
+  export default confetti;
+} 

src/types/storage.ts

@@ -36,6 +36,8 @@ export interface SettingsState {
   devMode?: boolean;
   originalDarkMode?: boolean;
   newsSource?: string;
+  mockNotices?: boolean;
+  hideSensitiveContent?: boolean;
 
   // depreciated keys
   animatedbk: boolean;

tsconfig.json

@@ -28,7 +28,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["vite/client", "node", "jest"]
+    "types": ["vite/client", "node"]
   },
   "include": [
     "src/**/*.ts",

vite.config.ts

@@ -76,8 +76,9 @@ export default defineConfig(({ command }) => ({
   build: {
     outDir: resolve(__dirname, "dist", mode),
     emptyOutDir: false,
-    minify: false,
+    minify: true,
     //sourcemap: sourcemap,
+    chunkSizeWarningLimit: 4000,
     rollupOptions: {
       input: {
         settings: join(__dirname, "src", "interface", "index.html"),