fix tracking

src/routes/(app)/manga/[MangaID]/(manga)/InfoSide.svelte

@@ -20,7 +20,7 @@
 		type OperationResultStore,
 		type Pausable
 	} from '@urql/svelte';
-	import { type ResultOf } from '$lib/gql/graphql';
+	import type { ResultOf } from '$lib/gql/graphql';
 	import {
 		deleteDownloadedChapters,
 		dequeueChapterDownloads,
@@ -286,7 +286,7 @@
 								modalStore.trigger({
 									type: 'component',
 									backdropClasses: '!p-0',
-									component: { ref: TrackingModal, props: { manga } }
+									component: { ref: TrackingModal, props: { manga: manga2 } }
 								});
 							}}
 							class="variant-soft btn flex h-12 items-center px-2 sm:px-5"

src/routes/(app)/manga/[MangaID]/(manga)/TrackingModal.svelte

@@ -28,7 +28,7 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 
 	interface Props {
-		manga: OperationResultStore<ResultOf<typeof getManga>> & Pausable;
+		manga: OperationResultStore<ResultOf<typeof getManga>>;
 	}
 
 	let { manga }: Props = $props();
@@ -42,18 +42,24 @@
 		| (OperationResultStore<ResultOf<typeof searchTracker>> & Pausable)
 		| undefined = $state();
 
-	const Trackers = queryStore({
+	const Trackers2 = queryStore({
 		client,
 		query: trackers,
 		variables: { isLoggedIn: true },
 		requestPolicy: 'network-only'
 	});
 
-	$manga.data?.manga?.trackRecords.nodes.forEach((e) => {
-		mutationStore({
-			client,
-			query: fetchTrack,
-			variables: { recordId: e.id }
+	let Trackers = $derived.by(() => {
+		return $state.snapshot($Trackers2);
+	});
+
+	$effect(() => {
+		$manga.data?.manga?.trackRecords.nodes.forEach((e) => {
+			mutationStore({
+				client,
+				query: fetchTrack,
+				variables: { recordId: e.id }
+			});
 		});
 	});
 
@@ -125,13 +131,13 @@
 		<h1 class="h3 py-4 pl-4">Tracking</h1>
 		<div class="border-t border-surface-700">
 			<div class="grid grid-cols-1 gap-1">
-				{#if $Trackers.fetching}
+				{#if Trackers.fetching}
 					Loading...
-				{:else if $Trackers.error}
+				{:else if Trackers.error}
 					<div class="white-space-pre-wrap">
-						{JSON.stringify($Trackers.error, null, 4)}
+						{JSON.stringify(Trackers.error, null, 4)}
 					</div>
-				{:else if $Trackers.data?.trackers.nodes.length}
+				{:else if Trackers.data?.trackers.nodes.length}
 					<div class="px-4 pt-1">
 						<input
 							type="text"
@@ -144,7 +150,7 @@
 						<Tab bind:group={tabSet} name="Tracking" value="Tracking">
 							Tracking
 						</Tab>
-						{#each $Trackers.data.trackers.nodes as tracke}
+						{#each Trackers.data.trackers.nodes as tracke (tracke.id)}
 							{@const tracker = tracke}
 							<Tab bind:group={tabSet} name={tracker.name} value={tracker.id}>
 								{tracker.name}
@@ -154,9 +160,9 @@
 						<svelte:fragment slot="panel">
 							{#if tabSet === 'Tracking'}
 								{@const Records = $manga.data?.manga?.trackRecords.nodes ?? []}
-								{@const tracks = $Trackers.data?.trackers.nodes}
+								{@const tracks = Trackers.data?.trackers.nodes}
 								<div class="flex h-72 flex-col space-y-1 overflow-auto p-1">
-									{#each Records as RecordItem}
+									{#each Records as RecordItem (RecordItem.id)}
 										{@const track = tracks.find(
 											(e) => e.id === RecordItem.trackerId
 										)}

src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/chapterDrawer.svelte

@@ -80,8 +80,9 @@
 		});
 		const _ = [mangaMeta, $manga];
 		const tmp = untrack(() => {
-			return $manga.data?.manga.chapters.nodes
-				.filter(filterChapters(mangaMeta, true))
+			return $state
+				.snapshot($manga)
+				.data?.manga.chapters.nodes.filter(filterChapters(mangaMeta, true))
 				.sort((a, b) => {
 					return b.sourceOrder - a.sourceOrder;
 				});

versionToServerVersionMapping.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"tag": "v1.1.0",
-		"uiVersion": "r1153",
+		"uiVersion": "r1162",
 		"serverVersion": "r1502",
 		"comment": "the server version is between 1.0.0 and 1.1.0 release",
 		"comment2": "because its the preview version that implemented the breaking changes"