feat: add Google Maps integration with description and display status in settings

frontend/src/lib/assets/google_maps.svg

@@ -0,0 +1 @@
+<svg height="2500" viewBox="14.32 4.87961494 37.85626587 52.79038506" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m37.34 7.82c-1.68-.53-3.48-.82-5.34-.82-5.43 0-10.29 2.45-13.54 6.31l8.35 7.02z" fill="#1a73e8"/><path d="m18.46 13.31a17.615 17.615 0 0 0 -4.14 11.36c0 3.32.66 6.02 1.75 8.43l10.74-12.77z" fill="#ea4335"/><path d="m32 17.92a6.764 6.764 0 0 1 5.16 11.13l10.52-12.51a17.684 17.684 0 0 0 -10.35-8.71l-10.51 12.51a6.74 6.74 0 0 1 5.18-2.42" fill="#4285f4"/><path d="m32 31.44c-3.73 0-6.76-3.03-6.76-6.76a6.7 6.7 0 0 1 1.58-4.34l-10.75 12.77c1.84 4.07 4.89 7.34 8.03 11.46l13.06-15.52a6.752 6.752 0 0 1 -5.16 2.39" fill="#fbbc04"/><path d="m36.9 48.8c5.9-9.22 12.77-13.41 12.77-24.13 0-2.94-.72-5.71-1.99-8.15l-23.57 28.05c1 1.31 2.01 2.7 2.99 4.24 3.58 5.54 2.59 8.86 4.9 8.86s1.32-3.33 4.9-8.87" fill="#34a853"/></svg>

frontend/src/locales/en.json

@@ -704,6 +704,9 @@
 		"copy_locally_desc": "Copy images to the server for offline access. Uses more disk space.",
 		"error_saving_image": "Error saving image"
 	},
+	"google_maps": {
+		"google_maps_integration_desc": "Connect your Google Maps account to get high-quality location search results and recommendations."
+	},
 	"recomendations": {
 		"address": "Address",
 		"phone": "Phone",

frontend/src/routes/settings/+page.server.ts

@@ -70,6 +70,17 @@ export const load: PageServerLoad = async (event) => {
 	});
 	let socialProviders = await socialProvidersFetch.json();
 
+	let integrationsFetch = await fetch(`${endpoint}/api/integrations/`, {
+		headers: {
+			Cookie: `sessionid=${sessionId}`
+		}
+	});
+	if (!integrationsFetch.ok) {
+		return redirect(302, '/');
+	}
+	let integrations = await integrationsFetch.json();
+	let googleMapsEnabled = integrations.google_maps as boolean;
+
 	let publicUrlFetch = await fetch(`${endpoint}/public-url/`);
 	let publicUrl = '';
 	if (!publicUrlFetch.ok) {
@@ -86,7 +97,8 @@ export const load: PageServerLoad = async (event) => {
 			authenticators,
 			immichIntegration,
 			publicUrl,
-			socialProviders
+			socialProviders,
+			googleMapsEnabled
 		}
 	};
 };

frontend/src/routes/settings/+page.svelte

@@ -9,6 +9,7 @@
 	import TotpModal from '$lib/components/TOTPModal.svelte';
 	import { appTitle, appVersion, copyrightYear } from '$lib/config.js';
 	import ImmichLogo from '$lib/assets/immich.svg';
+	import GoogleMapsLogo from '$lib/assets/google_maps.svg';
 
 	export let data;
 	console.log(data);
@@ -23,6 +24,7 @@
 	let new_email: string = '';
 	let public_url: string = data.props.publicUrl;
 	let immichIntegration = data.props.immichIntegration;
+	let googleMapsEnabled = data.props.googleMapsEnabled;
 	let activeSection: string = 'profile';
 
 	let newImmichIntegration: ImmichIntegration = {
@@ -762,11 +764,11 @@
 							</div>
 
 							<!-- Immich Integration -->
-							<div class="p-6 bg-base-200 rounded-xl">
+							<div class="p-6 bg-base-200 rounded-xl mb-4">
 								<div class="flex items-center gap-4 mb-4">
 									<img src={ImmichLogo} alt="Immich" class="w-8 h-8" />
 									<div>
-										<h3 class="text-xl font-bold">{$t('immich.immich_integration')}</h3>
+										<h3 class="text-xl font-bold">Immich</h3>
 										<p class="text-sm text-base-content/70">
 											{$t('immich.immich_integration_desc')}
 										</p>
@@ -873,6 +875,34 @@
 									</p>
 								</div>
 							</div>
+
+							<!-- Google maps integration - displayt only if its connected -->
+							<div class="p-6 bg-base-200 rounded-xl">
+								<div class="flex items-center gap-4 mb-4">
+									<img src={GoogleMapsLogo} alt="Google Maps" class="w-8 h-8" />
+									<div>
+										<h3 class="text-xl font-bold">Google Maps</h3>
+										<p class="text-sm text-base-content/70">
+											{$t('google_maps.google_maps_integration_desc')}
+										</p>
+									</div>
+									{#if googleMapsEnabled}
+										<div class="badge badge-success ml-auto">{$t('settings.connected')}</div>
+									{:else}
+										<div class="badge badge-error ml-auto">{$t('settings.disconnected')}</div>
+									{/if}
+								</div>
+								<div class="mt-4 p-4 bg-info/10 rounded-lg">
+									<p class="text-sm">
+										📖 {$t('immich.need_help')}
+										<a
+											class="link link-primary"
+											href="https://adventurelog.app/docs/configuration/google_maps_integration.html"
+											target="_blank">{$t('navbar.documentation')}</a
+										>
+									</p>
+								</div>
+							</div>
 						</div>
 					{/if}