schoolbox web extension :)
0
fork

Configure Feed

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

refactor: tidy up svelte 5 migration

willow 2e6fa9ba bd142804

+20 -47
+1 -1
src/entrypoints/popup/App.svelte
··· 85 85 <a href="#/themes" class="navbutton-center" use:active={{ className: "active" }}>Themes</a> 86 86 <a href="#/snippets" class="navbutton-right" use:active={{ className: "active" }}>Snippets</a> 87 87 </nav> 88 - <Banner visible={refresh} on:click={onBannerClick} /> 88 + <Banner visible={refresh} onclick={onBannerClick} /> 89 89 <Router {routes} /> 90 90 </main>
+1 -1
src/entrypoints/popup/app.css
··· 103 103 } 104 104 105 105 .current { 106 - @apply outline outline-ctp-text; 106 + @apply outline outline-ctp-overlay0; 107 107 } 108 108 109 109 .navbutton-left {
+3 -21
src/entrypoints/popup/components/Banner.svelte
··· 1 1 <script lang="ts"> 2 - import { run } from 'svelte/legacy'; 2 + let { visible = false, onclick } = $props(); 3 3 4 4 import { Info } from "lucide-svelte"; 5 - import { writable } from "svelte/store"; 6 - import { createEventDispatcher } from "svelte"; 7 - 8 - interface Props { 9 - visible?: boolean; // Use a prop to control visibility 10 - } 11 - 12 - let { visible = false }: Props = $props(); 13 - const bannerVisible = writable(visible); 14 - // Watch for changes in the prop and update the store 15 - run(() => { 16 - bannerVisible.set(visible); 17 - }); 18 - 19 - const dispatch = createEventDispatcher(); 20 - function handleClick() { 21 - dispatch("click"); 22 - } 23 5 </script> 24 6 25 - {#if $bannerVisible} 7 + {#if visible} 26 8 <button 27 9 class="banner bg-ctp-blue text-ctp-crust rounded-lg mb-4 flex items-center justify-center p-4 w-full" 28 - onclick={handleClick}> 10 + {onclick}> 29 11 <Info class="w-8 mr-2" /> 30 12 <p>Click here to apply changes</p> 31 13 </button>
+10 -20
src/entrypoints/popup/components/Modal.svelte
··· 1 1 <script lang="ts"> 2 - import { run, self, createBubbler, stopPropagation } from 'svelte/legacy'; 3 - 4 - const bubble = createBubbler(); 2 + let { showModal = $bindable(), header, children } = $props(); 5 3 import { X } from "lucide-svelte"; 6 4 7 - interface Props { 8 - showModal: boolean; 9 - header?: import('svelte').Snippet<[any]>; 10 - children?: import('svelte').Snippet; 11 - } 5 + let dialog: HTMLDialogElement | undefined = $state(); 12 6 13 - let { showModal = $bindable(), header, children }: Props = $props(); 14 - 15 - let dialog: HTMLDialogElement = $state(); 16 - 17 - run(() => { 18 - if (dialog && showModal) dialog.showModal(); 7 + $effect(() => { 8 + if (showModal) dialog?.showModal(); 19 9 }); 20 10 </script> 21 11 22 - <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions --> 23 12 <dialog 24 13 bind:this={dialog} 25 14 onclose={() => (showModal = false)} 26 - onclick={self(() => dialog.close())} 15 + onclick={(e) => { 16 + if (e.target === dialog) dialog.close(); 17 + }} 27 18 class="bg-ctp-base text-ctp-text relative"> 28 19 <!-- svelte-ignore a11y_autofocus --> 29 - <button autofocus onclick={() => dialog.close()} class="small bg-ctp-surface1 absolute top-0 right-0 m-2" 20 + <button autofocus onclick={() => dialog?.close()} class="small bg-ctp-surface1 absolute top-0 right-0 m-2" 30 21 ><X /></button> 31 22 32 - <!-- svelte-ignore a11y_no_static_element_interactions --> 33 - <div onclick={stopPropagation(bubble('click'))} class="p-4"> 34 - {@render header?.({ class: "py-5", })} 23 + <div class="p-4"> 24 + {@render header?.({ class: "py-5" })} 35 25 {@render children?.()} 36 26 </div> 37 27 </dialog>
+5 -4
src/entrypoints/popup/routes/Themes.svelte
··· 55 55 56 56 <Modal bind:showModal> 57 57 {#snippet header()} 58 - <h2 class="mb-4 text-xl">Choose an icon</h2> 58 + <h2 class="mb-4 text-xl">Choose an icon</h2> 59 59 {/snippet} 60 60 61 61 <div class="grid grid-cols-3 gap-4"> 62 - {#each Object.entries(logos) as [logoId, logo]} 62 + {#each Object.entries(logos) as [logoId, logo] (logoId)} 63 63 <button 64 64 onclick={() => logoClicked(logoId)} 65 65 class:highlight={settings.themeLogo === logoId} ··· 81 81 <Title title="Themes" bind:checked={settings.themes} on:change={handleToggleChange} /> 82 82 83 83 <div id="flavours" class="flex my-6 py-2 rounded-xl text-ctp-text"> 84 - {#each flavours as flavour} 84 + {#each flavours as flavour (flavour)} 85 85 <button 86 86 class:active={settings.themeFlavour === flavour} 87 87 class:navbutton-left={flavour === "latte"} ··· 92 92 </div> 93 93 94 94 <div id="palette"> 95 - {#each accents as accent} 95 + {#each accents as accent (accent)} 96 96 <button 97 97 class="bg-ctp-{accent}" 98 98 class:current={settings.themeAccent === accent} 99 99 title={accent} 100 + aria-label={accent} 100 101 onclick={() => accentClicked(accent)}></button> 101 102 {/each} 102 103 </div>