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
Michael