+3 -13

src/entrypoints/popup/App.svelte

reviewed

··· 1 1 <script lang="ts"> 2 2 import { flavors } from "@catppuccin/palette"; 3 3 - import { globalSettings, needsRefresh, schoolboxUrls, updated } from "@/utils/storage"; 4 4 - import { RotateCw } from "@lucide/svelte"; 3 3 + import { globalSettings, schoolboxUrls, updated } from "@/utils/storage"; 5 4 import { logger } from "@/utils/logger"; 6 5 import { browser, onMount } from "#imports"; 7 6 ··· 11 10 import Plugins from "./routes/Plugins.svelte"; 12 11 import Themes from "./routes/Themes.svelte"; 13 12 import Snippets from "./routes/Snippets.svelte"; 14 14 - import Banner from "./components/Banner.svelte"; 15 13 16 14 const routes = { 17 15 "/": Home, ··· 46 44 </script> 47 45 48 46 <main 49 49 - class="flex flex-col items-center bg-ctp-base p-6 {globalSettings.state.themeFlavour}" 47 47 + class="bg-ctp-base flex flex-col items-center p-6 {globalSettings.state.themeFlavour}" 50 48 style="--ctp-accent: {accentRgb}"> 51 51 - <nav class="mb-4 flex rounded-xl px-4 py-2 text-ctp-text" id="navbar"> 49 49 + <nav class="text-ctp-text mb-4 flex rounded-xl px-4 py-2" id="navbar"> 52 50 <a href="#/" class="navbutton-left" use:active={{ className: "active" }}>Settings</a> 53 51 <a href="#/plugins" class="navbutton-center" use:active={{ className: "active" }}>Plugins</a> 54 52 <a href="#/themes" class="navbutton-center" use:active={{ className: "active" }}>Themes</a> 55 53 <a href="#/snippets" class="navbutton-right" use:active={{ className: "active" }}>Snippets</a> 56 54 </nav> 57 57 - 58 58 - <Banner 59 59 - message="Click here to apply changes" 60 60 - visible={needsRefresh.state} 61 61 - onclick={() => { 62 62 - needsRefresh.storage.setValue(false); 63 63 - refreshSchoolboxURLs(); 64 64 - }}><RotateCw /></Banner> 65 55 66 56 <Router {routes} /> 67 57 </main>

-7

src/utils/storage/global.ts

reviewed

··· 18 18 userSnippets: {}, 19 19 }, 20 20 }), 21 21 - true, 22 22 - ); 23 23 - 24 24 - export const needsRefresh = new StorageState( 25 25 - storage.defineItem<boolean>("local:needsRefresh", { 26 26 - fallback: false, 27 27 - }), 28 21 ); 29 22 30 23 // whether schooltape was recently updated

-1

src/utils/storage/plugins.ts

reviewed

··· 99 99 storage.defineItem<Types.Toggle>(`local:plugin-${pluginId}`, { 100 100 fallback: { toggle: pluginConfig.default }, 101 101 }), 102 102 - true, 103 102 ), 104 103 }; 105 104

-1

src/utils/storage/snippets.ts

reviewed

··· 43 43 storage.defineItem<Types.Toggle>(`local:snippet-${snippetId}`, { 44 44 fallback: { toggle: snippetConfig.default }, 45 45 }), 46 46 - true, 47 46 ), 48 47 }; 49 48

+3 -10

src/utils/storage/state.svelte.ts

reviewed

··· 1 1 import type { WxtStorageItem } from "#imports"; 2 2 - import { needsRefresh } from "./global"; 3 2 4 3 export class StorageState<T> { 5 4 public state; 6 5 7 7 - constructor( 8 8 - public storage: WxtStorageItem<T, {}>, 9 9 - refresh: boolean = false, 10 10 - ) { 6 6 + constructor(public storage: WxtStorageItem<T, {}>) { 11 7 this.storage = storage; 12 8 this.state = $state(this.storage.fallback); 13 9 14 10 this.storage.getValue().then(this.update); 15 15 - this.storage.watch((newState) => this.update(newState, refresh)); 11 11 + this.storage.watch((newState) => this.update(newState)); 16 12 } 17 13 18 18 - private update = (newState: T | null, refresh?: boolean) => { 14 14 + private update = (newState: T | null) => { 19 15 this.state = newState ?? this.storage.fallback; 20 20 - if (refresh && this.storage.key !== "local:needsRefresh") { 21 21 - needsRefresh.storage.setValue(true); 22 22 - } 23 16 }; 24 17 25 18 async set(updates: Partial<T>) {