// ==UserScript== // @name X.com Focus Mode // @namespace web.nextbyte.ai // @version 2.2 // @description Toggle left and right sidebars for a distraction-free experience on X.com // @author NextByte // @match *://x.com/* // @grant GM_addStyle // ==/UserScript== (function() { 'use strict'; // State management let state = { leftSidebarHidden: false, rightSidebarHidden: false, settingsOpen: false }; // Load saved state from localStorage function loadState() { const saved = localStorage.getItem('xcom-focus-mode'); if (saved) { try { state = JSON.parse(saved); } catch (e) { console.error('Failed to load focus mode state:', e); } } } // Save state to localStorage function saveState() { localStorage.setItem('xcom-focus-mode', JSON.stringify(state)); } // Detect current theme function getCurrentTheme() { const htmlElement = document.documentElement; return htmlElement.getAttribute('data-theme') || 'dark'; } // Get theme colors function getThemeColors() { const theme = getCurrentTheme(); if (theme === 'dark') { return { bg: 'rgba(0, 0, 0, 0.85)', border: 'rgba(83, 100, 113, 0.5)', text: 'rgb(231, 233, 234)', textSecondary: 'rgb(113, 118, 123)', hover: 'rgba(255, 255, 255, 0.1)', active: 'rgba(29, 155, 240, 0.1)', buttonBg: 'rgba(29, 155, 240, 0.2)', buttonHover: 'rgba(29, 155, 240, 0.3)' }; } else { return { bg: 'rgba(255, 255, 255, 0.85)', border: 'rgba(207, 217, 222, 0.5)', text: 'rgb(15, 20, 25)', textSecondary: 'rgb(83, 100, 113)', hover: 'rgba(0, 0, 0, 0.03)', active: 'rgba(29, 155, 240, 0.1)', buttonBg: 'rgba(29, 155, 240, 0.1)', buttonHover: 'rgba(29, 155, 240, 0.15)' }; } } // Add custom styles function addStyles() { const colors = getThemeColors(); GM_addStyle(` /* Focus mode widget - compact design */ #focus-mode-widget { position: fixed; top: 16px; right: 16px; z-index: 9999; background: ${colors.bg}; backdrop-filter: blur(12px); border: 1px solid ${colors.border}; border-radius: 20px; padding: 8px 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; transition: all 0.2s ease; display: flex; align-items: center; gap: 0; cursor: pointer; } #focus-mode-widget:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .focus-mode-label { color: ${colors.text}; font-size: 13px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; } .focus-mode-button { background: transparent; border: none; color: ${colors.text}; border-radius: 16px; padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; } .focus-mode-button:hover { background: transparent; } .focus-mode-button svg { width: 16px; height: 16px; } /* Settings panel */ #focus-mode-settings { position: fixed; top: 60px; right: 16px; z-index: 9998; background: ${colors.bg}; backdrop-filter: blur(12px); border: 1px solid ${colors.border}; border-radius: 12px; padding: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: 200px; display: none; } #focus-mode-settings.open { display: block; animation: slideDown 0.2s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .focus-mode-option { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; margin-bottom: 4px; } .focus-mode-option:last-child { margin-bottom: 0; } .focus-mode-option:hover { background: ${colors.hover}; } .focus-mode-checkbox { width: 16px; height: 16px; border: 2px solid ${colors.border}; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; flex-shrink: 0; } .focus-mode-checkbox.checked { background: rgb(29, 155, 240); border-color: rgb(29, 155, 240); } .focus-mode-checkbox svg { width: 12px; height: 12px; fill: white; opacity: 0; transition: opacity 0.15s ease; } .focus-mode-checkbox.checked svg { opacity: 1; } .focus-mode-option-label { color: ${colors.text}; font-size: 13px; user-select: none; } /* CRITICAL FIX: Keep sidebars invisible but preserve their space in the layout */ /* This prevents content from shifting when sidebars are hidden */ body.hide-left-sidebar header[role="banner"] { visibility: hidden !important; pointer-events: none !important; } body.hide-right-sidebar [data-testid="sidebarColumn"] { visibility: hidden !important; pointer-events: none !important; } /* Smooth transitions */ header[role="banner"], [data-testid="sidebarColumn"], [data-testid="primaryColumn"] { transition: opacity 0.2s ease, transform 0.2s ease, margin 0.2s ease, width 0.2s ease; } `); } // Create the widget function createWidget() { const widget = document.createElement('div'); widget.id = 'focus-mode-widget'; widget.innerHTML = ` Focus Mode `; document.body.appendChild(widget); // Create settings panel const settings = document.createElement('div'); settings.id = 'focus-mode-settings'; settings.innerHTML = `

Hide Left Sidebar

Hide Right Sidebar

`; document.body.appendChild(settings); // Add event listeners const settingsBtn = document.getElementById('focus-settings-btn'); const leftOption = settings.querySelector('[data-toggle="left"]'); const rightOption = settings.querySelector('[data-toggle="right"]'); // Click anywhere in the widget to toggle settings widget.addEventListener('click', (e) => { // Prevent closing when clicking inside settings panel if (settings.contains(e.target)) { return; } state.settingsOpen = !state.settingsOpen; settings.classList.toggle('open', state.settingsOpen); }); leftOption.addEventListener('click', () => { toggleSidebar('left'); updateCheckboxes(); }); rightOption.addEventListener('click', () => { toggleSidebar('right'); updateCheckboxes(); }); // Close settings when clicking outside document.addEventListener('click', (e) => { if (!widget.contains(e.target) && !settings.contains(e.target)) { state.settingsOpen = false; settings.classList.remove('open'); } }); } // Update checkbox states function updateCheckboxes() { const leftCheckbox = document.querySelector('[data-toggle="left"] .focus-mode-checkbox'); const rightCheckbox = document.querySelector('[data-toggle="right"] .focus-mode-checkbox'); if (leftCheckbox) { leftCheckbox.classList.toggle('checked', state.leftSidebarHidden); } if (rightCheckbox) { rightCheckbox.classList.toggle('checked', state.rightSidebarHidden); } } // Toggle sidebar visibility function toggleSidebar(side) { if (side === 'left' || side === 'both') { state.leftSidebarHidden = !state.leftSidebarHidden; document.body.classList.toggle('hide-left-sidebar', state.leftSidebarHidden); } if (side === 'right' || side === 'both') { state.rightSidebarHidden = !state.rightSidebarHidden; document.body.classList.toggle('hide-right-sidebar', state.rightSidebarHidden); } saveState(); } // Apply saved state function applyState() { if (state.leftSidebarHidden) { document.body.classList.add('hide-left-sidebar'); } if (state.rightSidebarHidden) { document.body.classList.add('hide-right-sidebar'); } } // Initialize function init() { loadState(); addStyles(); applyState(); // Wait for page to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', createWidget); } else { createWidget(); } // Watch for theme changes const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') { // Re-add styles with new theme colors addStyles(); } }); }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); } init(); })();