feat: make cancel buttons go back one level

src/lib/components/Timeline.svelte

@@ -1,35 +1,16 @@
 <script lang="ts">
-	import type { ActionData } from '$lib/types';
+	import type { AutoActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let {
-		actions = $bindable(),
-		displaying = $bindable()
-	}: { actions: ActionData[]; displaying: boolean } = $props();
-	// let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5));
+	let { actions = $bindable() }: { actions: AutoActionData[] } = $props();
+	// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
 </script>
 
-<h1 class="text-text_red">Timeline</h1>
-<div
-	class="flex flex-col items-center bg-btn_grey text-text_white p-1 rounded-t-lg transition-transform gap-2 fixed h-[50svh] inset-x-0 bottom-0
-{displaying ? '' : 'translate-y-full'}"
-	id="timeline"
->
-	<button
-		class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray fixed bottom-0"
-		onclick={() => {
-			displaying = false;
+{#each actions as _, i}
+	<Action
+		bind:action={actions[i]}
+		deleteself={() => {
+			actions.splice(actions.indexOf(actions[i]), 1);
 		}}
-	>
-		Hide Timeline
-	</button>
-
-	{#each actions as _, i}
-		<Action
-			bind:action={actions[i]}
-			deleteself={() => {
-				actions.splice(actions.indexOf(actions[i]), 1);
-			}}
-		/>
-	{/each}
-</div>
+	/>
+{/each}

src/routes/scout/+page.svelte

@@ -27,15 +27,24 @@
 	});
 </script>
 
-<div class="text-zinc-50 p-2 h-svh">
-	<h1 class="text-center font-bold pb-2 h-5">Team {team_key}</h1>
+<div class="grid grid-row-10 text-zinc-50 p-2 h-svh place-items-center">
+	<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
 	{#if timelineExtended}
-		<Timeline bind:actions={latestActions} bind:displaying={timelineExtended} />
+		<div class="row-span-8">
+			<Timeline bind:actions={latestActions} />
+		</div>
+		<button
+			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
+			onclick={() => (timelineExtended = false)}>Hide Timeline</button
+		>
 	{:else}
-		<ActionInputs bind:actions />
+		<div class="row-span-8">
+			<ActionInputs bind:actions />
+		</div>
+
 		<button
-			class="bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
-			onclick={() => (timelineExtended = !timelineExtended)}>Show Timeline</button
+			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
+			onclick={() => (timelineExtended = true)}>Show Timeline</button
 		>
 	{/if}
 </div>

src/routes/scout/ActionInputs.svelte

@@ -32,15 +32,15 @@
 	const is_score_state = $derived(actionState === 'Score');
 </script>
 
-<div class="grid gap-2 grid-cols-1 grid-rows-2 flex-grow">
-	<p>Number of pieces currently held: {held_pieces}</p>
+<h1>Number of pieces currently held: {held_pieces}</h1>
+<div class="grid gap-2 grid-cols-1 grid-rows-2 place-items-center">
 	{#if is_none_state}
-		<div class="grid gap-2 grid-cols-2 flex-grow">
+		<div class="grid gap-2 grid-cols-2">
 			<button class="bg-zinc-500 p-2 rounded" onclick={intake_piece}>Intake</button>
 			<button class="bg-zinc-500 p-2 rounded" onclick={score_piece}>Score</button>
 		</div>
 	{:else if is_intake_state}
-		<div class="grid gap-2 grid-cols-2 grid-rows-2 flex-grow">
+		<div class="grid gap-3 grid-cols-2 grid-rows-2 flex-grow">
 			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBunny')}
 				>Intake Bunny</button
 			>
@@ -53,9 +53,13 @@
 			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeCoral')}
 				>Intake Ballon From Coral</button
 			>
+			<button
+				class="bg-zinc-500 col-span-2 p-2 rounded"
+				onclick={() => (actionState = 'None')}>Cancel</button
+			>
 		</div>
 	{:else if is_score_state}
-		<div class="grid gap-2 grid-cols-2 grid-rows-3 flex-grow">
+		<div class="grid gap-2 grid-cols-2 grid-rows-4">
 			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'ScoreBunnyLow')}
 				>Score Bunny in Low Zone</button
 			>
@@ -81,8 +85,15 @@
 				onclick={() => (actionState = 'ScoreOtherHeldTote')}
 				>Score Bunny in Tote Held by Other Robot</button
 			>
+			<button
+				class="bg-zinc-500 col-span-2 p-2 rounded"
+				onclick={() => (actionState = 'None')}>Cancel</button
+			>
 		</div>
 	{:else}
-		<SuccessFail {complete} cancel={() => (actionState = 'None')} />
+		<SuccessFail
+			{complete}
+			cancel={() => (actionState = actionState.substring(0, 1) === 'S' ? 'Score' : 'Intake')}
+		/>
 	{/if}
 </div>