UX: Titre 'À faire' + Source RSS + Tri todos + Notifications internes

1. Titre 'À faire' au lieu de 'Quick Tasks'
   - Changé public/index.html ligne 126
   - Meilleure localisation française

2. Affichage source RSS au lieu du modèle IA
   - Ajout colonne feed_title à rss_summaries (migration auto)
   - Backend stocke feed_title lors de la génération
   - GET /api/rss/summaries retourne feed_title
   - Frontend affiche 📰 Source + 📅 Date au lieu du modèle
   - Plus pertinent pour l'utilisateur

3. Tri automatique des todos : actives en premier
   - renderTodos() trie : actives avant complétées
   - Si même statut : tri par ID décroissant (récentes en premier)
   - Sort: a.completed ? 1 : -1

4. Système de notifications internes
   - Remplacé TOUS les alert() par showNotification()
   - Types : success, error, warning, info
   - Animations : slide-in/slide-out depuis la droite
   - Auto-fermeture après 4 secondes
   - Bouton de fermeture manuelle
   - Position : top-right, z-index 300
   - Icônes SVG selon le type
   - Couleurs : vert (success), rouge (error), jaune (warning), bleu (info)

Frontend - Notifications:
   - showNotification(message, type, duration)
   - closeNotification(notification)
   - Container fixe en haut à droite
   - Empilage vertical des notifications
   - Escape HTML automatique

CSS - Nouveaux styles:
   - .notifications-container (fixed, top-right)
   - .notification + variations par type
   - Animations slideInRight / slideOutRight
   - Border-left colorée selon le type
   - Responsive et accessible

Impact utilisateur:
   ✓ Plus de popups système alert() invasives
   ✓ Notifications élégantes et non-bloquantes
   ✓ Feedback visuel clair avec icônes et couleurs
   ✓ Source RSS affichée au lieu du modèle IA
   ✓ Todos actives toujours en haut
   ✓ Interface 100% en français

Files:
   - public/index.html: Titre + container notifications
   - public/css/skeleton.css: Styles notifications
   - public/js/complete-app.js: showNotification() + remplacement 40+ alert()
   - config/database.js: Migration feed_title
   - routes/rss.routes.js: Stockage et retour feed_title
This commit is contained in:
Claude committed 2025-11-11 19:35:14 +00:00
1 parent 73391def6c
commit 7354818d3e
5 files changed
+260 -47

No files matched your search

+119
View File
@@ -174,3 +174,122 @@
font-size: var(--font-size-sm);
opacity: 0.7;
}
/* Système de notifications */
.notifications-container {
position: fixed;
top: calc(var(--header-height) + 20px);
right: 20px;
z-index: 300;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 400px;
pointer-events: none;
}
.notification {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 16px 20px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 12px;
opacity: 0;
transform: translateX(400px);
animation: slideInRight 0.3s ease-out forwards;
pointer-events: auto;
min-width: 300px;
position: relative;
}
.notification.closing {
animation: slideOutRight 0.3s ease-in forwards;
}
.notification-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.notification-success {
border-left: 4px solid var(--color-success);
}
.notification-success .notification-icon {
color: var(--color-success);
}
.notification-error {
border-left: 4px solid var(--color-danger);
}
.notification-error .notification-icon {
color: var(--color-danger);
}
.notification-warning {
border-left: 4px solid var(--color-warning);
}
.notification-warning .notification-icon {
color: var(--color-warning);
}
.notification-info {
border-left: 4px solid var(--color-info);
}
.notification-info .notification-icon {
color: var(--color-info);
}
.notification-content {
flex: 1;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: 1.4;
}
.notification-close {
width: 24px;
height: 24px;
padding: 4px;
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: 50%;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.notification-close:hover {
background: var(--color-hover);
color: var(--color-text-primary);
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(400px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOutRight {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(400px);
}
}