Session 2026-04-19: Navigation, Kompass, Übungsfortschritt

Routen-Navigation:
- POI-Marker: farbige Kreise mit Phosphor-Icons (wie Hauptkarte)
- Screensaver: Navi-Pfeil dreht sich via DeviceOrientationEvent (iOS+Android)
- Pfeil-Dämpfung: EMA α=0.12 mit Wrap-Around
- GPS-Distanz-Bug: Fortschritt nur wenn <500m zur Route
- fitBounds: User-Position nur wenn <20km von Route
- Screensaver: "zur Route" vs "verbleibend" kontextabhängig
- Richtungspfeile entlang Route (blau, max 7 Stück)
- Umkehren ins Route-Detail verschoben, Detail-Map rebuildet sich
- rk-header z-index:10 (Leaflet-Tiles liefen drüber)
- 2-Sek. Screensaver-Entsperrung

km-Tracking:
- route_walks Tabelle
- POST /api/routes/{id}/walked (≥50%)
- total_km = erstellte Routes + gelaufene route_walks
- Toast bei neuem Badge

Übungsfortschritt:
- exercise_progress + training_plan_progress Tabellen
- GET/POST /api/training/progress, /plan-progress, /suggestions
- uebungen.js: API-first + localStorage-Fallback + Auto-Migration
- Empfehlungs-Banner (regelbasiert)
- Toast bei "sitzt"

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '237'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '261'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 
@@ -268,6 +268,12 @@ const App = (() => {
         return;
       }
 
+      // Header-User-Button → Settings
+      if (e.target.closest('#header-user-btn')) {
+        navigate('settings');
+        return;
+      }
+
       // Sidebar-Logo → Willkommensseite (oder Hund-Profil wenn Hund aktiv)
       // Hinweis: dog-sw-title hat eigenen Listener; dieser Fallback greift nur
       // wenn kein Hund aktiv ist (statischer "Ban Yaro"-Text ohne dog-sw-title).
@@ -410,6 +416,8 @@ const App = (() => {
 
   async function _onLoggedIn() {
     document.getElementById('sidebar-username').textContent = state.user.name;
+    document.getElementById('header-login-btn')?.remove();
+    _updateHeaderUserBtn(true);
     // Admin/Moderator-Item einblenden
     const adminItem = document.getElementById('sidebar-admin');
     if (adminItem) {
@@ -486,6 +494,8 @@ const App = (() => {
 
     _renderDogSwitcher();
 
+    _updateHeaderUserBtn(false);
+
     // Wenn aktuelle Seite geschützt ist → zu freier Seite wechseln
     if (pages[state.page]?.requiresAuth) {
       navigate('map', false);
@@ -495,6 +505,30 @@ const App = (() => {
     }
   }
 
+  function _updateHeaderUserBtn(loggedIn) {
+    const btn  = document.getElementById('header-user-btn');
+    const icon = document.getElementById('header-user-icon');
+    if (!btn) return;
+    if (loggedIn) {
+      const av = state.user?.avatar_url;
+      if (av) {
+        btn.innerHTML = `<img src="${av}" style="width:100%;height:100%;object-fit:cover;border-radius:50%">`;
+      } else {
+        btn.innerHTML = `<svg class="ph-icon" aria-hidden="true" style="width:18px;height:18px;color:var(--c-primary)">
+          <use href="/icons/phosphor.svg#user"></use></svg>`;
+      }
+      btn.style.borderColor = 'var(--c-primary)';
+      btn.title = 'Mein Profil';
+    } else {
+      btn.innerHTML = `<svg class="ph-icon" aria-hidden="true" style="width:18px;height:18px;color:var(--c-text-muted)">
+        <use href="/icons/phosphor.svg#user"></use></svg>
+        <div style="position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;
+                    background:var(--c-danger);border:2px solid var(--c-surface)"></div>`;
+      btn.style.borderColor = 'var(--c-border)';
+      btn.title = 'Anmelden';
+    }
+  }
+
   async function _loadDogs() {
     try {
       state.dogs = await API.dogs.list();