From 8f5517a4090f24d656bf203ac82faef50b8a7c40 Mon Sep 17 00:00:00 2001
From: Kerim Atilgan <kerim.atilgan@media-insel.de>
Date: Sun, 27 Sep 2026 12:21:35 +0200
Subject: [PATCH] Portal-Kopfleiste einbinden

Laedt die zentrale Handy-Insel-Kopfleiste (topbar.js, data-app="timer")
und blendet sie beim Drucken aus. In den Proxy-Beispielen ist dokumentiert,
welche Quellen eine spaetere Content-Security-Policy erlauben muss.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 deploy/Caddyfile.example  |  7 +++++++
 deploy/nginx.conf.example |  7 +++++++
 frontend/index.html       | 11 +++++++++++
 3 files changed, 25 insertions(+)

diff --git a/deploy/Caddyfile.example b/deploy/Caddyfile.example
index 766ca92..219c1eb 100644
--- a/deploy/Caddyfile.example
+++ b/deploy/Caddyfile.example
@@ -9,6 +9,13 @@ timer.firma.example {
 		X-Frame-Options "SAMEORIGIN"
 		X-Content-Type-Options "nosniff"
 		Referrer-Policy "no-referrer"
+		# Die Seite laedt die Portal-Kopfleiste von portal.handy-insel.de.
+		# Wer hier eine Content-Security-Policy setzt, muss diese Quellen erlauben
+		# (sonst blockiert der Browser die Leiste), jeweils zusaetzlich zu den
+		# vorhandenen Quellen (die App nutzt Inline-Styles und onclick-Handler):
+		#   script-src  ... https://portal.handy-insel.de
+		#   connect-src ... https://portal.handy-insel.de
+		#   img-src     ... https://portal.handy-insel.de https://login.handy-insel.de
 	}
 
 	reverse_proxy 127.0.0.1:3003 {
diff --git a/deploy/nginx.conf.example b/deploy/nginx.conf.example
index ab5da89..54178ea 100644
--- a/deploy/nginx.conf.example
+++ b/deploy/nginx.conf.example
@@ -22,6 +22,13 @@ server {
     add_header X-Frame-Options "SAMEORIGIN" always;
     add_header X-Content-Type-Options "nosniff" always;
     add_header Referrer-Policy "no-referrer" always;
+    # Die Seite laedt die Portal-Kopfleiste von portal.handy-insel.de.
+    # Wer hier eine Content-Security-Policy setzt, muss diese Quellen erlauben
+    # (sonst blockiert der Browser die Leiste), jeweils zusaetzlich zu den
+    # vorhandenen Quellen (die App nutzt Inline-Styles und onclick-Handler):
+    #   script-src  ... https://portal.handy-insel.de
+    #   connect-src ... https://portal.handy-insel.de
+    #   img-src     ... https://portal.handy-insel.de https://login.handy-insel.de
 
     # CSV-Export darf auch bei vielen Einträgen dauern
     client_max_body_size 1m;
diff --git a/frontend/index.html b/frontend/index.html
index d48c3da..d6d96b2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Timer - Zeiterfassung</title>
     <link rel="icon" type="image/jpeg" href="/favicon.jpg">
+    <!-- Zentrale Handy-Insel-Kopfleiste (App-Umschalter + Benutzermenue).
+         Einzige externe Ressource der Seite; Details: portal.handy-insel.de -->
+    <script src="https://portal.handy-insel.de/topbar.js" data-app="timer" defer></script>
     <style>
         /* Bewusst KEIN Google-Fonts-Import: kein externer Abruf zur Laufzeit.
            Der System-Font-Stack sieht praktisch identisch aus (Segoe UI /
@@ -784,6 +787,14 @@
             .history-item-right { justify-content: center; }
             .filter-field, .filter-field input { width: 100%; }
         }
+
+        /* ---------- Portal-Kopfleiste ---------- */
+
+        /* Die Leiste steht im Fluss als erstes Kind von <body>; body hat nur
+           min-height: 100vh, dadurch entsteht kein Ueberlauf. Beim Drucken
+           soll sie nicht erscheinen. */
+        hi-topbar { flex-shrink: 0; }
+        @media print { hi-topbar { display: none !important; } }
     </style>
 </head>
 <body>