parapet-rails 0.1.0

data/app/assets/javascripts/parapet/proficiency-filter.js

@@ -0,0 +1,53 @@
+// Proficiency Filter Logic
+(function() {
+    let selectedLevel = localStorage.getItem('parapet-proficiency-level') !== null
+        ? parseInt(localStorage.getItem('parapet-proficiency-level'))
+        : -1;
+
+    function updateProficiencyUI() {
+        const chevronHitboxes = document.querySelectorAll('.qss-chevron-hitbox');
+        const activityItems   = document.querySelectorAll('.qss-activity-item');
+        const proficiencyTargets = document.querySelectorAll('.qss-proficiency-target');
+
+        chevronHitboxes.forEach((hitbox, index) => {
+            if (selectedLevel === -1 || index <= selectedLevel) {
+                hitbox.classList.remove('off');
+            } else {
+                hitbox.classList.add('off');
+            }
+        });
+
+        activityItems.forEach(item => {
+            const itemLevel = parseInt(item.getAttribute('data-proficiency'));
+            item.style.display = (selectedLevel === -1 || itemLevel <= selectedLevel) ? 'flex' : 'none';
+        });
+
+        proficiencyTargets.forEach(target => {
+            const targetLevel = parseInt(target.getAttribute('data-proficiency'));
+            target.style.display = (selectedLevel === -1 || targetLevel <= selectedLevel) ? '' : 'none';
+        });
+
+        localStorage.setItem('parapet-proficiency-level', selectedLevel);
+        document.dispatchEvent(new CustomEvent('proficiencyChanged', { detail: { level: selectedLevel } }));
+    }
+
+    document.addEventListener('click', (e) => {
+        const hitbox = e.target.closest('.qss-chevron-hitbox');
+        if (!hitbox) return;
+
+        const level = parseInt(hitbox.getAttribute('data-level'));
+        if (isNaN(level)) return;
+
+        selectedLevel = (selectedLevel === level) ? level - 1 : level;
+        updateProficiencyUI();
+    });
+
+    function init() {
+        if (!document.querySelector('.qss-chevron-hitbox')) return;
+        updateProficiencyUI();
+    }
+
+    document.addEventListener('DOMContentLoaded', init);
+    document.addEventListener('turbo:load', init);
+    init();
+})();

data/app/assets/javascripts/parapet/sidebar-resizer.js

@@ -0,0 +1,197 @@
+(function() {
+    console.log("SidebarResizer: Multi-Column & CSS Inspector Spatial Engine starting...");
+
+    const MIN_WIDTH = 200;
+    const MAX_WIDTH = 500;
+    const MIN_CONSOLE_HEIGHT = 24;
+    const MAX_CONSOLE_HEIGHT = 600;
+    const DEFAULT_CONSOLE_EXPANDED = 180;
+    
+    let leftSidebar = {
+        el: null,
+        handle: null,
+        storageKey: 'parapet-sidebar-left-width',
+        defaultWidth: 250,
+        originOffset: 48,
+        workspaceProp: 'left',
+        isResizing: false
+    };
+
+    let rightSidebar = {
+        el: null,
+        handle: null,
+        storageKey: 'parapet-sidebar-right-width',
+        defaultWidth: 300,
+        originOffset: 0,
+        workspaceProp: 'right',
+        isResizing: false
+    };
+
+    let cssInspector = {
+        el: null,
+        handle: null,
+        trigger: null,
+        icon: null,
+        storageKey: 'parapet-css-inspector-height',
+        isResizing: false,
+        lastHeight: DEFAULT_CONSOLE_EXPANDED
+    };
+
+    let wrapper = null;
+
+    function init() {
+        wrapper = document.getElementById('pp-workspace-wrapper');
+        
+        // Initialize Left
+        leftSidebar.el = document.getElementById('pp-left-sidebar');
+        leftSidebar.handle = document.getElementById('pp-sidebar-resizer');
+        
+        // Initialize Right
+        rightSidebar.el = document.getElementById('pp-right-sidebar');
+        rightSidebar.handle = document.getElementById('pp-right-resizer');
+
+        // Initialize CSS Inspector
+        cssInspector.el = document.getElementById('pp-workspace-console');
+        cssInspector.handle = document.getElementById('pp-console-resizer');
+        cssInspector.trigger = document.querySelector('.qss-console-trigger');
+        cssInspector.icon = document.querySelector('.qss-console-chevron');
+
+        if (leftSidebar.el && leftSidebar.handle) setupResizer(leftSidebar);
+        if (rightSidebar.el && rightSidebar.handle) setupResizer(rightSidebar);
+        if (cssInspector.el && cssInspector.handle) setupConsoleResizer();
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', stopResizing);
+    }
+
+    function setupResizer(sidebar) {
+        const saved = localStorage.getItem(sidebar.storageKey);
+        applyWidth(sidebar, saved ? parseInt(saved) : sidebar.defaultWidth);
+
+        sidebar.handle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            sidebar.isResizing = true;
+            sidebar.handle.classList.add('qss-resizing');
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+        });
+    }
+
+    function setupConsoleResizer() {
+        const saved = localStorage.getItem(cssInspector.storageKey);
+        const height = saved ? parseInt(saved) : MIN_CONSOLE_HEIGHT;
+        
+        // If it was saved as expanded (>24), store that as lastHeight
+        if (height > MIN_CONSOLE_HEIGHT) {
+            cssInspector.lastHeight = height;
+            applyConsoleHeight(height);
+        } else {
+            applyConsoleHeight(MIN_CONSOLE_HEIGHT);
+        }
+
+        cssInspector.handle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            cssInspector.isResizing = true;
+            cssInspector.handle.classList.add('qss-resizing');
+            document.body.style.cursor = 'row-resize';
+            document.body.style.userSelect = 'none';
+        });
+
+        if (cssInspector.trigger) {
+            cssInspector.trigger.addEventListener('click', toggleConsole);
+        }
+    }
+
+    function toggleConsole() {
+        const currentHeight = cssInspector.el.offsetHeight;
+        if (currentHeight <= MIN_CONSOLE_HEIGHT) {
+            // Expand
+            applyConsoleHeight(cssInspector.lastHeight);
+        } else {
+            // Collapse
+            cssInspector.lastHeight = currentHeight;
+            applyConsoleHeight(MIN_CONSOLE_HEIGHT);
+        }
+    }
+
+    function applyConsoleHeight(height) {
+        height = Math.max(MIN_CONSOLE_HEIGHT, Math.min(MAX_CONSOLE_HEIGHT, height));
+        cssInspector.el.style.height = `${height}px`;
+        
+        if (height > MIN_CONSOLE_HEIGHT) {
+            cssInspector.el.classList.add('qss-is-expanded');
+        } else {
+            cssInspector.el.classList.remove('qss-is-expanded');
+        }
+        
+        localStorage.setItem(cssInspector.storageKey, height);
+    }
+
+    function handleMouseMove(e) {
+        if (leftSidebar.isResizing) {
+            const newWidth = e.clientX - leftSidebar.originOffset;
+            applyWidth(leftSidebar, newWidth);
+        }
+        if (rightSidebar.isResizing) {
+            const newWidth = window.innerWidth - e.clientX - rightSidebar.originOffset;
+            applyWidth(rightSidebar, newWidth);
+        }
+        if (cssInspector.isResizing) {
+            const newHeight = window.innerHeight - e.clientY - 24; // 24 is footer height
+            applyConsoleHeight(newHeight);
+            if (newHeight > MIN_CONSOLE_HEIGHT) {
+                cssInspector.lastHeight = newHeight;
+            }
+        }
+    }
+
+    function stopResizing() {
+        [leftSidebar, rightSidebar].forEach(sidebar => {
+            if (sidebar.isResizing) {
+                sidebar.isResizing = false;
+                sidebar.handle.classList.remove('qss-resizing');
+                localStorage.setItem(sidebar.storageKey, parseInt(sidebar.el.style.width));
+            }
+        });
+
+        if (cssInspector.isResizing) {
+            cssInspector.isResizing = false;
+            cssInspector.handle.classList.remove('qss-resizing');
+            localStorage.setItem(cssInspector.storageKey, parseInt(cssInspector.el.style.height));
+        }
+
+        document.body.style.cursor = 'default';
+        document.body.style.userSelect = 'auto';
+    }
+
+    function applyWidth(sidebar, width) {
+        width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width));
+        const w = `${width}px`;
+        
+        const stripSpatial = (el, props = ['pos-x', 'pos-r', 'w']) => {
+            if (!el) return;
+            const regex = new RegExp(`qss-(${props.join('|')})\\[[^\\]]+\\]`, 'g');
+            el.className = el.className.replace(regex, '').trim();
+        };
+
+        stripSpatial(sidebar.el, ['w']);
+        sidebar.el.style.width = w;
+        
+        if (sidebar.workspaceProp === 'left') {
+            stripSpatial(sidebar.handle, ['pos-x']);
+            sidebar.handle.style.left = `${sidebar.originOffset + width - 5}px`;
+            
+            stripSpatial(wrapper, ['pos-x']);
+            if (wrapper) wrapper.style.left = `${sidebar.originOffset + width}px`;
+        } else {
+            stripSpatial(sidebar.handle, ['pos-x', 'pos-r']);
+            sidebar.handle.style.right = `${sidebar.originOffset + width - 5}px`;
+            
+            stripSpatial(wrapper, ['pos-r']);
+            if (wrapper) wrapper.style.right = `${sidebar.originOffset + width}px`;
+        }
+    }
+
+    document.addEventListener('turbo:load', init);
+    if (document.readyState === 'complete') init();
+})();