From 875917bef08f67b8737091b205d1e00700756fac Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 26 Jan 2026 22:06:11 -0800
Subject: feat: Complete Svelte 5 runes syntax migration

---
 src/lib/Schedule/Crunchyroll.svelte        |   3 +-
 src/lib/Tools/Birthdays.svelte             | 126 +++++++++++++++--------------
 src/lib/Tools/Likes.svelte                 |  12 +--
 src/lib/Tools/Tracker/Tool.svelte          |  15 ++--
 src/lib/Tools/UmaMusumeBirthdays.svelte    |  24 +++---
 src/routes/+error.svelte                   |  24 +++---
 src/routes/+layout.svelte                  |  40 +++++----
 src/routes/reader/+page.svelte             |   7 +-
 src/routes/tools/[tool]/+page.svelte       |  15 +++-
 src/routes/user/[user]/+page.svelte        |  39 +++++----
 src/routes/user/[user]/badges/+page.svelte |  96 +++++++++++-----------
 11 files changed, 212 insertions(+), 189 deletions(-)

diff --git a/src/lib/Schedule/Crunchyroll.svelte b/src/lib/Schedule/Crunchyroll.svelte
index 9d7c8e70..9e687768 100644
--- a/src/lib/Schedule/Crunchyroll.svelte
+++ b/src/lib/Schedule/Crunchyroll.svelte
@@ -29,8 +29,7 @@
   const soon: CrunchyrollMedia<number | string>[] = crunchyroll.filter(
     (media) => media.day === 'soon'
   );
-
-  $: columnCount = Math.ceil(Object.keys(days).length / 2);
+  let columnCount = $derived(Math.ceil(Object.keys(days).length / 2));
 
   const ordinalSuffix = (i: number) => {
     const j = i % 10;
diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte
index 122662d4..a52887ed 100644
--- a/src/lib/Tools/Birthdays.svelte
+++ b/src/lib/Tools/Birthdays.svelte
@@ -18,28 +18,29 @@
 
   const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
   let date = new Date();
-  let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1);
-  let day = parseOrDefault(urlParameters, 'day', date.getDate());
-  let anisearchBirthdays: Promise<aniSearchBirthday[]>;
-  let acdbBirthdays: Promise<ACDBBirthday[]>;
+  let month = $state(parseOrDefault(urlParameters, 'month', date.getMonth() + 1));
+  let day = $state(parseOrDefault(urlParameters, 'day', date.getDate()));
+  let anisearchBirthdays: Promise<aniSearchBirthday[]> | undefined = $state(undefined);
+  let acdbBirthdays: Promise<ACDBBirthday[]> | undefined = $state(undefined);
 
-  $: {
-    month = Math.min(month, 12);
-    month = Math.max(month, 1);
-    day = Math.min(day, new Date(2024, month, 0).getDate());
-    day = Math.max(day, 1);
+  $effect(() => {
+    const clampedMonth = Math.max(1, Math.min(month, 12));
+    const maxDay = new Date(2024, clampedMonth, 0).getDate();
+    const clampedDay = Math.max(1, Math.min(day, maxDay));
 
-    if (browser) anisearchBirthdays = aniSearchBirthdays(month, day);
+    if (clampedMonth !== month) month = clampedMonth;
+    if (clampedDay !== day) day = clampedDay;
+    if (browser) anisearchBirthdays = aniSearchBirthdays(clampedMonth, clampedDay);
 
-    acdbBirthdays = ACDBBirthdays(month, day);
+    acdbBirthdays = ACDBBirthdays(clampedMonth, clampedDay);
 
     if (browser) {
-      $page.url.searchParams.set('month', month.toString());
-      $page.url.searchParams.set('day', day.toString());
+      $page.url.searchParams.set('month', clampedMonth.toString());
+      $page.url.searchParams.set('day', clampedDay.toString());
       clearAllParameters(['month', 'day']);
       history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
     }
-  }
+  });
 
   onMount(() => clearAllParameters(['month', 'day']));
 
@@ -94,58 +95,61 @@
   };
 </script>
 
-{#await acdbBirthdays}
-  <Message message="Loading birthday set one ..." />
-
-  <Skeleton grid={true} count={100} width="150px" height="170px" />
-{:then acdbBirthdays}
-  {#await anisearchBirthdays}
-    <Message message="Loading birthday set two ..." />
-
+{#if acdbBirthdays && anisearchBirthdays}
+  {#await acdbBirthdays}
+    <Message message="Loading birthday set one ..." />
     <Skeleton grid={true} count={100} width="150px" height="170px" />
-  {:then anisearch}
-    {@const birthdays = combineBirthdaySources(acdbBirthdays, anisearch)}
-
-    <p>
-      <select bind:value={month}>
-        {#each Array.from({ length: 12 }, (_, i) => i + 1) as month}
-          <option value={month}>
-            {new Date(0, month - 1).toLocaleString('default', { month: 'long' })}
-          </option>
+  {:then acdbBirthdays}
+    {#await anisearchBirthdays}
+      <Message message="Loading birthday set two ..." />
+      <Skeleton grid={true} count={100} width="150px" height="170px" />
+    {:then anisearch}
+      {@const birthdays = combineBirthdaySources(acdbBirthdays, anisearch)}
+
+      <p>
+        <select bind:value={month}>
+          {#each Array.from({ length: 12 }, (_, i) => i + 1) as month}
+            <option value={month}>
+              {new Date(0, month - 1).toLocaleString('default', { month: 'long' })}
+            </option>
+          {/each}
+        </select>
+
+        <select bind:value={day}>
+          {#each Array.from({ length: new Date(2024, month, 0).getDate() }, (_, i) => i + 1) as day}
+            <option value={day}>{day}</option>
+          {/each}
+        </select>
+      </p>
+
+      <div class="characters">
+        {#each birthdays as birthday}
+          <div class="card card-small">
+            <a
+              href={`https://anilist.co/search/characters?search=${encodeURIComponent(
+                birthday.name
+              ).replace(/%20/g, '+')}`}
+              target="_blank"
+              title={birthday.origin}
+              use:tooltip
+              data-tooltip-disable={birthday.origin === undefined}
+            >
+              {birthday.name}
+              <img src={birthday.image} alt="Character (Large)" class="character-image" />
+            </a>
+          </div>
         {/each}
-      </select>
-
-      <select bind:value={day}>
-        {#each Array.from({ length: new Date(2024, month, 0).getDate() }, (_, i) => i + 1) as day}
-          <option value={day}>{day}</option>
-        {/each}
-      </select>
-    </p>
-
-    <div class="characters">
-      {#each birthdays as birthday}
-        <div class="card card-small">
-          <a
-            href={`https://anilist.co/search/characters?search=${encodeURIComponent(
-              birthday.name
-            ).replace(/%20/g, '+')}`}
-            target="_blank"
-            title={birthday.origin}
-            use:tooltip
-            data-tooltip-disable={birthday.origin === undefined}
-          >
-            {birthday.name}
-            <img src={birthday.image} alt="Character (Large)" class="character-image" />
-          </a>
-        </div>
-      {/each}
-    </div>
+      </div>
+    {:catch}
+      <Error type="Character" card />
+    {/await}
   {:catch}
     <Error type="Character" card />
   {/await}
-{:catch}
-  <Error type="Character" card />
-{/await}
+{:else}
+  <Message message="Loading ..." />
+  <Skeleton grid={true} count={100} width="150px" height="170px" />
+{/if}
 
 <style lang="scss">
   .characters {
diff --git a/src/lib/Tools/Likes.svelte b/src/lib/Tools/Likes.svelte
index 46d1edaf..56d9f5e2 100644
--- a/src/lib/Tools/Likes.svelte
+++ b/src/lib/Tools/Likes.svelte
@@ -7,16 +7,16 @@
   import settings from '$stores/settings';
   import InputTemplate from './InputTemplate.svelte';
 
-  let submission = '';
-
-  $: normalisedSubmission = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$2');
-  $: submissionType = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$1');
-  $: likesPromise =
+  let submission = $state('');
+  let normalisedSubmission = $derived(submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$2'));
+  let submissionType = $derived(submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$1'));
+  let likesPromise = $derived(
     submissionType === 'activity'
       ? activityLikes(Number(normalisedSubmission))
       : submissionType === 'thread'
         ? threadLikes(Number(normalisedSubmission))
-        : Promise.resolve(null);
+        : Promise.resolve(null)
+  );
 </script>
 
 <InputTemplate
diff --git a/src/lib/Tools/Tracker/Tool.svelte b/src/lib/Tools/Tracker/Tool.svelte
index a3705fbe..116e2918 100644
--- a/src/lib/Tools/Tracker/Tool.svelte
+++ b/src/lib/Tools/Tracker/Tool.svelte
@@ -5,14 +5,13 @@
   import { onMount } from 'svelte';
   import Message from '$lib/Loading/Message.svelte';
 
-  let url = '';
-  let title = '';
-  let progress = 0;
-  let error = '';
-  let masterList: TrackerEntry[] | null = null;
-  let confirmDelete = 0;
-
-  $: listAccess = masterList || [];
+  let url = $state('');
+  let title = $state('');
+  let progress = $state(0);
+  let error = $state('');
+  let masterList: TrackerEntry[] | null = $state(null);
+  let confirmDelete = $state(0);
+  let listAccess = $derived<TrackerEntry[]>(masterList || []);
 
   onMount(async () => {
     masterList = await database.entries.toArray();
diff --git a/src/lib/Tools/UmaMusumeBirthdays.svelte b/src/lib/Tools/UmaMusumeBirthdays.svelte
index 29b1faa6..915777a6 100644
--- a/src/lib/Tools/UmaMusumeBirthdays.svelte
+++ b/src/lib/Tools/UmaMusumeBirthdays.svelte
@@ -23,23 +23,25 @@
 
   const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
   let date = new Date();
-  let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1);
-  let day = parseOrDefault(urlParameters, 'day', date.getDate());
-  let umapyoi: Promise<Birthday[]>;
+  let month = $state(parseOrDefault(urlParameters, 'month', date.getMonth() + 1));
+  let day = $state(parseOrDefault(urlParameters, 'day', date.getDate()));
+  let umapyoi: Promise<Birthday[]> | undefined = $state(undefined);
 
-  $: {
-    month = Math.min(month, 12);
-    month = Math.max(month, 1);
-    day = Math.min(day, new Date(new Date().getFullYear(), month, 0).getDate());
-    day = Math.max(day, 1);
+  $effect(() => {
+    const clampedMonth = Math.max(1, Math.min(month, 12));
+    const maxDay = new Date(new Date().getFullYear(), clampedMonth, 0).getDate();
+    const clampedDay = Math.max(1, Math.min(day, maxDay));
+
+    if (clampedMonth !== month) month = clampedMonth;
+    if (clampedDay !== day) day = clampedDay;
 
     if (browser) {
-      $page.url.searchParams.set('month', month.toString());
-      $page.url.searchParams.set('day', day.toString());
+      $page.url.searchParams.set('month', clampedMonth.toString());
+      $page.url.searchParams.set('day', clampedDay.toString());
       clearAllParameters(['month', 'day']);
       history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
     }
-  }
+  });
 
   onMount(() => {
     clearAllParameters(['month', 'day']);
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index f822d521..8cef378a 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -3,17 +3,19 @@
   import { closest } from '$lib/Error/path';
   import Popup from '$lib/Layout/Popup.svelte';
 
-  $: suggestion = closest($page.url.pathname.replace('/', ''), [
-    'birthdays',
-    'completed',
-    'schedule',
-    'hololive',
-    'settings',
-    'tools',
-    'updates',
-    'user',
-    'wrapped'
-  ]);
+  let suggestion = $derived(
+    closest($page.url.pathname.replace('/', ''), [
+      'birthdays',
+      'completed',
+      'schedule',
+      'hololive',
+      'settings',
+      'tools',
+      'updates',
+      'user',
+      'wrapped'
+    ])
+  );
 </script>
 
 <Popup>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 08305788..5c08ec50 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -40,17 +40,25 @@
   injectSpeedInsights();
   injectAnalytics({ mode: dev ? 'development' : 'production' });
 
-  export let data;
+  import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
 
-  let isHeaderVisible = true;
-  let previousScrollPosition = 0;
+  interface Props {
+    data: { url: string; commit?: string; user?: AniListAuthorisation };
+    children: import('svelte').Snippet;
+  }
+
+  let { data, children }: Props = $props();
+  let isHeaderVisible = $state(true);
+  let previousScrollPosition = $state(0);
   let notificationInterval: NodeJS.Timeout | undefined = undefined;
 
   addMessages('en', english as unknown as LocaleDictionary);
   addMessages('ja', japanese as unknown as LocaleDictionary);
   init({ fallbackLocale: 'en', initialLocale: $settings.displayLanguage });
 
-  $: i18nLocale.set($settings.displayLanguage);
+  $effect.pre(() => {
+    i18nLocale.set($settings.displayLanguage);
+  });
 
   const navigationOrder = ['/', '/completed', '/schedule', '/updates', '/tools', '/settings'];
   const previousPage: Readable<string | null> = readable(null, (set) => {
@@ -61,13 +69,15 @@
     return () => unsubscribe();
   });
 
-  $: way = data.url.includes('/user')
-    ? 200
-    : $previousPage && $previousPage.includes('/user')
-      ? -200
-      : navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
-        ? 200
-        : -200;
+  let way = $derived(
+    data.url.includes('/user')
+      ? 200
+      : $previousPage && $previousPage.includes('/user')
+        ? -200
+        : navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
+          ? 200
+          : -200
+  );
 
   const handleScroll = () => {
     const currentScrollPosition = window.scrollY;
@@ -121,7 +131,7 @@
 
     await userDatabase.users.where('id').below(0).delete();
 
-    if (!(await userDatabase.users.get($userIdentity.id)) && $userIdentity.id > 0)
+    if (!(await userDatabase.users.get($userIdentity.id)) && $userIdentity.id > 0 && data.user)
       await userDatabase.users.put({
         id: $userIdentity.id,
         user: data.user,
@@ -138,7 +148,7 @@
     if (notificationInterval) clearInterval(notificationInterval);
   });
 
-  $: {
+  $effect(() => {
     if ((data.url === '/' || data.url === '/completed' || data.url === '/schedule') && !$subsPlease)
       fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`))
         .then((r) => r.json())
@@ -158,7 +168,7 @@
 
           subsPlease.set(r);
         });
-  }
+  });
 </script>
 
 <HeadTitle />
@@ -260,7 +270,7 @@
     <NotificationsProvider zIndex={5000}>
       <Root {data} {way}>
         {#if $userIdentity.id !== -1}
-          <slot />
+          {@render children()}
         {:else if data.url === '/settings'}
           <Skeleton grid={true} count={1} height="10vh" />
           <Skeleton grid={true} count={1} height="30vh" />
diff --git a/src/routes/reader/+page.svelte b/src/routes/reader/+page.svelte
index 775d3659..4cbc65aa 100644
--- a/src/routes/reader/+page.svelte
+++ b/src/routes/reader/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Notice from '$lib/Error/Notice.svelte';
   import Message from '$lib/Loading/Message.svelte';
   import MangaDexChapters from '$lib/Reader/Chapters/MangaDex.svelte';
@@ -6,9 +6,8 @@
   import { decodeResource, fetchResource, identify, Resource } from '$lib/Reader/resource';
   import InputTemplate from '$lib/Tools/InputTemplate.svelte';
 
-  let submission = '';
-
-  $: resourceIdentity = identify(submission);
+  let submission = $state('');
+  let resourceIdentity = $derived(identify(submission));
 </script>
 
 <InputTemplate field="Manga URL" bind:submission submitText="Read" preserveCase>
diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index 68eb0c07..a4508ff9 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -21,17 +21,24 @@
   import Tracker from '$lib/Tools/Tracker/Tool.svelte';
   import BirthdaysTemplate from '$lib/Tools/BirthdaysTemplate.svelte';
 
-  export let data;
+  import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
 
-  let tool = data.tool ?? 'default';
+  interface Props {
+    data: { tool?: string; user: AniListAuthorisation };
+  }
+
+  let { data }: Props = $props();
+  let tool = $derived(data.tool ?? 'default');
 
   onMount(() => {
     if (tool === 'default') goto(root('/tools'));
   });
 
-  $: suggestion = closest(tool, Object.keys(tools));
+  let suggestion = $derived(closest(tool, Object.keys(tools)));
 
-  $: if (tool == 'girls') goto(root('/girls'));
+  $effect.pre(() => {
+    if (tool === 'girls') goto(root('/girls'));
+  });
 </script>
 
 <Picker bind:tool />
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index eeeebf91..ff86beae 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -23,12 +23,11 @@
   import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
   import { graphql } from '$houdini';
 
-  export let data;
-
-  $: ({ Profile } = data);
-  $: preferences = $Profile.fetching
-    ? undefined
-    : ($Profile.data?.User?.preferences as Preferences | undefined);
+  let { data } = $props();
+  let Profile = $derived(data.Profile);
+  let preferences = $derived(
+    $Profile.fetching ? undefined : ($Profile.data?.User?.preferences as Preferences | undefined)
+  );
 
   const setCategoriesQuery = graphql(`
     mutation SetCategories($categories: [String!]!) {
@@ -102,20 +101,20 @@
     }
   `);
 
-  $: userData = data.userData;
-
-  let error = false;
-  let schedule: ParseResult | undefined = undefined;
-  let draggedCategory: string | null = null;
-  let draggedOverCategory: string | null = null;
-
-  $: displayBadges = (username: string, badges: number | string) =>
-    $locale({
-      values: {
-        badges: badges,
-        username
-      }
-    }).user.profile.badges;
+  let userData = $derived(data.userData);
+  let error = $state(false);
+  let schedule: ParseResult | undefined = $state(undefined);
+  let draggedCategory: string | null = $state(null);
+  let draggedOverCategory: string | null = $state(null);
+  let displayBadges = $derived(
+    (username: string, badges: number | string) =>
+      $locale({
+        values: {
+          badges: badges,
+          username
+        }
+      }).user.profile.badges
+  );
 
   const handleDragStart = (
     event: DragEvent & { currentTarget: EventTarget & HTMLDivElement },
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 2dc11ca3..ef399628 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -26,32 +26,35 @@
   import type { Preferences } from '../../../../graphql/user/$types';
   import localforage from 'localforage';
 
-  export let data;
-
-  $: ({ BadgeWallUser } = data);
-  $: preferences = $BadgeWallUser.fetching
-    ? undefined
-    : ($BadgeWallUser.data?.User?.preferences as Preferences | undefined);
-
-  $: if (browser && preferences && preferences.badge_wall_css) {
-    const sanitise = (css: string) =>
-      css
-        .replace(/\/\*[\s\S]*?\*\//g, '')
-        .replace(/<\/?[^>]+(>|$)/g, '')
-        .replace(
-          /(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
-          ''
-        )
-        .replace(/(behaviour|behavior|moz-binding|content):/gi, '')
-        .replace(/\s+/g, ' ')
-        .trim();
-    const style = document.createElement('style');
-
-    style.dataset.badgeWall = 'true';
-    style.innerHTML = sanitise(preferences.badge_wall_css);
-
-    document.head.appendChild(style);
-  }
+  let { data } = $props();
+  let BadgeWallUser = $derived(data.BadgeWallUser);
+  let preferences = $derived(
+    $BadgeWallUser.fetching
+      ? undefined
+      : ($BadgeWallUser.data?.User?.preferences as Preferences | undefined)
+  );
+
+  $effect.pre(() => {
+    if (browser && preferences && preferences.badge_wall_css) {
+      const sanitise = (css: string) =>
+        css
+          .replace(/\/\*[\s\S]*?\*\//g, '')
+          .replace(/<\/?[^>]+(>|$)/g, '')
+          .replace(
+            /(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
+            ''
+          )
+          .replace(/(behaviour|behavior|moz-binding|content):/gi, '')
+          .replace(/\s+/g, ' ')
+          .trim();
+      const style = document.createElement('style');
+
+      style.dataset.badgeWall = 'true';
+      style.innerHTML = sanitise(preferences.badge_wall_css);
+
+      document.head.appendChild(style);
+    }
+  });
 
   const updateBadgeQuery = graphql(`
     mutation UpdateBadge(
@@ -178,27 +181,26 @@
     image: string;
   }
 
-  let editMode = false;
-  let importMode = false;
-  let error: null | string;
-  let awcPromise: Promise<Response>;
-  let confirmDelete = 0;
-  let confirmPrune = 0;
-  let selectedBadge: IndexedBadge | undefined = undefined;
-  let loadError: string | null = null;
-  const isId = /^\d+$/.test(data.username);
-  let importImages: ImportImage[] | undefined = undefined;
-  let importLinks = false;
-  let importCategory = '';
-  let importReplies = false;
-  let badger: Partial<User> | null;
-  let migrateMode = false;
-  let hideMode = false;
+  let editMode = $state(false);
+  let importMode = $state(false);
+  let error: null | string = $state(null);
+  let awcPromise: Promise<Response> | undefined = $state(undefined);
+  let confirmDelete = $state(0);
+  let confirmPrune = $state(0);
+  let selectedBadge: IndexedBadge | undefined = $state(undefined);
+  let loadError: string | null = $state(null);
+  let isId = $derived(/^\d+$/.test(data.username));
+  let importImages: ImportImage[] | undefined = $state(undefined);
+  let importLinks = $state(false);
+  let importCategory = $state('');
+  let importReplies = $state(false);
+  let badger: Partial<User> | null = $state(null);
+  let migrateMode = $state(false);
+  let hideMode = $state(false);
   const authorised = authorisedJson.includes($identity.id);
-  let noticeDismissed = false;
-
-  $: categoryFilter = new URLSearchParams($page.url.searchParams).get('category');
-  $: loadQueryParameter = new URLSearchParams($page.url.searchParams).get('load');
+  let noticeDismissed = $state(false);
+  let categoryFilter = $derived(new URLSearchParams($page.url.searchParams).get('category'));
+  let loadQueryParameter = $derived(new URLSearchParams($page.url.searchParams).get('load'));
 
   type GroupedBadges = { [key: string]: IndexedBadge[] };
 
@@ -553,7 +555,7 @@
       !editMode}
 
     <div id="badges">
-      {#if preferences && !preferences.hide_awc_badges}
+      {#if preferences && !preferences.hide_awc_badges && awcPromise}
         <AWC {awcPromise} {categoryFilter} {isOwner} {preferences} />
       {/if}
 
-- 
cgit v1.2.3