marmelab/atomic-crm

update-branding

Aperçu

Modifie le logo et/ou le titre du CRM. Le logo s'affiche dans deux thèmes sur cinq écrans (en-tête desktop + mobile, connexion, inscription, confirmation) et le titre est codé en dur dans trois fichiers — une modification naïve d'un seul fichier en laisse un obsolète. Les étapes ci-dessous couvrent tous ces cas. Critère de sortie : le logo s'affiche correctement dans les deux thèmes sur les cinq écrans, et le titre est cohérent dans l'en-tête, l'onglet du navigateur et le nom de la PWA.

Quand l'utiliser

• L'utilisateur souhaite changer, remplacer ou renommer le logo et/ou le titre du CRM.
• Optionnellement, lorsqu'il demande également de mettre à jour le favicon ou les icônes de l'application PWA.

Ne pas utiliser pour les couleurs du thème ou le style des composants — voir Skill({skill: "shadcn-customization"}).

Logo : deux familles de ressources

Confirmer celle que l'utilisateur souhaite — la plupart des demandes concernent uniquement la #1.

1. Logo / mot-symbole de l'application (courant) — src/components/atomic-crm/root/logos/, importé comme ressource de module par defaultConfiguration.ts (Vite résout l'URL relative au bloc JS, ce qui fonctionne avec les routes imbriquées comme /oauth/consent et les déploiements en sous-chemin). logo_atomic_crm_dark.svg est un dessin de couleur claire affiché en mode sombre + toutes les pages d'authentification ; logo_atomic_crm_light.svg est un dessin de couleur foncée affiché en mode clair. (Un fichier logo_atomic_crm.svg isolé et inutilisé se trouve toujours dans public/logos/.)

   Les fichiers sont nommés d'après le mode dans lequel ils s'affichent, pas leur couleur — le logo "mode sombre" doit être lisible sur un fond sombre.

2. Favicon + icônes PWA — uniquement si demandé. Beaucoup plus volumineux (34 PNGs) ; voir ci-dessous.

Valeurs par défaut du code vs. paramètres d'exécution — ils sont en conflit

• Valeurs par défaut du code (ce skill) : modifier defaultConfiguration.ts + les ressources. Validé, appliqué partout, et le seul moyen de changer le titre de l'onglet du navigateur / le favicon / les icônes PWA.
• Interface des paramètres (/settings → Marque, SettingsPage.tsx) : un utilisateur connecté modifie le titre + télécharge des logos, par navigateur, sauvegardé dans localStorage sous CRM.app.configuration (logos en base64), jamais validé. Ne couvre que le logo dans l'application + le titre de l'en-tête.

⚠️ Le magasin cache le code. useConfigurationContext retourne { ...defaultConfiguration, ...storedConfig } (ConfigurationContext.tsx). Si la marque a déjà été sauvegardée via /settings, vos modifications dans defaultConfiguration.ts ne s'afficheront pas dans ce navigateur — effacez la clé CRM.app.configuration du localStorage. Soupçonnez cela chaque fois qu'un changement de code n'a aucun effet visuel.

Étapes

1. Récupérez la ou les ressources. Demandez le fichier/l'URL, le format (SVG vs PNG), et s'il existe des variantes clair/sombre séparées ou une seule image.
   • Une seule variante → définissez les deux clés de configuration avec celle-ci ; avertissez du faible contraste dans un thème (les pages d'authentification utilisent toujours la clé du mode sombre).
   • SVG à remplissage unique → dérivez l'autre variante en inversant le remplissage (blanc ↔ noir).
2. Placez les fichiers dans src/components/atomic-crm/root/logos/ :
   • Remplacement direct (le plus simple) : écrasez logo_atomic_crm_dark.svg / logo_atomic_crm_light.svg en conservant exactement les noms de fichiers + .svg. Les imports dans defaultConfiguration.ts pointent déjà ici — terminé. (SVG uniquement.)
   • Nouveau nom / format (ex. PNG) : enregistrez-les comme nouveaux fichiers à côté, puis mettez à jour les deux instructions import en haut de defaultConfiguration.ts (elles alimentent defaultDarkModeLogo / defaultLightModeLogo ; chemins relatifs au module, donc "./logos/<fichier>"). Ne pas les rétablir en chaînes de chemin public brut — cela réintroduit le problème #291.
3. Mettez à jour le titre (si le nom change) dans les trois emplacements — defaultTitle n'alimente que le premier :
   • defaultConfiguration.ts → defaultTitle — en-tête <h1> + attribut alt du logo.
   • index.html → <title> — titre de l'onglet du navigateur (codé en dur, non défini à l'exécution).
   • public/manifest.json → short_name + name — nom de la PWA installée.

Consommateurs (aucune modification si vous conservez les clés de configuration) : layout/Header.tsx + dashboard/MobileDashboard.tsx affichent les deux variantes (basculées par CSS, h-6) ; login/{LoginPage,SignupPage,ConfirmationRequired}.tsx affichent uniquement darkModeLogo.

Justifications

Justification	Réalité
"J'ai changé le fichier logo, c'est tout le travail."	Le logo s'affiche dans deux thèmes sur cinq écrans et le titre vit dans trois fichiers. Une modification en laisse une variante obsolète.
"Mon changement de code n'a aucun effet visuel, donc il ne s'est pas appliqué."	Le magasin /settings cache defaultConfiguration.ts par navigateur. Effacez la clé CRM.app.configuration du localStorage.
"Une seule image suffit pour les deux thèmes."	Les pages d'authentification utilisent toujours la clé du mode sombre ; une seule ressource s'affiche mal sur un fond. Avertissez ou dérivez la deuxième variante.
"Je vais régénérer quelques tailles de favicon."	L'ensemble PWA compte 34 PNGs. Régénérez toutes les tailles à partir d'une source unique ou demandez l'ensemble, ne modifiez pas quelques-unes à la main.

Signaux d'alarme

• Modifier une seule des deux clés de ressource de logo, ou inverser les fichiers clair/sombre.
• Changer le titre dans defaultConfiguration.ts mais pas dans index.html et manifest.json.
• Un changement de code sans effet visible, sans avoir effacé le magasin CRM.app.configuration.
• Modifier manuellement un sous-ensemble des tailles de favicon/PWA au lieu de régénérer l'ensemble complet.
• Toucher au logo du site de documentation (doc/) alors que cela n'a pas été demandé.

Vérification

make typecheck ne détecte que les fautes de frappe dans les clés de configuration. Ensuite, make start et vérifiez : l'en-tête dans les deux thèmes, desktop + mobile ; les pages connexion/inscription (fond sombre) ; et si le titre a changé, l'en-tête <h1>, l'onglet du navigateur et le nom de la PWA. Un logo incorrect dans exactement un thème signifie que les deux clés pointent vers une seule ressource, ou que les fichiers clair/sombre sont inversés.

• Les deux variantes de logo pointent vers les ressources clair/sombre correctes (nommées par mode d'affichage, pas par couleur).
• Le logo s'affiche dans les deux thèmes, desktop + mobile, et sur les pages de connexion/inscription/confirmation.
• Si le nom a changé, le titre est mis à jour dans defaultConfiguration.ts, index.html et manifest.json.
• Si aucun effet visuel n'apparaît, la clé CRM.app.configuration du localStorage a été effacée.
• Les icônes favicon/PWA ont été régénérées en un ensemble complet uniquement si demandé explicitement.

Favicon et icônes d'application (optionnel)

Uniquement si demandé. Référencés par index.html + public/manifest.json : public/favicon.ico et public/appIcon/*.png (34 tailles incluant maskable_icon*). Régénérez toutes les tailles à partir d'une source carrée unique (sharp / pwa-asset-generator) ou demandez l'ensemble à l'utilisateur — ne modifiez pas quelques-unes à la main. Confirmez d'abord le périmètre ; theme_color/background_color dans manifest.json peuvent également nécessiter une mise à jour.

Le logo du site de documentation (doc/astro.config.mjs → doc/public/logo_atomic_crm_*.svg) est un site Astro séparé — ne le touchez pas sauf si on vous le demande.