Replace search bar with collapsible bubble + add backend geocoding API

UI Changes (route_dog inspired):
- Replace always-visible search bar with collapsible bubble
- Circular button (closed state) with search icon, matches MapLibre controls
- Expands to search input + results on click
- Collapses after selection or clicking outside
- Cleaner, less cluttered map interface

Backend API (route_dog pattern):
- Create Cloudflare Worker API for geocoding (/v1/geocode)
- Use Photon API on backend (international coverage, unlike US Census)
- Frontend calls our backend instead of Photon directly
- Enables caching and rate limiting control

Bug Fixes:
- Fix repeated Photon API calls by wrapping search function in useCallback
- Add TypeScript definitions for Vite environment variables

Author: dbirks

api/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "farese-api",
+  "version": "1.0.0",
+  "description": "Farese geocoding API",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "deploy:dev": "wrangler deploy --env dev",
+    "deploy:prod": "wrangler deploy --env production"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250110.0",
+    "wrangler": "^4.59.2"
+  }
+}

api/src/index.ts

@@ -0,0 +1,139 @@
+/**
+ * Farese Geocoding API - Cloudflare Worker
+ *
+ * Geocoding service using Photon API for international coverage.
+ */
+
+export interface Env {
+	ENVIRONMENT: string;
+}
+
+interface GeocodingResult {
+	name: string;
+	coordinates: [number, number];
+	city?: string;
+	state?: string;
+	country?: string;
+}
+
+export default {
+	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+		const url = new URL(request.url);
+		const { pathname, method } = { pathname: url.pathname, method: request.method };
+
+		// CORS headers
+		const corsHeaders = {
+			'Access-Control-Allow-Origin': '*',
+			'Access-Control-Allow-Methods': 'GET, OPTIONS',
+			'Access-Control-Allow-Headers': 'Content-Type',
+			'Content-Type': 'application/json',
+		};
+
+		// Handle CORS preflight
+		if (method === 'OPTIONS') {
+			return new Response(null, { status: 204, headers: corsHeaders });
+		}
+
+		try {
+			// Health check endpoints
+			if (pathname === '/' || pathname === '/health') {
+				return jsonResponse({
+					status: 'healthy',
+					message: 'Farese Geocoding API is running'
+				}, corsHeaders);
+			}
+
+			// GET /v1/geocode?q=Brisbane - Geocode place name
+			if (pathname === '/v1/geocode' && method === 'GET') {
+				return await handleGeocode(request, corsHeaders);
+			}
+
+			// Not found
+			return jsonResponse({ error: 'Not found' }, corsHeaders, 404);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Unknown error';
+			return jsonResponse({ error: message }, corsHeaders, 500);
+		}
+	},
+};
+
+/**
+ * Handle GET /v1/geocode - Geocode place name using Photon API
+ */
+async function handleGeocode(
+	request: Request,
+	corsHeaders: Record<string, string>
+): Promise<Response> {
+	const url = new URL(request.url);
+	const query = url.searchParams.get('q');
+	const limit = parseInt(url.searchParams.get('limit') || '5', 10);
+
+	if (!query) {
+		return jsonResponse({ error: 'Query parameter "q" is required' }, corsHeaders, 400);
+	}
+
+	if (query.length < 3) {
+		return jsonResponse({ error: 'Query must be at least 3 characters' }, corsHeaders, 400);
+	}
+
+	try {
+		const results = await geocodeWithPhoton(query, limit);
+		return jsonResponse({ results }, corsHeaders);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : 'Geocoding failed';
+		return jsonResponse({ error: message }, corsHeaders, 500);
+	}
+}
+
+/**
+ * Geocode using Photon API (OpenStreetMap-based, international coverage)
+ */
+async function geocodeWithPhoton(query: string, limit: number): Promise<GeocodingResult[]> {
+	const url = `https://photon.komoot.io/api/?q=${encodeURIComponent(query)}&limit=${limit}`;
+
+	const response = await fetch(url, {
+		headers: {
+			'User-Agent': 'Farese.com Church Directory'
+		}
+	});
+
+	if (!response.ok) {
+		throw new Error(`Photon API error: ${response.status}`);
+	}
+
+	const data = await response.json() as {
+		features?: Array<{
+			geometry: {
+				coordinates: [number, number];
+			};
+			properties: {
+				name?: string;
+				city?: string;
+				state?: string;
+				country?: string;
+			};
+		}>;
+	};
+
+	if (!data.features || data.features.length === 0) {
+		return [];
+	}
+
+	return data.features.map(feature => ({
+		name: feature.properties.name || 'Unknown',
+		coordinates: feature.geometry.coordinates,
+		city: feature.properties.city,
+		state: feature.properties.state,
+		country: feature.properties.country,
+	}));
+}
+
+/**
+ * Helper to create JSON responses
+ */
+function jsonResponse(data: any, headers: Record<string, string>, status: number = 200): Response {
+	return new Response(JSON.stringify(data), {
+		status,
+		headers,
+	});
+}

api/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021"],
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "types": ["@cloudflare/workers-types"],
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}

api/wrangler.toml

@@ -0,0 +1,11 @@
+name = "farese-api"
+main = "src/index.ts"
+compatibility_date = "2024-01-01"
+
+[env.dev]
+name = "farese-api-dev"
+route = { pattern = "api-dev.farese.com/*", zone_name = "farese.com" }
+
+[env.production]
+name = "farese-api"
+route = { pattern = "api.farese.com/*", zone_name = "farese.com" }