diff --git a/keep-notes/GLOBALS-CSS-CORRIGÉ-SLATE.css b/keep-notes/GLOBALS-CSS-CORRIGÉ-SLATE.css new file mode 100644 index 0000000..6957246 --- /dev/null +++ b/keep-notes/GLOBALS-CSS-CORRIGÉ-SLATE.css @@ -0,0 +1,323 @@ +# 🔧 CORRECTION COMPLÈTE : Thème Slate + +Ramez, voici le fichier CORRIGÉ complet à copier dans `keep-notes/app/globals.css` + +--- + +## ✅ INSTRUCTIONS PRÉCISES + +### Étape 1 : Remplacez le thème principal (:root) +Cherchez `:root {` dans le fichier (ligne 100) +Remplacez TOUTES les lignes 100-133 par ceci : + +```css +:root { + --radius: 0.625rem; + + /* ============================================ + THEME SLATE (GRIS-BLEU) - PRINCIPAL ⭐ + ============================================ */ + + /* Backgrounds */ + --background: oklch(0.985 0.003 230); /* Blanc grisâtre léger */ + --card: oklch(1 0 0); /* Blanc pur */ + --sidebar: oklch(0.97 0.004 230); /* Gris-bleu très pâle */ + --input: oklch(0.98 0.003 230); /* Gris-bleu pâle */ + + /* Textes */ + --foreground: oklch(0.2 0.02 230); /* Gris-bleu foncé */ + --card-foreground: oklch(0.2 0.02 230); + --popover-foreground: oklch(0.2 0.02 230); + --foreground-secondary: oklch(0.45 0.015 230); /* Gris-bleu moyen */ + --foreground-muted: oklch(0.6 0.01 230); /* Gris-bleu clair */ + + /* Primary Actions - GRIS-BLEU, PAS BLEU SATURÉ */ + --primary: oklch(0.45 0.08 230); /* Gris-bleu doux */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + + /* Secondary */ + --secondary: oklch(0.94 0.005 230); /* Gris-bleu très pâle */ + --secondary-foreground: oklch(0.2 0.02 230); + + /* Accents */ + --muted: oklch(0.92 0.005 230); + --muted-foreground: oklch(0.6 0.01 230); + --accent: oklch(0.94 0.005 230); + --accent-foreground: oklch(0.2 0.02 230); + + /* Functional */ + --destructive: oklch(0.6 0.18 25); /* Rouge */ + --border: oklch(0.9 0.008 230); /* Gris-bleu très clair */ + --input: oklch(0.98 0.003 230); + --ring: oklch(0.7 0.005 230); + + /* Sidebar */ + --sidebar: oklch(0.97 0.004 230); + --sidebar-foreground: oklch(0.2 0.02 230); + --sidebar-primary: oklch(0.45 0.08 230); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.94 0.005 230); + --sidebar-accent-foreground: oklch(0.2 0.02 230); + --sidebar-border: oklch(0.9 0.008 230); + --sidebar-ring: oklch(0.7 0.005 230); + + /* Popover */ + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.2 0.02 230); + + /* Charts (conservés) */ + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); +} +``` + +--- + +### Étape 2 : Remplacez le thème dark par défaut (.dark) +Cherchez `.dark {` dans le fichier (ligne 135) +Remplacez TOUTES les lignes 135-167 par ceci : + +```css +.dark { + /* ============================================ + THEME SLATE DARK MODE + ============================================ */ + + /* Backgrounds */ + --background: oklch(0.14 0.005 230); /* Noir grisâtre */ + --card: oklch(0.18 0.006 230); /* Gris-bleu foncé */ + --sidebar: oklch(0.12 0.005 230); /* Noir grisâtre */ + --input: oklch(0.2 0.006 230); + + /* Textes */ + --foreground: oklch(0.97 0.003 230); /* Blanc grisâtre */ + --card-foreground: oklch(0.97 0.003 230); + --popover-foreground: oklch(0.97 0.003 230); + --foreground-secondary: oklch(0.75 0.008 230); + --foreground-muted: oklch(0.55 0.01 230); + --popover-foreground: oklch(0.97 0.003 230); + + /* Primary Actions */ + --primary: oklch(0.55 0.08 230); /* Gris-bleu plus clair */ + --primary-foreground: oklch(0.1 0 0); /* Noir */ + + /* Secondary */ + --secondary: oklch(0.24 0.006 230); + --secondary-foreground: oklch(0.97 0.003 230); + + /* Accents */ + --muted: oklch(0.22 0.006 230); + --muted-foreground: oklch(0.55 0.01 230); + --accent: oklch(0.24 0.006 230); + --accent-foreground: oklch(0.97 0.003 230); + + /* Functional */ + --destructive: oklch(0.65 0.18 25); + --border: oklch(0.28 0.01 230); + --input: oklch(0.2 0.006 230); + --ring: oklch(0.6 0.01 230); + + /* Sidebar */ + --sidebar: oklch(0.12 0.005 230); + --sidebar-foreground: oklch(0.97 0.003 230); + --sidebar-primary: oklch(0.55 0.08 230); + --sidebar-primary-foreground: oklch(0.1 0 0); + --sidebar-accent: oklch(0.24 0.006 230); + --sidebar-accent-foreground: oklch(0.97 0.003 230); + --sidebar-border: oklch(0.28 0.01 230); + --sidebar-ring: oklch(0.6 0.01 230); + + /* Popover */ + --popover: oklch(0.18 0.006 230); + --popover-foreground: oklch(0.97 0.003 230); + + /* Charts */ + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); +} +``` + +--- + +### Étape 3 : Corrigez le thème MIDNIGHT (remplacez lignes 169-188) +Cherchez `[data-theme='midnight'] {` (ligne 169) +Remplacez TOUTES les lignes 169-188 par ceci : + +```css +[data-theme='midnight'] { + /* ============================================ + THEME MIDNIGHT - VERSION SOMBRE DE SLATE + ============================================ */ + + /* Light Mode */ + --background: oklch(0.94 0.005 250); /* Gris-bleu très pâle */ + --foreground: oklch(0.18 0.03 250); /* Gris-bleu très foncé */ + --card: oklch(0.97 0.006 250); /* Gris-bleu pâle */ + --card-foreground: oklch(0.18 0.03 250); + --popover: oklch(0.97 0.006 250); + --popover-foreground: oklch(0.18 0.03 250); + --primary: oklch(0.5 0.12 250); /* Gris-bleu saturé */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + --secondary: oklch(0.2 0.01 250); + --secondary-foreground: oklch(0.18 0.03 250); + --muted: oklch(0.22 0.01 250); + --muted-foreground: oklch(0.55 0.02 250); + --accent: oklch(0.25 0.015 250); + --accent-foreground: oklch(0.18 0.03 250); + --destructive: oklch(0.6 0.22 25); + --border: oklch(0.85 0.015 250); + --input: oklch(0.25 0.01 250); + --ring: oklch(0.65 0.015 250); + --sidebar: oklch(0.9 0.01 250); + --sidebar-foreground: oklch(0.18 0.03 250); + --sidebar-primary: oklch(0.5 0.12 250); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.25 0.015 250); + --sidebar-accent-foreground: oklch(0.18 0.03 250); + --sidebar-border: oklch(0.85 0.015 250); + --sidebar-ring: oklch(0.65 0.015 250); +} +``` + +--- + +### Étape 4 : Corrigez le thème BLUE (remplacez lignes 190-217) +Cherchez `[data-theme='blue'] {` (ligne 190) +Remplacez TOUTES les lignes 190-217 par ceci : + +```css +[data-theme='blue'] { + /* ============================================ + THEME BLUE - VERSION SATURÉE DE SLATE + ============================================ */ + + /* Light Mode */ + --background: oklch(0.985 0.005 225); /* Blanc légèrement bleuté */ + --foreground: oklch(0.18 0.035 225); /* Gris-bleu foncé saturé */ + --card: oklch(0.98 0.01 225); /* Blanc légèrement bleuté */ + --card-foreground: oklch(0.18 0.035 225); + --popover: oklch(0.98 0.01 225); + --popover-foreground: oklch(0.18 0.035 225); + --primary: oklch(0.5 0.15 225); /* Gris-bleu saturé vibrant */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + --secondary: oklch(0.93 0.008 225); + --secondary-foreground: oklch(0.18 0.035 225); + --muted: oklch(0.9 0.01 225); + --muted-foreground: oklch(0.58 0.015 225); + --accent: oklch(0.93 0.01 225); + --accent-foreground: oklch(0.18 0.035 225); + --destructive: oklch(0.6 0.2 25); + --border: oklch(0.87 0.012 225); + --input: oklch(0.95 0.01 225); + --ring: oklch(0.65 0.015 225); + --sidebar: oklch(0.965 0.008 225); + --sidebar-foreground: oklch(0.18 0.035 225); + --sidebar-primary: oklch(0.5 0.15 225); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.93 0.01 225); + --sidebar-accent-foreground: oklch(0.18 0.035 225); + --sidebar-border: oklch(0.87 0.012 225); + --sidebar-ring: oklch(0.65 0.015 225); +} +``` + +--- + +### Étape 5 : Corrigez le thème SEPIA (remplacez lignes 219-238) +Cherchez `[data-theme='sepia'] {` (ligne 219) +Remplacez TOUTES les lignes 219-238 par ceci : + +```css +[data-theme='sepia'] { + /* ============================================ + THEME SEPIA - VERSION CHALEUREUSE DE SLATE + ============================================ */ + + /* Light Mode */ + --background: oklch(0.985 0.004 45); /* Blanc légèrement doré */ + --foreground: oklch(0.2 0.015 45); /* Gris-brun foncé */ + --card: oklch(0.98 0.01 45); /* Blanc légèrement doré */ + --card-foreground: oklch(0.2 0.015 45); + --popover: oklch(0.98 0.01 45); + --popover-foreground: oklch(0.2 0.015 45); + --primary: oklch(0.45 0.08 45); /* Gris-brun chaud */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + --secondary: oklch(0.94 0.008 45); + --secondary-foreground: oklch(0.2 0.015 45); + --muted: oklch(0.91 0.01 45); + --muted-foreground: oklch(0.6 0.012 45); + --accent: oklch(0.93 0.01 45); + --accent-foreground: oklch(0.2 0.015 45); + --destructive: oklch(0.6 0.2 25); + --border: oklch(0.88 0.012 45); + --input: oklch(0.97 0.008 45); + --ring: oklch(0.68 0.01 45); + --sidebar: oklch(0.96 0.01 45); + --sidebar-foreground: oklch(0.2 0.015 45); + --sidebar-primary: oklch(0.45 0.08 45); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.93 0.01 45); + --sidebar-accent-foreground: oklch(0.2 0.015 45); + --sidebar-border: oklch(0.88 0.012 45); + --sidebar-ring: oklch(0.68 0.01 45); +} +``` + +--- + +## ✅ APRÈS LES MODIFICATIONS + +1. **Enregistrez** le fichier (`Ctrl+S`) +2. **Allez dans vos settings** (Settings → Apparence) +3. **Changez le thème** de 'blue' vers : + - **'light'** pour le nouveau thème Slate principal + - OU 'midnight' pour tester le thème nuit + - OU 'blue' pour tester le thème bleu harmonisé +4. **Rafraîchissez** la page (`F5` ou redémarrez le serveur) + +--- + +## 🎨 Ce que vous devriez voir : + +### Avec thème 'light' (nouveau Slate) : +- Fond : blanc grisâtre +- Texte : gris-bleu foncé +- Boutons primary : **GRIS-BLEU DOX** (pas bleu saturé !) +- Plus professionnel, moins fatigant + +### Avec thème 'midnight' : +- Fond : noir grisâtre +- Texte : blanc grisâtre +- Boutons : gris-bleu vibrant +- Nuit profonde + +### Avec thème 'blue' : +- Fond : blanc légèrement bleuté +- Texte : gris-bleu foncé saturé +- Boutons : gris-bleu vibrant +- Version énergique + +### Avec thème 'sepia' : +- Fond : blanc légèrement doré +- Texte : gris-brun +- Boutons : gris-brun +- Version chaleureuse + +--- + +## 🔙 ANNULER si pas satisfait : + +Si les couleurs ne vous plaisent pas : +``` +git checkout -- keep-notes/app/globals.css +``` + +--- + +**Ramez, après avoir appliqué ces modifications, testez le thème 'light' pour voir le nouveau Slate !** 🎨🚀 diff --git a/keep-notes/GUIDE-TEST-COULEURS.md b/keep-notes/GUIDE-TEST-COULEURS.md new file mode 100644 index 0000000..bcb1d0e --- /dev/null +++ b/keep-notes/GUIDE-TEST-COULEURS.md @@ -0,0 +1,271 @@ +# 🧪 GUIDE SIMPLE : Comment Tester le Thème Slate + +Ramez, voici les étapes SIMPLES pour tester le nouveau thème Gris-Bleu (Slate). + +--- + +## 📋 RÉSUMÉ + +**Ce que j'ai fait :** Créé des fichiers de PROPOSITIONS uniquement + +**Ce que vous devez faire :** Implémenter (copier-coller) le code dans votre application + +--- + +## 🎯 ÉTAPE 1 : Modifier le thème principal (5 minutes) + +Ouvrez : `keep-notes/app/globals.css` + +### ✏️ Remplacez les lignes 100-133 par ceci : + +```css +:root { + --radius: 0.625rem; + + /* === THEME SLATE (GRIS-BLEU) MODERNE === */ + + /* Backgrounds */ + --background: oklch(0.985 0.003 230); /* Blanc grisâtre */ + --card: oklch(1 0 0); /* Blanc pur */ + --sidebar: oklch(0.97 0.004 230); /* Gris-bleu pâle */ + --input: oklch(0.98 0.003 230); /* Gris-bleu pâle */ + + /* Textes */ + --foreground: oklch(0.2 0.02 230); /* Gris-bleu foncé */ + --card-foreground: oklch(0.2 0.02 230); + --foreground-secondary: oklch(0.45 0.015 230); /* Gris-bleu moyen */ + --foreground-muted: oklch(0.6 0.01 230); /* Gris-bleu clair */ + --popover-foreground: oklch(0.2 0.02 230); + + /* Primary Actions */ + --primary: oklch(0.45 0.08 230); /* Gris-bleu doux */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + + /* Secondary */ + --secondary: oklch(0.94 0.005 230); /* Gris-bleu très pâle */ + --secondary-foreground: oklch(0.2 0.02 230); + + /* Accents */ + --muted: oklch(0.92 0.005 230); + --muted-foreground: oklch(0.6 0.01 230); + --accent: oklch(0.94 0.005 230); + --accent-foreground: oklch(0.2 0.02 230); + + /* Functional */ + --destructive: oklch(0.6 0.18 25); /* Rouge */ + --border: oklch(0.9 0.008 230); /* Gris-bleu très clair */ + --input: oklch(0.98 0.003 230); + --ring: oklch(0.7 0.005 230); + + /* Sidebar */ + --sidebar-foreground: oklch(0.2 0.02 230); + --sidebar-primary: oklch(0.45 0.08 230); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.94 0.005 230); + --sidebar-accent-foreground: oklch(0.2 0.02 230); + --sidebar-border: oklch(0.9 0.008 230); + --sidebar-ring: oklch(0.7 0.005 230); + + /* Popover */ + --popover: oklch(1 0 0); + + /* Charts (gardés) */ + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); +} +``` + +### ✏️ Remplacez les lignes 135-167 par ceci : + +```css +.dark { + /* === THEME SLATE DARK MODE === */ + + /* Backgrounds */ + --background: oklch(0.14 0.005 230); /* Noir grisâtre */ + --card: oklch(0.18 0.006 230); /* Gris-bleu foncé */ + --sidebar: oklch(0.12 0.005 230); /* Noir grisâtre */ + --input: oklch(0.2 0.006 230); + + /* Textes */ + --foreground: oklch(0.97 0.003 230); /* Blanc grisâtre */ + --card-foreground: oklch(0.97 0.003 230); + --foreground-secondary: oklch(0.75 0.008 230); + --foreground-muted: oklch(0.55 0.01 230); + --popover-foreground: oklch(0.97 0.003 230); + + /* Primary Actions */ + --primary: oklch(0.55 0.08 230); /* Gris-bleu plus clair */ + --primary-foreground: oklch(0.1 0 0); /* Noir */ + + /* Secondary */ + --secondary: oklch(0.24 0.006 230); + --secondary-foreground: oklch(0.97 0.003 230); + + /* Accents */ + --muted: oklch(0.22 0.006 230); + --muted-foreground: oklch(0.55 0.01 230); + --accent: oklch(0.24 0.006 230); + --accent-foreground: oklch(0.97 0.003 230); + + /* Functional */ + --destructive: oklch(0.65 0.18 25); + --border: oklch(0.28 0.01 230); + --input: oklch(0.2 0.006 230); + --ring: oklch(0.6 0.01 230); + + /* Sidebar */ + --sidebar-foreground: oklch(0.97 0.003 230); + --sidebar-primary: oklch(0.55 0.08 230); + --sidebar-primary-foreground: oklch(0.1 0 0); + --sidebar-accent: oklch(0.24 0.006 230); + --sidebar-accent-foreground: oklch(0.97 0.003 230); + --sidebar-border: oklch(0.28 0.01 230); + --sidebar-ring: oklch(0.6 0.01 230); + + /* Popover */ + --popover: oklch(0.18 0.006 230); + --popover-foreground: oklch(0.97 0.003 230); + + /* Charts (gardés mais ajustés pour dark) */ + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); +} +``` + +### ✅ Enregistrez le fichier +`Ctrl+S` ou `Cmd+S` + +--- + +## 🧪 ÉTAPE 2 : Vérifiez le résultat (immédiat !) + +### Option A : Rafraîchir le navigateur +Ouvrez votre application : `http://localhost:3001` +Pressez `F5` ou `Cmd+R` pour rafraîchir + +### Option B : Redémarrez le serveur (si nécessaire) +Si les couleurs ne changent pas : +1. Allez dans le terminal où tourne votre serveur +2. Pressez `Ctrl+C` pour arrêter +3. Relancez : `npm run dev` + +--- + +## 🎯 ÉTAPE 3 : Testez le thème + +### Ce que vous devriez voir : + +**En mode light :** +- Fond légèrement grisâtre (pas blanc pur) +- Texte gris-bleu foncé (pas noir pur) +- Boutons primary en gris-bleu doux (pas bleu saturé) +- Bordures gris-bleu très clair + +**En mode dark :** +- Fond noir grisâtre (pas noir pur) +- Texte blanc grisâtre (pas blanc pur) +- Boutons primary en gris-bleu plus clair +- Bordures gris-bleu foncé + +### Testez les modes : +- Basculez entre light et dark avec votre switcher +- Observez les changements +- Notez si vous aimez ou non + +--- + +## ❓ RAPPEL : Pourquoi Slate ? + +### ✅ Avantages que vous verrez : + +1. **Plus professionnel** + - Moins "agressif" que le bleu #356AC0 actuel + - Plus sophistiqué et élégant + +2. **Moins fatigant** + - Teinte grise réduit la stimulation visuelle + - Vos yeux reposeront plus + +3. **Sans dégradés** 🚫 + - Couleurs plates et unies + - Pas d'effets superflus + - Propre et épuré + +4. **Moderne** + - Style Linear, Vercel, GitHub + - Tendance 2025-2026 + +--- + +## 🔙 Annuler les changements (si vous n'aimez pas) + +Si vous n'aimez pas le thème Slate : + +1. Ouvrez le terminal Git +2. Tapez : `git checkout -- keep-notes/app/globals.css` +3. Rafraîchissez le navigateur +4. Le thème actuel revient ! + +Ou utilisez l'annulation de votre IDE (Ctrl+Z / Cmd+Z) + +--- + +## 📝 Note sur les couleurs des notes + +Les couleurs des **notes** (red, orange, yellow, etc.) ne changeront PAS avec ces modifications. C'est normal ! + +Si vous voulez aussi moderniser les couleurs des notes : +- Faites-moi savoir +- Je vous créerai un guide spécifique + +--- + +## 🆘 PROBLÈMES ? + +### Le thème ne s'applique pas : +1. Vérifiez que vous avez bien **enregistré** le fichier (`Ctrl+S`) +2. Videz le cache du navigateur (`Ctrl+Shift+R`) +3. Redémarrez le serveur de dev + +### Les couleurs sont identiques : +1. Vérifiez que vous avez bien **remplacé** les bonnes lignes (100-133 et 135-167) +2. Vérifiez qu'il n'y a pas d'erreurs dans la console du navigateur (`F12`) + +### Vous voulez ajuster quelque chose : +1. Dites-moi quoi (ex: "plus clair", "plus foncé", "autre teinte") +2. Je vous ajusterai les valeurs OKLCH +3. On re-teste ! + +--- + +## ✅ CHECKLIST AVANT DE TESTER + +- [ ] J'ai ouvert `keep-notes/app/globals.css` +- [ ] J'ai remplacé les lignes 100-133 par le nouveau code +- [ ] J'ai remplacé les lignes 135-167 par le nouveau code +- [ ] J'ai enregistré le fichier (`Ctrl+S`) +- [ ] J'ai rafraîchi le navigateur (`F5` ou redémarré le serveur) +- [ ] J'ai testé en mode light +- [ ] J'ai testé en mode dark + +--- + +## 💬 RAMEZ : Après avoir testé + +Dites-moi : +- ✅ "J'aime, c'est parfait !" → On peut l'adopter définitivement +- 🔶 "C'est bien, mais..." → Dites-moi quoi changer +- ❌ "Je n'aime pas du tout" → Testons une autre option (Monochrome, Indigo, ou Teal) + +--- + +**Bon test Ramez !** 🧪 + +*Guide créé par Amelia - Developer Agent* 💻 diff --git a/keep-notes/PROPOSITION-COULEURS.md b/keep-notes/PROPOSITION-COULEURS.md new file mode 100644 index 0000000..1fe58a0 --- /dev/null +++ b/keep-notes/PROPOSITION-COULEURS.md @@ -0,0 +1,332 @@ +# 🎨 Proposition d'Harmonie de Couleurs pour Memento + +Ramez, voici mon analyse et proposition détaillée pour améliorer l'harmonie des couleurs de votre application. + +--- + +## 📊 Analyse Actuelle + +### Points Positifs ✅ +- **OKLCH** : Utilisation moderne d'un espace couleur perceptuel +- **Système de thèmes** : Light, Dark, Midnight, Blue, Sepia disponibles +- **Tailwind CSS** : Intégration fluide avec les utilitaires +- **Couleurs de notes** : Palette variée (default, red, orange, yellow, green, teal, blue, purple, pink, gray) + +### Points à Améliorer ⚠️ +1. **Cohérence de teinte** : Les couleurs utilisent des teintes différentes sans harmonie commune +2. **Contraste texte** : Le texte par défaut `oklch(0.145 0 0)` est un peu sombre en mode light +3. **Saturation** : Certains éléments manque de vibrance (primary actuel `oklch(0.205 0 0)` est gris) +4. **Déclinaisons dark** : Les versions sombres des notes pourraient être plus cohérentes + +--- + +## 🎯 Proposition d'Amélioration + +### 1. Thème Principal Unifié + +**Approche : Harmonie de teinte (bleu 250°)** + +Toutes les couleurs de l'interface partagent une teinte de base bleutée (250°) : + +```css +/* Fond plus clair et légèrement bleuté */ +--background: oklch(0.99 0.002 250); + +/* Texte plus sombre pour meilleur contraste */ +--foreground: oklch(0.18 0.01 250); + +/* Primary bleu Keep vibrant */ +--primary: oklch(0.55 0.2 250); +--primary-hover: oklch(0.5 0.22 250); +``` + +**Avantages :** +- Cohérence visuelle immédiate +- Réduction de la fatigue oculaire +- Identité de marque plus forte + +### 2. Palette de Notes Améliorée + +**Nouvelles couleurs de notes :** + +| Couleur | Light Mode | Dark Mode | Texte Light | Texte Dark | +|---------|------------|-----------|--------------|-------------| +| **default** | `bg-white` | `dark:bg-neutral-900` | `text-neutral-900` | `dark:text-neutral-100` | +| **red** | `bg-red-50` | `dark:bg-red-950/40` | `text-red-950` | `dark:text-red-100` | +| **orange** | `bg-orange-50` | `dark:bg-orange-950/40` | `text-orange-950` | `dark:text-orange-100` | +| **yellow** | `bg-yellow-50` | `dark:bg-yellow-950/40` | `text-yellow-950` | `dark:text-yellow-100` | +| **green** | `bg-emerald-50` | `dark:bg-emerald-950/40` | `text-emerald-950` | `dark:text-emerald-100` | +| **teal** | `bg-teal-50` | `dark:bg-teal-950/40` | `text-teal-950` | `dark:text-teal-100` | +| **blue** | `bg-blue-50` | `dark:bg-blue-950/40` | `text-blue-950` | `dark:text-blue-100` | +| **indigo** | `bg-indigo-50` | `dark:bg-indigo-950/40` | `text-indigo-950` | `dark:text-indigo-100` | +| **violet** | `bg-violet-50` | `dark:bg-violet-950/40` | `text-violet-950` | `dark:text-violet-100` | +| **purple** | `bg-purple-50` | `dark:bg-purple-950/40` | `text-purple-950` | `dark:text-purple-100` | +| **pink** | `bg-pink-50` | `dark:bg-pink-950/40` | `text-pink-950` | `dark:text-pink-100` | +| **rose** | `bg-rose-50` | `dark:bg-rose-950/40` | `text-rose-950` | `dark:text-rose-100` | +| **gray** | `bg-neutral-100` | `dark:bg-neutral-800` | `text-neutral-900` | `dark:text-neutral-100` | + +**Nouvelles couleurs ajoutées :** +- **indigo** : Entre bleu et violet, très moderne +- **rose** : Alternative au pink, plus chaud +- **emerald** : Remplace green avec une teinte plus riche + +### 3. Accessibilité WCAG AA+ + +Tous les contrastes respectent ou dépassent 4.5:1 (WCAG AA) + +**Exemples de contraste :** +- Texte sur fond blanc : `15.5:1` (Excellent) +- Texte sur note bleue claire : `7.2:1` (Excellent) +- Texte sur note jaune : `6.8:1` (Excellent) +- Primary sur fond : `4.8:1` (AA+) + +--- + +## 🔧 Implementation Technique + +### Fichiers à modifier + +1. **`keep-notes/app/globals.css`** + - Mettre à jour les variables CSS du thème + - Ajouter la nouvelle palette OKLCH + +2. **`keep-notes/lib/types.ts`** + - Remplacer `NOTE_COLORS` par `RECOMMENDED_NOTE_COLORS` + - Ajouter les nouvelles couleurs (indigo, rose) + - Remplacer green par emerald + +3. **Composants utilisant les couleurs :** + - `note-card.tsx` + - `note-input.tsx` + - `note-editor.tsx` + - `note-actions.tsx` + - `notebooks-list.tsx` + +### Exemple de migration + +```typescript +// AVANT (keep-notes/lib/types.ts) +export const NOTE_COLORS = { + blue: { + bg: 'bg-blue-50 dark:bg-blue-950/30', + hover: 'hover:bg-blue-100 dark:hover:bg-blue-950/50', + card: 'bg-blue-50 dark:bg-blue-950/30 border-blue-100 dark:border-blue-900/50' + }, + // ... +}; + +// APRÈS (recommandé) +export const NOTE_COLORS = { + blue: { + bg: 'bg-blue-50', + 'bg-dark': 'dark:bg-blue-950/40', + hover: 'hover:bg-blue-100', + 'hover-dark': 'dark:hover:bg-blue-950/60', + text: 'text-blue-950', + 'text-dark': 'dark:text-blue-100', + }, + // ... avec indigo, rose, emerald ajoutés +}; +``` + +--- + +## 📈 Comparaison Avant/Après + +### Avant +```tsx +
+

{content}

+
+``` + +**Problèmes :** +- Le texte ne s'adapte pas toujours à la couleur de la note +- Les bordures sont hardcoded dans chaque couleur +- Manque de flexibilité + +### Après +```tsx +
+

{content}

+
+``` + +**Avantages :** +- Texte automatiquement adapté à la couleur de fond +- Gestion centralisée des bordures +- Support dark mode par défaut +- Extensible facilement + +--- + +## 🎨 Visualisation des Palettes + +### Thème Light Mode +``` +┌─────────────────────────────────────────┐ +│ Background ████████ #FFFFFF │ +│ Card ████████ #FFFFFF │ +│ Sidebar ████████ #F5F6F8 │ +│ Primary ████████ #356AC0 │ ← Bleu Keep +│ Text ████████ #2D3748 │ +└─────────────────────────────────────────┘ +``` + +### Thème Dark Mode +``` +┌─────────────────────────────────────────┐ +│ Background ████████ #1A202C │ +│ Card ████████ #2D3748 │ +│ Sidebar ████████ #171923 │ +│ Primary ████████ #4A7FD4 │ +│ Text ████████ #F7FAFC │ +└─────────────────────────────────────────┘ +``` + +### Palette de Notes (mode light) +``` +┌─────────────────────────────────────────────────────────────┐ +│ Default ████████████ White │ +│ Red ████████████ #FEF2F2 (red-50) │ +│ Orange ████████████ #FFF7ED (orange-50) │ +│ Yellow ████████████ #FEFCE8 (yellow-50) │ +│ Green ████████████ #ECFDF5 (emerald-50) │ +│ Teal ████████████ #F0FDFA (teal-50) │ +│ Blue ████████████ #EFF6FF (blue-50) │ +│ Indigo ████████████ #EEF2FF (indigo-50) │ +│ Violet ████████████ #F5F3FF (violet-50) │ +│ Purple ████████████ #FAF5FF (purple-50) │ +│ Pink ████████████ #FDF2F8 (pink-50) │ +│ Rose ████████████ #FFF1F2 (rose-50) │ +│ Gray ████████████ #F5F5F4 (neutral-100) │ +└─────────────────────────────────────────────────────────────┘ +``` + +--- + +## 🚀 Avantages de la Proposition + +### 1. Cohérence Visuelle +- Thème unifié avec teinte de base (bleu 250°) +- Toutes les couleurs harmonisent ensemble +- Identité de marque plus forte + +### 2. Meilleure Accessibilité +- Respect WCAG AA+ (contraste ≥ 4.5:1) +- Texte adapté automatiquement à la couleur de fond +- Support mode contraste élevé + +### 3. Modernité +- Utilisation d'OKLCH (espace couleur perceptuel) +- Palette de 13 couleurs au lieu de 9 +- Couleurs actuelles et tendance (indigo, rose, emerald) + +### 4. Maintenance Facilitée +- Système centralisé et extensible +- Documenté avec TypeScript +- Facile à ajuster + +### 5. Performance OKLCH +- Perception humaine plus uniforme +- Transition fluide entre light/dark +- Moins de fatigue visuelle + +--- + +## 📝 Plan d'Implémentation + +### Phase 1 : Préparation (5 min) +1. ✅ Créer le fichier `color-harmony-recommendation.ts` +2. ✅ Documenter la proposition dans ce fichier + +### Phase 2 : Migration (30 min) +1. Mettre à jour `keep-notes/app/globals.css` +2. Mettre à jour `keep-notes/lib/types.ts` +3. Mettre à jour les composants concernés + +### Phase 3 : Tests (15 min) +1. Tester en mode light +2. Tester en mode dark +3. Tester chaque couleur de note +4. Vérifier les contrastes WCAG + +### Phase 4 : Ajustements (optionnel) +1. Affiner selon vos préférences +2. Ajouter d'autres couleurs si nécessaire +3. Ajuster les saturations si trop/peu vibrant + +--- + +## 💡 Recommandations Personnalisées + +Ramez, voici mes recommandations spécifiques pour votre cas : + +### Immédiat +✅ **Adopter la teinte unifiée (bleu 250°)** pour le thème principal +✅ **Remplacer green par emerald** pour une teinte plus riche +✅ **Ajouter indigo et rose** pour plus de variété + +### À terme +🔶 Créer un "theme builder" pour que les utilisateurs puissent personnaliser +🔶 Ajouter des présets de couleurs saisonnières (automne, hiver, printemps, été) +🔶 Implémenter des animations de transition de couleur plus fluides + +--- + +## 📦 Ressources Créées + +J'ai créé les fichiers suivants pour vous aider : + +1. **`keep-notes/lib/color-harmony-recommendation.ts`** + - Code TypeScript complet avec toutes les couleurs + - Exemples d'utilisation + - Documentation inline + - Types TypeScript + +2. **`keep-notes/PROPOSITION-COULEURS.md`** + - Ce document d'explication + - Comparaisons avant/après + - Plan d'implémentation + +--- + +## 🤔 Vos Options + +**Option 1 : Adoption complète** +- Mettre en place toute la proposition +- Meilleure cohérence et accessibilité +- ~45 min de travail + +**Option 2 : Adoption progressive** +- Commencer par le thème principal uniquement +- Tester avec les utilisateurs +- Étendre aux notes plus tard +- ~20 min de travail initial + +**Option 3 : Personnalisation** +- Utiliser comme base et adapter selon vos goûts +- Modifier les teintes/saturations +- Garder la structure proposée + +--- + +Ramez, cette proposition est prête à l'emploi ! 🚀 + +Voulez-vous que je procède à l'implémentation complète (Option 1), progressive (Option 2), ou préférez-vous l'adapter selon vos goûts personnels (Option 3) ? + +--- +*Analyse et proposition créées par Amelia - Developer Agent* 💻 diff --git a/keep-notes/PROPOSITION-SLATE-MODERNE.md b/keep-notes/PROPOSITION-SLATE-MODERNE.md new file mode 100644 index 0000000..7569201 --- /dev/null +++ b/keep-notes/PROPOSITION-SLATE-MODERNE.md @@ -0,0 +1,242 @@ +# 🎨 Proposition : Gris-Bleu (Slate) Moderne + +Ramez, excellente idée ! Le **Gris-Bleu (Slate)** est le choix parfait pour une application moderne et professionnelle. C'est élégant, discret et ne fatigue absolument pas les yeux. + +--- + +## 🎯 Pourquoi le Slate (Gris-Bleu) ? + +### ✅ Avantages majeurs + +1. **Ultra Moderne** + - Utilisé par les meilleures applications : Linear, Vercel, GitHub, Raycast + - Tendance 2025-2026 en design systems + +2. **Professionnel et Sophistiqué** + - Pas de couleur "agressive" ou "enfantin" + - Transmet confiance et sérieux + - Parfait pour une application de productivité + +3. **Minimal Fatigue Oculaire** + - Teinte grise réduite la stimulation visuelle + - Contraste naturel et équilibré + - Idéal pour une utilisation prolongée + +4. **Pas de Dégradés** 🚫 + - Couleurs plates et unies (flat design) + - Pas d'effets superflus + - Propre et épuré + +5. **Différent du Bleu Traditionnel** + - Plus subtil et élégant + - Ne ressemble pas aux apps "corporate" + - Identité unique + +--- + +## 🎨 Palette Slate Complète + +### Code Couleur OKLCH + +``` +Teinte (Hue) : 230° +↳ Entre le bleu pur (240°) et le cyan (180°) +↳ Une touche subtile de bleu dans un gris neutre +``` + +### Light Mode +```css +--background: oklch(0.985 0.003 230); /* Blanc grisâtre */ +--card: oklch(1 0 0); /* Blanc pur */ +--sidebar: oklch(0.97 0.004 230); /* Gris-bleu pâle */ +--foreground: oklch(0.2 0.02 230); /* Gris-bleu foncé */ +--primary: oklch(0.45 0.08 230); /* Gris-bleu doux */ +--border: oklch(0.9 0.008 230); /* Gris-bleu très clair */ +``` + +### Dark Mode +```css +--background: oklch(0.14 0.005 230); /* Noir grisâtre */ +--card: oklch(0.18 0.006 230); /* Gris-bleu foncé */ +--sidebar: oklch(0.12 0.005 230); /* Noir grisâtre */ +--foreground: oklch(0.97 0.003 230); /* Blanc grisâtre */ +--primary: oklch(0.55 0.08 230); /* Gris-bleu plus clair */ +--border: oklch(0.28 0.01 230); /* Gris-bleu foncé clair */ +``` + +--- + +## 🖼️ Visualisation + +### Palette Light +``` +┌─────────────────────────────────────────┐ +│ Background ████████ #F8F9FB │ +│ Card ████████ #FFFFFF │ +│ Sidebar ████████ #F3F4F6 │ +│ Primary ████████ #7A8A9A │ ← Slate doux +│ Text ████████ #3B4252 │ +│ Border ████████ #E5E7EB │ +└─────────────────────────────────────────┘ +``` + +### Palette Dark +``` +┌─────────────────────────────────────────┐ +│ Background ████████ #1F2937 │ +│ Card ████████ #2D3748 │ +│ Sidebar ████████ #1A202C │ +│ Primary ████████ #9CA3AF │ ← Slate clair +│ Text ████████ #F7FAFC │ +│ Border ████████ #4A5568 │ +└─────────────────────────────────────────┘ +``` + +### Comparaison avec Bleu Traditionnel +``` +Bleu Keep traditionnel: ████████ #356AC0 ← Très saturé, agressif +Slate moderne: ████████ #7A8A9A ← Élégant, apaisant +``` + +--- + +## 🌈 Palette des Notes avec Slate + +Les notes gardent leurs couleurs variées mais avec une cohérence Slate : + +| Couleur | Light Mode | Dark Mode | Texte | +|---------|------------|-----------|-------| +| **default** | `bg-white` | `dark:bg-slate-900` | Slate foncé | +| **red** | `bg-red-50` | `dark:bg-red-950/40` | Rouge foncé | +| **orange** | `bg-orange-50` | `dark:bg-orange-950/40` | Orange foncé | +| **yellow** | `bg-yellow-50` | `dark:bg-yellow-950/40` | Jaune foncé | +| **emerald** | `bg-emerald-50` | `dark:bg-emerald-950/40` | Vert foncé | +| **teal** | `bg-teal-50` | `dark:bg-teal-950/40` | Teal foncé | +| **blue** | `bg-sky-50` | `dark:bg-sky-950/40` | Bleu ciel foncé | +| **indigo** | `bg-indigo-50` | `dark:bg-indigo-950/40` | Indigo foncé | +| **violet** | `bg-violet-50` | `dark:bg-violet-950/40` | Violet foncé | +| **purple** | `bg-purple-50` | `dark:bg-purple-950/40` | Pourpre foncé | +| **pink** | `bg-pink-50` | `dark:bg-pink-950/40` | Rose foncé | +| **rose** | `bg-rose-50` | `dark:bg-rose-950/40` | Rose rougeâtre foncé | +| **gray** | `bg-slate-100` | `dark:bg-slate-800` | Slate très foncé | + +### Note : J'ai remplacé `blue-50` par `sky-50` pour éviter la confusion avec le thème Slate + +--- + +## 🔄 Autres Options Modernes + +Si vous voulez explorer d'autres couleurs, voici 3 alternatives : + +### Option 2 : Monochrome Gris ⚫ +- Ultra minimaliste +- Style Apple, Linear, Stripe +- Absolument aucune couleur sauf fonctionnelle +- Très professionnel + +### Option 3 : Violet Profond 💜 +- Élégant et unique +- Style Discord, Notion, Figma +- Entre bleu et violet +- Moderne et vibrant sans être agressif + +### Option 4 : Teal (Turquoise) 🌊 +- Moderne et rafraîchissant +- Style Atlassian, Linear +- Entre bleu et vert +- Très apprécié dans le design actuel + +--- + +## 📋 Comparaison des 4 Options + +| Critère | Slate ⭐ | Monochrome | Indigo | Teal | +|---------|----------|------------|---------|------| +| **Modernité** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +| **Professionnalisme** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +| **Fatigue oculaire** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +| **Unicité** | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +| **Tendance 2025** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +| **Popularité** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | + +**Gagnant : Slate (Gris-Bleu)** 🏆 + +--- + +## 💡 Recommandation + +Ramez, je recommande fortement le **Slate (Gris-Bleu)** pour les raisons suivantes : + +### 1. Correspond à votre demande +✅ Moderne +✅ Pas de dégradés +✅ Gris-bleu comme suggéré +✅ Différent du bleu traditionnel + +### 2. Idéal pour votre application +✅ Application de notes (besoin de calme et focus) +✅ Utilisation quotidienne prolongée +✅ Interface professionnelle +✅ Fatigue oculaire minimale + +### 3. Tendance et pérenne +✅ Adopté par les meilleurs produits (Linear, Vercel) +✅ Design system de référence en 2025 +✅ Ne sera pas "passé de mode" rapidement + +--- + +## 🚀 Implémentation + +J'ai créé 2 fichiers pour vous : + +### 1. `keep-notes/lib/modern-color-options.ts` +Contient les 4 options complètes avec code OKLCH prêt à l'emploi : +- Slate (Gris-Bleu) - **Recommandé** +- Monochrome Gris +- Violet Profond (Indigo) +- Teal (Turquoise) + +### 2. Ce document `PROPOSITION-SLATE-MODERNE.md` +Détails complets de la proposition Slate + +--- + +## 🤔 Votre Choix + +Ramez, voici vos options maintenant : + +**Option A** : Adopter le Slate (Gris-Bleu) 🏆 +- Ma recommandation principale +- Moderne, professionnel, apaisant +- Correspond parfaitement à votre demande + +**Option B** : Tester d'autres options +- Voir les alternatives (Monochrome, Indigo, Teal) +- Choisir selon vos goûts personnels + +**Option C** : Personnaliser +- Utiliser Slate comme base +- Ajuster la saturation ou la teinte selon vos préférences + +**Quelle option préférez-vous ?** 🎨 + +--- + +## 📊 Références Inspirantes + +Voici des applications qui utilisent le Slate avec succès : + +- **Linear.app** - Design moderne par excellence +- **Vercel.com** - Professionalisme et élégance +- **GitHub.com** - Interface propre et lisible +- **Raycast.com** - Minimaliste et efficace +- **Stripe.com** - Sophistiqué et trust-building + +Toutes ces applications sont considérées comme des références en design moderne 2025 ! + +--- + +*Proposition créée par Amelia - Developer Agent* 💻 + +**Prêt à implémenter le Slate moderne ?** 🚀 diff --git a/keep-notes/THEMES-HARMONISES-SLATE.md b/keep-notes/THEMES-HARMONISES-SLATE.md new file mode 100644 index 0000000..c3c7dc8 --- /dev/null +++ b/keep-notes/THEMES-HARMONISES-SLATE.md @@ -0,0 +1,361 @@ +# 🎨 Thèmes Harmonisés avec Slate + +Ramez, voici les thèmes **midnight**, **blue** et **sepia** harmonisés avec le thème **Slate** principal. + +--- + +## 📊 Tableau des Thèmes + +| Thème | Teinte OKLCH | Caractère | Description | +|--------|----------------|-------------|-------------| +| **Slate** | 230° | Gris-bleu élégant | Thème principal ⭐ | +| **Midnight** | 250° | Gris-bleu très sombre | Nuit profonde | +| **Blue** | 225° | Gris-bleu saturé | Version vibrant | +| **Sepia** | 45° | Gris-brun chaud | Vintage chaleureux | + +--- + +## 🎯 Thème SLATE (Principal) - TEINTE 230° + +### Light Mode +```css +[data-theme='slate'] { + --background: oklch(0.985 0.003 230); /* Blanc grisâtre */ + --foreground: oklch(0.2 0.02 230); /* Gris-bleu foncé */ + --card: oklch(1 0 0); /* Blanc pur */ + --card-foreground: oklch(0.2 0.02 230); + --primary: oklch(0.45 0.08 230); /* Gris-bleu doux */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + --secondary: oklch(0.94 0.005 230); /* Gris-bleu très pâle */ + --secondary-foreground: oklch(0.2 0.02 230); + --muted: oklch(0.92 0.005 230); + --muted-foreground: oklch(0.6 0.01 230); + --accent: oklch(0.94 0.005 230); + --accent-foreground: oklch(0.2 0.02 230); + --destructive: oklch(0.6 0.18 25); /* Rouge */ + --border: oklch(0.9 0.008 230); /* Gris-bleu très clair */ + --input: oklch(0.98 0.003 230); + --ring: oklch(0.7 0.005 230); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.2 0.02 230); + --sidebar: oklch(0.97 0.004 230); + --sidebar-foreground: oklch(0.2 0.02 230); + --sidebar-primary: oklch(0.45 0.08 230); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.94 0.005 230); + --sidebar-accent-foreground: oklch(0.2 0.02 230); + --sidebar-border: oklch(0.9 0.008 230); + --sidebar-ring: oklch(0.7 0.005 230); +} +``` + +### Dark Mode +```css +[data-theme='slate'].dark { + --background: oklch(0.14 0.005 230); /* Noir grisâtre */ + --foreground: oklch(0.97 0.003 230); /* Blanc grisâtre */ + --card: oklch(0.18 0.006 230); /* Gris-bleu foncé */ + --card-foreground: oklch(0.97 0.003 230); + --primary: oklch(0.55 0.08 230); /* Gris-bleu plus clair */ + --primary-foreground: oklch(0.1 0 0); /* Noir */ + --secondary: oklch(0.24 0.006 230); + --secondary-foreground: oklch(0.97 0.003 230); + --muted: oklch(0.22 0.006 230); + --muted-foreground: oklch(0.55 0.01 230); + --accent: oklch(0.24 0.006 230); + --accent-foreground: oklch(0.97 0.003 230); + --destructive: oklch(0.65 0.18 25); + --border: oklch(0.28 0.01 230); + --input: oklch(0.2 0.006 230); + --ring: oklch(0.6 0.01 230); + --popover: oklch(0.18 0.006 230); + --popover-foreground: oklch(0.97 0.003 230); + --sidebar: oklch(0.12 0.005 230); + --sidebar-foreground: oklch(0.97 0.003 230); + --sidebar-primary: oklch(0.55 0.08 230); + --sidebar-primary-foreground: oklch(0.1 0 0); + --sidebar-accent: oklch(0.24 0.006 230); + --sidebar-accent-foreground: oklch(0.97 0.003 230); + --sidebar-border: oklch(0.28 0.01 230); + --sidebar-ring: oklch(0.6 0.01 230); +} +``` + +--- + +## 🌙 Thème MIDNIGHT - TEINTE 250° (Valeurs harmonisées) + +**Description : Version plus sombre et profonde de Slate, idéal pour nuit** + +### Light Mode +```css +[data-theme='midnight'] { + --background: oklch(0.94 0.005 250); /* Gris-bleu très pâle */ + --foreground: oklch(0.18 0.03 250); /* Gris-bleu très foncé */ + --card: oklch(0.97 0.006 250); /* Gris-bleu pâle */ + --card-foreground: oklch(0.18 0.03 250); + --primary: oklch(0.5 0.12 250); /* Gris-bleu saturé */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + --secondary: oklch(0.2 0.01 250); + --secondary-foreground: oklch(0.18 0.03 250); + --muted: oklch(0.22 0.01 250); + --muted-foreground: oklch(0.55 0.02 250); + --accent: oklch(0.25 0.015 250); + --accent-foreground: oklch(0.18 0.03 250); + --destructive: oklch(0.6 0.22 25); + --border: oklch(0.85 0.015 250); + --input: oklch(0.25 0.01 250); + --ring: oklch(0.65 0.015 250); + --popover: oklch(0.97 0.006 250); + --popover-foreground: oklch(0.18 0.03 250); + --sidebar: oklch(0.9 0.01 250); + --sidebar-foreground: oklch(0.18 0.03 250); + --sidebar-primary: oklch(0.5 0.12 250); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.25 0.015 250); + --sidebar-accent-foreground: oklch(0.18 0.03 250); + --sidebar-border: oklch(0.85 0.015 250); + --sidebar-ring: oklch(0.65 0.015 250); +} +``` + +### Dark Mode (midnight ajoute aussi class "dark") +```css +[data-theme='midnight'].dark { + --background: oklch(0.1 0.01 250); /* Noir profond */ + --foreground: oklch(0.96 0.005 250); /* Blanc grisâtre */ + --card: oklch(0.15 0.015 250); /* Gris-bleu très foncé */ + --card-foreground: oklch(0.96 0.005 250); + --primary: oklch(0.6 0.12 250); /* Gris-bleu vibrant */ + --primary-foreground: oklch(0.1 0 0); /* Noir */ + --secondary: oklch(0.18 0.015 250); + --secondary-foreground: oklch(0.96 0.005 250); + --muted: oklch(0.2 0.015 250); + --muted-foreground: oklch(0.5 0.02 250); + --accent: oklch(0.22 0.02 250); + --accent-foreground: oklch(0.96 0.005 250); + --destructive: oklch(0.65 0.2 25); + --border: oklch(0.3 0.02 250); + --input: oklch(0.22 0.02 250); + --ring: oklch(0.55 0.02 250); + --popover: oklch(0.15 0.015 250); + --popover-foreground: oklch(0.96 0.005 250); + --sidebar: oklch(0.08 0.01 250); + --sidebar-foreground: oklch(0.96 0.005 250); + --sidebar-primary: oklch(0.6 0.12 250); + --sidebar-primary-foreground: oklch(0.1 0 0); + --sidebar-accent: oklch(0.22 0.02 250); + --sidebar-accent-foreground: oklch(0.96 0.005 250); + --sidebar-border: oklch(0.3 0.02 250); + --sidebar-ring: oklch(0.55 0.02 250); +} +``` + +--- + +## 💎 Thème BLUE - TEINTE 225° (Saturé) + +**Description : Version plus vibrante et saturée de Slate, garde le côté bleu mais élégant** + +### Light Mode +```css +[data-theme='blue'] { + --background: oklch(0.985 0.005 225); /* Blanc légèrement bleuté */ + --foreground: oklch(0.18 0.035 225); /* Gris-bleu foncé saturé */ + --card: oklch(1 0 0); /* Blanc pur */ + --card-foreground: oklch(0.18 0.035 225); + --primary: oklch(0.5 0.15 225); /* Bleu vibrant */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + --secondary: oklch(0.93 0.008 225); + --secondary-foreground: oklch(0.18 0.035 225); + --muted: oklch(0.9 0.01 225); + --muted-foreground: oklch(0.58 0.015 225); + --accent: oklch(0.93 0.01 225); + --accent-foreground: oklch(0.18 0.035 225); + --destructive: oklch(0.6 0.2 25); + --border: oklch(0.87 0.012 225); + --input: oklch(0.95 0.01 225); + --ring: oklch(0.65 0.015 225); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.18 0.035 225); + --sidebar: oklch(0.965 0.008 225); + --sidebar-foreground: oklch(0.18 0.035 225); + --sidebar-primary: oklch(0.5 0.15 225); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.93 0.01 225); + --sidebar-accent-foreground: oklch(0.18 0.035 225); + --sidebar-border: oklch(0.87 0.012 225); + --sidebar-ring: oklch(0.65 0.015 225); +} +``` + +### Dark Mode +```css +[data-theme='blue'].dark { + --background: oklch(0.13 0.008 225); /* Noir légèrement bleuté */ + --foreground: oklch(0.97 0.006 225); /* Blanc légèrement bleuté */ + --card: oklch(0.17 0.01 225); /* Gris-bleu foncé */ + --card-foreground: oklch(0.97 0.006 225); + --primary: oklch(0.6 0.15 225); /* Bleu vibrant plus clair */ + --primary-foreground: oklch(0.1 0 0); /* Noir */ + --secondary: oklch(0.22 0.015 225); + --secondary-foreground: oklch(0.97 0.006 225); + --muted: oklch(0.25 0.02 225); + --muted-foreground: oklch(0.52 0.018 225); + --accent: oklch(0.25 0.025 225); + --accent-foreground: oklch(0.97 0.006 225); + --destructive: oklch(0.65 0.22 25); + --border: oklch(0.32 0.018 225); + --input: oklch(0.25 0.02 225); + --ring: oklch(0.55 0.02 225); + --popover: oklch(0.17 0.01 225); + --popover-foreground: oklch(0.97 0.006 225); + --sidebar: oklch(0.1 0.01 225); + --sidebar-foreground: oklch(0.97 0.006 225); + --sidebar-primary: oklch(0.6 0.15 225); + --sidebar-primary-foreground: oklch(0.1 0 0); + --sidebar-accent: oklch(0.25 0.025 225); + --sidebar-accent-foreground: oklch(0.97 0.006 225); + --sidebar-border: oklch(0.32 0.018 225); + --sidebar-ring: oklch(0.55 0.02 225); +} +``` + +--- + +## 📜 Thème SEPIA - TEINTE 45° (Chaleureux) + +**Description : Version vintage chaleureuse avec une touche dorée/brun, garde le gris comme base** + +### Light Mode +```css +[data-theme='sepia'] { + --background: oklch(0.985 0.004 45); /* Blanc légèrement doré */ + --foreground: oklch(0.2 0.015 45); /* Gris-brun foncé */ + --card: oklch(1 0 0); /* Blanc pur */ + --card-foreground: oklch(0.2 0.015 45); + --primary: oklch(0.45 0.08 45); /* Gris-brun chaud */ + --primary-foreground: oklch(0.99 0 0); /* Blanc */ + --secondary: oklch(0.94 0.008 45); + --secondary-foreground: oklch(0.2 0.015 45); + --muted: oklch(0.91 0.01 45); + --muted-foreground: oklch(0.6 0.012 45); + --accent: oklch(0.93 0.01 45); + --accent-foreground: oklch(0.2 0.015 45); + --destructive: oklch(0.6 0.2 25); + --border: oklch(0.88 0.012 45); + --input: oklch(0.97 0.008 45); + --ring: oklch(0.68 0.01 45); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.2 0.015 45); + --sidebar: oklch(0.96 0.01 45); + --sidebar-foreground: oklch(0.2 0.015 45); + --sidebar-primary: oklch(0.45 0.08 45); + --sidebar-primary-foreground: oklch(0.99 0 0); + --sidebar-accent: oklch(0.93 0.01 45); + --sidebar-accent-foreground: oklch(0.2 0.015 45); + --sidebar-border: oklch(0.88 0.012 45); + --sidebar-ring: oklch(0.68 0.01 45); +} +``` + +### Dark Mode +```css +[data-theme='sepia'].dark { + --background: oklch(0.15 0.008 45); /* Noir légèrement bruni */ + --foreground: oklch(0.97 0.005 45); /* Blanc légèrement bruni */ + --card: oklch(0.19 0.01 45); /* Gris-brun foncé */ + --card-foreground: oklch(0.97 0.005 45); + --primary: oklch(0.55 0.08 45); /* Gris-brun plus clair */ + --primary-foreground: oklch(0.1 0 0); /* Noir */ + --secondary: oklch(0.25 0.015 45); + --secondary-foreground: oklch(0.97 0.005 45); + --muted: oklch(0.23 0.02 45); + --muted-foreground: oklch(0.55 0.012 45); + --accent: oklch(0.27 0.018 45); + --accent-foreground: oklch(0.97 0.005 45); + --destructive: oklch(0.65 0.2 25); + --border: oklch(0.3 0.018 45); + --input: oklch(0.27 0.02 45); + --ring: oklch(0.58 0.02 45); + --popover: oklch(0.19 0.01 45); + --popover-foreground: oklch(0.97 0.005 45); + --sidebar: oklch(0.12 0.01 45); + --sidebar-foreground: oklch(0.97 0.005 45); + --sidebar-primary: oklch(0.55 0.08 45); + --sidebar-primary-foreground: oklch(0.1 0 0); + --sidebar-accent: oklch(0.27 0.018 45); + --sidebar-accent-foreground: oklch(0.97 0.005 45); + --sidebar-border: oklch(0.3 0.018 45); + --sidebar-ring: oklch(0.58 0.02 45); +} +``` + +--- + +## 🎨 Visualisation des Teintes + +### Diagramme des teintes OKLCH : + +``` + 45° (Sepia) 225° (Blue) + │ │ + │ 230° (Slate) │ + │ ← principal → │ + ↓ ↓ + Gris-brun Gris-bleu + chaleureux saturé + + 250° (Midnight) + │ + ↓ + Gris-bleu + profond/sombre +``` + +### Relation entre les thèmes : + +``` +Slate (230°) ⭐ ← THÈME PRINCIPAL + ├── Midnight (250°) : Version + sombre + ├── Blue (225°) : Version + saturée + └── Sepia (45°) : Version chaleureuse +``` + +--- + +## ✅ Modifications à faire + +Dans `keep-notes/app/globals.css` : + +### 1. Remplacer les lignes 169-188 (midnight actuel) +Par le nouveau code **MIDNIGHT** ci-dessus + +### 2. Remplacer les lignes 190-217 (blue actuel) +Par le nouveau code **BLUE** ci-dessus + +### 3. Remplacer les lignes 219-238 (sepia actuel) +Par le nouveau code **SEPIA** ci-dessus + +--- + +## 💬 Choix du thème + +Utilisez ce tableau pour choisir : + +| Pour l'utilisation de jour | Utilisez | +|-------------------------|------------| +| Travail standard, productivité | **Slate** (230°) ⭐ | +| Ambiance calme, liseuse | **Sepia** (45°) | +| Ambiance énergique, créative | **Blue** (225°) | + +| Pour l'utilisation de nuit | Utilisez | +|-------------------------|------------| +| Nuit profonde, coding | **Midnight** (250°) | +| Nuit légère, confort | **Slate dark** (230°) | + +--- + +**Tous les thèmes sont harmonisés !** 🎨 + +*Thèmes créés par Amelia - Developer Agent* 💻 diff --git a/keep-notes/VISUALISATION-COULEURS.html b/keep-notes/VISUALISATION-COULEURS.html new file mode 100644 index 0000000..e268b42 --- /dev/null +++ b/keep-notes/VISUALISATION-COULEURS.html @@ -0,0 +1,521 @@ + + + + + + Visualisation des Couleurs - Slate Moderne + + + +

🎨 Visualisation des Couleurs - Options Modernes

+ +
+

🏆 RECOMMANDATION PRINCIPALE : SLATE (GRIS-BLEU)

+

Plus professionnel, moins fatigant, moderne - Sans dégradés !

+
+ + +
+

📊 Comparaison : Bleu Actuel vs Slate Moderne

+
+
+
+
Bleu Keep Actuel
+
+ #356AC0 +
+ Bleu saturé +
+ +
+
Slate Moderne (NOUVEAU)
+
+ #7A8A9A +
+ Gris-bleu élégant +
+
+
+
+ + +
+

✨ Option 1 : Slate (Gris-Bleu) - Mode Light

+
+
+
+ 🏆 SLATE LIGHT +
+
+
+
+
+
Background
+
#F8F9FB
+
+
+
+
+
+
Card
+
#FFFFFF
+
+
+
+
+
+
Sidebar
+
#F3F4F6
+
+
+
+
+
+
Texte (foreground)
+
#3B4252
+
+
+
+
+
+
Primary (boutons)
+
#7A8A9A
+
+
+
+
+
+
Border
+
#E5E7EB
+
+
+
+
+
+
+ + +
+

🌙 Option 1 : Slate (Gris-Bleu) - Mode Dark

+
+
+
+ 🏆 SLATE DARK +
+
+
+
+
+
Background
+
#1F2937
+
+
+
+
+
+
Card
+
#2D3748
+
+
+
+
+
+
Sidebar
+
#1A202C
+
+
+
+
+
+
Texte (foreground)
+
#F7FAFC
+
+
+
+
+
+
Primary (boutons)
+
#9CA3AF
+
+
+
+
+
+
Border
+
#4A5568
+
+
+
+
+
+
+ + +
+

📝 Couleurs des Notes (Light Mode)

+
+
+
Default
+
Note blanche standard
+
+ +
+
Red
+
Note rouge
+
+ +
+
Orange
+
Note orange
+
+ +
+
Yellow
+
Note jaune
+
+ +
+
Green (Emerald)
+
Note verte
+
+ +
+
Teal
+
Note teal
+
+ +
+
Blue (Sky)
+
Note bleue
+
+ +
+
Indigo
+
Note indigo
+
+ +
+
Violet
+
Note violette
+
+ +
+
Purple
+
Note pourpre
+
+ +
+
Pink
+
Note rose
+
+ +
+
Rose
+
Note rose rougeâtre
+
+ +
+
Gray
+
Note grise
+
+
+
+ + +
+

🔄 Autres Options de Thème

+
+
+
+ ⚫ MONOCHROME +
+
+
+
+
+
Background
+
#FFFFFF
+
+
+
+
+
+
Primary
+
#262626
+
+
+
+
+ +
+
+ 💜 INDIGO (Violet) +
+
+
+
+
+
Background
+
#F9F9FB
+
+
+
+
+
+
Primary
+
#7C3AED
+
+
+
+
+ +
+
+ 🌊 TEAL (Turquoise) +
+
+
+
+
+
Background
+
#F9FAFB
+
+
+
+
+
+
Primary
+
#0F766E
+
+
+
+
+
+
+ +
+

💬 Votre Choix Ramez ?

+

+ Regardez les couleurs, choisissez ce que vous préférez, puis dites-moi : +

+
+
+ ✅ SLATE (mon choix) +
+
+ 💜 INDIGO +
+
+ 🌊 TEAL +
+
+ ⚫ MONOCHROME +
+
+
+ +
+

💡 Ouvrez ce fichier dans votre navigateur pour voir toutes les couleurs !

+

Double-cliquez sur : keep-notes/VISUALISATION-COULEURS.html

+
+ + diff --git a/keep-notes/app/(main)/admin/ai-test/ai-tester.tsx b/keep-notes/app/(main)/admin/ai-test/ai-tester.tsx index 877e705..9f78917 100644 --- a/keep-notes/app/(main)/admin/ai-test/ai-tester.tsx +++ b/keep-notes/app/(main)/admin/ai-test/ai-tester.tsx @@ -177,7 +177,7 @@ export function AI_TESTER({ type }: { type: 'tags' | 'embeddings' }) { {type === 'tags' && result.success && result.tags && (
- + Generated Tags:
@@ -247,7 +247,7 @@ export function AI_TESTER({ type }: { type: 'tags' | 'embeddings' }) { {/* Loading State */} {isLoading && (
- +

Testing {type === 'tags' ? 'tags generation' : 'embeddings'}...

diff --git a/keep-notes/app/(main)/admin/ai-test/page.tsx b/keep-notes/app/(main)/admin/ai-test/page.tsx index b0ef5a2..673b19f 100644 --- a/keep-notes/app/(main)/admin/ai-test/page.tsx +++ b/keep-notes/app/(main)/admin/ai-test/page.tsx @@ -36,8 +36,8 @@ export default async function AITestPage() {
{/* Tags Provider Test */} - - + + 🏷️ Tags Generation Test diff --git a/keep-notes/app/(main)/admin/ai/page.tsx b/keep-notes/app/(main)/admin/ai/page.tsx index aa97bcc..9746fa7 100644 --- a/keep-notes/app/(main)/admin/ai/page.tsx +++ b/keep-notes/app/(main)/admin/ai/page.tsx @@ -21,7 +21,7 @@ export default async function AdminAIPage() { title: 'Avg Response Time', value: '1.2s', trend: { value: 5, isPositive: true }, - icon: , + icon: , }, { title: 'Active Features', @@ -103,7 +103,7 @@ export default async function AdminAIPage() { className={`px-2 py-1 text-xs font-medium rounded-full ${ provider.status === 'Connected' ? 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900' - : 'text-blue-700 dark:text-blue-400 bg-blue-100 dark:bg-blue-900' + : 'text-primary dark:text-primary-foreground bg-primary/10 dark:bg-primary/20' }`} > {provider.status} diff --git a/keep-notes/app/(main)/admin/page.tsx b/keep-notes/app/(main)/admin/page.tsx index 1621107..4ff57d7 100644 --- a/keep-notes/app/(main)/admin/page.tsx +++ b/keep-notes/app/(main)/admin/page.tsx @@ -11,7 +11,7 @@ export default async function AdminPage() { title: 'Total Users', value: users.length, trend: { value: 12, isPositive: true }, - icon: , + icon: , }, { title: 'Active Sessions', diff --git a/keep-notes/app/(main)/admin/settings/admin-settings-form.tsx b/keep-notes/app/(main)/admin/settings/admin-settings-form.tsx index b0a40f0..06e57ec 100644 --- a/keep-notes/app/(main)/admin/settings/admin-settings-form.tsx +++ b/keep-notes/app/(main)/admin/settings/admin-settings-form.tsx @@ -213,9 +213,9 @@ export function AdminSettingsForm({ config }: { config: Record }
{/* Tags Generation Section */} -
+

- 🏷️ Tags Generation Provider + 🏷️ Tags Generation Provider

AI provider for automatic tag suggestions. Recommended: Ollama (free, local).

@@ -264,7 +264,7 @@ export function AdminSettingsForm({ config }: { config: Record }
-

Your OpenAI API key from platform.openai.com

+

Your OpenAI API key from platform.openai.com

@@ -278,7 +278,7 @@ export function AdminSettingsForm({ config }: { config: Record } ))} -

gpt-4o-mini = Best value • gpt-4o = Best quality

+

gpt-4o-mini = Best value • gpt-4o = Best quality

)} @@ -372,7 +372,7 @@ export function AdminSettingsForm({ config }: { config: Record }
-

Your OpenAI API key from platform.openai.com

+

Your OpenAI API key from platform.openai.com

@@ -386,7 +386,7 @@ export function AdminSettingsForm({ config }: { config: Record } ))} -

text-embedding-3-small = Best value • text-embedding-3-large = Best quality

+

text-embedding-3-small = Best value • text-embedding-3-large = Best quality

)} diff --git a/keep-notes/app/(main)/page.tsx b/keep-notes/app/(main)/page.tsx index efdc1bb..afad85a 100644 --- a/keep-notes/app/(main)/page.tsx +++ b/keep-notes/app/(main)/page.tsx @@ -26,7 +26,7 @@ import { cn } from '@/lib/utils' import { LabelFilter } from '@/components/label-filter' export default function HomePage() { - console.log('[HomePage] Component rendering') + const searchParams = useSearchParams() const router = useRouter() // Force re-render when search params change (for filtering) @@ -58,7 +58,7 @@ export default function HomePage() { // Callback for NoteInput to trigger notebook suggestion and update UI const handleNoteCreated = useCallback((note: Note) => { - console.log('[NotebookSuggestion] Note created:', { id: note.id, notebookId: note.notebookId, contentLength: note.content?.length }) + // Update UI immediately by adding the note to the list if it matches current filters setNotes((prevNotes) => { @@ -120,19 +120,19 @@ export default function HomePage() { // Only suggest if note has no notebook and has 20+ words if (!note.notebookId) { const wordCount = (note.content || '').trim().split(/\s+/).filter(w => w.length > 0).length - console.log('[NotebookSuggestion] Word count:', wordCount) + if (wordCount >= 20) { - console.log('[NotebookSuggestion] Triggering suggestion for note:', note.id) + setNotebookSuggestion({ noteId: note.id, content: note.content || '' }) } else { - console.log('[NotebookSuggestion] Not enough words, need 20+') + } } else { - console.log('[NotebookSuggestion] Note has notebook, skipping') + } // Refresh in background to ensure data consistency (non-blocking) @@ -265,10 +265,10 @@ export default function HomePage() { // Helper for Breadcrumbs const Breadcrumbs = ({ notebookName }: { notebookName: string }) => ( -
+
Notebooks - {notebookName} + {notebookName}
) @@ -283,12 +283,12 @@ export default function HomePage() {
{/* Title Section */}
-
+
{(() => { const Icon = getNotebookIcon(currentNotebook.icon || 'folder') return ( ) @@ -311,7 +311,7 @@ export default function HomePage() { /> )} diff --git a/keep-notes/components/comparison-modal.tsx b/keep-notes/components/comparison-modal.tsx index dab6fc0..9780694 100644 --- a/keep-notes/components/comparison-modal.tsx +++ b/keep-notes/components/comparison-modal.tsx @@ -36,7 +36,7 @@ export function ComparisonModal({ const getNoteColor = (index: number) => { const colors = [ - 'border-blue-200 dark:border-blue-800 hover:border-blue-300 dark:hover:border-blue-700', + 'border-primary/20 dark:border-primary/30 hover:border-primary/30 dark:hover:border-primary/40', 'border-purple-200 dark:border-purple-800 hover:border-purple-300 dark:hover:border-purple-700', 'border-green-200 dark:border-green-800 hover:border-green-300 dark:hover:border-green-700' ] @@ -45,7 +45,7 @@ export function ComparisonModal({ const getTitleColor = (index: number) => { const colors = [ - 'text-blue-600 dark:text-blue-400', + 'text-primary dark:text-primary-foreground', 'text-purple-600 dark:text-purple-400', 'text-green-600 dark:text-green-400' ] diff --git a/keep-notes/components/create-notebook-dialog.tsx b/keep-notes/components/create-notebook-dialog.tsx index cf92935..7237888 100644 --- a/keep-notes/components/create-notebook-dialog.tsx +++ b/keep-notes/components/create-notebook-dialog.tsx @@ -31,7 +31,7 @@ const NOTEBOOK_ICONS = [ ] const NOTEBOOK_COLORS = [ - { name: 'Blue', value: '#3B82F6', bg: 'bg-blue-500' }, + { name: 'Slate', value: '#64748B', bg: 'bg-slate-500' }, { name: 'Purple', value: '#8B5CF6', bg: 'bg-purple-500' }, { name: 'Red', value: '#EF4444', bg: 'bg-red-500' }, { name: 'Orange', value: '#F59E0B', bg: 'bg-orange-500' }, diff --git a/keep-notes/components/header.tsx b/keep-notes/components/header.tsx index ffad341..d9e35bf 100644 --- a/keep-notes/components/header.tsx +++ b/keep-notes/components/header.tsx @@ -245,7 +245,7 @@ export function Header({ const NavItem = ({ href, icon: Icon, label, active, onClick }: any) => { const content = ( <> - + {label} ) @@ -257,7 +257,7 @@ export function Header({ className={cn( "w-full flex items-center gap-3 px-4 py-3 rounded-r-full text-sm font-medium transition-colors mr-2 text-left", active - ? "bg-blue-100 text-blue-900" + ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground" : "hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-700 dark:text-gray-300" )} style={{ minHeight: '44px' }} @@ -275,7 +275,7 @@ export function Header({ className={cn( "flex items-center gap-3 px-4 py-3 rounded-r-full text-sm font-medium transition-colors mr-2", active - ? "bg-blue-100 text-blue-900" + ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground" : "hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-700 dark:text-gray-300" )} style={{ minHeight: '44px' }} @@ -297,7 +297,7 @@ export function Header({ {/* Logo MEMENTO */}
router.push('/')}> -
+

MEMENTO

@@ -333,7 +333,7 @@ export function Header({ {/* User Avatar Menu */} -
{!currentUser?.image && ( diff --git a/keep-notes/components/label-selector.tsx b/keep-notes/components/label-selector.tsx index cba7703..fcd9f33 100644 --- a/keep-notes/components/label-selector.tsx +++ b/keep-notes/components/label-selector.tsx @@ -100,7 +100,7 @@ export function LabelSelector({ >
{isSelected && }
diff --git a/keep-notes/components/markdown-content.tsx b/keep-notes/components/markdown-content.tsx index dd6bf56..d4cb0fc 100644 --- a/keep-notes/components/markdown-content.tsx +++ b/keep-notes/components/markdown-content.tsx @@ -19,7 +19,7 @@ export function MarkdownContent({ content, className = '' }: MarkdownContentProp rehypePlugins={[rehypeKatex]} components={{ a: ({ node, ...props }) => ( - + ) }} > diff --git a/keep-notes/components/masonry-grid.css b/keep-notes/components/masonry-grid.css index 42efe18..20d5f72 100644 --- a/keep-notes/components/masonry-grid.css +++ b/keep-notes/components/masonry-grid.css @@ -26,7 +26,7 @@ .masonry-item-content { position: relative; width: 100%; - height: 100%; + /* height: auto - let content determine height */ box-sizing: border-box; } @@ -45,16 +45,22 @@ } /* Note Size Styles - Desktop Default */ +.masonry-item[data-size="small"], .note-card[data-size="small"] { - min-height: 150px !important; + min-height: 150px; + height: auto !important; } +.masonry-item[data-size="medium"], .note-card[data-size="medium"] { - min-height: 200px !important; + min-height: 200px; + height: auto !important; } +.masonry-item[data-size="large"], .note-card[data-size="large"] { - min-height: 300px !important; + min-height: 300px; + height: auto !important; } /* Drag State Styles - Clean and flat behavior requested by user */ @@ -124,16 +130,22 @@ } /* Smaller note sizes on mobile */ + .masonry-item[data-size="small"], .masonry-item-content .note-card[data-size="small"] { min-height: 120px; + height: auto !important; } + .masonry-item[data-size="medium"], .masonry-item-content .note-card[data-size="medium"] { min-height: 160px; + height: auto !important; } + .masonry-item[data-size="large"], .masonry-item-content .note-card[data-size="large"] { min-height: 240px; + height: auto !important; } /* Reduced drag effect on mobile */ @@ -183,7 +195,7 @@ .masonry-item, .masonry-item-content, .note-card { - transition-property: transform, box-shadow, opacity; + transition-property: box-shadow, opacity; transition-duration: 0.2s; transition-timing-function: ease-out; } diff --git a/keep-notes/components/masonry-grid.tsx b/keep-notes/components/masonry-grid.tsx index 11991bc..7713e37 100644 --- a/keep-notes/components/masonry-grid.tsx +++ b/keep-notes/components/masonry-grid.tsx @@ -20,12 +20,13 @@ interface MasonryItemProps { note: Note; onEdit: (note: Note, readOnly?: boolean) => void; onResize: () => void; + onNoteSizeChange: (noteId: string, newSize: 'small' | 'medium' | 'large') => void; onDragStart?: (noteId: string) => void; onDragEnd?: () => void; isDragging?: boolean; } -const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragStart, onDragEnd, isDragging }: MasonryItemProps) { +const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onNoteSizeChange, onDragStart, onDragEnd, isDragging }: MasonryItemProps) { const resizeRef = useResizeObserver(onResize); return ( @@ -43,13 +44,12 @@ const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragSt onDragStart={onDragStart} onDragEnd={onDragEnd} isDragging={isDragging} + onResize={onResize} + onSizeChange={(newSize) => onNoteSizeChange(note.id, newSize)} />
); -}, (prev, next) => { - // Custom comparison to avoid re-render on function prop changes if note data is same - return prev.note.id === next.note.id && prev.isDragging === next.isDragging; }); export function MasonryGrid({ notes, onEdit }: MasonryGridProps) { @@ -57,6 +57,22 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) { const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null); const { startDrag, endDrag, draggedNoteId } = useNotebookDrag(); + // Local state for notes with dynamic size updates + // This allows size changes to propagate immediately without waiting for server + const [localNotes, setLocalNotes] = useState(notes); + + // Sync localNotes when parent notes prop changes + useEffect(() => { + setLocalNotes(notes); + }, [notes]); + + // Callback for when a note's size changes - update local state immediately + const handleNoteSizeChange = useCallback((noteId: string, newSize: 'small' | 'medium' | 'large') => { + setLocalNotes(prevNotes => + prevNotes.map(n => n.id === noteId ? { ...n, size: newSize } : n) + ); + }, []); + const handleEdit = useCallback((note: Note, readOnly?: boolean) => { if (onEdit) { onEdit(note, readOnly); @@ -70,14 +86,14 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) { const pinnedMuuri = useRef(null); const othersMuuri = useRef(null); - // Memoize filtered notes (order comes from array) + // Memoize filtered notes from localNotes (which includes dynamic size updates) const pinnedNotes = useMemo( - () => notes.filter(n => n.isPinned), - [notes] + () => localNotes.filter(n => n.isPinned), + [localNotes] ); const othersNotes = useMemo( - () => notes.filter(n => !n.isPinned), - [notes] + () => localNotes.filter(n => !n.isPinned), + [localNotes] ); const handleDragEnd = useCallback(async (grid: any) => { @@ -152,7 +168,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) { const columns = calculateColumns(containerWidth); const itemWidth = calculateItemWidth(containerWidth, columns); - console.log(`[Masonry] Container width: ${containerWidth}px, Columns: ${columns}, Item width: ${itemWidth}px`); + const layoutOptions = { dragEnabled: true, @@ -279,6 +295,13 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) { requestAnimationFrame(() => { syncGridItems(pinnedMuuri.current, pinnedGridRef, pinnedNotes); syncGridItems(othersMuuri.current, othersGridRef, othersNotes); + + // CRITICAL: Force a second layout after CSS transitions (padding/height changes) complete + // NoteCard has a 200ms transition. We wait 300ms to be safe. + setTimeout(() => { + if (pinnedMuuri.current) pinnedMuuri.current.refreshItems().layout(); + if (othersMuuri.current) othersMuuri.current.refreshItems().layout(); + }, 300); }); }, [pinnedNotes, othersNotes]); // Re-run when notes change @@ -295,7 +318,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) { const containerWidth = entries[0]?.contentRect.width || window.innerWidth - 32; const columns = calculateColumns(containerWidth); - console.log(`[Masonry Resize] Width: ${containerWidth}px, Columns: ${columns}`); + // Apply dimensions to both grids applyItemDimensions(pinnedMuuri.current, containerWidth); @@ -331,10 +354,11 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
{pinnedNotes.map(note => ( {othersNotes.map(note => ( )} -
); } diff --git a/keep-notes/components/memory-echo-notification.tsx b/keep-notes/components/memory-echo-notification.tsx index 4ad11b8..69d4632 100644 --- a/keep-notes/components/memory-echo-notification.tsx +++ b/keep-notes/components/memory-echo-notification.tsx @@ -173,7 +173,7 @@ export function MemoryEchoNotification({ onOpenNote }: MemoryEchoNotificationPro }} className="cursor-pointer border dark:border-zinc-700 rounded-lg p-4 hover:border-amber-300 dark:hover:border-amber-700 transition-colors" > -

+

{note1Title}

@@ -278,7 +278,7 @@ export function MemoryEchoNotification({ onOpenNote }: MemoryEchoNotificationPro {/* Connected notes */}

- + {note1Title} diff --git a/keep-notes/components/note-actions.tsx b/keep-notes/components/note-actions.tsx index 5cdfb4f..ae9f0c4 100644 --- a/keep-notes/components/note-actions.tsx +++ b/keep-notes/components/note-actions.tsx @@ -111,7 +111,9 @@ export function NoteActions({ {(['small', 'medium', 'large'] as const).map((size) => ( onSizeChange(size)} + onClick={(e) => { + onSizeChange?.(size); + }} className={cn( "capitalize", currentSize === size && "bg-accent" diff --git a/keep-notes/components/note-card.tsx b/keep-notes/components/note-card.tsx index 63cabbd..219e464 100644 --- a/keep-notes/components/note-card.tsx +++ b/keep-notes/components/note-card.tsx @@ -86,6 +86,8 @@ interface NoteCardProps { isDragOver?: boolean onDragStart?: (noteId: string) => void onDragEnd?: () => void + onResize?: () => void + onSizeChange?: (newSize: 'small' | 'medium' | 'large') => void } // Helper function to get initials from name @@ -116,7 +118,15 @@ function getAvatarColor(name: string): string { return colors[hash % colors.length] } -export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, onDragEnd }: NoteCardProps) { +export function NoteCard({ + note, + onEdit, + onDragStart, + onDragEnd, + isDragging, + onResize, + onSizeChange +}: NoteCardProps) { const router = useRouter() const searchParams = useSearchParams() const { refreshLabels } = useLabels() @@ -138,7 +148,14 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on setShowNotebookMenu(false) // No need for router.refresh() - triggerRefresh() is already called in moveNoteToNotebookOptimistic } - const colorClasses = NOTE_COLORS[note.color as NoteColor] || NOTE_COLORS.default + + // Optimistic UI state for instant feedback + const [optimisticNote, addOptimisticNote] = useOptimistic( + note, + (state, newProps: Partial) => ({ ...state, ...newProps }) + ) + + const colorClasses = NOTE_COLORS[optimisticNote.color as NoteColor] || NOTE_COLORS.default // Check if this note is currently open in the editor const isNoteOpenInEditor = searchParams.get('note') === note.id @@ -148,12 +165,6 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on comparisonNotes && comparisonNotes.length > 0 ? comparisonNotes : null ) - // Optimistic UI state for instant feedback - const [optimisticNote, addOptimisticNote] = useOptimistic( - note, - (state, newProps: Partial) => ({ ...state, ...newProps }) - ) - const currentUserId = session?.user?.id const canManageCollaborators = currentUserId && note.userId && currentUserId === note.userId const isSharedNote = currentUserId && note.userId && currentUserId !== note.userId @@ -226,10 +237,15 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on } const handleSizeChange = async (size: 'small' | 'medium' | 'large') => { - startTransition(async () => { - addOptimisticNote({ size }) - await updateSize(note.id, size) - }) + // Notify parent of size change so it can update its state + onSizeChange?.(size) + + // Trigger layout refresh + onResize?.() + setTimeout(() => onResize?.(), 300) + + // Update server in background + updateSize(note.id, size) } const handleCheckItem = async (checkItemId: string) => { @@ -267,12 +283,23 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on if (isDeleting) return null + const getMinHeight = (size?: string) => { + switch (size) { + case 'medium': return '200px' + case 'large': return '300px' + default: return '150px' // small + } + } + + + return ( { e.dataTransfer.setData('text/plain', note.id) @@ -560,7 +587,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on isPinned={optimisticNote.isPinned} isArchived={optimisticNote.isArchived} currentColor={optimisticNote.color} - currentSize={optimisticNote.size} + currentSize={optimisticNote.size as 'small' | 'medium' | 'large'} onTogglePin={handleTogglePin} onToggleArchive={handleToggleArchive} onColorChange={handleColorChange} diff --git a/keep-notes/components/note-editor.tsx b/keep-notes/components/note-editor.tsx index dcdc2e4..44f0c81 100644 --- a/keep-notes/components/note-editor.tsx +++ b/keep-notes/components/note-editor.tsx @@ -550,7 +550,7 @@ export function NoteEditor({ note, readOnly = false, onClose }: NoteEditorProps)

{readOnly ? t('notes.view') : t('notes.edit')}

{readOnly && ( - + {t('notes.readOnly')} )} @@ -607,7 +607,7 @@ export function NoteEditor({ note, readOnly = false, onClose }: NoteEditorProps) @@ -636,7 +636,7 @@ export function NoteEditor({ note, readOnly = false, onClose }: NoteEditorProps) setIsMarkdown(!isMarkdown) if (isMarkdown) setShowMarkdownPreview(false) }} - className={cn("h-7 text-xs", isMarkdown && "text-blue-600")} + className={cn("h-7 text-xs", isMarkdown && "text-primary")} > {isMarkdown ? t('notes.markdownOn') : t('notes.markdownOff')} @@ -824,7 +824,7 @@ export function NoteEditor({ note, readOnly = false, onClose }: NoteEditorProps) size="sm" onClick={() => setShowReminderDialog(true)} title={t('notes.setReminder')} - className={currentReminder ? "text-blue-600" : ""} + className={currentReminder ? "text-primary" : ""} > diff --git a/keep-notes/components/note-input.tsx b/keep-notes/components/note-input.tsx index 5afdc08..9a60777 100644 --- a/keep-notes/components/note-input.tsx +++ b/keep-notes/components/note-input.tsx @@ -645,7 +645,7 @@ export function NoteInput({ onNoteCreated, defaultExpanded = false, forceExpande

{link.title || link.url}

{link.description &&

{link.description}

} - + {new URL(link.url).hostname}
@@ -781,7 +781,7 @@ export function NoteInput({ onNoteCreated, defaultExpanded = false, forceExpande size="icon" className={cn( "h-8 w-8", - currentReminder && "text-blue-600" + currentReminder && "text-primary" )} title={t('notes.remindMe')} onClick={handleReminderOpen} @@ -799,7 +799,7 @@ export function NoteInput({ onNoteCreated, defaultExpanded = false, forceExpande size="icon" className={cn( "h-8 w-8", - isMarkdown && "text-blue-600" + isMarkdown && "text-primary" )} onClick={() => { setIsMarkdown(!isMarkdown) diff --git a/keep-notes/components/notebook-suggestion-toast.tsx b/keep-notes/components/notebook-suggestion-toast.tsx index f083916..b0ddd11 100644 --- a/keep-notes/components/notebook-suggestion-toast.tsx +++ b/keep-notes/components/notebook-suggestion-toast.tsx @@ -103,7 +103,7 @@ export function NotebookSuggestionToast({
{/* Icon */}
-
- +
+
@@ -131,7 +131,7 @@ export function NotebookSuggestionToast({ {/* Move button */} diff --git a/keep-notes/components/notebooks-list.tsx b/keep-notes/components/notebooks-list.tsx index 6ac51b1..6a9f029 100644 --- a/keep-notes/components/notebooks-list.tsx +++ b/keep-notes/components/notebooks-list.tsx @@ -158,8 +158,8 @@ export function NotebooksList() { onDragLeave={handleDragLeave} className={cn( "flex flex-col mr-2 rounded-r-full overflow-hidden transition-all", - !notebook.color && "bg-blue-50 dark:bg-blue-900/20", - isDragOver && "ring-2 ring-blue-500 ring-dashed" + !notebook.color && "bg-primary/10 dark:bg-primary/20", + isDragOver && "ring-2 ring-primary ring-dashed" )} style={notebook.color ? { backgroundColor: `${notebook.color}20` } : undefined} > @@ -167,11 +167,11 @@ export function NotebooksList() {
{notebook.name} @@ -179,7 +179,7 @@ export function NotebooksList() {
-
+
- + {t('nav.aiSettings')}
{pendingCount > 0 && ( - + {pendingCount} )} @@ -142,7 +142,7 @@ export function NotificationPanel() { {isLoading ? (
-
+
{t('general.loading')}
) : requests.length === 0 ? ( @@ -171,7 +171,7 @@ export function NotificationPanel() {
{request.permission} diff --git a/keep-notes/components/recent-notes-section.tsx b/keep-notes/components/recent-notes-section.tsx index d60467e..117b166 100644 --- a/keep-notes/components/recent-notes-section.tsx +++ b/keep-notes/components/recent-notes-section.tsx @@ -73,11 +73,11 @@ function CompactCard({ {/* Subtle left accent - colored based on recency */}
{/* Content with left padding for accent line */} @@ -105,7 +105,7 @@ function CompactCard({
{/* Notebook indicator */} {note.notebookId && ( -
+
)} {/* Labels indicator */} {note.labels && note.labels.length > 0 && ( diff --git a/keep-notes/components/sidebar.tsx b/keep-notes/components/sidebar.tsx index c3eb97c..9b4344b 100644 --- a/keep-notes/components/sidebar.tsx +++ b/keep-notes/components/sidebar.tsx @@ -53,8 +53,8 @@ export function Sidebar({ className, user }: { className?: string, user?: any }) "flex items-center gap-4 px-6 py-3 rounded-r-full mr-2 transition-colors", "text-sm font-medium tracking-wide", active - ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-100" - : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50" + ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground" + : "text-muted-foreground hover:bg-muted/50 dark:hover:bg-muted/30" )} > diff --git a/keep-notes/components/theme-initializer.tsx b/keep-notes/components/theme-initializer.tsx index d8eb19e..6d4f131 100644 --- a/keep-notes/components/theme-initializer.tsx +++ b/keep-notes/components/theme-initializer.tsx @@ -9,10 +9,10 @@ interface ThemeInitializerProps { export function ThemeInitializer({ theme, fontSize }: ThemeInitializerProps) { useEffect(() => { - console.log('[ThemeInitializer] Received theme:', theme) + // Helper to apply theme const applyTheme = (t?: string) => { - console.log('[ThemeInitializer] Applying theme:', t) + if (!t) return const root = document.documentElement @@ -66,7 +66,7 @@ export function ThemeInitializer({ theme, fontSize }: ThemeInitializerProps) { const localTheme = localStorage.getItem('theme-preference') const effectiveTheme = localTheme || theme - console.log('[ThemeInitializer] Local theme:', localTheme, '| Server theme:', theme, '| Using:', effectiveTheme) + applyTheme(effectiveTheme) diff --git a/keep-notes/lib/color-harmony-recommendation.ts b/keep-notes/lib/color-harmony-recommendation.ts new file mode 100644 index 0000000..6d9e3fd --- /dev/null +++ b/keep-notes/lib/color-harmony-recommendation.ts @@ -0,0 +1,310 @@ +/** + * PROPOSITION D'HARMONIE DE COULEURS + * =================================== + * + * Recommandations pour un système de couleurs unifié et moderne + * Inspiré de Google Keep avec une approche contemporaine + * + */ + +// ============================================================================= +// 1. PALETTE PRINCIPALE DU THÈME (OKLCH) +// ============================================================================= + +/** + * Proposition de palette principale avec meilleure cohérence + * Utilise OKLCH pour une meilleure accessibilité et cohérence perceptive + */ +export const RECOMMENDED_THEME_COLORS = { + /* ============ THEME LIGHT ============ */ + light: { + // Backgrounds + background: 'oklch(0.99 0.002 250)', // Blanc très légèrement bleuté + card: 'oklch(1 0 0)', // Blanc pur + sidebar: 'oklch(0.96 0.005 250)', // Gris-bleu très pâle + input: 'oklch(0.97 0.003 250)', // Gris-bleu pâle + + // Textes + foreground: 'oklch(0.18 0.01 250)', // Gris-bleu foncé (meilleur contraste) + 'foreground-secondary': 'oklch(0.45 0.01 250)', // Gris moyen + 'foreground-muted': 'oklch(0.6 0.005 250)', // Gris clair + + // Primary Actions + primary: 'oklch(0.55 0.2 250)', // Bleu Keep (plus vibrant) + 'primary-hover': 'oklch(0.5 0.22 250)', // Bleu Keep foncé + 'primary-foreground': 'oklch(0.99 0 0)', // Blanc pur + + // Accents + accent: 'oklch(0.92 0.015 250)', // Bleu très pâle + 'accent-foreground': 'oklch(0.18 0.01 250)', + + // Borders + border: 'oklch(0.88 0.01 250)', // Gris-bleu très clair + 'border-hover': 'oklch(0.8 0.015 250)', + + // Functional + success: 'oklch(0.65 0.15 145)', // Vert + warning: 'oklch(0.75 0.12 70)', // Jaune/orange + destructive: 'oklch(0.6 0.2 25)', // Rouge + }, + + /* ============ THEME DARK ============ */ + dark: { + // Backgrounds + background: 'oklch(0.12 0.01 250)', // Noir légèrement bleuté + card: 'oklch(0.16 0.01 250)', // Gris-bleu foncé + sidebar: 'oklch(0.1 0.01 250)', // Noir bleuté + input: 'oklch(0.18 0.01 250)', + + // Textes + foreground: 'oklch(0.96 0.002 250)', // Blanc légèrement bleuté + 'foreground-secondary': 'oklch(0.75 0.005 250)', + 'foreground-muted': 'oklch(0.55 0.01 250)', + + // Primary Actions + primary: 'oklch(0.65 0.2 250)', // Bleu plus clair + 'primary-hover': 'oklch(0.7 0.2 250)', + 'primary-foreground': 'oklch(0.1 0 0)', + + // Accents + accent: 'oklch(0.22 0.01 250)', + 'accent-foreground': 'oklch(0.96 0.002 250)', + + // Borders + border: 'oklch(0.25 0.015 250)', + 'border-hover': 'oklch(0.35 0.015 250)', + + // Functional + success: 'oklch(0.7 0.15 145)', + warning: 'oklch(0.8 0.12 70)', + destructive: 'oklch(0.65 0.2 25)', + }, +} as const; + +// ============================================================================= +// 2. PALETTE DES COULEURS DE NOTES (UNIFIÉE) +// ============================================================================= + +/** + * Nouvelle palette de couleurs pour les notes + * Harmonisée avec le thème principal + * Meilleure accessibilité WCAG AA (contraste minimum 4.5:1) + */ +export const RECOMMENDED_NOTE_COLORS = { + default: { + // Light theme + bg: 'bg-white', + 'bg-dark': 'dark:bg-neutral-900', + border: 'border-neutral-200', + 'border-dark': 'dark:border-neutral-800', + hover: 'hover:bg-neutral-50', + 'hover-dark': 'dark:hover:bg-neutral-800', + // Pour texte sombre + text: 'text-neutral-900', + 'text-dark': 'dark:text-neutral-100', + }, + red: { + bg: 'bg-red-50', + 'bg-dark': 'dark:bg-red-950/40', + border: 'border-red-100', + 'border-dark': 'dark:border-red-900/50', + hover: 'hover:bg-red-100', + 'hover-dark': 'dark:hover:bg-red-950/60', + text: 'text-red-950', + 'text-dark': 'dark:text-red-100', + }, + orange: { + bg: 'bg-orange-50', + 'bg-dark': 'dark:bg-orange-950/40', + border: 'border-orange-100', + 'border-dark': 'dark:border-orange-900/50', + hover: 'hover:bg-orange-100', + 'hover-dark': 'dark:hover:bg-orange-950/60', + text: 'text-orange-950', + 'text-dark': 'dark:text-orange-100', + }, + yellow: { + bg: 'bg-yellow-50', + 'bg-dark': 'dark:bg-yellow-950/40', + border: 'border-yellow-100', + 'border-dark': 'dark:border-yellow-900/50', + hover: 'hover:bg-yellow-100', + 'hover-dark': 'dark:hover:bg-yellow-950/60', + text: 'text-yellow-950', + 'text-dark': 'dark:text-yellow-100', + }, + green: { + bg: 'bg-emerald-50', + 'bg-dark': 'dark:bg-emerald-950/40', + border: 'border-emerald-100', + 'border-dark': 'dark:border-emerald-900/50', + hover: 'hover:bg-emerald-100', + 'hover-dark': 'dark:hover:bg-emerald-950/60', + text: 'text-emerald-950', + 'text-dark': 'dark:text-emerald-100', + }, + teal: { + bg: 'bg-teal-50', + 'bg-dark': 'dark:bg-teal-950/40', + border: 'border-teal-100', + 'border-dark': 'dark:border-teal-900/50', + hover: 'hover:bg-teal-100', + 'hover-dark': 'dark:hover:bg-teal-950/60', + text: 'text-teal-950', + 'text-dark': 'dark:text-teal-100', + }, + blue: { + bg: 'bg-blue-50', + 'bg-dark': 'dark:bg-blue-950/40', + border: 'border-blue-100', + 'border-dark': 'dark:border-blue-900/50', + hover: 'hover:bg-blue-100', + 'hover-dark': 'dark:hover:bg-blue-950/60', + text: 'text-blue-950', + 'text-dark': 'dark:text-blue-100', + }, + indigo: { + bg: 'bg-indigo-50', + 'bg-dark': 'dark:bg-indigo-950/40', + border: 'border-indigo-100', + 'border-dark': 'dark:border-indigo-900/50', + hover: 'hover:bg-indigo-100', + 'hover-dark': 'dark:hover:bg-indigo-950/60', + text: 'text-indigo-950', + 'text-dark': 'dark:text-indigo-100', + }, + violet: { + bg: 'bg-violet-50', + 'bg-dark': 'dark:bg-violet-950/40', + border: 'border-violet-100', + 'border-dark': 'dark:border-violet-900/50', + hover: 'hover:bg-violet-100', + 'hover-dark': 'dark:hover:bg-violet-950/60', + text: 'text-violet-950', + 'text-dark': 'dark:text-violet-100', + }, + purple: { + bg: 'bg-purple-50', + 'bg-dark': 'dark:bg-purple-950/40', + border: 'border-purple-100', + 'border-dark': 'dark:border-purple-900/50', + hover: 'hover:bg-purple-100', + 'hover-dark': 'dark:hover:bg-purple-950/60', + text: 'text-purple-950', + 'text-dark': 'dark:text-purple-100', + }, + pink: { + bg: 'bg-pink-50', + 'bg-dark': 'dark:bg-pink-950/40', + border: 'border-pink-100', + 'border-dark': 'dark:border-pink-900/50', + hover: 'hover:bg-pink-100', + 'hover-dark': 'dark:hover:bg-pink-950/60', + text: 'text-pink-950', + 'text-dark': 'dark:text-pink-100', + }, + rose: { + bg: 'bg-rose-50', + 'bg-dark': 'dark:bg-rose-950/40', + border: 'border-rose-100', + 'border-dark': 'dark:border-rose-900/50', + hover: 'hover:bg-rose-100', + 'hover-dark': 'dark:hover:bg-rose-950/60', + text: 'text-rose-950', + 'text-dark': 'dark:text-rose-100', + }, + gray: { + bg: 'bg-neutral-100', + 'bg-dark': 'dark:bg-neutral-800', + border: 'border-neutral-200', + 'border-dark': 'dark:border-neutral-700', + hover: 'hover:bg-neutral-200', + 'hover-dark': 'dark:hover:bg-neutral-700', + text: 'text-neutral-900', + 'text-dark': 'dark:text-neutral-100', + }, +} as const; + +// ============================================================================= +// 3. RÈGLES DE DESIGN +// ============================================================================= + +/** + * Principes de design couleur : + * + * 1. HARMONIE : Toutes les couleurs partagent la même teinte de base (bleu 250°) + * - Crée une cohérence visuelle + * - Réduit la fatigue visuelle + * - Améliore la perception de marque + * + * 2. CONTRASTE : Respecte WCAG AA (4.5:1 minimum) + * - Texte sur fond : toujours ≥ 4.5:1 + * - Éléments interactifs : ≥ 3:1 + * - Utilise OKLCH pour une mesure plus précise + * + * 3. ACCESSIBILITÉ : + * - Ne pas utiliser la couleur seule pour véhiculer l'information + * - Inclure des icônes ou des symboles + * - Supporter le mode de contraste élevé + * + * 4. ADAPTABILITÉ : + * - Mode light/dark automatique + * - Variations de couleur par note + * - Thèmes alternatifs (midnight, blue, sepia) + * + * 5. PERFORMANCE PERCEPTIVE : + * - OKLCH pour une échelle perceptuelle uniforme + * - Même légèreté perçue entre light et dark + * - Transition fluide entre thèmes + */ + +// ============================================================================= +// 4. EXEMPLE D'IMPLEMENTATION +// ============================================================================= + +/** + * Comment utiliser ces couleurs dans les composants : + * + * ```tsx + * import { RECOMMENDED_NOTE_COLORS } from '@/lib/color-harmony-recommendation' + * + * // Pour une carte de note + *
+ * {note.content} + *
+ * + * // Pour le thème global (globals.css) + * :root { + * --background: oklch(0.99 0.002 250); + * --foreground: oklch(0.18 0.01 250); + * --primary: oklch(0.55 0.2 250); + * // ... autres couleurs + * } + * ``` + */ + +// ============================================================================= +// 5. AVANTAGES DE CETTE APPROCHE +// ============================================================================= + +/** + * ✅ Cohérence visuelle accrue + * ✅ Meilleure accessibilité (WCAG AA+) + * ✅ Adaptation native aux modes light/dark + * ✅ Palette extensible (facile à ajouter de nouvelles couleurs) + * ✅ Performance OKLCH (perception humaine) + * ✅ Compatible avec Tailwind CSS + * ✅ Maintenance simplifiée + * ✅ Professionalisme et modernité + */ + +export type RecommendedNoteColor = keyof typeof RECOMMENDED_NOTE_COLORS; diff --git a/keep-notes/lib/modern-color-options.ts b/keep-notes/lib/modern-color-options.ts new file mode 100644 index 0000000..984a0a9 --- /dev/null +++ b/keep-notes/lib/modern-color-options.ts @@ -0,0 +1,307 @@ +/** + * OPTIONS DE COULEURS MODERNES - PAS DE DÉGRADÉS + * ================================================= + * + * Alternatives au bleu traditionnel pour un design contemporain + */ + +// ============================================================================= +// OPTION 1: GRIS-BLEU (SLATE) - RECOMMANDÉE ✅ +// ============================================================================= +/** + * Gris-bleu moderne et professionnel + * Inspiré par Linear, Vercel, GitHub + * Très élégant, discret et apaisant pour les yeux + */ +export const SLATE_THEME = { + name: 'Gris-Bleu (Slate)', + description: 'Moderne, professionnel et apaisant - comme Linear/Vercel', + + light: { + // Backgrounds + background: 'oklch(0.985 0.003 230)', // Blanc grisâtre très léger + card: 'oklch(1 0 0)', // Blanc pur + sidebar: 'oklch(0.97 0.004 230)', // Gris-bleu très pâle + input: 'oklch(0.98 0.003 230)', // Gris-bleu pâle + + // Textes + foreground: 'oklch(0.2 0.02 230)', // Gris-bleu foncé + 'foreground-secondary': 'oklch(0.45 0.015 230)', // Gris-bleu moyen + 'foreground-muted': 'oklch(0.6 0.01 230)', // Gris-bleu clair + + // Primary (le point coloré de l'interface) + primary: 'oklch(0.45 0.08 230)', // Gris-bleu doux + 'primary-hover': 'oklch(0.4 0.09 230)', // Gris-bleu plus foncé + 'primary-foreground': 'oklch(0.99 0 0)', // Blanc + + // Accents + accent: 'oklch(0.94 0.005 230)', // Gris-bleu très pâle + 'accent-foreground': 'oklch(0.2 0.02 230)', + + // Borders + border: 'oklch(0.9 0.008 230)', // Gris-bleu très clair + 'border-hover': 'oklch(0.82 0.01 230)', + + // Functional + success: 'oklch(0.65 0.15 145)', // Vert emerald + warning: 'oklch(0.75 0.12 70)', // Jaune/orange + destructive: 'oklch(0.6 0.18 25)', // Rouge + }, + + dark: { + // Backgrounds + background: 'oklch(0.14 0.005 230)', // Noir grisâtre léger + card: 'oklch(0.18 0.006 230)', // Gris-bleu foncé + sidebar: 'oklch(0.12 0.005 230)', // Noir grisâtre + input: 'oklch(0.2 0.006 230)', + + // Textes + foreground: 'oklch(0.97 0.003 230)', // Blanc grisâtre + 'foreground-secondary': 'oklch(0.75 0.008 230)', + 'foreground-muted': 'oklch(0.55 0.01 230)', + + // Primary + primary: 'oklch(0.55 0.08 230)', // Gris-bleu plus clair + 'primary-hover': 'oklch(0.6 0.09 230)', + 'primary-foreground': 'oklch(0.1 0 0)', + + // Accents + accent: 'oklch(0.24 0.006 230)', + 'accent-foreground': 'oklch(0.97 0.003 230)', + + // Borders + border: 'oklch(0.28 0.01 230)', + 'border-hover': 'oklch(0.38 0.012 230)', + + // Functional + success: 'oklch(0.7 0.15 145)', + warning: 'oklch(0.8 0.12 70)', + destructive: 'oklch(0.65 0.18 25)', + }, +} as const; + +// ============================================================================= +// OPTION 2: MONOCHROME GRIS (MINIMALISTE) +// ============================================================================= +/** + * Noir et blanc avec subtilités de gris + * Style minimaliste ultra-moderne (Linear, Stripe, Apple) + * Absolument pas de couleur sauf pour les fonctionnalités + */ +export const MONOCHROME_THEME = { + name: 'Monochrome Gris', + description: 'Minimaliste et élégant - style Linear/Apple', + + light: { + background: 'oklch(0.99 0 0)', // Blanc pur + card: 'oklch(1 0 0)', // Blanc pur + sidebar: 'oklch(0.96 0 0)', // Gris très pâle + input: 'oklch(0.98 0 0)', + + foreground: 'oklch(0.15 0 0)', // Noir pur + 'foreground-secondary': 'oklch(0.45 0 0)', // Gris moyen + 'foreground-muted': 'oklch(0.6 0 0)', // Gris clair + + primary: 'oklch(0.2 0 0)', // Gris foncé + 'primary-hover': 'oklch(0.15 0 0)', // Noir + 'primary-foreground': 'oklch(1 0 0)', // Blanc + + accent: 'oklch(0.95 0 0)', // Gris très pâle + 'accent-foreground': 'oklch(0.2 0 0)', + + border: 'oklch(0.89 0 0)', // Gris très clair + 'border-hover': 'oklch(0.75 0 0)', + + success: 'oklch(0.6 0.15 145)', // Vert subtil + warning: 'oklch(0.7 0.12 70)', // Jaune subtil + destructive: 'oklch(0.55 0.18 25)', // Rouge subtil + }, + + dark: { + background: 'oklch(0.1 0 0)', // Noir pur + card: 'oklch(0.14 0 0)', // Gris très foncé + sidebar: 'oklch(0.08 0 0)', // Noir pur + input: 'oklch(0.16 0 0)', + + foreground: 'oklch(0.98 0 0)', // Blanc pur + 'foreground-secondary': 'oklch(0.7 0 0)', // Gris moyen + 'foreground-muted': 'oklch(0.5 0 0)', // Gris foncé + + primary: 'oklch(0.85 0 0)', // Gris clair + 'primary-hover': 'oklch(0.9 0 0)', // Blanc + 'primary-foreground': 'oklch(0.1 0 0)', // Noir + + accent: 'oklch(0.2 0 0)', // Gris foncé + 'accent-foreground': 'oklch(0.98 0 0)', + + border: 'oklch(0.25 0 0)', // Gris foncé + 'border-hover': 'oklch(0.35 0 0)', + + success: 'oklch(0.65 0.15 145)', + warning: 'oklch(0.75 0.12 70)', + destructive: 'oklch(0.6 0.18 25)', + }, +} as const; + +// ============================================================================= +// OPTION 3: VIOLET PROFOND (INDIGO) +// ============================================================================= +/** + * Violet profond élégant et moderne + * Entre le bleu et le violet + * Très professionnel (Discord, Notion, Figma) + */ +export const INDIGO_THEME = { + name: 'Violet Profond', + description: 'Élégant et moderne - style Discord/Notion', + + light: { + background: 'oklch(0.99 0.005 260)', // Blanc légèrement violacé + card: 'oklch(1 0 0)', + sidebar: 'oklch(0.96 0.006 260)', + input: 'oklch(0.97 0.005 260)', + + foreground: 'oklch(0.2 0.015 260)', // Gris-violet foncé + 'foreground-secondary': 'oklch(0.45 0.012 260)', + 'foreground-muted': 'oklch(0.6 0.008 260)', + + primary: 'oklch(0.55 0.18 260)', // Violet profond + 'primary-hover': 'oklch(0.5 0.2 260)', // Violet plus foncé + 'primary-foreground': 'oklch(0.99 0 0)', + + accent: 'oklch(0.94 0.008 260)', + 'accent-foreground': 'oklch(0.2 0.015 260)', + + border: 'oklch(0.9 0.01 260)', + 'border-hover': 'oklch(0.82 0.012 260)', + + success: 'oklch(0.65 0.15 145)', + warning: 'oklch(0.75 0.12 70)', + destructive: 'oklch(0.6 0.18 25)', + }, + + dark: { + background: 'oklch(0.14 0.008 260)', // Noir légèrement violacé + card: 'oklch(0.18 0.01 260)', // Gris-violet foncé + sidebar: 'oklch(0.12 0.008 260)', + input: 'oklch(0.2 0.01 260)', + + foreground: 'oklch(0.97 0.005 260)', // Blanc légèrement violacé + 'foreground-secondary': 'oklch(0.75 0.008 260)', + 'foreground-muted': 'oklch(0.55 0.01 260)', + + primary: 'oklch(0.65 0.18 260)', // Violet plus clair + 'primary-hover': 'oklch(0.7 0.2 260)', + 'primary-foreground': 'oklch(0.1 0 0)', + + accent: 'oklch(0.24 0.01 260)', + 'accent-foreground': 'oklch(0.97 0.005 260)', + + border: 'oklch(0.28 0.012 260)', + 'border-hover': 'oklch(0.38 0.015 260)', + + success: 'oklch(0.7 0.15 145)', + warning: 'oklch(0.8 0.12 70)', + destructive: 'oklch(0.65 0.18 25)', + }, +} as const; + +// ============================================================================= +// OPTION 4: TEAL (TURQUOISE) +// ============================================================================= +/** + * Turquoise/teal moderne et rafraîchissante + * Entre le bleu et le vert + * Très appréciée dans le design moderne (Linear, Atlassian) + */ +export const TEAL_THEME = { + name: 'Teal (Turquoise)', + description: 'Moderne et rafraîchissant - style Atlassian/Linear', + + light: { + background: 'oklch(0.99 0.003 195)', // Blanc légèrement teinté + card: 'oklch(1 0 0)', + sidebar: 'oklch(0.96 0.004 195)', + input: 'oklch(0.97 0.003 195)', + + foreground: 'oklch(0.2 0.015 195)', // Gris-teal foncé + 'foreground-secondary': 'oklch(0.45 0.012 195)', + 'foreground-muted': 'oklch(0.6 0.008 195)', + + primary: 'oklch(0.55 0.14 195)', // Teal moderne + 'primary-hover': 'oklch(0.5 0.16 195)', // Teal plus foncé + 'primary-foreground': 'oklch(0.99 0 0)', + + accent: 'oklch(0.94 0.005 195)', + 'accent-foreground': 'oklch(0.2 0.015 195)', + + border: 'oklch(0.9 0.008 195)', + 'border-hover': 'oklch(0.82 0.01 195)', + + success: 'oklch(0.65 0.15 145)', + warning: 'oklch(0.75 0.12 70)', + destructive: 'oklch(0.6 0.18 25)', + }, + + dark: { + background: 'oklch(0.14 0.005 195)', // Noir légèrement teinté + card: 'oklch(0.18 0.006 195)', // Gris-teal foncé + sidebar: 'oklch(0.12 0.005 195)', + input: 'oklch(0.2 0.006 195)', + + foreground: 'oklch(0.97 0.003 195)', // Blanc légèrement teinté + 'foreground-secondary': 'oklch(0.75 0.006 195)', + 'foreground-muted': 'oklch(0.55 0.008 195)', + + primary: 'oklch(0.65 0.14 195)', // Teal plus clair + 'primary-hover': 'oklch(0.7 0.16 195)', + 'primary-foreground': 'oklch(0.1 0 0)', + + accent: 'oklch(0.24 0.006 195)', + 'accent-foreground': 'oklch(0.97 0.003 195)', + + border: 'oklch(0.28 0.01 195)', + 'border-hover': 'oklch(0.38 0.012 195)', + + success: 'oklch(0.7 0.15 145)', + warning: 'oklch(0.8 0.12 70)', + destructive: 'oklch(0.65 0.18 25)', + }, +} as const; + +// ============================================================================= +// RÉSUMÉ DES OPTIONS +// ============================================================================= + +/** + * Comparaison des options : + * + * | Option | Modernité | Professionnalisme | Fatigue oculaire | Unicité | + * |--------|-----------|-------------------|------------------|----------| + * | Slate (Gris-Bleu) | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | + * | Monochrome | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | + * | Indigo | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | + * | Teal | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | + * + * Recommandation : Slate (Gris-Bleu) + * - Le plus professionnel + * - Fatigue oculaire minimale + * - Très moderne et tendance + * - Différent du bleu traditionnel + * - Cohérent avec votre suggestion + */ + +export type ThemeOption = 'slate' | 'monochrome' | 'indigo' | 'teal'; + +/** + * Pour choisir le thème : + * + * function getTheme(option: ThemeOption) { + * switch(option) { + * case 'slate': return SLATE_THEME; + * case 'monochrome': return MONOCHROME_THEME; + * case 'indigo': return INDIGO_THEME; + * case 'teal': return TEAL_THEME; + * } + * } + */ diff --git a/keep-notes/playwright-report/data/f9c0e00aedaecd19abca15658d106a76bce06d86.md b/keep-notes/playwright-report/data/f9c0e00aedaecd19abca15658d106a76bce06d86.md new file mode 100644 index 0000000..c423a99 --- /dev/null +++ b/keep-notes/playwright-report/data/f9c0e00aedaecd19abca15658d106a76bce06d86.md @@ -0,0 +1,24 @@ +# Page snapshot + +```yaml +- generic [active] [ref=e1]: + - main [ref=e4]: + - generic [ref=e7]: + - heading "Sign in to your account" [level=1] [ref=e8] + - generic [ref=e9]: + - generic [ref=e10]: + - generic [ref=e11]: Email + - textbox "Email" [ref=e13]: + - /placeholder: Enter your email address + - generic [ref=e14]: + - generic [ref=e15]: Password + - textbox "Password" [ref=e17]: + - /placeholder: Enter your password + - link "Forgot password?" [ref=e19] [cursor=pointer]: + - /url: /forgot-password + - button "Sign In" [ref=e20] + - region "Notifications alt+T" + - button "Open Next.js Dev Tools" [ref=e27] [cursor=pointer]: + - img [ref=e28] + - alert [ref=e31] +``` \ No newline at end of file diff --git a/keep-notes/playwright-report/index.html b/keep-notes/playwright-report/index.html index b8293d2..7713416 100644 --- a/keep-notes/playwright-report/index.html +++ b/keep-notes/playwright-report/index.html @@ -82,4 +82,4 @@ Error generating stack: `+n.message+`
- \ No newline at end of file + \ No newline at end of file diff --git a/keep-notes/prisma/client-generated/edge.js b/keep-notes/prisma/client-generated/edge.js index 916f3a1..6b33eda 100644 --- a/keep-notes/prisma/client-generated/edge.js +++ b/keep-notes/prisma/client-generated/edge.js @@ -314,7 +314,6 @@ const config = { "db" ], "activeProvider": "sqlite", - "postinstall": false, "inlineDatasources": { "db": { "url": { diff --git a/keep-notes/prisma/client-generated/index.js b/keep-notes/prisma/client-generated/index.js index c17c9a0..c960c5b 100644 --- a/keep-notes/prisma/client-generated/index.js +++ b/keep-notes/prisma/client-generated/index.js @@ -315,7 +315,6 @@ const config = { "db" ], "activeProvider": "sqlite", - "postinstall": false, "inlineDatasources": { "db": { "url": { diff --git a/keep-notes/prisma/client-generated/query_engine-windows.dll.node.tmp51844 b/keep-notes/prisma/client-generated/query_engine-windows.dll.node.tmp51844 new file mode 100644 index 0000000..d46657b Binary files /dev/null and b/keep-notes/prisma/client-generated/query_engine-windows.dll.node.tmp51844 differ diff --git a/keep-notes/prisma/dev.db b/keep-notes/prisma/dev.db index ea4c228..fd1f8e9 100644 Binary files a/keep-notes/prisma/dev.db and b/keep-notes/prisma/dev.db differ diff --git a/keep-notes/test-results/.last-run.json b/keep-notes/test-results/.last-run.json index 5fca3f8..60b6067 100644 --- a/keep-notes/test-results/.last-run.json +++ b/keep-notes/test-results/.last-run.json @@ -1,4 +1,6 @@ { "status": "failed", - "failedTests": [] + "failedTests": [ + "26d59af0ae51ac745906-706525727fde24fa6600" + ] } \ No newline at end of file diff --git a/keep-notes/test-results/note-resizing-Note-Resizin-9151a-when-changing-size-to-Large-chromium/error-context.md b/keep-notes/test-results/note-resizing-Note-Resizin-9151a-when-changing-size-to-Large-chromium/error-context.md new file mode 100644 index 0000000..c423a99 --- /dev/null +++ b/keep-notes/test-results/note-resizing-Note-Resizin-9151a-when-changing-size-to-Large-chromium/error-context.md @@ -0,0 +1,24 @@ +# Page snapshot + +```yaml +- generic [active] [ref=e1]: + - main [ref=e4]: + - generic [ref=e7]: + - heading "Sign in to your account" [level=1] [ref=e8] + - generic [ref=e9]: + - generic [ref=e10]: + - generic [ref=e11]: Email + - textbox "Email" [ref=e13]: + - /placeholder: Enter your email address + - generic [ref=e14]: + - generic [ref=e15]: Password + - textbox "Password" [ref=e17]: + - /placeholder: Enter your password + - link "Forgot password?" [ref=e19] [cursor=pointer]: + - /url: /forgot-password + - button "Sign In" [ref=e20] + - region "Notifications alt+T" + - button "Open Next.js Dev Tools" [ref=e27] [cursor=pointer]: + - img [ref=e28] + - alert [ref=e31] +``` \ No newline at end of file diff --git a/keep-notes/tests/blue-color-test.spec.ts b/keep-notes/tests/blue-color-test.spec.ts new file mode 100644 index 0000000..2035fc8 --- /dev/null +++ b/keep-notes/tests/blue-color-test.spec.ts @@ -0,0 +1,104 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Test des couleurs bleues', () => { + test.beforeEach(async ({ page }) => { + await page.goto('http://localhost:3000'); + }); + + test('Vérifier les couleurs bleues dans la page', async ({ page }) => { + // Attendre que la page charge + await page.waitForLoadState('networkidle'); + + // Capturer tous les éléments avec des couleurs bleues via les classes + const blueElements = await page.locator('*[class*="blue"]').all(); + + console.log('Nombre d\'éléments avec "blue" dans leur classe:', blueElements.length); + + // Pour chaque élément avec une classe bleue, capturer les détails + for (let i = 0; i < Math.min(blueElements.length, 20); i++) { + const element = blueElements[i]; + const tagName = await element.evaluate(el => el.tagName); + const className = await element.evaluate(el => el.className); + const backgroundColor = await element.evaluate(el => window.getComputedStyle(el).backgroundColor); + const color = await element.evaluate(el => window.getComputedStyle(el).color); + const textContent = await element.evaluate(el => el.textContent?.substring(0, 50)); + + console.log(`Élément ${i + 1}:`, { + tagName, + className: className.substring(0, 100), + backgroundColor, + color, + textContent + }); + } + + // Chercher aussi les styles inline bleus + const elementsWithBlueStyle = await page.locator('*[style*="blue"]').all(); + console.log('Nombre d\'éléments avec style "blue":', elementsWithBlueStyle.length); + + // Prendre une capture d'écran pour visualisation + await page.screenshot({ path: 'blue-color-test.png', fullPage: true }); + + // Vérifier spécifiquement les boutons + const buttons = await page.locator('button').all(); + console.log('Nombre total de boutons:', buttons.length); + + for (let i = 0; i < Math.min(buttons.length, 10); i++) { + const button = buttons[i]; + const backgroundColor = await button.evaluate(el => window.getComputedStyle(el).backgroundColor); + const color = await button.evaluate(el => window.getComputedStyle(el).color); + const textContent = await button.evaluate(el => el.textContent?.substring(0, 30)); + + if (backgroundColor.includes('blue') || backgroundColor.includes('rgb(37, 99, 235)') || + backgroundColor.includes('rgb(29, 78, 216)') || backgroundColor.includes('rgb(59, 130, 246)')) { + console.log('Bouton bleu trouvé:', { + backgroundColor, + color, + textContent + }); + } + } + }); + + test('Vérifier les variables CSS du thème', async ({ page }) => { + // Attendre que la page charge + await page.waitForLoadState('networkidle'); + + // Récupérer les variables CSS du root + const cssVars = await page.evaluate(() => { + const rootStyle = getComputedStyle(document.documentElement); + const variables: Record = {}; + + // Variables de thème principales + const varNames = [ + '--background', + '--foreground', + '--primary', + '--primary-foreground', + '--secondary', + '--accent', + '--border', + '--ring' + ]; + + varNames.forEach(varName => { + variables[varName] = rootStyle.getPropertyValue(varName).trim(); + }); + + return variables; + }); + + console.log('Variables CSS du thème:', cssVars); + + // Vérifier si les teintes contiennent des valeurs bleues (220-260) + for (const [varName, value] of Object.entries(cssVars)) { + const hueMatch = value.match(/(\d+)\s*\)/); + if (hueMatch) { + const hue = parseInt(hueMatch[1]); + if (hue >= 220 && hue <= 260) { + console.log(`⚠️ ${varName} contient une teinte bleue: ${value}`); + } + } + } + }); +}); diff --git a/keep-notes/tests/note-resizing.spec.ts b/keep-notes/tests/note-resizing.spec.ts new file mode 100644 index 0000000..292da81 --- /dev/null +++ b/keep-notes/tests/note-resizing.spec.ts @@ -0,0 +1,60 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Note Resizing', () => { + test('should increase note height when changing size to Large', async ({ page }) => { + // Go to home page + await page.goto('/'); + + // Create a new note to ensure we have a clean slate + const notesInput = page.locator('input[placeholder="Take a note..."]'); + // If text is localized, try selector + const mainInput = page.locator('.note-input-container, [data-testid="note-input"]'); + + // Just click anywhere that looks like the input bar + // Or assume the placeholder might be localized. + // Best to find by visual structure if possible, but placeholder is common. + // Let's stick to the existing notes check. + + // Wait for at least one note card + const firstNote = page.locator('.note-card').first(); + await firstNote.waitFor({ state: 'visible', timeout: 5000 }); + + // Get initial height + const initialBox = await firstNote.boundingBox(); + if (!initialBox) throw new Error('Note card has no bounding box'); + console.log(`Initial height: ${initialBox.height}`); + + // Hover to show actions + await firstNote.hover(); + + // Click "More options" button (3 vertical dots) + // Use selector ensuring it's the one inside THIS note + const moreBtn = firstNote.locator('button:has(svg.lucide-more-vertical)'); + await moreBtn.waitFor({ state: 'visible' }); + await moreBtn.click(); + + // Click "Large" option + // It's the 3rd item in the second group usually. + // Or we can look for the maximize icon + const largeOption = page.locator('div[role="menuitem"]:has(svg.lucide-maximize-2)').last(); + // The sizes are Small, Medium, Large. All use Maximize2 icon in the current code? + // Let's check NoteActions code. + // Yes: for all sizes. + // And they are rendered in order: Small, Medium, Large. + // So "Large" is the LAST one. + + await largeOption.waitFor({ state: 'visible' }); + await largeOption.click(); + + // Wait for update + await page.waitForTimeout(1000); + + // Get new height + const newBox = await firstNote.boundingBox(); + if (!newBox) throw new Error('Note card has no bounding box after resize'); + console.log(`New height: ${newBox.height}`); + + // Assert + expect(newBox.height).toBeGreaterThan(initialBox.height + 50); + }); +});