nearby

src/lib/components/location/location-search.svelte

@@ -13,6 +13,8 @@
 	import { Input } from '$lib/components/ui/input';
 	import * as Popover from '$lib/components/ui/popover';
 
+	import * as m from '$lib/paraglide/messages';
+
 	export let label: string = 'Search location...';
 	export let placeholder: string = 'Enter city name...';
 
@@ -161,8 +163,8 @@
 				? 'text-amber-500'
 				: 'text-muted-foreground/50'}"
 			onclick={() => toggleFavorite(location)}
-			aria-label={fav ? 'Remove from favorites' : 'Add to favorites'}
-			title={fav ? 'Remove from favorites' : 'Add to favorites'}
+			aria-label={fav ? m.search_favorite_remove() : m.search_favorite_add()}
+			title={fav ? m.search_favorite_remove() : m.search_favorite_add()}
 		>
 			<svg
 				class="h-4 w-4"
@@ -182,8 +184,8 @@
 			<button
 				class="mr-1 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/50 hover:bg-background hover:text-destructive"
 				onclick={() => removeRecent(location)}
-				aria-label="Remove {location.name} from recent locations"
-				title="Remove from recent"
+				aria-label={m.search_remove_recent({ location: location.name })}
+				title={m.search_remove_recent_short()}
 			>
 				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 					<path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
@@ -231,7 +233,7 @@
 							class="h-9"
 							autocomplete="off"
 							spellcheck="false"
-							aria-label="Search Location"
+							aria-label={m.search_aria()}
 							bind:value={searchQuery}
 							bind:ref={searchInputEl}
 						/>
@@ -240,7 +242,7 @@
 						variant="outline"
 						size="default"
 						class="h-9 px-2.5"
-						title="Use GPS Location"
+						title={m.search_gps()}
 						onclick={() => (searchQuery = 'GPS')}
 					>
 						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -266,7 +268,7 @@
 					<div class="flex h-20 items-center justify-center">
 						<div class="flex items-center space-x-2">
 							<div class="h-4 w-4 animate-spin rounded-full border-b-2 border-primary"></div>
-							<span class="text-sm text-muted-foreground">Searching...</span>
+							<span class="text-sm text-muted-foreground">{m.search_searching()}</span>
 						</div>
 					</div>
 				{:then results}
@@ -276,7 +278,7 @@
 								<div
 									class="mb-1 px-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
 								>
-									Favorites
+									{m.search_favorites()}
 								</div>
 								<div class="space-y-0.5">
 									{#each $storedFavoriteLocations as loc (locationKey(loc))}
@@ -290,7 +292,7 @@
 										? 'mt-3'
 										: ''}"
 								>
-									Recent
+									{m.search_recent()}
 								</div>
 								<div class="space-y-0.5">
 									{#each recentToShow as loc (locationKey(loc))}
@@ -316,7 +318,7 @@
 									/>
 								</svg>
 								<span class="text-xs">
-									Start typing to search or use GPS to detect your position
+									{m.search_hint()}
 								</span>
 							</div>
 						{/if}
@@ -336,7 +338,7 @@
 						</Alert.Root>
 					{:else}
 						<Alert.Root variant="destructive">
-							<Alert.Description>No locations found</Alert.Description>
+							<Alert.Description>{m.search_no_results()}</Alert.Description>
 						</Alert.Root>
 					{/if}
 				{:catch error}