Removed all temporary debug code added during investigation:
- Removed debug console.log statements from loadNotes function
- Removed debug console.log statements from filter logic
- Removed red debug panel showing filter state in UI
The application code is now clean and production-ready.
Added console.log statements to track:
- When notes API fetch is initiated
- Number of notes fetched
- The actual notes data returned
This helps identify if the issue is with the API request, the response,
or the data handling in the frontend.
Added console.log statements and temporary debug UI panel to help
diagnose why notes are not displaying. This includes:
- Logging total notes count and active filters
- Logging which specific filter is excluding each note
- Visual debug panel showing filter state in the UI
This is temporary debugging code to resolve the issue reported
by the user where no notes are displaying.
- 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
- Add view mode toggle (List/Kanban) in mobile notes page
- Integrate KanbanBoard component with drag & drop support
- Support moving notes between columns via tags
- Auto-refresh notes list after moving to new column
- Maintain search and filter functionality in Kanban view
- Add mobile-optimized horizontal scrolling for Kanban columns
- Update Todo interface to include due_date, parent_id, level fields
- Add due_date parameter to NotesService.addTodo method
- Add due_date parameter to TodosService.createTodo method
- updateTodo already supports Partial<Todo> including due_date
- Backend migrations already created (003 and 004)
- Prepare foundation for due date UI in future updates
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 noteLinks utility for wiki-style [[Note Title]] links
- Support automatic link detection and conversion to clickable HTML
- Show broken links (when target note doesn't exist) in gray strikethrough
- Implement backlinks detection (find notes linking to current note)
- Add autocomplete suggestions when typing [[ for quick note selection
- Support cursor position detection for inline link editing
- Prioritize exact matches and recent notes in suggestions
- Convert links to HTML with custom styling and click handlers
- Create smartTags utility with keyword extraction algorithm
- Filter out 100+ French stop words for better keyword quality
- Implement category-based tag suggestions (travail, dev, design, etc.)
- Suggest tags from similar notes based on content similarity
- Display smart suggestions with one-click add in note editor
- Show sparkle icon to indicate AI-assisted suggestions
- Combine multiple suggestion strategies for best results
- Limit to top 8 most relevant suggestions per note
- 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 comprehensive markdown export for notes and todos with automatic HTML to Markdown conversion.
New Features:
- Export single note to Markdown file
- Export all notes to combined Markdown
- Export todos list to Markdown
- Smart HTML to Markdown conversion
- Preserves formatting, links, lists, and code blocks
Files Created:
- src/utils/markdownExport.ts - Complete export utilities
Desktop (Index.tsx):
- Added FileDown icon to imports
- New export button in note editor toolbar
- Downloads note as .md file with one click
Mobile (NoteDetailPage.tsx):
- Added "Exporter en Markdown" to dropdown menu
- Same functionality as desktop version
Markdown Export Features:
✅ Converts HTML formatting to Markdown syntax
✅ Includes note metadata (creation date, tags, priority)
✅ Exports todos as checkboxes [ ] or [x]
✅ Includes image references
✅ Automatic filename generation
✅ One-click download
Export includes:
- Note title as H1
- Creation date and metadata
- Tags with # prefix
- Priority indicator ⭐
- Full content with formatting preserved
- Todo items with completion status
- Image links
Perfect for:
- Backing up notes
- Sharing notes externally
- Version control (git)
- Using notes in other markdown editors
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
Added client-side image compression to improve upload speed and reduce storage.
New Features:
- Created imageCompression utility (src/utils/imageCompression.ts)
* Automatically compresses images larger than 1MB
* Resizes to max 1920x1080px while preserving aspect ratio
* Uses 80% JPEG quality by default
* Preserves PNG transparency when present
* Falls back to 60% quality if still over 2MB
Mobile (NoteDetailPage.tsx):
- Integrated compression before upload
- Shows compression stats to user (e.g., "5.2 MB → 1.1 MB")
- Better error messages with specific details
Desktop (Index.tsx):
- Same compression integration as mobile
- Consistent user experience across platforms
Benefits:
✅ Users can upload large photos from cameras/phones
✅ Faster uploads (smaller files)
✅ Reduced server storage requirements
✅ Better mobile experience (photos often 5-10MB)
✅ Transparent to user (happens automatically)
Technical Details:
- Uses HTML5 Canvas API for processing
- Client-side compression (no server load)
- Maintains image quality while reducing size
- Handles JPEG, PNG, WebP, and GIF formats
- Smart transparency detection for PNGs
Fixed image upload issues by improving error handling and validation:
Mobile (NoteDetailPage.tsx):
- Added file size validation (5MB max) before upload
- Added error message when upload returns null
- Specified exact image types in accept attribute
- Better user feedback for all error cases
Desktop (Index.tsx):
- Added file size validation (5MB max) before upload
- Added error message when upload returns null
- Specified exact image types in accept attribute
- Removed unnecessary handleUpdateNote call (backend ignores images field)
- Fixed state update to only update local state, not call backend
Both versions now:
- Show clear error messages to users when upload fails
- Validate file size before attempting upload
- Accept only supported formats: JPEG, PNG, WebP, GIF
- Handle null responses from upload service properly
This fixes the silent failure issue where images would not upload but no error was shown to the user.
Fixed critical bug where todos added on mobile or desktop were being silently lost.
Root cause:
- Mobile and desktop were sending todos via the generic PUT /api/notes/:id endpoint
- Backend ignored the 'todos' field in this endpoint (only processes title and content)
- Users saw success messages but todos were never saved to database
- On reload, todos disappeared
Solution:
- Added dedicated todo management methods to NotesService:
* addTodo() - POST /api/notes/:id/todos
* updateTodo() - PUT /api/notes/todos/:todoId
* toggleTodo() - PUT /api/notes/todos/:todoId
* deleteTodo() - DELETE /api/notes/todos/:todoId
- Updated NoteDetailPage.tsx (mobile) to use proper API methods
- Updated Index.tsx (desktop) to use proper API methods
- Both versions now correctly persist todos to the database
Files modified:
- src/services/NotesService.ts - Added todo management methods
- src/pages/mobile/NoteDetailPage.tsx - Fixed todo handlers
- src/pages/Index.tsx - Fixed todo handlers in note detail view
Implémente un système de marquage de priorité pour les tâches avec une
icône étoile cliquable.
Fonctionnalités ajoutées :
- Champ priority (BOOLEAN) ajouté aux tables global_todos et note_todos
- Migration automatique avec script add-priority-field.js
- Route API PATCH /api/todos/:id/priority pour basculer la priorité
- Icône étoile (Star) dans l'interface frontend
- Tri automatique : tâches prioritaires en premier
- Index PostgreSQL pour optimiser les performances
Comportement de l'icône :
- Toujours visible et jaune quand la tâche est prioritaire
- Visible au survol (hover) quand la tâche n'est pas prioritaire
- Un clic bascule l'état prioritaire/non prioritaire
- Affichage discret (opacity 50%) pour les tâches complétées
Scripts npm ajoutés :
- npm run db:migrate:priority - Exécuter la migration
Routes API mises à jour :
- GET /api/todos - Inclut le champ priority, tri par priorité
- POST /api/todos - Accepte le champ priority
- PUT /api/todos/:id - Accepte le champ priority
- PATCH /api/todos/:id/priority - Bascule la priorité (nouveau)
UI améliorée :
- Icône étoile jaune pour les tâches prioritaires
- Animation au survol pour les interactions
- Tooltip explicatif au survol
- Onglets "Actives" et "Complétées" mis à jour
Problème :
- Erreur 502 (Bad Gateway) sur /api/openrouter/chat
- Message d'erreur générique "Provider returned error" peu informatif
- Difficile de diagnostiquer la cause réelle du problème
Solution backend (routes/openrouter.routes.js) :
1. Ajout de logs détaillés à chaque étape :
- Début de requête avec modèle et nombre de messages
- Validation de la clé API
- Requête envoyée à OpenRouter
- Réponse reçue avec status HTTP
- Contenu de la réponse ou erreur détaillée
2. Amélioration de la gestion des erreurs :
- Extraction du message d'erreur d'OpenRouter
- Logs structurés avec contexte complet
- Messages d'erreur plus descriptifs
Solution frontend (src/services/OpenRouterService.ts) :
1. Ajout de logs console à chaque étape
2. Messages d'erreur contextuels selon le code HTTP :
- 400 : Requête invalide (message d'erreur API)
- 401 : Clé API invalide
- 402 : Crédits épuisés
- 429 : Trop de requêtes
- 502/503 : Service temporairement indisponible
3. Validation de la réponse :
- Vérification que le contenu existe
- Message d'erreur si réponse vide
Résultat :
- Logs détaillés backend + frontend pour diagnostic
- Messages d'erreur clairs et actionnables pour l'utilisateur
- Meilleure traçabilité des problèmes OpenRouter
- 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.
Claude
LogiFlow
Michael