☰

Tg Sort by reactions

Allows you to find posts with a lot of reactions (likes) in Telegram Web A.

// ==UserScript==
// @name         Tg Sort by reactions
// @name:ru      Tg Сортировка по реакциям
// @name:zh      Tg 按反应排序
// @version      0.1.5
// @description  Allows you to find posts with a lot of reactions (likes) in Telegram Web A.
// @description:ru Позволяет найти сообщения с наибольшим количеством реакций (лайков) в Телеграм Web A.
// @description:zh 允许您在电报 Web A 中找到有很多反应（喜欢）的消息。
// @author       sokollondon
// @match        https://web.telegram.org/a/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=telegram.org
// @require      http://code.jquery.com/jquery-3.3.1.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js
// @grant        none
// @license      MIT // <-- Лицензия добавлена здесь!
// @namespace    https://gist.github.com/sokollondon/4be0d13f33a371895308ed7b1dc15fcf
// ==/UserScript==

(function() {
    'use strict';

    // Ensure jQuery is loaded and available
    if (typeof jQuery === 'undefined') {
        console.error('Tg Sort by Reactions: jQuery is not loaded.');
        return;
    }

    const $ = jQuery.noConflict(true); // Use noConflict to avoid conflicts

    console.log('Tg Sort by Reactions: Script initialized.');

    // --- Styles for the Sort Button ---
    const style = `
        #tg-sort-reactions-btn {
            position: fixed;
            top: 73px;
            right: 16px;
            width: 45px;
            height: 45px;
            padding: 5px;
            border-radius: 10px;
            text-align: center;
            font-size: 20px;
            padding-top: 5px;
            z-index: 2000; /* Increased z-index to ensure visibility */
            opacity: 0.7;
            background: url(https://cdn0.iconfinder.com/data/icons/font-awesome-solid-vol-4/512/sort-amount-down-alt-64.png) no-repeat center center;
            background-size: 32px;
            background-color: var(--tg-theme-background-color, #fff); /* Use Telegram theme variable */
            border: 1px solid var(--tg-theme-border-color, #e0e0e0); /* Add border */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add subtle shadow */
            cursor: pointer;
            transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }
        #tg-sort-reactions-btn:hover {
            opacity: 1;
        }
        .theme-dark #tg-sort-reactions-btn {
            background-color: var(--tg-theme-dark-background-color, #a9a9a9); /* Dark theme adjustments */
            border-color: var(--tg-theme-dark-border-color, #606060);
        }
        @media screen and (max-width: 600px) {
            #tg-sort-reactions-btn {
                top: 111px;
                right: 8px;
            }
        }
    `;

    $('head').append('<style id="tg-sort-reactions-style">' + style + '</style>');

    // --- Create and Append the Sort Button ---
    const sortButtonHtml = "<div id='tg-sort-reactions-btn' title='Sort by reactions count'></div>";
    $('body').prepend(sortButtonHtml);
    console.log('Tg Sort by Reactions: Sort button added to DOM.');

    // --- Helper Function to Get Reaction Count ---
    function getReactionCount($messageElement) {
        // In Telegram Web A, reactions are typically in a div with role="button" inside a reaction container.
        // The count is often within a span or element with specific class.
        // Look for elements that represent reactions. Common classes might include:
        // .Reactions is from older webk. Now it's something like .reaction-button or a span.
        // The reaction counts are usually numeric text within a span.

        let totalReactions = 0;
        // Find reaction containers within the message bubble.
        // This selector targets the element that usually wraps all reaction buttons.
        // It's usually a div with a role="button" and aria-label containing the count.
        const $reactionContainer = $messageElement.find('[data-list="reactions-list"]');

        if ($reactionContainer.length) {
            // Find individual reaction buttons/spans within the container
            // The structure is often: <div class="reactions-box"> <button> 👍<span>23</span> </button> </div>
            // Or directly within elements with text content.
            $reactionContainer.find('span[class*="text"], div[aria-label$="reactions"]').each(function() {
                let text = $(this).text().trim();
                let count = parseReactionNumber(text);
                totalReactions += count;
            });

            // Fallback: If no specific spans are found, check the aria-label of the main container itself
            // sometimes the total count is on the parent
            if (totalReactions === 0 && $reactionContainer.attr('aria-label')) {
                 const ariaLabel = $reactionContainer.attr('aria-label');
                 const match = ariaLabel.match(/(\d+\.?\d*)([KM]?)\sreactions?/i);
                 if (match) {
                     totalReactions = parseReactionNumber(match[1] + (match[2] || ''));
                 }
            }
        } else {
            // Fallback for older structures or if the above fails
            // Try to find elements that look like reaction counts directly
            // This might catch cases where reaction counts are simpler spans
            $messageElement.find('span[class*="reaction"], div[class*="reaction"]').each(function() {
                let text = $(this).text().trim();
                let count = parseReactionNumber(text);
                totalReactions += count;
            });
        }
        return totalReactions;
    }

    // --- Function to Parse K/M numbers ---
    function parseReactionNumber(str) {
        let value = parseFloat(str.replace(/[^0-9.,]/g, '').replace(/,/g, '.'));
        if (isNaN(value)) return 0;
        if (str.toUpperCase().includes('K')) {
            value *= 1000;
        } else if (str.toUpperCase().includes('M')) {
            value *= 1000000;
        }
        return value;
    }

    // --- Click Handler for the Sort Button ---
    $('#tg-sort-reactions-btn').on('click', function() {
        console.log('Tg Sort by Reactions: Sort button clicked.');

        const $chatMessagesContainer = $('.Transition.active .MessageList.open'); // Specific to Web A chat view
        if (!$chatMessagesContainer.length) {
            console.warn('Tg Sort by Reactions: Could not find the active chat messages container.');
            alert('Please open a chat with messages to sort.');
            return;
        }

        const $messageList = $chatMessagesContainer.find('.messages-container'); // This is where messages are directly appended
        if (!$messageList.length) {
            console.warn('Tg Sort by Reactions: Could not find the message list container.');
            alert('Could not find messages in the current chat.');
            return;
        }

        // Get all message bubbles
        // Web A message elements usually have a class like 'Message' or similar, and data attributes for ID.
        // Example: <div class="message-wrapper"> or <div class="Message">
        // Look for common parent of messages.
        const $messageBubbles = $chatMessagesContainer.find('[data-message-id]'); // All elements with a message ID

        if ($messageBubbles.length === 0) {
            console.warn('Tg Sort by Reactions: No messages found in the current view.');
            alert('No messages with reactions found to sort.');
            return;
        }

        console.log(`Tg Sort by Reactions: Found ${$messageBubbles.length} messages. Sorting...`);

        // Detach, sort, and re-append
        $messageBubbles.detach().sort(function(a, b) {
            const $a = $(a);
            const $b = $(b);

            let aReactions = getReactionCount($a);
            let bReactions = getReactionCount($b);

            // console.log(`Message A (${$a.attr('data-message-id')}): ${aReactions} reactions`);
            // console.log(`Message B (${$b.attr('data-message-id')}): ${bReactions} reactions`);

            return bReactions - aReactions; // Sort in descending order (highest reactions first)
        }).appendTo($messageList);

        console.log('Tg Sort by Reactions: Messages sorted.');

        // Scroll to the top or to the message with most reactions if it's not visible
        // It's more logical to scroll to the top after sorting by highest reactions.
        $chatMessagesContainer.scrollTop(0); // Scroll to the very top

        alert('Messages sorted by reactions (highest first)!');
    });

    // --- Mutation Observer to Handle Dynamic Content ---
    // Telegram Web A loads content dynamically, so we need to observe for chat changes.
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                // Check if the added nodes contain chat containers, indicating a chat change
                const chatContainerAdded = Array.from(mutation.addedNodes).some(node =>
                    node.nodeType === 1 && $(node).find('.MessageList.open').length
                );
                if (chatContainerAdded) {
                    console.log('Tg Sort by Reactions: Detected new chat container. Ready for sorting.');
                    // No need to re-add button, it's fixed. Just log readiness.
                }
            }
        });
    });

    // Observe the body for changes in chat content
    observer.observe(document.body, { childList: true, subtree: true });

    console.log('Tg Sort by Reactions: MutationObserver started.');

})();