added timeline with satellite tracking

src/routes/predict/+page.svelte

@@ -6,6 +6,7 @@
     import ScenarioPanel from "$lib/components/ScenarioPanel.svelte";
     import TabComponent from "$lib/components/TabComponent.svelte";
     import PointEditor from "$lib/components/PointEditor.svelte";
+    import TimeLine from "$lib/components/TimeLine.svelte";
     import { onMount } from "svelte";
     import { PredictionStore } from "$lib/stores";
     import { addToast, removeToast } from "$lib/components/Toast.svelte";
@@ -69,7 +70,10 @@
         }
     }
 
-
+    function handleTimeUpdate(event: CustomEvent<{ index: number; lat: number; lng: number; alt: number; datetime: Date }>) {
+        const { lat, lng } = event.detail;
+        map?.updateAnimatedMarker(lat, lng);
+    }
 
 </script>
 
@@ -101,5 +105,8 @@
             </div>
         </PanelContainer>
         <ToastContainer />
+        {#if $PredictionStore}
+            <TimeLine prediction={$PredictionStore} on:timeUpdate={handleTimeUpdate} />
+        {/if}
     </Map>
 </main>