User:MKH1020/HotCatWithTimeless.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/** This is a vibecoded set of Javascript that I originally put on my global.js to get HotCat to work with Skin:Timeless, it works but not ideally, now I am storing it here, probably will not use it if CoolCat works. **/

mw.loader.using(['mediawiki.util', 'user'], function () {
    if (mw.config.get('skin') !== 'timeless') return;

    var integrateHotCatToTimelessSidebar = function() {
        var $catlinks = $('#catlinks');
        var $sidebar = $('#mw-related-navigation');
        var isWideScreen = window.matchMedia('(min-width: 1100px)').matches;

        var isHotCatEnabled = mw.user.options.get('gadget-HotCat') === '1' || 
                              (window.HotCat || typeof window.hotcat_get_default_options === 'function');
        
        if (!isHotCatEnabled || !$catlinks.length) return;

        if (isWideScreen && $sidebar.length) {
            if ($('#timeless-sidebar-catlinks').length) return;

            // Remove native MediaWiki category portlet if it exists
            $sidebar.find('.sidebar-chunk:has(.mw-normal-catlinks)').remove();
            $('#p-categories').remove();

            var $box = $('<div>')
                .attr('id', 'timeless-sidebar-catlinks')
                .addClass('sidebar-chunk mw-portlet')
                .append(
                    $('<div>').addClass('sidebar-inner')
                    .append($('<h3>').text('Categories')) // Our clean header
                    .append($('<div>').addClass('mw-portlet-body').append($catlinks))
                );

            $sidebar.append($box);
            
            // Clean up the catlinks container
            $catlinks.css({
                'display': 'block', 'margin': '0', 'padding': '0', 
                'border': 'none', 'background': 'none'
            });

            setupInPlaceObserver();

            if (window.HotCat && typeof window.HotCat.setup === 'function') {
                window.HotCat.setup();
            }
        }
    };

    function setupInPlaceObserver() {
        var targetNode = document.getElementById('catlinks');
        if (!targetNode) return;

        var observer = new MutationObserver(function() {
            observer.disconnect();
            var $container = $(targetNode);

            // Clean up formatting
            $container.find('.hotcatlink a').each(function() {
                var htmlContent = $(this).html();
                if (htmlContent.indexOf('(') !== -1 || htmlContent.indexOf(')') !== -1) {
                    $(this).html(htmlContent.replace(/[\(\)]/g, ''));
                }
            });

            $container.find('.mw-normal-catlinks > a, .mw-normal-catlinks > span.hotcatlink > a').each(function() {
                var linkText = $(this).text().trim();
                if (linkText === 'edit' || linkText === '(±)' || linkText === '±') {
                    $(this).addClass('hotcat-absolute-cogwheel');
                }
            });

            var $addBtn = $container.find('a[title*="Add "], a[id*="hotcat_add"]').last();
            if ($addBtn.length && !$addBtn.hasClass('hotcat-absolute-pencil')) {
                $addBtn.addClass('hotcat-absolute-pencil').html('<span class="hotcat-pencil-icon"></span> Add category');
            }

            observer.observe(targetNode, { childList: true, subtree: true, characterData: true });
        });
        observer.observe(targetNode, { childList: true, subtree: true, characterData: true });
    }

    var sidebarCategoryStyles = `
        @media screen and (min-width: 1100px) {
            #timeless-sidebar-catlinks { 
                display: block !important; 
                margin-top: 15px !important; 
            }

            /* 1. Remove all headers and native labels */
            #timeless-sidebar-catlinks h3 { display: none !important; }
            #timeless-sidebar-catlinks .mw-normal-catlinks > a[title^="Special:Categories"] { display: none !important; }
            #timeless-sidebar-catlinks .mw-normal-catlinks .catlinks-editmsg { display: none !important; }

            /* 2. Reset list styles - ensure no stray borders */
            #timeless-sidebar-catlinks .mw-normal-catlinks ul {
                list-style: none !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
            }

            /* 3. Style only the FIRST list item to have the line */
            #timeless-sidebar-catlinks .mw-normal-catlinks li {
                list-style: none !important;
                padding: 0 0 4px 0 !important;
                margin: 0 !important;
                background: none !important;
                border: none !important; 
                font-size: 14px !important;
                line-height: 1.5 !important;
            }
            
            /* Apply the line ONLY to the first item */
            #timeless-sidebar-catlinks .mw-normal-catlinks li:first-child {
                border-top: 1.5px solid #a2a9b1 !important;
                padding-top: 8px !important; 
            }

            /* 4. Controls */
            #timeless-sidebar-catlinks a[title*="several"] { display: inline-block !important; margin-left: 5px !important; }
            
            #timeless-sidebar-catlinks a.hotcat-absolute-cogwheel {
                display: block !important;
                position: absolute !important;
                top: -5px !important; /* Adjusted for cleaner vertical alignment */
                right: 0px !important;
                width: 20px !important;
                height: 20px !important;
                font-size: 0 !important;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%2354595d" d="M18 10c0-.52-.05-1.03-.14-1.52l2.04-1.59-1.8-3.12-2.45.99c-.61-.55-1.31-1-2.09-1.32L13.2 1H9.6L9.16 3.46c-.78.32-1.48.77-2.09 1.32l-2.45-.99-1.8 3.12 2.04 1.59c-.09.49-.14 1-.14 1.52s.05 1.03.14 1.52l-2.04 1.59 1.8 3.12 2.45-.99c.61.55 1.31 1 2.09 1.32L9.6 19h3.6l.44-2.46c.78-.32 1.48-.77 2.09-1.32l2.45.99 1.8-3.12-2.04-1.59c.09-.49.14-1 .14-1.52zm-8 3c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>') !important;
                background-repeat: no-repeat !important;
            }
        }
    `;
    mw.util.addCSS(sidebarCategoryStyles);

    mw.hook('wikipage.content').add(integrateHotCatToTimelessSidebar);
    mw.hook('hotcat.initialized').add(integrateHotCatToTimelessSidebar);
});