Gray Swan Arena - Focus Mode

Clean UI with popup removal and focus mode for Gray Swan Arena with persistent state
换行
// ==UserScript==
// @name         Gray Swan Arena - Focus Mode
// @namespace    http://tampermonkey.net/
// @version      2.1
// @license      MIT
// @description  Clean UI with popup removal and focus mode for Gray Swan Arena with persistent state
// @author       KarthiDreamr
// @match        https://app.grayswan.ai/*
// @grant        GM_addStyle
// @grant        GM.getValue
// @grant        GM.setValue
// @grant        GM_addValueChangeListener
// @grant        GM_removeValueChangeListener
// @homepage     https://github.com/yourusername/grayswan-focus-mode
// @supportURL   https://github.com/yourusername/grayswan-focus-mode/issues
// ==/UserScript==

(async function() {
    'use strict';

    // ========== CONFIGURATION ==========
    const CONFIG = {
        storageKey: 'gsa_focusMode',
        buttonPosition: { top: '14px', left: '14px' },
        animations: true,
        crossTabSync: true,
        autoApplyDelay: 100, // ms delay before applying clean mode
        popupCleanupInterval: 500, // ms interval for popup removal
        debugMode: false
    };

    // ========== UTILITY FUNCTIONS ==========
    function log(...args) {
        if (CONFIG.debugMode) {
            console.log('[GSA Focus Mode]', ...args);
        }
    }

    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // ========== LOAD PERSISTED STATE ==========
    let isFocusMode = await GM.getValue(CONFIG.storageKey, false);
    log('Initial state loaded:', isFocusMode);

    // Apply focus mode immediately if saved (prevents flicker)
    if (isFocusMode) {
        setTimeout(() => {
            document.body.classList.add('gsa-focus-mode');
            log('Focus mode applied from storage');
        }, CONFIG.autoApplyDelay);
    }

    // ========== POPUP REMOVAL SYSTEM ==========
    function removePopupComponents() {
        /* =========================================================
           1.  REMOVE UI COMPONENT 1 - Success congratulations
           ---------------------------------------------------------*/
        document.querySelectorAll('p.mb-4.text-left.text-sm').forEach(p => {
            if (p.textContent.includes('Congratulations - you have successfully submitted a working break')) {
                const container = p.closest('div.flex.w-full.flex-col');
                if (container) {
                    container.remove();
                    log('Removed success congratulations popup');
                }
            }
        });

        /* =========================================================
           2.  REMOVE UI COMPONENT 2 - Prize dialog footer
           ---------------------------------------------------------*/
        document.querySelectorAll('div[data-slot="dialog-footer"]').forEach(footer => {
            const t = footer.textContent || '';
            if (t.includes('What prizes can I win?') && t.includes('Got it')) {
                footer.remove();
                log('Removed prize dialog footer');
            }
        });

        /* =========================================================
           3.  REMOVE UI COMPONENT 3 - Break failure dialog footer
           ---------------------------------------------------------*/
        document.querySelectorAll('div[data-slot="dialog-footer"]').forEach(footer => {
            const t = footer.textContent || '';
            if (t.includes('Why did my break fail?') && t.includes('Got it')) {
                footer.remove();
                log('Removed break failure dialog footer');
            }
        });

        /* =========================================================
           4.  REMOVE UI COMPONENT 4 - Dialog headers
           ---------------------------------------------------------*/
        document.querySelectorAll('div[data-slot="dialog-header"]').forEach(header => {
            const t = header.textContent || '';
            if (t.includes('Break Successful!') || t.includes('Break Rejected')) {
                header.remove();
                log('Removed dialog header');
            }
        });
    }

    // Start popup cleanup interval
    setInterval(removePopupComponents, CONFIG.popupCleanupInterval);
    log('Popup cleanup system started');

    // ========== ENHANCED CSS STYLES ==========
    GM_addStyle(`
        /* Hide header - but preserve lightbulb and its popup */
        .gsa-focus-mode .bg-background.fixed.top-0:not([aria-labelledby]):not([data-tooltip]):not([role="tooltip"]) {
            display: none !important;
        }

        /* Hide main sidebar - but NOT the documentation sidebar */
        .gsa-focus-mode #sidebar:not([aria-labelledby="behaviorDocDrawerTitle"]) {
            display: none !important;
        }

        .gsa-focus-mode .relative.hidden.h-full.md\\:block:not([aria-labelledby]) {
            display: none !important;
        }

        /* CRITICAL: Always show the lightbulb documentation sidebar */
        .gsa-focus-mode aside[aria-labelledby="behaviorDocDrawerTitle"],
        .gsa-focus-mode aside.fixed.top-0.right-0,
        .gsa-focus-mode aside.__web-inspector-hide-shortcut__ {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 9999 !important;
        }

        /* EXCEPTION: Always preserve tooltip/popup/dropdown elements */
        .gsa-focus-mode [data-tooltip],
        .gsa-focus-mode [role="tooltip"],
        .gsa-focus-mode [data-popover],
        .gsa-focus-mode [data-dropdown],
        .gsa-focus-mode [data-slot="tooltip"],
        .gsa-focus-mode [data-slot="popover"],
        .gsa-focus-mode [data-slot="dropdown-menu"],
        .gsa-focus-mode .tooltip,
        .gsa-focus-mode .popover,
        .gsa-focus-mode .dropdown-menu {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* EXCEPTION: Lightbulb button and any trigger elements */
        .gsa-focus-mode button[data-tooltip-trigger],
        .gsa-focus-mode button:has(svg.lucide-lightbulb),
        .gsa-focus-mode [id*="bits-"]:not(#gsa-focus-toggle):not(#gsa-status-indicator) {
            display: flex !important;
            visibility: visible !important;
        }

        /* Hide breadcrumb navigation */
        .gsa-focus-mode nav[data-slot="breadcrumb"] {
            display: none !important;
        }

        /* Hide top tab navigation */
        .gsa-focus-mode .scrollbar-hide.-mb-1.flex.max-w-screen {
            display: none !important;
        }

        /* Hide mobile menu button */
        .gsa-focus-mode .md\\:hidden button[data-slot="sheet-trigger"] {
            display: none !important;
        }

        /* ENHANCED: Remove all padding and margins from main containers */
        .gsa-focus-mode .flex.flex-1.flex-col.overflow-hidden.pt-\\[4\\.5rem\\] {
            padding-top: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .gsa-focus-mode .relative.mx-auto.flex.h-full.w-full.flex-1 {
            padding: 0 !important;
            margin: 0 !important;
            max-width: none !important;
        }

        .gsa-focus-mode .flex.md\\:h-full.md\\:w-full.md\\:gap-4 {
            gap: 0 !important;
            padding: 0 !important;
        }

        /* ENHANCED: Make chat area completely full screen */
        .gsa-focus-mode .relative.flex.h-full.w-full.flex-col.gap-3 {
            max-width: none !important;
            margin: 0 !important;
            padding: 8px !important;
            gap: 8px !important;
        }

        /* ENHANCED: Remove padding from chat container */
        .gsa-focus-mode .dark\\:border-border.relative.flex.min-h-0.flex-1.flex-col.overflow-hidden {
            margin: 0 !important;
        }

        /* ENHANCED: Optimize chat content area spacing */
        .gsa-focus-mode .flex.h-full.min-h-0.flex-1.flex-col.overflow-auto {
            padding: 12px !important;
        }

        /* ENHANCED: Remove excessive margins from chat messages area */
        .gsa-focus-mode .mx-auto.flex.h-full.w-full.max-w-prose.flex-col.items-center.justify-center.space-y-2 {
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* ENHANCED: Optimize input area spacing */
        .gsa-focus-mode .relative.mx-auto.w-full.max-w-\\[75ch\\].shrink-0 {
            max-width: none !important;
            margin: 0 !important;
            padding: 8px !important;
        }

        /* ENHANCED: Remove body margins in focus mode */
        .gsa-focus-mode body {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* ENHANCED: Make main content container full height */
        .gsa-focus-mode .flex.min-h-screen.w-full.flex-col.overflow-hidden {
            min-height: 100vh !important;
        }

        /* ========== ENHANCED TOGGLE BUTTON STYLES ========== */
        #gsa-focus-toggle {
            position: fixed;
            top: ${CONFIG.buttonPosition.top};
            left: ${CONFIG.buttonPosition.left};
            z-index: 10000;
            background: #1a1a1a;
            color: #e5e5e5;
            border: 1px solid #333;
            border-radius: 20px;
            padding: 6px 12px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
            backdrop-filter: blur(8px);
            opacity: 0.8;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        #gsa-focus-toggle:hover {
            background: #2a2a2a;
            border-color: #555;
            opacity: 1;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        #gsa-focus-toggle.active {
            background: #1a1a1a;
            border-color: #30363d;
            color: #58a6ff;
        }

        #gsa-focus-toggle.active:hover {
            background: #2a2a2a;
            border-color: #58a6ff;
        }

        /* ========== STATUS INDICATOR ========== */
        #gsa-status-indicator {
            position: fixed;
            top: ${CONFIG.buttonPosition.top};
            left: calc(${CONFIG.buttonPosition.left} + 120px);
            z-index: 9999;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-family: monospace;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            backdrop-filter: blur(4px);
        }

        #gsa-status-indicator.show {
            opacity: 1;
        }

        #gsa-status-indicator.success {
            background: rgba(34, 197, 94, 0.8);
        }

        #gsa-status-indicator.sync {
            background: rgba(59, 130, 246, 0.8);
        }

        /* ========== ANIMATIONS ========== */
        ${CONFIG.animations ? `
        .gsa-focus-mode {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .gsa-focus-mode * {
            transition: all 0.2s ease;
        }
        ` : ''}

        /* ========== RESPONSIVE IMPROVEMENTS ========== */
        @media (max-width: 768px) {
            #gsa-focus-toggle {
                top: 10px;
                left: 10px;
                padding: 5px 10px;
                font-size: 11px;
            }

            #gsa-status-indicator {
                top: 10px;
                left: 100px;
            }
        }
    `);

    // ========== CORE FUNCTIONALITY ==========
    let toggleButton;
    let statusIndicator;
    let changeListener;

    // Create UI elements
    function createUI() {
        // Toggle button
        toggleButton = document.createElement('button');
        toggleButton.id = 'gsa-focus-toggle';
        updateButtonText();
        toggleButton.title = 'Toggle focus mode (F8 or Ctrl+Shift+F)';

        // Status indicator
        statusIndicator = document.createElement('div');
        statusIndicator.id = 'gsa-status-indicator';
        statusIndicator.textContent = 'Ready';

        document.body.appendChild(toggleButton);
        document.body.appendChild(statusIndicator);

        log('UI elements created');
    }

    // Update button text and state
    function updateButtonText() {
        if (!toggleButton) return;

        if (isFocusMode) {
            toggleButton.classList.add('active');
            toggleButton.innerHTML = '↩️ <span style="font-size: 10px;">Exit</span>';
        } else {
            toggleButton.classList.remove('active');
            toggleButton.innerHTML = '🎯 <span style="font-size: 10px;">Focus</span>';
        }
    }

    // Show status message
    function showStatus(message, type = 'success', duration = 2000) {
        if (!statusIndicator) {
            log('Status indicator not ready, skipping message:', message);
            return;
        }

        statusIndicator.textContent = message;
        statusIndicator.className = `show ${type}`;

        setTimeout(() => {
            if (statusIndicator) {
                statusIndicator.classList.remove('show');
                statusIndicator.classList.remove(type);
            }
        }, duration);
    }

    // Enhanced toggle function
    async function toggleFocusMode(source = 'manual') {
        const wasActive = isFocusMode;
        isFocusMode = document.body.classList.toggle('gsa-focus-mode');

        // Update UI
        updateButtonText();

        // Save state
        try {
            await GM.setValue(CONFIG.storageKey, isFocusMode);
            log(`Mode toggled to: ${isFocusMode ? 'ON' : 'OFF'} (source: ${source})`);

            if (source === 'manual') {
                showStatus(
                    isFocusMode ? 'Focus Mode ON' : 'Focus Mode OFF',
                    'success'
                );
            } else if (source === 'sync') {
                showStatus('Synced from other tab', 'sync', 1500);
            }
        } catch (error) {
            console.error('[GSA Focus Mode] Failed to save state:', error);
            showStatus('Save failed', 'error');
        }
    }

    // Debounced toggle for performance
    const debouncedToggle = debounce(toggleFocusMode, 100);

    // ========== CROSS-TAB SYNCHRONIZATION ==========
    function setupCrossTabSync() {
        if (!CONFIG.crossTabSync) return;

        changeListener = GM_addValueChangeListener(
            CONFIG.storageKey,
            (name, oldVal, newVal, remote) => {
                if (!remote) return; // Ignore changes from this tab

                log('Received remote state change:', newVal);
                isFocusMode = !!newVal;

                // Apply state change
                document.body.classList.toggle('gsa-focus-mode', isFocusMode);
                updateButtonText();

                // Show sync notification
                showStatus('Synced from other tab', 'sync', 1500);
            }
        );

        log('Cross-tab synchronization enabled');
    }

    // ========== KEYBOARD SHORTCUTS ==========
    function setupKeyboardShortcuts() {
        document.addEventListener('keydown', function(e) {
            // F8 shortcut
            if (e.key === 'F8') {
                e.preventDefault();
                debouncedToggle('keyboard');
                return;
            }

            // Ctrl+Shift+F shortcut
            if (e.ctrlKey && e.shiftKey && e.key === 'F') {
                e.preventDefault();
                debouncedToggle('keyboard');
                return;
            }

            // Escape to exit focus mode
            if (e.key === 'Escape' && isFocusMode) {
                debouncedToggle('keyboard');
                return;
            }
        });

        log('Keyboard shortcuts registered: F8, Ctrl+Shift+F, Escape');
    }

    // ========== AUTO-DETECTION AND ADAPTATION ==========
    function adaptToPageChanges() {
        // Observer for dynamic content changes
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' && isFocusMode) {
                    // Re-apply focus mode classes if needed
                    setTimeout(() => {
                        if (!document.body.classList.contains('gsa-focus-mode')) {
                            document.body.classList.add('gsa-focus-mode');
                            log('Focus mode re-applied after DOM change');
                        }
                    }, 50);
                }
            });
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        log('DOM observer started for dynamic content adaptation');
    }

    // ========== INITIALIZATION ==========
    function initialize() {
        createUI();
        setupCrossTabSync();
        setupKeyboardShortcuts();
        adaptToPageChanges();

        // Button click event
        toggleButton.addEventListener('click', () => debouncedToggle('manual'));

        // Apply saved state with proper timing
        if (isFocusMode) {
            updateButtonText();
            // Delay the status message to ensure UI is ready
            setTimeout(() => showStatus('Focus Mode restored', 'success', 1500), 100);
        }

        log('Script fully initialized');
        
        // Delay the loaded message to ensure statusIndicator is fully ready
        setTimeout(() => {
            showStatus('GSA Focus Mode loaded', 'success', 2000);
        }, 200);
    }


    // ========== CLEANUP ==========
    window.addEventListener('beforeunload', function() {
        if (changeListener && CONFIG.crossTabSync) {
            GM_removeValueChangeListener(changeListener);
            log('Cleanup completed');
        }
    });

    // ========== START ==========
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initialize);
    } else {
        // DOM already loaded
        setTimeout(initialize, 100);
    }

    // Fallback initialization
    window.addEventListener('load', function() {
        if (!toggleButton) {
            log('Fallback initialization triggered');
            initialize();
        }
    });

    log('Gray Swan Arena Focus Mode script loaded successfully');
})();
欢迎访问Greasy Fork镜像
