schoolbox web extension :)
refactor: import svelte state
+9
-12
+4
-3
src/entrypoints/popup/App.svelte
+4
-3
src/entrypoints/popup/App.svelte
···
9
9
10
10
import { flavors } from "@catppuccin/palette";
11
11
import { needsRefresh } from "@/utils/storage";
12
+
import { globalSettings } from "#imports";
12
13
13
14
const routes = {
14
15
"/": Home,
···
16
17
"/themes": Themes,
17
18
"/snippets": Snippets,
18
19
};
19
-
20
-
let flavour = $derived(globalSettings.state.themeFlavour);
21
20
22
21
async function refreshSchoolboxURLs() {
23
22
logger.info("[App.svelte] Refreshing all Schoolbox URLs");
···
39
38
let accentRgb = $derived(getAccentRgb(globalSettings.state.themeAccent, globalSettings.state.themeFlavour));
40
39
</script>
41
40
42
-
<main class="flex flex-col items-center bg-ctp-base p-6 {flavour}" style="--ctp-accent: {accentRgb}">
41
+
<main
42
+
class="flex flex-col items-center bg-ctp-base p-6 {globalSettings.state.themeFlavour}"
43
+
style="--ctp-accent: {accentRgb}">
43
44
<nav class="mb-4 flex rounded-xl px-4 py-2 text-ctp-text" id="navbar">
44
45
<a href="#/" class="navbutton-left" use:active={{ className: "active" }}>Settings</a>
45
46
<a href="#/plugins" class="navbutton-center" use:active={{ className: "active" }}>Plugins</a>
+5
-9
src/entrypoints/popup/routes/Home.svelte
+5
-9
src/entrypoints/popup/routes/Home.svelte
···
1
1
<script lang="ts">
2
2
import Footer from "../components/Footer.svelte";
3
-
4
-
let label = $derived(globalSettings.state.global ? "enabled" : "disabled");
5
-
let classList = $derived(
6
-
globalSettings.state.global
7
-
? "bg-ctp-green hover:bg-(--ctp-accent) active:bg-ctp-red/75"
8
-
: "bg-ctp-red hover:bg-(--ctp-accent) active:bg-ctp-green/75",
9
-
);
3
+
import { globalSettings } from "#imports";
10
4
</script>
11
5
12
6
<div id="card">
13
7
<h1 class="mb-6">Schooltape</h1>
14
8
15
9
<button
16
-
class={classList}
10
+
class={globalSettings.state.global
11
+
? "bg-ctp-green hover:bg-(--ctp-accent) active:bg-ctp-red/75"
12
+
: "bg-ctp-red hover:bg-(--ctp-accent) active:bg-ctp-green/75"}
17
13
id="toggle"
18
14
onclick={() => {
19
15
globalSettings.set({ global: !globalSettings.get().global });
20
16
}}
21
-
>{label}
17
+
>{globalSettings.state.global ? "enabled" : "disabled"}
22
18
</button>
23
19
</div>
24
20