From 06595433958c52cd93c8fba0af2449367fd3ad80 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 4 Mar 2026 01:10:25 +1300
Subject: [PATCH] Remove legacy svelte 4 code

---
 .../src/lib/components/player/Player.svelte   | 10 +++++----
 .../lib/components/settings/DeArrow.svelte    | 16 ++++++++++----
 .../src/lib/components/settings/RYD.svelte    |  9 ++++----
 .../components/settings/SponsorBlock.svelte   |  9 ++++----
 materialious/src/routes/(app)/+layout.svelte  | 21 ++++++++++---------
 .../src/routes/(app)/playlists/+page.svelte   |  9 +++++---
 .../(no-layout)/tv/[slug]/+layout.svelte      |  9 ++++----
 7 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/materialious/src/lib/components/player/Player.svelte b/materialious/src/lib/components/player/Player.svelte
index b41070c2..5fc458ab 100644
--- a/materialious/src/lib/components/player/Player.svelte
+++ b/materialious/src/lib/components/player/Player.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { getBestThumbnail } from '$lib/images';
 	import { videoLength } from '$lib/numbers';
 	import { generateChapterWebVTT, type ParsedDescription } from '$lib/description';
@@ -198,7 +198,7 @@
 		});
 	}
 
-	function loadTimeFromUrl(page: Page): boolean {
+	function loadTimeFromUrl(): boolean {
 		if (player) {
 			const timeGivenUrl = page.url.searchParams.get('time');
 			if (timeGivenUrl && !isNaN(parseFloat(timeGivenUrl))) {
@@ -211,7 +211,9 @@
 		return false;
 	}
 
-	page.subscribe((pageUpdate) => loadTimeFromUrl(pageUpdate));
+	$effect(() => {
+		loadTimeFromUrl();
+	});
 
 	function toggleFullscreen() {
 		if (document.fullscreenElement) {
@@ -724,7 +726,7 @@
 	});
 
 	async function getPlaybackHistory(): Promise<number> {
-		if (loadTimeFromUrl($page) || !$playerSavePlaybackPositionStore) return 0;
+		if (loadTimeFromUrl() || !$playerSavePlaybackPositionStore) return 0;
 
 		let toSetTime = 0;
 
diff --git a/materialious/src/lib/components/settings/DeArrow.svelte b/materialious/src/lib/components/settings/DeArrow.svelte
index 0a06fe51..7f39ac4c 100644
--- a/materialious/src/lib/components/settings/DeArrow.svelte
+++ b/materialious/src/lib/components/settings/DeArrow.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { preventDefault } from 'svelte/legacy';
-
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
 	import { ensureNoTrailingSlash } from '../../misc';
@@ -15,7 +13,12 @@
 	let deArrowThumbnailUrl = $state(get(deArrowThumbnailInstanceStore));
 </script>
 
-<form onsubmit={preventDefault(() => deArrowInstanceStore.set(ensureNoTrailingSlash(deArrowUrl)))}>
+<form
+	onsubmit={(event: Event) => {
+		event.preventDefault();
+		deArrowInstanceStore.set(ensureNoTrailingSlash(deArrowUrl));
+	}}
+>
 	<nav>
 		<div class="field prefix label surface-container-highest max">
 			<i>link</i>
@@ -28,7 +31,12 @@
 	</nav>
 </form>
 
-<form onsubmit={preventDefault(() => deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl))}>
+<form
+	onsubmit={(event: Event) => {
+		event.preventDefault();
+		deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl);
+	}}
+>
 	<nav>
 		<div class="field prefix label surface-container-highest max">
 			<i>link</i>
diff --git a/materialious/src/lib/components/settings/RYD.svelte b/materialious/src/lib/components/settings/RYD.svelte
index d7984e89..5a866075 100644
--- a/materialious/src/lib/components/settings/RYD.svelte
+++ b/materialious/src/lib/components/settings/RYD.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { preventDefault } from 'svelte/legacy';
-
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
 	import { ensureNoTrailingSlash } from '../../misc';
@@ -10,9 +8,10 @@
 </script>
 
 <form
-	onsubmit={preventDefault(() =>
-		returnYTDislikesInstanceStore.set(ensureNoTrailingSlash(returnYTInstance))
-	)}
+	onsubmit={(event: Event) => {
+		event.preventDefault();
+		returnYTDislikesInstanceStore.set(ensureNoTrailingSlash(returnYTInstance));
+	}}
 >
 	<nav>
 		<div class="field prefix label surface-container-highest max">
diff --git a/materialious/src/lib/components/settings/SponsorBlock.svelte b/materialious/src/lib/components/settings/SponsorBlock.svelte
index a33d0f34..f5c0fe8f 100644
--- a/materialious/src/lib/components/settings/SponsorBlock.svelte
+++ b/materialious/src/lib/components/settings/SponsorBlock.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { preventDefault } from 'svelte/legacy';
-
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
 	import { ensureNoTrailingSlash } from '../../misc';
@@ -43,9 +41,10 @@
 </script>
 
 <form
-	onsubmit={preventDefault(() =>
-		sponsorBlockUrlStore.set(ensureNoTrailingSlash(sponsorBlockInstance))
-	)}
+	onsubmit={(event: Event) => {
+		event.preventDefault();
+		sponsorBlockUrlStore.set(ensureNoTrailingSlash(sponsorBlockInstance));
+	}}
 >
 	<nav>
 		<div class="field prefix label surface-container-highest max">
diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index 7782412d..eb88309f 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -2,7 +2,7 @@
 	import { resolve } from '$app/paths';
 	import { goto } from '$app/navigation';
 
-	import { navigating, page } from '$app/stores';
+	import { navigating, page } from '$app/state';
 	import { getFeed, notificationsMarkAsRead } from '$lib/api/index';
 	import type { Notification } from '$lib/api/model';
 	import Logo from '$lib/components/Logo.svelte';
@@ -41,7 +41,7 @@
 
 	let mobileSearchShow = $state(false);
 	let notifications: Notification[] = $state([]);
-	let playerIsPip: boolean = $state(false);
+	let playerIsPip = $state(false);
 	let showWatchParty = $state(false);
 
 	let pages = $state(getPages());
@@ -55,8 +55,8 @@
 		pages = getPages();
 	});
 
-	page.subscribe((pageData) => {
-		playerIsPip = !pageData.url.pathname.includes('/watch');
+	$effect(() => {
+		playerIsPip = !page.url.pathname.includes('/watch');
 		requestAnimationFrame(() => resetScroll());
 	});
 
@@ -170,13 +170,13 @@
 			</a>
 		</header>
 		{#if $isAndroidTvStore}
-			<a href={resolve('/search', {})} class:active={$page.url.href.endsWith('/search')}>
+			<a href={resolve('/search', {})} class:active={page.url.href.endsWith('/search')}>
 				<i>search</i>
 				<div>{$_('searchPlaceholder')}</div>
 			</a>
 		{/if}
 		{#each pages as navPage (navPage)}
-			<a href={resolve(navPage.href, {})} class:active={$page.url.href.endsWith(navPage.href)}
+			<a href={resolve(navPage.href, {})} class:active={page.url.href.endsWith(navPage.href)}
 				><i>{navPage.icon}</i>
 				<div>{navPage.name}</div>
 			</a>
@@ -296,7 +296,7 @@
 			<a
 				class="round"
 				href={resolve(navPage.href, {})}
-				class:active={$page.url.href.endsWith(navPage.href)}
+				class:active={page.url.href.endsWith(navPage.href)}
 				data-sveltekit-preload-data="off"
 				><i>{navPage.icon}</i>
 				<span style="font-size: .8em;">{navPage.name}</span>
@@ -379,11 +379,12 @@
 			</div>
 		{/if}
 
-		{#if $navigating}
+		{#await navigating.complete}
 			<PageLoading />
-		{:else}
+			<!-- eslint-disable-next-line  @typescript-eslint/no-unused-vars -->
+		{:then _}
 			{@render children?.()}
-		{/if}
+		{/await}
 
 		<Toast />
 	</main>
diff --git a/materialious/src/routes/(app)/playlists/+page.svelte b/materialious/src/routes/(app)/playlists/+page.svelte
index 8a5e411f..cc02f99a 100644
--- a/materialious/src/routes/(app)/playlists/+page.svelte
+++ b/materialious/src/routes/(app)/playlists/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { preventDefault } from 'svelte/legacy';
-
 	import { deletePersonalPlaylist, getPersonalPlaylists, postPersonalPlaylist } from '$lib/api';
 	import ContentColumn from '$lib/components/layout/ContentColumn.svelte';
 	import PlaylistThumbnail from '$lib/components/thumbnail/PlaylistThumbnail.svelte';
@@ -71,7 +69,12 @@
 </div>
 
 <dialog id="create-playlist">
-	<form onsubmit={preventDefault(createPlaylist)}>
+	<form
+		onsubmit={async (event: Event) => {
+			event.preventDefault();
+			await createPlaylist();
+		}}
+	>
 		<div class="field label border">
 			<input bind:value={playlistTitle} required name="title" type="text" />
 			<label for="title">{$_('title')}</label>
diff --git a/materialious/src/routes/(no-layout)/tv/[slug]/+layout.svelte b/materialious/src/routes/(no-layout)/tv/[slug]/+layout.svelte
index b78a5686..6289ebd2 100644
--- a/materialious/src/routes/(no-layout)/tv/[slug]/+layout.svelte
+++ b/materialious/src/routes/(no-layout)/tv/[slug]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { navigating } from '$app/stores';
+	import { navigating } from '$app/state';
 	import PageLoading from '$lib/components/PageLoading.svelte';
 
 	let { children } = $props();
@@ -14,8 +14,9 @@
 	</style>
 </svelte:head>
 
-{#if $navigating}
+{#await navigating.completed}
 	<PageLoading />
-{:else}
+	<!-- eslint-disable-next-line  @typescript-eslint/no-unused-vars -->
+{:then _}
 	{@render children?.()}
-{/if}
+{/await}