From 027576e54d0dbf36319509ccd554b58600be1165 Mon Sep 17 00:00:00 2001
From: awwpotato <awwpotato@voidq.com>
Date: Thu, 14 Nov 2024 15:08:36 -0800
Subject: [PATCH] feat: better timeline thingy

---
 src/lib/components/Timeline.svelte | 37 ++++++++++++++++--------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index d3ac608..5dea604 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { clickoutside } from '@svelte-put/clickoutside';
 	import type { AutoActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
@@ -10,19 +9,23 @@
 	// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
 </script>
 
-<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>
+<button 
+    class="fixed inset-0 transition-all {displaying ? 'backdrop-blur' : 'translate-y-full'}"
+    onclick={() => (displaying = false)}>
+    <div
+        class="absolute h-[50svh] inset-x-0 bottom-0 flex flex-col items-center bg-gunmetal text-white p-1 rounded-t-lg gap-2"
+        id="timeline"
+    >
+        {#each actions as _, i}
+            <Action
+                action_data={actions[i]}
+                deleteself={() => {
+                    actions.splice(actions.indexOf(actions[i]), 1);
+                }}
+            />
+        {/each}
+        {#if actions.length === 0}
+            <h3 class="m-auto">No actions yet :3</h3>
+        {/if}
+    </div>
+</button>