schoolbox web extension :)
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor(popup): improve refresh banner and accent logic

willow 15614334 ca9d685e

+13 -42
+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
··· 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>) {