minor stores fix

package.json

@@ -84,9 +84,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": {
-		"svelte-loadable-store": "^1.0.0"
+		"xterm-addon-webgl": "^0.14.0",
+		"svelte-loadable-store": "^1.0.1"
 	}
 }

pnpm-lock.yaml

@@ -1,10 +1,5 @@
 lockfileVersion: '6.0'
 
-dependencies:
-  svelte-loadable-store:
-    specifier: ^1.0.0
-    version: 1.0.0
-
 devDependencies:
   '@codemirror/autocomplete':
     specifier: ^6.4.2
@@ -171,6 +166,9 @@ devDependencies:
   svelte-french-toast:
     specifier: ^1.0.3
     version: 1.0.3(svelte@3.55.1)
+  svelte-loadable-store:
+    specifier: ^1.0.1
+    version: 1.0.1
   svelte-resize-observer:
     specifier: ^2.0.0
     version: 2.0.0
@@ -3654,11 +3652,11 @@ packages:
       svelte: 3.55.1
     dev: true
 
-  /svelte-loadable-store@1.0.0:
-    resolution: {integrity: sha512-HtCaU1k+tyjf0uDrMlNXzyXdOBZdsQJ1oJ+UDrEQJDbcmEr9W/FkvIIagDbAnriylgI8GUiQtFibI5UyR3rbDg==}
+  /svelte-loadable-store@1.0.1:
+    resolution: {integrity: sha512-ZPRBNqaDF6PW4nruHWh73b9WWdmt5SMAZ6he9KsZo4XDvl1h4jECBKPVdnHCc4zEQMCig01BofH3bwu67G44SQ==}
     dependencies:
       svelte: 3.59.1
-    dev: false
+    dev: true
 
   /svelte-preprocess@5.0.1(postcss-load-config@4.0.1)(postcss@8.4.21)(svelte@3.55.1)(typescript@4.9.5):
     resolution: {integrity: sha512-0HXyhCoc9rsW4zGOgtInylC6qj259E1hpFnJMJWTf+aIfeqh4O/QHT31KT2hvPEqQfdjmqBR/kO2JDkkciBLrQ==}
@@ -3732,7 +3730,7 @@ packages:
   /svelte@3.59.1:
     resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==}
     engines: {node: '>= 8'}
-    dev: false
+    dev: true
 
   /symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}

src/routes/projects/[projectId]/player/[date]/BookmarkModal.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { log, stores, toasts, api } from '$lib';
+	import { log, toasts, api } from '$lib';
 	import { Button, Modal } from '$lib/components';
 	import { IconBookmarkFilled } from '$lib/icons';
 
 	export let projectId: string;
 
-	const bookmarks = stores.bookmarks({ projectId });
-
 	let isCreating = false;
 	let timestampMs: number | undefined;
 

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

@@ -24,7 +24,6 @@
 	import Slider from './Slider.svelte';
 	import type { PageData } from './$types';
 	import { IconPlayerPauseFilled, IconPlayerPlayFilled } from '$lib/icons';
-	import { collapse } from '$lib/paths';
 	import { page } from '$app/stores';
 	import { DeltasViewer, DiffContext } from '$lib/components';
 	import { asyncDerived, derived, writable } from '@square/svelte-store';
@@ -49,6 +48,8 @@
 	const fileFilter = derived(page, (page) => page.url.searchParams.get('file'));
 	const projectId = derived(page, (page) => page.params.projectId);
 
+	$: bookmarks = stores.bookmarks({ projectId: $projectId });
+
 	const richSessions = asyncDerived(
 		[dateSessions, fileFilter, projectId],
 		async ([sessions, fileFilter, projectId]) => {
@@ -242,6 +243,7 @@
 				<Filename
 					filename={$frame.filepath}
 					timestampMs={currentDelta.timestampMs}
+					bookmarks={$bookmarks}
 					projectId={$projectId}
 				/>
 			</div>

src/routes/projects/[projectId]/player/[date]/[sessionId]/Filename.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
-	import { api, stores } from '$lib';
+	import { api } from '$lib';
 	import type { Bookmark } from '$lib/api';
 	import { IconBookmark, IconBookmarkFilled } from '$lib/icons';
 	import { collapse } from '$lib/paths';
-	import { writable } from '@square/svelte-store';
+	import type { Loadable } from 'svelte-loadable-store';
 
 	export let projectId: string;
 	export let filename: string;
+	export let bookmarks: Loadable<Bookmark[]>;
 	export let timestampMs: number;
 
-	// TODO: this is stupid, find out why derived stores don't work
-	$: bookmarks = stores.bookmarks({ projectId });
-	const bookmark = writable<Bookmark | undefined>(undefined);
-	$: bookmarks?.subscribe((bookmarks) => {
-		if (bookmarks.isLoading) return;
-		bookmark.set(bookmarks.value.find((bookmark) => bookmark.timestampMs === timestampMs));
-	});
+	$: bookmark = bookmarks.isLoading
+		? undefined
+		: bookmarks.value.find((bookmark) => bookmark.timestampMs === timestampMs);
 </script>
 
 <div class="flex flex-auto items-center gap-3 overflow-auto">
@@ -26,10 +23,10 @@
 	<button
 		on:click={() =>
 			api.bookmarks.upsert(
-				$bookmark
+				bookmark
 					? {
-							...$bookmark,
-							deleted: !$bookmark.deleted
+							...bookmark,
+							deleted: !bookmark.deleted
 					  }
 					: {
 							projectId,
@@ -39,9 +36,9 @@
 					  }
 			)}
 	>
-		{#if $bookmark && $bookmark.deleted}
+		{#if bookmark?.deleted}
 			<IconBookmark class="h-4 w-4 text-zinc-700" />
-		{:else if !$bookmark}
+		{:else if !bookmark}
 			<IconBookmark class="h-4 w-4 text-zinc-700" />
 		{:else}
 			<IconBookmarkFilled class="h-4 w-4 text-bookmark-selected" />