- 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 :
- Après modification d'une note, il fallait rafraîchir la page pour voir updated_at
- Après ajout d'un tag, il fallait rafraîchir la page pour le voir dans la note
Solution backend :
1. routes/notes.routes.js - PUT /api/notes/:id :
- Récupération de la note mise à jour après UPDATE
- Retour de { message, note } au lieu de juste { message }
- La note retournée contient la vraie updated_at générée par PostgreSQL
Solution frontend :
1. NotesService.ts - updateNote() :
- Changement du type de retour de Promise<boolean> vers Promise<Note | null>
- Récupération et retour de la note mise à jour depuis la réponse du serveur
- Merge de la note locale (todos, images) avec les données du serveur (updated_at)
2. Index.tsx - handleNoteChange et handleContentChange :
- Utilisation de la note retournée par updateNote() au lieu de l'état local
- Mise à jour de openNote et notes avec les données du serveur
3. Index.tsx - Synchronisation des tags :
- loadNoteTags : Mise à jour de openNote.tags après chargement
- confirmAddTag : Mise à jour de openNote.tags après ajout
- handleDeleteTag : Mise à jour de openNote.tags après suppression
- Conversion du format { id, tag } vers { id, name } pour cohérence
Résultat :
- Les dates de modification s'affichent immédiatement après sauvegarde
- Les tags ajoutés apparaissent immédiatement dans l'interface
- Plus besoin de rafraîchir la page manuellement
PROBLÈME IDENTIFIÉ:
Le backend envoyait des dates ISO UTC à Google Calendar API avec
timeZone: 'Europe/Paris', ce qui causait une double interprétation.
Google interprétait l'heure UTC comme étant l'heure locale de Paris,
créant ainsi un décalage d'1 heure.
CORRECTIONS APPORTÉES:
1. Frontend (src/pages/Index.tsx):
- Réécriture de toParisISO() pour convertir correctement les dates
datetime-local en ISO UTC avec gestion automatique de l'heure d'été/hiver
- Calcul dynamique de l'offset Europe/Paris (+01:00 hiver, +02:00 été)
- Tests de validation confirmant le bon fonctionnement (round-trip OK)
2. Backend (routes/calendar.routes.js):
- Retrait de timeZone: 'Europe/Paris' lors de la création d'événements
- Retrait de timeZone: 'Europe/Paris' lors de la mise à jour d'événements
- Google Calendar API interprète maintenant correctement les ISO UTC
3. Scripts de test ajoutés:
- scripts/test-timezone-functions.js: Validation des conversions
- scripts/diagnose-timezone.js: Diagnostic du flux complet
RÉSULTAT:
Les heures affichées dans NoteFlow sont maintenant identiques à celles
de Google Calendar, sans aucun décalage horaire.
Tests effectués:
✅ Conversion datetime-local → ISO UTC (hiver): 14:30 → 13:30 UTC
✅ Conversion datetime-local → ISO UTC (été): 14:30 → 12:30 UTC
✅ Round-trip: conservation de la valeur d'origine
✅ Affichage correct en Europe/Paris depuis ISO UTC
✅ Compilation réussie
Problèmes corrigés:
- Ajout de fonctions utilitaires toLocalDateTimeString() et toParisISO()
pour gérer correctement les conversions de timezone Europe/Paris
- Correction des valeurs par défaut des champs datetime-local lors de la
création d'événements (utilisaient toISOString().slice() incorrectement)
- Correction des valeurs par défaut lors de l'édition d'événements
- Correction de la soumission des formulaires (création et édition)
pour envoyer les dates ISO correctes avec timezone Europe/Paris
Les dates sont désormais:
1. Affichées correctement en heure Europe/Paris dans les formulaires
2. Converties correctement lors de l'envoi au backend
3. Stockées et récupérées sans décalage horaire
Fichiers modifiés:
- src/pages/Index.tsx: Ajout des fonctions utilitaires et correction
de toutes les conversions de dates pour les événements du calendrier
Améliorations UX:
1. Message bouton sélecteur adapté selon rôle utilisateur
- Admin: "Configurer clé API OpenRouter"
- Non-admin: "Aucun modèle IA configuré"
2. Popover avec lien direct vers config pour admins
- CommandEmpty affiche message explicatif
- Bouton "Configurer OpenRouter" ouvre Admin → OpenRouter
- Ferme le popover et ouvre directement l'onglet config
Résultat: L'admin peut maintenant configurer OpenRouter en 1 clic depuis le chat
Problème: Les modèles IA ne s'affichaient pas dans l'Assistant IA
- Settings route nécessite requireAdmin (routes/settings.routes.js:10)
- Frontend vérifiait settings.openrouter_api_key avant de charger les modèles
- Utilisateurs non-admin ne peuvent jamais récupérer settings
- Donc openRouterModels restait toujours vide []
Solution:
- Suppression du check settings.openrouter_api_key (Index.tsx:557,263)
- Le backend retourne déjà [] si clé API non configurée (fix précédent)
- Tous les utilisateurs peuvent maintenant charger les modèles IA
Note: L'admin doit configurer la clé API OpenRouter dans Admin → OpenRouter
pour que les modèles s'affichent
Problème: Console spam 400 errors quand clé API OpenRouter non configurée
- Frontend: Chat appelle getModels() sans vérifier si API key existe
- Backend: Retourne 400 au lieu de 200 avec tableau vide
Solutions:
- Frontend (Index.tsx:556): Ajout check settings.openrouter_api_key avant loadOpenRouterModels()
- Backend (openrouter.routes.js:28,93): Return 200 [] au lieu de 400 error quand pas de clé API
Résultat: Plus d'erreurs console, UI affiche simplement pas de modèles
PROBLÈME PERSISTANT résolu avec 3 correctifs:
1. FRONTEND - Timezone explicite (src/pages/Index.tsx):
- Ligne 904-905: Ajout timeZone: 'Europe/Paris'
- Ligne 761: Ajout timeZone: 'Europe/Paris' pour alertes
Avant: toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
Après: toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Paris' })
Force l'affichage en heure de Paris même si navigateur dans autre timezone
2. BACKEND - Script correction forcée (scripts/force-fix-calendar-timezone.js):
- Diagnostic complet de l'état actuel
- Suppression FORCÉE de tous les événements
- Conversion TIMESTAMPTZ avec timezone Europe/Paris
- Vérification finale des types de colonnes
- Instructions étape par étape
Utilisation:
docker exec notes-todo-app node scripts/force-fix-calendar-timezone.js
3. DIAGNOSTIC approfondi:
- Affiche types colonnes PostgreSQL
- Montre exemples de dates stockées
- Compare format brut vs formaté
- Détecte problèmes timezone automatiquement
POURQUOI ÇA NE MARCHAIT PAS AVANT:
- Migration timezone peut ne pas avoir été appliquée
- Anciennes données encore présentes avec mauvais timezone
- Frontend n'avait pas timeZone explicite dans toLocaleTimeString
- Navigateur pouvait être dans autre timezone que Paris
SOLUTION MAINTENANT:
1. Script force la suppression + conversion
2. Frontend force timezone Europe/Paris
3. Nouvelles syncs Google Calendar auront bonnes heures
APRÈS REBUILD:
1. docker-compose build notes-app
2. docker-compose restart notes-app
3. docker exec notes-todo-app node scripts/force-fix-calendar-timezone.js
4. Resynchroniser Google Calendar dans interface web
5. Vérifier que heures correspondent
Fichiers modifiés:
- src/pages/Index.tsx (timeZone: 'Europe/Paris')
- scripts/force-fix-calendar-timezone.js (nouveau, correction forcée)
Nettoyage de la page de connexion:
Suppressions:
- ❌ "Made by dyad" (composant MadeWithDyad)
- ❌ "Par défaut: admin / admin" (CardFooter)
La page de login est maintenant épurée et professionnelle.
Fichier modifié:
- src/pages/Login.tsx
- Ligne 4: CardFooter retiré des imports
- Ligne 5: MadeWithDyad supprimé
- Lignes 92-96: CardFooter supprimé
- Lignes 99-101: MadeWithDyad supprimé
Page de login minimaliste sans informations de connexion exposées.
Corrections de l'affichage des événements:
- Retrait de la pastille bleue pour les événements du jour
- Fond rouge clair (bg-red-50/50) pour les événements du jour
- Détection améliorée des événements "toute la journée"
(all_day OU heure à 00:00 ou 01:00 pour gérer le décalage UTC)
- Les événements toute la journée n'affichent plus "à 01:00"
Index.tsx:882-905
Problème identifié:
- Le backend récupère les nouveaux articles (logs: "20 nouveaux")
- Mais le frontend ne les affiche jamais
- Les articles étaient chargés UNIQUEMENT au démarrage de la page
- Pas de rafraîchissement automatique
Solution:
- Ajout d'un setInterval qui recharge les articles toutes les 2 minutes
- Synchronisé avec le scheduler backend (aussi 2 minutes)
- Nettoyage automatique à la destruction du composant
Comportement maintenant:
- Chargement initial au démarrage
- Rafraîchissement auto toutes les 2 minutes
- Les nouveaux articles apparaissent dans les 2 minutes max
- Le refresh manuel fonctionne toujours (déjà implémenté)
Script ajouté:
- check-db-now.js: Vérifie le contenu exact de la DB RSS
Correction de l'ordre d'affichage :
- Supprime le .reverse() dans loadRssArticles()
- Les articles s'affichent maintenant du plus récent au plus ancien
- Correspond au comportement standard d'un lecteur RSS
Résout le problème où les nouveaux articles (13 nov) étaient
à la fin et nécessitaient de paginer jusqu'à la dernière page.
Maintenant les articles les plus récents apparaissent en premier.
Ajout de scripts utilitaires :
- check-rss-dates.js : Vérifie les dates des articles en DB
- init-rss-feeds.js : Initialise des flux RSS par défaut
- force-refresh-rss.js : Force une mise à jour manuelle
Modifications des limites de pagination :
- Tâches : 10 → 15 éléments par page
- Flux RSS : 7 → 8 articles par page
- Calendrier : Ajout pagination (10 événements par page)
Calendrier :
- Charge maintenant 50 événements au lieu de 10
- Ajout état calendarPage et logique de pagination
- Ajout boutons de pagination (‹/›) avec compteur
- Affichage des événements paginés
Améliore l'expérience utilisateur en affichant plus d'éléments
avant la pagination tout en gardant l'interface organisée.
- Backend : Remet ORDER BY DESC (récent en premier de la DB)
- Frontend : Ajoute .reverse() pour inverser et afficher ancien en premier
- Résultat : Articles affichés du plus ancien au plus récent
Cette approche garantit que le tri fonctionne côté frontend
indépendamment du cache backend.
- Augmente limite dans Index.tsx de 14 à 100 articles
- Augmente limite par défaut dans RssService.ts de 20 à 50 articles
- Permet l'affichage de tous les nouveaux articles récupérés
Complète le fix précédent qui augmentait les limites backend.
Le problème était que le backend récupérait 27+ nouveaux articles
mais le frontend n'en demandait que 14, affichant toujours les mêmes.
Amélioration de l'interface de sélection de modèles dans l'assistant IA
pour une meilleure expérience utilisateur.
Fonctionnalités ajoutées:
1. **Système de recherche intégré**
- Remplacement du <select> HTML par un Combobox avec recherche
- Utilisation des composants Command et Popover de shadcn/ui
- Recherche en temps réel dans la liste des modèles
- Filtrage instantané par nom de modèle
2. **Affichage amélioré du modèle par défaut**
- Indicateur ★ visible dans le bouton du sélecteur
- Indicateur ★ visible dans chaque élément de la liste
- Affichage du nom complet du modèle sélectionné
3. **UX améliorée**
- Interface moderne avec icône ChevronsUpDown
- Indicateur visuel (✓) pour le modèle actuellement sélectionné
- Fermeture automatique après sélection
- Meilleure gestion des états (chargement, vide, désactivé)
- Truncate pour les noms longs de modèles
Changements techniques:
- src/pages/Index.tsx:
* Import Popover, PopoverContent, PopoverTrigger
* Import Command, CommandInput, CommandList, CommandItem, etc.
* Import icônes Check et ChevronsUpDown
* Ajout state modelSelectorOpen pour gérer l'ouverture du popover
* Remplacement du <select> HTML (lignes 2379-2396) par Combobox
* Ajustement taille bouton étoile (h-9 w-9 pour cohérence)
Comportement préservé:
- Le modèle par défaut est toujours chargé depuis localStorage
- Sélection automatique du modèle par défaut au chargement
- Possibilité de définir/changer le modèle par défaut avec ★
- Validation et désactivation selon les états de chargement
Cette amélioration facilite grandement la navigation dans une longue
liste de modèles IA et offre une expérience utilisateur moderne.
- Événements toute la journée affichés correctement (au lieu de 1:00)
- Édition des événements avec synchronisation Google Calendar
- Configuration Google Calendar simplifiée (OAuth 2.0 uniquement)
- Ajout du champ app_url pour éviter URLs codées en dur
- Assistant IA simplifié (sélecteur unique au lieu de recherche + liste)
- Remplacement URLs hardcodées par configuration app_url
Ajout de deux nouvelles fonctionnalités pour les notes:
1. Affichage des tags dans les cartes repliées:
- Les tags sont maintenant visibles dans les cartes de notes sans avoir à les ouvrir
- Badge avec icône TagIcon et nom du tag
- Chargement automatique des tags depuis la base de données
2. Icône de priorité cliquable:
- Bouton "!" en haut à droite de chaque carte de note
- Rouge (!) quand la note est prioritaire (toujours visible)
- Gris clair (!) quand non prioritaire (visible au hover)
- Toggle au clic pour marquer/démarquer comme prioritaire
- Les notes prioritaires sont triées en premier
Backend:
- Route PATCH /api/notes/:id/priority pour toggle la priorité
- Modification GET /api/notes pour charger tags et priority
- Tri par priority DESC, updated_at DESC
- Migration automatique pour ajouter colonne priority
- Index pour performance des requêtes de tri
Frontend:
- Interface Note étendue avec tags et priority
- Méthode togglePriority dans NotesService
- Affichage conditionnel de l'icône (toujours visible si prioritaire)
- Empêche le clic sur l'icône d'ouvrir la note (stopPropagation)
Migration:
- Ajout automatique de la colonne priority (INTEGER DEFAULT 0)
- Création d'index idx_notes_priority pour performance
- Fichier de migration 002_add_priority.sql créé pour référence
Améliorations du chatbox IA:
Système de recherche:
- Ajout d'un champ de recherche pour filtrer les modèles par nom ou ID
- Filtre en temps réel pendant la saisie
- Interface avec liste scrollable des modèles (max-h-32)
Système de modèle par défaut:
- Possibilité de définir un modèle comme favori (étoile ★)
- Sauvegarde du modèle par défaut dans localStorage
- Chargement automatique du modèle par défaut à l'ouverture du chatbox
- Indication visuelle: étoile jaune pleine (★) pour le modèle par défaut, étoile vide (☆) pour les autres
Interface améliorée:
- Remplacement du select natif par une liste interactive
- Highlighting du modèle sélectionné (bg-accent)
- Hover effect sur les modèles
- Bouton étoile cliquable sans sélectionner le modèle (stopPropagation)
L'utilisateur peut maintenant facilement trouver et définir son modèle préféré qui sera automatiquement sélectionné à chaque ouverture.
Corrections et améliorations du système RSS et de l'assistant IA:
RSS:
- Correction de la route backend /api/rss/articles pour respecter le paramètre limit
- Changement de LIMIT 5 fixe à LIMIT ? avec paramètre dynamique
- Support de 14 articles avec pagination de 7 par page
- Amélioration du cache pour supporter différentes limites
Assistant IA:
- Suppression de la vérification settings.openrouter_api_key côté frontend
- Les modèles se chargent maintenant automatiquement via le backend
- Retrait de la section "Modèle IA" dans l'administration OpenRouter
- Amélioration de la gestion des erreurs lors du chargement des modèles
Les utilisateurs peuvent maintenant voir tous les modèles OpenRouter disponibles dans le sélecteur du chatbox, sans configuration manuelle dans l'admin.
Corrections pour permettre le chargement automatique des modèles IA:
- Retrait de la restriction admin sur la route GET /api/openrouter/models
- Retrait de la condition is_admin dans loadOpenRouterModels()
- Ajout d'un useEffect pour charger les modèles à l'ouverture du chatbox
- Ajout d'un indicateur "Chargement des modèles..." dans le sélecteur
- Désactivation du sélecteur pendant le chargement
Les modèles se chargent maintenant automatiquement quand l'utilisateur ouvre le chatbox, et tous les utilisateurs authentifiés peuvent y accéder (pas seulement les admins).
Améliorations de l'interface utilisateur des notes:
- Suppression du bouton "Retour aux notes" en haut à gauche
- Ajout d'un bouton "Enregistrer" en bas à droite de la note
- Améliore l'ergonomie et la clarté de l'action de sauvegarde
Le bouton enregistrer permet de fermer la note et revenir à la liste, rendant l'action explicite pour l'utilisateur.
Ajout d'en-têtes descriptifs dans les notes:
- "todo list:" au-dessus de la section des checkboxes (todos)
- "Fichiers divers : Fichier(s)" au-dessus de la section des fichiers joints
Améliore la lisibilité et l'organisation visuelle des notes contenant des todos et des fichiers.
Ajout d'un chatbot interactif alimenté par OpenRouter API avec les fonctionnalités suivantes:
- Bouton flottant en bas à droite pour ouvrir le chat
- Sélecteur de modèles IA avec tous les modèles disponibles via l'API OpenRouter
- Interface de chat avec historique des messages (utilisateur/assistant)
- Indicateur de chargement avec animation
- Boutons pour effacer l'historique et fermer le chat
- Auto-scroll vers le dernier message
- Backend: route POST /api/openrouter/chat pour la communication avec l'API
- Service frontend: méthode sendMessage() dans OpenRouterService
Retrait du composant MadeWithDyad comme demandé.
Modification du système d'affichage des flux RSS :
Changements :
- Augmentation de 8 à 14 articles maximum
- Ajout d'un système de pagination (7 articles par page)
- Navigation avec flèches ‹ › comme pour les todos
- Format compact : "X/Y" pour l'indicateur de page
- Hauteur ajustée : max-h-[calc(100vh-500px)] pour inclure la pagination
- Réinitialisation automatique à la page 1 lors du rechargement des articles
Constantes modifiées :
- RSS_MAX_ARTICLES : 8 → 14
- RSS_PER_PAGE : nouveau à 7
- loadRssArticles : 15 → 14 articles chargés
États ajoutés :
- rssPage : pagination des articles RSS
Résultat :
- Page 1 : 7 articles
- Page 2 : 7 articles
- Total : 14 articles avec navigation intuitive
Ajout de systèmes de pagination pour améliorer l'affichage :
1. Notes - Pagination (5 par page) :
- Affichage maximum de 5 notes par page
- Boutons "Précédent" et "Suivant" avec indicateur de page
- Réinitialisation automatique à la page 1 lors du changement de filtre (actives/archivées) ou de recherche
- Format : "Page X sur Y"
2. Todo List - Pagination (10 par page) :
- Affichage maximum de 10 tâches par page
- Pagination séparée pour les tâches actives et complétées
- Navigation compacte avec flèches ‹ ›
- Format compact : "X/Y"
- Réinitialisation automatique lors d'ajout/suppression de tâches
- Hauteur ajustée : max-h-[calc(100vh-400px)] pour laisser place à la pagination
3. Flux RSS - Limitation (8 articles) :
- Affichage limité aux 8 articles les plus récents (au lieu de 15)
- Pas de pagination nécessaire
- Hauteur cohérente avec les autres boxes
États ajoutés :
- notesPage : pagination des notes
- todosActivePage : pagination tâches actives
- todosCompletedPage : pagination tâches complétées
- Constantes : NOTES_PER_PAGE (5), TODOS_PER_PAGE (10), RSS_MAX_ARTICLES (8)
Avantages :
- Interface plus claire et organisée
- Meilleure performance avec moins d'éléments DOM
- Navigation intuitive entre les pages
- Cohérence visuelle entre les différentes sections
Corrections :
1. Bug modal ajout de rendez-vous :
- Remplacement des composants Select par des éléments select natifs
- Les composants shadcn/ui Select ne fonctionnaient pas avec FormData
- Le modal affichait une page blanche à cause de ce problème
- Maintenant le formulaire fonctionne correctement
2. Réorganisation du layout :
- Box Todo et RSS maintenant côte à côte (au lieu d'empilées)
- Largeur de la colonne droite passée de 380px à 760px
- Grid à 2 colonnes dans la partie droite
- Hauteur augmentée : max-h-[calc(100vh-300px)] pour les deux boxes
- Plus d'espace pour afficher les tâches et articles
3. Amélioration affichage RSS :
- Suppression de la rotation automatique toutes les 20s
- Affichage de tous les articles (15) avec scroll
- Suppression de l'état rssDisplayOffset inutile
- Suppression du useEffect de rotation
- Meilleure utilisation de l'espace vertical disponible
Ajout d'un modal complet pour créer des événements directement dans Google Calendar avec toutes les fonctionnalités :
Backend (routes/calendar.routes.js) :
- Changement du scope de 'calendar.readonly' à 'calendar' pour permettre l'écriture
- Nouvelle route POST /api/calendar/events pour créer des événements
- Support complet des fonctionnalités Google Calendar :
* Titre, description, dates de début/fin
* Lieu
* Participants (attendees) avec notifications automatiques
* Rappels personnalisables (popup)
* Récurrence (quotidienne, hebdomadaire, mensuelle, annuelle)
* Visibilité (public, privé, par défaut)
* Couleurs d'événement (11 couleurs disponibles)
* Fuseau horaire Europe/Paris
- Synchronisation automatique après création pour mise à jour locale
Frontend :
- Service CalendarService.ts : nouvelle méthode createEvent()
- Bouton "Ajouter" dans la box Rendez-vous
- Modal complet avec formulaire de création d'événement
- Tous les champs Google Calendar disponibles :
* Titre et description
* Date/heure de début et fin (datetime-local)
* Lieu
* Participants (emails séparés par virgules)
* Rappels (10min, 30min, 1h, 1 jour)
* Récurrence (quotidienne, hebdomadaire, mensuelle, annuelle)
* Visibilité (public/privé)
* Couleur (11 options)
- Validation des champs obligatoires
- Messages de succès/erreur
- Rechargement automatique de la liste après création
Modifications :
1. Box Flux RSS :
- Correction du bug d'affichage de l'entête (boutons plus compacts)
- Affichage de seulement 3 articles à la fois
- Rotation automatique toutes les 20 secondes parmi les 15 derniers articles
- Indicateurs de pagination (dots) pour visualiser la rotation
- Taille de texte réduite pour plus de lisibilité
2. Box Todo List :
- Interface plus compacte pour afficher plus de tâches
- Padding réduit (p-2 au lieu de p-3)
- Taille de texte réduite (text-sm)
- Espacement vertical réduit (space-y-1.5 au lieu de space-y-3)
- Hauteur maximale augmentée de 400px à 350px
- Boutons et icônes plus petits
3. Box Calendrier :
- Ajout d'une icône bleue animée (pulse) pour les RDV du jour
- Meilleure identification visuelle des événements d'aujourd'hui
Modification :
- Layout header changé de flexbox à grid (3 colonnes)
- Logo et titre à gauche
- Date et heure centrées au milieu
- Menu utilisateur et boutons à droite
Modifications :
- Limitation du calendrier à 10 événements maximum
- Suppression des onglets dans l'éditeur de notes
- Tout intégré directement dans la note :
* Boutons d'action en haut (Tâche, Image, Fichier, Tag)
* Tags affichés directement sous les boutons
* Todos affichés dans une card
* Images en miniatures 4 par ligne, cliquables
* Fichiers listés dans une card
* Éditeur de texte riche ensuite
- Modal plein écran pour visualiser les images en grand
- Interface plus compacte et fluide
- Suppression des inputs de fichiers visibles
Modifications majeures de l'interface :
- Ajout de la date et l'heure en temps réel dans le header
- Alerte rouge dans le header 30 minutes avant un rendez-vous
- Réorganisation du layout en 3 colonnes :
* Calendrier à gauche (300px, sticky)
* Notes au milieu (responsive)
* Todo et RSS à droite (380px, sticky)
- Badge rouge "Dans moins de 30 min" sur les événements proches
- Amélioration de la compacité des cartes de notes
- Synchronisation optimisée de l'affichage du calendrier
Ajout d'une troisième méthode d'authentification pour Google Calendar :
- OAuth 2.0 (existant)
- Service Account (existant)
- API Key (nouveau)
Modifications :
- Interface d'administration avec sélection API Key
- Champs pour configurer la clé API et l'ID du calendrier
- Backend mis à jour pour gérer l'authentification par API Key
- Routes calendar adaptées pour supporter le nouveau type
- Affichage du statut de connexion mis à jour
L'utilisateur peut maintenant :
1. Sélectionner "API externe" dans les paramètres Google Calendar
2. Entrer sa clé API Google Calendar
3. Spécifier l'ID du calendrier (ou "primary")
4. Synchroniser directement avec Google Calendar
Corrections apportées pour résoudre l'échec de build :
1. **Index.tsx** :
- Ajout du else manquant dans le ternaire conditionnel (ligne 1536)
- Ajout du type explicite pour calendarAuthStatus (authType)
- Cast de type pour google_auth_type dans onValueChange
- Ajout d'un bouton "Synchroniser" pour Service Account
2. **SettingsService.ts** :
- Ajout des nouvelles propriétés à l'interface Settings :
- google_auth_type?: 'oauth2' | 'service_account'
- google_service_account_key?: string
- google_calendar_email?: string
Le build passe maintenant avec succès (✓ built in 8.72s).
Ajout de deux méthodes d'authentification au choix pour Google Calendar :
1. **OAuth 2.0** (méthode existante améliorée) :
- ✅ Prompt de sélection de compte Google ('select_account consent')
- ✅ Gestion dynamique du redirect_uri avec APP_URL
- ✅ Idéal pour accès au calendrier personnel avec consentement
2. **Service Account** (nouvelle méthode) :
- ✅ Authentification via clé JSON sans interaction utilisateur
- ✅ Parfait pour calendriers partagés en entreprise
- ✅ Synchronisation automatique en arrière-plan
- ✅ Configuration de l'email du calendrier à synchroniser
## Backend (routes/calendar.routes.js) :
- Ajout des constantes AUTH_TYPES (oauth2, service_account)
- Fonction getAuthType() pour récupérer la méthode configurée
- Fonction getServiceAccountClient() pour Service Account
- Fonction getCalendarClient() unifiée qui choisit la bonne méthode
- Route /auth-status mise à jour pour retourner le type d'auth
- Route /sync adaptée pour supporter les deux méthodes
- Support du calendrier email personnalisé pour Service Account
## Frontend (src/pages/Index.tsx) :
- Menu déroulant pour choisir entre OAuth2 et Service Account
- Interface conditionnelle selon la méthode choisie
- Champ textarea pour la clé JSON du Service Account
- Champ email pour spécifier le calendrier à synchroniser
- Affichage du type d'authentification dans le statut
- Amélioration de l'UI avec descriptions claires
## Documentation :
- OAUTH_SETUP.md : Guide complet mis à jour avec les deux méthodes
- Section dédiée au choix de la méthode
- Guide pas à pas pour Service Account
- Dépannage pour les deux méthodes
- README_GOOGLE_CALENDAR.md : Guide de démarrage rapide (nouveau)
- Comparaison des deux méthodes
- Configuration rapide pour chaque méthode
- Liens vers la documentation complète
Cette implémentation offre une flexibilité maximale pour s'adapter
à différents cas d'usage : personnel (OAuth2) ou professionnel (Service Account).
Corrections apportées :
1. **redirect_uri_mismatch** :
- Ajout de la variable APP_URL dans .env.example avec documentation
- Amélioration de la fonction getOAuth2Client pour accepter une URI personnalisée
- Gestion plus flexible du redirect_uri (APP_URL ou localhost par défaut)
2. **Choix du compte Google** :
- Modification du prompt OAuth : 'consent' → 'select_account consent'
- Force maintenant l'affichage du sélecteur de compte Google
3. **Interface utilisateur** :
- Ajout d'un encadré d'avertissement visible avec l'URL de redirection exacte
- Instructions claires pour la configuration dans Google Cloud Console
- Indication pour configurer APP_URL si nécessaire
4. **Documentation** :
- Création du fichier OAUTH_SETUP.md avec guide complet
- Checklist de vérification pour le débogage
- Exemples de configuration pour local et production
Ces modifications permettent de résoudre l'erreur 400 redirect_uri_mismatch
et d'offrir le choix du compte Google lors de la connexion.
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é
Ajouts majeurs:
- Système de tags complet pour les notes
* Table note_tags en base de données avec indexes
* API REST pour CRUD des tags (GET/POST/DELETE)
* UI avec onglet Tags dans l'éditeur de notes
* Badges cliquables avec icônes et suppression au survol
* Modal pour ajouter des tags
- Liste automatique des modèles OpenRouter
* Nouvelle route API /api/openrouter/models
* Cache des modèles avec rafraîchissement automatique (1h)
* Dropdown dans l'admin avec tous les modèles disponibles
* Bouton "Actualiser" pour forcer le refresh
* Affichage du nom et description de chaque modèle
* Fallback sur input manuel si pas de clé API
Améliorations UI:
- Ajout de dates de création et modification dans les notes
- Affichage des dates dans les cartes et l'éditeur
- Format français pour toutes les dates
- Onglets passés de 4 à 5 colonnes pour inclure Tags
- Animation de chargement sur le bouton refresh des modèles
Architecture:
- Nouveau service TagsService.ts pour la gestion des tags
- Nouveau service OpenRouterService.ts pour l'API OpenRouter
- Nouvelles routes openrouter.routes.js
- Support Select component pour les dropdowns
- Modals InputModal utilisés pour les tags
Problèmes résolus :
1. **Écriture lente/bloquée** : Implémentation d'un système de debounce (1s) pour l'auto-save
- onChange du RichTextEditor n'appelle plus l'API à chaque frappe
- Mise à jour locale immédiate de l'état pour une interface réactive
- Sauvegarde automatique après 1 seconde d'inactivité
2. **Images ne s'affichent pas** :
- Fix extraction de result.image || result dans uploadImage
- Mise à jour immédiate de l'état local avant l'API call
- Reset du input file après upload
- Ajout message de succès
3. **Fichiers ne s'affichent pas** :
- Fix extraction de result.file || result dans handleFileUpload
- Mise à jour immédiate de l'état local
- Reset du input file après upload
4. **Architecture améliorée** :
- handleUpdateNote avec useCallback pour performance
- handleContentChange dédié avec debounce
- Mise à jour optimiste de l'UI (local state update avant API)
- Cleanup proper du timer sur unmount
Résultat :
- Écriture fluide et réactive dans les notes
- Upload d'images fonctionnel avec feedback immédiat
- Upload de fichiers fonctionnel
- Ajout de todos dans les notes fonctionnel
- Toutes les modifications sont auto-sauvegardées
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
- Layout en 2 colonnes : notes à gauche (2 colonnes), boxes à droite
- Les notes s'ouvrent directement dans l'écran au lieu d'un modal
- Bouton "Retour aux notes" pour revenir à la grille
- Suppression du Dialog modal pour l'édition de notes
- Boxes Todos et RSS empilées verticalement dans la colonne de droite
- Résolution des conflits de types entre Image (lucide-react) et Image (Note)
- Ajout du champ original_name à l'interface Image
- Suppression de la sidebar : les notes sont affichées en grille 4 colonnes
- Notes s'ouvrent en dialog plein écran au clic
- Boxes Todos et RSS élargies et côte à côte en haut de page
- Optimisation de l'affichage pour résolution 1920x1080
- Ajout du changement de mot de passe dans l'administration
- Ajout du filtre Actives/Archivées pour les notes
- Amélioration des transitions et effets hover sur les cards
Cette mise à jour améliore l'interface utilisateur des tâches et des flux RSS
avec une meilleure organisation et de nouvelles fonctionnalités.
Changements principaux:
1. **Layout Todos et RSS côte à côte**
- Les deux boxes sont maintenant affichées côte à côte
- Meilleure utilisation de l'espace disponible
- Layout en grid responsive
2. **Système d'onglets pour les Todos**
- Onglet "Actives" : affiche uniquement les tâches non complétées
- Onglet "Complétées" : affiche les tâches terminées avec style barré
- Séparation claire entre tâches en cours et terminées
- Possibilité de re-activer une tâche complétée en cliquant dessus
3. **Endpoint PATCH /api/todos/:id/toggle ajouté**
- Nouvelle route backend pour basculer l'état d'une tâche
- Résout l'erreur 404 précédente
- Logging des actions pour suivi
4. **Optimisations visuelles**
- Tailles de texte réduites (text-xs) pour plus de contenu visible
- Hauteurs de boutons optimisées
- Espacements améliorés
- Animations et transitions fluides
Fichiers modifiés:
- routes/todos.routes.js : ajout de la route toggle
- src/pages/Index.tsx : refonte de la sidebar droite avec onglets
Cette version améliore significativement l'expérience utilisateur pour
la gestion des tâches avec une séparation claire entre tâches actives
et complétées.
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
LogiFlow