From e9511afd851fd25d250c30917daddf5219d79800 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Wed, 11 Feb 2026 05:55:30 +1300
Subject: [PATCH] fix: Hide feedback FAB on mobile, add to drawer, persist
 install dismissal

FAB overlaps PWA install prompt and update notifications on small screens.
Mobile users now access feedback via the navbar drawer instead. Install
prompt dismissal persists in localStorage and is skipped in standalone mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/js/components/feedback.js |  4 ++--
 public/js/components/navbar.js   | 16 ++++++++++++++++
 public/js/version-manager.js     | 13 ++++++++++---
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/public/js/components/feedback.js b/public/js/components/feedback.js
index 89fff9c3..0db81cdb 100644
--- a/public/js/components/feedback.js
+++ b/public/js/components/feedback.js
@@ -65,8 +65,8 @@ class TractausFeedback {
   renderFAB() {
     const fabHTML = `
       <button id="feedback-fab"
-              class="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 rounded-full shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-200 group flex items-center gap-2"
-              style="position: fixed !important; bottom: 1.5rem !important; right: 1.5rem !important; z-index: 999999 !important; display: flex !important; visibility: visible !important; opacity: 1 !important;"
+              class="hidden md:flex bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 rounded-full shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-200 group items-center gap-2"
+              style="position: fixed !important; bottom: 1.5rem !important; right: 1.5rem !important; z-index: 999999 !important; visibility: visible !important; opacity: 1 !important;"
               aria-label="Give Feedback"
               title="Give Feedback">
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/public/js/components/navbar.js b/public/js/components/navbar.js
index 0765a7ad..f2011b08 100644
--- a/public/js/components/navbar.js
+++ b/public/js/components/navbar.js
@@ -238,6 +238,11 @@ class TractatusNavbar {
               <div class="pt-1">
                 <a href="/koha.html" class="block px-3 py-2.5 text-sm font-medium text-teal-700 bg-teal-50 hover:bg-teal-100 rounded-lg transition border border-teal-200">Koha</a>
               </div>
+
+              <!-- Feedback (mobile-only, replaces hidden FAB) -->
+              <div class="pt-1">
+                <button id="mobile-feedback-btn" class="w-full text-left block px-3 py-2.5 text-sm font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition border border-blue-200">Feedback</button>
+              </div>
             </nav>
           </div>
         </div>
@@ -397,6 +402,17 @@ class TractatusNavbar {
       });
     });
 
+    // Mobile feedback button — close drawer then open feedback modal
+    const mobileFeedbackBtn = document.getElementById('mobile-feedback-btn');
+    if (mobileFeedbackBtn) {
+      mobileFeedbackBtn.addEventListener('click', () => {
+        if (this.mobileMenuOpen) {
+          toggleMobileMenu();
+        }
+        window.dispatchEvent(new CustomEvent('openFeedbackModal'));
+      });
+    }
+
     // Mobile accordion sections
     const mobileSections = document.querySelectorAll('.mobile-nav-section');
     mobileSections.forEach(section => {
diff --git a/public/js/version-manager.js b/public/js/version-manager.js
index 8febb2ce..002c18ea 100644
--- a/public/js/version-manager.js
+++ b/public/js/version-manager.js
@@ -208,6 +208,12 @@ class VersionManager {
   }
 
   setupInstallPrompt() {
+    // Skip entirely if already running as installed PWA
+    if (window.matchMedia('(display-mode: standalone)').matches ||
+        window.navigator.standalone === true) {
+      return;
+    }
+
     // Listen for beforeinstallprompt event
     window.addEventListener('beforeinstallprompt', (e) => {
       // Prevent Chrome 67 and earlier from automatically showing the prompt
@@ -217,7 +223,7 @@ class VersionManager {
       this.deferredInstallPrompt = e;
 
       // Check if user has dismissed install prompt before
-      const dismissed = sessionStorage.getItem('install_prompt_dismissed');
+      const dismissed = localStorage.getItem('tractatus_install_dismissed');
       if (!dismissed) {
         // Show install prompt after 30 seconds
         setTimeout(() => {
@@ -230,6 +236,7 @@ class VersionManager {
     window.addEventListener('appinstalled', () => {
       console.log('[VersionManager] PWA installed');
       this.deferredInstallPrompt = null;
+      localStorage.setItem('tractatus_install_dismissed', 'true');
 
       // Hide install prompt if visible
       const prompt = document.getElementById('tractatus-install-prompt');
@@ -407,8 +414,8 @@ class VersionManager {
       }, 300);
     }
 
-    // Remember dismissal for this session
-    sessionStorage.setItem('install_prompt_dismissed', 'true');
+    // Remember dismissal persistently across sessions
+    localStorage.setItem('tractatus_install_dismissed', 'true');
   }
 }