parapet-rails 0.1.0

data/app/assets/javascripts/parapet/activity-card.js

@@ -0,0 +1,439 @@
+(function(global) {
+
+    class ActivityCard {
+        constructor(options = {}) {
+            this.id = options.id || `card-${Math.random().toString(36).substr(2, 9)}`;
+
+            // Subclasses declare identity via getters (cardTitle, cardIcon, cardKeyArea, cardProficiency).
+            // options can override at spawn time.
+            let icon = this.cardIcon || options.icon || 'layout';
+            if (!icon.includes('<svg') && !icon.includes('<i')) {
+                icon = `<i class="lucide lucide-${icon} qss-w[16] qss-h[16] qss-opacity-100"></i>`;
+            }
+            this.title       = this.cardTitle       || options.title      || 'Untitled Activity';
+            this.icon        = icon;
+            this.keyArea     = this.cardKeyArea     || options.keyArea    || 'general';
+            this.proficiency = this.cardProficiency !== undefined ? this.cardProficiency : (options.proficiency || 0);
+
+            this.element    = null;
+            this.isDragging = false;
+            this.isResizing = false;
+
+            // Merge: base defaults → subclass defaults() → spawn-time options
+            const initialProps = { ...this.defaults(), ...options };
+            const savedState = this.loadState();
+            
+            // Merge saved state over defaults to ensure new properties are present
+            this.state = savedState ? { ...initialProps, ...savedState } : initialProps;
+
+            // Initialize preferred dimensions for expansion logic
+            this.state.preferredWidth = this.state.preferredWidth || this.state.width;
+            this.state.preferredHeight = this.state.preferredHeight || this.state.height;
+
+            if (!ActivityCards.Z_LEVELS.includes(this.state.zIndex)) {
+                this.state.zIndex = this.getBaseZ();
+            }
+
+            // Subclass provides content via buildContent()
+            this.contentHtml = this.buildContent();
+        }
+
+        // ── Subclass overrides ────────────────────────────────────────────────
+
+        // Static identity — override as getters in subclass
+        get cardTitle()       { return null; }
+        get cardIcon()        { return null; }
+        get cardKeyArea()     { return null; }
+        get cardProficiency() { return undefined; }
+
+        // Default state shape — subclass spreads and overrides
+        defaults() {
+            return {
+                width: 400, height: 300, x: 20, y: 20, zIndex: 10,
+                pinned: false, active: true, orientation: 'neutral', size: 'medium',
+                minWidth: 150, minHeight: 100, userPositioned: false
+            };
+        }
+
+        // Card body HTML — subclass returns its own markup
+        buildContent() { return this._getFallbackContent(); }
+
+        // Lifecycle hooks — subclass overrides as needed
+        onInit()    { }
+        onResize()  { }
+        onDestroy() { }
+
+        // Card header actions — subclass returns HTML for additional buttons
+        renderHeaderActions() { return ''; }
+
+        // ── Internal ──────────────────────────────────────────────────────────
+
+        _getFallbackContent() {
+            const template = document.getElementById(`qss-tpl-${this.id}`);
+            if (template) return template.innerHTML;
+            return `
+                <div class="qss-flex qss-flex-col qss-gap[8] qss-p[16] qss-text-size[11] qss-font-mono qss-text-slate-500">
+                    <div class="qss-flex qss-justify-between qss-border-b qss-border-slate-800/50 qss-pb[4]"><span>ID:</span><span class="qss-text-slate-300">${this.id}</span></div>
+                    <div class="qss-flex qss-justify-between qss-border-b qss-border-slate-800/50 qss-pb[4]"><span>Proficiency:</span><span class="qss-text-slate-300">${this.proficiency}</span></div>
+                    <div class="qss-flex qss-justify-between qss-border-b qss-border-slate-800/50 qss-pb[4]"><span>Key Area:</span><span class="qss-text-slate-300">${this.keyArea}</span></div>
+                    <div class="qss-flex qss-justify-between qss-border-b qss-border-slate-800/50 qss-pb[4]"><span>Z-Index:</span><span class="qss-text-slate-300">${this.state.zIndex}</span></div>
+                </div>
+            `;
+        }
+
+        render(container) {
+            this.container = container;
+            const card = document.createElement('div');
+            card.id = this.id;
+            card.className = `qss-activity-card qss-proficiency-border-${this.proficiency} ${this.state.pinned ? 'qss-pinned' : ''}`;
+            card.setAttribute('data-key-area', this.keyArea);
+            card.setAttribute('data-proficiency', this.proficiency);
+            card.setAttribute('data-orientation', this.state.orientation);
+            card.setAttribute('data-size', this.state.size);
+            
+            // The coordinates (x,y) and dimensions (width,height) refer to the static Bounding Box.
+            card.style.width   = `${this.state.width}px`; 
+            card.style.height  = `${this.state.height}px`;
+            card.style.zIndex  = this.state.zIndex;
+            card.classList.add('qss-absolute');
+            card.style.left = `${this.state.x}px`;
+            card.style.top  = `${this.state.y}px`;
+
+            card.innerHTML = `
+                <div class="qss-card-inner-container">
+                    <div class="qss-card-header qss-px[6]">
+                        <div class="qss-flex qss-items-center qss-gap[6] qss-overflow-hidden">
+                            <div class="qss-flex qss-items-center qss-justify-center qss-w[16] qss-h[16] qss-text-slate-300 qss-activity-card-icon">
+                                ${this.icon}
+                            </div>
+                            <span class="qss-card-title qss-truncate">${this.title}</span>
+                        </div>
+                        <div class="qss-flex qss-items-center qss-gap[8] qss-flex-shrink-0">
+                            <div class="qss-header-actions qss-flex qss-items-center qss-gap[8]">
+                                ${this.renderHeaderActions()}
+                            </div>
+                            <div class="qss-flex qss-items-center qss-bg-slate-900/50 qss-rounded qss-px[4] qss-py[2] qss-gap[6] qss-border qss-border-slate-800/50">
+                                <div class="qss-z-down-btn qss-cursor-pointer qss-text-slate-500 hover:qss-text-white qss-flex qss-items-center qss-justify-center qss-w[10] qss-h[10] qss-transition-colors">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" style="width:100%;height:100%;display:block;"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                                </div>
+                                <span class="qss-text-size[9] qss-font-bold qss-text-slate-300 qss-min-w-[12px] qss-text-center qss-z-index-display qss-select-none">${ActivityCards.zLabel(this.state.zIndex)}</span>
+                                <div class="qss-z-up-btn qss-cursor-pointer qss-text-slate-500 hover:qss-text-white qss-flex qss-items-center qss-justify-center qss-w[10] qss-h[10] qss-transition-colors">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" style="width:100%;height:100%;display:block;"><polyline points="18 15 12 9 6 15"></polyline></svg>
+                                </div>
+                            </div>
+                            <div class="qss-pin-btn qss-cursor-pointer qss-text-slate-500 hover:qss-text-indigo-400 qss-flex qss-items-center qss-justify-center qss-w[12] qss-h[12] qss-transition-colors ${this.state.pinned ? 'qss-pin-active' : ''}">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:100%;height:100%;display:block;">
+                                    <line x1="12" y1="17" x2="12" y2="22"></line>
+                                    <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"></path>
+                                </svg>
+                            </div>
+                            <div class="qss-w[1] qss-h[12] qss-bg-slate-800/50"></div>
+                            <div class="qss-close-btn qss-cursor-pointer qss-text-slate-500 hover:qss-text-red-400 qss-items-center qss-justify-center qss-w[12] qss-h[12] qss-transition-colors ${this.id === 'file-editor' && ActivityCards.getProficiencyLevel() < 2 ? 'qss-hidden' : 'qss-flex'}">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="width:100%;height:100%;display:block;">
+                                    <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="qss-card-content qss-custom-scrollbar">${this.contentHtml}</div>
+                    <div class="qss-resize-handle qss-absolute qss-bottom-1 qss-right-1 qss-w[16] qss-h[16] qss-cursor-se-resize qss-flex qss-items-end qss-justify-end qss-p[2] qss-opacity-30 hover:qss-opacity-100">
+                        <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M7 1V7H1" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
+                    </div>
+                </div>
+            `;
+
+            this.element = card;
+            const targetLayer = this.getTargetLayer(container);
+            targetLayer.appendChild(card);
+            this.constrainToBoundaries();
+            this.alignToGrid();
+            this.updateElementStyles();
+            this.initInteractions();
+            this.onInit();
+            return card;
+        }
+
+        getTargetLayer(container) {
+            if (!this.state.pinned) return container.querySelector('#pp-floating-layer') || container;
+            return container.querySelector(`[data-layer="${this.proficiency}"]`) || container;
+        }
+
+        initInteractions() {
+            const header      = this.element.querySelector('.qss-card-header');
+            const resizeHandle = this.element.querySelector('.qss-resize-handle');
+            const closeBtn    = this.element.querySelector('.qss-close-btn');
+            const pinBtn      = this.element.querySelector('.qss-pin-btn');
+            const zUpBtn      = this.element.querySelector('.qss-z-up-btn');
+            const zDownBtn    = this.element.querySelector('.qss-z-down-btn');
+            const zDisplay    = this.element.querySelector('.qss-z-index-display');
+
+            zUpBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const levels = ActivityCards.Z_LEVELS;
+                const idx = levels.indexOf(this.state.zIndex);
+                const nextIdx = Math.min(idx >= 0 ? idx + 1 : 0, levels.length - 1);
+                this.state.zIndex = levels[nextIdx];
+                this.element.classList.toggle('qss-promoted', this.state.zIndex === ActivityCards.PROMOTE_Z);
+                this.updateZIndexUI(zDisplay);
+            });
+            zDownBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const levels = ActivityCards.Z_LEVELS;
+                const idx = levels.indexOf(this.state.zIndex);
+                if (idx <= 0) return;
+                this.state.zIndex = levels[idx - 1];
+                this.element.classList.remove('qss-promoted');
+                if (ActivityCards.state.promotedCardId === this.id) ActivityCards.state.promotedCardId = null;
+                this.updateZIndexUI(zDisplay);
+            });
+            pinBtn.addEventListener('click',  (e) => { e.stopPropagation(); this.togglePin(); });
+            header.addEventListener('mousedown', (e) => this.startDrag(e));
+            resizeHandle.addEventListener('mousedown', (e) => this.startResize(e));
+            closeBtn.addEventListener('click', () => this.destroy());
+
+            document.addEventListener('mousemove', (e) => {
+                if (this.isDragging) { e.preventDefault(); this.drag(e); }
+                if (this.isResizing) { e.preventDefault(); this.resize(e); }
+            });
+
+            document.addEventListener('mouseup', (e) => {
+                if (this.isDragging || this.isResizing) {
+                    const wasDragging = this.isDragging;
+                    const wasResizing = this.isResizing;
+                    this.isDragging  = false;
+                    this.isResizing  = false;
+                    this.element.classList.remove('qss-dragging');
+                    document.body.style.userSelect = '';
+                    this.alignToGrid();
+                    if (e.ctrlKey) this.applyMagneticSnapping();
+                    if (wasDragging || wasResizing) {
+                        this.state.userPositioned = true;
+                        this.handleCollisions();
+                        const restoreZ = this._preDragZIndex !== undefined ? this._preDragZIndex : this.getBaseZ();
+                        this.state.zIndex = restoreZ;
+                        this.element.style.zIndex = restoreZ;
+                        const zDisplay = this.element.querySelector('.qss-z-index-display');
+                        if (zDisplay) zDisplay.textContent = ActivityCards.zLabel(restoreZ);
+                        this._preDragZIndex = undefined;
+                    }
+                    this.saveState();
+                    this.updateElementStyles();
+                }
+            });
+        }
+
+        alignToGrid() {
+            const G = ActivityCards.settings.gridSize;
+            this.state.x      = Math.round(this.state.x / G) * G;
+            this.state.y      = Math.round(this.state.y / G) * G;
+            this.state.width  = Math.round(this.state.width / G) * G;
+            this.state.height = Math.round(this.state.height / G) * G;
+        }
+
+        applyMagneticSnapping() {
+            const G = ActivityCards.settings.gridSize;
+            const THRESHOLD = G * 2;
+            const MARGIN    = G;
+            const peers = Object.values(ActivityCards.active).filter(c => c !== this && c.state.zIndex === this.state.zIndex);
+            peers.forEach(t => {
+                const tr = { left: t.state.x, right: t.state.x + t.state.width, top: t.state.y, bottom: t.state.y + t.state.height };
+                const sr = { left: this.state.x, right: this.state.x + this.state.width, top: this.state.y, bottom: this.state.y + this.state.height };
+                if (Math.abs(sr.left - (tr.right + MARGIN)) < THRESHOLD) this.state.x = tr.right + MARGIN;
+                else if (Math.abs(sr.right - (tr.left - MARGIN)) < THRESHOLD) this.state.x = tr.left - MARGIN - this.state.width;
+                if (Math.abs(sr.top - (tr.bottom + MARGIN)) < THRESHOLD) this.state.y = tr.bottom + MARGIN;
+                else if (Math.abs(sr.bottom - (tr.top - MARGIN)) < THRESHOLD) this.state.y = tr.top - MARGIN - this.state.height;
+            });
+            if (this.container) {
+                const cRect = this.container.getBoundingClientRect();
+                if (Math.abs(this.state.x) < THRESHOLD) this.state.x = 0;
+                if (Math.abs(this.state.y) < THRESHOLD) this.state.y = 0;
+                if (Math.abs(this.state.x + this.state.width  - cRect.width)  < THRESHOLD) this.state.x = cRect.width  - this.state.width;
+                if (Math.abs(this.state.y + this.state.height - cRect.height) < THRESHOLD) this.state.y = cRect.height - this.state.height;
+            }
+        }
+
+        handleCollisions() {
+            const peers = Object.values(ActivityCards.active).filter(c => c !== this && c.state.zIndex === this.state.zIndex);
+            let found = true, safety = 0;
+            while (found && safety < 10) {
+                found = false;
+                for (const t of peers) {
+                    if (this.isOverlapping(this.state, t.state)) { found = true; this.nudgeCard(t); break; }
+                }
+                safety++;
+            }
+        }
+
+        isOverlapping(r1, r2) { return !(r1.x + r1.width <= r2.x || r2.x + r2.width <= r1.x || r1.y + r1.height <= r2.y || r2.y + r2.height <= r1.y); }
+
+        nudgeCard(target) {
+            target.state.x += ActivityCards.settings.gridSize;
+            target.alignToGrid();
+            target.constrainToBoundaries();
+            target.updateElementStyles();
+            target.saveState();
+        }
+
+        updateElementStyles() {
+            if (!this.element) return;
+            this.element.style.width  = `${this.state.width}px`;
+            this.element.style.height = `${this.state.height}px`;
+            if (!this.state.pinned) {
+                this.element.style.left = `${this.state.x}px`;
+                this.element.style.top  = `${this.state.y}px`;
+            }
+        }
+
+        updateZIndexUI(displayElement) {
+            this.element.style.zIndex = this.state.zIndex;
+            if (displayElement) displayElement.textContent = ActivityCards.zLabel(this.state.zIndex);
+            this.saveState();
+        }
+
+        getBaseZ() {
+            const levels = ActivityCards.Z_LEVELS;
+            return levels[Math.min(this.proficiency, levels.length - 2)];
+        }
+
+        demote() {
+            const base = this.getBaseZ();
+            this.state.zIndex = base;
+            this.element.style.zIndex = base;
+            this.element.classList.remove('qss-promoted');
+            const zDisplay = this.element.querySelector('.qss-z-index-display');
+            if (zDisplay) zDisplay.textContent = ActivityCards.zLabel(base);
+            if (ActivityCards.state.promotedCardId === this.id) ActivityCards.state.promotedCardId = null;
+            this.saveState();
+        }
+
+        togglePin() {
+            this.state.pinned = !this.state.pinned;
+            const pinBtn = this.element.querySelector('.qss-pin-btn');
+            if (this.state.pinned) { this.element.classList.add('qss-pinned'); pinBtn.classList.add('qss-pin-active'); }
+            else                   { this.element.classList.remove('qss-pinned'); pinBtn.classList.remove('qss-pin-active'); }
+            if (this.container) { this.getTargetLayer(this.container).appendChild(this.element); }
+            this.saveState();
+        }
+
+        startDrag(e) {
+            if (this.state.pinned) return;
+            if (e.target.closest('.qss-card-header')) {
+                this.isDragging    = true;
+                this.dragStartX    = e.clientX - this.element.offsetLeft;
+                this.dragStartY    = e.clientY - this.element.offsetTop;
+                this._preDragZIndex = this.state.zIndex;
+                ActivityCards.state.lastFocused = this.id;
+                this.element.style.zIndex = ActivityCards.DRAG_Z;
+                this.element.classList.add('qss-dragging');
+                document.body.style.userSelect = 'none';
+            }
+        }
+
+        drag(e) {
+            if (!this.isDragging || this.state.pinned) return;
+            this.state.x = e.clientX - this.dragStartX;
+            this.state.y = e.clientY - this.dragStartY;
+            this.constrainToBoundaries();
+            this.element.style.left = `${this.state.x}px`;
+            this.element.style.top  = `${this.state.y}px`;
+        }
+
+        constrainToBoundaries(targetW, targetH) {
+            if (!this.container && targetW === undefined) return;
+            
+            // Use passed dimensions (from ResizeObserver) or measure container
+            const widthBound = targetW !== undefined ? targetW : this.container.getBoundingClientRect().width;
+            const heightBound = targetH !== undefined ? targetH : this.container.getBoundingClientRect().height;
+            
+            // Expansion Logic: Try to grow back to preferred size if space was previously restricted
+            if (this.state.width < this.state.preferredWidth && this.state.width < widthBound) {
+                this.state.width = Math.min(this.state.preferredWidth, widthBound - this.state.x);
+            }
+            if (this.state.height < this.state.preferredHeight && this.state.height < heightBound) {
+                this.state.height = Math.min(this.state.preferredHeight, heightBound - this.state.y);
+            }
+
+            // Shrink Logic: Force shrink if card is now larger than workspace
+            if (this.state.width > widthBound) {
+                this.state.width = Math.max(this.state.minWidth, widthBound);
+            }
+            if (this.state.height > heightBound) {
+                this.state.height = Math.max(this.state.minHeight, heightBound);
+            }
+
+            // Reposition Logic: Push card back into view if it's hanging off right/bottom
+            this.state.x = Math.max(0, Math.min(this.state.x, widthBound  - this.state.width));
+            this.state.y = Math.max(0, Math.min(this.state.y, heightBound - this.state.height));
+            
+            // Final safety clamp
+            if (this.state.x + this.state.width > widthBound) {
+                this.state.width = Math.max(this.state.minWidth, widthBound - this.state.x);
+            }
+            if (this.state.y + this.state.height > heightBound) {
+                this.state.height = Math.max(this.state.minHeight, heightBound - this.state.y);
+            }
+        }
+
+        startResize(e) {
+            if (this.state.pinned) return;
+            this.isResizing        = true;
+            this.resizeStartX      = e.clientX;
+            this.resizeStartY      = e.clientY;
+            this.resizeStartWidth  = this.element.offsetWidth;
+            this.resizeStartHeight = this.element.offsetHeight;
+            e.stopPropagation();
+            e.preventDefault();
+        }
+
+        resize(e) {
+            if (!this.isResizing) return;
+            let newW = this.resizeStartWidth  + (e.clientX - this.resizeStartX);
+            let newH = this.resizeStartHeight + (e.clientY - this.resizeStartY);
+            newW = Math.max(this.state.minWidth,  newW);
+            newH = Math.max(this.state.minHeight, newH);
+            if (this.state.maxWidth)  newW = Math.min(this.state.maxWidth,  newW);
+            if (this.state.maxHeight) newH = Math.min(this.state.maxHeight, newH);
+            if (this.container) {
+                const cRect = this.container.getBoundingClientRect();
+                newW = Math.min(newW, cRect.width  - this.state.x);
+                newH = Math.min(newH, cRect.height - this.state.y);
+            }
+            this.state.width  = newW;
+            this.state.height = newH;
+            
+            // Manual resize updates preferred dimensions
+            this.state.preferredWidth = newW;
+            this.state.preferredHeight = newH;
+
+            this.element.style.width  = `${this.state.width}px`;
+            this.element.style.height = `${this.state.height}px`;
+            this.onResize();
+        }
+
+        saveState()  { ActivityCards.updateCardState(this.id, this.state); }
+        loadState()  { return ActivityCards.getCardState(this.id); }
+
+        destroy() {
+            // Enforcement: File Editor cannot be closed at Novice/Intermediate levels
+            if (this.id === 'file-editor') {
+                const level = ActivityCards.getProficiencyLevel();
+                if (level !== -1 && level < 2) {
+                    ActivityCards.showNotice("File Editor is required at this level", "error");
+                    return;
+                }
+            }
+
+            this.onDestroy();
+            if (this.element) this.element.remove();
+            if (ActivityCards.active[this.id]) {
+                delete ActivityCards.active[this.id];
+                this.state.visible = false;
+                ActivityCards.updateCardState(this.id, this.state);
+            }
+            document.dispatchEvent(new CustomEvent('cardClosed', { detail: { id: this.id } }));
+        }
+    }
+
+    global.ActivityCard = ActivityCard;
+
+})(typeof window !== 'undefined' ? window : this);