From 57a97a37502dd25fe48b9f1f09397a58b75cebe2 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sat, 31 Oct 2026 10:08:41 +0100
Subject: [PATCH] fix(pwa): install button appears in the guide once Chrome
 reports the app installable

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md         |  3 +++
 frontend/src/App.tsx | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8594d5..c678126 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,9 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 ### Changed
 - Kanban maximieren: Nur noch das Board wird breiter, Listen-Reiter und „Neue Aufgabe anlegen“ behalten ihre Breite. Das Board wächst weich animiert, jede Spalte wird höchstens 380 px breit und das Board bleibt mittig (bei wenigen Spalten also schmaler als das Fenster).
 
+### Fixed
+- App installieren am Handy: Meldet Chrome erst nach dem Öffnen der Anleitung, dass MindSift installierbar ist (z. B. kurz nach dem Entfernen der alten App), erscheint in der Anleitung jetzt ein Knopf „Jetzt installieren“ für die direkte Installation.
+
 ## [0.17.0] - 2026-10-31
 
 ### Added
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0aa65d3..9adb3e9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1736,6 +1736,18 @@ export const App: React.FC = () => {
               </div>
             ) : (
               <div className="space-y-3 pt-1">
+                {/* Chrome may report "installable" only after the guide opened (e.g. shortly after the
+                    old app was removed): then the real install is one tap away again */}
+                {deferredPwaPrompt && (
+                  <button
+                    type="button"
+                    onClick={handleInstallWebApp}
+                    className="btn-primary w-full h-12 text-sm font-semibold rounded-xl flex items-center justify-center gap-2 shadow-md active:scale-98 transition-transform cursor-pointer"
+                  >
+                    <Download className="w-4 h-4" />
+                    <span>Jetzt installieren</span>
+                  </button>
+                )}
                 <div className="p-3.5 rounded-xl bg-canvas border border-border space-y-2.5 text-xs text-main">
                   <p className="font-semibold text-accent flex items-center gap-1.5">
                     <Smartphone className="w-4 h-4" />