Adds folders with a settings menu to the Google Gemini sidebar to organize conversations.
// ==UserScript== // @name Gemini Conversation Folders // @namespace http://tampermonkey.net/ // @version 1.0 // @description Adds folders with a settings menu to the Google Gemini sidebar to organize conversations. // @author T. Berkeley Goodloe // @match https://gemini.google.com/app* // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @grant GM_deleteValue // @require https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js // @license none // ==/UserScript== // ----------------------------------------------------------------------------- // Script: Gemini Conversation Folders // Author: T. Berkeley Goodloe // Created: 2025-08-07 // Version: 1.0 // Contact: [email protected] // Description: Sidebar folders for Google Gemini conversations. // Adds an inline “Folders ＋ ⚙︎” header. // // ⚙︎ gear menu actions: // • Copy Debug Code → copies a JSON snapshot to the clipboard containing: // – storedFolders (array of folder objects) // – storedConversationFolders (map of conversation‑id → folder‑id) // – domFolders (ids currently in each folder element) // – domOrphans (ids still loose in the main list) // • Reset Folder Data → deletes Tampermonkey keys “gemini_folders” & // “gemini_convo_folders” and reloads the page, returning you to a // fresh empty state. // ----------------------------------------------------------------------------- (function() { 'use strict'; // --- SELECTORS --- const CHAT_ITEM_SELECTOR = 'div[data-test-id="conversation"]'; const CHAT_CONTAINER_SELECTOR = '.conversation-items-container'; const CHAT_LIST_CONTAINER_SELECTOR = 'conversations-list .conversations-container'; const INJECTION_POINT_SELECTOR = 'div.chat-history-list'; // --- STYLES --- GM_addStyle(` #folder-ui-container { padding: 0 8px; } #folder-container { padding-bottom: 8px; border-bottom: 1px solid var(--surface-3); } .folder { margin-bottom: 5px; border-radius: 8px; overflow: hidden; } .folder-header { display: flex; align-items: center; padding: 10px; cursor: pointer; background-color: var(--surface-2); position: relative; } .folder-header:hover { background-color: var(--surface-3); } .folder-color-indicator { width: 8px; height: 20px; border-radius: 4px; margin-right: 10px; flex-shrink: 0; } .folder-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Roboto', Arial, sans-serif !important; } .folder-controls { display: flex; align-items: center; margin-left: 5px; } .folder-toggle-icon { transition: transform 0.2s; } .folder.closed .folder-toggle-icon { transform: rotate(-90deg); } .folder-options-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 2px 4px; border-radius: 4px; margin-left: 4px; font-size: 1.2em; line-height: 1; } .folder-options-btn:hover { background-color: rgba(255,255,255,0.1); } .folder-content { max-height: 500px; overflow-y: auto; transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; background-color: var(--surface-1); } .folder.closed .folder-content { max-height: 0; padding-top: 0; padding-bottom: 0; } #add-folder-btn { width: 100%; margin: 8px 0; padding: 10px; border: none; background-color: var(--primary-surface); color: var(--on-primary-surface); border-radius: 8px; cursor: pointer; font-weight: 500; } #add-folder-btn:hover { opacity: 0.9; } .sortable-ghost { opacity: 0.4; background: var(--primary-surface-hover); } .conversation-items-container { cursor: grab; } .folder-context-menu { position: absolute; z-index: 10000; background-color: #333333; border: 1px solid var(--surface-4); border-radius: 8px; padding: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: none; } .folder-context-menu-item { padding: 8px 12px; cursor: pointer; border-radius: 4px; white-space: nowrap; font-family: 'Roboto', Arial, sans-serif !important; color: #FFFFFF; } .folder-context-menu-item:hover { background-color: var(--surface-4); } .folder-context-menu-item.delete { color: #DB4437; } /* ---- Color-picker ---- */ .color-picker-dialog .color-swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; /* for the ring ::after */ } .color-picker-dialog .color-swatch:hover { border: 2px solid var(--on-primary-surface); } .color-picker-dialog .color-swatch.selected { border: 2px solid transparent; /* remove hover border */ } .color-picker-dialog .color-swatch.selected::after { content: ""; position: absolute; inset: 0; border: 3px solid #fff; /* ring color / thickness */ border-radius: 50%; box-sizing: border-box; pointer-events: none; } /* ─── Header row ─────────────────── */ #folders-header{ display:flex;align-items:center;margin:8px 0 12px; font-family:'Roboto', Arial, sans-serif; } .fh-title { font-weight:600; } .fh-spacer { flex:1; } #fh-add,#fh-gear{ background:none;border:none;color:inherit; font-size:18px;cursor:pointer;margin-left:6px; width:28px;height:28px;display:flex;align-items:center;justify-content:center; border-radius:4px; } #fh-add:hover,#fh-gear:hover{ background:rgba(255,255,255,.1); } /* ─── Gear pop-over ───────────────── */ #folder-tools-pop{ position:absolute;z-index:9999; background:#333;border:1px solid var(--surface-4); border-radius:8px;padding:6px;box-shadow:0 4px 10px rgba(0,0,0,.3); } #folder-tools-pop .tools-item{ display:block;width:100%;text-align:left; background:none;border:none;color:#fff; padding:8px 14px;cursor:pointer;border-radius:6px; font-family:'Roboto', Arial, sans-serif;font-size:14px; } #folder-tools-pop .tools-item:hover{ background:var(--surface-4); } #reset-data-btn { position: fixed; bottom: 15px; right: 15px; z-index: 9999; background-color: #DB4437; color: white; border: none; border-radius: 8px; padding: 10px 15px; font-family: 'Roboto', Arial, sans-serif; font-size: 14px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .custom-dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 34, 34, 0.75); z-index: 20000; display: flex; align-items: center; justify-content: center; } .custom-dialog-box { background-color: #333333; padding: 25px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; max-width: 400px; border: 1px solid var(--surface-4); } .custom-dialog-box p, .custom-dialog-box h2 { margin: 0 0 20px; font-family: 'Roboto', Arial, sans-serif; color: #FFFFFF; } .custom-dialog-btn { border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-weight: 500; margin: 0 10px; } .dialog-btn-confirm { background-color: #8ab4f8; color: #202124; } .dialog-btn-delete { background-color: #DB4437; color: white; } .dialog-btn-cancel { background-color: var(--surface-4); color: var(--on-surface); } .custom-dialog-input { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid var(--surface-4); background-color: var(--surface-1); color: var(--on-surface); font-size: 16px; margin-bottom: 20px; } .color-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; } `); // --- STATE MANAGEMENT --- let folders = []; let conversationFolders = {}; let chatItemCache = new Map(); const FOLDER_COLORS = ['#370000', '#0D3800', '#001B38', '#383200', '#380031', '#7DAC89', '#7A82AF', '#AC7D98', '#7AA7AF', '#9CA881']; async function loadData() { folders = await GM_getValue('gemini_folders', []); conversationFolders = await GM_getValue('gemini_convo_folders', {}); } async function saveData() { await GM_setValue('gemini_folders', folders); await GM_setValue('gemini_convo_folders', conversationFolders); } // ─── UNIQUE-ID DETECTION ───────────────────────────────────────── function getIdentifierFromElement(el) { if (!el) return null; // If we were handed the container, drill down once to the conversation div if (el.matches('.conversation-items-container')) { el = el.querySelector('[data-test-id="conversation"]') || el; } /* 1. New URL-style id ( /conversation/<id> ) */ const anchor = el.closest('a'); if (anchor) { const href = anchor.getAttribute('href') || ''; const m = href.match(/\/conversation\/([A-Za-z0-9_-]+)/); if (m) return m[1]; } /* 2. jslog metadata ( c_<id> ) */ const jslog = el.getAttribute('jslog') || ''; let m = jslog.match(/"c_([A-Za-z0-9_-]+)"/); // within quotes if (!m) m = jslog.match(/c_([A-Za-z0-9_-]+)/); // bare if (m) return m[1]; /* 3. Fallback to visible title text (last resort) */ const t = el.querySelector('.conversation-title'); if (t) return `title:${t.textContent.trim()}`; /* 4. Couldn’t identify – log once per element */ console.warn('[Gemini Folders] Could not find ID for element:', el); return null; } // --- UI RENDERING --- function renderFolders() { const container = document.getElementById('folder-container'); if (!container) return; while (container.firstChild) container.removeChild(container.firstChild); folders.forEach(folder => { const folderEl = document.createElement('div'); folderEl.className = 'folder'; folderEl.dataset.folderId = folder.id; if (folder.isClosed) folderEl.classList.add('closed'); const headerEl = document.createElement('div'); headerEl.className = 'folder-header'; headerEl.addEventListener('click', (e) => { if (!e.target.closest('.folder-options-btn')) toggleFolder(folder.id); }); const colorIndicator = document.createElement('div'); colorIndicator.className = 'folder-color-indicator'; colorIndicator.style.backgroundColor = folder.color; const nameEl = document.createElement('span'); nameEl.className = 'folder-name'; nameEl.textContent = folder.name; const controlsEl = document.createElement('div'); controlsEl.className = 'folder-controls'; const toggleIcon = document.createElement('span'); toggleIcon.className = 'folder-toggle-icon'; toggleIcon.textContent = '▼'; const optionsBtn = document.createElement('button'); optionsBtn.className = 'folder-options-btn'; optionsBtn.textContent = '⋮'; optionsBtn.addEventListener('click', (e) => showContextMenu(e, folder.id)); controlsEl.appendChild(toggleIcon); controlsEl.appendChild(optionsBtn); headerEl.appendChild(colorIndicator); headerEl.appendChild(nameEl); headerEl.appendChild(controlsEl); const contentEl = document.createElement('div'); contentEl.className = 'folder-content'; folderEl.appendChild(headerEl); folderEl.appendChild(contentEl); container.appendChild(folderEl); }); organizeConversations(); setupDragAndDrop(); } // --- FIXED FUNCTION: This is where the magic happens --- function organizeConversations() { const chatListContainer = document.querySelector(CHAT_LIST_CONTAINER_SELECTOR); if (!chatListContainer) return; const folderIds = new Set(folders.map(f => f.id)); let dataWasCorrected = false; // Only move orphaned chats back to main (not ALL chats!) document.querySelectorAll('.folder-content ' + CHAT_CONTAINER_SELECTOR).forEach(item => { const convoEl = item.querySelector(CHAT_ITEM_SELECTOR); const identifier = getIdentifierFromElement(convoEl); // Only move if chat shouldn't be in any folder if (!identifier || !conversationFolders[identifier] || !folderIds.has(conversationFolders[identifier])) { chatListContainer.appendChild(item); } }); // Process chats in main container and assign to folders Array.from(chatListContainer.children).forEach(itemToMove => { const convoEl = itemToMove.querySelector(CHAT_ITEM_SELECTOR); const identifier = getIdentifierFromElement(convoEl); if (!identifier) return; let folderId = conversationFolders[identifier]; // Clean up references to deleted folders if (folderId && !folderIds.has(folderId)) { delete conversationFolders[identifier]; folderId = null; dataWasCorrected = true; } // Move to appropriate folder if (folderId) { const folderContent = document.querySelector(`.folder[data-folder-id="${folderId}"] .folder-content`); if (folderContent && !folderContent.contains(itemToMove)) { folderContent.appendChild(itemToMove); } } }); if (dataWasCorrected) saveData(); } // --- FOLDER ACTIONS --- function createNewFolder() { showCustomPromptDialog("Enter New Folder Name", "", "Create", (name) => { if (name) { const newFolder = { id: `folder_${Date.now()}`, name, color: '#808080', isClosed: false }; folders.push(newFolder); saveData().then(renderFolders); } }); } // === patch-only: updates an existing folder header in place === function updateFolderHeader(folderId) { const folder = folders.find(f => f.id === folderId); const folderEl = document.querySelector(`.folder[data-folder-id="${folderId}"]`); if (!folder || !folderEl) return; folderEl.querySelector('.folder-name').textContent = folder.name; folderEl.querySelector('.folder-color-indicator').style.backgroundColor = folder.color; } function renameFolder(folderId) { const folder = folders.find(f => f.id === folderId); if (!folder) return; showCustomPromptDialog("Rename Folder", folder.name, "Save", (newName) => { if (newName && newName !== folder.name) { folder.name = newName; saveData().then(() => updateFolderHeader(folderId)); } }); } async function deleteFolder(folderId) { Object.keys(conversationFolders).forEach(id => { if (conversationFolders[id] === folderId) delete conversationFolders[id]; }); folders = folders.filter(f => f.id !== folderId); await saveData(); renderFolders(); } function toggleFolder(folderId) { const folder = folders.find(f => f.id === folderId); if (folder) { folder.isClosed = !folder.isClosed; const folderEl = document.querySelector(`.folder[data-folder-id="${folderId}"]`); if (folderEl) folderEl.classList.toggle('closed'); saveData(); } } // --- CONTEXT MENU & DIALOGS --- function showContextMenu(event, folderId) { event.preventDefault(); event.stopPropagation(); closeContextMenu(); const btn = event.currentTarget; const rect = btn.getBoundingClientRect(); const menu = document.createElement('div'); menu.className = 'folder-context-menu'; menu.id = 'folder-context-menu-active'; const items = { 'Rename': () => renameFolder(folderId), 'Change Color': () => showColorPickerDialog(folderId), 'Delete Folder': () => showConfirmationDialog("Are you sure you want to delete this folder?", () => deleteFolder(folderId), "Delete", "dialog-btn-delete") }; for (const [text, action] of Object.entries(items)) { const itemEl = document.createElement('div'); itemEl.className = 'folder-context-menu-item'; if (text === 'Delete Folder') itemEl.classList.add('delete'); itemEl.textContent = text; itemEl.onclick = (e) => { e.stopPropagation(); closeContextMenu(); action(e); }; menu.appendChild(itemEl); } document.body.appendChild(menu); menu.style.display = 'block'; menu.style.top = `${rect.bottom + window.scrollY}px`; menu.style.left = `${rect.right + window.scrollX - menu.offsetWidth}px`; setTimeout(() => document.addEventListener('click', closeContextMenu, { once: true }), 0); } function closeContextMenu() { const menu = document.getElementById('folder-context-menu-active'); if (menu) menu.remove(); } function showColorPickerDialog(folderId) { const folder = folders.find(f => f.id === folderId); if (!folder) return; const overlay = document.createElement('div'); overlay.className = 'custom-dialog-overlay'; const dialogBox = document.createElement('div'); dialogBox.className = 'custom-dialog-box color-picker-dialog'; const titleH2 = document.createElement('h2'); titleH2.textContent = 'Change Folder Color'; const grid = document.createElement('div'); grid.className = 'color-picker-grid'; let selectedColor = folder.color; FOLDER_COLORS.forEach(color => { const swatch = document.createElement('div'); swatch.className = 'color-swatch'; if (color.toLowerCase() === selectedColor.toLowerCase()) swatch.classList.add('selected'); swatch.style.backgroundColor = color; swatch.onclick = () => { selectedColor = color; hexInput.value = color; grid.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected')); swatch.classList.add('selected'); }; grid.appendChild(swatch); }); const hexInput = document.createElement('input'); hexInput.className = 'custom-dialog-input'; hexInput.type = 'text'; hexInput.placeholder = 'Or enter a hex value, e.g. #C0FFEE'; hexInput.value = selectedColor; const btnYes = document.createElement('button'); btnYes.className = 'custom-dialog-btn dialog-btn-confirm'; btnYes.textContent = 'Save'; const btnNo = document.createElement('button'); btnNo.className = 'custom-dialog-btn dialog-btn-cancel'; btnNo.textContent = 'Cancel'; dialogBox.appendChild(titleH2); dialogBox.appendChild(grid); dialogBox.appendChild(hexInput); dialogBox.appendChild(btnYes); dialogBox.appendChild(btnNo); overlay.appendChild(dialogBox); document.body.appendChild(overlay); btnYes.onclick = () => { const newColor = hexInput.value.trim(); if (/^#[0-9A-F]{6}$/i.test(newColor)) { folder.color = newColor; saveData().then(() => updateFolderHeader(folderId)); overlay.remove(); } else { hexInput.style.border = "1px solid red"; hexInput.value = "Invalid Hex Code"; setTimeout(() => { hexInput.style.border = ""; hexInput.value = selectedColor; }, 2000); } }; btnNo.onclick = () => { overlay.remove(); }; } function showConfirmationDialog(message, onConfirm, confirmText = "Confirm", confirmClass = "dialog-btn-confirm") { const overlay = document.createElement('div'); overlay.className = 'custom-dialog-overlay'; const dialogBox = document.createElement('div'); dialogBox.className = 'custom-dialog-box'; const messageP = document.createElement('p'); messageP.textContent = message; const btnYes = document.createElement('button'); btnYes.className = `custom-dialog-btn ${confirmClass}`; btnYes.textContent = confirmText; const btnNo = document.createElement('button'); btnNo.className = 'custom-dialog-btn dialog-btn-cancel'; btnNo.textContent = 'Cancel'; dialogBox.appendChild(messageP); dialogBox.appendChild(btnYes); dialogBox.appendChild(btnNo); overlay.appendChild(dialogBox); document.body.appendChild(overlay); btnYes.onclick = () => { onConfirm(); overlay.remove(); }; btnNo.onclick = () => { overlay.remove(); }; } function showCustomPromptDialog(title, defaultValue, confirmText, onConfirm) { const overlay = document.createElement('div'); overlay.className = 'custom-dialog-overlay'; const dialogBox = document.createElement('div'); dialogBox.className = 'custom-dialog-box'; const titleH2 = document.createElement('h2'); titleH2.textContent = title; const input = document.createElement('input'); input.className = 'custom-dialog-input'; input.type = 'text'; input.value = defaultValue; const btnYes = document.createElement('button'); btnYes.className = 'custom-dialog-btn dialog-btn-confirm'; btnYes.textContent = confirmText; const btnNo = document.createElement('button'); btnNo.className = 'custom-dialog-btn dialog-btn-cancel'; btnNo.textContent = 'Cancel'; dialogBox.appendChild(titleH2); dialogBox.appendChild(input); dialogBox.appendChild(btnYes); dialogBox.appendChild(btnNo); overlay.appendChild(dialogBox); document.body.appendChild(overlay); input.focus(); input.select(); btnYes.onclick = () => { onConfirm(input.value); overlay.remove(); }; btnNo.onclick = () => { overlay.remove(); }; input.onkeydown = (e) => { if (e.key === 'Enter') btnYes.click(); }; } // --- DRAG AND DROP --- function setupDragAndDrop() { const chatListContainer = document.querySelector(CHAT_LIST_CONTAINER_SELECTOR); if (!chatListContainer) return; new Sortable(chatListContainer, { group: 'shared', animation: 150, onEnd: function() { rebuildAndSaveState(); }, }); document.querySelectorAll('.folder-content').forEach(folderContentEl => { new Sortable(folderContentEl, { group: 'shared', animation: 150, onEnd: function() { rebuildAndSaveState(); }, }); }); } function rebuildAndSaveState() { const newConversationFolders = {}; document.querySelectorAll('.folder').forEach(folderEl => { const folderId = folderEl.dataset.folderId; folderEl.querySelectorAll(CHAT_CONTAINER_SELECTOR).forEach(item => { const id = getIdentifierFromElement(item.querySelector(CHAT_ITEM_SELECTOR)); if (id) { newConversationFolders[id] = folderId; } }); }); conversationFolders = newConversationFolders; saveData(); } // --- INITIALIZATION --- function initialize() { const injectionPoint = document.querySelector(INJECTION_POINT_SELECTOR); if (!injectionPoint) return false; if (chatItemCache.size === 0) { const chats = document.querySelectorAll(CHAT_CONTAINER_SELECTOR); if (chats.length > 0) { chats.forEach(chat => { const id = getIdentifierFromElement(chat.querySelector(CHAT_ITEM_SELECTOR)); if (id) chatItemCache.set(id, chat); }); } } if (document.getElementById('folder-ui-container')) { organizeConversations(); return true; } const uiContainer = document.createElement('div'); uiContainer.id = 'folder-ui-container'; const addButton = document.createElement('button'); addButton.id = 'add-folder-btn'; addButton.textContent = '＋ New Folder'; addButton.onclick = createNewFolder; const folderContainer = document.createElement('div'); folderContainer.id = 'folder-container'; uiContainer.appendChild(addButton); uiContainer.appendChild(folderContainer); injectionPoint.prepend(uiContainer); renderFolders(); return true; } // --- MAIN EXECUTION --- loadData().then(() => { const initInterval = setInterval(() => { if (initialize()) { clearInterval(initInterval); } }, 500); }); // --- OPTIONAL RESET BUTTON --- function addResetButton() { if (document.getElementById('reset-data-btn')) return; const resetButton = document.createElement('button'); resetButton.id = 'reset-data-btn'; resetButton.textContent = 'Reset Folder Data'; resetButton.onclick = () => { showConfirmationDialog('Are you sure you want to delete all folder data? This cannot be undone.', () => { GM_deleteValue('gemini_folders'); GM_deleteValue('gemini_convo_folders'); location.reload(); }, 'Reset', 'dialog-btn-delete'); }; document.body.appendChild(resetButton); } addResetButton(); // --- END OPTIONAL RESET BUTTON --- /****************************************************************** * DEBUG INSTRUMENTATION – add right above the final “})();” ******************************************************************/ // ---- Clipboard helper (works in all modern browsers) ---------- async function copyTextToClipboard(text) { try { await navigator.clipboard.writeText(text); console.info('[Gemini Folder Debug] Copied to clipboard'); } catch (err) { console.warn('[Gemini Folder Debug] Clipboard write failed:', err); } } // ---- Collect full runtime + DOM state ------------------------- function collectDebugState() { const stateSnapshot = { storedFolders: folders, // what’s in memory storedConversationFolders: conversationFolders, domFolders: {}, // what’s actually in the DOM domOrphans: [] // chats not in any folder }; // Map DOM placements document.querySelectorAll('.folder').forEach(folderEl => { const folderId = folderEl.dataset.folderId; stateSnapshot.domFolders[folderId] = []; folderEl.querySelectorAll('div[data-test-id="conversation"]').forEach(chatEl => { const id = getIdentifierFromElement(chatEl); if (id) stateSnapshot.domFolders[folderId].push(id); }); }); // Chats still living in the main container const mainContainer = document.querySelector(CHAT_LIST_CONTAINER_SELECTOR); if (mainContainer) { mainContainer.querySelectorAll('div[data-test-id="conversation"]').forEach(chatEl => { const id = getIdentifierFromElement(chatEl); if (id) stateSnapshot.domOrphans.push(id); }); } return stateSnapshot; } // ---- Add floating button to UI -------------------------------- function addDebugButton() { if (document.getElementById('gemini-folder-debug-btn')) return; const btn = document.createElement('button'); btn.id = 'gemini-folder-debug-btn'; btn.textContent = '🩺 Copy Debug Info'; Object.assign(btn.style, { position: 'fixed', bottom: '15px', left: '15px', zIndex: 10000, padding: '8px 12px', fontSize: '13px', background: '#d32f2f', color: '#fff', border: '2px solid #fff', borderRadius: '6px', cursor: 'pointer' }); btn.onclick = async () => { const snapshot = collectDebugState(); const json = JSON.stringify(snapshot, null, 2); console.log('%c[Gemini Folder Debug] Snapshot below:', 'color:#d32f2f;font-weight:bold;'); console.log(json); await copyTextToClipboard(json); btn.textContent = '✅ Copied!'; setTimeout(() => { btn.textContent = '🩺 Copy Debug Info'; }, 2000); }; document.body.appendChild(btn); } // run once UI is present const debugInitInterval = setInterval(() => { if (document.querySelector(INJECTION_POINT_SELECTOR)) { addDebugButton(); clearInterval(debugInitInterval); } }, 600); /****************************************************************** * END DEBUG INSTRUMENTATION ******************************************************************/ /****************************************************************** * Header row (Folders ＋ ⚙︎) – added without disturbing core * ******************************************************************/ (function addHeaderOnce () { // Wait until the original UI container exists const check = setInterval(() => { const ui = document.querySelector('#folder-ui-container'); const add = ui?.querySelector('button, input[value="+ New Folder"]'); // old add-folder button if (!ui || !add) return; clearInterval(check); /* Hide the old UI bits ------------------------------------ */ add.style.display = 'none'; // old “+ New Folder” button document.querySelectorAll('.debug-btn, .reset-btn') .forEach(btn => btn.style.display = 'none'); // bottom red buttons /* Build header row --------------------------------------- */ const header = document.createElement('div'); header.id = 'folders-header-inline'; header.style.cssText = 'display:flex;align-items:center;margin:8px 0 12px;font-family:Roboto,Arial,sans-serif;'; const title = Object.assign(document.createElement('span'), { textContent: 'Folders', style: 'font-weight:600;' }); const spacer = Object.assign(document.createElement('span'), { style: 'flex:1;' }); const btnCSS = 'background:none;border:none;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;'; const plus = Object.assign(document.createElement('button'), { textContent:'＋', title:'New Folder', style:btnCSS }); const gear = Object.assign(document.createElement('button'), { textContent:'⚙︎', title:'Tools', style:btnCSS }); /* Re-use the existing functions already in the page */ plus.onclick = () => add.click(); // create-folder dialog gear.onclick = showToolsPop; // small pop-over header.append(title, spacer, plus, gear); ui.prepend(header); /* ---------- tiny pop-over ---------- */ function showToolsPop (e) { e.stopPropagation(); const old = document.getElementById('folder-tools-pop-inline'); if (old) return old.remove(); const pop = document.createElement('div'); pop.id = 'folder-tools-pop-inline'; pop.style.cssText = 'position:absolute;z-index:10000;background:#333;color:#fff;border:1px solid #555;border-radius:8px;padding:6px;font:14px Roboto,Arial;'; const { bottom, right } = e.currentTarget.getBoundingClientRect(); pop.style.top = `${bottom + window.scrollY}px`; pop.style.left = `${right + window.scrollX - 150}px`; pop.style.minWidth = '150px'; const item = (txt, fn) => { const b = Object.assign(document.createElement('button'), { textContent:txt }); b.style.cssText = 'display:block;width:100%;background:none;border:none;color:#fff;padding:8px 14px;text-align:left;border-radius:6px;cursor:pointer;'; b.onmouseover = () => b.style.background = '#555'; b.onmouseout = () => b.style.background = ''; b.onclick = fn; pop.appendChild(b); }; item('Copy Debug Code', async () => { if (window.collectDebugState && navigator.clipboard) await navigator.clipboard.writeText(JSON.stringify(window.collectDebugState(), null, 2)); pop.remove(); }); item('Reset Folder Data', () => { if (confirm('Delete all folder data?')) { GM_deleteValue('gemini_folders'); GM_deleteValue('gemini_convo_folders'); location.reload(); } }); document.body.appendChild(pop); setTimeout(() => document.addEventListener('click', () => pop.remove(), { once:true }), 0); } }, 300); })(); })();
