command palett replay dialog now contains things

src/lib/components/CommandPalette/CommandPalette.svelte

@@ -7,6 +7,7 @@
 	import Commit from './Commit.svelte';
 	import Replay from './Replay.svelte';
 	import Branch from './Branch.svelte';
+	import { currentProject } from '$lib/current_project';
 
 	let dialog: ComponentType | undefined;
 
@@ -49,13 +50,19 @@
 			window,
 			{
 				c: () => {
-					dialog === Commit ? (dialog = undefined) : (dialog = Commit);
+					if ($currentProject) {
+						dialog === Commit ? (dialog = undefined) : (dialog = Commit);
+					}
 				},
 				r: () => {
-					dialog === Replay ? (dialog = undefined) : (dialog = Replay);
+					if ($currentProject) {
+						dialog === Replay ? (dialog = undefined) : (dialog = Replay);
+					}
 				},
 				b: () => {
-					dialog === Branch ? (dialog = undefined) : (dialog = Branch);
+					if ($currentProject) {
+						dialog === Branch ? (dialog = undefined) : (dialog = Branch);
+					}
 				}
 			},
 			true // disabled when an input is focused

src/lib/components/CommandPalette/Replay.svelte

@@ -1,7 +1,104 @@
 <script lang="ts">
 	import BaseDialog from './BaseDialog.svelte';
+	import { format, subDays, subWeeks, subMonths, startOfISOWeek, startOfMonth } from 'date-fns';
+	import { onDestroy, onMount } from 'svelte';
+	import tinykeys from 'tinykeys';
+	import { goto } from '$app/navigation';
+	import { createEventDispatcher } from 'svelte';
+	import { currentProject } from '$lib/current_project';
+
+	const dispatch = createEventDispatcher();
+
+	let selectionIdx = 0;
+
+	let listOptions = [
+		{
+			label: 'Earlier today',
+			href: `/projects/${$currentProject?.id}/player?date=${format(new Date(), 'yyyy-MM-dd')}`
+		},
+		{
+			label: 'Yesterday',
+			href: `/projects/${$currentProject?.id}/player?date=${format(
+				subDays(new Date(), 1),
+				'yyyy-MM-dd'
+			)}`
+		},
+		{
+			label: 'The day before yesterday',
+			href: `/projects/${$currentProject?.id}/player?date=${format(
+				subDays(new Date(), 2),
+				'yyyy-MM-dd'
+			)}`
+		},
+		{
+			label: 'The beginning of last week',
+			href: `/projects/${$currentProject?.id}/player?date=${format(
+				startOfISOWeek(subWeeks(new Date(), 1)),
+				'yyyy-MM-dd'
+			)}`
+		},
+		{
+			label: 'The beginning of last month',
+			href: `/projects/${$currentProject?.id}/player?date=${format(
+				startOfMonth(subMonths(new Date(), 1)),
+				'yyyy-MM-dd'
+			)}`
+		}
+	];
+
+	const gotoDestination = () => {
+		goto(listOptions[selectionIdx].href);
+		dispatch('close');
+	};
+
+	let unsubscribeKeyboardHandler: () => void;
+
+	onMount(() => {
+		unsubscribeKeyboardHandler = tinykeys(window, {
+			Enter: () => {
+				gotoDestination();
+			},
+			ArrowDown: () => {
+				selectionIdx = (selectionIdx + 1) % listOptions.length;
+			},
+			ArrowUp: () => {
+				selectionIdx = (selectionIdx - 1 + listOptions.length) % listOptions.length;
+			},
+			'Control+n': () => {
+				selectionIdx = (selectionIdx + 1) % listOptions.length;
+			},
+			'Control+p': () => {
+				selectionIdx = (selectionIdx - 1 + listOptions.length) % listOptions.length;
+			}
+		});
+	});
+
+	onDestroy(() => {
+		unsubscribeKeyboardHandler?.();
+	});
 </script>
 
 <BaseDialog on:close>
-	<h1>Replay Working History</h1>
+	<div class="mx-2 cursor-default select-none">
+		<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300/80">
+			Replay working history from...
+		</p>
+
+		<ul class="">
+			{#each listOptions as listItem, idx}
+				<a
+					on:mouseover={() => (selectionIdx = idx)}
+					on:focus={() => (selectionIdx = idx)}
+					on:click={gotoDestination}
+					class="{selectionIdx === idx
+						? 'bg-zinc-700/70'
+						: ''} flex cursor-default items-center rounded-lg p-2 px-2 outline-none"
+					href="/"
+				>
+					<span class="flex-grow">{listItem.label}</span>
+					<span>{idx + 1}</span>
+				</a>
+			{/each}
+		</ul>
+	</div>
 </BaseDialog>