feat: kofi + update dompurify function

Fix subject averages

.dependency-cruiser.cjs

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,21 +7,17 @@ assignees: ''
 
 ---
 
-**Describe the bug**
-A clear and concise description of what the bug is.
+**Bug Description**  
+Please provide a clear and concise description of the bug.
 
-**To Reproduce**
-Please indicate how did you make this happen.
+**Steps to Reproduce**  
+Please list the steps taken to reproduce the issue.
 
-**Expected behaviuor**
-Please add a clear and concise description of what you expected to happen.
+**Expected Behavior**  
+Please describe the expected behaviour clearly and concisely.
 
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
+**Screenshots**  
+If applicable, please include any screenshots that may help clarify the issue.
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - If using Windows, the build number. Find this by using ```winver``` and copying down the build id.
-
-**Additional context**
-Add any other context about the problem here.
+**Additional Context**  
+Feel free to provide any additional context or information relevant to the problem.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -12,9 +12,3 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate
 
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.gitignore

@@ -9,6 +9,8 @@ yarn.lock
 .env
 .env.submit
 
+dependency-graph.svg
+
 # Build
 extension.zip
 build/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "betterseqtaplus",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "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",
@@ -12,6 +12,7 @@
     "build:firefox": "cross-env MODE=firefox vite build",
     "build:safari": "cross-env MODE=safari vite build",
     "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
+    "dependency-graph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
     "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
     "publish": "bun lib/publish.js --b",
     "zip": "bedframe zip"
@@ -38,11 +39,13 @@
     "@types/mime-types": "^2.1.4",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "cross-env": "^7.0.3",
+    "dependency-cruiser": "^16.10.0",
     "eslint": "^8.57.1",
     "glob": "^11.0.1",
     "mime-types": "^2.1.35",
     "prettier": "^3.4.2",
     "process": "^0.11.10",
+    "publish-browser-extension": "^3.0.0",
     "sass": "^1.83.4",
     "sass-loader": "^13.3.3",
     "semver": "^7.7.1",
@@ -82,6 +85,7 @@
     "react": "17",
     "react-best-gradient-color-picker": "^3.0.10",
     "react-dom": "17",
+    "rss-parser": "^3.13.0",
     "sortablejs": "^1.15.3",
     "svelte": "^5.1.9",
     "tailwindcss": "^3.4.11",

src/SEQTA.ts

@@ -13,11 +13,13 @@ import { StorageChangeHandler } from '@/seqta/utils/listeners/StorageChanges'
 import { eventManager } from '@/seqta/utils/listeners/EventManager'
 
 // UI and theme management
-import loading, { AppendLoadingSymbol } from '@/seqta/ui/Loading'
-import { enableCurrentTheme } from '@/seqta/ui/themes/enableCurrent'
-import { updateAllColors } from '@/seqta/ui/colors/Manager'
-import { SettingsResizer } from '@/seqta/ui/SettingsResizer'
+import RegisterClickListeners from './seqta/utils/listeners/ClickListeners'
 import { AddBetterSEQTAElements } from '@/seqta/ui/AddBetterSEQTAElements'
+import { enableCurrentTheme } from '@/seqta/ui/themes/enableCurrent'
+import loading, { AppendLoadingSymbol } from '@/seqta/ui/Loading'
+import { SettingsResizer } from '@/seqta/ui/SettingsResizer'
+import { updateAllColors } from '@/seqta/ui/colors/Manager'
+import pageState from '@/pageState.js?url'
 
 // JSON content
 import MenuitemSVGKey from '@/seqta/content/MenuItemSVGKey.json'
@@ -30,6 +32,7 @@ import LogoLightOutline from '@/resources/icons/betterseqta-light-outline.png'
 import icon48 from '@/resources/icons/icon-48.png?base64'
 import assessmentsicon from '@/seqta/icons/assessmentsIcon'
 import coursesicon from '@/seqta/icons/coursesIcon'
+import kofi from '@/resources/kofi.png'
 
 // Stylesheets
 import iframeCSS from '@/css/iframe.scss?raw'
@@ -38,7 +41,6 @@ import documentLoadCSS from '@/css/documentload.scss?inline'
 import renderSvelte from '@/interface/main'
 import Settings from '@/interface/pages/settings.svelte'
 import { settingsPopup } from './interface/hooks/SettingsPopup'
-import { migrateBackgrounds } from './seqta/utils/migrateBackgrounds'
 
 let SettingsClicked = false
 export let MenuOptionsOpen = false
@@ -74,6 +76,7 @@ async function init() {
       await initializeSettingsState();
       
       if (settingsState.onoff) {
+        injectMainScript();
         enableCurrentTheme()
 
         if (typeof settingsState.assessmentsAverage == 'undefined') {
@@ -164,9 +167,20 @@ export function OpenWhatsNewPopup() {
   let text = stringToHTML(
     /* html */ `
   <div class="whatsnewTextContainer" style="height: 50%;overflow-y: scroll;">  
+    <h1>3.4.5 - News, Bug Fixes, and improvements!</h1>
+    <li>Added alternative news sources</li>
+    <li>Notifications now open direct messages</li>
+    <li>Added Toggle for Letter/Percent Grades</li>
+    <li>Added fullscreen to the theme creator CSS editor</li>
+    <li>Added warning if BetterSEQTA is installed</li>
+    <li>Removed max width from theme creator</li>
+    <li>Fixed discord icon colour in light mode</li>
+    <li>Fixed subject averages not showing up with letter grades</li>
+    <li>Tweaked compose UI</li>
 
     <h1>3.4.4 - Bug Fixes and Improvements</h1>
     <li>Added vertical zoom to the timetable</li>
+    <li>Fixed theme importing failing when images were included</li>
     <li>Removed broken gradients on the backgrounds of certain buttons</li>
     <li>Fixed timetable quickbar arrow receiving the wrong colour</li>
     <li>Auto-applied selected theme after saving in theme creator</li>
@@ -324,6 +338,10 @@ export function OpenWhatsNewPopup() {
   `,
   ).firstChild
 
+  const kofi_url = browser.runtime.getURL(kofi)
+
+  console.log(kofi_url)
+
   let footer = stringToHTML(
     /* html */ `
     <div class="whatsnewFooter">
@@ -341,10 +359,16 @@ export function OpenWhatsNewPopup() {
         </a>
         <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0;">
           <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
-            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="white"/>
+            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="currentColor"/>
           </svg>
         </a>
       </div>
+
+      <div>
+        <a href="https://ko-fi.com/sethburkart" target="_blank" style="background: none !important; margin:0;margin-left:6px; padding:0;">
+         <img height="25" style="border:0px;height:25px;" src="chrome-extension://gkgllhboiibhncnhlijhkbnamfpomjph/resources/kofi.png" border="0" alt="Buy Me a Coffee at ko-fi.com" />
+        </a>
+      </div>
     </div>
   `).firstChild
 
@@ -402,10 +426,13 @@ export function OpenWhatsNewPopup() {
   })
 }
 
+function injectMainScript() {
+  const mainScript = document.createElement('script')
+  mainScript.src = browser.runtime.getURL(pageState)
+  document.head.appendChild(mainScript)
+}
+
 export function hideSideBar() {
-
-  
-
   const sidebar = document.getElementById('menu') // The sidebar element to be closed
   const main = document.getElementById('main') // The main content element that must be resized to fill the page
 
@@ -472,7 +499,7 @@ export function OpenAboutPage() {
         </a>
         <a class="socials" href="https://discord.gg/YzmbnCDkat" style="background: none !important; margin: 0 5px; padding: 0;">
           <svg style="width: 25px; height: 25px;" viewBox="0 0 16 16">
-            <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" fill="white"/>
+            <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>
@@ -545,10 +572,7 @@ export async function finishLoad() {
 
   if (settingsState.justupdated && !document.getElementById('whatsnewbk')) {
     OpenWhatsNewPopup();
-
-    /* Background Migration script */
   }
-  migrateBackgrounds();
 }
 
 async function DeleteWhatsNew() {
@@ -625,10 +649,11 @@ export async function waitForElm(selector: string, usePolling: boolean = false,
   } else {
     return new Promise((resolve) => {
       const registerObserver = () => {
-        const { unregister } = eventManager.register(`${selector}`, {
+        const { unregister } =  eventManager.register(`${selector}`, {
           customCheck: (element) => element.matches(selector)
-        }, (element) => {
+        }, async (element) => {
           resolve(element);
+          await delay(1);
           unregister(); // Remove the listener once the element is found
         });
         return unregister;
@@ -787,6 +812,8 @@ async function LoadPageElements(): Promise<void> {
     }, handleAssessments);
   }
 
+  RegisterClickListeners();
+
   await handleSublink(sublink);
 }
 
@@ -1154,6 +1181,16 @@ function ChangeMenuItemPositions(storage: any) {
   }
 }
 
+function ReplaceMenuSVG(element: HTMLElement, svg: string) {
+  let item = element.firstChild as HTMLElement
+  item!.firstChild!.remove()
+
+  item.innerHTML = `<span>${item.innerHTML}</span>`
+
+  let newsvg = stringToHTML(svg).firstChild
+  item.insertBefore((newsvg as Node), item.firstChild)
+}
+
 export async function ObserveMenuItemPosition() {
   await waitForElm('#menu > ul > li')
   await delay(100)
@@ -1185,6 +1222,69 @@ export async function ObserveMenuItemPosition() {
   });
 }
 
+export function showConflictPopup() {
+  if (document.getElementById('conflict-popup')) return;
+  document.body.classList.remove('hidden');
+
+  const background = document.createElement('div');
+  background.id = 'conflict-popup';
+  background.classList.add('whatsnewBackground');
+  background.style.zIndex = '10000000';
+
+  const container = document.createElement('div');
+  container.classList.add('whatsnewContainer');
+  container.style.height = 'auto';
+
+  const headerHTML = /* html */`
+    <div class="whatsnewHeader">
+      <h1>Extension Conflict Detected</h1>
+      <p>Legacy BetterSEQTA Installed</p>
+    </div>
+  `;
+  const header = stringToHTML(headerHTML).firstChild;
+
+  const textHTML = /* html */`
+    <div class="whatsnewTextContainer" style="overflow-y: auto; font-size: 1.3rem;">
+      <p>
+        It appears that you have the legacy BetterSEQTA extension installed alongside BetterSEQTA+.
+        This conflict may cause unexpected behavior. (and breaks the extension)
+      </p>
+      <p>
+        Please remove the older BetterSEQTA extension to ensure that BetterSEQTA+ works correctly.
+      </p>
+    </div>
+  `;
+  const text = stringToHTML(textHTML).firstChild;
+
+  const exitButton = document.createElement('div');
+  exitButton.id = 'whatsnewclosebutton';
+
+  if (header) container.append(header);
+  if (text) container.append(text);
+  container.append(exitButton);
+
+  background.append(container);
+
+  document.getElementById('container')?.append(background);
+
+  if (settingsState.animations) {    
+    animate(
+      [background as HTMLElement],
+      { opacity: [0, 1] }
+    );
+  }
+
+  background.addEventListener('click', (event) => {
+    if (event.target === background) {
+      background.remove();
+    }
+  });
+
+  exitButton.addEventListener('click', () => {
+    background.remove();
+  });
+}
+
 function main() {
   if (typeof settingsState.onoff === 'undefined') {
     browser.runtime.sendMessage({ type: 'setDefaultStorage' })
@@ -1208,6 +1308,14 @@ function main() {
     InjectCustomIcons()
     HideMenuItems()
     tryLoad()
+
+    setTimeout(() => {
+      const legacyElement = document.querySelector('.outside-container .bottom-container');
+      if (legacyElement) {
+        console.log('Legacy extension detected');
+        showConflictPopup();
+      }
+    }, 1000);
   } else {
     handleDisabled()
     window.addEventListener('load', handleDisabled)
@@ -1530,16 +1638,6 @@ function cloneAttributes(target: any, source: any) {
   })
 }
 
-function ReplaceMenuSVG(element: HTMLElement, svg: string) {
-  let item = element.firstChild as HTMLElement
-  item!.firstChild!.remove()
-
-  item.innerHTML = `<span>${item.innerHTML}</span>`
-
-  let newsvg = stringToHTML(svg).firstChild
-  item.insertBefore((newsvg as Node), item.firstChild)
-}
-
 export function setupSettingsButton() {
   var AddedSettings = document.getElementById('AddedSettings');
   var extensionPopup = document.getElementById('ExtensionPopup');
@@ -1680,7 +1778,7 @@ function makeLessonDiv(lesson: any, num: number) {
   const { code, colour, description, staff, room, from, until, attendanceTitle, programmeID, metaID, 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>
@@ -1691,7 +1789,7 @@ function makeLessonDiv(lesson: any, num: number) {
 
   // Add buttons for assessments and courses if applicable
   if (programmeID !== 0) {
-    lessonString += `
+    lessonString += /* html */`
       <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>
     `
@@ -1703,7 +1801,7 @@ function makeLessonDiv(lesson: any, num: number) {
       `<p onclick="location.href = '${buildAssessmentURL(programmeID, metaID, element.id)}';">${element.title}</p>`
     ).join('')
 
-    lessonString += `
+    lessonString += /* html */`
       <div class="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" />
@@ -2421,7 +2519,12 @@ export async function loadHomePage() {
   const cleanup = setupTimetableListeners()
 
   // Initialize shortcuts immediately
-  addShortcuts(settingsState.shortcuts)
+  try {
+    addShortcuts(settingsState.shortcuts)
+  } catch(err: any) {
+    console.error('[BetterSEQTA+] Error adding shortcuts:',
+      err.message || err)
+  }
   AddCustomShortcutsToPage()
 
   // Get current date
@@ -2734,7 +2837,7 @@ export async function SendNewsPage() {
   (titlediv! as HTMLElement).innerText = 'News'
   AppendLoadingSymbol('newsloading', '#news-container')
 
-  const response = await browser.runtime.sendMessage({ type: 'sendNews' })
+  const response = await browser.runtime.sendMessage({ type: 'sendNews', source: settingsState.newsSource })
   const newscontainer = document.querySelector('#news-container')
   document.getElementById('newsloading')?.remove()
 
@@ -2751,7 +2854,7 @@ export async function SendNewsPage() {
     const articleimage = document.createElement('div')
     articleimage.classList.add('articleimage')
 
-    if (article.urlToImage == 'null') {
+    if (article.urlToImage == 'null' || article.urlToImage == null) {
       articleimage.style.cssText = `
         background-image: url(${browser.runtime.getURL(LogoLightOutline)});
         width: 20%;
@@ -2770,6 +2873,8 @@ export async function SendNewsPage() {
     title.target = '_blank'
 
     const description = document.createElement('p')
+
+    article.description = article.description.length > 400 ? article.description.substring(0, 400) + '...' : article.description
     description.innerHTML = article.description
 
     articletext.append(title, description)
@@ -2922,7 +3027,13 @@ async function handleAssessments(node: Element): Promise<void> {
   function parseGrade(gradeText: string): number {
     // Remove any whitespace
     const trimmedGrade = gradeText.trim().toUpperCase();
-    
+    // Check if it is a non-percent grade
+    if (trimmedGrade.includes('/')) {
+      const grade = trimmedGrade.split("/");
+      var a = grade[1] as unknown as number
+      var b = grade[0] as unknown as number
+      return ((b/a) * 100);
+    }
     // Check if it's a percentage
     if (trimmedGrade.includes('%')) {
       return parseFloat(trimmedGrade.replace('%', '')) || 0;
@@ -2930,7 +3041,7 @@ async function handleAssessments(node: Element): Promise<void> {
     
     // Check if it's a letter grade
     if (letterGradeMap.hasOwnProperty(trimmedGrade)) {
-      return letterGradeMap[trimmedGrade];
+      return letterGradeMap[trimmedGrade]; 
     }
 
     return 0;
@@ -2956,15 +3067,49 @@ async function handleAssessments(node: Element): Promise<void> {
 
   // Function to add the average assessment item
   function addAverageAssessment() {
-    const average = calculateAverageGrade();
-    if (average === 0) return;
+    const numaverage = calculateAverageGrade();
+    if (numaverage === 0) return;
 
     // Remove existing average section if it exists
     const existingAverage = document.querySelector('.AssessmentItem__AssessmentItem___2EZ95:first-child');
     if (existingAverage?.querySelector('.AssessmentItem__title___2bELn')?.textContent === 'Subject Average') {
       existingAverage.remove();
     }
-
+    const preaverage = numaverage.toFixed(0) as unknown as number
+    const prepaverage = Math.ceil(preaverage / 5) * 5; 
+    const NumberGradeMap: 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"
+    };
+    var letteraverage = "N/A"
+    const check = Object.prototype.hasOwnProperty.call(NumberGradeMap, prepaverage);
+    if (check) {
+      console.debug("[BetterSEQTA+ Debugger] Match found")
+      letteraverage = NumberGradeMap[prepaverage];
+    } else {
+      console.debug("[BetterSEQTA+ Debugger] No match found")
+      letteraverage = "N/A"
+    }
+    var average = "N/A"
+    if (settingsState.lettergrade) {
+      average = letteraverage
+    } else {
+      average = `${numaverage.toFixed(2)}%`
+    }
     const averageElement = stringToHTML(/* html */`
       <div class="AssessmentItem__AssessmentItem___2EZ95">
         <div class="AssessmentItem__metaContainer___dMKma">
@@ -2975,8 +3120,8 @@ async function handleAssessments(node: Element): Promise<void> {
           </div>
         </div>
         <div class="Thermoscore__Thermoscore___2tWMi">
-          <div class="Thermoscore__fill___35WjF" style="width: ${average.toFixed(2)}%;">
-            <div class="Thermoscore__text___1NdvB" title="${average.toFixed(2)}%">${average.toFixed(2)}%</div>
+          <div class="Thermoscore__fill___35WjF" style="width: ${numaverage.toFixed(2)}%">
+            <div class="Thermoscore__text___1NdvB" title="${average};">${average}</div>
           </div>
         </div>
       </div>
@@ -2991,4 +3136,4 @@ async function handleAssessments(node: Element): Promise<void> {
 
   // Add the average assessment item
   addAverageAssessment();
-}
+}

src/background.ts

@@ -1,61 +1,6 @@
 import browser from 'webextension-polyfill'
 import type { SettingsState } from "@/types/storage";
-
-export const openDB = () => {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open('MyDatabase', 1);
-
-    request.onupgradeneeded = (event: any) => {
-      const db = event.target.result;
-      db.createObjectStore('backgrounds', { keyPath: 'id' });
-    };
-
-    request.onsuccess = () => {
-      resolve(request.result);
-    };
-
-    request.onerror = (event: any) => {
-      reject('Error opening database: ' + event.target.errorCode);
-    };
-  });
-};
-
-export const writeData = async (type: any, data: any) => {
-  const db: any = await openDB();
-
-  const tx = db.transaction('backgrounds', 'readwrite');
-  const store = tx.objectStore('backgrounds');
-  const request = await store.put({ id: 'customBackground', type, data });
-
-  return request.result;
-};
-
-export const readData = () => {
-  return new Promise((resolve, reject) => {
-    openDB()
-      .then((db: any) => {
-        const tx = db.transaction('backgrounds', 'readonly');
-        const store = tx.objectStore('backgrounds');
-
-        // Retrieve the custom background
-        const getRequest = store.get('customBackground');
-
-        // Attach success and error event handlers
-        getRequest.onsuccess = function(event: any) {
-          resolve(event.target.result);
-        };
-
-        getRequest.onerror = function(event: any) {
-          console.error('An error occurred:', event);
-          reject(event);
-        };
-      })
-      .catch(error => {
-        console.error('An error occurred:', error);
-        reject(error);
-      });
-  });
-};
+import { fetchNews } from './background/news';
 
 function reloadSeqtaPages() {
   const result = browser.tabs.query({})
@@ -70,70 +15,49 @@ function reloadSeqtaPages() {
 }
 
 // Main message listener
-browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse: any) => {
+browser.runtime.onMessage.addListener((request: any, _: any, sendResponse: (response?: any) => void) => {
+
   switch (request.type) {
-  case 'reloadTabs':
-    reloadSeqtaPages();
-    break;
-  
-  case 'extensionPages':
-    browser.tabs.query({}).then(function (tabs) {
-      for (let tab of tabs) {
-        if (tab.url?.includes('chrome-extension://')) {
-          browser.tabs.sendMessage(tab.id!, request);
-        }
-      }
-    });
-    break;
-  
-  case 'currentTab':
-    browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
-      browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
-        sendResponse(response);
-      });
-    });
-    return true;
-  
-  case 'githubTab':
-    browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
-    break;
+    case 'reloadTabs':
+      reloadSeqtaPages();
+      break;
     
-  case 'setDefaultStorage':
-    SetStorageValue(DefaultValues);
-    break;
+    case 'extensionPages':
+      browser.tabs.query({}).then(function (tabs) {
+        for (let tab of tabs) {
+          if (tab.url?.includes('chrome-extension://')) {
+            browser.tabs.sendMessage(tab.id!, request);
+          }
+        }
+      });
+      break;
+    
+    case 'currentTab':
+      browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
+        browser.tabs.sendMessage(tabs[0].id!, request).then(function (response) {
+          sendResponse(response);
+        });
+      });
+      return true; // Keep message channel open for async response
 
-  case 'sendNews':
-    const date = new Date();
-
-    const from =
-      date.getFullYear() +
-      '-' +
-      (date.getMonth() + 1) +
-      '-' +
-      (date.getDate() - 5);
-
-    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
-
-    GetNews(sendResponse, url);
-    return true;
+    case 'githubTab':
+      browser.tabs.create({ url: 'github.com/BetterSEQTA/BetterSEQTA-Plus' });
+      break;
       
-  default:
-    console.log('Unknown request type');
+    case 'setDefaultStorage':
+      SetStorageValue(DefaultValues);
+      break;
+
+    case 'sendNews':
+
+      fetchNews(request.source ?? 'australia', sendResponse);
+      return true;
+  
+    default:
+      console.log('Unknown request type');
   }
 });
 
-function GetNews(sendResponse: any, url: string) {
-  fetch(url)
-    .then((result) => result.json())
-    .then((response) => {
-      if (response.code == 'rateLimited') {
-        GetNews(sendResponse, url += '%00');
-      } else {
-        sendResponse({ news: response });
-      }
-    });
-}
-
 const DefaultValues: SettingsState = {
   onoff: true,
   animatedbk: true,
@@ -220,6 +144,8 @@ const DefaultValues: SettingsState = {
     },
   ],
   customshortcuts: [],
+  lettergrade: false,
+  newsSource: 'australia',
 };
 
 function SetStorageValue(object: any) {

src/background/news.ts

@@ -0,0 +1,107 @@
+import Parser from 'rss-parser';
+
+const fetchAustraliaNews = async (url: string, sendResponse: any) => {
+  fetch(url)
+    .then((result) => result.json())
+    .then((response) => {
+      if (response.code == 'rateLimited') {
+        fetchAustraliaNews(url += '%00', sendResponse);
+      } else {
+        sendResponse({ news: response });
+      }
+    });
+};
+
+const rssFeedsByCountry: Record<string, string[]> = {
+  usa: [
+    "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml",
+    "https://www.huffpost.com/section/front-page/feed",
+    "https://www.npr.org/rss/rss.php",
+  ],
+  taiwan: [
+    "https://focustaiwan.tw/rss",
+    "https://www.taipeitimes.com/rss/all.xml",
+    "https://international.thenewslens.com/rss",
+  ],
+  hong_kong: [
+    "https://news.rthk.hk/rthk/en/rss.htm",
+    "https://www.scmp.com/rss/91/feed",
+  ],
+  panama: [
+    "http://www.panama-guide.com/backend.php",
+  ],
+  canada: [
+    "https://www.cbc.ca/cmlink/rss-topstories",
+    "https://www.theglobeandmail.com/?service=rss",
+  ],
+  singapore: [
+    "https://www.straitstimes.com/news/singapore/rss.xml",
+    "https://www.channelnewsasia.com/rssfeeds/8395986",
+  ],
+  uk: [
+    "http://feeds.bbci.co.uk/news/rss.xml",
+    "https://www.theguardian.com/uk/rss",
+  ],
+  japan: [
+    "https://www.japantimes.co.jp/feed/topstories.xml",
+    "https://www3.nhk.or.jp/nhkworld/en/news/feeds/",
+  ],
+  netherlands: [
+    "https://www.dutchnews.nl/feed/",
+    "http://feeds.nos.nl/nosnieuwsalgemeen",
+  ],
+};
+
+export async function fetchNews(source: string, sendResponse: any) {
+  const parser = new Parser();
+  let feeds: string[];
+
+  if (source === "australia") {
+    const date = new Date();
+
+    const from =
+      date.getFullYear() +
+      '-' +
+      (date.getMonth() + 1) +
+      '-' +
+      (date.getDate() - 5);
+  
+    const url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
+    fetchAustraliaNews(url, sendResponse);
+
+    return;
+  }
+
+  if (rssFeedsByCountry[source.toLowerCase()]) {
+    // If the source is a country, fetch from predefined feeds
+    feeds = rssFeedsByCountry[source.toLowerCase()];
+  } else if (source.startsWith("http")) {
+    // If the source is a URL, use it directly
+    feeds = [source];
+  } else {
+    throw new Error("Invalid source. Provide a country code or a valid RSS feed URL.");
+  }
+
+  const articlesPromises = feeds.map(async (feedUrl) => {
+    try {
+      const response = await fetch(feedUrl);
+      const feedString = await response.text();
+      const feed = await parser.parseString(feedString);
+
+      return feed.items.map((item) => ({
+        title: item.title || "",
+        description: item.contentSnippet || "",
+        url: item.link || "",
+        urlToImage: null,
+      }));
+    } catch (error) {
+      console.error(`Failed to fetch RSS feed: ${feedUrl}`, error);
+      return [];
+    }
+  });
+
+  const articlesArray = await Promise.all(articlesPromises);
+  const articles = articlesArray.flat();
+
+  sendResponse({ news: { articles } });
+}

src/css/injected.scss

@@ -490,6 +490,10 @@ ol:has(.MessageList__avatar___2wxyb svg) {
 .content [autocomplete="off"] {
   background: var(--background-primary) !important;
 }
+.coneqtMessage .body .wrapper .iframeWrapper {
+  background: var(--background-primary) !important;
+  border-radius: 16px;
+}
 .MessageList__MessageList___3DxoC .footer {
   background: var(--background-secondary) !important;
 }
@@ -2071,17 +2075,38 @@ div.bar.flat {
   .cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
   .cke_toolbox > .cke_toolbar .cke_button_on {
     background-color: #3d3d3e !important;
+
+    &::after {
+      background: rgb(207, 207, 207) !important;
+    }
   }
 }
-.legacy-root input.singleSelect:focus {
-  background: var(--auto-background);
-  color: var(--text-primary) !important;
+.legacy-root input.singleSelect {
+  padding-left: 8px;
+
+  &:focus {
+    background: var(--auto-background);
+    color: var(--text-primary) !important;
+  }
 }
+
+button.buttonMenu.depressed:hover {
+  border-radius: 100px;
+  border-bottom-left-radius: 100px !important;
+  border-bottom-right-radius: 100px !important;
+}
+
+ul.buttonMenu {
+  border-radius: 16px;
+  padding: 0 !important;
+}
+
 ul.singleSelect,
 ul.buttonChecklist,
 ul.buttonMenu,
 ul.colourButtonOptions,
 ul.uiSplitButtonList,
+ul.buttonMenu,
 .contactFormPanel {
   background: var(--background-primary) !important;
   border: solid 4px var(--background-primary);
@@ -3059,7 +3084,6 @@ li.MessageList__unread___3imtO {
   display: flex;
   flex-direction: column;
   color: var(--text-primary);
-  animation-fill-mode: forwards;
   transform-origin: center center;
 }
 .whatsnewHeader {

src/interface/components/CodeEditor.svelte

@@ -20,7 +20,7 @@
   let editor = $state<HTMLDivElement | null>(null)
   let view: EditorView | null = null;
   let editorTheme = new Compartment();
-  let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
+  let { value, onChange, className } = $props<{value: string, onChange: (value: string) => void, className?: string}>()
 
   function createEditorState(initialContents: string) {
       let extensions = [
@@ -91,4 +91,4 @@
   })
 </script>
 
-<div class="rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900" bind:this={editor}></div>
+<div class={`rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900 ${className}`} bind:this={editor}></div>

src/interface/components/ColourPicker.css

@@ -8,6 +8,13 @@ div:has(> #rbgcp-wrapper) {
       color: white !important;
     }
 
+    #rbgcp-inputs-wrap #rbgcp-hex-input,
+    #rbgcp-inputs-wrap #rbgcp-input {
+      color: white !important;
+      background-color: #37373b !important;
+      border: none !important;
+    }
+
     div:has(> #rbgcp-solid-btn),
     div:has(> #rbgcp-advanced-btn),
     #rbgcp-color-model-btn > div,

src/interface/components/ColourPicker.tsx

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

src/interface/components/store/FilterPanel.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import type { Background } from './types';
-
-  export let filteredBackgrounds: Background[];
-
   let dispatch = createEventDispatcher();
 
   let filters = $state({
@@ -13,9 +9,9 @@
     orientation: [] as string[]
   });
 
-  $: {
+  $effect(() => {
     dispatch('filter', filters);
-  }
+  });
 
   function toggleFilter(category: keyof typeof filters, value: string) {
     if (filters[category].includes(value)) {
@@ -42,11 +38,11 @@
     <h3 class="mb-2 font-medium">Type</h3>
     <div class="space-y-2">
       <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('image')} on:change={() => toggleFilter('type', 'image')}>
+        <input type="checkbox" checked={filters.type.includes('image')} onchange={() => toggleFilter('type', 'image')}>
         <span class="ml-2">Image</span>
       </label>
       <label class="flex items-center">
-        <input type="checkbox" checked={filters.type.includes('video')} on:change={() => toggleFilter('type', 'video')}>
+        <input type="checkbox" checked={filters.type.includes('video')} onchange={() => toggleFilter('type', 'video')}>
         <span class="ml-2">Video</span>
       </label>
     </div>
@@ -56,7 +52,7 @@
   
   <button 
     class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
-    on:click={clearFilters}
+    onclick={clearFilters}
   >
     Clear Filters
   </button>

src/interface/components/themes/ThemeSelector.svelte

@@ -98,7 +98,7 @@
 </script>
 
 <div
-  class="w-full pt-5 mb-1"
+  class="pt-5 mb-1 w-full"
   role="list"
   tabindex="-1"
   ondragover={handleDragOver}
@@ -106,9 +106,9 @@
   ondrop={handleDrop}
 >
   <div class="{isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50">
-    <div class="sticky w-full h-64 bg-white shadow-xl dark:bg-zinc-900 top-5 dark:text-white rounded-xl outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
-      <div class="flex items-center justify-center h-full">
-        <div class="flex flex-col items-center justify-center">
+    <div class="sticky top-5 w-full h-64 bg-white rounded-xl shadow-xl dark:bg-zinc-900 dark:text-white outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
+      <div class="flex justify-center items-center h-full">
+        <div class="flex flex-col justify-center items-center">
           <svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
             <g fill="currentColor">
               <path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
@@ -130,7 +130,7 @@
         >
           {#if isEditMode}
             <div
-              class="absolute z-20 flex w-6 h-6 p-2 text-white bg-red-600 rounded-full opacity-100 right-2 place-items-center top-2"
+              class="flex absolute top-2 right-2 z-20 place-items-center p-2 w-6 h-6 text-white bg-red-600 rounded-full opacity-100"
               onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
               onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
               role="button"
@@ -152,7 +152,7 @@
             </div>
 
             <div
-              class="absolute z-20 flex w-8 h-8 p-2 text-center transition-all -translate-y-1/2 rounded-full opacity-0 text-white/80 top-1/4 right-12 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2"
+              class="flex absolute right-12 top-1/4 z-20 place-items-center p-2 w-8 h-8 text-center rounded-full opacity-0 transition-all -translate-y-1/2 text-white/80 bg-black/50 group-hover:opacity-100 group-hover:top-1/2"
               onclick={(event) => { event.stopPropagation(); handleShareTheme(theme) }}
               onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleShareTheme(theme) }}
               role="button"
@@ -167,7 +167,7 @@
               <img
                 src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
                 alt={theme.name}
-                class="absolute inset-0 z-0 object-cover w-full h-full pointer-events-none"
+                class="object-cover absolute inset-0 z-0 w-full h-full pointer-events-none"
               />
             {/if}
             {#if !theme.hideThemeName}
@@ -179,7 +179,7 @@
     {/if}
 
     {#if tempTheme}
-      <div class="flex justify-center w-full bg-gray-200 rounded-xl dark:bg-zinc-700/50 place-items-center aspect-theme animate-pulse">
+      <div class="flex justify-center place-items-center w-full bg-gray-200 rounded-xl animate-pulse dark:bg-zinc-700/50 aspect-theme">
         <svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -193,7 +193,7 @@
 
     <button
       onclick={() => OpenStorePage()}
-      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
     >
       <span class="text-xl font-IconFamily">&#xecc5;</span>
       <span class="ml-2">Theme Store</span>
@@ -201,7 +201,7 @@
 
     <button
       onclick={() => { OpenThemeCreator(); closeExtensionPopup() }}
-      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+      class="flex justify-center items-center w-full rounded-xl transition aspect-theme bg-zinc-100 dark:bg-zinc-900 dark:text-white"
     >
       <span class="text-xl font-IconFamily">&#xec60;</span>
       <span class="ml-2">Create your own</span>

src/interface/index.css

@@ -48,5 +48,9 @@ input {
 .cm-editor {
   width: 100%;
   min-height: 100px;
-  max-height: 400px;
+  height: inherit;
+}
+
+.editorHeight {
+  height: calc(100vh - 58px);
 }

src/interface/pages/settings.svelte

@@ -61,8 +61,8 @@
 </script>
 
 <div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
-  <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
-    <div class="grid border-b border-b-zinc-200/40 place-items-center">
+  <div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white">
+    <div class="grid place-items-center border-b border-b-zinc-200/40">
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
@@ -71,8 +71,8 @@
       <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
       
       {#if !standalone}
-        <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
-        <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
+        <button onclick={openChangelog} class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
+        <button onclick={openAbout} class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
       {/if}
     </div>
 

src/interface/pages/settings/general.svelte

@@ -15,7 +15,7 @@
 </script>
 
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
-<div class="flex items-center justify-between px-4 py-3">
+<div class="flex justify-between items-center px-4 py-3">
   <div class="pr-4">
     <h2 class="text-sm font-bold">{title}</h2>
     <p class="text-xs">{description}</p>
@@ -28,6 +28,7 @@
 
 <div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
   {#each [
+
     {
       title: "Transparency Effects",
       description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
@@ -107,6 +108,16 @@
         onChange: (isOn: boolean) => settingsState.assessmentsAverage = isOn
       }
     },
+    {
+      title: "Letter Grade Averages",
+      description: "Shows the letter grade instead of the percentage in subject averages.",
+      id: 8,
+      Component: Switch,
+      props: {
+        state: $settingsState.lettergrade,
+        onChange: (isOn: boolean) => settingsState.lettergrade = isOn
+      }
+    },
     {
       title: "Lesson Alerts",
       description: "Sends a native browser notification ~5 minutes prior to lessons.",
@@ -146,10 +157,32 @@
         ]
       }
     },
+    {
+      title: "News Feed Source",
+      description: "Choose sources of your news feed.",
+      id: 11,
+      Component: Select,
+      props: {
+        state: $settingsState.newsSource,
+        onChange: (value: string) => settingsState.newsSource = value,
+        options: [
+          { value: "australia", label: "Australia" },
+          { value: "usa", label: "USA" },
+          { value: "taiwan", label: "Taiwan" },
+          { value: "hong_kong", label: "Hong Kong" },
+          { value: "panama", label: "Panama" },
+          { value: "canada", label: "Canada" },
+          { value: "singapore", label: "Singapore" },
+          { value: "uk", label: "UK" },
+          { value: "japan", label: "Japan" },
+          { value: "netherlands", label: "Netherlands" }
+        ]
+      }
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",
-      id: 11,
+      id: 12,
       Component: Switch,
       props: {
         state: $settingsState.onoff,
@@ -170,7 +203,7 @@
         <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
       </div>
     </div>
-    <div class="flex items-center justify-between px-4 py-3">
+    <div class="flex justify-between items-center px-4 py-3">
       <div class="pr-4">
         <h2 class="text-sm font-bold">Sensitive Hider</h2>
         <p class="text-xs">Replace sensitive content with mock data</p>
@@ -183,4 +216,4 @@
       </div>
     </div>
   {/if}
-</div>
+</div>

src/interface/pages/themeCreator.svelte

@@ -46,6 +46,12 @@
   })
   let closedAccordions = $state<string[]>([])
   let themeLoaded = $state(false);
+  let codeEditorFullscreen = $state(false);
+  
+  function toggleCodeEditorFullscreen(e: MouseEvent) {
+    e.preventDefault();
+    codeEditorFullscreen = !codeEditorFullscreen;
+  }
 
   function toggleAccordion(title: string) {
     if (closedAccordions.includes(title)) {
@@ -169,6 +175,13 @@
 
         {#if item.direction === 'vertical'}
           <div class="flex justify-center items-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
+            {#if item.type === 'codeEditor'}
+              <!-- Fullscreen toggle button -->
+              <button onclick={toggleCodeEditorFullscreen} class="mr-2 text-lg font-IconFamily">
+                {'\uebdb'}
+              </button>
+            {/if}
+            
             <span class='font-IconFamily transition-transform duration-300 {closedAccordions.includes(item.title) ? 'rotate-180' : ''}'>{'\ue9e6'}</span>
           </div>
         {/if}
@@ -187,9 +200,12 @@
               <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
             {/key}
           {:else if item.type === 'codeEditor'}
-            {#key themeLoaded}
-              <CodeEditor {...(item.props as CodeEditorProps)} />
-            {/key}
+            {#if !codeEditorFullscreen}
+              {#key themeLoaded}
+                <!-- Only render inline if not fullscreen -->
+                <CodeEditor className="h-[400px]" {...(item.props as CodeEditorProps)} />
+              {/key}
+            {/if}
           {:else if item.type === 'imageUpload'}
             {#each theme.CustomImages as image (image.id)}
               <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
@@ -238,7 +254,20 @@
 {/snippet}
 
 <div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
-  <div class='flex flex-col p-2 w-full min-h-screen bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
+  {#if codeEditorFullscreen}
+    <div class="absolute inset-0 z-[10000] bg-white dark:bg-zinc-900 dark:text-white">
+      <div class="sticky top-0 px-2 h-screen">
+        <div class="flex justify-between items-center my-4">
+          <h2 class="text-xl font-bold">Custom CSS</h2>
+          <button onclick={toggleCodeEditorFullscreen} class="pr-14 text-xl font-IconFamily">{'\uec06'}</button>
+        </div>
+        <CodeEditor className="editorHeight" value={theme.CustomCSS} onChange={(value: string) => { theme = { ...theme, CustomCSS: value } }} />
+      </div>
+    </div>
+  {/if}
+  <div class='flex relative flex-col p-2 w-full min-h-screen bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
+
+
     <h1 class='text-xl font-semibold'>Theme Creator</h1>
     <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
       <span class='pr-0.5 no-underline font-IconFamily'>{'\ueb44'}</span>

src/pageState.js

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

src/seqta/ui/ThemeCreator.ts

@@ -55,7 +55,7 @@ export function OpenThemeCreator(themeID: string = "") {
   const mouseMoveHandler = (e: MouseEvent) => {
     if (!isDragging) return
     const windowWidth = window.innerWidth
-    const newWidth = Math.min(Math.max(310, windowWidth - e.clientX), 600)
+    const newWidth = Math.max(310, windowWidth - e.clientX)
     themeCreatorDiv.style.width = `${newWidth}px`
     mainContent.style.width = `calc(100% - ${newWidth}px)`
     resizeBar.style.right = `${newWidth - 2.5}px`

src/seqta/ui/themes/downloadTheme.ts

@@ -22,8 +22,20 @@ type ThemeContent = {
 };
 
 function stripBase64Prefix(base64String: string): string {
-  const prefixRegex = /^data:image\/\w+;base64,/;
-  return base64String.replace(prefixRegex, '');
+  if (!base64String) return '';
+  
+  const prefixRegex = /^data:[^;]+;base64,/;
+  try {
+    // Check if the string actually has a base64 prefix
+    if (prefixRegex.test(base64String)) {
+      return base64String.replace(prefixRegex, '');
+    }
+    // If no prefix found, return the original string (assuming it's already base64)
+    return base64String;
+  } catch(err) {
+    console.error('Error stripping base64 prefix:', err);
+    return '';
+  }
 }
 
 export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
@@ -37,11 +49,12 @@ export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
 
 export const InstallTheme = async (themeData: ThemeContent) => {
   const strippedCoverImage = stripBase64Prefix(themeData.coverImage);
+
   const coverImageBlob = base64ToBlob(strippedCoverImage);
 
   const images = themeData.images.map((image) => ({
     ...image,
-    blob: base64ToBlob(image.data)
+    blob: base64ToBlob(stripBase64Prefix(image.data))
   }));
 
   let availableThemes = await localforage.getItem('customThemes') as string[];

src/seqta/ui/themes/shareTheme.ts

@@ -28,7 +28,12 @@ const shareTheme = async (themeID: string) => {
     // Helper function to convert Blob to Base64
     const blobToBase64 = (blob: Blob) => new Promise<string>((resolve, reject) => {
       const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result as string);
+      reader.onloadend = () => {
+        const base64String = reader.result as string;
+        // Extract just the base64 data without the data URL prefix
+        const base64Data = base64String.split(',')[1];
+        resolve(base64Data);
+      };
       reader.onerror = reject;
       reader.readAsDataURL(blob);
     });

src/seqta/utils/ReactFiber.ts

@@ -0,0 +1,84 @@
+class ReactFiber {
+  private selector: string;
+  private debug: boolean;
+  private messageIdCounter: number = 0; // Counter for unique message IDs
+
+  constructor(selector: string, options: {
+    debug ? : boolean
+  } = {}) {
+    this.selector = selector;
+    this.debug = options.debug || false;
+  }
+
+  static find(selector: string, options: {
+    debug ? : boolean
+  } = {}) {
+    return new ReactFiber(selector, options);
+  }
+
+  private async sendMessage(action: string, payload: any = {}): Promise < any > {
+    return new Promise((resolve, _) => {
+      const messageId = this.messageIdCounter++;
+      const message = {
+        type: "reactFiberRequest",
+        selector: this.selector,
+        action,
+        payload,
+        debug: this.debug,
+        messageId,
+      };
+
+      const listener = (response: any) => {
+        if (response.data?.type === 'reactFiberResponse' && response.data?.messageId === messageId) {
+          if (this.debug) {
+            console.log("Content Received Response:", response.data.response);
+          }
+          resolve(response.data.response);
+          window.removeEventListener("message", listener)
+        }
+      };
+      window.addEventListener('message', listener);
+      window.postMessage(message, "*");
+    });
+  }
+
+
+  async getState(key ? : string | string[]): Promise < any > {
+    return this.sendMessage("getState", {
+      key
+    });
+  }
+
+  async setState(update: any | ((prevState: any) => any)): Promise < ReactFiber > {
+    const updateFnString = typeof update === 'function' ? update.toString() : null;
+    const updateObject = typeof update !== 'function' ? update : null;
+
+    await this.sendMessage("setState", {
+      updateFn: updateFnString,
+      updateObject
+    });
+    return this;
+  }
+
+
+  async getProps(propName ? : string): Promise < any > {
+    return this.sendMessage("getProp", {
+      propName
+    });
+  }
+
+  async setProp(propName: string, value: any): Promise < ReactFiber > {
+    await this.sendMessage("setProp", {
+      propName,
+      value
+    });
+    return this;
+  }
+
+  async forceUpdate(): Promise < ReactFiber > {
+    await this.sendMessage("forceUpdate");
+    return this;
+  }
+}
+
+export default ReactFiber;

src/seqta/utils/listeners/ClickListeners.ts

@@ -0,0 +1,48 @@
+import { waitForElm } from "@/SEQTA";
+import ReactFiber from "../ReactFiber";
+
+const handleNotificationClick = async (target: HTMLElement) => {
+  const notificationItem = target.closest('.notifications__item___2ErJN') as HTMLElement | null;
+  if (!notificationItem) return;
+
+  const buttonType = notificationItem.getAttribute('data-type');
+  if (buttonType !== 'message') return;
+
+  const notificationList = await ReactFiber.find('.notifications__list___rp2L2').getState();
+  const buttonId = notificationItem.getAttribute('data-id');
+  if (!buttonId) return;
+
+  const matchingNotification = notificationList.storeState.notifications.items.find(
+    (item: any) => item.notificationID === parseInt(buttonId)
+  );
+
+  await waitForElm('.Viewer__Viewer___32BH-', true, 20);
+
+  // Select the specific direct message
+  ReactFiber.find('.Viewer__Viewer___32BH-').setState({ selected: new Set([matchingNotification.message.messageID]) });
+
+  // Close the notifications panel
+  const notificationButton = document.querySelector('.notifications__notifications___3mmLY > button') as HTMLButtonElement | null;
+  notificationButton?.click();
+};
+
+const clickListeners = [
+  {
+    selector: '.notifications__item___2ErJN',
+    handler: handleNotificationClick,
+  },
+];
+
+const registerClickListeners = () => {  
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    
+    clickListeners.forEach(({ selector, handler }) => {
+      if (target.closest(selector)) {
+        handler(target);
+      }
+    });
+  });
+};
+
+export default registerClickListeners;

src/seqta/utils/migrateBackgrounds.ts

@@ -1,127 +0,0 @@
-import browser from 'webextension-polyfill';
-import base64ToBlob from './base64ToBlob';
-import { openDatabase, writeData } from '@/interface/hooks/BackgroundDataLoader';
-import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates';
-import { loadBackground } from '@/seqta/ui/ImageBackgrounds';
-
-const MIGRATION_STATE_KEY = 'background_migration_state';
-
-interface MigrationState {
-  lastProcessedId: string | null;
-  total: number;
-  processed: number;
-  completed: boolean;
-}
-
-export const migrateBackgrounds = async (): Promise<void> => {
-  console.info('Migrating backgrounds...');
-  
-  const savedState = localStorage.getItem(MIGRATION_STATE_KEY);
-  const migrationState: MigrationState = savedState 
-    ? JSON.parse(savedState)
-    : { lastProcessedId: null, total: 0, processed: 0, completed: false };
-
-  if (migrationState.completed) {
-    console.info('Migration already completed');
-    return;
-  }
-  
-  return new Promise((resolve, reject) => {
-    const iframe = document.createElement('iframe');
-    iframe.style.display = 'none';
-    
-    const handleMessage = async (event: MessageEvent) => {
-      if (event.source !== iframe.contentWindow) return;
-      
-      switch (event.data.type) {
-        case 'GET_LAST_PROCESSED_ID':
-          iframe.contentWindow?.postMessage({
-            type: 'LAST_PROCESSED_ID',
-            id: migrationState.lastProcessedId
-          }, '*');
-          break;
-
-        case 'BACKGROUND_DATA':
-          try {
-            const { id, data, mediaType, total, processed, isSelected } = event.data.payload;
-            const mimeType = mediaType === 'image' ? 'image/png' : 'video/mp4';
-            const blob = base64ToBlob(data, mimeType);
-
-            await storeBackground({
-              id,
-              blob,
-              type: mediaType
-            });
-
-            if (isSelected) {
-              localStorage.setItem('selectedBackground', id);
-              await loadBackground();
-            }
-
-            migrationState.lastProcessedId = id;
-            migrationState.total = total;
-            migrationState.processed = processed;
-            localStorage.setItem(MIGRATION_STATE_KEY, JSON.stringify(migrationState));
-
-            console.log(`Migrated background: ${id} (${processed}/${total})`);
-          } catch (error) {
-            console.error('Error handling background data:', error);
-          }
-          break;
-
-        case 'MIGRATION_COMPLETE':
-          console.info('Migration completed successfully');
-          migrationState.completed = true;
-          localStorage.setItem(MIGRATION_STATE_KEY, JSON.stringify(migrationState));
-          window.removeEventListener('message', handleMessage);
-          iframe.remove();
-          backgroundUpdates.triggerUpdate();
-          resolve();
-          break;
-
-        case 'MIGRATION_ERROR':
-          console.error('Migration failed:', event.data.error);
-          window.removeEventListener('message', handleMessage);
-          iframe.remove();
-          reject(new Error(event.data.error));
-          break;
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    
-    const startPinging = () => {
-      const pingInterval = setInterval(() => {
-        iframe.contentWindow?.postMessage({ type: 'PING' }, '*');
-      }, 500);
-
-      const messageHandler = (event: MessageEvent) => {
-        if (event.source === iframe.contentWindow) {
-          clearInterval(pingInterval);
-          window.removeEventListener('message', messageHandler);
-          iframe.contentWindow?.postMessage({ type: 'START_MIGRATION' }, '*');
-        }
-      };
-
-      window.addEventListener('message', messageHandler);
-    };
-    
-    iframe.src = browser.runtime.getURL('seqta/utils/migration/migrate.html');
-    document.body.appendChild(iframe);
-    startPinging();
-  });
-};
-
-const storeBackground = async (data: {
-  id: string;
-  blob: Blob;
-  type: 'image' | 'video';
-}): Promise<void> => {
-  try {
-    await openDatabase();
-    await writeData(data.id, data.type, data.blob);
-  } catch (error) {
-    console.error('Error storing background:', error);
-    throw error;
-  }
-};

src/seqta/utils/stringToHTML.ts

@@ -1,12 +1,20 @@
 import DOMPurify from 'dompurify';
 
 export default function stringToHTML(str: string, styles = false) {
-  var parser = new DOMParser();
-  str = DOMPurify.sanitize(str, { ADD_ATTR: ['onclick'] });
-  var doc = parser.parseFromString(str, 'text/html');
+  const parser = new DOMParser();
+
+
+  str = DOMPurify.sanitize(str, {
+    ADD_ATTR: ['onclick'],
+    ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|chrome-extension):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+  });
+
+  const doc = parser.parseFromString(str, 'text/html');
+
   if (styles) {
     doc.body.style.cssText =
       'height: auto; overflow: scroll; margin: 0px; background: var(--background-primary);';
   }
+
   return doc.body;
 }

src/types/storage.ts

@@ -39,6 +39,8 @@ export interface SettingsState {
   devMode?: boolean;
   originalDarkMode?: boolean;
   assessmentsAverage?: boolean;
+  lettergrade: boolean;
+  newsSource?: string;
 }
 
 interface ToggleItem {

vite.config.ts

@@ -76,7 +76,8 @@ export default defineConfig(({ command }) => ({
     rollupOptions: {
       input: {
         settings: join(__dirname, 'src', 'interface', 'index.html'),
-        migration: join(__dirname, 'src', 'seqta', 'utils', 'migration', 'migrate.html')
+        migration: join(__dirname, 'src', 'seqta', 'utils', 'migration', 'migrate.html'),
+        pageState: join(__dirname, 'src', 'pageState.js'),
       }
     }
   }