From ee9898f6bb1411d97be954bd33d158002da6958a Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sun, 5 Jan 2025 00:54:13 +0200
Subject: [PATCH 1/3] refactor: update key block in StopPane for better
 reactivity

---
 src/components/stops/StopPane.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/stops/StopPane.svelte b/src/components/stops/StopPane.svelte
index 2993242..fb0974b 100644
--- a/src/components/stops/StopPane.svelte
+++ b/src/components/stops/StopPane.svelte
@@ -119,7 +119,7 @@
 						<p>{$t('no_arrivals_or_departures_in_next_30_minutes')}</p>
 					</div>
 				{:else}
-					{#key arrivalsAndDepartures.arrivalsAndDepartures}
+					{#key arrivalsAndDepartures.stopId}
 						<Accordion {handleAccordionSelectionChanged}>
 							{#each arrivalsAndDepartures.arrivalsAndDepartures as arrival}
 								<AccordionItem data={arrival}>

From fb93d8707a205991274fc3cedb28eecb23adf916 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sun, 5 Jan 2025 00:54:48 +0200
Subject: [PATCH 2/3] refactor: use $state instead of $set

---
 src/lib/Provider/OpenStreetMapProvider.svelte.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/Provider/OpenStreetMapProvider.svelte.js b/src/lib/Provider/OpenStreetMapProvider.svelte.js
index 227b67a..811a58a 100644
--- a/src/lib/Provider/OpenStreetMapProvider.svelte.js
+++ b/src/lib/Provider/OpenStreetMapProvider.svelte.js
@@ -273,17 +273,19 @@ export default class OpenStreetMapProvider {
 		marker.setLatLng([vehicleStatus.position.lat, vehicleStatus.position.lon]);
 		marker.setIcon(updatedIcon);
 
-		marker.vehicleData = {
+		let vehicleData = $state({
 			...marker.vehicleData,
 			nextDestination: activeTrip.tripHeadsign,
 			vehicleId: vehicleStatus.vehicleId,
 			lastUpdateTime: vehicleStatus.lastUpdateTime,
 			nextStopName: this.stopsMap.get(vehicleStatus.nextStop)?.name || 'N/A',
 			predicted: vehicleStatus.predicted
-		};
+		})
+
+		marker.vehicleData = vehicleData;
 
 		if (marker.isPopupOpen() && marker.popupComponent) {
-			marker.popupComponent.$set(marker.vehicleData);
+			marker.popupComponent = vehicleData
 		}
 	}
 	removeVehicleMarker(marker) {

From c66f0656ba478e28b98ed30f002bfa2a5b1161a5 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sun, 5 Jan 2025 00:56:17 +0200
Subject: [PATCH 3/3] chore: linting and formatting

---
 src/lib/Provider/OpenStreetMapProvider.svelte.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/Provider/OpenStreetMapProvider.svelte.js b/src/lib/Provider/OpenStreetMapProvider.svelte.js
index 811a58a..632be87 100644
--- a/src/lib/Provider/OpenStreetMapProvider.svelte.js
+++ b/src/lib/Provider/OpenStreetMapProvider.svelte.js
@@ -280,12 +280,12 @@ export default class OpenStreetMapProvider {
 			lastUpdateTime: vehicleStatus.lastUpdateTime,
 			nextStopName: this.stopsMap.get(vehicleStatus.nextStop)?.name || 'N/A',
 			predicted: vehicleStatus.predicted
-		})
+		});
 
 		marker.vehicleData = vehicleData;
 
 		if (marker.isPopupOpen() && marker.popupComponent) {
-			marker.popupComponent = vehicleData
+			marker.popupComponent = vehicleData;
 		}
 	}
 	removeVehicleMarker(marker) {