Add drag-and-drop for presets and colors, max_colors validation, and 2D grid layout

- Add drag-and-drop to reorder presets in tabs (2D grid layout)
- Add drag-and-drop to reorder colors within presets
- Add max_colors field to pattern definitions
- Hide color section when max_colors is 0
- Validate color count against pattern max_colors limit
- Store presets in 2D grid format (3 columns)
- Remove left panel from tab content, show only presets
- Update color palette to show swatches instead of hex codes
- Improve preset editor UI with visual color swatches

src/static/color_palette.js

@@ -28,27 +28,35 @@ document.addEventListener('DOMContentLoaded', () => {
       const row = document.createElement('div');
       row.className = 'profiles-row';
       row.dataset.color = color;
+      row.style.cssText = 'display: flex; align-items: center; gap: 1rem;';
+      // Ensure no text content
+      row.textContent = '';
 
       const swatch = document.createElement('div');
-      swatch.style.width = '28px';
-      swatch.style.height = '28px';
-      swatch.style.borderRadius = '4px';
-      swatch.style.backgroundColor = color;
-      swatch.style.border = '1px solid #4a4a4a';
-
-      const label = document.createElement('span');
-      label.textContent = color;
+      swatch.style.cssText = `
+        width: 64px;
+        height: 64px;
+        border-radius: 8px;
+        background-color: ${color};
+        border: 2px solid #4a4a4a;
+        cursor: pointer;
+        flex-shrink: 0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+      `;
+      swatch.title = color; // Show hex code on hover only
+      swatch.setAttribute('aria-label', `Color ${color}`);
 
       const removeButton = document.createElement('button');
       removeButton.className = 'btn btn-danger btn-small';
       removeButton.textContent = 'Remove';
-      removeButton.addEventListener('click', async () => {
+      removeButton.style.fontSize = '0.8rem'; // Restore font size for button
+      removeButton.addEventListener('click', async (e) => {
+        e.stopPropagation();
         const updated = currentPalette.filter((_, i) => i !== index);
         await savePalette(updated);
       });
 
       row.appendChild(swatch);
-      row.appendChild(label);
       row.appendChild(removeButton);
       paletteContainer.appendChild(row);
     });

src/static/style.css

@@ -364,7 +364,7 @@ header h1 {
 
 .presets-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: 0.75rem;
 }