genai-toolbox/internal/server/static/js/resize.js

// Copyright 2025 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

const STORAGE_KEY = 'toolbox-second-nav-width';
const DEFAULT_WIDTH = 250;
const MIN_WIDTH = 200;
const MAX_WIDTH_PERCENT = 50;

/**
 * Creates and attaches a resize handle to the second navigation panel
 */
export function initializeResize() {
    const secondNav = document.querySelector('.second-nav');
    if (!secondNav) {
        return;
    }

    // Create resize handle
    const resizeHandle = document.createElement('div');
    resizeHandle.className = 'resize-handle';
    resizeHandle.setAttribute('aria-label', 'Resize panel');
    secondNav.appendChild(resizeHandle);

    // Load saved width or use default
    let initialWidth = DEFAULT_WIDTH;
    try {
        const savedWidth = localStorage.getItem(STORAGE_KEY);
        if (savedWidth) {
            const parsed = parseInt(savedWidth, 10);
            if (!isNaN(parsed) && parsed >= MIN_WIDTH) {
                initialWidth = parsed;
            }
        }
    } catch (e) {
        // localStorage may be unavailable in private browsing mode
        console.warn('Failed to load saved panel width:', e);
    }
    setPanelWidth(secondNav, initialWidth);

    // Setup resize functionality
    let startX = 0;
    let startWidth = 0;

    const onMouseMove = (e) => {
        const deltaX = e.clientX - startX;
        const newWidth = startWidth + deltaX;
        const maxWidth = (window.innerWidth * MAX_WIDTH_PERCENT) / 100;

        const clampedWidth = Math.max(MIN_WIDTH, Math.min(newWidth, maxWidth));
        setPanelWidth(secondNav, clampedWidth);
    };

    const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);

        resizeHandle.classList.remove('active');
        document.body.style.cursor = '';
        document.body.style.userSelect = '';

        // Save width to localStorage
        try {
            localStorage.setItem(STORAGE_KEY, secondNav.offsetWidth.toString());
        } catch (e) {
            // localStorage may be unavailable in private browsing mode
            console.warn('Failed to save panel width:', e);
        }
    };

    resizeHandle.addEventListener('mousedown', (e) => {
        startX = e.clientX;
        startWidth = secondNav.offsetWidth;
        resizeHandle.classList.add('active');
        document.body.style.cursor = 'ew-resize';
        document.body.style.userSelect = 'none';
        e.preventDefault();

        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    });

    // Handle window resize to enforce max width
    window.addEventListener('resize', () => {
        const currentWidth = secondNav.offsetWidth;
        const maxWidth = (window.innerWidth * MAX_WIDTH_PERCENT) / 100;
        
        if (currentWidth > maxWidth) {
            setPanelWidth(secondNav, maxWidth);
            try {
                localStorage.setItem(STORAGE_KEY, maxWidth.toString());
            } catch (e) {
                // localStorage may be unavailable in private browsing mode
                console.warn('Failed to save panel width:', e);
            }
        }
    });
}

/**
 * Sets the width of the panel and updates flex property
 */
function setPanelWidth(panel, width) {
    panel.style.flex = `0 0 ${width}px`;
}