canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update frontend

This commit is contained in:
Your Name 2025-12-21 19:17:48 -05:00
parent 26a8bf84e8
commit 13646408eb
1 changed files with 1 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/Layout/TopBar.jsx
View File

@ -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 = '<i class="fa-solid fa-download"></i> 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 React, { useEffect, useMemo, useState } from "react";
import { useAuth } from "../../auth/AuthContext"; import { useAuth } from "../../auth/AuthContext";
import { registerUser } from "../../api/client"; import { registerUser } from "../../api/client";
@ -465,20 +419,4 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
) : null} ) : 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é. 😊