- Changer z-50 en z-40 pour le bouton de capture rapide
- Les modals (Dialog) avec z-50 passent maintenant devant
- Le bouton QuickCapture n'est plus visible quand un modal est ouvert
- Utiliser useCallback pour mémoriser handleTimerComplete
- Retirer timeLeft des dépendances du useEffect qui gère l'intervalle
- Le useEffect ne dépend plus que de isRunning et handleTimerComplete
- L'intervalle continue de tourner même après démontage/remontage du composant
- Nettoyage propre de l'intervalle avec intervalRef.current = null
- Retirer size="lg" du bouton QuickCapture
- Aligner les deux boutons sur right-4 (au lieu de right-6 pour QuickCapture)
- Ajouter les mêmes effets hover et transition aux deux boutons
- Les boutons ont maintenant exactement la même taille (h-14 w-14)
- Les icônes ont la même taille (h-6 w-6)
- Déplacer le bouton de capture rapide plus haut (bottom-24 au lieu de bottom-6)
- Le bouton QuickCapture est maintenant au-dessus du bouton de chat IA
- Plus de superposition des boutons
- Sauvegarder l'état du timer (mode, temps restant, état running, sessions) dans localStorage
- Restaurer l'état au montage du composant
- Le timer ne se réinitialise plus quand le modal se ferme et se rouvre
- Simplifier le PomodoroModal pour utiliser children directement
- Créer un composant PomodoroModal pour afficher le timer
- Ajouter une icône Clock dans le header qui affiche le temps restant quand le timer est actif
- Modifier PomodoroTimer pour accepter une callback onStateChange
- Retirer la box Pomodoro de la page principale
- L'icône change de style quand le timer est en cours et affiche le décompte
- Remplacer l'audio base64 par Web Audio API dans PomodoroTimer pour éviter les erreurs CSP
- Ajouter une fonction cleanHtmlContent pour correctement décoder les entités HTML
- Corriger l'affichage des notes pour supprimer les caractères parasites (&nb-, etc.)
- Créer un nouveau composant StatsModal pour afficher les statistiques
- Ajouter une icône BarChart3 dans le header à côté du bouton de thème
- Retirer le StatsDashboard de sa position sous le calendrier
- Afficher les statistiques dans un modal au clic sur l'icône
- Create exportImport utility with JSON and CSV export
- Support full backup with version tracking
- Add BackupData interface with notes, todos, settings
- Implement file parsing and validation
- Create ExportImportModal component with tabs
- Show current data statistics before export
- Preview backup content before import
- Download as timestamped JSON or CSV files
- Calculate and display backup statistics
- Support reading and validating imported backups
Keyboard Shortcuts:
- Create useKeyboardShortcuts hook with configurable shortcuts
- Support Ctrl/Cmd, Alt, Shift modifiers
- Add 7 global shortcuts (New note, Search, Quick capture, etc.)
- Create KeyboardShortcutsHelp modal with categorized shortcuts
- Show formatted shortcut keys (⌘ on Mac, Ctrl on Windows)
- Press ? to open shortcuts help
Statistics Dashboard:
- Create StatsDashboard component with productivity metrics
- Calculate productivity score (0-100) based on completion rate
- Show notes statistics (total, active, archived, priority)
- Display todos statistics with completion rate
- Track content stats (notes with todos/images/files, unique tags)
- Show recent activity (notes updated in last 7 days)
- Visual progress bar for productivity score
- Integrate dashboard in left column below calendar
- Create QuickCaptureWidget with floating action button
- Support quick note capture with optional title
- Auto-generate timestamped title if none provided
- Add keyboard shortcuts: Ctrl+Enter to save, Escape to cancel
- Integrate into desktop interface with reload on capture
- Display visual feedback with kbd tags for shortcuts
- Position as floating FAB in bottom-right corner
- Refresh notes list automatically after capture
- Create KanbanBoard component with drag-and-drop functionality
- Support 5 columns: Backlog, À faire, En cours, En révision, Terminé
- Use tag-based system to track note status in columns
- Add view toggle between List and Kanban modes in desktop interface
- Display note metadata (todos, images, files, tags) in Kanban cards
- Support moving notes between columns by dragging
- Auto-update tags when moving notes to different columns
- Show task completion progress in Kanban cards
- Create PomodoroTimer component with 25/5/15 minute intervals
- Support work sessions, short breaks, and long breaks
- Track completed sessions with visual counter
- Add progress bar and audio notification when timer completes
- Auto-advance to appropriate break after work session
- Add pause/resume and reset functionality
- Integrate timer in desktop right column above todos/RSS
- Create AdvancedSearch component with multiple filter options
- Add filters for tags, date range, content type (todos/images/files), and priority
- Integrate advanced search in desktop and mobile note pages
- Extract unique tags from notes for filter dropdown
- Support multiple simultaneous filters with clear visual feedback
- Reset pagination when filters change
- Create noteTemplates.ts with 10 default templates (Meeting, Daily Journal, Project Planning, etc.)
- Add TemplateSelector component with search and category filtering
- Integrate template selector in desktop and mobile note creation flows
- Support automatic todo creation from templates
- Organize templates by category (Travail, Personnel, Créativité, Autre)
Implemented complete theme switching with three modes:
- Light theme
- Dark theme
- System (auto-detect from OS)
Changes:
- Created ModeToggle component with dropdown menu (src/components/mode-toggle.tsx)
- Added theme toggle to desktop header (Index.tsx)
- Enhanced mobile settings with radio group for theme selection (SettingsPage.tsx)
- Changed default theme from "light" to "system" for better UX (App.tsx)
Features:
✅ Seamless theme switching without page reload
✅ Persists user preference in localStorage
✅ System theme auto-detects OS preference
✅ Smooth transitions between themes
✅ Works on both mobile and desktop
Desktop: Theme toggle button in top navigation
Mobile: Theme settings in Settings page with Light/Dark/System options
- 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