New panel layout

src/routes/predict/+page.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-    import Map from "../Map.svelte";
-    import ControlPanel from "../ControlPanel.svelte";
-    import Navbar from "../Navbar.svelte";
+    import Map from "$lib/components/Map.svelte";
+    import ControlPanel from "$lib/components/ControlPanel.svelte";
+    import Navbar from "$lib/components/Navbar.svelte";
+    import PanelContainer from "$lib/components/PanelContainer.svelte";
+    import TelemetryPanel from '$lib/components/TelemetryPanel.svelte';
+    import TabComponent from "$lib/components/TabComponent.svelte";
     import { onMount } from "svelte";
     import { PredictionStore } from "$lib/stores";
-    import { Modal } from "@sveltestrap/sveltestrap";
-    import { addToast, removeToast } from "../Toast.svelte"
-     import ToastContainer from '../Toast.svelte';
+    import { Modal, Icon } from "@sveltestrap/sveltestrap";
+    import Toast, { addToast, removeToast } from "$lib/components/Toast.svelte";
+    import ToastContainer from '$lib/components/Toast.svelte';
     import L from "leaflet";
 
     let map: Map | null = null;
-    let panel: ControlPanel | null = null;
+    let panel: PanelContainer | null = null;
     let selectionToastId: string | null = null;
+    let activeTab: 'control' | 'telemetry' = 'control';
 
     onMount(() => {
         PredictionStore.subscribe((data) => {
@@ -58,12 +62,34 @@
             selectionToastId = null;
         }
     }
+
+ 
 </script>
 
+
+
 <main>
     <Navbar />
     <Map bind:this={map} mode="prediction" bind:data={$PredictionStore} on:coordinatesSelected={handleCoordinateSelection}>
-        <ControlPanel bind:this={panel} {handleClickSelectOnMap} />
+        <PanelContainer bind:this={panel}>
+            <TabComponent
+                tabs={[
+                    { id: 'control', icon: 'sliders', label: 'Прогноз' },
+                    { id: 'telemetry', icon: 'activity', label: 'Сценарий' },
+                    { id: 'settings', icon: 'gear', label: 'Настройки' },
+                    { id: 'about', icon: 'info-circle', label: 'О проекте' }
+                ]}
+                bind:activeTab
+            />
+            
+            <div>
+                {#if activeTab === 'control'}
+                    <ControlPanel {handleClickSelectOnMap} />
+                {:else if activeTab === 'telemetry'}
+                    <TelemetryPanel />
+                {/if}
+            </div>
+        </PanelContainer>
         <ToastContainer />
     </Map>
 </main>