From 4a59b5ca0bd0e2a370eade81ced550b9280becd2 Mon Sep 17 00:00:00 2001
From: Pepe Ziberi <pepe@lageplan.ch>
Date: Thu, 23 Jul 2026 21:00:43 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20Vollbild/Pr=C3=A4sentation=20im=20H?=
 =?UTF-8?q?eader=20+=20Passwortfeld=20mit=20Auge=20&=20gr=C3=B6sseren=20Pu?=
 =?UTF-8?q?nkten=20(v1.8.7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Topbar: Schnellzugriff-Buttons Vollbild und Präsentationsmodus direkt neben Speichern
  (Desktop; mobil weiterhin im ⋮-Menü)
- Login: Passwortfeld mit Anzeigen/Verbergen-Umschalter (Auge) und grösseren, gespreizten
  Punkten (text-xl tracking) + sanfter Übergang

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 package.json                     |  2 +-
 src/app/login/page.tsx           | 33 ++++++++++++++++++++++----------
 src/components/layout/topbar.tsx | 22 +++++++++++++++++++++
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 8b1cfc5..e59ffc2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
   "private": true,
   "scripts": {
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index f8062a4..c1b8e50 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { useToast } from '@/components/ui/use-toast'
-import { ArrowLeft, Loader2 } from 'lucide-react'
+import { ArrowLeft, Loader2, Eye, EyeOff } from 'lucide-react'
 import { LogoRound } from '@/components/ui/logo'
 
 export default function LoginPage() {
@@ -23,6 +23,7 @@ function LoginForm() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [rememberMe, setRememberMe] = useState(true)
+  const [showPassword, setShowPassword] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [resendLoading, setResendLoading] = useState(false)
   const [resendSuccess, setResendSuccess] = useState(false)
@@ -234,15 +235,27 @@ function LoginForm() {
                   Passwort vergessen?
                 </Link>
               </div>
-              <Input
-                id="password"
-                type="password"
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                disabled={isLoading}
-              />
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  disabled={isLoading}
+                  className={`pr-11 transition-all duration-200 ${showPassword ? '' : 'text-xl tracking-[0.25em]'}`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(v => !v)}
+                  tabIndex={-1}
+                  aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-md text-gray-400 hover:text-gray-200 transition-colors"
+                >
+                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
             </div>
 
             <label className="flex items-center gap-2 cursor-pointer select-none">
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 5ef938c..f2e875e 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -248,6 +248,28 @@ export function Topbar({
           {isSaving ? <Loader2 className="w-5 h-5 animate-spin" /> : <Save className="w-5 h-5" />}
         </Button>
 
+        {/* Schnellzugriff: Vollbild + Präsentationsmodus (Desktop; mobil im ⋮-Menü) */}
+        <Button
+          variant="outline"
+          size="icon"
+          className="hidden md:flex h-10 w-10 shrink-0"
+          onClick={onToggleFullscreen}
+          title={isFullscreen ? 'Vollbild verlassen' : 'Vollbild'}
+        >
+          {isFullscreen ? <Minimize className="w-5 h-5" /> : <Maximize className="w-5 h-5" />}
+        </Button>
+        {onTogglePresentationLock && (
+          <Button
+            variant="outline"
+            size="icon"
+            className={`hidden md:flex h-10 w-10 shrink-0 ${presentationLocked ? 'border-amber-500 text-amber-600 dark:text-amber-400' : ''}`}
+            onClick={onTogglePresentationLock}
+            title={presentationLocked ? 'Präsentation: gesperrt (zum Entsperren tippen)' : 'Präsentationsmodus'}
+          >
+            {presentationLocked ? <Lock className="w-5 h-5" /> : <Unlock className="w-5 h-5" />}
+          </Button>
+        )}
+
         {/* Freigeben — nur sichtbar, solange ich den Bearbeitungs-Lock halte.
             Speichert und gibt die Karte für andere frei. Grün = ich bin am Zeichnen. */}
         {isEditingByMe && onStopEditing && (