ChatGPT UI Cleaner

1// ==UserScript==
2// @name		ChatGPT UI Cleaner
3// @description		Clean up ChatGPT interface by hiding/showing sidebar, header, and other UI elements
4// @version		1.0.1
5// @match		https://*.chatgpt.com/*
6// @icon		https://cdn.oaistatic.com/assets/favicon-l4nq08hd.svg
7// ==/UserScript==
8(function() {
9    'use strict';
10
11    console.log('ChatGPT UI Cleaner initialized');
12
13    // State management
14    let uiState = {
15        sidebarHidden: false,
16        headerHidden: false,
17        footerHidden: false
18    };
19
20    // Load saved state
21    async function loadState() {
22        const savedState = await GM.getValue('uiCleanerState', null);
23        if (savedState) {
24            uiState = JSON.parse(savedState);
25            console.log('Loaded UI state:', uiState);
26        }
27    }
28
29    // Save state
30    async function saveState() {
31        await GM.setValue('uiCleanerState', JSON.stringify(uiState));
32        console.log('Saved UI state:', uiState);
33    }
34
35    // Apply UI changes
36    function applyUIChanges() {
37        // Hide/show sidebar
38        const sidebar = document.querySelector('div[id="stage-slideover-sidebar"]');
39        if (sidebar) {
40            sidebar.style.display = uiState.sidebarHidden ? 'none' : '';
41        }
42
43        // Hide/show header
44        const header = document.querySelector('header[id="page-header"]');
45        if (header) {
46            header.style.display = uiState.headerHidden ? 'none' : '';
47        }
48
49        // Hide/show footer (profile section)
50        const footer = document.querySelector('div.sticky.bottom-0');
51        if (footer) {
52            footer.style.display = uiState.footerHidden ? 'none' : '';
53        }
54
55        // Adjust main content area when sidebar is hidden
56        const mainContent = document.querySelector('main');
57        if (mainContent && uiState.sidebarHidden) {
58            mainContent.style.marginLeft = '0';
59        } else if (mainContent) {
60            mainContent.style.marginLeft = '';
61        }
62    }
63
64    // Create control panel
65    function createControlPanel() {
66        const panel = document.createElement('div');
67        panel.id = 'ui-cleaner-panel';
68        panel.innerHTML = `
69            <div style="display: flex; flex-direction: column; gap: 8px;">
70                <div style="font-weight: 600; margin-bottom: 4px; color: #fff;">UI Cleaner</div>
71                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: #fff;">
72                    <input type="checkbox" id="toggle-sidebar" ${uiState.sidebarHidden ? 'checked' : ''}>
73                    <span>Hide Sidebar</span>
74                </label>
75                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: #fff;">
76                    <input type="checkbox" id="toggle-header" ${uiState.headerHidden ? 'checked' : ''}>
77                    <span>Hide Header</span>
78                </label>
79                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: #fff;">
80                    <input type="checkbox" id="toggle-footer" ${uiState.footerHidden ? 'checked' : ''}>
81                    <span>Hide Footer</span>
82                </label>
83            </div>
84        `;
85
86        TM_addStyle(`
87            #ui-cleaner-panel {
88                position: fixed;
89                top: 20px;
90                right: 20px;
91                background: rgba(0, 0, 0, 0.85);
92                backdrop-filter: blur(10px);
93                padding: 16px;
94                border-radius: 12px;
95                z-index: 10000;
96                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
97                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
98                font-size: 14px;
99                min-width: 200px;
100            }
101
102            #ui-cleaner-panel input[type="checkbox"] {
103                width: 16px;
104                height: 16px;
105                cursor: pointer;
106            }
107
108            #ui-cleaner-panel label:hover {
109                opacity: 0.8;
110            }
111        `);
112
113        document.body.appendChild(panel);
114
115        // Add event listeners
116        document.getElementById('toggle-sidebar').addEventListener('change', async (e) => {
117            uiState.sidebarHidden = e.target.checked;
118            await saveState();
119            applyUIChanges();
120        });
121
122        document.getElementById('toggle-header').addEventListener('change', async (e) => {
123            uiState.headerHidden = e.target.checked;
124            await saveState();
125            applyUIChanges();
126        });
127
128        document.getElementById('toggle-footer').addEventListener('change', async (e) => {
129            uiState.footerHidden = e.target.checked;
130            await saveState();
131            applyUIChanges();
132        });
133
134        console.log('Control panel created');
135    }
136
137    // Observe DOM changes to reapply settings
138    function observeDOM() {
139        const observer = new MutationObserver(() => {
140            applyUIChanges();
141        });
142
143        observer.observe(document.body, {
144            childList: true,
145            subtree: true
146        });
147    }
148
149    // Initialize
150    async function init() {
151        await loadState();
152        
153        // Wait for page to be ready
154        if (document.readyState === 'loading') {
155            document.addEventListener('DOMContentLoaded', () => {
156                setTimeout(() => {
157                    createControlPanel();
158                    applyUIChanges();
159                    observeDOM();
160                }, 1000);
161            });
162        } else {
163            setTimeout(() => {
164                createControlPanel();
165                applyUIChanges();
166                observeDOM();
167            }, 1000);
168        }
169    }
170
171    init();
172})();