40227-vm/ref-frontend/src/components/DevModeBadge.tsx

import React, { useState, useEffect } from 'react';
import useDevCompilationStatus from '../hooks/useDevCompilationStatus';
const DevModeBadge: React.FC = () => {
    const [isVisible, setIsVisible] = useState(false);
    const [isCollapsed, setIsCollapsed] = useState(true);
    const compilationStatus = useDevCompilationStatus();

    const [badgeStyles, setBadgeStyles] = useState<React.CSSProperties>({
        position: 'fixed',
        bottom: '20px',
        left: '70px',
        background: 'rgba(0, 0, 0, 0.85)',
        color: 'white',
        padding: '15px',
        borderRadius: '8px',
        fontFamily: 'sans-serif',
        fontSize: '14px',
        lineHeight: '1.5',
        textAlign: 'left',
        zIndex: 2147483647,
        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)',
        whiteSpace: 'pre-wrap',
        transition: 'width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), padding 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out', // Improved transition for width
        opacity: 0,
        pointerEvents: 'none',
        width: '340px',
        maxWidth: '340px',
        height: 'auto',
        overflow: 'hidden',
        cursor: 'pointer',
    });

    const fullText = `🚧 Your app is running in development mode.
Current request is compiling and may take a few moments.

💡 Tip: Set up a stable environment to run your app in production mode—pages will load instantly without compilation delays.`;

    const collapsedText = '🚧 DEV stage';

    useEffect(() => {
        if (compilationStatus === 'ready') {
            setIsCollapsed(true);
        } else {
            setIsCollapsed(false);
        }

    }, [compilationStatus]);

    useEffect(() => {
        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'dev_stage') {
            setIsVisible(true);

            setBadgeStyles(prev => ({
                ...prev,
                opacity: 1,
                width: '120px',
                maxWidth: '120px',
                padding: '6px 10px',
                borderRadius: '18px',
                whiteSpace: 'nowrap',
                fontSize: '12px',
                cursor: 'pointer',
                pointerEvents: 'auto',
            }));

        } else {
            setIsVisible(false);
            setBadgeStyles(prev => ({ ...prev, opacity: 0 }));
        }
    }, []);

    useEffect(() => {
        if (!isVisible) return;

        if (isCollapsed) {
            setBadgeStyles(prev => ({
                ...prev,
                width: '140px',
                maxWidth: '160px',
                padding: '6px 20px',
                borderRadius: '18px',
                whiteSpace: 'nowrap',
                fontSize: '12px',
            }));
        } else {
            setBadgeStyles(prev => ({
                ...prev,
                width: '340px',
                maxWidth: '340px',
                padding: '15px',
                borderRadius: '8px',
                whiteSpace: 'pre-wrap',
                fontSize: '14px',
            }));
        }
    }, [isCollapsed, isVisible]);

    const handleToggleCollapse = (e: React.MouseEvent) => {
        e.stopPropagation();
        setIsCollapsed(prev => !prev);
    };

    if (!isVisible) {
        return null;
    }

    return (
        <div style={badgeStyles} onClick={isCollapsed ? handleToggleCollapse : undefined}>
            <button
                onClick={handleToggleCollapse}
                style={{
                    position: 'absolute',
                    top: isCollapsed ? '3px' : '5px',
                    right: isCollapsed ? '2px' : '5px',
                    background: 'none',
                    border: 'none',
                    color: 'white',
                    fontSize: isCollapsed ? '10px' : '18px',
                    cursor: 'pointer',
                    padding: '2px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    lineHeight: '1',
                    width: '24px',
                    height: isCollapsed ? '24px' : '24px',
                    borderRadius: '50%',
                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
                    transition: 'background-color 0.2s ease, font-size 0.2s ease, width 0.2s ease, height 0.2s ease',
                }}
                aria-label={isCollapsed ? "Expand message" : "Collapse message"}
            >
                {isCollapsed ? '+' : '×'}
            </button>

            {!isCollapsed && (
                <div style={{ marginRight: '20px' }}>
                    {fullText}
                </div>
            )}
            {isCollapsed && (
                <div style={{ marginRight: '10px' }}>
                    {collapsedText}
                </div>
            )}
        </div>
    );
};

export default DevModeBadge;