add file filter back

src/routes/projects/[projectId]/+page.svelte

@@ -7,7 +7,6 @@
 	import { invoke } from '@tauri-apps/api';
 	import { toHumanBranchName } from '$lib/branch';
 	import { list as listDeltas } from '$lib/deltas';
-	import { goto } from '$app/navigation';
 	const getBranch = (params: { projectId: string }) => invoke<string>('git_branch', params);
 
 	export let data: LayoutData;
@@ -18,17 +17,14 @@
 
 	let latestDeltasByDateByFile: Record<number, Record<string, Delta[][]>[]> = {};
 
-	function gotoPlayer(filename: string) {
+	function playerURL(ms: string, file?: string) {
-		if ($project) {
-			goto(`/projects/${$project.id}/player?file=${encodeURIComponent(filename)}`);
-		}
-	}
-
-	function datePlayerURL(ms: string) {
 		let date = new Date(parseInt(ms));
 		let datePass = format(date, 'yyyy-MM-dd');
 
 		if ($project) {
+			if (file) {
+				return `/projects/${$project.id}/player/${datePass}?file=${encodeURIComponent(file)}`;
+			}
 			return `/projects/${$project.id}/player/${datePass}`;
 		}
 	}
@@ -190,7 +186,7 @@
 											})}
 										</div>
 										<div>
-											<a class="text-orange-200" href={datePlayerURL(dateMilliseconds)}
+											<a class="text-orange-200" href={playerURL(dateMilliseconds)}
 												>Replay Changes</a
 											>
 										</div>
@@ -201,7 +197,7 @@
 										{#each Object.entries(fileSessions) as filetime}
 											<div class="flex flex-row justify-between">
 												<div class="w-96 truncate font-mono text-zinc-300">
-													<a class="cursor-pointer" on:click={gotoPlayer(filetime[0])}>
+													<a class="cursor-pointer" href={playerURL(dateMilliseconds, filetime[0])}>
 														{shortPath(filetime[0], 3, 70)}
 													</a>
 												</div>

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

@@ -1,3 +1,3 @@
-<div id="player-page" class="flex h-full w-full">
+<div id="player-page" class="flex h-full w-full flex-col">
 	<slot />
 </div>

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

@@ -16,6 +16,8 @@
 	);
 
 	const currentDate = derived(page, (page) => page.params.date);
+
+	const fileFilter = derived(page, (page) => page.url.searchParams.get('file'));
 </script>
 
 {#if $sessions.length === 0}
@@ -24,6 +26,14 @@
 		<p class="text-gray-500">Go code something!</p>
 	</div>
 {:else}
+	{#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}
+		</a>
+	{/if}
 	<div class="flex h-full w-full flex-row gap-2 p-2">
 		<ul id="days" class="flex h-full flex-shrink-0 flex-col gap-2 overflow-y-scroll">
 			{#each $dates as date}

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

@@ -14,5 +14,7 @@
 
 	$: firstSession = dateSessions[dateSessions.length - 1];
 
-	onMount(() => goto(`/projects/${projectId}/player/${$page.params.date}/${firstSession.id}`));
+	onMount(() =>
+		goto(`/projects/${projectId}/player/${$page.params.date}/${firstSession.id}${$page.url.search}`)
+	);
 </script>

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

@@ -23,9 +23,13 @@
 		if (sessionEl) {
 			sessionEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
 		}
+		const changedLines = document.getElementsByClassName('line-changed');
+		if (changedLines.length > 0) {
+			changedLines[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
 	};
 
-	currentDeltaIndex.subscribe(scrollToSession);
+	currentSessionId.subscribe(scrollToSession);
 
 	page.subscribe((page) => {
 		currentDeltaIndex.set(parseInt(page.url.searchParams.get('delta') || '0'));
@@ -128,6 +132,11 @@
 		}
 	};
 
+	const removeFromSearchParams = (params: URLSearchParams, key: string) => {
+		params.delete(key);
+		return params;
+	};
+
 	const decrementPlayerValue = () => {
 		if ($inputValue > 0) {
 			$inputValue -= 1;
@@ -173,7 +182,10 @@
 					class="session-card rounded border-[0.5px] border-gb-700 text-zinc-300 shadow-md"
 				>
 					<a
-						href="/projects/{projectId}/player/{$currentDate}/{session.id}?delta=0"
+						href="/projects/{projectId}/player/{$currentDate}/{session.id}?{removeFromSearchParams(
+							$page.url.searchParams,
+							'delta'
+						).toString()}"
 						disabled={isCurrent}
 						class="w-full"
 					>

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

@@ -23,7 +23,7 @@ const enrichSession = async (projectId: string, session: Session) => {
     };
 };
 
-export const load: PageLoad = async ({ params, parent }) => {
+export const load: PageLoad = async ({ params, parent, url }) => {
     const { sessions } = await parent();
     return {
         sessions: asyncDerived(sessions, async (sessions) =>
@@ -31,9 +31,22 @@ export const load: PageLoad = async ({ params, parent }) => {
                 sessions
                     .filter((session) => format(session.meta.startTimestampMs, 'yyyy-MM-dd') === params.date)
                     .map((session) => enrichSession(params.projectId, session))
-            ).then((sessions) =>
+            ).then((sessions) => {
-                sessions.sort((a, b) => a.meta.startTimestampMs - b.meta.startTimestampMs)
+                sessions = sessions.sort((a, b) => a.meta.startTimestampMs - b.meta.startTimestampMs);
-            )
+                const fileFilter = url.searchParams.get('file');
+                if (fileFilter) {
+                    sessions = sessions
+                        .filter((session) => session.files[fileFilter])
+                        .map((session) => ({
+                            ...session,
+                            deltas: session.deltas.filter(([path]) => path === fileFilter),
+                            files: {
+                                [fileFilter]: session.files[fileFilter]
+                            }
+                        }));
+                }
+                return sessions;
+            })
         )
     };
 };

src/routes/projects/[projectId]/settings/+page.svelte

@@ -56,7 +56,6 @@
 		const name = formData.get('name') as string | undefined;
 		const description = formData.get('description') as string | undefined;
 
-		console.log({ name, description });
 		try {
 			if (name) {
 				const updated = await api.projects.update($user.access_token, $project?.api.repository_id, {