5 files changed, 52 insertions, 18 deletions
diff --git a/src/lib/Error/AnimeRateLimited.svelte b/src/lib/Error/AnimeRateLimited.svelte
index 96df3ad5..4671d45b 100644
--- a/src/lib/Error/AnimeRateLimited.svelte
+++ b/src/lib/Error/AnimeRateLimited.svelte
@@ -1,15 +1,22 @@
 <script>
   import Popup from '$lib/Layout/Popup.svelte';
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
 </script>
 
 <Popup locked fullscreen>
-  <p><slot /></p>
+  <p>{@render children?.()}</p>
 
   <span>It is likely that you have been rate-limited by AniList. Please try again later.</span>
 
   {#await fetch('https://api.waifu.pics/sfw/cry') then response}
     {#await response.json() then json}
-      <p />
+      <p></p>
 
       <a href={`https://trace.moe/?url=${encodeURIComponent(json.url)}`} target="_blank">
         <img src={json.url} alt="" style="width: 30vw;" />
diff --git a/src/lib/Error/DotDotDot.svelte b/src/lib/Error/DotDotDot.svelte
index 73261eba..22cd895c 100644
--- a/src/lib/Error/DotDotDot.svelte
+++ b/src/lib/Error/DotDotDot.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
 
-  export let max: number | undefined = undefined;
-  export let perMs = 1000;
-  export let start = '';
+  interface Props {
+    max?: number | undefined;
+    perMs?: number;
+    start?: string;
+  }
 
-  let dots = start;
+  let { max = undefined, perMs = 1000, start = '' }: Props = $props();
+
+  let dots = $state(start);
   let interval: NodeJS.Timeout;
 
   onMount(() => {
diff --git a/src/lib/Error/LogInRestricted.svelte b/src/lib/Error/LogInRestricted.svelte
index 07a9adec..d19dfd3d 100644
--- a/src/lib/Error/LogInRestricted.svelte
+++ b/src/lib/Error/LogInRestricted.svelte
@@ -7,7 +7,7 @@
   <div class="message">
     Please <a
       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={() => {
+      onclick={() => {
         localStorage.setItem(
           'redirect',
           window.location.origin + window.location.pathname + window.location.search
diff --git a/src/lib/Error/Notice.svelte b/src/lib/Error/Notice.svelte
index d4cf96c5..6bdd7327 100644
--- a/src/lib/Error/Notice.svelte
+++ b/src/lib/Error/Notice.svelte
@@ -1,2 +1,12 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let { children } = $props();
+</script>
+
 <b>Notice:</b>
-<slot />
+{@render children?.()}
diff --git a/src/lib/Error/RateLimited.svelte b/src/lib/Error/RateLimited.svelte
index 973d75d9..15e779b3 100644
--- a/src/lib/Error/RateLimited.svelte
+++ b/src/lib/Error/RateLimited.svelte
@@ -1,10 +1,23 @@
 <script lang="ts">
-  export let type = 'Media';
-  export let loginSessionError = true;
-  export let contact = true;
-  export let list = true;
-  export let card = false;
-  export let might = true;
+  interface Props {
+    type?: string;
+    loginSessionError?: boolean;
+    contact?: boolean;
+    list?: boolean;
+    card?: boolean;
+    might?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    type = 'Media',
+    loginSessionError = true,
+    contact = true,
+    list = true,
+    card = false,
+    might = true,
+    children
+  }: Props = $props();
 </script>
 
 <div class:card>
@@ -24,10 +37,10 @@
           </p>
         {/if}
 
-        <slot />
+        {@render children?.()}
 
         {#if contact}
-          <p />
+          <p></p>
 
           If the problem persists, please contact
           <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.
@@ -48,10 +61,10 @@
       </p>
     {/if}
 
-    <slot />
+    {@render children?.()}
 
     {#if contact}
-      <p />
+      <p></p>
 
       If the problem persists, please contact
       <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.