refactor: Migrate event handlers to new Svelte 5 syntax

10 files changed, 39 insertions, 39 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5ba94ec7..2ca78271 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -235,7 +235,7 @@
           <a
             class="header-item"
             href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
-            on:click={async () => {
+            onclick={async () => {
               await localforage.setItem(
                 'redirect',
                 window.location.origin + window.location.pathname + window.location.search
diff --git a/src/routes/anilist-badges-easter-event-2025/+page.svelte b/src/routes/anilist-badges-easter-event-2025/+page.svelte
index 590b0d14..d1a18967 100644
--- a/src/routes/anilist-badges-easter-event-2025/+page.svelte
+++ b/src/routes/anilist-badges-easter-event-2025/+page.svelte
@@ -42,7 +42,7 @@
 <div class="card main-content">
   {#if page === 0}
     <p class="big-text">Welcome to the Easter Egg Hunt!</p>
-    <button on:click={() => updatePage()}>Begin Hunt</button>
+    <button onclick={() => updatePage()}>Begin Hunt</button>
     <br />
     <p>due.moe × AniList Badges</p>
   {:else if page === 1}
diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
index 2ac371f1..6d2728bb 100644
--- a/src/routes/events/group/[group]/+page.svelte
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -31,7 +31,7 @@
       {#if json === null}
         <Message message="" loader="ripple" slot>
           This group may not exist. Please
-          <a href={'#'} on:click={() => location.reload()}>try again</a> later.
+          <a href={'#'} onclick={() => location.reload()}>try again</a> later.
         </Message>
       {:else}
         {@const group = asGroup(json)}
diff --git a/src/routes/hololive/[[stream]]/+page.svelte b/src/routes/hololive/[[stream]]/+page.svelte
index d5419711..15d2125c 100644
--- a/src/routes/hololive/[[stream]]/+page.svelte
+++ b/src/routes/hololive/[[stream]]/+page.svelte
@@ -66,7 +66,7 @@
     {:catch}
       <Message loader="ripple" slot>
         {$locale().hololive.parseError}
-        <a href={'#'} on:click={() => location.reload()}>Try again?</a>
+        <a href={'#'} onclick={() => location.reload()}>Try again?</a>
       </Message>
     {/await}
   {:else}
@@ -77,6 +77,6 @@
 {:catch}
   <Message loader="ripple" slot>
     {$locale().hololive.loadError} Please
-    <a href={'#'} on:click={() => location.reload()}>try again</a> later.
+    <a href={'#'} onclick={() => location.reload()}>try again</a> later.
   </Message>
 {/await}
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 160add29..97b9dd5a 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -32,7 +32,7 @@
 <!-- <blockquote>
 	<select
 		bind:value={timeZone}
-		on:change={() =>
+		onchange={() =>
 			(subsPleasePromise = fetch(root(`/api/subsplease?tz=${timeZone}`)).then((r) => r.json()))}
 	>
 		{#each Intl.supportedValuesOf('timeZone') as zone}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index e8b79fa1..a6223b5f 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -84,7 +84,7 @@
         class="smaller-button button-badge badge-info unclickable-button"
         title={$locale().settings.debug.tooltips.version}
         use:tooltip
-        on:click|preventDefault
+        onclick={(e) => e.preventDefault()}
         >{data.commit.slice(0, 7)}
       </button></summary
     >
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 4014c58f..56ef8a10 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -15,7 +15,7 @@
 <div class="card">
   <div class="tool-grid">
     {#each Object.keys(tools).filter((t) => t !== 'default' && !tools[t].hidden) as t}
-      <a href={root(`/tools/${tools[t].id}`)} on:click={() => (tool = t)}>
+      <a href={root(`/tools/${tools[t].id}`)} onclick={() => (tool = t)}>
         <div class="tool-grid-tool card">
           <span class="title">
             {tools[t].name()}
diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index 4d8dc16e..68eb0c07 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -47,7 +47,7 @@
     <blockquote style="margin: 0 0 0 1.5rem;">
       Did you mean "<a
         href={root(`/tools/${tools[suggestion].id}`)}
-        on:click={() => (tool = suggestion)}
+        onclick={() => (tool = suggestion)}
         style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''}
       >
         {suggestion === '...' ? '...' : tools[suggestion].name()}</a
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 0cfe05fd..7f33f170 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -360,7 +360,7 @@
 
       <input
         type="checkbox"
-        on:change={() => {
+        onchange={() => {
           if (userData) toggleHideMissingBadgesQuery.mutate(null).then();
         }}
         checked={preferences.hide_missing_badges}
@@ -372,7 +372,7 @@
 
       <input
         type="checkbox"
-        on:change={() => {
+        onchange={() => {
           if (userData) toggleHideAWCBadgesQuery.mutate(null).then();
         }}
         checked={preferences.hide_awc_badges}
@@ -388,11 +388,11 @@
           <div
             class="card card-small pinned-category"
             draggable="true"
-            on:dragstart={(event) => handleDragStart(event, category)}
-            on:dragover={handleDragOver}
-            on:dragenter={(event) => handleDragEnter(event, category)}
-            on:dragleave={(event) => handleDragLeave(event, category)}
-            on:drop={handleDrop}
+            ondragstart={(event) => handleDragStart(event, category)}
+            ondragover={handleDragOver}
+            ondragenter={(event) => handleDragEnter(event, category)}
+            ondragleave={(event) => handleDragLeave(event, category)}
+            ondrop={handleDrop}
             role="button"
             tabindex="0"
           >
@@ -401,7 +401,7 @@
             </span>
 
             <button
-              on:click={() => {
+              onclick={() => {
                 if (userData) toggleCategoryQuery.mutate({ category }).then();
               }}>Remove</button
             >
@@ -413,7 +413,7 @@
             <input type="text" id="category" placeholder="Category" style="width: 10em;" />
           </span>
 
-          <button class="button-lined" on:click={toggleCategory}>Add</button>
+          <button class="button-lined" onclick={toggleCategory}>Add</button>
         </span>
       </div>
 
@@ -422,7 +422,7 @@
       Biography
 
       <button
-        on:click={() => {
+        onclick={() => {
           if (userData)
             setBiographyQuery
               .mutate({
@@ -444,7 +444,7 @@
       Badge Wall Custom CSS
 
       <button
-        on:click={() => {
+        onclick={() => {
           if (userData)
             setBadgeWallCSSQuery
               .mutate({
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index c9bb7454..2abf8377 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -576,7 +576,7 @@
               of all badges from your Badge Wall.
               <Spacer />
               <button
-                on:click={async () => {
+                onclick={async () => {
                   noticeDismissed = true;
 
                   await localforage.setItem('badgeWallNoticeDismissed', 'true');
@@ -591,7 +591,7 @@
 
           <div class="card">
             {#if authorised}
-              <button on:click={setShadowHide}>Shadow Hide Badges</button>
+              <button onclick={setShadowHide}>Shadow Hide Badges</button>
             {/if}
 
             {#if isOwner && authorised}
@@ -600,7 +600,7 @@
 
             {#if isOwner}
               <button
-                on:click={() => {
+                onclick={() => {
                   selectedBadge = undefined;
                   editMode = !editMode;
                 }}
@@ -611,7 +611,7 @@
               </button>
               <span style="margin: 0 0.625rem;">•</span>
               <button
-                on:click={() => {
+                onclick={() => {
                   selectedBadge = undefined;
                   importMode = !importMode;
                 }}
@@ -622,7 +622,7 @@
               </button>
               <span style="margin: 0 0.625rem;">•</span>
               <button
-                on:click={() => {
+                onclick={() => {
                   selectedBadge = undefined;
                   migrateMode = !migrateMode;
                 }}
@@ -631,7 +631,7 @@
               </button>
               <span style="margin: 0 0.625rem;">•</span>
               <button
-                on:click={() => {
+                onclick={() => {
                   selectedBadge = undefined;
                   hideMode = !hideMode;
                 }}
@@ -639,11 +639,11 @@
                 Hide Category
               </button>
               <!-- <!-- <span style="margin: 0 0.625rem;">•</span> -->
-              <!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
+              <!-- <button onclick={() => exportBadges(groupedBadges)}>Export Badges</button> -->
 
               {#if shadowHidden}
                 <span style="margin: 0 0.625rem;">•</span>
-                <button on:click={setShadowHide}>Un-shadow Hide Badges</button>
+                <button onclick={setShadowHide}>Un-shadow Hide Badges</button>
               {/if}
 
               {#if editMode && isOwner}
@@ -807,7 +807,7 @@
                       />
                     </span>
                   </Dropdown>
-                  <button class="button-lined" on:click={submitBadge}
+                  <button class="button-lined" onclick={submitBadge}
                     >{selectedBadge
                       ? $locale().user.badges.editMode.update
                       : $locale().user.badges.editMode.add}</button
@@ -816,7 +816,7 @@
                     {$locale().user.badges.editMode.or}
                     <button
                       class="button-lined"
-                      on:click={() => {
+                      onclick={() => {
                         if (selectedBadge) removeBadge(selectedBadge);
                       }}>{$locale().user.badges.editMode.delete}</button
                     >
@@ -869,7 +869,7 @@
         />
 
         {#if authorised}
-          <button on:click={shadowHideBadge}>
+          <button onclick={shadowHideBadge}>
             {#if selectedBadge && selectedBadge.shadow_hidden}
               Un-shadow
             {:else}
@@ -921,7 +921,7 @@
     <Spacer />
 
     <button
-      on:click={() => {
+      onclick={() => {
         importMode = false;
         importImages = undefined;
       }}
@@ -929,7 +929,7 @@
     >
       {$locale().user.badges.importMode.cancel}
     </button>
-    <button on:click={() => parsePost()} class="button-lined" style="float: right;">
+    <button onclick={() => parsePost()} class="button-lined" style="float: right;">
       {$locale().user.badges.importMode.fetch}
     </button>
 
@@ -941,7 +941,7 @@
       <button
         class="button-lined no-shadow"
         data-umami-event="Remove All Badges"
-        on:click={removeAllBadges}
+        onclick={removeAllBadges}
       >
         {$locale({
           values: {
@@ -963,7 +963,7 @@
         }
       }).user.badges.importMode.importConfirm}&nbsp;
       <button
-        on:click={() => importBadges()}
+        onclick={() => importBadges()}
         class="button-lined no-shadow"
         data-umami-event="Import Badges"
       >
@@ -1003,7 +1003,7 @@
   <Spacer />
 
   <button
-    on:click={() => {
+    onclick={() => {
       importMode = false;
       importImages = undefined;
     }}
@@ -1011,7 +1011,7 @@
   >
     {$locale().user.badges.importMode.cancel}
   </button>
-  <button on:click={() => migrateCategory()} class="button-lined" style="float: right;">
+  <button onclick={() => migrateCategory()} class="button-lined" style="float: right;">
     Migrate
   </button>
 </Popup>
@@ -1039,7 +1039,7 @@
   <Spacer />
 
   <button
-    on:click={() => {
+    onclick={() => {
       hideMode = false;
       importImages = undefined;
     }}
@@ -1047,7 +1047,7 @@
   >
     {$locale().user.badges.importMode.cancel}
   </button>
-  <button on:click={() => hideCategory()} class="button-lined" style="float: right;"
+  <button onclick={() => hideCategory()} class="button-lined" style="float: right;"
     >Toggle Visibility</button
   >
 </Popup>