From 7446efb6566823d47b4485ae026cbc37b79f5d81 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Fri, 15 Nov 2024 19:13:11 +0200
Subject: [PATCH 1/8] feat: add trip planner localization for multiple
 languages

---
 src/locales/am.json | 14 +++++++++++++-
 src/locales/ar.json | 13 +++++++++++++
 src/locales/en.json | 13 +++++++++++++
 src/locales/es.json | 14 +++++++++++++-
 src/locales/pl.json | 14 +++++++++++++-
 src/locales/so.json | 14 +++++++++++++-
 src/locales/tl.json | 13 +++++++++++++
 src/locales/vi.json | 13 +++++++++++++
 8 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/src/locales/am.json b/src/locales/am.json
index ec23483..517c635 100644
--- a/src/locales/am.json
+++ b/src/locales/am.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "ጉዞዎን ያቅዱ",
+		"itinerary": "ጉዞ አይነት",
+		"duration": "ቆይታ ጊዜ",
+		"start_time": "መነሻ ጊዜ",
+		"end_time": "መጨረሻ ጊዜ",
+		"minutes": "ደቂቃዎች",
+		"distance": "ርቀት",
+		"end": "መጨረሻ",
+		"meters": "ሜትሮች",
+		"no_itineraries_found": "ምንም ጉዞ አይነት አልተገኘም",
+		"loading": "በመጫን ላይ..."
+	},
 	"search": {
 		"placeholder": "ቆሻሻዎችን፣ መንገዶችን እና ቦታዎችን ይፈልጉ",
 		"results_for": "የፍለጋ ውጤቶች ለ",
@@ -45,7 +58,6 @@
 		"min": "ደቂቃ",
 		"mins": "ደቂቃዎች"
 	},
-
 	"vehicle": {
 		"number": "ተሽከርካሪ #",
 		"data_updated": "የተሻሻለ ውሂብ",
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 63618d4..59c7ea9 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "خطط رحلتك",
+		"itinerary": "مسار الرحلة",
+		"duration": "المدة",
+		"start_time": "وقت البدء",
+		"end_time": "وقت الانتهاء",
+		"minutes": "دقيقة",
+		"distance": "المسافة",
+		"end": "النهاية",
+		"meters": "الأمتار",
+		"no_itineraries_found": "لم يتم العثور على مسارات",
+		"loading": "جاري التحميل..."
+	},
 	"search": {
 		"placeholder": "ابحث عن المحطات، المسارات، والأماكن",
 		"results_for": "نتائج البحث عن",
diff --git a/src/locales/en.json b/src/locales/en.json
index adcd59b..74ffd86 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "Plan Your Trip",
+		"itinerary": "Itinerary",
+		"duration": "Duration",
+		"start_time": "Start Time",
+		"end_time": "End Time",
+		"minutes": "min",
+		"distance": "Distance",
+		"end": "End",
+		"meters": "meters",
+		"no_itineraries_found": "No itineraries found",
+		"loading": "Loading..."
+	},
 	"search": {
 		"placeholder": "Search for stops, routes, and places",
 		"results_for": "Search results for",
diff --git a/src/locales/es.json b/src/locales/es.json
index e0c0969..5eaad9a 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "Planifica tu viaje",
+		"itinerary": "Itinerario",
+		"duration": "Duración",
+		"start_time": "Hora de inicio",
+		"end_time": "Hora de finalización",
+		"minutes": "minutos",
+		"distance": "Distancia",
+		"end": "Final",
+		"meters": "metros",
+		"no_itineraries_found": "No se encontraron itinerarios",
+		"loading": "Cargando..."
+	},
 	"search": {
 		"placeholder": "Buscar paradas, rutas y lugares",
 		"results_for": "Resultados de búsqueda para",
@@ -34,7 +47,6 @@
 	"stop": "Parada",
 	"routes": "Rutas",
 	"route": "Ruta",
-	"route_modal_title": "Ruta {name}",
 	"loading": "Cargando",
 	"arrives": "llega",
 	"NA": "N/D",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index be70d98..08840b5 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "Zaplanuj swoją podróż",
+		"itinerary": "Plan podróży",
+		"duration": "Czas trwania",
+		"start_time": "Czas rozpoczęcia",
+		"end_time": "Czas zakończenia",
+		"minutes": "minuty",
+		"distance": "Odległość",
+		"end": "Koniec",
+		"meters": "metry",
+		"no_itineraries_found": "Nie znaleziono planów podróży",
+		"loading": "Ładowanie..."
+	},
 	"search": {
 		"placeholder": "Szukaj przystanków, tras i miejsc",
 		"results_for": "Wyniki wyszukiwania dla",
@@ -34,7 +47,6 @@
 	"stop": "Przystanek",
 	"routes": "Trasy",
 	"route": "trasa",
-	"route_modal_title": "Trasa {name}",
 	"loading": "Ładowanie",
 	"arrives": "przyjeżdża",
 	"NA": "N/D",
diff --git a/src/locales/so.json b/src/locales/so.json
index 4df98ec..6020bd4 100644
--- a/src/locales/so.json
+++ b/src/locales/so.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "Qorshee safarkaaga",
+		"itinerary": "Jadwalka safarka",
+		"duration": "Mudada",
+		"start_time": "Waqtiga bilowga",
+		"end_time": "Waqtiga dhamaadka",
+		"minutes": "daqiiqado",
+		"distance": "Masaafada",
+		"end": "Dhamaadka",
+		"meters": "mitir",
+		"no_itineraries_found": "Jadwal safar lama helin",
+		"loading": "Shaqeynaya..."
+	},
 	"search": {
 		"placeholder": "Raadi joogsiyo, wadooyin iyo meelo",
 		"results_for": "Natiijooyinka raadinta ee",
@@ -34,7 +47,6 @@
 	"stop": "Joogsi",
 	"routes": "Jidadka",
 	"route": "Jidka",
-	"route_modal_title": "Jidka {name}",
 	"loading": "Shaqeynaya",
 	"arrives": "imaataa",
 	"NA": "M/Q",
diff --git a/src/locales/tl.json b/src/locales/tl.json
index 27ab8ae..bf06d72 100644
--- a/src/locales/tl.json
+++ b/src/locales/tl.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "Planuhin ang iyong biyahe",
+		"itinerary": "Itineraryo",
+		"duration": "Tagal",
+		"start_time": "Oras ng pagsisimula",
+		"end_time": "Oras ng pagtatapos",
+		"minutes": "minuto",
+		"distance": "Distansya",
+		"end": "Wakas",
+		"meters": "metro",
+		"no_itineraries_found": "Walang nahanap na itineraryo",
+		"loading": "Naglo-load..."
+	},
 	"search": {
 		"placeholder": "Maghanap ng mga hintuan, ruta, at lugar",
 		"results_for": "Mga resulta ng paghahanap para sa",
diff --git a/src/locales/vi.json b/src/locales/vi.json
index 97fc839..f5c44ed 100644
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -1,4 +1,17 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "Lập kế hoạch hành trình",
+		"itinerary": "Lịch trình",
+		"duration": "Thời gian",
+		"start_time": "Thời gian bắt đầu",
+		"end_time": "Thời gian kết thúc",
+		"minutes": "phút",
+		"distance": "Khoảng cách",
+		"end": "Kết thúc",
+		"meters": "mét",
+		"no_itineraries_found": "Không tìm thấy lịch trình",
+		"loading": "Đang tải..."
+	},
 	"search": {
 		"placeholder": "Tìm kiếm trạm dừng, tuyến đường và địa điểm",
 		"results_for": "Kết quả tìm kiếm cho",

From 54df253990de5770af2167f0a25537571e986d1b Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Fri, 15 Nov 2024 19:13:29 +0200
Subject: [PATCH 2/8] feat: update trip planner button text for localization
 support

---
 src/components/trip-planner/TripPlan.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/trip-planner/TripPlan.svelte b/src/components/trip-planner/TripPlan.svelte
index 455f09e..7a7af65 100644
--- a/src/components/trip-planner/TripPlan.svelte
+++ b/src/components/trip-planner/TripPlan.svelte
@@ -4,6 +4,7 @@
 	import TripPlanSearchField from './TripPlanSearchField.svelte';
 	import { error } from '@sveltejs/kit';
 	import { browser } from '$app/environment';
+	import { t } from 'svelte-i18n';
 	export let mapProvider;
 
 	let fromPlace = '';
@@ -212,7 +213,7 @@
 			</svg>
 			Planning...
 		{:else}
-			Plan Your Trip
+			{$t('trip-planner.plan_your_trip')}
 		{/if}
 	</button>
 </div>

From e2091a49985a92229f72107a61979235b4b73b05 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Fri, 15 Nov 2024 19:14:13 +0200
Subject: [PATCH 3/8] feat: localization trip planner

---
 src/components/trip-planner/ItineraryDetails.svelte | 12 ++++++++----
 src/components/trip-planner/ItineraryTab.svelte     |  4 +++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/trip-planner/ItineraryDetails.svelte b/src/components/trip-planner/ItineraryDetails.svelte
index 8c15685..f0ccd80 100644
--- a/src/components/trip-planner/ItineraryDetails.svelte
+++ b/src/components/trip-planner/ItineraryDetails.svelte
@@ -1,6 +1,7 @@
 <script>
 	import LegDetails from './LegDetails.svelte';
 	import { formatTime } from '$lib/formatters';
+	import { t } from 'svelte-i18n';
 	export let itinerary;
 	export let expandedSteps;
 	export let toggleSteps;
@@ -8,15 +9,18 @@
 
 <div class="mb-4 flex items-center justify-between rounded-lg bg-gray-100 p-4 shadow-md">
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">Duration</p>
-		<p class="text-lg font-bold text-gray-700">{Math.round(itinerary.duration / 60)} min</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip.duration')}</p>
+		<p class="text-lg font-bold text-gray-700">
+			{Math.round(itinerary.duration / 60)}
+			{$t('time.min')}
+		</p>
 	</div>
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">Start Time</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip.start_time')}</p>
 		<p class="text-lg font-bold text-gray-700">{formatTime(itinerary.startTime)}</p>
 	</div>
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">End Time</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip.end_time')}</p>
 		<p class="text-lg font-bold text-gray-700">{formatTime(itinerary.endTime)}</p>
 	</div>
 </div>
diff --git a/src/components/trip-planner/ItineraryTab.svelte b/src/components/trip-planner/ItineraryTab.svelte
index 30272af..3474fef 100644
--- a/src/components/trip-planner/ItineraryTab.svelte
+++ b/src/components/trip-planner/ItineraryTab.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { t } from 'svelte-i18n';
 	export let index;
 	export let activeTab;
 	export let setActiveTab;
@@ -10,5 +11,6 @@
 	}`}
 	on:click={() => setActiveTab(index)}
 >
-	Itinerary {index + 1}
+	{$t('trip.itinerary')}
+	{index + 1}
 </button>

From 41a6c57ca37ed807dd4cc47432da6f5b3db98629 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sat, 16 Nov 2024 11:50:47 +0200
Subject: [PATCH 4/8] feat: enhance RTL support in CSS for improved layout and
 spacing

---
 src/app.css | 73 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/app.css b/src/app.css
index 158c9ed..d0f26ae 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,27 +3,54 @@
 @tailwind utilities;
 
 @layer components {
-	.h1 {
-		@apply mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300;
-	}
-
-	.h2 {
-		@apply mb-4 text-xl font-semibold text-gray-900 dark:text-gray-300;
-	}
-
-	.h3 {
-		@apply mb-2 text-lg font-semibold dark:text-white;
-	}
-
-	.modal-pane {
-		@apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10;
-	}
-	.rtl {
-		@apply flex-row-reverse text-left;
-		direction: rtl;
-	}
-
-	.rtl .rotate-rtl {
-		transform: rotate(180deg);
-	}
+    .h1 {
+        @apply mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300;
+    }
+
+    .h2 {
+        @apply mb-4 text-xl font-semibold text-gray-900 dark:text-gray-300;
+    }
+
+    .h3 {
+        @apply mb-2 text-lg font-semibold dark:text-white;
+    }
+
+    .modal-pane {
+        @apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10;
+    }
+
+    .rtl {
+        @apply flex-row-reverse text-right;
+        direction: rtl;
+    }
+
+    .rtl .rotate-rtl {
+        transform: rotate(180deg);
+    }
+
+    .rtl .ml-3 {
+        margin-right: 0.75rem;
+    }
+
+    .rtl .mr-3 {
+        margin-left: 0.75rem;
+    }
+
+    .rtl .space-x-4 {
+        margin-left: 1rem;
+    }
+
+    .rtl .space-x-reverse {
+        margin-right: 1rem;
+    }
+
+    .rtl .border-l-4 {
+        border-left-width: 0;
+        border-right-width: 4px;
+    }
+
+    .rtl .left-5 {
+        left: auto;
+        right: 1.25rem;
+    }
 }

From ea02d632e505e53f698dfa567e5e236d5cd028c1 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sat, 16 Nov 2024 12:00:06 +0200
Subject: [PATCH 5/8] feat: add localization strings for trip planning in
 multiple languages

---
 src/locales/am.json | 15 +++++++++++++--
 src/locales/ar.json | 16 ++++++++++++++--
 src/locales/en.json | 17 ++++++++++++++---
 src/locales/es.json | 18 +++++++++++++++---
 src/locales/pl.json | 18 +++++++++++++++---
 src/locales/so.json | 16 ++++++++++++++--
 src/locales/tl.json | 16 +++++++++++++---
 src/locales/vi.json | 16 +++++++++++++---
 8 files changed, 111 insertions(+), 21 deletions(-)

diff --git a/src/locales/am.json b/src/locales/am.json
index 517c635..e8d523a 100644
--- a/src/locales/am.json
+++ b/src/locales/am.json
@@ -8,9 +8,19 @@
 		"minutes": "ደቂቃዎች",
 		"distance": "ርቀት",
 		"end": "መጨረሻ",
+		"start": "መነሻ",
 		"meters": "ሜትሮች",
 		"no_itineraries_found": "ምንም ጉዞ አይነት አልተገኘም",
-		"loading": "በመጫን ላይ..."
+		"loading": "በመጫን ላይ...",
+		"planning": "በማቅዳት ላይ",
+		"from": "ከ",
+		"to": "ወደ",
+		"search_for_a_place": "ቦታ ይፈልጉ",
+		"trip_itineraries": "የጉዞ አይነቶች"
+	},
+	"tabs": {
+		"stops-and-stations": "ማቆሚያዎችና ጣቢያዎች",
+		"plan_trip": "ጉዞን አቅድ"
 	},
 	"search": {
 		"placeholder": "ቆሻሻዎችን፣ መንገዶችን እና ቦታዎችን ይፈልጉ",
@@ -56,7 +66,8 @@
 		"sec": "ሰከንድ",
 		"secs": "ሰከንዶች",
 		"min": "ደቂቃ",
-		"mins": "ደቂቃዎች"
+		"mins": "ደቂቃዎች",
+		"minutes": "ደቂቃዎች"
 	},
 	"vehicle": {
 		"number": "ተሽከርካሪ #",
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 59c7ea9..b938eae 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -8,9 +8,19 @@
 		"minutes": "دقيقة",
 		"distance": "المسافة",
 		"end": "النهاية",
+		"start": "البداية",
 		"meters": "الأمتار",
 		"no_itineraries_found": "لم يتم العثور على مسارات",
-		"loading": "جاري التحميل..."
+		"loading": "جاري التحميل...",
+		"planning": "جاري التخطيط",
+		"from": "من",
+		"to": "إلى",
+		"search_for_a_place": "ابحث عن المكان",
+		"trip_itineraries": "مسارات الرحلة"
+	},
+	"tabs": {
+		"stops-and-stations": "المحطات والمواقف",
+		"plan_trip": "خطط لرحلة"
 	},
 	"search": {
 		"placeholder": "ابحث عن المحطات، المسارات، والأماكن",
@@ -47,6 +57,7 @@
 	"stop": "المحطة",
 	"routes": "المسارات",
 	"route": "المسار",
+	"route_modal_title": "مسار {name}",
 	"loading": "جاري التحميل",
 	"arrives": "يصل",
 	"NA": "غير متاح",
@@ -55,7 +66,8 @@
 		"sec": "ثانية",
 		"secs": "ثواني",
 		"min": "دقيقة",
-		"mins": "دقائق"
+		"mins": "دقائق",
+		"minutes": "دقائق"
 	},
 	"vehicle": {
 		"number": "رقم المركبة",
diff --git a/src/locales/en.json b/src/locales/en.json
index 74ffd86..a66927d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -6,11 +6,21 @@
 		"start_time": "Start Time",
 		"end_time": "End Time",
 		"minutes": "min",
-		"distance": "Distance",
+		"distance": "Distance:",
 		"end": "End",
+		"start": "Start",
 		"meters": "meters",
 		"no_itineraries_found": "No itineraries found",
-		"loading": "Loading..."
+		"loading": "Loading",
+		"planning": "Planning",
+		"from": "From",
+		"to": "To",
+		"search_for_a_place": "Search for a place",
+		"trip_itineraries": "Trip Itineraries"
+	},
+	"tabs": {
+		"stops-and-stations": "Stops and Stations",
+		"plan_trip": "Plan a Trip"
 	},
 	"search": {
 		"placeholder": "Search for stops, routes, and places",
@@ -56,7 +66,8 @@
 		"sec": "sec",
 		"secs": "secs",
 		"min": "min",
-		"mins": "mins"
+		"mins": "mins",
+		"minutes": "minutes"
 	},
 	"vehicle": {
 		"number": "Vehicle #",
diff --git a/src/locales/es.json b/src/locales/es.json
index 5eaad9a..eb54ff9 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -6,11 +6,21 @@
 		"start_time": "Hora de inicio",
 		"end_time": "Hora de finalización",
 		"minutes": "minutos",
-		"distance": "Distancia",
+		"distance": "Distancia:",
 		"end": "Final",
+		"start": "Inicio",
 		"meters": "metros",
 		"no_itineraries_found": "No se encontraron itinerarios",
-		"loading": "Cargando..."
+		"loading": "Cargando",
+		"planning": "Planificando",
+		"from": "Desde",
+		"to": "Hasta",
+		"search_for_a_place": "Buscar un lugar",
+		"trip_itineraries": "Itinerarios de viaje"
+	},
+	"tabs": {
+		"stops-and-stations": "Paradas y estaciones",
+		"plan_trip": "Planificar un viaje"
 	},
 	"search": {
 		"placeholder": "Buscar paradas, rutas y lugares",
@@ -47,6 +57,7 @@
 	"stop": "Parada",
 	"routes": "Rutas",
 	"route": "Ruta",
+	"route_modal_title": "Ruta {name}",
 	"loading": "Cargando",
 	"arrives": "llega",
 	"NA": "N/D",
@@ -55,7 +66,8 @@
 		"sec": "seg",
 		"secs": "segs",
 		"min": "min",
-		"mins": "mins"
+		"mins": "mins",
+		"minutes": "minutos"
 	},
 	"vehicle": {
 		"number": "Vehículo #",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 08840b5..99913d4 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -6,11 +6,21 @@
 		"start_time": "Czas rozpoczęcia",
 		"end_time": "Czas zakończenia",
 		"minutes": "minuty",
-		"distance": "Odległość",
+		"distance": "Odległość:",
 		"end": "Koniec",
+		"start": "Początek",
 		"meters": "metry",
 		"no_itineraries_found": "Nie znaleziono planów podróży",
-		"loading": "Ładowanie..."
+		"loading": "Ładowanie",
+		"planning": "Planowanie",
+		"from": "Od",
+		"to": "Do",
+		"search_for_a_place": "Szukaj miejsca",
+		"trip_itineraries": "Plany podróży"
+	},
+	"tabs": {
+		"stops-and-stations": "Przystanki i stacje",
+		"plan_trip": "Zaplanuj podróż"
 	},
 	"search": {
 		"placeholder": "Szukaj przystanków, tras i miejsc",
@@ -47,6 +57,7 @@
 	"stop": "Przystanek",
 	"routes": "Trasy",
 	"route": "trasa",
+	"route_modal_title": "Trasa {name}",
 	"loading": "Ładowanie",
 	"arrives": "przyjeżdża",
 	"NA": "N/D",
@@ -55,7 +66,8 @@
 		"sec": "sek",
 		"secs": "sekundy",
 		"min": "min",
-		"mins": "minuty"
+		"mins": "minuty",
+		"minutes": "minuty"
 	},
 	"vehicle": {
 		"number": "Pojazd #",
diff --git a/src/locales/so.json b/src/locales/so.json
index 6020bd4..f48d9e0 100644
--- a/src/locales/so.json
+++ b/src/locales/so.json
@@ -8,9 +8,19 @@
 		"minutes": "daqiiqado",
 		"distance": "Masaafada",
 		"end": "Dhamaadka",
+		"start": "Bilowga",
 		"meters": "mitir",
 		"no_itineraries_found": "Jadwal safar lama helin",
-		"loading": "Shaqeynaya..."
+		"loading": "Shaqeynaya...",
+		"planning": "Qorshaynta",
+		"from": "Laga soo bilaabo",
+		"to": "Ku socda",
+		"search_for_a_place": "Raadi meel",
+		"trip_itineraries": "Jadwalka safarada"
+	},
+	"tabs": {
+		"stops-and-stations": "Joogsiyada iyo saldhigyada",
+		"plan_trip": "Qorshee safarka"
 	},
 	"search": {
 		"placeholder": "Raadi joogsiyo, wadooyin iyo meelo",
@@ -47,6 +57,7 @@
 	"stop": "Joogsi",
 	"routes": "Jidadka",
 	"route": "Jidka",
+	"route_modal_title": "Jidka {name}",
 	"loading": "Shaqeynaya",
 	"arrives": "imaataa",
 	"NA": "M/Q",
@@ -55,7 +66,8 @@
 		"sec": "ilbiriqsi",
 		"secs": "ilbiriqsiyaal",
 		"min": "daqiiqo",
-		"mins": "daqiiqado"
+		"mins": "daqiiqado",
+		"minutes": "daqiiqado"
 	},
 	"vehicle": {
 		"number": "Gaari #",
diff --git a/src/locales/tl.json b/src/locales/tl.json
index bf06d72..dce092f 100644
--- a/src/locales/tl.json
+++ b/src/locales/tl.json
@@ -8,9 +8,19 @@
 		"minutes": "minuto",
 		"distance": "Distansya",
 		"end": "Wakas",
+		"start": "Simula",
 		"meters": "metro",
 		"no_itineraries_found": "Walang nahanap na itineraryo",
-		"loading": "Naglo-load..."
+		"loading": "Naglo-load...",
+		"planning": "Pinaplano",
+		"from": "Mula sa",
+		"to": "Patungo sa",
+		"search_for_a_place": "Maghanap ng lugar",
+		"trip_itineraries": "Mga itineraryo ng biyahe"
+	},
+	"tabs": {
+		"stops-and-stations": "Mga hintuan at estasyon",
+		"plan_trip": "Planuhin ang biyahe"
 	},
 	"search": {
 		"placeholder": "Maghanap ng mga hintuan, ruta, at lugar",
@@ -46,10 +56,10 @@
 	"no_arrivals_or_departures_in_next_30_minutes": "Walang mga pagdating o pag-alis sa susunod na 30 minuto",
 	"stop": "Hintuan",
 	"routes": "Mga ruta",
-	"route": "ruta",
+	"route": "Ruta",
 	"route_modal_title": "Ruta {name}",
 	"loading": "Naglo-load",
-	"arrives": "dumarating",
+	"arrives": "Dumarating",
 	"NA": "W/A",
 	"time": {
 		"ago": "nakaraan",
diff --git a/src/locales/vi.json b/src/locales/vi.json
index f5c44ed..35b8023 100644
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -8,9 +8,19 @@
 		"minutes": "phút",
 		"distance": "Khoảng cách",
 		"end": "Kết thúc",
+		"start": "Bắt đầu",
 		"meters": "mét",
 		"no_itineraries_found": "Không tìm thấy lịch trình",
-		"loading": "Đang tải..."
+		"loading": "Đang tải...",
+		"planning": "Đang lập kế hoạch",
+		"from": "Từ",
+		"to": "Đến",
+		"search_for_a_place": "Tìm kiếm địa điểm",
+		"trip_itineraries": "Lịch trình chuyến đi"
+	},
+	"tabs": {
+		"stops-and-stations": "Trạm dừng và nhà ga",
+		"plan_trip": "Lập kế hoạch chuyến đi"
 	},
 	"search": {
 		"placeholder": "Tìm kiếm trạm dừng, tuyến đường và địa điểm",
@@ -46,10 +56,10 @@
 	"no_arrivals_or_departures_in_next_30_minutes": "Không có chuyến đến hoặc đi trong 30 phút tới",
 	"stop": "Trạm dừng",
 	"routes": "Tuyến đường",
-	"route": "tuyến đường",
+	"route": "Tuyến đường",
 	"route_modal_title": "Tuyến đường {name}",
 	"loading": "Đang tải",
-	"arrives": "đến",
+	"arrives": "Đến",
 	"NA": "KAD",
 	"time": {
 		"ago": "trước",

From 604fe64a666239341f2bf2e27f3ef6b4a98e5204 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sat, 16 Nov 2024 12:09:24 +0200
Subject: [PATCH 6/8] style: formatting

---
 src/app.css | 100 ++++++++++++++++++++++++++--------------------------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/app.css b/src/app.css
index d0f26ae..c1bae2b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,54 +3,54 @@
 @tailwind utilities;
 
 @layer components {
-    .h1 {
-        @apply mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300;
-    }
-
-    .h2 {
-        @apply mb-4 text-xl font-semibold text-gray-900 dark:text-gray-300;
-    }
-
-    .h3 {
-        @apply mb-2 text-lg font-semibold dark:text-white;
-    }
-
-    .modal-pane {
-        @apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10;
-    }
-
-    .rtl {
-        @apply flex-row-reverse text-right;
-        direction: rtl;
-    }
-
-    .rtl .rotate-rtl {
-        transform: rotate(180deg);
-    }
-
-    .rtl .ml-3 {
-        margin-right: 0.75rem;
-    }
-
-    .rtl .mr-3 {
-        margin-left: 0.75rem;
-    }
-
-    .rtl .space-x-4 {
-        margin-left: 1rem;
-    }
-
-    .rtl .space-x-reverse {
-        margin-right: 1rem;
-    }
-
-    .rtl .border-l-4 {
-        border-left-width: 0;
-        border-right-width: 4px;
-    }
-
-    .rtl .left-5 {
-        left: auto;
-        right: 1.25rem;
-    }
+	.h1 {
+		@apply mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300;
+	}
+
+	.h2 {
+		@apply mb-4 text-xl font-semibold text-gray-900 dark:text-gray-300;
+	}
+
+	.h3 {
+		@apply mb-2 text-lg font-semibold dark:text-white;
+	}
+
+	.modal-pane {
+		@apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10;
+	}
+
+	.rtl {
+		@apply flex-row-reverse text-right;
+		direction: rtl;
+	}
+
+	.rtl .rotate-rtl {
+		transform: rotate(180deg);
+	}
+
+	.rtl .ml-3 {
+		margin-right: 0.75rem;
+	}
+
+	.rtl .mr-3 {
+		margin-left: 0.75rem;
+	}
+
+	.rtl .space-x-4 {
+		margin-left: 1rem;
+	}
+
+	.rtl .space-x-reverse {
+		margin-right: 1rem;
+	}
+
+	.rtl .border-l-4 {
+		border-left-width: 0;
+		border-right-width: 4px;
+	}
+
+	.rtl .left-5 {
+		left: auto;
+		right: 1.25rem;
+	}
 }

From bc62e39c5691fe7080ae5d7d8b25ee7ed0e6020e Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sat, 16 Nov 2024 12:09:35 +0200
Subject: [PATCH 7/8] feat: add localization support for search placeholder and
 loading text in TripPlanSearchField

---
 src/components/trip-planner/TripPlanSearchField.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/trip-planner/TripPlanSearchField.svelte b/src/components/trip-planner/TripPlanSearchField.svelte
index 602585c..162d711 100644
--- a/src/components/trip-planner/TripPlanSearchField.svelte
+++ b/src/components/trip-planner/TripPlanSearchField.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
-
+	import { t } from 'svelte-i18n';
 	export let label = '';
 	export let place = '';
 	export let results = [];
@@ -33,7 +33,7 @@
 			type="text"
 			bind:value={place}
 			on:input={handleInput}
-			placeholder="Enter location"
+			placeholder="{$t('trip-planner.search_for_a_place')}..."
 			class="dark: mt-1 block w-full rounded-md border-gray-300 pr-10 text-black shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
 		/>
 		{#if place}
@@ -61,7 +61,7 @@
 		<p
 			class="absolute z-10 mt-1 w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 shadow-lg"
 		>
-			Loading...
+			{$t('trip-planner.loading')}...
 		</p>
 	{:else if results.length > 0}
 		<ul

From ae2b6c51d64276bceaf1112c7a4791bd2154d23e Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sat, 16 Nov 2024 12:10:33 +0200
Subject: [PATCH 8/8] feat: localization and internationalization

---
 src/components/search/SearchPane.svelte        |  4 ++--
 .../trip-planner/ItineraryDetails.svelte       |  6 +++---
 .../trip-planner/ItineraryTab.svelte           |  2 +-
 src/components/trip-planner/LegDetails.svelte  | 18 ++++++++++++------
 src/components/trip-planner/TripPlan.svelte    | 14 +++++++-------
 .../trip-planner/TripPlanModal.svelte          |  5 +++--
 6 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/search/SearchPane.svelte b/src/components/search/SearchPane.svelte
index 5917950..a473890 100644
--- a/src/components/search/SearchPane.svelte
+++ b/src/components/search/SearchPane.svelte
@@ -122,7 +122,7 @@
 
 <div class={`modal-pane flex flex-col justify-between md:w-96 ${cssClasses}`}>
 	<Tabs tabStyle="underline" contentClass="pt-2 pb-4 bg-gray-50 rounded-lg dark:bg-black">
-		<TabItem open title="Stops and Stations" on:click={handleTabSwitch}>
+		<TabItem open title={$t('tabs.stops-and-stations')} on:click={handleTabSwitch}>
 			<SearchField value={query} on:searchResults={handleSearchResults} />
 
 			{#if query}
@@ -182,7 +182,7 @@
 		</TabItem>
 
 		{#if PUBLIC_OTP_SERVER_URL}
-			<TabItem title="Plan a Trip" on:click={handlePlanTripTabClick} disabled={!mapLoaded}>
+			<TabItem title={$t('tabs.plan_trip')} on:click={handlePlanTripTabClick} disabled={!mapLoaded}>
 				<TripPlan {mapProvider} on:tripPlanned={handleTripPlan} />
 			</TabItem>
 		{/if}
diff --git a/src/components/trip-planner/ItineraryDetails.svelte b/src/components/trip-planner/ItineraryDetails.svelte
index f0ccd80..8264017 100644
--- a/src/components/trip-planner/ItineraryDetails.svelte
+++ b/src/components/trip-planner/ItineraryDetails.svelte
@@ -9,18 +9,18 @@
 
 <div class="mb-4 flex items-center justify-between rounded-lg bg-gray-100 p-4 shadow-md">
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">{$t('trip.duration')}</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip-planner.duration')}</p>
 		<p class="text-lg font-bold text-gray-700">
 			{Math.round(itinerary.duration / 60)}
 			{$t('time.min')}
 		</p>
 	</div>
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">{$t('trip.start_time')}</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip-planner.start_time')}</p>
 		<p class="text-lg font-bold text-gray-700">{formatTime(itinerary.startTime)}</p>
 	</div>
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">{$t('trip.end_time')}</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip-planner.end_time')}</p>
 		<p class="text-lg font-bold text-gray-700">{formatTime(itinerary.endTime)}</p>
 	</div>
 </div>
diff --git a/src/components/trip-planner/ItineraryTab.svelte b/src/components/trip-planner/ItineraryTab.svelte
index 3474fef..d12eb7c 100644
--- a/src/components/trip-planner/ItineraryTab.svelte
+++ b/src/components/trip-planner/ItineraryTab.svelte
@@ -11,6 +11,6 @@
 	}`}
 	on:click={() => setActiveTab(index)}
 >
-	{$t('trip.itinerary')}
+	{$t('trip-planner.itinerary')}
 	{index + 1}
 </button>
diff --git a/src/components/trip-planner/LegDetails.svelte b/src/components/trip-planner/LegDetails.svelte
index 48917cb..90f9fd5 100644
--- a/src/components/trip-planner/LegDetails.svelte
+++ b/src/components/trip-planner/LegDetails.svelte
@@ -14,7 +14,7 @@
 		faArrowAltCircleRight
 	} from '@fortawesome/free-solid-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
-
+	import { t } from 'svelte-i18n';
 	export let leg;
 	export let index;
 	export let expandedSteps;
@@ -75,7 +75,7 @@
 		<div class="mt-3 flex space-x-4 text-sm text-gray-600 dark:text-gray-100">
 			<div class="flex items-center">
 				<FontAwesomeIcon icon={faClock} class="mr-1 text-blue-500" />
-				<span class="text-md">Start:</span>
+				<span class="text-md">{$t('trip-planner.start')}:</span>
 				<div class="ml-1 flex items-baseline">
 					<span class="text-md font-semibold">{formatTime(leg.startTime).slice(0, -3)}</span>
 					<span class="ml-1 text-xs">{formatTime(leg.startTime).slice(-2)}</span>
@@ -83,7 +83,7 @@
 			</div>
 			<div class="flex items-center">
 				<FontAwesomeIcon icon={faClock} class="mr-1 text-red-500" />
-				<span class="text-md">End:</span>
+				<span class="text-md">{$t('trip-planner.end')}:</span>
 				<div class="ml-1 flex items-baseline">
 					<span class="text-md font-semibold">{formatTime(leg.endTime).slice(0, -3)}</span>
 					<span class="ml-1 text-xs">{formatTime(leg.endTime).slice(-2)}</span>
@@ -98,11 +98,13 @@
 			</div>
 			<div class="mb-2 flex items-center">
 				<FontAwesomeIcon icon={faRulerCombined} class="mr-2 text-gray-400" />
-				<span>Distance: {Math.round(leg.distance)} meters</span>
+				<span>Distance: {Math.round(leg.distance)} {$t('trip-planner.meters')}</span>
 			</div>
 			<div class="mb-4 flex items-center">
 				<FontAwesomeIcon icon={faClock} class="mr-2 text-gray-400" />
-				<span>Duration: {Math.round(leg.duration / 60)} minutes</span>
+				<span
+					>{$t('trip-planner.duration')}: {Math.round(leg.duration / 60)} {$t('time.minutes')}</span
+				>
 			</div>
 		</div>
 
@@ -119,7 +121,11 @@
 							<div class="font-semibold">{step.relativeDirection} on {step.streetName}</div>
 							<div class="mb-2 flex items-center">
 								<FontAwesomeIcon icon={faRulerCombined} class="mr-2 text-gray-400" />
-								<span>Distance: {Math.round(step.distance)} meters</span>
+								<span
+									>{$t('trip-planner.distance')}
+									{Math.round(step.distance)}
+									{$t('trip-planner.meters')}</span
+								>
 							</div>
 							<div class="flex items-center">
 								<FontAwesomeIcon icon={faArrowAltCircleRight} class="mr-2 text-gray-400" />
diff --git a/src/components/trip-planner/TripPlan.svelte b/src/components/trip-planner/TripPlan.svelte
index 7a7af65..ea467ff 100644
--- a/src/components/trip-planner/TripPlan.svelte
+++ b/src/components/trip-planner/TripPlan.svelte
@@ -82,12 +82,12 @@
 			const response = await geocodeLocation(suggestion.text);
 			if (isFrom) {
 				selectedFrom = response.location.geometry.location;
-				fromMarker = mapProvider.addPinMarker(selectedFrom, 'From');
+				fromMarker = mapProvider.addPinMarker(selectedFrom, $t('trip-planner.from'));
 				fromPlace = suggestion.text;
 				fromResults = [];
 			} else {
 				selectedTo = response.location.geometry.location;
-				toMarker = mapProvider.addPinMarker(selectedTo, 'To');
+				toMarker = mapProvider.addPinMarker(selectedTo, $t('trip-planner.to'));
 				toPlace = suggestion.text;
 				toResults = [];
 			}
@@ -143,8 +143,8 @@
 				mapProvider.removePinMarker(toMarker);
 			}
 
-			fromMarker = mapProvider.addPinMarker(selectedFrom, 'From');
-			toMarker = mapProvider.addPinMarker(selectedTo, 'To');
+			fromMarker = mapProvider.addPinMarker(selectedFrom, $t('trip-planner.from'));
+			toMarker = mapProvider.addPinMarker(selectedTo, $t('trip-planner.to'));
 
 			const data = await fetchTripPlan(selectedFrom, selectedTo);
 
@@ -168,7 +168,7 @@
 
 <div class="space-y-4">
 	<TripPlanSearchField
-		label="From:"
+		label="{$t('trip-planner.from')}:"
 		place={fromPlace}
 		results={fromResults}
 		isLoading={isLoadingFrom}
@@ -178,7 +178,7 @@
 	/>
 
 	<TripPlanSearchField
-		label="To:"
+		label="{$t('trip-planner.to')}:"
 		place={toPlace}
 		results={toResults}
 		isLoading={isLoadingTo}
@@ -211,7 +211,7 @@
 				></circle>
 				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
 			</svg>
-			Planning...
+			{$t('trip-planner.planning')}...
 		{:else}
 			{$t('trip-planner.plan_your_trip')}
 		{/if}
diff --git a/src/components/trip-planner/TripPlanModal.svelte b/src/components/trip-planner/TripPlanModal.svelte
index 47d4d0c..ad0c777 100644
--- a/src/components/trip-planner/TripPlanModal.svelte
+++ b/src/components/trip-planner/TripPlanModal.svelte
@@ -4,6 +4,7 @@
 	import ItineraryDetails from './ItineraryDetails.svelte';
 	import ItineraryTab from './ItineraryTab.svelte';
 	import { onDestroy, onMount } from 'svelte';
+	import { t } from 'svelte-i18n';
 
 	export let mapProvider;
 	export let itineraries = [];
@@ -62,7 +63,7 @@
 	});
 </script>
 
-<ModalPane on:close title="Trip Itineraries">
+<ModalPane on:close title={$t('trip-planner.trip_itineraries')}>
 	{#if loading}
 		<LoadingSpinner />
 	{/if}
@@ -82,7 +83,7 @@
 		</div>
 	{:else}
 		<div class="flex h-full items-center justify-center text-gray-400 dark:text-gray-500">
-			No itineraries found
+			{$t('trip-planner.no_itineraries_found')}
 		</div>
 	{/if}
 </ModalPane>