= { panel }
+
+ if (!canvas?.isPreset) {
+ const currentLabel = column.label?.trim()
+ const previousDefaultLabel = getPanelLabel(column.slotType, column.panel)
+
+ if (!currentLabel || currentLabel === previousDefaultLabel) {
+ updates.label = getPanelLabel(column.slotType, panel)
+ }
+ }
+
+ updateColumn(canvasId, columnId, updates)
+ }
+
+ const handleColumnLabelChange = (canvasId: string, columnId: string, label: string) => {
+ updateColumn(canvasId, columnId, { label })
+ }
+
+ const handleColumnLabelBlur = (canvasId: string, column: Column) => {
+ const trimmedLabel = column.label?.trim()
+ if (trimmedLabel === column.label) return
+ updateColumn(canvasId, column.id, { label: trimmedLabel || undefined })
}
// Drag-drop handlers for column reordering
@@ -489,13 +518,20 @@ export const SettingsPanel = ({ themeMode: _themeMode, onThemeChange, onBack }:
{canvas.columns.map((column, index) => {
const isDragging = draggingColumn?.canvasId === canvas.id && draggingColumn?.index === index
const isDragOver = draggingColumn?.canvasId === canvas.id && dragOverIndex === index
+ const defaultLabel = getPanelLabel(column.slotType, column.panel)
return (
handleDragStart(canvas.id, index)}
+ onDragStart={(e) => {
+ if ((e.target as HTMLElement).closest('input, select, button')) {
+ e.preventDefault()
+ return
+ }
+ handleDragStart(canvas.id, index)
+ }}
onDragOver={(e) => handleDragOver(e, index)}
onDragEnd={handleDragEnd}
onDragLeave={handleDragLeave}
@@ -513,7 +549,19 @@ export const SettingsPanel = ({ themeMode: _themeMode, onThemeChange, onBack }:
{column.icon || SLOT_ICONS[column.slotType]}
- {column.label || column.id}
+ {canvas.isPreset ? (
+ {column.label || column.id}
+ ) : (
+ handleColumnLabelChange(canvas.id, column.id, e.target.value)}
+ onBlur={() => handleColumnLabelBlur(canvas.id, column)}
+ onClick={(e) => e.stopPropagation()}
+ />
+ )}
{/* Panel dropdown */}