From 69753f974994b49b2df059f9b5b401d14db4a8fa Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 23 Jan 2026 02:20:50 -0800
Subject: refactor: Migrate event handlers to new Svelte 5 syntax

---
 src/lib/Tools/ActivityHistory/Grid.svelte |  4 ++--
 src/lib/Tools/ActivityHistory/Tool.svelte |  2 +-
 src/lib/Tools/FollowFix.svelte            |  4 ++--
 src/lib/Tools/Hayai.svelte                |  2 +-
 src/lib/Tools/InputTemplate.svelte        |  4 ++--
 src/lib/Tools/Picker.svelte               |  2 +-
 src/lib/Tools/Tracker/Tool.svelte         | 10 +++++-----
 src/lib/Tools/Wrapped/Media.svelte        |  4 ++--
 src/lib/Tools/Wrapped/MediaExtras.svelte  |  4 ++--
 src/lib/Tools/Wrapped/Tool.svelte         | 24 ++++++++++++------------
 src/lib/Tools/Wrapped/Top/Activity.svelte |  2 +-
 11 files changed, 31 insertions(+), 31 deletions(-)

(limited to 'src/lib/Tools')

diff --git a/src/lib/Tools/ActivityHistory/Grid.svelte b/src/lib/Tools/ActivityHistory/Grid.svelte
index e4ad6332..b693f912 100644
--- a/src/lib/Tools/ActivityHistory/Grid.svelte
+++ b/src/lib/Tools/ActivityHistory/Grid.svelte
@@ -45,8 +45,8 @@
       <div
         class="grid-item"
         style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
-        on:click={() => (baseHue = Math.floor(Math.random() * 360))}
-        on:keydown={() => {
+        onclick={() => (baseHue = Math.floor(Math.random() * 360))}
+        onkeydown={() => {
           return;
         }}
         role="button"
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index e439ed4d..6f6282a6 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -88,7 +88,7 @@
           <Spacer />
         {/if}
 
-        <button on:click={screenshot}>Generate grid image</button>
+        <button onclick={screenshot}>Generate grid image</button>
       </div>
 
       <Spacer />
diff --git a/src/lib/Tools/FollowFix.svelte b/src/lib/Tools/FollowFix.svelte
index b9fddeff..58f31e8c 100644
--- a/src/lib/Tools/FollowFix.svelte
+++ b/src/lib/Tools/FollowFix.svelte
@@ -19,7 +19,7 @@
       minlength="1"
       placeholder="Username"
       bind:value={input}
-      on:keypress={(e) => {
+      onkeypress={(e) => {
         if (e.key === 'Enter') {
           submit = input;
 
@@ -28,7 +28,7 @@
         }
       }}
     />
-    <a href={'#'} on:click={() => (submit = input)}>
+    <a href={'#'} onclick={() => (submit = input)}>
       Toggle follow for {input.length === 0 ? '...' : input}
     </a>
   </p>
diff --git a/src/lib/Tools/Hayai.svelte b/src/lib/Tools/Hayai.svelte
index 79459985..1ba99d86 100644
--- a/src/lib/Tools/Hayai.svelte
+++ b/src/lib/Tools/Hayai.svelte
@@ -99,5 +99,5 @@
 
   <Spacer />
 
-  <input type="file" id="epub-file" accept=".epub" on:change={handleFileUpload} />
+  <input type="file" id="epub-file" accept=".epub" onchange={handleFileUpload} />
 </div>
diff --git a/src/lib/Tools/InputTemplate.svelte b/src/lib/Tools/InputTemplate.svelte
index c0ee4f1d..5627eda6 100644
--- a/src/lib/Tools/InputTemplate.svelte
+++ b/src/lib/Tools/InputTemplate.svelte
@@ -30,7 +30,7 @@
       type="text"
       placeholder={field}
       bind:value={input}
-      on:keypress={(e) => {
+      onkeypress={(e) => {
         if (e.key === 'Enter') {
           submission = input;
 
@@ -43,7 +43,7 @@
     />
     <button
       class="button-lined"
-      on:click={() => {
+      onclick={() => {
         submission = input;
 
         onSubmit();
diff --git a/src/lib/Tools/Picker.svelte b/src/lib/Tools/Picker.svelte
index 3f20300f..dab74599 100644
--- a/src/lib/Tools/Picker.svelte
+++ b/src/lib/Tools/Picker.svelte
@@ -10,7 +10,7 @@
 <blockquote>
   <select
     bind:value={tool}
-    on:change={() => {
+    onchange={() => {
       if (browser) goto(root(`/tools/${tool}`));
     }}
   >
diff --git a/src/lib/Tools/Tracker/Tool.svelte b/src/lib/Tools/Tracker/Tool.svelte
index 314dce18..6c7fbf1c 100644
--- a/src/lib/Tools/Tracker/Tool.svelte
+++ b/src/lib/Tools/Tracker/Tool.svelte
@@ -75,7 +75,7 @@
   <input type="url" placeholder="URL" bind:value={url} />
   <input type="text" placeholder="Title" bind:value={title} />
   <input type="number" placeholder="Progress (defaults to 0)" bind:value={progress} />
-  <button class="button-lined" on:click={() => addEntry(url, title, progress)}> Add </button>
+  <button class="button-lined" onclick={() => addEntry(url, title, progress)}> Add </button>
 
   <Spacer />
 
@@ -96,7 +96,7 @@
               type="number"
               value={entry.progress}
               size={3}
-              on:change={(e) =>
+              onchange={(e) =>
                 adjustEntry(entry.id, e.target ? e.target.value || entry.progress : entry.progress)}
             />
 
@@ -104,17 +104,17 @@
               <span class="opaque">|</span>
               <button
                 class="button-square button-action"
-                on:click={() => adjustEntry(entry.id, entry.progress - 1)}
+                onclick={() => adjustEntry(entry.id, entry.progress - 1)}
                 >-
               </button>
               <button
                 class="button-square button-action"
-                on:click={() => adjustEntry(entry.id, entry.progress + 1)}
+                onclick={() => adjustEntry(entry.id, entry.progress + 1)}
               >
                 +
               </button>
               <span class="opaque">|</span>
-              <button on:click={() => deleteEntry(entry.id)}>Remove</button>
+              <button onclick={() => deleteEntry(entry.id)}>Remove</button>
             </span>
           </div>
         </li>
diff --git a/src/lib/Tools/Wrapped/Media.svelte b/src/lib/Tools/Wrapped/Media.svelte
index ea8a989b..90e0cde3 100644
--- a/src/lib/Tools/Wrapped/Media.svelte
+++ b/src/lib/Tools/Wrapped/Media.svelte
@@ -28,7 +28,7 @@
             )}
             alt="Highest Rated Anime Cover"
             class="cover-image"
-            on:load={updateWidth}
+            onload={updateWidth}
           />
         </a>
         <div>
@@ -67,7 +67,7 @@
             )}
             alt="Highest Rated Manga Cover"
             class="cover-image"
-            on:load={updateWidth}
+            onload={updateWidth}
           />
         </a>
         <div>
diff --git a/src/lib/Tools/Wrapped/MediaExtras.svelte b/src/lib/Tools/Wrapped/MediaExtras.svelte
index 9e755ea5..78b89e36 100644
--- a/src/lib/Tools/Wrapped/MediaExtras.svelte
+++ b/src/lib/Tools/Wrapped/MediaExtras.svelte
@@ -22,7 +22,7 @@
             src={proxy(topMedia.topGenreMedia.coverImage.extraLarge)}
             alt="Highest Rated Genre Cover"
             class="cover-image"
-            on:load={updateWidth}
+            onload={updateWidth}
           />
         </a>
         <div>
@@ -53,7 +53,7 @@
             src={proxy(topMedia.topTagMedia.coverImage.extraLarge)}
             alt="Highest Rated Tag Cover"
             class="cover-image"
-            on:load={updateWidth}
+            onload={updateWidth}
           />
         </a>
         <div>
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index bc28f97e..3ec18494 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -890,7 +890,7 @@
             <div class="category-grid pure-category">
               <a
                 href={'#'}
-                on:click={(e) => {
+                onclick={(e) => {
                   e.preventDefault();
                   triggerFetch();
                 }}
@@ -922,11 +922,11 @@
       {/if}
 
       <div id="options" class="card">
-        <button on:click={screenshot} data-umami-event="Generate Wrapped"> Generate image </button>
+        <button onclick={screenshot} data-umami-event="Generate Wrapped"> Generate image </button>
         {#if !shouldFetchData}
-          <button on:click={triggerFetch} data-umami-event="Load Wrapped Data"> Load data </button>
+          <button onclick={triggerFetch} data-umami-event="Load Wrapped Data"> Load data </button>
         {:else if needsRefetch}
-          <button on:click={triggerFetch} data-umami-event="Refetch Wrapped Data">
+          <button onclick={triggerFetch} data-umami-event="Refetch Wrapped Data">
             Reload data
           </button>
         {/if}
@@ -970,9 +970,9 @@
             {/each}
           </select>
           Highest genre and tag count<br />
-          <button on:click={updateWidth}>Find best fit</button>
-          <button on:click={() => (width -= 25)}>-25px</button>
-          <button on:click={() => (width += 25)}>+25px</button>
+          <button onclick={updateWidth}>Find best fit</button>
+          <button onclick={() => (width -= 25)}>-25px</button>
+          <button onclick={() => (width += 25)}>+25px</button>
           Width adjustment<br />
         </details>
 
@@ -980,7 +980,7 @@
           <summary>Calculation</summary>
 
           <input type="checkbox" bind:checked={useFullActivityHistory} disabled={needsRefetch} />
-          Enable full-year activity<button class="smaller-button" on:click={pruneFullYear}
+          Enable full-year activity<button class="smaller-button" onclick={pruneFullYear}
             >Refresh data</button
           >
           <br />
@@ -997,7 +997,7 @@
             bind:value={startDateFilter}
             placeholder="Start date"
             disabled={needsRefetch}
-            on:change={() => {
+            onchange={() => {
               dateTicked = true;
 
               update();
@@ -1009,7 +1009,7 @@
             bind:value={endDateFilter}
             placeholder="End date"
             disabled={needsRefetch}
-            on:change={() => {
+            onchange={() => {
               dateTicked = true;
 
               update();
@@ -1037,12 +1037,12 @@
           <input
             type="text"
             bind:value={excludedKeywordsInput}
-            on:keypress={(e) => {
+            onkeypress={(e) => {
               e.key === 'Enter' && submitExcludedKeywords();
             }}
           />
           Excluded keywords
-          <button on:click={submitExcludedKeywords} title="Or click your Enter key" use:tooltip>
+          <button onclick={submitExcludedKeywords} title="Or click your Enter key" use:tooltip>
             Submit
           </button>
           <br />
diff --git a/src/lib/Tools/Wrapped/Top/Activity.svelte b/src/lib/Tools/Wrapped/Top/Activity.svelte
index a91bedfb..ea6ba592 100644
--- a/src/lib/Tools/Wrapped/Top/Activity.svelte
+++ b/src/lib/Tools/Wrapped/Top/Activity.svelte
@@ -15,7 +15,7 @@
 
 <div class="grid-item image-grid avatar-grid category top-category">
   <a href={`https://anilist.co/user/${$identity.name}`} target="_blank">
-    <img src={proxy(wrapped.avatar.large)} alt="User Avatar" on:load={updateWidth} />
+    <img src={proxy(wrapped.avatar.large)} alt="User Avatar" onload={updateWidth} />
   </a>
   <div>
     <div>
-- 
cgit v1.2.3