schoolbox web extension :)
refactor(popup): improve refresh banner and accent logic
+13
-42
+8
-40
src/entrypoints/popup/App.svelte
+8
-40
src/entrypoints/popup/App.svelte
···
8
8
import Banner from "./components/Banner.svelte";
9
9
10
10
import { flavors } from "@catppuccin/palette";
11
-
import { onMount, onDestroy } from "svelte";
12
11
import { needsRefresh } from "@/utils/storage";
13
12
14
13
const routes = {
···
18
17
"/snippets": Snippets,
19
18
};
20
19
let flavour = $state("");
21
-
let accent = "";
22
-
let settings = globalSettings.storage.fallback;
23
-
let refresh = $state(needsRefresh.storage.fallback);
24
20
25
21
async function refreshSchoolboxURLs() {
26
22
logger.info("[App.svelte] Refreshing all Schoolbox URLs");
···
33
29
});
34
30
}
35
31
36
-
async function onBannerClick() {
37
-
refresh = false;
38
-
needsRefresh.storage.setValue(refresh);
39
-
refreshSchoolboxURLs();
40
-
}
41
-
42
32
function getAccentRgb(accent: string, flavour: string) {
43
33
// eslint-disable-next-line @typescript-eslint/no-explicit-any
44
34
let x = (flavors as any)[flavour].colors[accent].rgb;
45
35
return `rgb(${x.r}, ${x.g}, ${x.b})`;
46
36
}
47
37
48
-
let settingsUnwatch: () => void;
49
-
let refreshUnwatch: () => void;
50
-
51
-
onMount(async () => {
52
-
settings = await globalSettings.storage.getValue();
53
-
refresh = await needsRefresh.storage.getValue();
54
-
accent = settings.themeAccent;
55
-
flavour = settings.themeFlavour;
56
-
document.documentElement.style.setProperty("--ctp-accent", getAccentRgb(accent, flavour));
57
-
58
-
settingsUnwatch = globalSettings.storage.watch((newValue) => {
59
-
settings = newValue;
60
-
flavour = newValue.themeFlavour;
61
-
accent = newValue.themeAccent;
62
-
63
-
document.documentElement.style.setProperty("--ctp-accent", getAccentRgb(accent, flavour));
64
-
refresh = true;
65
-
needsRefresh.storage.setValue(refresh);
66
-
});
67
-
refreshUnwatch = needsRefresh.storage.watch((newValue) => {
68
-
refresh = newValue;
69
-
});
70
-
});
71
-
72
-
onDestroy(() => {
73
-
settingsUnwatch();
74
-
refreshUnwatch();
75
-
});
38
+
let accentRgb = $derived(getAccentRgb(globalSettings.state.themeAccent, globalSettings.state.themeFlavour));
76
39
</script>
77
40
78
-
<main class="flex flex-col items-center bg-ctp-base p-6 {flavour}">
41
+
<main class="flex flex-col items-center bg-ctp-base p-6 {flavour}" style="--ctp-accent: {accentRgb}">
79
42
<nav class="mb-4 flex rounded-xl px-4 py-2 text-ctp-text" id="navbar">
80
43
<a href="#/" class="navbutton-left" use:active={{ className: "active" }}>Settings</a>
81
44
<a href="#/plugins" class="navbutton-center" use:active={{ className: "active" }}>Plugins</a>
82
45
<a href="#/themes" class="navbutton-center" use:active={{ className: "active" }}>Themes</a>
83
46
<a href="#/snippets" class="navbutton-right" use:active={{ className: "active" }}>Snippets</a>
84
47
</nav>
85
-
<Banner visible={refresh} onclick={onBannerClick} />
48
+
<Banner
49
+
visible={needsRefresh.state}
50
+
onclick={() => {
51
+
needsRefresh.storage.setValue(false);
52
+
refreshSchoolboxURLs();
53
+
}} />
86
54
<Router {routes} />
87
55
</main>
+5
-2
src/utils/state.svelte.ts
+5
-2
src/utils/state.svelte.ts
···
12
12
this.state = $state(this.storage.fallback);
13
13
14
14
this.storage.getValue().then(this.update);
15
-
this.storage.watch(this.update);
15
+
this.storage.watch((newState) => this.update(newState, true));
16
16
}
17
17
18
-
private update = (newState: T | null) => {
18
+
private update = (newState: T | null, refresh?: boolean) => {
19
19
this.state = newState ?? this.storage.fallback;
20
+
if (refresh && this.storage.key !== "local:needsRefresh") {
21
+
needsRefresh.storage.setValue(true);
22
+
}
20
23
};
21
24
22
25
async set(updates: Partial<T>) {