feat: update Strava integration settings and add Wanderer logo; enhance user experience with active section management

backend/server/integrations/views/strava_view.py

@@ -92,7 +92,7 @@ class StravaIntegrationView(viewsets.ViewSet):
             frontend_url = settings.FRONTEND_URL
             if not frontend_url.endswith('/'):
                 frontend_url += '/'
-            return redirect(f"{frontend_url}settings?strava_authorized=true")
+            return redirect(f"{frontend_url}settings?tab=integrations")
 
 
         except requests.RequestException as e:

frontend/src/lib/assets/wanderer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256c0 96.3 53.2 180.2 131.8 223.9 48.9-15.9 95.4-36.3 105.7-58.9 6.8-14.9-4.2-30-14-43.5-6.5-8.9-12.5-17.1-12.5-24 0-30.3 76.1-41.7 87.9-43.3H239c-.3.1-.6.1-.9.1H99.9c-3.8 0-6.1-4.1-4.2-7.4l69-119.6c1.9-3.3 6.6-3.3 8.5 0l38.3 66.4 54.7-94.7c2.3-4 8.1-4 10.4 0l49.8 86.3 21.8-35.3c1.7-2.7 5.8-2.7 7.5 0l60.7 98.2c1.7 2.7-.4 6-3.7 6H330c-11 1.6-81.2 12.9-77.5 43.3 1.3 11.1 10.2 19.9 20.3 30 10.2 10.1 21.6 21.5 27.7 37.5 14.8 38.7-11.2 79.6-18.3 89.7C411.3 497.6 512 388.5 512 256 512 114.6 397.4 0 256 0M95.5 412.4l5.6-4.6H100c-3.6 0-5.4-4.4-2.8-6.9l5.3-5c-2.4-.9-3.5-4.1-1.7-6.3l16.1-19.2c1.6-1.9 4.5-1.9 6.1 0l16 19.2c1.9 2.2.8 5.4-1.7 6.4l5.2 4.9c2.6 2.5.9 6.9-2.8 6.9h-.9l5.6 4.6c2.9 2.4 1.2 7.1-2.5 7.1h-16.1c.3.5.5 1.1.5 1.7v4.6c0 1.7-1.3 3-3 3h-6.7c-1.7 0-3-1.3-3-3v-4.6c0-.6.2-1.2.5-1.7H98c-3.8 0-5.4-4.7-2.5-7.1m54.7-273.1H96c0-12.6 11-22.9 25-23.8 2.8-5.7 7.7-9.5 13.3-9.5s10.4 3.8 13.3 9.4h.8c8.6 0 15.6 10.7 15.6 23.9zM272 96h-44c0-6 4-11.3 10.1-14.3C239 71.2 246.2 63 255 63c4.9 0 9.2 2.5 12.3 6.6 2.6-1.7 5.6-2.6 8.7-2.6 11.6 0 21 13 21 29zm115 63h-44c0-8.4 5.2-15.7 12.8-19 3.5-7.6 11.7-13 21.2-13 9.2 0 17.2 4.9 20.8 12.1 8 .9 14.2 9.5 14.2 19.9zm-11.1 236.5h-16.1c.3.5.5 1.1.5 1.7v4.6c0 1.7-1.3 3-3 3h-6.7c-1.7 0-3-1.3-3-3v-4.6c0-.6.2-1.2.5-1.7H332c-3.8 0-5.4-4.7-2.5-7.1l5.6-4.6H334c-3.6 0-5.4-4.4-2.8-6.9l5.3-5c-2.4-.9-3.5-4.1-1.7-6.3l16.1-19.2c1.6-1.9 4.5-1.9 6.1 0l16 19.2c1.9 2.2.8 5.4-1.7 6.4l5.2 4.9c2.6 2.5.9 6.9-2.8 6.9h-.9l5.6 4.6c2.9 2.4 1.2 7.1-2.5 7.1" style="fill-rule:evenodd;clip-rule:evenodd"/></svg>

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

@@ -11,6 +11,7 @@
 	import ImmichLogo from '$lib/assets/immich.svg';
 	import GoogleMapsLogo from '$lib/assets/google_maps.svg';
 	import StravaLogo from '$lib/assets/strava.svg';
+	import WandererLogo from '$lib/assets/wanderer.svg';
 
 	export let data;
 	console.log(data);
@@ -28,6 +29,23 @@
 	let stravaGlobalEnabled = data.props.stravaGlobalEnabled;
 	let stravaUserEnabled = data.props.stravaUserEnabled;
 	let activeSection: string = 'profile';
+
+	// Initialize activeSection from URL on mount
+	onMount(() => {
+		if (browser && $page.url.searchParams.has('tab')) {
+			activeSection = $page.url.searchParams.get('tab') || 'profile';
+		}
+	});
+
+	function setActiveSection(sectionId: string) {
+		activeSection = sectionId;
+		if (browser) {
+			const url = new URL($page.url);
+			url.searchParams.set('tab', sectionId);
+			history.replaceState({}, '', url);
+		}
+	}
+
 	let acknowledgeRestoreOverride: boolean = false;
 
 	let newImmichIntegration: ImmichIntegration = {
@@ -343,7 +361,7 @@
 									section.id
 										? 'bg-primary text-primary-content shadow-lg'
 										: 'hover:bg-base-200'}"
-									on:click={() => (activeSection = section.id)}
+									on:click={() => setActiveSection(section.id)}
 								>
 									<span class="text-xl">{section.icon}</span>
 									<span class="font-medium">{section.label()}</span>
@@ -965,7 +983,7 @@
 							</div>
 
 							<!-- Strava Integration Section -->
-							<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={StravaLogo} alt="Strava" class="w-8 h-8 rounded-md" />
 									<div>
@@ -1026,6 +1044,71 @@
 									</div>
 								{/if}
 							</div>
+
+							<div class="p-6 bg-base-200 rounded-xl">
+								<div class="flex items-center gap-4 mb-4">
+									<div
+										class="w-8 h-8 rounded-md bg-base-content"
+										style="mask: url({WandererLogo}) no-repeat center; mask-size: contain; -webkit-mask: url({WandererLogo}) no-repeat center; -webkit-mask-size: contain;"
+									></div>
+									<div>
+										<h3 class="text-xl font-bold">Wanderer</h3>
+										<p class="text-sm text-base-content/70">
+											{$t('strava.strava_integration_desc')}
+										</p>
+									</div>
+									{#if stravaGlobalEnabled && stravaUserEnabled}
+										<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>
+
+								<!-- Content based on integration status -->
+								{#if !stravaGlobalEnabled}
+									<!-- Strava not enabled globally -->
+									<div class="text-center">
+										<p class="text-base-content/70 mb-4">
+											{$t('strava.not_enabled') ||
+												'Strava integration is not enabled on this instance.'}
+										</p>
+									</div>
+								{:else if !stravaUserEnabled && stravaGlobalEnabled}
+									<!-- Globally enabled but user not connected -->
+									<div class="text-center">
+										<button class="btn btn-primary" on:click={stravaAuthorizeRedirect}>
+											🔗 {$t('strava.connect_account')}
+										</button>
+									</div>
+								{:else if stravaGlobalEnabled && stravaUserEnabled}
+									<!-- User connected - show management options -->
+									<div class="text-center">
+										<button class="btn btn-error" on:click={stravaDisconnect}>
+											❌ {$t('strava.disconnect')}
+										</button>
+									</div>
+								{/if}
+
+								<!-- Help documentation link -->
+								{#if user.is_staff || !stravaGlobalEnabled}
+									<div class="mt-4 p-4 bg-info/10 rounded-lg">
+										{#if user.is_staff}
+											<p class="text-sm">
+												📖 {$t('immich.need_help')}
+												<a
+													class="link link-primary"
+													href="https://adventurelog.app/docs/configuration/strava_integration.html"
+													target="_blank">{$t('navbar.documentation')}</a
+												>
+											</p>
+										{:else if !stravaGlobalEnabled}
+											<p class="text-sm">
+												ℹ️ {$t('google_maps.google_maps_integration_desc_no_staff')}
+											</p>
+										{/if}
+									</div>
+								{/if}
+							</div>
 						</div>
 					{/if}