- Admin: Système de tabs pour Users/RSS/OpenRouter
- Admin: Modal de changement de mot de passe (sans prompts navigateur)
- RSS: CRUD complet des flux RSS (ajout, toggle, suppression)
- RSS: Fetch et affichage des 10 derniers articles
- RSS: Click sur article ouvre dans nouvel onglet
- RSS: Bouton résumé IA avec OpenRouter (crée une note)
- OpenRouter: Chargement/sauvegarde des paramètres (API key, modèle, prompt)
- OpenRouter: Sélecteur de modèles avec recherche/filtre
- OpenRouter: Prompt par défaut optimisé pour synthèse d'articles
- Animations: Ajout spinner pour états de chargement
- Event delegation pour toutes les nouvelles interactions
## Layout:
- Grid 3 colonnes: notes + todo-box + rss-box
- RSS box sticky avec scroll indépendant
- Styles articles RSS avec preview, source, date
- Bouton résumé IA dans header RSS box
- Responsive: stack vertical sur <1200px
## Modal Admin:
- Système d'onglets moderne (Users/RSS/OpenRouter)
- Tabs avec underline animation sur actif
- Tab content avec scroll indépendant (60vh max)
- Styles harmonisés avec thème noir/blanc
## Flux RSS:
- Liste feeds avec toggle on/off (switch animé)
- Card per feed: title, URL, actions
- Input URL avec validation visuelle
- Bouton fetch articles avec style secondaire
- Hover effects et transitions
## OpenRouter Settings:
- Form groups avec labels et hints
- Input API key (type password)
- Select modèle avec taille 8 pour recherche
- Textarea prompt avec resize vertical
- Checkbox activation résumés
- Link vers openrouter.ai
## Modal changement mot de passe:
- Small modal (450px max)
- Form clean avec 2 inputs password
- Labels et placeholders clairs
- Actions alignées à droite
- Validation visuelle
## Design tokens:
- Cohérence totale avec variables.css
- Shadows, radius, spacing uniformes
- Transitions fluides partout
- States hover/focus/active
- Accessible et moderne
## Base de données:
- Table settings (key-value pour paramètres globaux)
- Table rss_feeds (url, title, description, enabled, last_fetched_at)
- Table rss_articles (feed_id, title, link, description, pub_date, content)
- Index optimisés pour performance
## Routes Settings (/api/settings):
- GET /api/settings - Récupérer tous les paramètres
- GET /api/settings/:key - Récupérer un paramètre
- PUT /api/settings/:key - Mettre à jour un paramètre
- DELETE /api/settings/:key - Supprimer un paramètre
- Middleware requireAdmin sur toutes les routes
## Routes RSS (/api/rss):
- GET /api/rss/feeds - Liste des flux RSS (admin)
- POST /api/rss/feeds - Ajouter flux RSS avec parsing validation (admin)
- PUT /api/rss/feeds/:id - Activer/désactiver flux (admin)
- DELETE /api/rss/feeds/:id - Supprimer flux (admin)
- POST /api/rss/fetch - Récupérer articles de tous flux actifs (admin)
- GET /api/rss/articles - Récupérer 10 derniers articles (tous users)
- POST /api/rss/summarize - Générer résumé OpenRouter (admin)
- GET /api/rss/models - Liste modèles OpenRouter (admin)
## Intégration OpenRouter:
- Appel API avec clé, modèle et prompt configurables
- Résumé intelligent des 10 derniers articles
- Prompt par défaut optimisé pour résumés d'actualités
- Support GPT-4, Claude 3, Gemini, Llama 3, Mistral, etc.
- Gestion erreurs et timeout
## Parser RSS:
- rss-parser installé pour parsing flux
- Gestion articles avec contenu, description, date
- Détection doublons par URL
- Update automatique infos flux
## Frontend HTML:
- Modal admin avec système à onglets (Users/RSS/OpenRouter)
- Modal changement mot de passe sans prompt navigateur
- Box RSS dans page principale affichage 10 derniers articles
- Bouton résumé IA dans header box RSS
- Inputs pour gestion flux RSS
- Configuration OpenRouter (API key, modèle, prompt, activation)
- Sélecteur modèles avec recherche
Prochaine étape: CSS + JavaScript pour fonctionnalités
## Corrections UX:
- Fix coins arrondis en bas des notes étendues (overflow: hidden)
- Remplacement prompt() par input inline pour ajout de tâches
- Bouton "Ajouter" avec validation au clic ou touche Entrée
- Expérience utilisateur fluide sans popups intrusifs
## Système de fichiers complet:
### Backend:
- Création table note_files (id, note_id, filename, original_name, file_size, mime_type, created_at)
- POST /api/notes/:id/files - Upload fichier (multer, 10MB max)
- GET /api/notes/:id/files - Liste fichiers d'une note
- GET /api/notes/files/:fileId/download - Téléchargement sécurisé
- DELETE /api/notes/files/:fileId - Suppression fichier
- Stockage dans public/uploads/files/
- Auto-création dossier si nécessaire
### Frontend:
- Bouton "Ajouter un fichier" dans footer des notes
- Input hidden fileInput pour sélection
- Affichage liste fichiers avec icône, nom, taille
- Boutons télécharger/supprimer par fichier
- Fonction formatFileSize() pour affichage lisible
- Event delegation pour tous les boutons fichiers
- Confirmation avant suppression
### Intégration:
- GET /api/notes charge maintenant files[] et files_count
- renderInlineFiles() génère HTML des fichiers
- downloadFile() ouvre download dans nouvel onglet
- deleteFile() avec confirmation dialog
- Reload automatique après upload/delete
- Conservation état étendu après opérations
### CSS moderne:
- .note-file-item avec hover effect
- .note-file-icon, .note-file-info, .note-file-actions
- Buttons download/delete avec transitions
- Design cohérent avec reste de l'app
- Truncate nom fichier avec ellipsis
Tous types de fichiers acceptés (PDF, DOC, ZIP, etc.)
Implémentation d'un système d'expansion inline des notes au lieu de modals:
- Les notes s'agrandissent directement dans la grille au clic
- Mode compact: prévisualisation avec titre, contenu, image, premiers 3 todos
- Mode étendu: édition complète avec titre, contenu, todos, image, actions
- Auto-save avec debounce (1s) sur les modifications
- Filtres Actives/Archivées pour organiser les notes
- Système d'archivage avec endpoint API dédié
Fonctionnalités inline:
- expandNote(noteId): agrandir une note
- collapseNote(): réduire la note étendue
- saveNoteInline(noteId): sauvegarde auto avec debounce
- archiveNote(noteId, archived): archiver/désarchiver
- deleteNoteInline(noteId): supprimer depuis l'inline
- Gestion complète des todos inline (add, toggle, delete)
- Upload/suppression d'images inline
- Fermeture avec Escape
Event delegation pour performances:
- Tous les événements gérés via delegation sur #notesGrid
- Suppression de tous les attributs onclick/onchange (CSP compliant)
- Click handlers: expand, collapse, archive, delete, image, todos
- Change handlers: checkbox todos inline
CSS moderne avec shadows:
- .note-card.expanded: carte agrandie sur toute la largeur
- Styles inline pour titre, contenu, todos, image, footer
- Transitions fluides et hover effects
- View filters avec background pills
- Responsive grid layout
Backend prêt:
- GET /api/notes?archived=true/false
- PUT /api/notes/:id/archive
- Todos chargés avec chaque note
- Migration auto colonne 'archived'
- Ajout section-actions avec view-filters
- Boutons Actives/Archivées avec icônes SVG
- Simplification: plus de note-editor-backdrop
- Input file caché pour images
- Structure prête pour expansion inline des notes
- Interface plus épurée et moderne
- Adaptation pour note editor au lieu de modal
- Changement des IDs (noteModal → noteEditorBackdrop)
- Ajout bouton Enregistrer avec feedback
- Event listeners mis à jour
- Fonction saveCurrentNote pour sauvegarde manuelle
- Fermeture par backdrop ou Escape maintenue
- Auto-save conservé avec debounce
- Toutes les fonctionnalités préservées
- Design moderne avec shadows élégantes
- Note cards avec effet hover et transformation
- Todo box sticky avec design épuré
- Note editor fullscreen au lieu de modal
- Boutons modernes avec transitions
- Tables admin avec hover effects
- Modal de confirmation élégant
- Animations fluides (fadeIn, slideUp)
- Responsive design intégré
- Nouveau design system moderne (blanc/noir)
- Favicon SVG moderne avec logo
- Nouveau header avec logo SVG intégré
- Layout grid: notes + todo box (pas de sidebar)
- Variables CSS complètes (shadows, spacing, fonts)
- Nouveau layout responsive
- Interface minimaliste et élégante
- Ajout bouton 🔑 Mot de passe pour chaque utilisateur
- Fonction changeUserPassword avec confirmation du mot de passe
- Validation de longueur minimum (6 caractères)
- Double saisie pour confirmation
- Utilisation de la route PUT /api/users/:id existante
- Style bleu pour le bouton d'édition
- Event delegation pour le nouveau bouton
- Permet aux admins de changer leur propre mot de passe
- Remplacement de tous les onclick/onchange par event delegation
- Utilisation de data attributes (data-todo-id, data-note-todo-id, data-user-id)
- Event listeners attachés aux conteneurs (#todoList, #noteTodosList, #usersTableBody)
- Plus besoin d'exposer les fonctions sur window
- Conforme à la Content Security Policy de Helmet.js
- Résout: 'script-src-attr' violations bloquant les actions de la todo list
- Ajout modal de confirmation personnalisé avec icône, titre et message
- Remplacement de tous les confirm() natifs par le nouveau modal
- Modal animé avec backdrop et fermeture Escape
- Style barré automatique pour les todos complétées (déjà présent)
- Exposition globale des fonctions toggleTodo et deleteTodo
- Confirmation visuelle pour :
* Suppression de notes
* Suppression de todos (note et globaux)
* Suppression d'images
* Suppression d'utilisateurs
* Création d'admin
- Design cohérent avec boutons Annuler/Confirmer
- Animations smooth avec transitions CSS
- Ajout event listener pour le bouton Administration
- Fonctions pour ouvrir/fermer le modal admin
- Chargement et affichage des utilisateurs dans une table
- Création d'utilisateurs avec prompts
- Suppression d'utilisateurs avec confirmation
- Style pour le bouton de suppression
- Fermeture du modal avec Escape ou clic sur backdrop
- Résout le problème: impossible d'accéder à l'administration
- Remplacement de COUNT(DISTINCT) par une sous-requête dans SQLite
- Ajout de vérification Array.isArray côté client
- Gestion d'erreur améliorée avec fallback sur tableau vide
- Correction du bug 'filtered.forEach is not a function'
- L'API retourne toujours un tableau, même en cas d'erreur
Claude
Michael