From 89deb7b0eec644fced05763bfee06b6eb6f31255 Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Thu, 30 Apr 2026 09:09:39 +0200
Subject: [PATCH] ux: FAB entry animation stops after 5 views (long loop)

---
 public/router.js         | 13 +++++++++++++
 public/styles/layout.css |  5 +++++
 2 files changed, 18 insertions(+)

diff --git a/public/router.js b/public/router.js
index 7e01f94..678f53b 100644
--- a/public/router.js
+++ b/public/router.js
@@ -366,6 +366,16 @@ async function renderPage(route, previousPath = null) {
 
     await module.render(pageWrapper, { user: currentUser });
 
+    // FAB Long Loop: Einstiegsanimation nach FAB_SEEN_MAX Views deaktivieren
+    if (pageWrapper.querySelector('.page-fab')) {
+      let fabCount = parseInt(localStorage.getItem(FAB_SEEN_KEY) ?? '0', 10);
+      if (fabCount < FAB_SEEN_MAX) {
+        fabCount++;
+        localStorage.setItem(FAB_SEEN_KEY, String(fabCount));
+      }
+      document.documentElement.classList.toggle('fab-anim-done', fabCount >= FAB_SEEN_MAX);
+    }
+
     // Route-Announcer: Screenreader über Seitenwechsel informieren (gezielt, nicht gesamter Inhalt)
     const announcer = document.getElementById('route-announcer');
     if (announcer) {
@@ -619,6 +629,9 @@ function renderAppShell(container) {
   initKeyboardShortcuts();
 }
 
+const FAB_SEEN_KEY = 'oikos:fabSeenCount';
+const FAB_SEEN_MAX = 5;
+
 const SHORTCUTS = [
   { key: '/',   description: () => t('shortcuts.search'),  action: () => document.getElementById('more-sheet-search')?.click() },
   { key: 'n',   description: () => t('shortcuts.new'),     action: () => document.querySelector('.page-fab')?.click() },
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 1a8a395..f01e906 100755
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -579,6 +579,11 @@
   box-shadow: 0 0 0 4px var(--color-accent);
 }
 
+/* Long Loop: FAB-Animation nach N Aufrufen deaktivieren */
+html.fab-anim-done .page-fab {
+  animation: none;
+}
+
 /* Desktop: FAB Position anpassen (keine Bottom-Nav) und etwas kleiner */
 @media (min-width: 1024px) {
   .page-fab {