Add card color system with wrapCard helper and reset support

Introduce localStorage-backed card color assignment for all card types
with a reusable wrapCard() helper that provides consistent card shell
structure (top actions, bottom actions with color picker). Move color
picker from top-right to bottom-right action bar. Add color reset
button to clear card color back to default.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/js/features/pattern-templates.js

@@ -19,6 +19,7 @@ import { t } from '../core/i18n.js';
 import { showToast, showConfirm } from '../core/ui.js';
 import { Modal } from '../core/modal.js';
 import { getPictureSourceIcon, ICON_PATTERN_TEMPLATE, ICON_CLONE, ICON_EDIT } from '../core/icons.js';
+import { wrapCard } from '../core/card-colors.js';
 
 class PatternTemplateModal extends Modal {
     constructor() {
@@ -52,22 +53,24 @@ const patternModal = new PatternTemplateModal();
 export function createPatternTemplateCard(pt) {
     const rectCount = (pt.rectangles || []).length;
     const desc = pt.description ? `<div class="template-description">${escapeHtml(pt.description)}</div>` : '';
-    return `
-        <div class="template-card" data-pattern-template-id="${pt.id}">
-            <button class="card-remove-btn" onclick="deletePatternTemplate('${pt.id}')" title="${t('common.delete')}">&#x2715;</button>
+    return wrapCard({
+        type: 'template-card',
+        dataAttr: 'data-pattern-template-id',
+        id: pt.id,
+        removeOnclick: `deletePatternTemplate('${pt.id}')`,
+        removeTitle: t('common.delete'),
+        content: `
             <div class="template-card-header">
                 <span class="template-name">${ICON_PATTERN_TEMPLATE} ${escapeHtml(pt.name)}</span>
             </div>
             ${desc}
             <div class="stream-card-props">
                 <span class="stream-card-prop">▭ ${rectCount} rect${rectCount !== 1 ? 's' : ''}</span>
-            </div>
-            <div class="template-card-actions">
+            </div>`,
+        actions: `
                 <button class="btn btn-icon btn-secondary" onclick="clonePatternTemplate('${pt.id}')" title="${t('common.clone')}">${ICON_CLONE}</button>
-                <button class="btn btn-icon btn-secondary" onclick="showPatternTemplateEditor('${pt.id}')" title="${t('common.edit')}">${ICON_EDIT}</button>
-            </div>
-        </div>
-    `;
+                <button class="btn btn-icon btn-secondary" onclick="showPatternTemplateEditor('${pt.id}')" title="${t('common.edit')}">${ICON_EDIT}</button>`,
+    });
 }
 
 export async function showPatternTemplateEditor(templateId = null, cloneData = null) {