flexdesk 0.1.0

package/src/ui/components/notification_history.js

@@ -0,0 +1,264 @@
+/**
+ * NotificationHistory - Bottom bar notification history panel
+ *
+ * Bell icon in the global-bottom-bar that opens a popover listing past notifications.
+ * Reads from NotificationCenter.history (no modifications to NotificationCenter needed).
+ * Tracks unread count via lastSeenCount delta and updates a badge on the bell icon.
+ */
+
+export class NotificationHistory {
+    constructor({ notificationCenter, eventBus, logger } = {}) {
+        this.notificationCenter = notificationCenter;
+        this.eventBus = eventBus || null;
+        this.logger = logger || console;
+
+        this.triggerEl = null;
+        this.badgeEl = null;
+        this.lastSeenCount = 0;
+        this._popoverCleanup = null;
+        this._subscriptions = [];
+    }
+
+    mount() {
+        const barRight = document.querySelector('.twm-global-bottom-bar .twm-bar-right');
+        if (!barRight) {
+            this.logger.warn?.('[NotificationHistory] .bar-right not found');
+            return;
+        }
+
+        // Build trigger button
+        this.triggerEl = document.createElement('button');
+        this.triggerEl.className = 'twm-notification-history__trigger twm-has-tooltip';
+        this.triggerEl.setAttribute('data-tooltip', 'Notification history');
+        this.triggerEl.setAttribute('aria-label', 'Notification history');
+        this.triggerEl.innerHTML =
+            '<span class="material-symbols-outlined">notifications</span>' +
+            '<span class="twm-notification-history__badge" style="display:none">0</span>';
+
+        this.badgeEl = this.triggerEl.querySelector('.twm-notification-history__badge');
+
+        // Park the bell as the LAST child of .bar-right so it always
+        // sits at the far-right edge of the status bar — past the
+        // tick readout, streaming dot, and anything else that the
+        // global actions cluster mounts before it.
+        barRight.appendChild(this.triggerEl);
+
+        this.triggerEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.#togglePanel();
+        });
+
+        // Sync initial count so existing history doesn't show as unread
+        this.lastSeenCount = this.notificationCenter?.history?.length ?? 0;
+
+        this.#subscribeEvents();
+    }
+
+    unmount() {
+        this.#closePanel();
+        this._subscriptions.forEach(unsub => {
+            if (typeof unsub === 'function') unsub();
+        });
+        this._subscriptions = [];
+        if (this.triggerEl?.parentNode) {
+            this.triggerEl.parentNode.removeChild(this.triggerEl);
+        }
+        this.triggerEl = null;
+        this.badgeEl = null;
+    }
+
+    #subscribeEvents() {
+        if (!this.eventBus) return;
+
+        // Update badge whenever a new notification comes in
+        const badgeUpdate = () => queueMicrotask(() => this.#updateBadge());
+        const events = ['toast:show', 'notification:show', 'log:entry',
+            'workspace:save:failed', 'workspace:import:failed'];
+
+        events.forEach(name => {
+            this.eventBus.on(name, badgeUpdate);
+            this._subscriptions.push(() => this.eventBus.off(name, badgeUpdate));
+        });
+    }
+
+    #updateBadge() {
+        const historyLen = this.notificationCenter?.history?.length ?? 0;
+        const unread = Math.max(0, historyLen - this.lastSeenCount);
+
+        if (!this.badgeEl) return;
+
+        if (unread > 0) {
+            this.badgeEl.textContent = unread > 99 ? '99+' : String(unread);
+            this.badgeEl.style.display = '';
+        } else {
+            this.badgeEl.style.display = 'none';
+        }
+    }
+
+    #togglePanel() {
+        if (this._popoverCleanup) {
+            this.#closePanel();
+        } else {
+            this.#openPanel();
+        }
+    }
+
+    #closePanel() {
+        if (typeof this._popoverCleanup === 'function') {
+            try { this._popoverCleanup(); } catch (_) { /* ignore */ }
+            this._popoverCleanup = null;
+        }
+    }
+
+    #openPanel() {
+        this.#closePanel();
+
+        // Mark all as seen
+        this.lastSeenCount = this.notificationCenter?.history?.length ?? 0;
+        this.#updateBadge();
+
+        const panel = document.createElement('div');
+        panel.className = 'twm-notification-history__panel';
+
+        // Header
+        const header = document.createElement('div');
+        header.className = 'twm-notification-history__header';
+        header.innerHTML =
+            '<span class="twm-notification-history__title">Notifications</span>' +
+            '<button class="twm-notification-history__clear-btn twm-has-tooltip" data-tooltip="Clear all" aria-label="Clear all">' +
+                '<span class="material-symbols-outlined">delete_sweep</span>' +
+            '</button>' +
+            '<button class="twm-notification-history__close-btn twm-has-tooltip" data-tooltip="Close" aria-label="Close">' +
+                '<span class="material-symbols-outlined">close</span>' +
+            '</button>';
+        panel.appendChild(header);
+
+        // List
+        const list = document.createElement('div');
+        list.className = 'twm-notification-history__list';
+        panel.appendChild(list);
+
+        this.#renderList(list);
+
+        // Wire header buttons
+        header.querySelector('.twm-notification-history__close-btn')
+            .addEventListener('click', () => this.#closePanel());
+
+        header.querySelector('.twm-notification-history__clear-btn')
+            .addEventListener('click', () => {
+                this.notificationCenter.history.splice(0);
+                this.lastSeenCount = 0;
+                this.#updateBadge();
+                this.#renderList(list);
+            });
+
+        // Position and attach
+        document.body.appendChild(panel);
+        this.#positionPanel(panel);
+
+        // Popover lifecycle (same pattern as ValidationStatus)
+        const cleanup = () => {
+            document.removeEventListener('mousedown', onDocDown, true);
+            document.removeEventListener('keydown', onKey, true);
+            window.removeEventListener('resize', onResize, true);
+            try { panel.remove(); } catch (_) { /* ignore */ }
+            this._popoverCleanup = null;
+        };
+        this._popoverCleanup = cleanup;
+
+        const onDocDown = (ev) => {
+            if (!panel.contains(ev.target) && !this.triggerEl.contains(ev.target)) cleanup();
+        };
+        const onKey = (ev) => { if (ev.key === 'Escape') cleanup(); };
+        const onResize = () => cleanup();
+
+        document.addEventListener('mousedown', onDocDown, true);
+        document.addEventListener('keydown', onKey, true);
+        window.addEventListener('resize', onResize, true);
+    }
+
+    #renderList(listEl) {
+        listEl.innerHTML = '';
+        const history = this.notificationCenter?.history ?? [];
+
+        if (history.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'twm-notification-history__empty';
+            empty.textContent = 'No notifications';
+            listEl.appendChild(empty);
+            return;
+        }
+
+        // Reverse chronological
+        const fragment = document.createDocumentFragment();
+        for (let i = history.length - 1; i >= 0; i--) {
+            const entry = history[i];
+            const item = document.createElement('div');
+            const severity = entry.severity || 'info';
+            item.className = `twm-notification-history__item notification-history__item--${severity}`;
+
+            const itemHeader = document.createElement('div');
+            itemHeader.className = 'twm-notification-history__item-header';
+
+            if (entry.title) {
+                const titleEl = document.createElement('span');
+                titleEl.className = 'twm-notification-history__item-title';
+                titleEl.textContent = entry.title;
+                itemHeader.appendChild(titleEl);
+            }
+
+            const timeEl = document.createElement('span');
+            timeEl.className = 'twm-notification-history__item-time';
+            timeEl.textContent = this.#formatTime(entry.timestamp);
+            itemHeader.appendChild(timeEl);
+
+            item.appendChild(itemHeader);
+
+            const body = document.createElement('div');
+            body.className = 'twm-notification-history__item-body';
+            body.textContent = entry.message || '';
+            item.appendChild(body);
+
+            fragment.appendChild(item);
+        }
+        listEl.appendChild(fragment);
+    }
+
+    #positionPanel(panel) {
+        if (!this.triggerEl) return;
+
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const panelWidth = panel.getBoundingClientRect().width;
+        const gap = 8;
+
+        let left = triggerRect.right - panelWidth;
+
+        // Clamp horizontally to the viewport.
+        const vw = window.innerWidth;
+        left = Math.max(8, Math.min(left, vw - panelWidth - 8));
+
+        // Anchor by the panel's BOTTOM edge, pinned just above the bell.
+        // Anchoring by `top` leaves the box floating when its content shrinks
+        // (notifications cleared/removed): the top stays put while the bottom
+        // lifts away from the bell, stranding the panel in mid-air. Pinning
+        // the bottom keeps it glued to the bottom bar and lets it grow/shrink
+        // upward — no repositioning needed on re-render.
+        const bottom = window.innerHeight - (triggerRect.top - gap);
+
+        // Never let the panel run off the top of the viewport: cap its height
+        // to the space above the bell (within the design max). The list
+        // scrolls within whatever remains.
+        const available = triggerRect.top - gap - 8;
+        panel.style.maxHeight = `${Math.max(0, Math.min(420, Math.round(available)))}px`;
+
+        panel.style.left = `${Math.round(left)}px`;
+        panel.style.bottom = `${Math.round(bottom)}px`;
+        panel.style.top = 'auto';
+    }
+
+    #formatTime(timestamp) {
+        if (!timestamp) return '';
+        const d = new Date(timestamp);
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    }
+}

package/src/ui/components/slide_out_panel.js

@@ -0,0 +1,185 @@
+/**
+ * SlideOutPanel
+ *
+ * Reusable inline slide-out config panel that overlays its host container
+ * from the right edge. Used by pages to show element-specific config
+ * (plot config, widget config, ETL node config) without the global right panel.
+ *
+ * Host container must have `position: relative; overflow: hidden`.
+ */
+import { ComponentBase } from '../base/component_base.js';
+
+export class SlideOutPanel extends ComponentBase {
+
+    /** @type {HTMLElement} */  #container = null;
+    /** @type {HTMLElement} */  #backdrop = null;
+    /** @type {HTMLElement} */  #panel = null;
+    /** @type {HTMLElement} */  #headerIcon = null;
+    /** @type {HTMLElement} */  #headerTitle = null;
+    /** @type {HTMLElement} */  #body = null;
+    /** @type {number} */       #width;
+    /** @type {Function|null} */#onClose;
+    /** @type {boolean} */      #open = false;
+
+    /**
+     * @param {object}   opts
+     * @param {number}   [opts.width=380]  Panel width in px.
+     * @param {Function} [opts.onClose]    Called after the panel closes.
+     */
+    constructor({ width = 700, onClose } = {}) {
+        super();
+        this.#width = width;
+        this.#onClose = onClose ?? null;
+    }
+
+    // ─── Lifecycle ──────────────────────────────────────────────────────────
+
+    /**
+     * Mount the panel DOM into a host container.
+     * @param {HTMLElement} container  Must have position:relative; overflow:hidden.
+     */
+    mount(container) {
+        if (this._mounted) return;
+        this.#container = container;
+
+        // Backdrop (transparent click-catcher)
+        this.#backdrop = document.createElement('div');
+        this.#backdrop.className = 'twm-slide-out-panel__backdrop';
+        this.#backdrop.addEventListener('click', this.#handleBackdropClick);
+
+        // Panel
+        this.#panel = document.createElement('div');
+        this.#panel.className = 'twm-slide-out-panel';
+        this.#panel.style.width = `${this.#width}px`;
+
+        // Header
+        const header = document.createElement('div');
+        header.className = 'twm-slide-out-panel__header';
+
+        this.#headerIcon = document.createElement('span');
+        this.#headerIcon.className = 'material-symbols-outlined';
+
+        this.#headerTitle = document.createElement('span');
+        this.#headerTitle.className = 'twm-slide-out-panel__title';
+
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'twm-slide-out-panel__close twm-btn-icon';
+        closeBtn.type = 'button';
+        closeBtn.title = 'Close';
+        closeBtn.innerHTML = '<span class="material-symbols-outlined">close</span>';
+        closeBtn.addEventListener('click', this.#handleCloseClick);
+
+        header.append(this.#headerIcon, this.#headerTitle, closeBtn);
+
+        // Body (scrollable content area)
+        this.#body = document.createElement('div');
+        this.#body.className = 'twm-slide-out-panel__body';
+
+        this.#panel.append(header, this.#body);
+        this.#container.append(this.#backdrop, this.#panel);
+
+        this._mounted = true;
+    }
+
+    dispose() {
+        this.close();
+        this.#backdrop?.remove();
+        this.#panel?.remove();
+        this.#backdrop = null;
+        this.#panel = null;
+        this.#body = null;
+        this.#container = null;
+        super.dispose();
+    }
+
+    // ─── Public API ─────────────────────────────────────────────────────────
+
+    /** The inner content element — callers render config into this. */
+    get contentEl() { return this.#body; }
+
+    get isOpen() { return this.#open; }
+
+    /**
+     * Open (or re-open) the panel with a new title/icon.
+     * Clears previous content. Returns contentEl for rendering.
+     * @param {string} title
+     * @param {string} icon  Material Symbols icon name.
+     * @returns {HTMLElement} contentEl
+     */
+    open(title, icon) {
+        if (!this._mounted) return null;
+
+        this.#body.innerHTML = '';
+        this.#headerIcon.textContent = icon || '';
+        this.#headerIcon.style.display = icon ? '' : 'none';
+        this.#headerTitle.textContent = title || '';
+
+        if (!this.#open) {
+            this.#open = true;
+            this.#backdrop.classList.add('twm-slide-out-panel__backdrop--visible');
+            this.#panel.classList.add('twm-slide-out-panel--open');
+            document.addEventListener('keydown', this.#handleEsc);
+
+            // The host may be a scroll container — absolutely-positioned
+            // descendants of one DO scroll along with the content
+            // (Web spec: a position:absolute element is clipped + offset
+            // by its containing scroll context). We escape that by
+            // switching the panel to `position: fixed` while open and
+            // tracking the host's bounding rect on scroll / resize, so
+            // the panel stays pinned to the host's visible frame at
+            // full height regardless of how the user scrolls inside.
+            this.#trackGeometry();
+            window.addEventListener('scroll', this.#trackGeometry, true);
+            window.addEventListener('resize', this.#trackGeometry);
+        }
+
+        return this.#body;
+    }
+
+    /** Close the panel and clear content. */
+    close() {
+        if (!this.#open) return;
+        this.#open = false;
+
+        this.#panel.classList.remove('twm-slide-out-panel--open');
+        this.#backdrop.classList.remove('twm-slide-out-panel__backdrop--visible');
+        document.removeEventListener('keydown', this.#handleEsc);
+        window.removeEventListener('scroll', this.#trackGeometry, true);
+        window.removeEventListener('resize', this.#trackGeometry);
+        // Leave the inline position:fixed geometry in place. The panel
+        // slides off-screen via the transform animation (translateX
+        // 100%); the next open() re-runs #trackGeometry which will
+        // refresh top/left/height from the host's current rect.
+
+        this.#body.innerHTML = '';
+        this.#onClose?.();
+    }
+
+    // ─── Event handlers (arrow fns for stable `this`) ───────────────────────
+
+    #handleBackdropClick = () => { this.close(); };
+
+    #handleCloseClick = () => { this.close(); };
+
+    #handleEsc = (e) => {
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            this.close();
+        }
+    };
+
+    /** Pin the panel to the right edge of its host's *visible* frame
+     *  using `position: fixed`. Re-run on every scroll/resize so the
+     *  panel always overlays the host correctly even when the host
+     *  itself sits inside a scrolled ancestor. */
+    #trackGeometry = () => {
+        if (!this.#open || !this.#panel || !this.#container) return;
+        const r = this.#container.getBoundingClientRect();
+        const s = this.#panel.style;
+        s.position = 'fixed';
+        s.top      = `${Math.round(r.top)}px`;
+        s.left     = `${Math.round(r.right - this.#width)}px`;
+        s.right    = 'auto';
+        s.height   = `${Math.round(r.height)}px`;
+    };
+}

package/src/ui/components/slider_field.js

@@ -0,0 +1,122 @@
+export class SliderField {
+    constructor({ fieldId, field = {}, onChange = null, logger = null } = {}) {
+        if (!fieldId) {
+            throw new Error('SliderField requires a fieldId');
+        }
+        this.fieldId = fieldId;
+        this.field = field;
+        this.logger = logger;
+        this.onChange = typeof onChange === 'function' ? onChange : null;
+
+        this.root = null;
+        this.sliderInput = null;
+        this.helperEl = null;
+        this.emitOnInput = Boolean(field.emitOnInput ?? field.emitsOnInput);
+        this._disposers = [];
+    }
+
+    render() {
+        if (this.root) {
+            return this.root;
+        }
+        this.root = document.createElement('div');
+        this.root.className = 'twm-slider-field';
+
+        this.sliderInput = document.createElement('input');
+        this.sliderInput.type = 'range';
+        this.sliderInput.className = 'twm-slider-field__input';
+        this.sliderInput.min = this.#coerceNumber(this.field.min, 0);
+        this.sliderInput.max = this.#coerceNumber(this.field.max, 100);
+        this.sliderInput.step = this.#coercePositiveNumber(this.field.step, 1);
+        this.sliderInput.value = this.#coerceNumber(this.field.value, Number(this.sliderInput.min));
+        if (this.field.disabled) {
+            this.sliderInput.disabled = true;
+        }
+
+        // Prevent parent interactions from interfering with slider dragging
+        // Use stopImmediatePropagation to ensure no other handlers on this element run
+        // DO NOT call preventDefault - allow native slider drag behavior
+        const stopDrag = (evt) => {
+            evt.stopPropagation();
+            evt.stopImmediatePropagation();
+        };
+        // Use capture phase to intercept before any parent handlers
+        this.sliderInput.addEventListener('mousedown', stopDrag, { capture: true });
+        this.sliderInput.addEventListener('touchstart', stopDrag, { passive: false, capture: true });
+        this._disposers.push(() => this.sliderInput.removeEventListener('mousedown', stopDrag, { capture: true }));
+        this._disposers.push(() => this.sliderInput.removeEventListener('touchstart', stopDrag, { passive: false, capture: true }));
+
+        this.helperEl = document.createElement('div');
+        this.helperEl.className = 'twm-slider-field__helper';
+        if (this.field.helperText) {
+            this.helperEl.textContent = this.field.helperText;
+        }
+
+        this.root.appendChild(this.sliderInput);
+        this.root.appendChild(this.helperEl);
+
+        // Throttle onInput to animation frames to avoid re-render stutter while dragging
+        let rafToken = null;
+        let pendingValue = null;
+        const flushPending = () => {
+            if (rafToken) {
+                cancelAnimationFrame(rafToken);
+                rafToken = null;
+            }
+            if (pendingValue === null) return;
+            const valueToEmit = pendingValue;
+            pendingValue = null;
+            if (this.emitOnInput) {
+                this.onChange?.(valueToEmit, { immediate: true });
+            }
+        };
+
+        const handleInput = (event) => {
+            pendingValue = event.target.value;
+            if (!rafToken) {
+                rafToken = requestAnimationFrame(() => {
+                    rafToken = null;
+                    flushPending();
+                });
+            }
+        };
+        const handleChange = (event) => {
+            flushPending();
+            const value = event.target.value;
+            this.onChange?.(value, { immediate: false });
+        };
+        this.sliderInput.addEventListener('input', handleInput);
+        this.sliderInput.addEventListener('change', handleChange);
+        this._disposers.push(() => this.sliderInput.removeEventListener('input', handleInput));
+        this._disposers.push(() => this.sliderInput.removeEventListener('change', handleChange));
+
+        return this.root;
+    }
+
+    dispose() {
+        this._disposers.forEach((dispose) => {
+            try {
+                dispose?.();
+            } catch (error) {
+                this.logger?.warn?.('twm-slider-field', 'Failed to dispose slider listener', { error });
+            }
+        });
+        this._disposers = [];
+        this.root = null;
+        this.sliderInput = null;
+        this.helperEl = null;
+    }
+
+    #coerceNumber(value, fallback) {
+        const numeric = Number(value);
+        return Number.isFinite(numeric) ? numeric : fallback;
+    }
+
+    #coercePositiveNumber(value, fallback) {
+        const numeric = this.#coerceNumber(value, fallback);
+        if (numeric <= 0) {
+            return fallback;
+        }
+        return numeric;
+    }
+}