From 9ec2b4cfb24f3b1401775618c4a3e21f4e65ef50 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 18 Jan 2026 14:11:37 +0100
Subject: [PATCH] FEAT: Improve first-run UX and PWA install

- Remove automatic keyboard shortcuts popup on startup.
- Add 'Install App' button to settings (only visible if installable).
- Allow users to manually trigger PWA installation if the initial prompt was dismissed.
---
 index.html |  7 +++++++
 js/app.js  | 23 ++++++++++++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 3b95992..a831b58 100644
--- a/index.html
+++ b/index.html
@@ -1513,6 +1513,13 @@
                                 </div>
                                 <button id="show-shortcuts-btn" class="btn-secondary">Show Shortcuts</button>
                             </div>
+                            <div class="setting-item" id="install-app-setting" style="display: none;">
+                                <div class="info">
+                                    <span class="label">Install App</span>
+                                    <span class="description">Install Monochrome as an app on your device</span>
+                                </div>
+                                <button id="manual-install-btn" class="btn-primary">Install</button>
+                            </div>
                             <div class="setting-item">
                                 <div class="info">
                                     <span class="label">Cache</span>
diff --git a/js/app.js b/js/app.js
index f2e384a..8b35a78 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1004,22 +1004,31 @@ document.addEventListener('DOMContentLoaded', async () => {
     window.addEventListener('beforeinstallprompt', (e) => {
         e.preventDefault();
         deferredPrompt = e;
+
+        // Show the manual install button in settings
+        const installSetting = document.getElementById('install-app-setting');
+        if (installSetting) installSetting.style.display = 'flex';
+
         if (!localStorage.getItem('installPromptDismissed')) {
             showInstallPrompt(deferredPrompt);
         }
     });
 
+    document.getElementById('manual-install-btn')?.addEventListener('click', async () => {
+        if (deferredPrompt) {
+            deferredPrompt.prompt();
+            const { outcome } = await deferredPrompt.userChoice;
+            console.log(`User response to install prompt: ${outcome}`);
+            deferredPrompt = null;
+            const installSetting = document.getElementById('install-app-setting');
+            if (installSetting) installSetting.style.display = 'none';
+        }
+    });
+
     document.getElementById('show-shortcuts-btn')?.addEventListener('click', () => {
         showKeyboardShortcuts();
     });
 
-    if (!localStorage.getItem('shortcuts-shown') && window.innerWidth > 768) {
-        setTimeout(() => {
-            showKeyboardShortcuts();
-            localStorage.setItem('shortcuts-shown', 'true');
-        }, 3000);
-    }
-
     // Listener for Pocketbase Sync updates
     window.addEventListener('library-changed', () => {
         const hash = window.location.hash;