Attempt to fix note resizing with React keys and Muuri sync

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}`);
+        }
+      }
+    }
+  });
+});

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: <Maximize2 className="h-4 w-4 mr-2" /> 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);
+    });
+});