Attempt to fix note resizing with React keys and Muuri sync

2026-01-24 19:52:13 +01:00
parent d59ec592eb
commit 8e35780717
48 changed files with 3369 additions and 279 deletions
--- a/keep-notes/tests/blue-color-test.spec.ts
+++ 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<string, string> = {};
+
+      // 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}`);
+        }
+      }
+    }
+  });
+});