From e10706b63510b217be9834317d2f6c07dff3190d Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Tue, 28 Mar 2023 15:51:35 +0200
Subject: [PATCH 01/13] do not overflow player below the control

---
 .../player/[date]/[sessionId]/+page.svelte            | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/routes/projects/[projectId]/player/[date]/[sessionId]/+page.svelte b/src/routes/projects/[projectId]/player/[date]/[sessionId]/+page.svelte
index 800879bc1..413cca52b 100644
--- a/src/routes/projects/[projectId]/player/[date]/[sessionId]/+page.svelte
+++ b/src/routes/projects/[projectId]/player/[date]/[sessionId]/+page.svelte
@@ -271,7 +271,7 @@
 
 <div
 	id="player"
-	class="relative my-2 flex flex-auto overflow-auto rounded border border-zinc-700 bg-gb-900"
+	class="relative my-2 flex flex-auto flex-col overflow-auto rounded border border-zinc-700 bg-gb-900"
 >
 	{#if $frame}
 		<div id="code" class="h-full w-full flex-auto overflow-auto px-2 pb-[120px]">
@@ -298,14 +298,7 @@
 
 		<div
 			id="controls"
-			class="absolute bottom-0 flex w-full flex-col border-t border-zinc-700 bg-[#2E2E32]/75 p-2 pt-4"
-			style="
-                    border-width: 0.5px; 
-                    -webkit-backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
-                    backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
-                    background-color: rgba(24, 24, 27, 0.60);
-                    border: 0.5px solid rgba(63, 63, 70, 0.50);
-                "
+			class="flex w-full flex-col border-t border-zinc-700 bg-[#2E2E32]/75 p-2 pt-4"
 		>
 			<div class="flex h-0 w-full justify-between">
 				{#each $richSessions as session}

From 6633d9d20edf44d3b8e8daa117850be1c64b4a9e Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Tue, 28 Mar 2023 15:52:35 +0200
Subject: [PATCH 02/13] rm global webkit hack

---
 src/app.postcss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index 0013c1e82..2e73c9a0a 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -3,12 +3,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* this is trick to make webkit use hardware acceleration */
-*:not(html) {
-	-webkit-transform: translate3d(0, 0, 0);
-	-webkit-perspective: 1000;
-}
-
 /* SCROLL BAR STYLING */
 
 /* width */

From 7a6787ff5ae9ce0727d2bb684c63071da8253659 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 28 Mar 2023 13:59:26 +0000
Subject: [PATCH 03/13] Bump openssl from 0.10.45 to 0.10.48 in /src-tauri

Bumps [openssl](https://github.com/sfackler/rust-openssl) from 0.10.45 to 0.10.48.
- [Release notes](https://github.com/sfackler/rust-openssl/releases)
- [Commits](https://github.com/sfackler/rust-openssl/compare/openssl-v0.10.45...openssl-v0.10.48)

---
updated-dependencies:
- dependency-name: openssl
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src-tauri/Cargo.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 974b17285..56fdd34a8 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2432,9 +2432,9 @@ dependencies = [
 
 [[package]]
 name = "openssl"
-version = "0.10.45"
+version = "0.10.48"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b102428fd03bc5edf97f62620f7298614c45cedf287c271e7ed450bbaf83f2e1"
+checksum = "518915b97df115dd36109bfa429a48b8f737bd05508cf9588977b599648926d2"
 dependencies = [
  "bitflags",
  "cfg-if",
@@ -2473,9 +2473,9 @@ dependencies = [
 
 [[package]]
 name = "openssl-sys"
-version = "0.9.80"
+version = "0.9.83"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "23bbbf7854cd45b83958ebe919f0e8e516793727652e27fda10a8384cfc790b7"
+checksum = "666416d899cf077260dac8698d60a60b435a46d57e82acb1be3d0dad87284e5b"
 dependencies = [
  "autocfg",
  "cc",

From 74ddc05509fa734d8309729ee599eb5eedd3800c Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 14:24:38 +0200
Subject: [PATCH 04/13] wip

---
 src/lib/components/ButtonGroup.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/lib/components/ButtonGroup.svelte

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
new file mode 100644
index 000000000..dc1076208
--- /dev/null
+++ b/src/lib/components/ButtonGroup.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    export let leftLabel: string;
+    export let leftAction: function;
+    export let wide = false;
+</script>
+{#if $$slots.middle}
+	<div>
+		<slot name="left" />
+		<slot name="middle" />
+		<slot name="right" />
+	</div>
+{:else}
+	<div>
+		<slot name="left" />
+		<slot name="right" />
+	</div>
+{/if}

From cb3432292dabb7652b60e4bcb4bdbc00ed3cb394 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 15:35:18 +0200
Subject: [PATCH 05/13] button component can be wide

---
 src/lib/components/Button.svelte |  7 ++++++-
 src/stories/Button.stories.ts    | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index bf0096aed..fda94af51 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -2,6 +2,7 @@
 	export let primary = false;
 	export let filled = true;
 	export let small = false;
+	export let wide = false;
 	export let label: string;
 </script>
 
@@ -34,7 +35,8 @@ And the following optional props:
 		: filled
 		? 'default-filled'
 		: 'default-nofill'}
-    {small ? 'size-small' : 'size-normal'}
+    {small ? 'short' : ''}
+	{wide ? 'wide' : ''}
         "
 	type="button"
 	on:click
@@ -98,4 +100,7 @@ And the following optional props:
 	.size-small {
 		@apply px-2 py-1;
 	}
+	.wide {
+		width: 119.5px;
+	}
 </style>
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index 41fb49446..afabfc784 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -40,6 +40,24 @@ export const PrimarySmall: Story = {
 	}
 };
 
+export const PrimaryWide: Story = {
+	args: {
+		primary: true,
+		wide: true,
+		label: 'Button'
+	}
+};
+
+export const PrimarySmallWide: Story = {
+	args: {
+		primary: true,
+		wide: true,
+		small: true,
+		label: 'Button'
+	}
+};
+
+
 export const PrimaryFilledSmall: Story = {
 	args: {
 		primary: true,

From 089db67ec86120ef726614b2fe429fd1d5c77966 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 16:01:34 +0200
Subject: [PATCH 06/13] button group component

---
 src/lib/components/ButtonGroup.svelte | 41 ++++++++++++++++------
 src/lib/components/index.ts           |  1 +
 src/stories/ButtonGroup.stories.ts    | 50 +++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 src/stories/ButtonGroup.stories.ts

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index dc1076208..ab57ae9eb 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -1,17 +1,36 @@
 <script lang="ts">
-    export let leftLabel: string;
-    export let leftAction: function;
-    export let wide = false;
+	import Button from '$lib/components/Button.svelte';
+
+	export let leftLabel: string;
+	export let leftAction: () => void;
+	export let rightLabel: string;
+	export let rightAction: () => void;
+	export let middleLabel: string | undefined;
+	export let middleAction: () => void | undefined;
+	export let wide = false;
 </script>
-{#if $$slots.middle}
-	<div>
-		<slot name="left" />
-		<slot name="middle" />
-		<slot name="right" />
+
+{#if !middleLabel}
+	<div class="flex gap-3">
+		<Button label={leftLabel} on:click={leftAction} {wide} />
+		<Button label={rightLabel} on:click={rightAction} primary={true} filled={true} {wide} />
 	</div>
 {:else}
-	<div>
-		<slot name="left" />
-		<slot name="right" />
+	<div class="flex">
+		<button class="joined-base border-l border-t border-b rounded-l-lg" on:click={leftAction}>
+			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span>
+		</button>
+		<button class="joined-base border" on:click={middleAction}>
+			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span>
+		</button>
+		<button class="joined-base border-r border-t border-b rounded-r-lg" on:click={rightAction}>
+			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{rightLabel}</span>
+		</button>
 	</div>
 {/if}
+
+<style>
+	.joined-base {
+		@apply flex items-center justify-center border-[#71717a] text-base text-white;
+	}
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index ad5d06a08..15821aede 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -5,3 +5,4 @@ export { default as CodeViewer } from './CodeViewer';
 export { default as CommandPalette } from './CommandPalette';
 export { default as Modal } from './Modal.svelte';
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
diff --git a/src/stories/ButtonGroup.stories.ts b/src/stories/ButtonGroup.stories.ts
new file mode 100644
index 000000000..96e2930a6
--- /dev/null
+++ b/src/stories/ButtonGroup.stories.ts
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import ButtonGroup from '$lib/components/ButtonGroup.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+const meta: Meta<ButtonGroup> = {
+	title: 'GitButler/ButtonGroup',
+	component: ButtonGroup,
+	tags: ['autodocs'],
+	argTypes: {
+        leftLabel: { control: 'text' },
+        rightLabel: { control: 'text' },
+        middleLabel: { control: 'text' },
+	}
+};
+
+export default meta;
+type Story = StoryObj<ButtonGroup>;
+
+export const TwoButtons: Story = {
+	args: {
+        leftLabel: 'Cancel',
+        rightLabel: 'Submit',
+	}
+};
+
+export const TwoButtonsWide: Story = {
+	args: {
+        leftLabel: 'Cancel',
+        rightLabel: 'Submit',
+        wide: true,
+	}
+};
+
+export const ThreeButtons: Story = {
+	args: {
+        leftLabel: 'Left',
+        middleLabel: 'Middle',
+        rightLabel: 'Right',
+	}
+};
+
+export const ThreeButtonsWide: Story = {
+	args: {
+        leftLabel: 'Left',
+        middleLabel: 'Middle',
+        rightLabel: 'Right',
+        wide: true,
+	}
+};

From 1b1459ee55fe3b33639b763b97db0e3c0bdc68eb Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 16:18:04 +0200
Subject: [PATCH 07/13] fix some merge issues

---
 src/lib/components/Button.svelte | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index fda94af51..36a7602d2 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -35,8 +35,8 @@ And the following optional props:
 		: filled
 		? 'default-filled'
 		: 'default-nofill'}
-    {small ? 'short' : ''}
-	{wide ? 'wide' : ''}
+    {small ? 'height-small' : 'height-normal'}
+	{wide ? 'width-normal' : 'width-small'}
         "
 	type="button"
 	on:click
@@ -94,13 +94,16 @@ And the following optional props:
 	}
 
 	/* Size */
-	.size-normal {
-		@apply px-4 py-2;
+	.height-normal {
+		@apply py-2;
 	}
-	.size-small {
-		@apply px-2 py-1;
+	.height-small {
+		@apply py-1;
 	}
-	.wide {
-		width: 119.5px;
+	.width-normal {
+		@apply px-[42.75px];
+	}
+	.width-small {
+		@apply px-[16px];
 	}
 </style>

From 1738936a668a9b3a51e554206b8350402f3088a4 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 16:18:35 +0200
Subject: [PATCH 08/13] update storybook for button since now filled is true by
 default

---
 src/stories/Button.stories.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index afabfc784..bf123d3d6 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -22,6 +22,7 @@ type Story = StoryObj<Button>;
 export const Primary: Story = {
 	args: {
 		primary: true,
+		filled: false,
 		label: 'Button'
 	}
 };
@@ -35,6 +36,7 @@ export const PrimaryFilled: Story = {
 export const PrimarySmall: Story = {
 	args: {
 		primary: true,
+		filled: false,
 		small: true,
 		label: 'Button'
 	}
@@ -43,6 +45,7 @@ export const PrimarySmall: Story = {
 export const PrimaryWide: Story = {
 	args: {
 		primary: true,
+		filled: false,
 		wide: true,
 		label: 'Button'
 	}
@@ -51,6 +54,7 @@ export const PrimaryWide: Story = {
 export const PrimarySmallWide: Story = {
 	args: {
 		primary: true,
+		filled: false,
 		wide: true,
 		small: true,
 		label: 'Button'
@@ -70,6 +74,7 @@ export const PrimaryFilledSmall: Story = {
 export const Default: Story = {
 	args: {
 		primary: false,
+		filled: false,
 		label: 'Button'
 	}
 };
@@ -85,6 +90,7 @@ export const DefaultFilled: Story = {
 export const DefaultSmall: Story = {
 	args: {
 		primary: false,
+		filled: false,
 		small: true,
 		label: 'Button'
 	}

From f0e440a58d3d2bdf2fd4565e6da7dfa3ac2b3987 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 16:19:45 +0200
Subject: [PATCH 09/13] update button group since now filled is true by default

---
 src/lib/components/ButtonGroup.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index ab57ae9eb..b72ca47e0 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -12,7 +12,7 @@
 
 {#if !middleLabel}
 	<div class="flex gap-3">
-		<Button label={leftLabel} on:click={leftAction} {wide} />
+		<Button label={leftLabel} on:click={leftAction} filled={false} {wide} />
 		<Button label={rightLabel} on:click={rightAction} primary={true} filled={true} {wide} />
 	</div>
 {:else}

From d70acdeb22edeee1e5e4ddbae7a47d17b2d9cc66 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 16:20:07 +0200
Subject: [PATCH 10/13] format

---
 src/lib/components/ButtonGroup.svelte |  4 ++--
 src/stories/Button.stories.ts         |  1 -
 src/stories/ButtonGroup.stories.ts    | 30 +++++++++++++--------------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index b72ca47e0..aabedc005 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -17,13 +17,13 @@
 	</div>
 {:else}
 	<div class="flex">
-		<button class="joined-base border-l border-t border-b rounded-l-lg" on:click={leftAction}>
+		<button class="joined-base rounded-l-lg border-l border-t border-b" on:click={leftAction}>
 			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span>
 		</button>
 		<button class="joined-base border" on:click={middleAction}>
 			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span>
 		</button>
-		<button class="joined-base border-r border-t border-b rounded-r-lg" on:click={rightAction}>
+		<button class="joined-base rounded-r-lg border-r border-t border-b" on:click={rightAction}>
 			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{rightLabel}</span>
 		</button>
 	</div>
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index bf123d3d6..afbb41e9b 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -61,7 +61,6 @@ export const PrimarySmallWide: Story = {
 	}
 };
 
-
 export const PrimaryFilledSmall: Story = {
 	args: {
 		primary: true,
diff --git a/src/stories/ButtonGroup.stories.ts b/src/stories/ButtonGroup.stories.ts
index 96e2930a6..cb1c67729 100644
--- a/src/stories/ButtonGroup.stories.ts
+++ b/src/stories/ButtonGroup.stories.ts
@@ -8,9 +8,9 @@ const meta: Meta<ButtonGroup> = {
 	component: ButtonGroup,
 	tags: ['autodocs'],
 	argTypes: {
-        leftLabel: { control: 'text' },
-        rightLabel: { control: 'text' },
-        middleLabel: { control: 'text' },
+		leftLabel: { control: 'text' },
+		rightLabel: { control: 'text' },
+		middleLabel: { control: 'text' }
 	}
 };
 
@@ -19,32 +19,32 @@ type Story = StoryObj<ButtonGroup>;
 
 export const TwoButtons: Story = {
 	args: {
-        leftLabel: 'Cancel',
-        rightLabel: 'Submit',
+		leftLabel: 'Cancel',
+		rightLabel: 'Submit'
 	}
 };
 
 export const TwoButtonsWide: Story = {
 	args: {
-        leftLabel: 'Cancel',
-        rightLabel: 'Submit',
-        wide: true,
+		leftLabel: 'Cancel',
+		rightLabel: 'Submit',
+		wide: true
 	}
 };
 
 export const ThreeButtons: Story = {
 	args: {
-        leftLabel: 'Left',
-        middleLabel: 'Middle',
-        rightLabel: 'Right',
+		leftLabel: 'Left',
+		middleLabel: 'Middle',
+		rightLabel: 'Right'
 	}
 };
 
 export const ThreeButtonsWide: Story = {
 	args: {
-        leftLabel: 'Left',
-        middleLabel: 'Middle',
-        rightLabel: 'Right',
-        wide: true,
+		leftLabel: 'Left',
+		middleLabel: 'Middle',
+		rightLabel: 'Right',
+		wide: true
 	}
 };

From 6b147d4d257b6f3e76f2ae2ae652b3bd3d5b4a11 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 16:30:26 +0200
Subject: [PATCH 11/13] forgot this

---
 src/stories/Button.stories.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index afbb41e9b..935235263 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -11,6 +11,7 @@ const meta: Meta<Button> = {
 		primary: { control: 'boolean' },
 		filled: { control: 'boolean' },
 		small: { control: 'boolean' },
+		wide: { control: 'boolean' },
 		label: { control: 'text' }
 	}
 };

From 20c03d6e96d9bf20f0490440048925f633f35197 Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Tue, 28 Mar 2023 16:02:10 +0200
Subject: [PATCH 12/13] warm up the cache on mount

---
 src/lib/sessions.ts       |  2 +-
 src/routes/+layout.svelte | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/lib/sessions.ts b/src/lib/sessions.ts
index 26b37ef9f..147cc3021 100644
--- a/src/lib/sessions.ts
+++ b/src/lib/sessions.ts
@@ -62,7 +62,7 @@ export const listFiles = async (params: {
 
 const sessionsCache: Record<string, Promise<Session[]>> = {};
 
-const list = async (params: { projectId: string; earliestTimestampMs?: number }) => {
+export const list = async (params: { projectId: string; earliestTimestampMs?: number }) => {
 	if (params.projectId in sessionsCache) {
 		return sessionsCache[params.projectId].then((sessions) =>
 			sessions.filter((s) =>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ddaf41cd7..1d13d0fe3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,10 +4,11 @@
 	import { Toaster } from 'svelte-french-toast';
 	import type { LayoutData } from './$types';
 	import { BackForwardButtons } from '$lib/components';
-	import { setContext } from 'svelte';
+	import { onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 	import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
 	import CommandPalette from '$lib/components/CommandPalette';
+	import { list as listSessions, listFiles } from '$lib/sessions';
 
 	export let data: LayoutData;
 	const { user, posthog, projects } = data;
@@ -16,6 +17,16 @@
 	setContext('session', writable(null));
 	setContext('projects', projects);
 
+	onMount(() =>
+		// warm up the cache
+		$projects.forEach(async (project) => {
+			const sessions = await listSessions({ projectId: project.id });
+			sessions.forEach(async (session) => {
+				listFiles({ projectId: project.id, sessionId: session.id });
+			});
+		})
+	);
+
 	user.subscribe(posthog.identify);
 </script>
 

From b3e4ec151e21ece0b83a740f3a6865ee08ec555f Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Tue, 28 Mar 2023 16:22:04 +0200
Subject: [PATCH 13/13] do not show dates without changes

---
 src/lib/deltas.ts                             |  28 +----
 .../[projectId]/player/[date]/+layout.svelte  | 115 ++++++++++--------
 2 files changed, 67 insertions(+), 76 deletions(-)

diff --git a/src/lib/deltas.ts b/src/lib/deltas.ts
index 7d3a904e2..25baa2197 100644
--- a/src/lib/deltas.ts
+++ b/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[] }) => {
-	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 list = async (params: { projectId: string; sessionId: string; paths?: string[] }) =>
+	invoke<Record<string, Delta[]>>('list_deltas', params);
 
 export const subscribe = (
 	params: { projectId: string; sessionId: string },
diff --git a/src/routes/projects/[projectId]/player/[date]/+layout.svelte b/src/routes/projects/[projectId]/player/[date]/+layout.svelte
index b2ae867bb..d2a2c12b2 100644
--- a/src/routes/projects/[projectId]/player/[date]/+layout.svelte
+++ b/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) =>
-		sessions
+	const fileFilter = derived(page, (page) => page.url.searchParams.get('file'));
+
+	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}
-	<div class="text-center">
-		<h2 class="text-xl">I haven't seen any changes yet</h2>
-		<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>
+{#await dates.load() then}
+	{#if $sessions.length === 0}
+		<div class="text-center">
+			<h2 class="text-xl">I haven't seen any changes yet</h2>
+			<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 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}
-
-	<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}