UX: Pro-Chips bei Standard-User mit 10% Opazität statt ausgeblendet (SW by-v740)

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 = "739"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "740"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/api/version")
 async def app_version():

backend/static/index.html

@@ -578,7 +578,7 @@
 <script src="/js/api.js?v=94"></script>
 <script src="/js/ui.js?v=94"></script>
 <script src="/js/app.js?v=94"></script>
-<script src="/js/worlds.js?v=739"></script>
+<script src="/js/worlds.js?v=740"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '739'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '740'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.4.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 

backend/static/js/worlds.js

@@ -569,19 +569,7 @@ window.Worlds = (() => {
     const u = _state?.user;
     const tier = u?.subscription_tier || 'standard';
     const isTest = tier.endsWith('_test');
-
-    // Pro-Check — _test-Tiers ignorieren Admin-Override
-    if (chip.pro) {
-      if (!u) return false;
-      if (isTest) {
-        if (!['pro_test','breeder_test'].includes(tier)) return false;
-      } else {
-        if (u.rolle === 'admin' || u.rolle === 'moderator') {} // erlaubt
-        else if (u.is_moderator || u.is_social_media) {} // erlaubt
-        else if (!['pro','breeder'].includes(tier)) return false;
-      }
-    }
-    // Role-Checks — admin-Chip immer über echte Rolle, breeder respektiert _test
+    // Role-Checks (hart — komplett ausblenden)
     if (!chip?.role) return true;
     if (chip.role === 'breeder') {
       if (isTest) return tier === 'breeder_test';
@@ -589,9 +577,21 @@ window.Worlds = (() => {
     }
     if (chip.role === 'social')  return u?.is_social_media   || u?.rolle === 'admin';
     if (chip.role === 'mod')     return u?.rolle === 'admin' || u?.rolle === 'moderator' || u?.is_moderator;
-    if (chip.role === 'admin')   return u?.rolle === 'admin'; // immer echte Rolle
+    if (chip.role === 'admin')   return u?.rolle === 'admin';
     return true;
   }
+
+  // Gibt true zurück wenn User vollen Pro-Zugriff hat
+  function _hasProAccess() {
+    const u = _state?.user;
+    if (!u) return false;
+    const tier = u.subscription_tier || 'standard';
+    if (tier.endsWith('_test')) return ['pro_test','breeder_test'].includes(tier);
+    if (u.rolle === 'admin' || u.rolle === 'moderator') return true;
+    if (u.is_moderator || u.is_social_media) return true;
+    return ['pro','breeder'].includes(tier);
+  }
+
   function _chipsForWorld(world) {
     const pages = _getConfig()[world] || _DEFAULT_CONFIG[world];
     return pages.map(_chipMeta).filter(c => c && _chipAllowed(c));
@@ -887,9 +887,10 @@ window.Worlds = (() => {
 
   // ── CHIP-HELPER ──────────────────────────────────────────────
 
-  function _chip(icon, label, page) {
+  function _chip(icon, label, page, locked = false) {
+    const style = locked ? 'opacity:0.12;cursor:default;' : '';
     return `
-      <div class="world-chip" data-wnav="${page}">
+      <div class="world-chip" ${locked ? '' : `data-wnav="${page}"`} style="${style}">
         <svg class="ph-icon" style="width:1.4rem;height:1.4rem">
           <use href="/icons/phosphor.svg#${icon}"></use>
         </svg>
@@ -1258,7 +1259,7 @@ window.Worlds = (() => {
         ` : ''}
         <div class="world-section-label">Alles über ${_esc(dog.name)}</div>
         <div class="world-chips-grid">
-          ${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
+          ${chips.map(c => _chip(c.icon, c.label, c.page, !!(c.pro && !_hasProAccess()))).join('')}
         </div>
         <div class="world-footer-links">
           <span data-wnav="gruender">Die 100 Gründer</span>
@@ -1352,7 +1353,7 @@ window.Worlds = (() => {
       <div class="world-bottom">
         <div class="world-section-label">Die Welt da draußen</div>
         <div class="world-chips-grid">
-          ${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
+          ${chips.map(c => _chip(c.icon, c.label, c.page, !!(c.pro && !_hasProAccess()))).join('')}
         </div>
         <div class="world-footer-links">
           <span data-wnav="datenschutz">Datenschutz</span>

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v739';
+const CACHE_VERSION = 'by-v740';
 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