From b12a8e2caafddd0a1ff2316e2da678e7ed1cafba Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Fri, 22 May 2026 09:02:54 +0200
Subject: [PATCH] PWA: iOS Installations-Banner + Safe-Area-Fixes

---
 app/src/app.html                    |  2 +-
 app/src/routes/(app)/+layout.svelte | 62 +++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/app/src/app.html b/app/src/app.html
index 242c835..7842f62 100644
--- a/app/src/app.html
+++ b/app/src/app.html
@@ -7,7 +7,7 @@
 		<meta name="theme-color" content="#0F172A" />
 		<meta name="mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />
-		<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
 		%sveltekit.head%
diff --git a/app/src/routes/(app)/+layout.svelte b/app/src/routes/(app)/+layout.svelte
index 06303db..d6eec7c 100644
--- a/app/src/routes/(app)/+layout.svelte
+++ b/app/src/routes/(app)/+layout.svelte
@@ -8,10 +8,19 @@
 
 	let { children } = $props();
 
+	let zeigInstallBanner = $state(false);
+
 	onMount(() => {
 		if (!$user) { goto('/login'); return; }
 		if (!$user.verein_id) { goto('/onboarding'); return; }
 		registerPush();
+
+		// iOS Safari: Banner anzeigen wenn App noch nicht installiert
+		const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent);
+		const isStandalone = window.matchMedia('(display-mode: standalone)').matches
+			|| (navigator as any).standalone === true;
+		const dismissed = sessionStorage.getItem('install-banner-dismissed');
+		if (isIos && !isStandalone && !dismissed) zeigInstallBanner = true;
 	});
 
 	async function registerPush() {
@@ -88,6 +97,16 @@
 	</nav>
 </div>
 
+{#if zeigInstallBanner}
+	<div class="install-banner">
+		<div class="install-text">
+			<strong>Zum Homescreen hinzufügen</strong>
+			<span>Tippe auf <strong>Teilen</strong> → <strong>Zum Home-Bildschirm</strong> für die Vollbild-App</span>
+		</div>
+		<button class="install-close" onclick={() => { zeigInstallBanner = false; sessionStorage.setItem('install-banner-dismissed', '1'); }}>✕</button>
+	</div>
+{/if}
+
 <style>
 	.shell {
 		display: flex;
@@ -95,6 +114,11 @@
 		min-height: 100dvh;
 	}
 
+	/* iOS PWA: Statusleiste oben nicht überlagern */
+	@supports (padding-top: env(safe-area-inset-top)) {
+		header { padding-top: calc(0.75rem + env(safe-area-inset-top)); }
+	}
+
 	header {
 		position: sticky;
 		top: 0;
@@ -170,4 +194,42 @@
 		font-size: 0.65rem;
 		font-weight: 500;
 	}
+
+	/* iOS Installations-Banner */
+	.install-banner {
+		position: fixed;
+		bottom: calc(60px + env(safe-area-inset-bottom) + 0.5rem);
+		left: 1rem;
+		right: 1rem;
+		background: var(--c-dark);
+		color: #fff;
+		border-radius: 12px;
+		padding: 0.85rem 1rem;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		z-index: 50;
+		box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+		animation: slide-up 0.25s ease;
+	}
+	@keyframes slide-up {
+		from { transform: translateY(1rem); opacity: 0; }
+		to   { transform: translateY(0);    opacity: 1; }
+	}
+	.install-text {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+		font-size: 0.82rem;
+		line-height: 1.4;
+	}
+	.install-close {
+		background: none;
+		border: none;
+		color: var(--c-text-hint);
+		font-size: 1rem;
+		padding: 0.25rem;
+		flex-shrink: 0;
+	}
 </style>