Add expand bolt․new preview button

expand-preview-button.js

// Paste into devtools to add the button:

function addButton() {
    const targetElement = document.querySelector('[class*="min-h-[var(--panel-header-height)]"]');
    console.log('Found target element:', targetElement);

    if (targetElement) {
        // Create the button
        const button = document.createElement('button');
        let isWidthSet = false;
        
        // Define SVGs
        const expandSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M136 40v176a8 8 0 0 1-16 0V40a8 8 0 0 1 16 0m-40 80H35.31l18.35-18.34a8 8 0 0 0-11.32-11.32l-32 32a8 8 0 0 0 0 11.32l32 32a8 8 0 0 0 11.32-11.32L35.31 136H96a8 8 0 0 0 0-16m149.66 2.34l-32-32a8 8 0 0 0-11.32 11.32L220.69 120H160a8 8 0 0 0 0 16h60.69l-18.35 18.34a8 8 0 0 0 11.32 11.32l32-32a8 8 0 0 0 0-11.32"/></svg>`;
        
        const collapseSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M140 40v176a12 12 0 0 1-24 0V40a12 12 0 0 1 24 0M64.49 87.51a12 12 0 0 0-17 17L59 116H16a12 12 0 0 0 0 24h43l-11.49 11.51a12 12 0 0 0 17 17l32-32a12 12 0 0 0 0-17ZM240 116h-43l11.52-11.51a12 12 0 0 0-17-17l-32 32a12 12 0 0 0 0 17l32 32a12 12 0 0 0 17-17L197 140h43a12 12 0 0 0 0-24"/></svg>`;
        
        // Function to update button appearance
        const updateButtonState = () => {
            button.innerHTML = isWidthSet ? collapseSvg : expandSvg;
        };

        button.style.cssText = `
            padding: 4px;
            margin-left: auto;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s;
        `;

        // Add hover effect
        button.addEventListener('mouseover', () => {
            button.style.transform = 'scale(1.1)';
        });
        button.addEventListener('mouseout', () => {
            button.style.transform = 'scale(1)';
        });

        // Set initial button state
        updateButtonState();

        // Add click event to toggle the CSS variable
        button.addEventListener('click', () => {
            if (isWidthSet) {
                document.documentElement.style.removeProperty('--chat-min-width');
            } else {
                document.documentElement.style.setProperty('--chat-min-width', '10px');
            }
            isWidthSet = !isWidthSet;
            updateButtonState();
        });

        targetElement.appendChild(button);
        console.log('Button added');
    }
}

// Since bolt.new is a React application, we need to wait for the content to load
function checkAndAddButton() {
    const interval = setInterval(() => {
        const element = document.querySelector('[class*="min-h-[var(--panel-header-height)]"]');
        if (element) {
            clearInterval(interval);
            addButton();
        }
    }, 1000); // Check every second

    // Stop checking after 10 seconds to prevent infinite checking
    setTimeout(() => {
        clearInterval(interval);
    }, 10000);
}

// Start the process
checkAndAddButton();