From ea307a7e00a210e019ee0d97f7eb522d0e9f6281 Mon Sep 17 00:00:00 2001 From: tegwick Date: Sun, 2 Nov 2025 21:19:16 +0100 Subject: [PATCH] remove: eliminate floating status panel above editor menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed redundant floating status panel that appeared above the editor menu: ## 🗑️ Floating Status Panel Removal - **Issue**: Floating status panel in top-right corner duplicated information already in menu - **Solution**: Disabled `updateStatusDisplay()` method and removed `createStatusPanel()` - **Result**: Cleaner UI with status information only shown in integrated menu ## 🎯 Changes Made - **updateStatusDisplay()**: Now returns early without creating floating panel - **createStatusPanel()**: Method removed since no longer needed - **Status Integration**: Status information remains available in control panel menu - **UI Cleanup**: Eliminates visual clutter and redundant information display ## 🚀 User Experience Improvements - **Cleaner Interface**: No floating overlay competing with menu - **Single Source**: Status information consolidated in menu only - **Reduced Clutter**: Simpler, more focused editing experience - **Better Performance**: No unnecessary DOM element creation/updates ## 🔧 Technical Benefits - **Code Simplification**: Removed ~40 lines of floating panel code - **Performance**: No periodic floating panel updates (every 2 seconds) - **Memory Efficiency**: No floating DOM elements consuming resources - **Maintainability**: Single status display location to maintain ## ✅ Backward Compatibility - **Control Panel**: Status information still available in menu - **Status Tracking**: Real-time tracking continues to work - **Menu Integration**: All status features remain functional - **No Functionality Loss**: Only redundant display removed Added comprehensive test suite with 5 tests verifying floating panel removal. Interface is now cleaner with status information properly integrated into menu. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- markitect/static/editor.js | 86 +-------------- test_floating_status_removed.js | 180 ++++++++++++++++++++++++++++++++ 2 files changed, 185 insertions(+), 81 deletions(-) create mode 100644 test_floating_status_removed.js diff --git a/markitect/static/editor.js b/markitect/static/editor.js index 21573b3e..02253a7d 100644 --- a/markitect/static/editor.js +++ b/markitect/static/editor.js @@ -2978,93 +2978,17 @@ class DOMRenderer { * Create status panel for real-time status display * @returns {HTMLElement} Status panel element */ - createStatusPanel() { - const panel = document.createElement('div'); - panel.className = 'ui-edit-status-panel'; - panel.style.cssText = ` - position: fixed; - top: 20px; - right: 20px; - background: white; - border: 1px solid #ddd; - border-radius: 8px; - padding: 12px 16px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 14px; - z-index: 1000; - min-width: 180px; - `; - - const statusText = document.createElement('div'); - statusText.className = 'ui-edit-status-text'; - statusText.textContent = 'Ready'; - - const detailsText = document.createElement('div'); - detailsText.className = 'ui-edit-status-details'; - detailsText.style.cssText = ` - font-size: 12px; - color: #666; - margin-top: 4px; - `; - - panel.appendChild(statusText); - panel.appendChild(detailsText); - - return panel; - } + // createStatusPanel method removed - floating status panel no longer needed + // Status information is displayed in the control panel menu instead /** * Update status display with current status information * @param {Object} status - Status object from SectionManager */ updateStatusDisplay(status) { - let statusPanel = document.querySelector('.ui-edit-status-panel'); - - if (!statusPanel) { - statusPanel = this.createStatusPanel(); - document.body.appendChild(statusPanel); - } - - const statusText = statusPanel.querySelector('.ui-edit-status-text'); - const detailsText = statusPanel.querySelector('.ui-edit-status-details'); - - // Update status text and color based on state - switch (status.state) { - case 'ready': - statusText.textContent = '✓ Ready'; - statusText.style.color = '#28a745'; - break; - case 'editing': - statusText.textContent = '✏️ Editing'; - statusText.style.color = '#007bff'; - break; - case 'modified': - statusText.textContent = '⚠️ Modified'; - statusText.style.color = '#ffc107'; - break; - default: - statusText.textContent = 'Unknown'; - statusText.style.color = '#6c757d'; - } - - // Update details - const details = []; - details.push(`${status.totalSections} sections`); - - if (status.editingSections.length > 0) { - details.push(`${status.editingSections.length} editing`); - } - - if (status.modifiedSections > 0) { - details.push(`${status.modifiedSections} modified`); - } - - detailsText.textContent = details.join(' • '); - - // Update timestamp - const now = new Date().toLocaleTimeString(); - statusPanel.setAttribute('title', `Last update: ${now}`); + // Status information is now only displayed in the control panel menu + // No floating status panel needed since status is integrated into the menu + return; } } diff --git a/test_floating_status_removed.js b/test_floating_status_removed.js new file mode 100644 index 00000000..e1ac41a3 --- /dev/null +++ b/test_floating_status_removed.js @@ -0,0 +1,180 @@ +#!/usr/bin/env node + +/** + * Test Floating Status Panel Removal + * + * Tests that the floating status panel is no longer created above the editor menu + */ + +const { TestRunner } = require('./test_runner.js'); +const runner = new TestRunner(); + +runner.describe('Floating Status Panel Removal Tests', () => { + + runner.it('should not create floating status panel when updateStatusDisplay is called', async () => { + // Load editor + delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')]; + require('/home/worsch/markitect_project/markitect/static/editor.js'); + + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + container.innerHTML = '
'; + document.body.appendChild(container); + + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create a mock status object + const mockStatus = { + state: 'ready', + totalSections: 5, + editingSections: [], + modifiedSections: 0 + }; + + // Call updateStatusDisplay + renderer.updateStatusDisplay(mockStatus); + + // Verify no floating status panel was created + const statusPanel = document.querySelector('.ui-edit-status-panel'); + runner.expect(statusPanel).toBeFalsy(); + + // Verify no status panel exists in body + const statusPanels = document.querySelectorAll('.ui-edit-status-panel'); + runner.expect(statusPanels.length).toBe(0); + + // Cleanup + document.body.removeChild(container); + } + }); + + runner.it('should handle multiple status updates without creating panels', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + container.innerHTML = '
'; + document.body.appendChild(container); + + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Call updateStatusDisplay multiple times with different statuses + const statuses = [ + { state: 'ready', totalSections: 5, editingSections: [], modifiedSections: 0 }, + { state: 'editing', totalSections: 5, editingSections: ['section1'], modifiedSections: 0 }, + { state: 'modified', totalSections: 5, editingSections: [], modifiedSections: 1 } + ]; + + statuses.forEach(status => { + renderer.updateStatusDisplay(status); + }); + + // Verify still no floating status panels exist + const statusPanels = document.querySelectorAll('.ui-edit-status-panel'); + runner.expect(statusPanels.length).toBe(0); + + // Cleanup + document.body.removeChild(container); + } + }); + + runner.it('should not have createStatusPanel method available', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Verify createStatusPanel method is no longer available or does nothing + if (typeof renderer.createStatusPanel === 'function') { + // If method exists, it should not create elements + const result = renderer.createStatusPanel(); + runner.expect(result).toBeFalsy(); + } else { + // Method should not exist + runner.expect(typeof renderer.createStatusPanel).toBe('undefined'); + } + } + }); + + runner.it('should not interfere with control panel status display', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + container.innerHTML = '
'; + document.body.appendChild(container); + + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create sections and render them + const sections = manager.createSectionsFromMarkdown('# Test\n\nContent'); + renderer.renderAllSections(sections); + + // Verify that control panel functionality is unaffected + runner.expect(typeof renderer.updateControlPanelStats).toBe('function'); + runner.expect(typeof renderer.createControlPanel).toBe('function'); + + // Test that control panel can still be created + const controlPanel = renderer.createControlPanel(); + runner.expect(controlPanel).toBeTruthy(); + runner.expect(controlPanel.tagName).toBe('DIV'); + + // Cleanup + document.body.removeChild(container); + } + }); + + runner.it('should handle status tracking setup without creating floating panels', async () => { + if (global.MarkitectCleanEditor) { + const container = document.createElement('div'); + container.innerHTML = '
'; + document.body.appendChild(container); + + // Create editor instance + const editor = new global.MarkitectCleanEditor(); + + // Mock the DOM elements editor expects + const mockElement = container.querySelector('#markdown-content'); + if (mockElement) { + // Set up basic content + mockElement.innerHTML = '

Test content

'; + } + + // Test setupStatusTracking if it exists + if (typeof editor.setupStatusTracking === 'function') { + try { + editor.setupStatusTracking(); + + // Wait a moment for any async operations + await new Promise(resolve => setTimeout(resolve, 100)); + + // Verify no floating status panels were created + const statusPanels = document.querySelectorAll('.ui-edit-status-panel'); + runner.expect(statusPanels.length).toBe(0); + } catch (error) { + // If setup fails, ensure it's not due to panel creation + const statusPanels = document.querySelectorAll('.ui-edit-status-panel'); + runner.expect(statusPanels.length).toBe(0); + } + } + + // Cleanup + document.body.removeChild(container); + } + }); +}); + +// Run the tests +if (require.main === module) { + console.log('🗑️ Running Floating Status Panel Removal Tests'); + runner.run().then(() => { + const results = runner.results; + const failed = results.filter(r => r.status === 'FAIL').length; + + if (failed > 0) { + console.log(`❌ ${failed} test(s) failed - floating status removal incomplete`); + } else { + console.log('✅ All floating status removal tests passed!'); + } + }); +} + +module.exports = runner; \ No newline at end of file