feat: performance and visual improvements

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

@@ -5,8 +5,8 @@ import { renderSkeletonLoader, renderErrorState } from './ui';
 import styles from './styles.css?inline';
 import { delay } from '@/seqta/utils/delay';
 
-const gridViewPlugin: Plugin<{}> = {
+const assessmentsOverviewPlugin: Plugin<{}> = {
-  id: 'assessments-grid-view',
+  id: 'assessments-overview',
   name: 'Assessments Overview',
   description: 'Adds an overview option to the assessments page that organizes assessments by status',
   version: '1.0.0',
@@ -69,4 +69,4 @@ const gridViewPlugin: Plugin<{}> = {
   },
 };
 
-export default gridViewPlugin;
+export default assessmentsOverviewPlugin;

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

@@ -34,7 +34,7 @@
 }
 
 .filter-select {
-  background: #ffffff;
+  background: #ffffff !important;
   border: 2px solid #e2e8f0;
   border-radius: 8px;
   color: #1a1a1a;
@@ -60,7 +60,7 @@
 
 /* Dark mode dropdowns */
 .dark .filter-select {
-  background: var(--background-primary);
+  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);

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 {
@@ -115,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) {
@@ -205,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]) => {

src/plugins/core/manager.ts

@@ -11,6 +11,7 @@ import type {
 } from "./types";
 import { createPluginAPI } from "./createAPI";
 import browser from "webextension-polyfill";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 interface PluginSettingsStorage {
   enabled?: boolean;
@@ -150,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 =