Feature: App-Einstellungen in DB (preferred_theme neu, notes_ki+gassi_stunde schon drin) — geräteübergreifend sync (SW by-v785)

backend/database.py

@@ -2075,6 +2075,10 @@ def _migrate(conn_factory):
         _seed_help_articles(conn)
         logger.info("Migration: Hilfe/FAQ-Tabelle bereit.")
 
+        if 'preferred_theme' not in [row[1] for row in conn.execute("PRAGMA table_info(users)").fetchall()]:
+            conn.execute("ALTER TABLE users ADD COLUMN preferred_theme TEXT DEFAULT 'system'")
+            logger.info("Migration: preferred_theme Spalte zu users hinzugefügt.")
+
         conn.executescript("""
             CREATE TABLE IF NOT EXISTS bday_ki_cache (
                 dog_id   INTEGER NOT NULL,

backend/main.py

@@ -327,7 +327,7 @@ MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 os.makedirs(MEDIA_DIR, exist_ok=True)
 app.mount("/media", StaticFiles(directory=MEDIA_DIR), name="media")
 
-APP_VER = "783"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "785"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():

backend/routes/auth.py

@@ -238,7 +238,9 @@ async def me(user=Depends(get_current_user)):
             """SELECT id, name, real_name, email, rolle, is_premium, email_verified,
                       bio, wohnort, erfahrung, social_link,
                       profil_sichtbarkeit, avatar_url, created_at,
-                      is_founder, is_partner, founder_number, is_founder_pending
+                      is_founder, is_partner, founder_number, is_founder_pending,
+                      notes_ki_enabled, gassi_stunde_push,
+                      preferred_theme
                FROM users WHERE id=?""",
             (user["id"],)
         ).fetchone()

backend/routes/profile.py

@@ -27,6 +27,7 @@ class ProfileUpdate(BaseModel):
     profil_sichtbarkeit:  Optional[str] = None
     notes_ki_enabled:     Optional[int] = None
     gassi_stunde_push:    Optional[int] = None
+    preferred_theme:      Optional[str] = None
 
 
 def _load_user(user_id: int) -> dict:
@@ -54,6 +55,8 @@ async def update_profile(data: ProfileUpdate, user=Depends(get_current_user)):
         raise HTTPException(400, f"erfahrung muss eines von {sorted(VALID_ERFAHRUNG)} sein.")
     if "profil_sichtbarkeit" in fields and fields["profil_sichtbarkeit"] not in VALID_SICHTBARKEIT:
         raise HTTPException(400, f"profil_sichtbarkeit muss eines von {sorted(VALID_SICHTBARKEIT)} sein.")
+    if "preferred_theme" in fields and fields["preferred_theme"] not in ("system", "light", "dark"):
+        raise HTTPException(400, "preferred_theme muss 'system', 'light' oder 'dark' sein.")
     if "bio" in fields and len(fields["bio"]) > 300:
         raise HTTPException(400, "bio darf maximal 300 Zeichen lang sein.")
     if "wohnort" in fields and len(fields["wohnort"]) > 60:

backend/static/index.html

@@ -575,10 +575,10 @@
 <div id="modal-container"></div>
 
 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=783"></script>
-<script src="/js/ui.js?v=783"></script>
-<script src="/js/app.js?v=783"></script>
-<script src="/js/worlds.js?v=783"></script>
+<script src="/js/api.js?v=785"></script>
+<script src="/js/ui.js?v=785"></script>
+<script src="/js/app.js?v=785"></script>
+<script src="/js/worlds.js?v=785"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '783'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '785'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.5.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen
@@ -529,6 +529,9 @@ const App = (() => {
       navigate('onboarding');
     }
 
+    // Theme aus DB-Profil übernehmen (überschreibt localStorage-Wert)
+    _applyUserTheme(state.user);
+
     // Drei Welten nach Login starten (falls noch nicht initialisiert)
     if (window.Worlds) window.Worlds.init(state);
 
@@ -607,6 +610,15 @@ const App = (() => {
     navigate('welcome', false);
   }
 
+  function _applyUserTheme(user) {
+    const theme = user?.preferred_theme;
+    if (!theme || theme === 'system') return; // System-Einstellung: nichts tun
+    localStorage.setItem('by_theme', theme);
+    const html = document.documentElement;
+    if (theme === 'dark')       html.setAttribute('data-theme', 'dark');
+    else if (theme === 'light') html.setAttribute('data-theme', 'light');
+  }
+
   function _showVerifyBanner() {
     const banner = document.getElementById('verify-banner');
     if (!banner) return;

backend/static/js/pages/settings.js

@@ -315,9 +315,9 @@ window.Page_settings = (() => {
                              font-size:var(--text-sm);
                              font-family:inherit;
                              cursor:pointer">
-                <option value="system" ${(localStorage.getItem('by_theme')||'system') === 'system' ? 'selected' : ''}>System</option>
-                <option value="light"  ${localStorage.getItem('by_theme') === 'light'  ? 'selected' : ''}>Hell</option>
-                <option value="dark"   ${localStorage.getItem('by_theme') === 'dark'   ? 'selected' : ''}>Dunkel</option>
+                <option value="system" ${(u.preferred_theme||localStorage.getItem('by_theme')||'system') === 'system' ? 'selected' : ''}>System</option>
+                <option value="light"  ${(u.preferred_theme||localStorage.getItem('by_theme')) === 'light'  ? 'selected' : ''}>Hell</option>
+                <option value="dark"   ${(u.preferred_theme||localStorage.getItem('by_theme')) === 'dark'   ? 'selected' : ''}>Dunkel</option>
               </select>
             </div>
 
@@ -849,22 +849,22 @@ window.Page_settings = (() => {
       }
     });
 
-    document.getElementById('select-theme')?.addEventListener('change', e => {
+    document.getElementById('select-theme')?.addEventListener('change', async e => {
       const val = e.target.value;
-      localStorage.setItem('by_theme', val);
+      localStorage.setItem('by_theme', val); // lokaler Cache für schnellen Start
       const html = document.documentElement;
-      if (val === 'dark') {
-        html.setAttribute('data-theme', 'dark');
-      } else if (val === 'light') {
-        html.setAttribute('data-theme', 'light');
-      } else {
-        html.removeAttribute('data-theme');
-      }
+      if (val === 'dark')       html.setAttribute('data-theme', 'dark');
+      else if (val === 'light') html.setAttribute('data-theme', 'light');
+      else                      html.removeAttribute('data-theme');
       UI.toast.info(
         val === 'dark'   ? 'Dark Mode aktiviert.' :
         val === 'light'  ? 'Hell-Modus aktiviert.' :
                            'Theme folgt der Systemeinstellung.'
       );
+      try {
+        await API.patch('/profile', { preferred_theme: val });
+        if (_appState?.user) _appState.user.preferred_theme = val;
+      } catch { /* ignorieren — localStorage-Fallback greift */ }
     });
 
     document.getElementById('toggle-pocket-mode')?.addEventListener('change', e => {

backend/static/js/worlds.js

@@ -917,23 +917,51 @@ window.Worlds = (() => {
     } catch { return dog.foto_url || null; }
   }
 
+  let _bgUrl = null; // aktuell gesetztes Hintergrundbild
+
+  function _applyBgOrientation() {
+    const ov    = document.getElementById('worlds-overlay');
+    const track = document.getElementById('worlds-track');
+    if (!ov || !track || !_bgUrl) return;
+    const portrait = window.matchMedia('(orientation: portrait)').matches;
+    if (portrait) {
+      // Panorama: Bild über alle drei Welten, scrollt mit dem Swipe
+      ov.style.backgroundImage    = '';
+      track.style.backgroundImage    = `url('${_bgUrl}')`;
+      track.style.backgroundSize     = 'cover';
+      track.style.backgroundPosition = 'center 40%';
+      track.style.backgroundRepeat   = 'no-repeat';
+    } else {
+      // Vollbild pro Welt (Landscape / Desktop)
+      track.style.backgroundImage    = '';
+      ov.style.backgroundImage    = `url('${_bgUrl}')`;
+      ov.style.backgroundSize     = 'cover';
+      ov.style.backgroundPosition = 'center 40%';
+      ov.style.backgroundRepeat   = 'no-repeat';
+    }
+  }
+
+  // Orientierungswechsel → Bild neu setzen
+  window.matchMedia('(orientation: portrait)').addEventListener('change', _applyBgOrientation);
+
   function _applyBgImage(url) {
-    const ov = document.getElementById('worlds-overlay');
-    if (!ov) return;
+    const ov    = document.getElementById('worlds-overlay');
+    const track = document.getElementById('worlds-track');
+    if (!ov || !track) return;
     if (url) {
       const toLoad = new Image();
       toLoad.onload = () => {
         _hasBgPhoto = true;
-        ov.style.backgroundImage    = `url('${url}')`;
-        ov.style.backgroundSize     = 'cover';
-        ov.style.backgroundPosition = 'center 40%';
-        ov.style.backgroundRepeat   = 'no-repeat';
+        _bgUrl = url;
+        _applyBgOrientation();
         document.getElementById('wh-photo-hint')?.remove();
       };
       toLoad.onerror = () => _applyBgImage(null);
       toLoad.src = url;
     } else {
       _hasBgPhoto = false;
+      _bgUrl = null;
+      track.style.backgroundImage    = '';
       ov.style.backgroundImage = 'linear-gradient(160deg,#1a1f35 0%,#16213e 33%,#1a2535 67%,#0f1921 100%)';
       ov.style.backgroundSize  = '100% 100%';
     }
@@ -979,8 +1007,7 @@ window.Worlds = (() => {
     const staleMin   = Math.max(weatherObj.ageMin || 0, dogsObj.ageMin || 0);
 
     // Panorama-Bild setzen (nur wenn noch kein Bild vorhanden)
-    const ov = document.getElementById('worlds-overlay');
-    if (dog && !ov?.style.backgroundImage?.startsWith('url')) {
+    if (dog && !_bgUrl) {
       _loadDailyImage(dog).then(_applyBgImage);
     } else if (!dog) { _applyBgImage(null); }
 

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v783';
+const CACHE_VERSION = 'by-v785';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache