ttu-phone.tm.user.js

ttu-phone.tm.user.js

// ==UserScript==
// @name         TTU.app UI Enhancements (Final Stable)
// @namespace    http://tampermonkey.net/
// @version      9.1
// @description  A stable set of UI fixes for TTU.app, with improved compatibility for other extensions.
// @author       KanjiEater (updated by Gemini)
// @match        https://reader.ttsu.app/*
// @grant        GM_addStyle
// @run-at       document-idle
// @noframes
// ==/UserScript==

(function() {
    'use strict';

    // --- SECTION 1: INJECT CSS STYLES ---
    const allCustomStyles = `
        /*
         * SECTION A: E-INK STYLES (Optional)
        */
        span[class^="ttu-whispersync-line-highlight-"].active,
        span[class^="ttu-whispersync-line-highlight-"].menu-open {
            background: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important;
            text-decoration-line: underline !important; text-decoration-style: solid !important;
            text-decoration-thickness: 2px !important; text-decoration-color: #333 !important;
            text-underline-position: left !important; text-underline-offset: 4px !important;
        }
        rt span[class^="ttu-whispersync-line-highlight-"].active,
        rt span[class^="ttu-whispersync-line-highlight-"].menu-open {
            text-decoration: none !important;
        }
        #ttu-page-footer .animate-pulse {
            animation: none !important;
        }

        /*
         * SECTION B: LAYOUT & FOOTER ENHANCEMENTS
        */
        .book-content--writing-vertical-rl .main,
        .book-content--writing-vertical-rl .ttu-book-body-wrapper:not(:has(.main)) {
            padding-bottom: 35px !important;
            box-sizing: border-box !important;
        }
        #ttu-page-footer {
            height: auto !important;
            min-height: 70px !important;
            align-items: center !important;
            pointer-events: none !important; /* SAFE METHOD: Prevent background clicks from hiding footer */
        }
        
        /* Re-enable clicks for all interactive content inside the footer and its popups */
        #ttu-page-footer button,
        #ttu-page-footer div[role="button"],
        #ttu-page-footer .ttu-whispersync-container {
            pointer-events: auto !important;
        }

        #ttu-page-footer > div:first-child {
            flex-wrap: wrap !important;
            width: auto !important;
        }
        #ttu-page-footer button,
        #ttu-page-footer div[role="button"]:not([title="Click to copy Progress"]) {
            width: 66px !important; height: 66px !important;
            display: flex !important; align-items: center !important;
            justify-content: center !important; flex-shrink: 0;
            margin: 2px !important;
        }
        #ttu-page-footer svg {
            width: 2.2rem !important;
            height: 2.2rem !important;
        }
        #ttu-page-footer .ttu-whispersync-container button, 
        #ttu-page-footer .ttu-whispersync-container div[role="button"] {
            width: auto !important; height: auto !important;
            margin: 0 !important;
        }
        #ttu-page-footer .ttu-whispersync-container svg {
            width: 1.4rem !important;
            height: 1.4rem !important;
        }
        
        /*
         * SECTION C: WHISPERSYNC FLYOUT MENU FIX
        */
        .ttu-whispersync-container.side-menu .flex.items-center.w-full.m-t-b {
            display: flex !important;
            order: -1 !important;
            padding-bottom: 1rem;
            flex-wrap: wrap !important;
            justify-content: center !important;
        }

        /*
         * SECTION D: TRACKER PANEL BUTTONS
        */
        .mb-7 div[title='Toggle Tracker'],
        .mb-7 div[title='Update Position'],
        .mb-7 div[title='Toggle Freeze Position'] {
            width: 66px !important;
            height: 66px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .mb-7 div[title='Toggle Tracker'] svg,
        .mb-7 div[title='Update Position'] svg,
        .mb-7 div[title='Toggle Freeze Position'] svg {
            width: 2.2rem !important;
            height: 2.2rem !important;
        }

        /*
         * SECTION E: FLYOUT PLAYER CONTROLS
        */
        #ttu-page-footer .ttu-whispersync-container.side-menu .m-t-b button {
            width: 66px !important; 
            height: 66px !important;
            display: flex !important; 
            align-items: center !important;
            justify-content: center !important;
        }
        #ttu-page-footer .ttu-whispersync-container.side-menu .m-t-b button svg {
            width: 2.2rem !important;
            height: 2.2rem !important;
        }
    `;

    GM_addStyle(allCustomStyles);
    console.log('✅ TTU UI Enhancements: All styles injected successfully.');

    // --- JAVASCRIPT FIXES ---
    
    // Moves the "Book Manager" button to be visible on mobile
    const moveManagerButtonForMobile = () => {
        const topBar = document.querySelector('.elevation-4');
        if (!topBar) return;
        const managerButton = topBar.querySelector('div[role="button"][title="Go to Book Manager"]');
        const mobileMenuTrigger = topBar.querySelector('.flex.sm\\:hidden');
        if (managerButton && mobileMenuTrigger && managerButton.parentNode !== mobileMenuTrigger.parentNode) {
            mobileMenuTrigger.parentNode.insertBefore(managerButton, mobileMenuTrigger);
            console.log('✅ TTU UI Enhancements: "Book Manager" button (re)positioned.');
        }
    };
    
    // Moves the progress text element out of the footer to prevent layout conflicts
    const fixProgressTextPosition = () => {
        const progressText = document.querySelector('div[title="Click to copy Progress"]');
        if (progressText && progressText.parentElement.id === 'ttu-page-footer') {
            document.body.appendChild(progressText);
            console.log('✅ TTU UI Enhancements: Progress text position fixed.');
        }
    };

    // --- SCRIPT EXECUTION ---
    
    // This observer re-applies all JS fixes whenever the website changes its layout
    const runAllFixes = () => {
        moveManagerButtonForMobile();
        fixProgressTextPosition();
    };

    const observer = new MutationObserver(runAllFixes);
    observer.observe(document.body, { childList: true, subtree: true });
    
    setTimeout(runAllFixes, 500);

})();