- Création de 3 composants UI mobile réutilisables (MobileHeader, MobileFAB, MobileCard)
- Création du layout MobileDashboard avec sidebar navigation
- Implémentation de 6 pages mobiles :
* CalendarPage : gestion des événements avec pagination
* NotesPage : liste des notes avec recherche et filtres
* NoteDetailPage : édition complète de notes en fullscreen
* TodosPage : gestion des tâches actives/complétées
* RssPage : affichage des flux RSS avec actualisation
* SettingsPage : paramètres de l'application
- Configuration du routing automatique mobile/desktop dans App.tsx
- Détection automatique du device avec redirection intelligente
- Tous les services backend réutilisés sans modification
- Build testé et fonctionnel
Problème majeur résolu:
- L'éditeur de notes réinitialisait le contenu à chaque modification
- Causé par dangerouslySetInnerHTML qui forçait React à synchroniser
- Résultat: impossible d'éditer les notes correctement
Solution:
- Suppression de dangerouslySetInnerHTML du RichTextEditor
- Conservation du useEffect avec deps vides pour initialisation unique
- Utilisation du key prop pour forcer remount lors du changement de note
- Éditeur maintenant complètement "uncontrolled"
Migration complète Google Calendar vers OAuth 2.0:
- Remplacement de l'API Key simple par OAuth 2.0 (Client ID + Secret)
- Nouvelle table google_oauth_tokens pour stocker les tokens
- Routes OAuth:
* GET /api/calendar/auth-url - Génère l'URL d'authentification
* GET /api/calendar/oauth-callback - Callback OAuth avec échange de code
* GET /api/calendar/auth-status - Vérifier le statut de connexion
* POST /api/calendar/disconnect - Déconnecter Google
- Gestion automatique du rafraîchissement des tokens expirés
- Interface utilisateur mise à jour:
* Champs Client ID et Client Secret
* Indicateur de statut de connexion (connecté/non connecté)
* Bouton "Se connecter avec Google" ouvrant popup OAuth
* Bouton "Déconnecter"
* URI de redirection affichée pour configuration Google Cloud Console
- Synchronisation maintenant avec calendrier principal de l'utilisateur
- Accès complet aux données privées du calendrier
Architecture:
- CalendarService.ts: Nouvelles méthodes getAuthUrl(), getAuthStatus(), disconnect()
- Settings: Ajout de google_client_id et google_client_secret
- Popup OAuth avec communication window.postMessage
- Gestion d'erreur avec re-authentification automatique si token expiré
Modaux :
- Création ConfirmModal pour confirmations avec variants (default/destructive)
- Création InputModal pour saisie de texte/URL/mot de passe
- Création AddUserModal pour création d'utilisateur avec admin checkbox
- Remplacement de tous les prompt() et confirm() par des modaux modernes
- Modaux pour : suppression note, ajout todo, ajout RSS, ajout utilisateur, suppression utilisateur, changement mot de passe, ajout todo dans note
Fix RSS :
- Ajout route POST /api/rss/refresh (alias de /api/rss/fetch)
- Fix uploadImage retour avec result.image || result
UX améliorée :
- Plus de popups navigateur natifs
- Interface cohérente et moderne
- Validation dans les modaux
- Support touche Entrée dans les InputModals
- Auto-focus sur le champ de saisie
Images multiples :
- Ajout table note_images dans la base de données
- Routes POST/GET/DELETE /api/notes/:id/images
- Dossier uploads/images séparé pour les images
- Support de plusieurs images par note
Google Calendar :
- Ajout table calendar_events
- Routes /api/calendar pour sync et récupération des événements
- Box Rendez-vous dans l'interface avec affichage des événements à venir
- Configuration Google Calendar dans l'admin (API key et Calendar ID)
- Synchronisation manuelle avec Google Calendar API
- Installation package googleapis
Corrections :
- Fix RichTextEditor: ajout dir="ltr" pour empêcher l'écriture RTL
- Fix Image type conflict (lucide-react vs Note interface)
- Ajout original_name à l'interface Image pour compatibilité
Interface :
- Box Rendez-vous empilée avec Todos et RSS dans la colonne droite
- Nouvel onglet Google Calendar dans l'administration
- Bouton "Synchroniser" pour rafraîchir les événements
Cette mise à jour majeure transforme l'application en une plateforme complète
de gestion de notes et de tâches avec de nombreuses nouvelles fonctionnalités.
Nouvelles fonctionnalités:
1. **Éditeur de texte enrichi**
- Barre d'outils complète avec formatage (gras, italique, souligné)
- Support des titres (H1, H2, H3)
- Listes à puces et numérotées
- Alignement du texte (gauche, centre, droite)
- Citations et blocs de code
- Insertion de liens
- Raccourcis clavier (Ctrl+B, Ctrl+I, Ctrl+U)
2. **Box Tâches globales (sidebar droite)**
- Liste de tâches accessible depuis toute l'application
- Ajout/suppression de tâches
- Marquage des tâches comme complétées
- Persistance des données
3. **Box Flux RSS (sidebar droite)**
- Affichage des derniers articles RSS
- Rafraîchissement manuel des flux
- Ouverture des articles dans un nouvel onglet
- Gestion des flux dans l'admin
4. **Support des fichiers joints dans les notes**
- Upload de tous types de fichiers
- Affichage de la taille des fichiers
- Téléchargement et suppression des fichiers
- Interface utilisateur intuitive
5. **Panel d'administration enrichi**
- Onglet "Flux RSS" : gestion des flux RSS
- Onglet "OpenRouter" : configuration de l'API IA
- Onglet "Paramètres" : configuration de l'intervalle de rafraîchissement RSS
- Interface organisée avec 4 onglets
6. **Amélioration de l'interface**
- Layout à 3 colonnes responsive (Notes | Éditeur | Tâches+RSS)
- Badges pour indiquer le nombre de tâches, images et fichiers par note
- Design moderne et cohérent
- Animations et transitions fluides
7. **Mise à jour de l'identité**
- Nom de l'application : "NoteFlow"
- Nouveau titre de page
- Favicon SVG configuré
- Logo mis à jour dans l'interface
Services ajoutés:
- RssService.ts : gestion des flux RSS et articles
- TodosService.ts : gestion des tâches globales
- SettingsService.ts : gestion des paramètres de l'application
Composants ajoutés:
- RichTextEditor.tsx : éditeur de texte enrichi avec barre d'outils
Modifications techniques:
- Ajout de la propriété "files" au type Note
- Résolution du conflit de nommage avec Settings
- Mise à jour de package.json avec la nouvelle description
- Mise à jour de index.html avec favicon et titre
Cette version représente une évolution majeure de l'application avec une
expérience utilisateur nettement améliorée et de nombreuses fonctionnalités
demandées.
Le build échouait car le composant Calendar utilisait l'ancienne API
de react-day-picker (IconLeft/IconRight) qui n'est plus supportée
dans la version 9.
Changements:
- Remplacement de IconLeft et IconRight par le composant Chevron
- Le composant Chevron gère maintenant l'orientation (left/right)
- Compatible avec react-day-picker v9.11.1
Cette correction résout l'erreur TypeScript TS2353 et permet au build
de se terminer avec succès.
Claude
Michael