feat: timeline popup above contents

package.json

@@ -30,5 +30,8 @@
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.14.0",
 		"vite": "^5.4.11"
+	},
+	"dependencies": {
+		"@svelte-put/clickoutside": "^4.0.0"
 	}
 }

src/lib/components/Timeline.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
+	import { clickoutside } from '@svelte-put/clickoutside';
 	import type { AutoActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let { actions = $bindable() }: { actions: AutoActionData[] } = $props();
+	let {
+		actions = $bindable(),
+		displaying = $bindable()
+	}: { actions: AutoActionData[]; displaying: boolean } = $props();
 	// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
+
+	$effect(() => console.log(displaying));
 </script>
 
-{#each actions as _, i}
-	<Action
-		action_data={actions[i]}
-		deleteself={() => {
-			actions.splice(actions.indexOf(actions[i]), 1);
-		}}
-	/>
-{/each}
+<div
+	class="flex flex-col items-center bg-gunmetal 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"
+	use:clickoutside
+	onclickoutside={() => (displaying = false)}
+>
+	{#each actions as _, i}
+		<Action
+			action_data={actions[i]}
+			deleteself={() => {
+				actions.splice(actions.indexOf(actions[i]), 1);
+			}}
+		/>
+	{/each}
+</div>

src/routes/scout/+page.svelte

@@ -28,22 +28,16 @@
 
 <div class="grid grid-row-10 p-2 h-dvh place-items-center">
 	<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
-	{#if timelineExtended}
-		<div class="row-span-8">
-			<Timeline bind:actions />
-		</div>
-		<button
-			class="row-span-1 bg-gunmetal h-10 w-80 p-1 rounded static"
-			onclick={() => (timelineExtended = false)}>Hide Timeline</button
-		>
-	{:else}
-		<div class="row-span-8">
-			<ActionInputs bind:actions />
-		</div>
+	<div class="row-span-8">
+		<ActionInputs bind:actions />
+	</div>
 
-		<button
-			class="row-span-1 bg-gunmetal h-10 w-80 p-1 rounded static"
-			onclick={() => (timelineExtended = true)}>Show Timeline</button
-		>
-	{/if}
+	<button
+		class="row-span-1 bg-gunmetal h-10 w-80 p-1 rounded static"
+		onclick={(e: Event) => {
+			e.stopPropagation();
+			timelineExtended = true;
+		}}>Show Timeline</button
+	>
+	<Timeline bind:actions bind:displaying={timelineExtended} />
 </div>

src/routes/scout/ActionInputs.svelte

@@ -54,7 +54,7 @@
 </script>
 
 <h1>Number of pieces currently held: {held_scorables}</h1>
-<div class="grid gap-2 grid-cols-1 grid-rows-2 place-items-center">
+<div class="grid gap-2 grid-cols-1 grid-rows-1 place-items-center">
 	{#if is_none_state}
 		<div class="grid gap-2 grid-cols-2">
 			<button class="bg-gunmetal p-2 rounded" onclick={intake_piece}>Intake</button>