feat:find and watch location, use shadcn sonner toast for errors.

- added tailwindcss with shadcn-svelte sonner toasts
- added a location store and a geolation util to find, watch, use and
store locations and their updates
- added a LocationButton to navigate to the current location and handle
errors.
- updated the Map to use LocationButton and go to current location.

src/routes/+layout.svelte

@@ -3,9 +3,9 @@
 	import favicon from '$lib/assets/favicon.svg';
 	import { Header } from '$lib';
 	import { page } from '$app/state';
+	import { Toaster } from '$lib/components/sonner/index.js';
 
 	let { children, data } = $props();
-
 	let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
 	let showHeader = $derived(!isLoginRoute && data?.user);
 </script>
@@ -14,6 +14,8 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<Toaster />
+
 {#if showHeader && data.user}
 	<Header user={data.user} />
 {/if}

src/routes/+page.svelte

@@ -4,24 +4,49 @@
 
 <div class="home-container">
 	<main class="main-content">
-		<Map />
+		<div class="map-section">
+			<Map showLocationButton={true} autoCenter={true} />
+		</div>
 	</main>
 </div>
 
 <style>
 	.home-container {
 		background-color: #f8f8f8;
+		min-height: 100vh;
 	}
 
 	.main-content {
 		padding: 24px 20px;
 		max-width: 1200px;
 		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.map-section {
+		background: white;
+		border-radius: 12px;
+		overflow: hidden;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	}
+
+	.map-section :global(.map-container) {
+		height: 500px;
+		border-radius: 0;
+	}
+
+	@media (max-width: 768px) {
+		.main-content {
+			padding: 16px;
+			gap: 16px;
+		}
 	}
 
 	@media (max-width: 480px) {
 		.main-content {
-			padding: 20px 16px;
+			padding: 12px;
 		}
 	}
 </style>