stop using old stores in the player

package.json

@@ -73,7 +73,7 @@
 		"svelte-check": "^3.0.1",
 		"svelte-floating-ui": "^1.5.2",
 		"svelte-french-toast": "^1.0.3",
-		"svelte-loadable-store": "^1.1.2",
+		"svelte-loadable-store": "^1.2.3",
 		"svelte-outclick": "^3.5.0",
 		"svelte-resize-observer": "^2.0.0",
 		"tailwindcss": "^3.1.5",
@@ -88,9 +88,7 @@
 		"xterm-addon-fit": "^0.7.0",
 		"xterm-addon-ligatures": "^0.6.0",
 		"xterm-addon-unicode11": "^0.5.0",
-		"xterm-addon-webgl": "^0.14.0"
-	},
-	"dependencies": {
+		"xterm-addon-webgl": "^0.14.0",
 		"mm-jsr": "^3.0.2"
 	}
 }

pnpm-lock.yaml

@@ -1,10 +1,5 @@
 lockfileVersion: '6.0'
 
-dependencies:
-  mm-jsr:
-    specifier: ^3.0.2
-    version: 3.0.2
-
 devDependencies:
   '@codemirror/autocomplete':
     specifier: ^6.4.2
@@ -141,6 +136,9 @@ devDependencies:
   marked:
     specifier: ^5.0.2
     version: 5.0.2
+  mm-jsr:
+    specifier: ^3.0.2
+    version: 3.0.2
   nanoevents:
     specifier: ^7.0.1
     version: 7.0.1
@@ -178,8 +176,8 @@ devDependencies:
     specifier: ^1.0.3
     version: 1.0.3(svelte@3.55.1)
   svelte-loadable-store:
-    specifier: ^1.1.2
-    version: 1.1.2(svelte@3.55.1)
+    specifier: ^1.2.3
+    version: 1.2.3(svelte@3.55.1)
   svelte-outclick:
     specifier: ^3.5.0
     version: 3.5.0(svelte@3.55.1)
@@ -2924,7 +2922,7 @@ packages:
 
   /mm-jsr@3.0.2:
     resolution: {integrity: sha512-ATbSVKgOU9i54eBLPV+QETFKhGODnCDKsi18TLsET7BCJnX00LjcbOZYvw6ODplJpRY7JCrA861mYfViCDnh3w==}
-    dev: false
+    dev: true
 
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
@@ -3724,8 +3722,8 @@ packages:
       svelte: 3.55.1
     dev: true
 
-  /svelte-loadable-store@1.1.2(svelte@3.55.1):
-    resolution: {integrity: sha512-cQvXnSqjq+UA8Sv7BqRsgarLaYsdrQ9CVKt+YyXGWGDbjgJr2vxErRIV0hA+42tbIFGg9+DEM4WPVc+KjXMTCw==}
+  /svelte-loadable-store@1.2.3(svelte@3.55.1):
+    resolution: {integrity: sha512-efoCRCGLxzU+RE1D09cpnKKBO2CVXAzjUY0/RatOtPXSNPbb0/HeGcV/baH5davabwiDm7iWf2rqI9ogIRQ1Pw==}
     peerDependencies:
       svelte: ^3.0.0
     dependencies:

src/routes/projects/[projectId]/player/+layout.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { deltas } from '$lib/api';
-	import { asyncDerived, derived } from '@square/svelte-store';
+	import { stores, api } from '$lib';
 	import { format } from 'date-fns';
-	import type { LayoutData } from './$types';
+	import { derived, Value } from 'svelte-loadable-store';
 
-	export let data: LayoutData;
-	const { sessions } = data;
+	const sessions = stores.sessions({ projectId: $page.params.projectId });
 
-	const fileFilter = derived(page, (page) => page.url.searchParams.get('file'));
+	$: fileFilter = $page.url.searchParams.get('file');
 
-	const dates = asyncDerived([sessions, fileFilter], async ([sessions, fileFilter]) => {
+	const dates = derived(sessions, async (sessions) => {
 		const sessionDeltas = await Promise.all(
 			sessions.map((session) =>
-				deltas.list({
+				api.deltas.list({
 					projectId: $page.params.projectId,
 					sessionId: session.id,
 					paths: fileFilter ? [fileFilter] : undefined
@@ -28,26 +26,26 @@
 			.filter((date, index, self) => self.indexOf(date) === index);
 	});
 
-	const currentDate = derived(page, (page) => page.params.date);
+	$: currentDate = $page.params.date;
 
 	const today = format(new Date(), 'yyyy-MM-dd');
 </script>
 
 <div id="player-page" class="flex h-full w-full flex-col">
-	{#await dates.load() then}
-		{#if $dates.length === 0}
+	{#if !$dates.isLoading && Value.isValue($dates.value)}
+		{#if $dates.value.length === 0}
 			<div class="text-center">
 				<h2 class="text-2xl">I haven't seen any changes yet</h2>
 				<p class="text-gray-500">Go code something!</p>
 			</div>
 		{:else}
-			{#if $fileFilter}
+			{#if fileFilter}
 				<a
 					href="/projects/{$page.params.projectId}/player/{$page.params.date}/{$page.params
 						.sessionId}"
 					class="w-full p-2 text-left font-mono text-lg"
 				>
-					{$fileFilter}
+					{fileFilter}
 				</a>
 			{/if}
 
@@ -56,15 +54,15 @@
 					id="days"
 					class="scrollbar-hidden grid h-full flex-shrink-0 auto-rows-min gap-2 overflow-y-scroll py-2"
 				>
-					{#each $dates as date}
+					{#each $dates.value as date}
 						{@const isToday = format(new Date(date), 'yyyy-MM-dd') === today}
 						<li class="date-card ">
 							<a
 								href="/projects/{$page.params.projectId}/player/{date}{$page.url.search}"
-								class:bg-card-active={date === $currentDate}
-								class:text-white={date === $currentDate}
-								class:border-zinc-700={date !== $currentDate}
-								class:bg-card-default={date !== $currentDate}
+								class:bg-card-active={date === currentDate}
+								class:text-white={date === currentDate}
+								class:border-zinc-700={date !== currentDate}
+								class:bg-card-default={date !== currentDate}
 								class="card max-h-content flex w-full flex-col items-center justify-around p-2 text-zinc-300 shadow transition duration-150 ease-out hover:bg-card-active hover:ease-in"
 							>
 								{#if isToday}
@@ -81,5 +79,5 @@
 				<slot />
 			</div>
 		{/if}
-	{/await}
+	{/if}
 </div>

src/routes/projects/[projectId]/player/+page.ts

@@ -2,15 +2,15 @@ import { error, redirect } from '@sveltejs/kit';
 import { format, compareDesc } from 'date-fns';
 import type { PageLoad } from './$types';
 import { wrapLoadWithSentry } from '@sentry/sveltekit';
+import { stores } from '$lib';
+import { promisify } from 'svelte-loadable-store';
 
-export const load: PageLoad = wrapLoadWithSentry(async ({ parent, url, params }) => {
-	const { sessions } = await parent();
-	const latestDate = await sessions.load().then((sessions) =>
-		sessions
-			.map((session) => session.meta.startTimestampMs)
-			.sort(compareDesc)
-			.shift()
-	);
+export const load: PageLoad = wrapLoadWithSentry(async ({ url, params }) => {
+	const sessions = await promisify(stores.sessions({ projectId: params.projectId }));
+	const latestDate = sessions
+		.map((session) => session.meta.startTimestampMs)
+		.sort(compareDesc)
+		.shift();
 	if (!latestDate) throw error(404, 'No sessions found');
 	throw redirect(
 		302,

src/routes/projects/[projectId]/player/[date]/+page.ts

@@ -2,16 +2,14 @@ import { redirect, error } from '@sveltejs/kit';
 import { format } from 'date-fns';
 import type { PageLoad } from './$types';
 import { wrapLoadWithSentry } from '@sentry/sveltekit';
+import { stores } from '$lib';
+import { promisify } from 'svelte-loadable-store';
 
-export const load: PageLoad = wrapLoadWithSentry(async ({ parent, params, url }) => {
-	const { sessions } = await parent();
-	const dateSessions = await sessions
-		.load()
-		.then((sessions) =>
-			sessions.filter(
-				(session) => format(session.meta.startTimestampMs, 'yyyy-MM-dd') === params.date
-			)
-		);
+export const load: PageLoad = wrapLoadWithSentry(async ({ params, url }) => {
+	const sessions = await promisify(stores.sessions({ projectId: params.projectId }));
+	const dateSessions = sessions.filter(
+		(session) => format(session.meta.startTimestampMs, 'yyyy-MM-dd') === params.date
+	);
 	if (!dateSessions.length) throw error(404, 'No sessions found');
 	const firstSession = dateSessions[dateSessions.length - 1];
 	throw redirect(