BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-08-28 17:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: code cleanup & optimisation

Browse Source
This commit is contained in:
Aden Linday
2026-08-26 17:01:41 +09:30
parent e1408fe35d
commit de75cb4666
13 changed files with 73 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/plugins/built-in/gradeAnalytics/GradeAnalyticsPage.svelte
+1 -2
View File
@@ -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
-26
View File
@@ -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
-12
View File
@@ -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
-13
View File
@@ -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
+1 -2
View File
@@ -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
+3 -3
View File
@@ -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 (holdMs > 0) await delay(holdMs);
if (settingsState.devMode && settingsState.devDelayLoadingScreen) {
await delay(5000);
}
const loadingbk = document.getElementById("loading");
loadingbk?.classList.add("closeLoading");
src/seqta/ui/Loading.ts
+21 -36
View File
@@ -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-accent: ${LOADING_PALETTE_DARK.lineAccent};
--bk-line-blue: ${LOADING_PALETTE_DARK.lineBlue};
--bk-grid-color: ${LOADING_PALETTE_DARK.grid};
--bk-line-color: ${LOADING_PALETTE.line};
--bk-line-accent: ${LOADING_PALETTE.lineAccent};
--bk-line-blue: ${LOADING_PALETTE.lineBlue};
--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_DARK.text};
color: ${LOADING_PALETTE.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) {
const palette = loadingPalette(darkMode);
function applyHostShell(host: HTMLElement) {
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) {
vignette.style.opacity = String(theme.vignetteOpacity);
vignette.style.background = theme.vignetteFill;
}
if (vignette) vignette.style.opacity = String(theme.vignetteOpacity);
}
function refreshActiveLoadingTheme() {
src/seqta/ui/loadingCanvas.ts
+20 -20
View File
@@ -79,10 +79,7 @@ function cycle(
}
function cssVar(root: HTMLElement, name: string, fallback: string): string {
const inline = root.style.getPropertyValue(name).trim();
if (inline) return inline;
const computed = getComputedStyle(root).getPropertyValue(name).trim();
return computed || fallback;
return getComputedStyle(root).getPropertyValue(name).trim() || 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;
a1 = 0.14 * alphaBoost;
a0 = 0.38;
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;
a1 = 0.18 * alphaBoost;
a0 = 0.5;
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
? brightness > 0.52
? `rgba(29, 78, 216, ${alpha})`
: `rgba(24, 24, 27, ${0.1 + brightness * 0.28 * dot.p})`
: brightness > 0.52
? `rgba(96, 165, 250, ${alpha})`
: `rgba(255, 255, 255, ${0.08 + brightness * 0.22 * dot.p})`;
ctx.fillStyle =
brightness > 0.52
? `rgba(${light ? "29, 78, 216" : "96, 165, 250"}, ${alpha})`
: `rgba(${light ? "24, 24, 27" : "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
-30
View File
@@ -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
-10
View File
@@ -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
+9 -16
View File
@@ -3,22 +3,15 @@ import {
resolveLoadingTheme,
} from "./loadingVariants";
describe("loading variant light themes", () => {
it("defines a distinct light theme for every canvas variant", () => {
const variants = listLoadingVariants();
expect(variants.length).toBeGreaterThan(0);
for (const variant of variants) {
expect(variant.lightTheme.background).not.toBe(variant.theme.background);
expect(variant.lightTheme.background).not.toMatch(/#0[148]0[148]0[148]/);
expect(variant.lightTheme.vignetteFill).not.toBe(variant.theme.vignetteFill);
describe("resolveLoadingTheme", () => {
it("keeps the dark background in dark mode and swaps it for light mode", () => {
for (const variant of listLoadingVariants()) {
const dark = resolveLoadingTheme(variant, true);
const light = resolveLoadingTheme(variant, false);
expect(dark).toEqual(variant.theme);
expect(light.background).not.toBe(dark.background);
expect(light.background).toContain("#fafafa");
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
+17 -62
View File
@@ -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;
lightTheme: LoadingTheme;
theme: {
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,
lightTheme: LoadingTheme,
t: ReturnType<typeof theme>,
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 {
return darkMode ? variant.theme : variant.lightTheme;
): LoadingVariant["theme"] {
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
+1
View File
@@ -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.",