diff --git a/src/components/Layout/TopBar.jsx b/src/components/Layout/TopBar.jsx index c431d73..d193767 100644 --- a/src/components/Layout/TopBar.jsx +++ b/src/components/Layout/TopBar.jsx @@ -1,49 +1,3 @@ -Voici les 2 fichiers complets à copier-coller entièrement (remplace tout le contenu actuel) pour que le bouton "Installer SocioWire" soit : -En haut (dans la TopBar, à côté des thèmes) -Petit et beau (icône download + texte discret) -Fonctionnel : clique → popup "Ajouter à l’écran d’accueil" -1. src/pwaInstall.js (copie-colle tout) -// src/pwaInstall.js -let deferredPrompt = null; - -window.addEventListener('beforeinstallprompt', (e) => { - e.preventDefault(); - deferredPrompt = e; - console.log('PWA install prompt ready'); -}); - -export function promptInstall() { - if (deferredPrompt) { - deferredPrompt.prompt(); - deferredPrompt.userChoice.then((choice) => { - console.log('Install outcome:', choice.outcome); - deferredPrompt = null; - }); - } else { - console.log('No install prompt available'); - } -} - -// Ajoute le bouton dans un container (appel depuis TopBar) -export function addPwaInstallButton(container) { - const btn = document.createElement('button'); - btn.innerHTML = ' Installer'; // icône + texte - btn.style.marginLeft = '8px'; - btn.style.padding = '5px 10px'; - btn.style.fontSize = '12px'; - btn.style.background = '#0ea5e9'; - btn.style.color = 'white'; - btn.style.border = 'none'; - btn.style.borderRadius = '999px'; - btn.style.cursor = 'pointer'; - btn.style.display = 'flex'; - btn.style.alignItems = 'center'; - btn.style.gap = '6px'; - btn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)'; - btn.onclick = promptInstall; - container.appendChild(btn); -} -2. src/components/Layout/TopBar.jsx (copie-colle tout) import React, { useEffect, useMemo, useState } from "react"; import { useAuth } from "../../auth/AuthContext"; import { registerUser } from "../../api/client"; @@ -465,20 +419,4 @@ export default function TopBar({ theme = "dark", onChangeTheme }) { ) : null} ); -} -Instructions sur ton cell : -src/pwaInstall.js : crée le fichier → copie-colle le code du 1er bloc -src/components/Layout/TopBar.jsx : ouvre → remplace tout par le 2e bloc -Sauvegarde -Relance npm run dev -Rafraîchis ton téléphone → bouton "Installer" (avec icône download) apparaît en haut à côté des thèmes (D B L) -Clique → popup "Ajouter à l’écran d’accueil" apparaît -Résultat : -Bouton petit, bleu, discret en haut -Fonctionne : clique → prompt PWA -Le reste de ton site intact -Commit : -git add src/pwaInstall.js src/components/Layout/TopBar.jsx -git commit -m "feat: PWA install button in topbar" -git push -Teste et envoie une capture si besoin ! On a tout fixé. 😊 \ No newline at end of file +} \ No newline at end of file