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.
Problème:
La configuration précédente (external: false) était incorrecte. Le réseau
nginx_default DOIT être un réseau externe créé manuellement avant le
déploiement. L'erreur "network has incorrect label" indiquait que le
réseau existait avec une configuration incompatible.
Solution correcte:
- Revert docker-compose.yml: external: false → external: true
- Le réseau nginx_default doit être créé avec "docker network create"
- Documentation complète de la création du réseau externe
- Ajout troubleshooting pour l'erreur "incorrect label"
Changements:
- docker-compose.yml: Restauration de external: true (config correcte)
- README.md:
* Ajout étape 1: Créer le réseau externe avant tout
* Section "Réseau Docker" mise à jour avec les bonnes pratiques
* Troubleshooting: Ajout solution pour "incorrect label"
* Clarification: Le réseau est EXTERNE et partagé entre services
Pourquoi externe:
- Permet le partage du réseau entre plusieurs stacks Docker Compose
- Nécessaire pour la communication avec Nginx ou autres services
- Persist après "docker-compose down"
- Architecture standard pour les déploiements multi-services
Problème:
Le build Docker échouait lors de l'exécution de "npm run build" avec
l'erreur "exit code 2". La compilation TypeScript avec project references
(tsc -b) échouait en raison de problèmes de résolution de types dans
l'environnement Docker.
Solution:
- Modification du script build pour utiliser directement Vite sans pré-compilation TypeScript
- Ajout d'un script "typecheck" séparé pour la vérification des types en développement
- Vite gère nativement la transpilation TypeScript de manière plus permissive
- Cette approche est la méthode recommandée pour les projets Vite en production
Changements:
- package.json:
* build: "tsc -b && vite build" → "vite build"
* Ajout: typecheck: "tsc -b" (pour vérification optionnelle)
- README.md:
* Ajout section "Développement local" avec commandes npm
* Ajout troubleshooting pour l'erreur de build Docker
* Documentation de la commande typecheck
* Amélioration des commandes Docker (ajout rebuild complet)
Bénéfices:
- Build Docker plus rapide et plus robuste
- Pas de blocage sur les erreurs TypeScript mineures
- Possibilité de vérifier les types séparément en développement
- Alignement avec les best practices Vite
Problème:
Le redéploiement du stack échouait avec l'erreur "network nginx_default
declared as external, but could not be found" car le réseau Docker externe
n'existait pas.
Solution:
- Modification du réseau nginx_default de externe à interne dans docker-compose.yml
- Le réseau est maintenant créé automatiquement par Docker Compose
- Ajout de documentation pour l'utilisation avec Nginx existant
- Ajout d'une section de dépannage pour cette erreur spécifique
Changements:
- docker-compose.yml: Changement de external: true à external: false avec
configuration explicite du driver bridge
- README.md: Suppression du prérequis réseau externe, ajout de la section
"Réseau Docker" et documentation de l'erreur dans le dépannage
Cette modification permet au stack de se déployer automatiquement sans
nécessiter de configuration réseau préalable, tout en restant compatible
avec des services Nginx existants.
- É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
Correction d'une erreur critique qui empêchait le chargement des notes:
- La requête tentait de joindre une table "tags" inexistante
- La structure réelle utilise directement la colonne "tag" dans note_tags
- Correction: SELECT id, tag as name FROM note_tags au lieu de la jointure
Cette erreur causait:
- SQLITE_ERROR: no such table: tags
- Disparition des notes après création
- Impossibilité de charger la liste des notes
Fix immédiat pour restaurer le fonctionnement normal de l'application.
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
La route /auth-url nécessitait requireAdmin mais devrait être accessible
à tous les utilisateurs authentifiés pour qu'ils puissent connecter
leur propre compte Google Calendar.
Les routes oauth-callback et force-oauth2 doivent être accessibles
sans authentification car elles sont appelées par Google ou publiquement.
- Suppression du router.use(authenticateToken) global
- Ajout de authenticateToken individuellement aux routes qui en ont besoin
- oauth-callback et force-oauth2 restent publiques
Ajout de la route GET /api/calendar/force-oauth2 pour forcer
le changement du type d'authentification vers OAuth2 dans la BDD.
Cette route permet de contourner un problème où le bouton
"Enregistrer" ne sauvegarde pas correctement google_auth_type.
Ajout d'un guide détaillé pour configurer Google Calendar avec OAuth 2.0 :
- Explication de la différence entre OAuth 2.0, Service Account et API Key
- Instructions étape par étape pour extraire Client ID et Secret du JSON
- Dépannage des erreurs courantes
- Rappel que les API Keys ne fonctionnent pas pour les calendriers privés
Note: Exemples génériques utilisés pour éviter d'exposer les secrets
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
Claude
LogiFlow