From 8d8a4ed0c3e3e937b54acebf23bf414cc8aa12c6 Mon Sep 17 00:00:00 2001
From: tegwick <bernd.worsch@gmail.com>
Date: Fri, 14 Nov 2025 12:05:17 +0100
Subject: [PATCH] fix: update main-updated.js to use enhanced ControlBase API

Replace old control initialization pattern (.control.config, .createControl())
with new ControlBase class API (.config, .show()) for all control panels.

This enables the 5 enhanced behaviors:
- Icon-only collapsed state
- Expand/drag functionality
- Bottom-left resize
- Collapse with position restoration
- Header toggle content visibility

All control panels now properly initialize with enhanced ControlBase.
---
 markitect/static/js/main-updated.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/markitect/static/js/main-updated.js b/markitect/static/js/main-updated.js
index b658c45d..e200d0de 100644
--- a/markitect/static/js/main-updated.js
+++ b/markitect/static/js/main-updated.js
@@ -83,44 +83,44 @@ const MarkitectMain = {
         }
     },
 
-    // Initialize control panels with compass positioning
+    // Initialize enhanced control panels with compass positioning
     initializeControlPanels: function() {
-        console.log('🎛️ Initializing control panels with compass positioning...');
+        console.log('🎛️ Initializing enhanced control panels with compass positioning...');
 
         // ContentsControl (Northwest)
         if (typeof ContentsControl !== 'undefined') {
             this.contentsControl = new ContentsControl();
-            this.contentsControl.control.config.position = 'nw';
-            this.contentsControl.createControl();
+            this.contentsControl.config.position = 'nw';
+            this.contentsControl.show();
             window.contentsControl = this.contentsControl;
-            console.log('✅ ContentsControl initialized (Northwest)');
+            console.log('✅ ContentsControl initialized (Northwest) with enhanced ControlBase');
         }
 
         // StatusControl (East)
         if (typeof StatusControl !== 'undefined') {
             this.statusControl = new StatusControl();
-            this.statusControl.control.config.position = 'e';
-            this.statusControl.createControl();
+            this.statusControl.config.position = 'e';
+            this.statusControl.show();
             window.statusControl = this.statusControl;
-            console.log('✅ StatusControl initialized (East)');
+            console.log('✅ StatusControl initialized (East) with enhanced ControlBase');
         }
 
         // DebugControl (Southeast)
         if (typeof DebugControl !== 'undefined') {
             this.debugControl = new DebugControl();
-            this.debugControl.control.config.position = 'se';
-            this.debugControl.createControl();
+            this.debugControl.config.position = 'se';
+            this.debugControl.show();
             window.debugControl = this.debugControl;
-            console.log('✅ DebugControl initialized (Southeast)');
+            console.log('✅ DebugControl initialized (Southeast) with enhanced ControlBase');
         }
 
         // EditControl (Northeast)
         if (typeof EditControl !== 'undefined') {
             this.editControl = new EditControl();
-            this.editControl.control.config.position = 'ne';
-            this.editControl.createControl();
+            this.editControl.config.position = 'ne';
+            this.editControl.show();
             window.editControl = this.editControl;
-            console.log('✅ EditControl initialized (Northeast)');
+            console.log('✅ EditControl initialized (Northeast) with enhanced ControlBase');
         }
     },