do not show dates without changes

src/lib/deltas.ts

@@ -23,32 +23,8 @@ export type DeltasEvent = {
 	filePath: string;
 };
 
-const cache: Record<string, Record<string, Promise<Record<string, Delta[]>>>> = {};
+export const list = async (params: { projectId: string; sessionId: string; paths?: string[] }) =>
-
+	invoke<Record<string, Delta[]>>('list_deltas', params);
-export const list = async (params: { projectId: string; sessionId: string; paths?: string[] }) => {
-	const sessionCache = cache[params.projectId] || {};
-	if (params.sessionId in sessionCache) {
-		return sessionCache[params.sessionId].then((deltas) =>
-			Object.fromEntries(
-				Object.entries(deltas).filter(([path]) =>
-					params.paths ? params.paths.includes(path) : true
-				)
-			)
-		);
-	}
-
-	const promise = invoke<Record<string, Delta[]>>('list_deltas', {
-		projectId: params.projectId,
-		sessionId: params.sessionId
-	});
-	sessionCache[params.sessionId] = promise;
-	cache[params.projectId] = sessionCache;
-	return promise.then((deltas) =>
-		Object.fromEntries(
-			Object.entries(deltas).filter(([path]) => (params.paths ? params.paths.includes(path) : true))
-		)
-	);
-};
 
 export const subscribe = (
 	params: { projectId: string; sessionId: string },

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

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { list as listDeltas } from '$lib/deltas';
+	import { asyncDerived } from '@square/svelte-store';
 	import { format } from 'date-fns';
 	import { derived } from 'svelte/store';
 	import type { LayoutData } from './$types';
@@ -7,63 +9,76 @@
 	export let data: LayoutData;
 	const { sessions, projectId } = data;
 
-	const dates = derived(sessions, (sessions) =>
+	const fileFilter = derived(page, (page) => page.url.searchParams.get('file'));
-		sessions
+
+	const dates = asyncDerived([sessions, fileFilter], async ([sessions, fileFilter]) => {
+		const sessionFiles = await Promise.all(
+			sessions.map((session) =>
+				listDeltas({
+					projectId,
+					sessionId: session.id,
+					paths: fileFilter ? [fileFilter] : undefined
+				})
+			)
+		);
+		return sessions
+			.filter((_, index) => Object.keys(sessionFiles[index]).length > 0)
 			.map((session) => session.meta.startTimestampMs)
 			.sort((a, b) => b - a)
 			.map((ts) => format(new Date(ts), 'yyyy-MM-dd'))
-			.filter((date, index, self) => self.indexOf(date) === index)
+			.filter((date, index, self) => self.indexOf(date) === index);
-	);
+	});
 
 	const currentDate = derived(page, (page) => page.params.date);
 
 	const today = format(new Date(), 'yyyy-MM-dd');
-
-	const fileFilter = derived(page, (page) => page.url.searchParams.get('file'));
 </script>
 
-{#if $sessions.length === 0}
+{#await dates.load() then}
-	<div class="text-center">
+	{#if $sessions.length === 0}
-		<h2 class="text-xl">I haven't seen any changes yet</h2>
+		<div class="text-center">
-		<p class="text-gray-500">Go code something!</p>
+			<h2 class="text-xl">I haven't seen any changes yet</h2>
-	</div>
+			<p class="text-gray-500">Go code something!</p>
-{:else}
+		</div>
-	{#if $fileFilter}
+	{:else}
-		<a
+		{#if $fileFilter}
-			href="/projects/{$page.params.projectId}/player/{$page.params.date}/{$page.params.sessionId}"
+			<a
-			class="w-full p-2 text-left font-mono text-lg"
+				href="/projects/{$page.params.projectId}/player/{$page.params.date}/{$page.params
-		>
+					.sessionId}"
-			{$fileFilter}
+				class="w-full p-2 text-left font-mono text-lg"
-		</a>
+			>
+				{$fileFilter}
+			</a>
+		{/if}
+
+		<div class="flex h-full w-full flex-row gap-2 px-2">
+			<ul
+				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}
+					{@const isToday = format(new Date(date), 'yyyy-MM-dd') === today}
+					<li>
+						<a
+							href="/projects/{projectId}/player/{date}{$page.url.search}"
+							class:bg-gb-800={date === $currentDate}
+							class:text-white={date === $currentDate}
+							class:border-gb-700={date !== $currentDate}
+							class:bg-gb-900={date !== $currentDate}
+							class="max-h-content flex w-full flex-col items-center justify-around rounded border border-[0.5px] p-2 text-zinc-300 shadow transition duration-150 ease-out hover:bg-gb-800 hover:ease-in"
+						>
+							{#if isToday}
+								<div class="py-2 text-lg leading-5">Today</div>
+							{:else}
+								<div class="text-xl leading-5">{new Date(date).getDate()}</div>
+								<div class="leading-4">{format(new Date(date), 'MMM')}</div>
+							{/if}
+						</a>
+					</li>
+				{/each}
+			</ul>
+
+			<slot />
+		</div>
 	{/if}
-
+{/await}
-	<div class="flex h-full w-full flex-row gap-2 px-2">
-		<ul
-			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}
-				{@const isToday = format(new Date(date), 'yyyy-MM-dd') === today}
-				<li>
-					<a
-						href="/projects/{projectId}/player/{date}{$page.url.search}"
-						class:bg-gb-800={date === $currentDate}
-						class:text-white={date === $currentDate}
-						class:border-gb-700={date !== $currentDate}
-						class:bg-gb-900={date !== $currentDate}
-						class="max-h-content flex w-full flex-col items-center justify-around rounded border border-[0.5px] p-2 text-zinc-300 shadow transition duration-150 ease-out hover:bg-gb-800 hover:ease-in"
-					>
-						{#if isToday}
-							<div class="py-2 text-lg leading-5">Today</div>
-						{:else}
-							<div class="text-xl leading-5">{new Date(date).getDate()}</div>
-							<div class="leading-4">{format(new Date(date), 'MMM')}</div>
-						{/if}
-					</a>
-				</li>
-			{/each}
-		</ul>
-
-		<slot />
-	</div>
-{/if}