moved actions to top of timeline (#2)

src/lib/components/Timeline.svelte

@@ -2,15 +2,16 @@
 	import type { ActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let { actions = $bindable() }: { actions: ActionData[] } = $props();
+	let { actions = $bindable() }: { actions: ActionData[] } = $props()
+	let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5))
 </script>
 
 <div class="flex flex-col items-center h-[80vh] bg-btn_grey text-text_white p-1 rounded gap-2 w-80">
-	{#each actions as _, i}
+	{#each latestActions as _, i}
 		<Action
-			bind:action={actions[i]}
+			bind:action={latestActions[i]}
 			deleteself={() => {
-				actions.splice(i, 1);
+				actions.splice(actions.indexOf(latestActions[i]), 1);
 			}}
 		/>
 	{/each}

src/routes/scout/+page.svelte

@@ -4,19 +4,17 @@
 
 	function addAction() {
 		//everything here is for testing, as there is no system for this yet
-		latestActions.push({ type: actionType.ScoreAnotherRobotsTote, result: actionResult.success });
-		latestActions.push({ type: actionType.EjectTote, result: actionResult.fail });
-		latestActions.push({ type: actionType.IntakeTote, result: actionResult.success });
+		actions.push({ type: actionType.ScoreAnotherRobotsTote, result: actionResult.success });
+		actions.push({ type: actionType.EjectTote, result: actionResult.fail });
+		actions.push({ type: actionType.IntakeTote, result: actionResult.success });
 	}
 
-	let latestActions: ActionData[] = $state([]);
+	let actions: ActionData[] = $state([]);
 </script>
 
 <main class="flex flex-col items-center gap-2 p-2 justify-center h-screen">
-	<Timeline bind:actions={latestActions} />
+	<Timeline bind:actions={actions} />
 
 	<!--to be changed in the future-->
-	<button class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray" onclick={addAction}
-		>Add Action</button
-	>
+	<button class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray" onclick={addAction}>Add Action</button>
 </main>