added tracking feature(not tested)

src/lib/features/tracking/TelemetryPanel.svelte

@@ -1,36 +1,100 @@
 <script lang="ts">
-	import { FormGroup, Label, Input, InputGroup } from '@sveltestrap/sveltestrap';
+	import { onDestroy } from 'svelte';
+	import { FormGroup, Label, Input, InputGroup, Button, Badge } from '@sveltestrap/sveltestrap';
 	import { CollapsibleCard } from '$ui';
 	import { t } from '$i18n';
+	import { telemetryStore } from './telemetryStore.svelte';
 
-	// Placeholder — wire to the tracking telemetry store once the tracking
-	// pipeline has a real data source.
-	let telemetry: { latitude?: number; longitude?: number; altitude?: number } = $state({
-		latitude: 56.3576,
-		longitude: 39.8666,
-		altitude: 1000,
+	let satelliteInput = $state('');
+
+	const STATUS_COLOR: Record<string, string> = {
+		idle: 'secondary',
+		connecting: 'warning',
+		connected: 'success',
+		error: 'danger',
+	};
+
+	function handleConnect() {
+		const id = satelliteInput.trim();
+		if (id) telemetryStore.connect(id);
+	}
+
+	function handleDisconnect() {
+		telemetryStore.disconnect();
+		satelliteInput = '';
+	}
+
+	onDestroy(() => {
+		telemetryStore.disconnect();
 	});
 </script>
 
 <CollapsibleCard title={$t('nav.track')}>
 	<FormGroup spacing="mb-2">
-		<Label class="small">{$t('points.lat')}</Label>
-		<InputGroup size="sm">
-			<Input type="text" value={telemetry.latitude ?? 'N/A'} readonly />
-		</InputGroup>
+		<Label class="small">{$t('tracking.satelliteId')}</Label>
+		<div class="d-flex gap-1">
+			<Input
+				type="text"
+				size="sm"
+				bind:value={satelliteInput}
+				placeholder={$t('tracking.satelliteIdPlaceholder')}
+				disabled={telemetryStore.status !== 'idle'}
+			/>
+			{#if telemetryStore.status === 'idle'}
+				<Button
+					size="sm"
+					color="primary"
+					onclick={handleConnect}
+					disabled={!satelliteInput.trim()}
+				>
+					{$t('tracking.connect')}
+				</Button>
+			{:else}
+				<Button size="sm" color="secondary" onclick={handleDisconnect}>
+					{$t('tracking.disconnect')}
+				</Button>
+			{/if}
+		</div>
 	</FormGroup>
 
 	<FormGroup spacing="mb-2">
-		<Label class="small">{$t('points.lon')}</Label>
-		<InputGroup size="sm">
-			<Input type="text" value={telemetry.longitude ?? 'N/A'} readonly />
-		</InputGroup>
+		<div class="d-flex align-items-center gap-2">
+			<Label class="small mb-0">{$t('tracking.status')}</Label>
+			<Badge color={STATUS_COLOR[telemetryStore.status]}>
+				{$t(`tracking.status_${telemetryStore.status}`)}
+			</Badge>
+		</div>
+		{#if telemetryStore.error}
+			<small class="text-danger">{telemetryStore.error}</small>
+		{/if}
 	</FormGroup>
 
-	<FormGroup spacing="mb-2">
-		<Label class="small">{$t('points.alt')}</Label>
-		<InputGroup size="sm">
-			<Input type="text" value={telemetry.altitude ?? 'N/A'} readonly />
-		</InputGroup>
-	</FormGroup>
+	{#if telemetryStore.latest}
+		<FormGroup spacing="mb-2">
+			<Label class="small">{$t('points.lat')}</Label>
+			<InputGroup size="sm">
+				<Input type="text" value={telemetryStore.latest.latitude.toFixed(6)} readonly />
+			</InputGroup>
+		</FormGroup>
+
+		<FormGroup spacing="mb-2">
+			<Label class="small">{$t('points.lon')}</Label>
+			<InputGroup size="sm">
+				<Input type="text" value={telemetryStore.latest.longitude.toFixed(6)} readonly />
+			</InputGroup>
+		</FormGroup>
+
+		<FormGroup spacing="mb-2">
+			<Label class="small">{$t('points.alt')}</Label>
+			<InputGroup size="sm">
+				<Input type="text" value={telemetryStore.latest.altitude.toFixed(1)} readonly />
+			</InputGroup>
+		</FormGroup>
+
+		<small class="text-muted">
+			{$t('tracking.packetCount', { count: telemetryStore.points.length })}
+		</small>
+	{:else if telemetryStore.status !== 'idle'}
+		<small class="text-muted">{$t('tracking.waitingData')}</small>
+	{/if}
 </CollapsibleCard>