@monygroupcorp/micro-web3 1.2.4 → 1.3.0

package/src/components/SettingsModal/SettingsModal.js

@@ -1,5 +1,6 @@
 // src/components/SettingsModal/SettingsModal.js
 
+import { Component, h, render } from '@monygroupcorp/microact';
 import { IndexerSettings } from '../../storage/index.js';
 
 /**
@@ -9,363 +10,385 @@ import { IndexerSettings } from '../../storage/index.js';
  * const modal = new SettingsModal({ eventBus });
  * modal.show();
  */
-class SettingsModal {
-  constructor({ eventBus }) {
-    this.eventBus = eventBus;
-    this.element = null;
-    this.overlay = null;
-    this.isVisible = false;
-    this.state = {
-      storageEnabled: true,
-      storageUsed: 0,
-      storageQuota: 0,
-      clearing: false
-    };
-  }
-
-  async show() {
-    if (this.isVisible) return;
-
-    // Load current settings
-    const settings = IndexerSettings.get();
-    const estimate = await IndexerSettings.getStorageEstimate();
-
-    this.state = {
-      storageEnabled: settings.storageEnabled,
-      storageUsed: estimate.used || 0,
-      storageQuota: estimate.quota || 0,
-      clearing: false
-    };
-
-    this._createModal();
-    this.isVisible = true;
-  }
-
-  hide() {
-    if (!this.isVisible) return;
-
-    if (this.overlay && this.overlay.parentNode) {
-      this.overlay.parentNode.removeChild(this.overlay);
+class SettingsModal extends Component {
+    constructor(props) {
+        super(props);
+        this.eventBus = props.eventBus;
+        this.overlay = null;
+        this.state = {
+            isVisible: false,
+            storageEnabled: true,
+            storageUsed: 0,
+            storageQuota: 0,
+            clearing: false
+        };
+    }
+
+    async show() {
+        if (this.state.isVisible) return;
+
+        // Load current settings
+        const settings = IndexerSettings.get();
+        const estimate = await IndexerSettings.getStorageEstimate();
+
+        this.setState({
+            isVisible: true,
+            storageEnabled: settings.storageEnabled,
+            storageUsed: estimate.used || 0,
+            storageQuota: estimate.quota || 0,
+            clearing: false
+        });
+
+        this._createModal();
+    }
+
+    hide() {
+        if (!this.state.isVisible) return;
+
+        if (this.overlay && this.overlay.parentNode) {
+            this.overlay.parentNode.removeChild(this.overlay);
+        }
+        this.overlay = null;
+
+        // Remove ESC handler
+        if (this._escHandler) {
+            document.removeEventListener('keydown', this._escHandler);
+            this._escHandler = null;
+        }
+
+        this.setState({ isVisible: false });
+    }
+
+    _createModal() {
+        // Inject styles if needed
+        SettingsModal.injectStyles();
+
+        // Create overlay
+        this.overlay = document.createElement('div');
+        this.overlay.className = 'mw3-settings-overlay';
+        this.overlay.addEventListener('click', (e) => {
+            if (e.target === this.overlay) this.hide();
+        });
+
+        // Create modal container
+        const modalContainer = document.createElement('div');
+        modalContainer.className = 'mw3-settings-modal';
+        this.overlay.appendChild(modalContainer);
+        document.body.appendChild(this.overlay);
+
+        // Render the modal content
+        render(h(SettingsModalContent, {
+            ...this.state,
+            eventBus: this.eventBus,
+            onClose: () => this.hide(),
+            onStorageToggle: (enabled) => this._handleStorageToggle(enabled),
+            onClearData: () => this._handleClearData()
+        }), modalContainer);
+
+        // ESC key to close
+        this._escHandler = (e) => {
+            if (e.key === 'Escape') this.hide();
+        };
+        document.addEventListener('keydown', this._escHandler);
     }
-    this.overlay = null;
-    this.element = null;
-    this.isVisible = false;
-  }
-
-  _createModal() {
-    // Inject styles if needed
-    SettingsModal.injectStyles();
-
-    // Create overlay
-    this.overlay = document.createElement('div');
-    this.overlay.className = 'mw3-settings-overlay';
-    this.overlay.addEventListener('click', (e) => {
-      if (e.target === this.overlay) this.hide();
-    });
-
-    // Create modal
-    this.element = document.createElement('div');
-    this.element.className = 'mw3-settings-modal';
-    this.element.innerHTML = this._render();
-
-    this.overlay.appendChild(this.element);
-    document.body.appendChild(this.overlay);
-
-    this._setupEventListeners();
-  }
-
-  _render() {
-    const { storageEnabled, storageUsed, storageQuota, clearing } = this.state;
-    const usedMB = (storageUsed / (1024 * 1024)).toFixed(1);
-    const quotaMB = (storageQuota / (1024 * 1024)).toFixed(0);
-
-    return `
-      <div class="mw3-settings-header">
-        <h2>Settings</h2>
-        <button class="mw3-settings-close" data-action="close">&times;</button>
-      </div>
-
-      <div class="mw3-settings-content">
-        <div class="mw3-settings-section">
-          <h3>Data Storage</h3>
-          <p class="mw3-settings-description">
-            Event data is cached locally to improve performance. You can disable this to save space.
-          </p>
-
-          <div class="mw3-settings-row">
-            <label class="mw3-settings-toggle">
-              <input type="checkbox" ${storageEnabled ? 'checked' : ''} data-setting="storageEnabled">
-              <span class="mw3-toggle-slider"></span>
-              <span class="mw3-toggle-label">Enable local event storage</span>
-            </label>
-          </div>
-
-          <div class="mw3-settings-info">
-            <span>Storage used: ${usedMB} MB${quotaMB > 0 ? ` / ${quotaMB} MB` : ''}</span>
-          </div>
-
-          <div class="mw3-settings-row">
-            <button class="mw3-settings-btn mw3-settings-btn--danger" data-action="clearData" ${clearing ? 'disabled' : ''}>
-              ${clearing ? 'Clearing...' : 'Clear All Cached Data'}
-            </button>
-          </div>
-
-          <p class="mw3-settings-note">
-            Disabling storage means event history will need to be re-fetched each session.
-          </p>
-        </div>
-      </div>
-
-      <div class="mw3-settings-footer">
-        <button class="mw3-settings-btn mw3-settings-btn--primary" data-action="close">Done</button>
-      </div>
-    `;
-  }
-
-  _setupEventListeners() {
-    // Close button
-    this.element.querySelectorAll('[data-action="close"]').forEach(btn => {
-      btn.addEventListener('click', () => this.hide());
-    });
-
-    // Storage toggle
-    const toggle = this.element.querySelector('[data-setting="storageEnabled"]');
-    if (toggle) {
-      toggle.addEventListener('change', (e) => {
-        const enabled = e.target.checked;
-        IndexerSettings.set({ storageEnabled: enabled });
-        this.state.storageEnabled = enabled;
 
-        // Emit event so indexer can react
+    _handleStorageToggle(enabled) {
+        IndexerSettings.set({ storageEnabled: enabled });
+        this.setState({ storageEnabled: enabled });
         this.eventBus.emit('settings:storageChanged', { enabled });
-      });
+        this._updateModalContent();
     }
 
-    // Clear data button
-    const clearBtn = this.element.querySelector('[data-action="clearData"]');
-    if (clearBtn) {
-      clearBtn.addEventListener('click', async () => {
+    async _handleClearData() {
         if (this.state.clearing) return;
 
-        this.state.clearing = true;
-        this._updateContent();
+        this.setState({ clearing: true });
+        this._updateModalContent();
 
         try {
-          await IndexerSettings.clearAllData();
+            await IndexerSettings.clearAllData();
+
+            // Update storage estimate
+            const estimate = await IndexerSettings.getStorageEstimate();
+            this.setState({
+                storageUsed: estimate.used || 0,
+                storageQuota: estimate.quota || 0,
+                clearing: false
+            });
+
+            // Emit event so indexer knows to resync
+            this.eventBus.emit('settings:dataCleared', {});
+        } catch (error) {
+            console.error('[SettingsModal] Failed to clear data:', error);
+            this.setState({ clearing: false });
+        }
 
-          // Update storage estimate
-          const estimate = await IndexerSettings.getStorageEstimate();
-          this.state.storageUsed = estimate.used || 0;
-          this.state.storageQuota = estimate.quota || 0;
+        this._updateModalContent();
+    }
 
-          // Emit event so indexer knows to resync
-          this.eventBus.emit('settings:dataCleared', {});
-        } catch (error) {
-          console.error('[SettingsModal] Failed to clear data:', error);
+    _updateModalContent() {
+        if (this.overlay) {
+            const modalContainer = this.overlay.querySelector('.mw3-settings-modal');
+            if (modalContainer) {
+                render(h(SettingsModalContent, {
+                    ...this.state,
+                    eventBus: this.eventBus,
+                    onClose: () => this.hide(),
+                    onStorageToggle: (enabled) => this._handleStorageToggle(enabled),
+                    onClearData: () => this._handleClearData()
+                }), modalContainer);
+            }
         }
+    }
 
-        this.state.clearing = false;
-        this._updateContent();
-      });
+    static injectStyles() {
+        if (document.getElementById('mw3-settings-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'mw3-settings-styles';
+        style.textContent = `
+            .mw3-settings-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.7);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 10000;
+                backdrop-filter: blur(4px);
+            }
+
+            .mw3-settings-modal {
+                background: linear-gradient(135deg, #1a1a2e, #16213e);
+                border: 1px solid rgba(218, 165, 32, 0.3);
+                border-radius: 12px;
+                width: 90%;
+                max-width: 400px;
+                color: #fff;
+                font-family: 'Lato', system-ui, sans-serif;
+                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+            }
+
+            .mw3-settings-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 1rem 1.25rem;
+                border-bottom: 1px solid rgba(218, 165, 32, 0.2);
+            }
+
+            .mw3-settings-header h2 {
+                margin: 0;
+                font-size: 1.125rem;
+                font-weight: 600;
+                color: rgba(218, 165, 32, 0.95);
+            }
+
+            .mw3-settings-close {
+                background: none;
+                border: none;
+                color: rgba(255, 255, 255, 0.6);
+                font-size: 1.5rem;
+                cursor: pointer;
+                padding: 0;
+                line-height: 1;
+            }
+
+            .mw3-settings-close:hover {
+                color: #fff;
+            }
+
+            .mw3-settings-content {
+                padding: 1.25rem;
+            }
+
+            .mw3-settings-section h3 {
+                margin: 0 0 0.5rem 0;
+                font-size: 0.9rem;
+                font-weight: 600;
+                color: rgba(255, 255, 255, 0.9);
+            }
+
+            .mw3-settings-description {
+                margin: 0 0 1rem 0;
+                font-size: 0.8rem;
+                color: rgba(255, 255, 255, 0.6);
+                line-height: 1.4;
+            }
+
+            .mw3-settings-row {
+                margin-bottom: 1rem;
+            }
+
+            .mw3-settings-toggle {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                cursor: pointer;
+            }
+
+            .mw3-settings-toggle input {
+                display: none;
+            }
+
+            .mw3-toggle-slider {
+                width: 44px;
+                height: 24px;
+                background: rgba(255, 255, 255, 0.2);
+                border-radius: 12px;
+                position: relative;
+                transition: background 0.2s;
+            }
+
+            .mw3-toggle-slider::after {
+                content: '';
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                width: 20px;
+                height: 20px;
+                background: #fff;
+                border-radius: 50%;
+                transition: transform 0.2s;
+            }
+
+            .mw3-settings-toggle input:checked + .mw3-toggle-slider {
+                background: rgba(218, 165, 32, 0.8);
+            }
+
+            .mw3-settings-toggle input:checked + .mw3-toggle-slider::after {
+                transform: translateX(20px);
+            }
+
+            .mw3-toggle-label {
+                font-size: 0.875rem;
+                color: rgba(255, 255, 255, 0.9);
+            }
+
+            .mw3-settings-info {
+                font-size: 0.75rem;
+                color: rgba(255, 255, 255, 0.5);
+                margin-bottom: 1rem;
+            }
+
+            .mw3-settings-note {
+                font-size: 0.75rem;
+                color: rgba(255, 255, 255, 0.4);
+                margin: 0;
+                font-style: italic;
+            }
+
+            .mw3-settings-btn {
+                padding: 0.625rem 1rem;
+                border-radius: 6px;
+                font-size: 0.875rem;
+                font-weight: 500;
+                cursor: pointer;
+                border: none;
+                transition: all 0.2s;
+            }
+
+            .mw3-settings-btn--primary {
+                background: rgba(218, 165, 32, 0.9);
+                color: #1a1a2e;
+            }
+
+            .mw3-settings-btn--primary:hover {
+                background: rgba(218, 165, 32, 1);
+            }
+
+            .mw3-settings-btn--danger {
+                background: rgba(255, 99, 71, 0.2);
+                color: rgba(255, 99, 71, 0.9);
+                border: 1px solid rgba(255, 99, 71, 0.3);
+            }
+
+            .mw3-settings-btn--danger:hover {
+                background: rgba(255, 99, 71, 0.3);
+            }
+
+            .mw3-settings-btn:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            .mw3-settings-footer {
+                padding: 1rem 1.25rem;
+                border-top: 1px solid rgba(218, 165, 32, 0.2);
+                display: flex;
+                justify-content: flex-end;
+            }
+        `;
+        document.head.appendChild(style);
     }
+}
 
-    // ESC key to close
-    this._escHandler = (e) => {
-      if (e.key === 'Escape') this.hide();
-    };
-    document.addEventListener('keydown', this._escHandler);
-  }
-
-  _updateContent() {
-    if (this.element) {
-      this.element.innerHTML = this._render();
-      this._setupEventListeners();
+/**
+ * Inner component for the settings modal content
+ */
+class SettingsModalContent extends Component {
+    render() {
+        const { storageEnabled, storageUsed, storageQuota, clearing, onClose, onStorageToggle, onClearData } = this.props;
+        const usedMB = (storageUsed / (1024 * 1024)).toFixed(1);
+        const quotaMB = (storageQuota / (1024 * 1024)).toFixed(0);
+
+        return h('div', null,
+            h('div', { className: 'mw3-settings-header' },
+                h('h2', null, 'Settings'),
+                h('button', {
+                    className: 'mw3-settings-close',
+                    onClick: onClose
+                }, '\u00D7')
+            ),
+
+            h('div', { className: 'mw3-settings-content' },
+                h('div', { className: 'mw3-settings-section' },
+                    h('h3', null, 'Data Storage'),
+                    h('p', { className: 'mw3-settings-description' },
+                        'Event data is cached locally to improve performance. You can disable this to save space.'
+                    ),
+
+                    h('div', { className: 'mw3-settings-row' },
+                        h('label', { className: 'mw3-settings-toggle' },
+                            h('input', {
+                                type: 'checkbox',
+                                checked: storageEnabled,
+                                onChange: (e) => onStorageToggle(e.target.checked)
+                            }),
+                            h('span', { className: 'mw3-toggle-slider' }),
+                            h('span', { className: 'mw3-toggle-label' }, 'Enable local event storage')
+                        )
+                    ),
+
+                    h('div', { className: 'mw3-settings-info' },
+                        h('span', null, `Storage used: ${usedMB} MB${quotaMB > 0 ? ` / ${quotaMB} MB` : ''}`)
+                    ),
+
+                    h('div', { className: 'mw3-settings-row' },
+                        h('button', {
+                            className: 'mw3-settings-btn mw3-settings-btn--danger',
+                            disabled: clearing,
+                            onClick: onClearData
+                        }, clearing ? 'Clearing...' : 'Clear All Cached Data')
+                    ),
+
+                    h('p', { className: 'mw3-settings-note' },
+                        'Disabling storage means event history will need to be re-fetched each session.'
+                    )
+                )
+            ),
+
+            h('div', { className: 'mw3-settings-footer' },
+                h('button', {
+                    className: 'mw3-settings-btn mw3-settings-btn--primary',
+                    onClick: onClose
+                }, 'Done')
+            )
+        );
     }
-  }
-
-  static injectStyles() {
-    if (document.getElementById('mw3-settings-styles')) return;
-
-    const style = document.createElement('style');
-    style.id = 'mw3-settings-styles';
-    style.textContent = `
-      .mw3-settings-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.7);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10000;
-        backdrop-filter: blur(4px);
-      }
-
-      .mw3-settings-modal {
-        background: linear-gradient(135deg, #1a1a2e, #16213e);
-        border: 1px solid rgba(218, 165, 32, 0.3);
-        border-radius: 12px;
-        width: 90%;
-        max-width: 400px;
-        color: #fff;
-        font-family: 'Lato', system-ui, sans-serif;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-      }
-
-      .mw3-settings-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 1rem 1.25rem;
-        border-bottom: 1px solid rgba(218, 165, 32, 0.2);
-      }
-
-      .mw3-settings-header h2 {
-        margin: 0;
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: rgba(218, 165, 32, 0.95);
-      }
-
-      .mw3-settings-close {
-        background: none;
-        border: none;
-        color: rgba(255, 255, 255, 0.6);
-        font-size: 1.5rem;
-        cursor: pointer;
-        padding: 0;
-        line-height: 1;
-      }
-
-      .mw3-settings-close:hover {
-        color: #fff;
-      }
-
-      .mw3-settings-content {
-        padding: 1.25rem;
-      }
-
-      .mw3-settings-section h3 {
-        margin: 0 0 0.5rem 0;
-        font-size: 0.9rem;
-        font-weight: 600;
-        color: rgba(255, 255, 255, 0.9);
-      }
-
-      .mw3-settings-description {
-        margin: 0 0 1rem 0;
-        font-size: 0.8rem;
-        color: rgba(255, 255, 255, 0.6);
-        line-height: 1.4;
-      }
-
-      .mw3-settings-row {
-        margin-bottom: 1rem;
-      }
-
-      .mw3-settings-toggle {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        cursor: pointer;
-      }
-
-      .mw3-settings-toggle input {
-        display: none;
-      }
-
-      .mw3-toggle-slider {
-        width: 44px;
-        height: 24px;
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 12px;
-        position: relative;
-        transition: background 0.2s;
-      }
-
-      .mw3-toggle-slider::after {
-        content: '';
-        position: absolute;
-        top: 2px;
-        left: 2px;
-        width: 20px;
-        height: 20px;
-        background: #fff;
-        border-radius: 50%;
-        transition: transform 0.2s;
-      }
-
-      .mw3-settings-toggle input:checked + .mw3-toggle-slider {
-        background: rgba(218, 165, 32, 0.8);
-      }
-
-      .mw3-settings-toggle input:checked + .mw3-toggle-slider::after {
-        transform: translateX(20px);
-      }
-
-      .mw3-toggle-label {
-        font-size: 0.875rem;
-        color: rgba(255, 255, 255, 0.9);
-      }
-
-      .mw3-settings-info {
-        font-size: 0.75rem;
-        color: rgba(255, 255, 255, 0.5);
-        margin-bottom: 1rem;
-      }
-
-      .mw3-settings-note {
-        font-size: 0.75rem;
-        color: rgba(255, 255, 255, 0.4);
-        margin: 0;
-        font-style: italic;
-      }
-
-      .mw3-settings-btn {
-        padding: 0.625rem 1rem;
-        border-radius: 6px;
-        font-size: 0.875rem;
-        font-weight: 500;
-        cursor: pointer;
-        border: none;
-        transition: all 0.2s;
-      }
-
-      .mw3-settings-btn--primary {
-        background: rgba(218, 165, 32, 0.9);
-        color: #1a1a2e;
-      }
-
-      .mw3-settings-btn--primary:hover {
-        background: rgba(218, 165, 32, 1);
-      }
-
-      .mw3-settings-btn--danger {
-        background: rgba(255, 99, 71, 0.2);
-        color: rgba(255, 99, 71, 0.9);
-        border: 1px solid rgba(255, 99, 71, 0.3);
-      }
-
-      .mw3-settings-btn--danger:hover {
-        background: rgba(255, 99, 71, 0.3);
-      }
-
-      .mw3-settings-btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .mw3-settings-footer {
-        padding: 1rem 1.25rem;
-        border-top: 1px solid rgba(218, 165, 32, 0.2);
-        display: flex;
-        justify-content: flex-end;
-      }
-    `;
-    document.head.appendChild(style);
-  }
 }
 
 export { SettingsModal };