chore: code cleanup & optimisation

src/plugins/built-in/gradeAnalytics/GradeAnalyticsPage.svelte

@@ -41,7 +41,6 @@
   let timestampInterval: ReturnType<typeof setInterval> | null = null;
   let contentReady = $state(false);
   const fadeDuration = $derived($settingsState.animations ? 200 : 0);
-  const emptyFadeDuration = $derived($settingsState.animations ? 300 : 0);
 
   const formattedTimestamp = $derived(() => {
     if (!lastUpdated) return "";
@@ -465,7 +464,7 @@
       </div>
     </div>
   {:else}
-    <div class="bsplus-analytics-layout bsplus-analytics-animate" transition:fade={{ duration: emptyFadeDuration }}>
+    <div class="bsplus-analytics-layout bsplus-analytics-animate" transition:fade={{ duration: fadeDuration }}>
       <aside class="bsplus-analytics-filters" aria-label="Analytics">
         {@render sidebarTitle()}
         {@render sidebarActions()}

src/plugins/built-in/gradeAnalytics/motion.test.ts

@@ -1,26 +0,0 @@
-import {
-  ANALYTICS_MOTION_CLASS,
-  analyticsMotionEnabled,
-  applyAnalyticsMotionClass,
-} from "./motion";
-
-describe("analyticsMotionEnabled", () => {
-  it("is on only when the animations setting is true", () => {
-    expect(analyticsMotionEnabled(true)).toBe(true);
-    expect(analyticsMotionEnabled(false)).toBe(false);
-  });
-});
-
-describe("applyAnalyticsMotionClass", () => {
-  it("adds the motion class when animations are enabled", () => {
-    const el = { classList: { toggle: jest.fn() } };
-    applyAnalyticsMotionClass(el, true);
-    expect(el.classList.toggle).toHaveBeenCalledWith(ANALYTICS_MOTION_CLASS, true);
-  });
-
-  it("removes the motion class when animations are disabled", () => {
-    const el = { classList: { toggle: jest.fn() } };
-    applyAnalyticsMotionClass(el, false);
-    expect(el.classList.toggle).toHaveBeenCalledWith(ANALYTICS_MOTION_CLASS, false);
-  });
-});

src/plugins/built-in/gradeAnalytics/motion.ts

@@ -1,12 +0,0 @@
-export const ANALYTICS_MOTION_CLASS = "bsplus-analytics-motion";
-
-export function analyticsMotionEnabled(animations: boolean | undefined): boolean {
-  return animations === true;
-}
-
-export function applyAnalyticsMotionClass(
-  target: { classList: { toggle: (token: string, force?: boolean) => unknown } },
-  animations: boolean | undefined,
-): void {
-  target.classList.toggle(ANALYTICS_MOTION_CLASS, analyticsMotionEnabled(animations));
-}

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

@@ -120,19 +120,6 @@
   transform: none;
 }
 
-.bsplus-analytics-mount:not(.bsplus-analytics-motion) .bsplus-analytics-btn,
-.bsplus-analytics-mount:not(.bsplus-analytics-motion) .bsplus-analytics-card,
-.bsplus-analytics-mount:not(.bsplus-analytics-motion) .bsplus-analytics-dropdown-trigger,
-.bsplus-analytics-mount:not(.bsplus-analytics-motion) .bsplus-analytics-select {
-  transition: none;
-}
-
-.bsplus-analytics-mount:not(.bsplus-analytics-motion) .bsplus-analytics-btn:hover:not(:disabled),
-.bsplus-analytics-mount:not(.bsplus-analytics-motion) .bsplus-analytics-btn:active:not(:disabled),
-.bsplus-analytics-mount:not(.bsplus-analytics-motion) .bsplus-analytics-dropdown-trigger:hover {
-  transform: none;
-}
-
 .bsplus-analytics-delay-1 {
   animation-delay: 80ms;
 }

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

@@ -5,7 +5,6 @@ import { mount, unmount } from "svelte";
 import GradeAnalyticsPage from "./GradeAnalyticsPage.svelte";
 import { buildContrastAccentPalette } from "./utils/accentColor";
 import { extractSolidColor } from "@/seqta/ui/colors/parseCssColor";
-import { applyAnalyticsMotionClass } from "./motion";
 
 type ThemeSettingKey =
   | "selectedColor"
@@ -121,7 +120,7 @@ function syncThemeToAnalyticsUi() {
   if (shadowHost) syncThemeFromPage(shadowHost);
   if (analyticsRoot) {
     syncThemeFromPage(analyticsRoot);
-    applyAnalyticsMotionClass(analyticsRoot, settingsState.animations);
+    analyticsRoot.classList.toggle("bsplus-analytics-motion", !!settingsState.animations);
   }
 }
 

src/plugins/monofile.ts

@@ -20,7 +20,6 @@ import { updateAllColors } from "@/seqta/ui/colors/Manager";
 import { applySelectedFont } from "@/seqta/ui/fonts/Manager";
 import { verboseInfo, verboseLog } from "@/utils/verboseLog";
 import loading, { stopLoadingAnimation } from "@/seqta/ui/Loading";
-import { loadingScreenHoldMs } from "@/seqta/ui/loadingHold";
 import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
 import { getEngageRoutePage } from "@/seqta/utils/engageRoute";
 import {
@@ -93,8 +92,9 @@ export async function finishLoad() {
 
     document.querySelector(".legacy-root")?.classList.remove("hidden");
 
-    const holdMs = loadingScreenHoldMs(settingsState);
+    if (settingsState.devMode && settingsState.devDelayLoadingScreen) {
-    if (holdMs > 0) await delay(holdMs);
+      await delay(5000);
+    }
 
     const loadingbk = document.getElementById("loading");
     loadingbk?.classList.add("closeLoading");

src/seqta/ui/Loading.ts

@@ -26,46 +26,42 @@ const THEME_GUARD_KEYS = [
   "selectedFont",
 ] as const;
 
-const LOADING_PALETTE_DARK = {
+const LOADING_PALETTE = {
   line: "rgba(255, 255, 255, 0.08)",
   lineAccent: "rgba(255, 255, 255, 0.15)",
   lineBlue: "rgba(96, 165, 250, 0.42)",
   grid: "rgba(255, 255, 255, 0.028)",
   text: "#f4f4f5",
-  version: "rgba(255, 255, 255, 0.35)",
 } as const;
 
-const LOADING_PALETTE_LIGHT = {
-  line: "rgba(24, 24, 27, 0.1)",
-  lineAccent: "rgba(24, 24, 27, 0.18)",
-  lineBlue: "rgba(37, 99, 235, 0.5)",
-  grid: "rgba(24, 24, 27, 0.055)",
-  text: "#18181b",
-  version: "rgba(24, 24, 27, 0.42)",
-} as const;
-
-function loadingPalette(darkMode: boolean) {
-  return darkMode ? LOADING_PALETTE_DARK : LOADING_PALETTE_LIGHT;
-}
-
 const loadingStyles = /* css */ `
   :host {
-    --bk-line-color: ${LOADING_PALETTE_DARK.line};
+    --bk-line-color: ${LOADING_PALETTE.line};
-    --bk-line-accent: ${LOADING_PALETTE_DARK.lineAccent};
+    --bk-line-accent: ${LOADING_PALETTE.lineAccent};
-    --bk-line-blue: ${LOADING_PALETTE_DARK.lineBlue};
+    --bk-line-blue: ${LOADING_PALETTE.lineBlue};
-    --bk-grid-color: ${LOADING_PALETTE_DARK.grid};
+    --bk-grid-color: ${LOADING_PALETTE.grid};
     --bk-spin-outer: 1s;
     --bk-spin-inner: 3s;
     --bk-spin-small: 3s;
     --bk-stage-name: bkloading-stage-in;
     --bk-stage-duration: 0.85s;
+    --bk-version-color: rgba(255, 255, 255, 0.35);
     --bk-vignette-fill: radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, 0.75) 100%);
-    --bk-version-color: ${LOADING_PALETTE_DARK.version};
+    color: ${LOADING_PALETTE.text};
-    color: ${LOADING_PALETTE_DARK.text};
     opacity: 1;
     transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
+  :host([data-scheme="light"]) {
+    --bk-line-color: rgba(24, 24, 27, 0.1);
+    --bk-line-accent: rgba(24, 24, 27, 0.18);
+    --bk-line-blue: rgba(37, 99, 235, 0.5);
+    --bk-grid-color: rgba(24, 24, 27, 0.055);
+    --bk-version-color: rgba(24, 24, 27, 0.42);
+    --bk-vignette-fill: radial-gradient(ellipse at center, transparent 32%, rgba(250, 250, 250, 0.88) 100%);
+    color: #18181b;
+  }
+
   :host(.closeLoading) {
     opacity: 0;
     pointer-events: none;
@@ -216,8 +212,7 @@ function overlayWithSpinner(): string {
   );
 }
 
-function applyHostShell(host: HTMLElement, darkMode: boolean) {
+function applyHostShell(host: HTMLElement) {
-  const palette = loadingPalette(darkMode);
   const shell = [
     ["position", "fixed"],
     ["inset", "0"],
@@ -227,12 +222,6 @@ function applyHostShell(host: HTMLElement, darkMode: boolean) {
     ["contain", "strict"],
     ["visibility", "visible"],
     ["pointer-events", "auto"],
-    ["color", palette.text],
-    ["--bk-line-color", palette.line],
-    ["--bk-line-accent", palette.lineAccent],
-    ["--bk-line-blue", palette.lineBlue],
-    ["--bk-grid-color", palette.grid],
-    ["--bk-version-color", palette.version],
   ] as const;
 
   for (const [prop, value] of shell) {
@@ -249,20 +238,16 @@ function applyVariantTheme(
   const theme = resolveLoadingTheme(variant, darkMode);
   host.dataset.variant = variant.id;
   host.dataset.scheme = darkMode ? "dark" : "light";
-  applyHostShell(host, darkMode);
+  applyHostShell(host);
   host.style.setProperty("background", theme.background, "important");
   host.style.setProperty("--bk-spin-outer", theme.spinOuter, "important");
   host.style.setProperty("--bk-spin-inner", theme.spinInner, "important");
-  host.style.setProperty("--bk-stage-name", theme.stageName, "important");
   host.style.setProperty("--bk-spin-small", theme.spinSmall, "important");
+  host.style.setProperty("--bk-stage-name", theme.stageName, "important");
   host.style.setProperty("--bk-stage-duration", theme.stageDuration, "important");
-  host.style.setProperty("--bk-vignette-fill", theme.vignetteFill, "important");
 
   const vignette = shadow.querySelector(".bkloading__vignette") as HTMLElement | null;
-  if (vignette) {
+  if (vignette) vignette.style.opacity = String(theme.vignetteOpacity);
-    vignette.style.opacity = String(theme.vignetteOpacity);
-    vignette.style.background = theme.vignetteFill;
-  }
 }
 
 function refreshActiveLoadingTheme() {

src/seqta/ui/loadingCanvas.ts

@@ -79,10 +79,7 @@ function cycle(
 }
 
 function cssVar(root: HTMLElement, name: string, fallback: string): string {
-  const inline = root.style.getPropertyValue(name).trim();
+  return getComputedStyle(root).getPropertyValue(name).trim() || fallback;
-  if (inline) return inline;
-  const computed = getComputedStyle(root).getPropertyValue(name).trim();
-  return computed || fallback;
 }
 
 function isLightScheme(root: HTMLElement): boolean {
@@ -129,11 +126,9 @@ function drawSoftBlobs(
   blur: number,
   fadeMs: number,
   tide: boolean,
-  light: boolean,
 ) {
   const time = reduced ? 0 : elapsed * 0.001;
   const fadeIn = reduced ? 1 : smooth(Math.min(1, elapsed / fadeMs));
-  const alphaBoost = light ? 1.18 : 1;
 
   ctx.save();
   ctx.globalAlpha = fadeIn;
@@ -154,8 +149,8 @@ function drawSoftBlobs(
       y = b.cy * h + Math.sin(t * 0.48 + b.phase) * h * 0.025;
       rx = b.rx * w;
       ry = b.ry * h * breathe;
-      a0 = 0.38 * alphaBoost;
+      a0 = 0.38;
-      a1 = 0.14 * alphaBoost;
+      a1 = 0.14;
     } else {
       const amp = b.amp ?? 0.2;
       const scale = 1 + Math.sin(t * 1.35) * amp;
@@ -164,8 +159,8 @@ function drawSoftBlobs(
       y = b.cy * h + Math.sin(t * 0.41) * h * 0.01;
       rx = b.rx * w * scale;
       ry = b.ry * h * stretch;
-      a0 = 0.5 * alphaBoost;
+      a0 = 0.5;
-      a1 = 0.18 * alphaBoost;
+      a1 = 0.18;
       ctx.save();
       ctx.translate(x, y);
       ctx.rotate(t * (b.rot ?? 0));
@@ -266,13 +261,10 @@ function drawDotGlobe(
     const size = (1.2 + depth * 2.2) * dot.p;
     const alpha = (0.12 + brightness * 0.75) * dot.p;
 
-    ctx.fillStyle = light
+    ctx.fillStyle =
-      ? brightness > 0.52
+      brightness > 0.52
-        ? `rgba(29, 78, 216, ${alpha})`
+        ? `rgba(${light ? "29, 78, 216" : "96, 165, 250"}, ${alpha})`
-        : `rgba(24, 24, 27, ${0.1 + brightness * 0.28 * dot.p})`
+        : `rgba(${light ? "24, 24, 27" : "255, 255, 255"}, ${0.08 + brightness * 0.22 * dot.p})`;
-      : brightness > 0.52
-        ? `rgba(96, 165, 250, ${alpha})`
-        : `rgba(255, 255, 255, ${0.08 + brightness * 0.22 * dot.p})`;
     ctx.beginPath();
     ctx.arc(dot.px, dot.py, size, 0, Math.PI * 2);
     ctx.fill();
@@ -316,11 +308,20 @@ export function startLoadingCanvas(
 
     const elapsed = now - start;
     ctx.clearRect(0, 0, w, h);
-    const light = isLightScheme(root);
 
     if (visual === "globe") {
       const { t, fade, ambient } = cycle(elapsed, revealMs, holdMs);
-      drawDotGlobe(ctx, w, h, elapsed, reduced, t, fade, reduced ? 1 : ambient, light);
+      drawDotGlobe(
+        ctx,
+        w,
+        h,
+        elapsed,
+        reduced,
+        t,
+        fade,
+        reduced ? 1 : ambient,
+        isLightScheme(root),
+      );
     } else if (visual === "blobs") {
       const tide = variant.blobStyle === "tide";
       drawSoftBlobs(
@@ -333,7 +334,6 @@ export function startLoadingCanvas(
         tide ? 58 : 52,
         tide ? 1800 : 1600,
         tide,
-        light,
       );
     } else {
       const { t, fade } = cycle(elapsed, revealMs, holdMs);

src/seqta/ui/loadingHold.test.ts

@@ -1,30 +0,0 @@
-import { loadingScreenHoldMs } from "./loadingHold";
-
-describe("loadingScreenHoldMs", () => {
-  it("holds 5 seconds when developer mode and the delay option are both on", () => {
-    expect(
-      loadingScreenHoldMs({
-        devMode: true,
-        devDelayLoadingScreen: true,
-      }),
-    ).toBe(5000);
-  });
-
-  it("does not hold when developer mode is off", () => {
-    expect(
-      loadingScreenHoldMs({
-        devMode: false,
-        devDelayLoadingScreen: true,
-      }),
-    ).toBe(0);
-  });
-
-  it("does not hold when the delay option is off", () => {
-    expect(
-      loadingScreenHoldMs({
-        devMode: true,
-        devDelayLoadingScreen: false,
-      }),
-    ).toBe(0);
-  });
-});

src/seqta/ui/loadingHold.ts

@@ -1,10 +0,0 @@
-export const LOADING_SCREEN_DEBUG_DELAY_MS = 5000;
-
-export function loadingScreenHoldMs(settings: {
-  devMode?: boolean;
-  devDelayLoadingScreen?: boolean;
-}): number {
-  return settings.devMode && settings.devDelayLoadingScreen
-    ? LOADING_SCREEN_DEBUG_DELAY_MS
-    : 0;
-}

src/seqta/ui/loadingVariants.test.ts

@@ -3,22 +3,15 @@ import {
   resolveLoadingTheme,
 } from "./loadingVariants";
 
-describe("loading variant light themes", () => {
+describe("resolveLoadingTheme", () => {
-  it("defines a distinct light theme for every canvas variant", () => {
+  it("keeps the dark background in dark mode and swaps it for light mode", () => {
-    const variants = listLoadingVariants();
+    for (const variant of listLoadingVariants()) {
-    expect(variants.length).toBeGreaterThan(0);
+      const dark = resolveLoadingTheme(variant, true);
-
+      const light = resolveLoadingTheme(variant, false);
-    for (const variant of variants) {
+      expect(dark).toEqual(variant.theme);
-      expect(variant.lightTheme.background).not.toBe(variant.theme.background);
+      expect(light.background).not.toBe(dark.background);
-      expect(variant.lightTheme.background).not.toMatch(/#0[148]0[148]0[148]/);
+      expect(light.background).toContain("#fafafa");
-      expect(variant.lightTheme.vignetteFill).not.toBe(variant.theme.vignetteFill);
+      expect(light.background).not.toContain("#010101");
     }
   });
-
-  it("resolves dark theme when dark mode is on and light theme when it is off", () => {
-    const sweep = listLoadingVariants().find((variant) => variant.id === "sweep");
-    expect(sweep).toBeDefined();
-    expect(resolveLoadingTheme(sweep!, true)).toEqual(sweep!.theme);
-    expect(resolveLoadingTheme(sweep!, false)).toEqual(sweep!.lightTheme);
-  });
 });

src/seqta/ui/loadingVariants.ts

@@ -11,17 +11,6 @@ export type Line = {
   ) => void;
 };
 
-export type LoadingTheme = {
-  background: string;
-  vignetteOpacity: number;
-  vignetteFill: string;
-  spinOuter: string;
-  spinInner: string;
-  spinSmall: string;
-  stageName: string;
-  stageDuration: string;
-};
-
 export type LoadingVariant = {
   id: string;
   visual?: "lines" | "blobs" | "globe";
@@ -29,8 +18,15 @@ export type LoadingVariant = {
   holdMs: number;
   grid: { cols: number; rows: number };
   lines: Line[];
-  theme: LoadingTheme;
+  theme: {
-  lightTheme: LoadingTheme;
+    background: string;
+    vignetteOpacity: number;
+    spinOuter: string;
+    spinInner: string;
+    spinSmall: string;
+    stageName: string;
+    stageDuration: string;
+  };
 };
 
 const curve = (
@@ -67,10 +63,6 @@ const BASE = "linear-gradient(180deg, #010101 0%, #040404 50%, #080808 100%)";
 const BASE_LIGHT =
   "linear-gradient(180deg, #fafafa 0%, #f4f4f5 50%, #ececef 100%)";
 const STAGE = "bkloading-stage-in";
-const DARK_VIGNETTE =
-  "radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, 0.75) 100%)";
-const LIGHT_VIGNETTE =
-  "radial-gradient(ellipse at center, transparent 32%, rgba(250, 250, 250, 0.88) 100%)";
 
 function theme(
   background: string,
@@ -79,12 +71,10 @@ function theme(
   spinInner: string,
   spinSmall: string,
   stageDuration: string,
-  light = false,
+) {
-): LoadingTheme {
   return {
     background,
     vignetteOpacity,
-    vignetteFill: light ? LIGHT_VIGNETTE : DARK_VIGNETTE,
     spinOuter,
     spinInner,
     spinSmall,
@@ -97,8 +87,7 @@ function canvasVariant(
   id: string,
   visual: "blobs" | "globe",
   holdMs: number,
-  t: LoadingTheme,
+  t: ReturnType<typeof theme>,
-  lightTheme: LoadingTheme,
   blobStyle?: "diffuse" | "tide",
 ): LoadingVariant {
   return {
@@ -109,15 +98,18 @@ function canvasVariant(
     grid: { cols: 0, rows: 0 },
     lines: [],
     theme: t,
-    lightTheme,
   };
 }
 
 export function resolveLoadingTheme(
   variant: LoadingVariant,
   darkMode: boolean,
-): LoadingTheme {
+): LoadingVariant["theme"] {
-  return darkMode ? variant.theme : variant.lightTheme;
+  if (darkMode) return variant.theme;
+  return {
+    ...variant.theme,
+    background: variant.theme.background.replaceAll(BASE, BASE_LIGHT),
+  };
 }
 
 const VARIANTS: LoadingVariant[] = [
@@ -133,15 +125,6 @@ const VARIANTS: LoadingVariant[] = [
       "3s",
       "0.85s",
     ),
-    lightTheme: theme(
-      `radial-gradient(ellipse 70% 45% at 50% 95%, rgba(37, 99, 235, 0.16), transparent 62%), ${BASE_LIGHT}`,
-      0.72,
-      "1s",
-      "3s",
-      "3s",
-      "0.85s",
-      true,
-    ),
     lines: [
       {
         delay: 0,
@@ -207,15 +190,6 @@ const VARIANTS: LoadingVariant[] = [
       "2.6s",
       "0.75s",
     ),
-    lightTheme: theme(
-      `radial-gradient(ellipse 40% 30% at 80% 20%, rgba(59, 130, 246, 0.12), transparent 70%), ${BASE_LIGHT}`,
-      0.74,
-      "0.85s",
-      "2.6s",
-      "2.6s",
-      "0.75s",
-      true,
-    ),
     lines: [
       { delay: 0, dur: 1200, stroke: segment(0.5, 0.06, 0.5, 0.94) },
       { delay: 80, dur: 1200, stroke: segment(0.04, 0.5, 0.96, 0.5) },
@@ -241,7 +215,6 @@ const VARIANTS: LoadingVariant[] = [
     "blobs",
     0,
     theme(BASE, 0.78, "1.3s", "3.8s", "3.8s", "0.9s"),
-    theme(BASE_LIGHT, 0.62, "1.3s", "3.8s", "3.8s", "0.9s", true),
     "diffuse",
   ),
   canvasVariant(
@@ -256,15 +229,6 @@ const VARIANTS: LoadingVariant[] = [
       "4.2s",
       "1s",
     ),
-    theme(
-      `radial-gradient(ellipse 85% 45% at 50% 100%, rgba(37, 99, 235, 0.14), transparent 72%), ${BASE_LIGHT}`,
-      0.64,
-      "1.5s",
-      "4.2s",
-      "4.2s",
-      "1s",
-      true,
-    ),
     "tide",
   ),
   canvasVariant(
@@ -279,15 +243,6 @@ const VARIANTS: LoadingVariant[] = [
       "3.5s",
       "0.9s",
     ),
-    theme(
-      `radial-gradient(ellipse 55% 50% at 50% 48%, rgba(37, 99, 235, 0.14), transparent 70%), ${BASE_LIGHT}`,
-      0.7,
-      "1.2s",
-      "3.5s",
-      "3.5s",
-      "0.9s",
-      true,
-    ),
   ),
 ];
 

src/seqta/utils/Openers/whatsNewChangelog.ts

@@ -12,6 +12,7 @@ export const WHATS_NEW_CHANGELOG: WhatsNewRelease[] = [
       "Added a new sidebar customisation page in the settings menu to change the sidebar layout, icons, and more.",
       "Added extension feedback in settings.",
       "Added a 'this year' & custom date range option to grade analyitics.",
+      "Removed white background around SEQTA Learn mobile App icons in settings.",
       "Re-added the kitten back to the 404 Error pages.",
       "Improved the sidebar to be more stable and performant.",
       "Fixed dropdown contrast and readability in settings and across SEQTA pages.",