show bookmark note in the player

src/lib/api/ipc/bookmarks.ts

@@ -5,6 +5,8 @@ export type Bookmark = {
 	timestampMs: number;
 	note: string;
 	deleted: boolean;
+	updatedTimestampMs: number;
+	createdTimestampMs: number;
 };
 
 export const upsert = (params: {

src/lib/stores/bookmarks.ts

@@ -1,15 +1,15 @@
-import { writable, type Loadable } from 'svelte-loadable-store';
+import { writable, type Loadable, derived } from 'svelte-loadable-store';
 import { bookmarks, type Bookmark } from '$lib/api';
-import { get, type Readable } from '@square/svelte-store';
+import { get as getValue, type Readable } from '@square/svelte-store';
 
 const stores: Record<string, Readable<Loadable<Bookmark[]>>> = {};
 
-export default (params: { projectId: string }) => {
+export const list = (params: { projectId: string }) => {
 	if (params.projectId in stores) return stores[params.projectId];
 
 	const store = writable(bookmarks.list(params), (set) =>
 		bookmarks.subscribe(params, (bookmark) => {
-			const oldValue = get(store);
+			const oldValue = getValue(store);
 			if (oldValue.isLoading) {
 				bookmarks.list(params).then(set);
 			} else {
@@ -20,3 +20,8 @@ export default (params: { projectId: string }) => {
 	stores[params.projectId] = store;
 	return store as Readable<Loadable<Bookmark[]>>;
 };
+
+export const get = (params: { projectId: string; timestampMs: number }) =>
+	derived(list({ projectId: params.projectId }), (bookmarks) =>
+		bookmarks.find((b) => b.timestampMs === params.timestampMs)
+	);

src/lib/stores/index.ts

@@ -1,5 +1,5 @@
 export { default as user } from './user';
-export { default as bookmarks } from './bookmarks';
+export * as bookmarks from './bookmarks';
 export { default as deltas } from './deltas';
 export { default as sessions } from './sessions';
 export { default as files } from './files';

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

@@ -11,7 +11,7 @@
 	export let currentFilepath: string;
 	export let deltas: Record<string, Delta[]>;
 
-	$: bookmarks = derived(stores.bookmarks({ projectId: session.projectId }), (bookmarks) => {
+	$: bookmarks = derived(stores.bookmarks.list({ projectId: session.projectId }), (bookmarks) => {
 		if (bookmarks.isLoading) return [];
 		const timestamps = Object.values(deltas ?? {}).flatMap((deltas) =>
 			deltas.map((d) => d.timestampMs)

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

@@ -32,6 +32,7 @@
 	import { unsubscribe } from '$lib/utils';
 	import { hotkeys, stores } from '$lib';
 	import Filename from './Filename.svelte';
+	import Bookmark from './Bookmark.svelte';
 
 	export let data: PageData;
 	const { currentFilepath, currentTimestamp } = data;
@@ -48,7 +49,7 @@
 	const fileFilter = derived(page, (page) => page.url.searchParams.get('file'));
 	const projectId = derived(page, (page) => page.params.projectId);
 
-	$: bookmarks = stores.bookmarks({ projectId: $projectId });
+	$: bookmarks = stores.bookmarks.list({ projectId: $projectId });
 
 	const richSessions = asyncDerived(
 		[dateSessions, fileFilter, projectId],
@@ -231,15 +232,7 @@
 		</div>
 
 		{#if currentDelta}
-			<div
-				id="info"
-				class="w-content absolute bottom-[86px] ml-2 flex max-w-full gap-2 rounded-full bg-zinc-900/80 py-2 px-4 shadow"
-				style="
-				border: 0.5px solid rgba(63, 63, 70, 0.5);
-				-webkit-backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
-				background-color: rgba(1, 1, 1, 0.6);
-			"
-			>
+			<div id="filename" class="floating absolute bottom-[86px]">
 				<Filename
 					filename={$frame.filepath}
 					timestampMs={currentDelta.timestampMs}
@@ -247,6 +240,10 @@
 					projectId={$projectId}
 				/>
 			</div>
+
+			<div id="bookmark" class="absolute bottom-[86px] right-[9px]">
+				<Bookmark projectId={$projectId} timestampMs={currentDelta.timestampMs} />
+			</div>
 		{/if}
 
 		<div

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { events, stores } from '$lib';
+	import { format } from 'date-fns';
+
+	export let projectId: string;
+	export let timestampMs: number;
+
+	$: bookmark = stores.bookmarks.get({ projectId, timestampMs });
+</script>
+
+{#if !$bookmark.isLoading && $bookmark.value && $bookmark.value.note.length && !$bookmark.value.deleted}
+	<button
+		class="flex max-h-[109px] max-w-[357px] cursor-pointer flex-col gap-1 rounded-xl bg-zinc-900/80 py-3 px-4 shadow"
+		style="border: 0.5px solid rgba(63, 63, 70, 0.5);
+            -webkit-backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
+            background-color: rgba(1, 1, 1, 0.6);
+        "
+		on:click={() => events.emit('openBookmarkModal')}
+	>
+		<main class="text-text-subdued">
+			{$bookmark.value.note}
+		</main>
+		<footer class="text-right text-sm text-text-subdued">
+			{format(new Date($bookmark.value.updatedTimestampMs), 'E d MMM  yyyy')}
+		</footer>
+	</button>
+{/if}

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

@@ -15,7 +15,13 @@
 		: bookmarks.value.find((bookmark) => bookmark.timestampMs === timestampMs);
 </script>
 
-<div class="flex flex-auto items-center gap-3 overflow-auto">
+<div
+	class="ml-2 flex flex max-w-full flex-auto items-center gap-3 gap-2 overflow-auto rounded-full bg-zinc-900/80 py-2 px-4 shadow"
+	style="border: 0.5px solid rgba(63, 63, 70, 0.5);
+    -webkit-backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
+    background-color: rgba(1, 1, 1, 0.6);
+"
+>
 	<span class="font-mono text-[12px] text-zinc-300">
 		{collapse(filename)}
 	</span>