Pikabu UI++

Улучшение интерфейса
Ask a question, post a review, or report the script.
// ==UserScript==
// @name         Pikabu UI++
// @namespace    pikabuUIPlusPlus
// @version      1.60
// @description  Улучшение интерфейса
// @author       Array
// @license      CC-BY-SA-4.0
// @match        *://pikabu.ru/*
// @grant        unsafeWindow
// @grant        window.close
// @grant        GM_getValue
// @grant        GM_setValue
// @run-at document-body
// ==/UserScript==

// simbols source http://myhomeinet.ru/smilegenerator/page-274.html
// colors source https://www.w3schools.com/colors/colors_names.asp
// special thanks:
// @nazarpunk
// @moretraher2020
(function() {
    `use strict`;

    const DATA_LIFETIME = 604800000;
    const DATABASE = `db`;
    const DATABASE_VERSION = `1`;

    const EXP_VALUES = [3, 5, 8];
    const EXP_ICO = [`❊`, `•`, `︿`, `︽`, `⁂`, `★`];

    const NOTE_VALUES = [`#добро`, `#интересно`, `#осторожно`, `#неприемлемо`],
          NOTE_ICO = [`❤`, `♞`, `⚠`, `✖`],
          NOTE_COLORS = [`LimeGreen`, `DodgerBlue`, `OrangeRed`, `Violet`];

    const SUBS_VALUES = [40, 900, 4000, 9000],
          SUBS_ICO = [``, `◔`, `◑`, `◕`, `◉`];

    const BAN_ICO = [``, `ϟ`, `†`];
    const GENDER_ICO = [``, `♂`, `♀`];


    // ************************ ENTRY POINT *************************

    let MAKE_OLD_HEADER = GM_getValue(`MAKE_OLD_HEADER`, 1);
    let MAKE_ANSWER_TOP = GM_getValue(`MAKE_ANSWER_TOP`, 0);
    let MUTE_WATERMARK = GM_getValue(`MUTE_WATERMARK`, 1);
    let MINIFY_AUTHOR_PANEL = GM_getValue(`MINIFY_AUTHOR_PANEL`, 0);

    let SHOW_AUTHOR_LIKE = GM_getValue(`SHOW_AUTHOR_LIKE`, 0);
    let SHOW_SHORT_POST_DESIGN = GM_getValue(`SHOW_SHORT_POST_DESIGN`, 0);
    let SHOW_EMOTIONS = GM_getValue(`SHOW_EMOTIONS`, 1);
    let SHOW_COMMUNITY_DESCRIPTION = GM_getValue(`SHOW_COMMUNITY_DESCRIPTION`, 1);

    let SHOW_HIDDEN_LIKES = GM_getValue(`SHOW_HIDDEN_LIKES`, 1);
    let SHOW_HIDDEN_COMMENT_LIKES = GM_getValue(`SHOW_HIDDEN_COMMENT_LIKES`, 1);

    let SHOW_EXP = GM_getValue(`SHOW_EXP`, 1);
    let SHOW_NOTE = GM_getValue(`SHOW_NOTE`, 1);
    let SHOW_RATE = GM_getValue(`SHOW_RATE`, 1);
    let SHOW_SUBS = GM_getValue(`SHOW_SUBS`, 1);
    let SHOW_BAN = GM_getValue(`SHOW_BAN`, 1);
    let SHOW_GENDER = GM_getValue(`SHOW_GENDER`, 0);

    const ENABLED_QUICK_NOTES = () => SHOW_EXP || SHOW_NOTE || SHOW_RATE || SHOW_SUBS || SHOW_BAN || SHOW_GENDER;

    let SHOW_QUICK_NOTE_0 = GM_getValue(`SHOW_QUICK_NOTE_0`, 1);
    let SHOW_QUICK_NOTE_1 = GM_getValue(`SHOW_QUICK_NOTE_1`, 1);
    let SHOW_QUICK_NOTE_2 = GM_getValue(`SHOW_QUICK_NOTE_2`, 1);
    let SHOW_QUICK_NOTE_3 = GM_getValue(`SHOW_QUICK_NOTE_3`, 1);

    const SHOW_QUICK_NOTE_VALUES = [SHOW_QUICK_NOTE_0, SHOW_QUICK_NOTE_1, SHOW_QUICK_NOTE_2, SHOW_QUICK_NOTE_3];

    let AUTOBAN = GM_getValue(`AUTOBAN`, 0);


    let database = new Map();

    let loadingComments = new Map();
    let loadingOrder = [];
    let updateOrder = [];
    let intersectionItems = [];
    let loadingComment = null;


    let userpageRendered = false;


    // ************************ INIT *************************

    addCustomCSS();

    loadDatabase();


    document.addEventListener("DOMContentLoaded", () => {

        checkUserPage();

        checkSettingsPage();

        renderAnswerTop();

    }, {once: true});


    // ************************ EVENTS *************************

    // Intersections
    const intersector = new IntersectionObserver(entries =>
    {
        for (const entry of entries) {
            if (entry.isIntersecting)
            {
                intersectionItems.push(entry.target);


                if(answer != undefined && entry.target.classList.contains(`story-comments__top-trigger`))
                {
                    sectionTopTrigger.classList.toggle(`answer-trigger__place-holder`, false);

                    commentsRoot.prepend(answer);

                    sectionDownTrigger.classList.toggle(`answer-trigger__place-holder`, true);
                }

                if(answer != undefined && entry.target.classList.contains(`story-comments__down-trigger`))
                {
                    sectionDownTrigger.classList.toggle(`answer-trigger__place-holder`, false);

                    comments.appendChild(answer);

                    sectionTopTrigger.classList.toggle(`answer-trigger__place-holder`, true);

                }
            }
            else
            {
                const index = intersectionItems.indexOf(entry.target);
                if (index > -1) {
                    intersectionItems.splice(index, 1);
                }
            }
        }

    }, { threshold: 0 });


    // Ajax listener
    !function(send) {
        XMLHttpRequest.prototype.send = function(body) {
            send.call(this, body);

            if(body?.includes(`note`))
            {
                checkUserPage();
            }
        };
    }(XMLHttpRequest.prototype.send);


    // Mutation listener
    new MutationObserver(mutations => {
        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (!(node instanceof HTMLElement)) continue;

                // watermark
                if (MUTE_WATERMARK && node.dataset?.watermarked == 1)
                {
                    node.remove();
                }

                // header
                if (node.classList.contains(`header__main`))
                {
                    renderHeader(node);
                    setTimeout(() => { renderHeader(node); }, 50);
                }

                // posts
                if (node.classList.contains(`story`))
                {
                    renderPost(node);

                    checkPostReady(node);
                }

                // comments
                if (node.classList.contains(`comment__header`))
                {
                    renderComment(node.parentElement.parentElement);

                    checkCommentReady(node);
                }

            }
        }
    }).observe(document.body, {childList: true, subtree: true});


    // Visbility listener
    document.addEventListener("visibilitychange", function() {
        if(!document.hidden)
        {
            loadDatabase();

            nextLoading();
        }
    });


    // ************************ DATABASE *************************

    function loadDatabase()
    {
        let jobject = JSON.parse(GM_getValue(DATABASE, `{}`));

        database = new Map(Object.entries(jobject));

        let ver = GM_getValue(`version`, ``);
        if(ver != DATABASE_VERSION)
        {
            GM_setValue(`version`, DATABASE_VERSION);
            database = new Map();
        }
    }

    function saveDatabase()
    {
        let json = JSON.stringify(Object.fromEntries(database.entries()));
        GM_setValue(DATABASE, json);
    }

    function resetDatabase()
    {
        GM_setValue(DATABASE, `{}`);
    }


    // ************************ BASEMENT *************************

    function checkUserPage()
    {
        let url = window.location.href;
        let key = url.split(`@`)[1];

        if(url.includes(`@`) && !userpageRendered)
        {
            userpageRendered = true;
            renderUserpageTools();
        }

        if(database.has(key))
        {
            database.get(key).timestamp = 0;

            saveDatabase();

            updateUser(key);
        }
    }

    function checkSettingsPage()
    {
        let url = window.location.href;

        if(url.includes(`settings`)) renderSettings();
    }

    function checkPostReady(node)
    {
        if(!ENABLED_QUICK_NOTES()) return;

        let post = node?.querySelector(`.story__user-link`);

        if(post == null)
        {
            setTimeout(() => { checkPostReady(node) }, 50);
            return;
        }

        let userName = post.getAttribute(`data-name`);

        // check author-panel
        let panel = node?.querySelector(`.story__author-panel`);

        if(MINIFY_AUTHOR_PANEL && panel != null)
        {
            renderPostAuthor(node, post, userName);
            panel.remove();
        }

        checkUsername(userName, post);
    }

    function renderPostAuthor(node, userLink, userName)
    {
        let container = node.querySelector(`.story__community`);

        // move data
        let creationTime = container.querySelector(`.story__creation-date`);

        container.prepend(creationTime);

        // resize avatar
        let avatar = userLink.querySelector(`.avatar`);
        avatar.classList.toggle(`avatar_medium`, false);
        avatar.classList.toggle(`avatar_small`, true);

        // add text
        userLink.append(userName);

        // move elements
        let subContainer = document.createElement(`div`);
        subContainer.classList.add(`story__user`);
        subContainer.classList.add(`user`);
        node.querySelector(`.story__header`).prepend(subContainer);

        subContainer.prepend(container);

        container.prepend(userLink);

        container.classList.toggle(`story__community`, false);
        container.classList.toggle(`story__community_after-author-panel`, false);
        container.classList.toggle(`story__user-info`, true);
    }

    function checkCommentReady(node)
    {
        if(!ENABLED_QUICK_NOTES()) return;

        let commentBase = node.querySelector(`.comment__user`);
        let comment = commentBase?.querySelector(`.user__nick`);

        if(comment == null)
        {
            setTimeout(() => { checkCommentReady(node) }, 50);
            return;
        }

        let userName = commentBase.getAttribute(`data-name`);

        checkUsername(userName, comment);
    }

    function checkUsername(userName, holder)
    {
        if(userName == `DELETED` || userName == `Аноним`) return;

        // check is raw
        if(holder?.textContent.trim() == userName)
        {
            holder.dataset.name = userName;

            intersector.observe(holder);

            addComment(holder, userName);
        }
    }


    function updateUser(requestedUser)
    {
        if(!ENABLED_QUICK_NOTES()) return;

        // comemet usernames
        document.querySelectorAll(`.comment__user`).forEach((commentBase) => {

            let comment = commentBase.querySelector(`.user__nick`);

            let userName = commentBase.getAttribute(`data-name`);


            if(requestedUser == userName)
            {
                addComment(comment, userName);
            }

        });

        //post usernames
        document.querySelectorAll(`.story__user-link`).forEach((post) => {

            let userName = post.getAttribute(`data-name`);

            if(requestedUser == userName)
            {
                addComment(post, userName);
            }
        });

        if(loadingComment == null)
        {
            nextLoading();
        }
    }


    function addComment(comment, userName)
    {
        if(database.has(userName))
        {
            let date = new Date();
            let data = database.get(userName);

            renderUsername(userName, comment, data);

            // update data
            if(date.getTime() > (data.timestamp + DATA_LIFETIME))
            {
                if(loadingComments.has(userName))
                {
                    loadingComments.get(userName).push(comment);
                }
                else
                {
                    loadingComments.set(userName, [comment]);
                    updateOrder.push(userName);
                }
            }
        }
        else
        {
            //request data
            if(loadingComments.has(userName))
            {
                loadingComments.get(userName).push(comment);
            }
            else
            {
                loadingComments.set(userName, [comment]);

                loadingOrder.push(userName);

                nextLoading();
            }
        }

    }


    // ************************ LOADING  *************************

    function nextLoading()
    {
        //find intersection
        let intersectionUsername = null;
        for(const intersected of intersectionItems)
        {
            if(intersected?.dataset?.name == null) continue;

            if(loadingOrder.includes(intersected.dataset.name))
            {
                intersectionUsername = intersected.dataset.name;

                const index = loadingOrder.indexOf(intersectionUsername);
                if (index > -1) {
                    loadingOrder.splice(index, 1);
                }
                break;
            }

            if(updateOrder.includes(intersected.dataset.name))
            {
                intersectionUsername = intersected.dataset.name;

                const index = updateOrder.indexOf(intersectionUsername);
                if (index > -1) {
                    updateOrder.splice(index, 1);
                }
                break;
            }
        }


        if(loadingComment == null && intersectionUsername != null)
        {
            loadingComment = intersectionUsername;

            loadData(loadingComment);
        }
        else if(loadingComment == null && loadingOrder.length > 0)
        {
            loadingComment = loadingOrder.shift();

            loadData(loadingComment);
        }
        else if(loadingComment == null && updateOrder.length > 0)
        {
            // update expired data
            loadingComment = updateOrder.shift();

            loadData(loadingComment);
        }

    }

    function loadData(userName)
    {
        const body = new FormData();
        body.set(`action`, `get_short_profile`);
        body.set(`user_name`, userName);

        fetch(`/ajax/user_info.php`, {
            method: `post`,
            body  : body
        })
            .then(r => r.json())
            .then(result => {
            let data = parseData(result.data.html);

            if(data == null)
            {
                nextLoading();
                return;
            }

            if(document.hidden)
            {
                loadingOrder.push(loadingComment);
                loadingComment = null;

                return;
            }

            database.set(userName, data);

            saveDatabase();

            let comments = loadingComments.get(userName);
            loadingComments.delete(userName);

            if(comments != null)
            {
                for (let comment of comments)
                {
                    renderUsername(userName, comment, data);
                    intersector.unobserve(comment);
                }
            }


            loadingComment = null;

            setTimeout(() => {nextLoading();}, 100 + 400 * Math.random());
        });
    }


    // ************************ CLICKS  *************************

    let clickTimeout = false;
    function clickUserNote(e)
    {
        if(clickTimeout) return;

        clickTimeout = true;

        let note = e.target.getAttribute(`data-note`);
        let uid = e.target.getAttribute(`data-uid`);

        let url = window.location.href;
        let userName = url.split(`@`)[1];

        let data = database.get(userName);

        let message = ``;
        let mtype = `-`;
        if(data.note != (parseInt(note)+1))
        {
            message = NOTE_VALUES[note];
            mtype = `+`;
        }

        let textarea = document.querySelector(`.page-profile`).querySelector(`.profile-note__textarea`).value = message;
        let textdiv = document.querySelector(`.page-profile`).querySelector(`.profile-note__text`).textContent = message;

        const body = new FormData();
        body.set(`action`, `note`+mtype);
        body.set(`id`, uid);
        body.set(`message`, message);

        fetch(`/ajax/users_actions.php`, {
            method: `post`,
            body  : body
        })
            .then(result => {

            data.timestamp = 0;

            updateUser(userName);

            clickTimeout = false;

            applyAutoban(uid, (parseInt(note) == 3));
        });
    }


    function clickQuicknote(e)
    {
        if(clickTimeout) return;

        let note = e.target.getAttribute(`data-note`);
        let uid = e.target.getAttribute(`data-uid`);

        let comment = e.target?.parentElement?.parentElement?.querySelector(`.comment__user`);
        let userName = comment?.getAttribute(`data-name`);

        if(!database.has(userName)) return;

        clickTimeout = true;

        let refTool = e.target.parentElement?.querySelector(`a`);
        let ref = refTool?.getAttribute(`href`);

        let data = database.get(userName);

        let message = ``;
        let mtype = `-`;
        if(data.note != (parseInt(note)+1))
        {
            message = NOTE_VALUES[note]+` `+ref;
            mtype = `+`;
        }

        const body = new FormData();
        body.set(`action`, `note`+mtype);
        body.set(`id`, uid);
        body.set(`message`, message);

        fetch(`/ajax/users_actions.php`, {
            method: `post`,
            body  : body
        })
            .then(result => {

            data.timestamp = 0;

            updateUser(userName);

            clickTimeout = false;

            applyAutoban(uid, (parseInt(note) == 3));
        });
    }

    function applyAutoban(uid, isBan)
    {
        if(!AUTOBAN) return;

        const body = new FormData();
        body.set(`action`, isBan ? `ignore_in_comments` : `unignore_in_comments`);
        body.set(`id`, uid);

        fetch(`/ajax/ignore_actions.php`, {
            method: `post`,
            body  : body
        });
    }

    // ************************ PARSING  *************************

    function smartSlice(text, start, end)
    {
        let strIndex = text.indexOf(start);
        let endIndex = text.indexOf(end, strIndex + start.length + 1);

        return text.slice(strIndex+start.length, endIndex);
    }

    function parseData(html)
    {
        if(html == undefined || html == null) return null;

        let data = new Object();

        let regions = html.split(`information`);

        // ban
        let banStat = 0;
        if(regions[0].includes(`ban-status`))
        {
            banStat = 1;

            if(regions[0].includes(`навсегда`)) banStat = 2;
        }

        // note
        let noteStat = 0;
        if(regions[1].includes(`profile__note`))
        {
            let subRegions = regions[1].split(`profile__note-inner`);
            regions[1] = subRegions[0];

            for (let i = 0; i < NOTE_VALUES.length; i++)
            {
                if(subRegions[1].includes(NOTE_VALUES[i]))
                {
                    noteStat = i + 1;
                }
            }
        }

        // gender
        let genderStat = 0;
        if(regions[1].includes(`шник`)) genderStat = 1;

        if(regions[1].includes(`шница`)) genderStat = 2;


        //exp
        let expStat = 0;
        let expSource =	smartSlice(regions[1], `<span>`, `</div>`);

        let y = expSource.includes(`лет`) || expSource.includes(`год`);
        let m = expSource.includes(`месяц`);

        if(y || m)
        {
            if(y)
            {
                let years = parseInt(expSource);

                expStat = 2 + EXP_VALUES.length;
                for (let i = EXP_VALUES.length - 1; i >= 0; i--)
                {
                    if(years < EXP_VALUES[i])
                    {
                        expStat = 2 + i;
                    }
                }
            }
            else
            {
                expStat = 1;
            }
        }

        let digitalRegions = regions[1].split(`profile__digital`);

        //rate
        let rateStat = 0;

        let rateRaw = smartSlice(digitalRegions[1], `<b>`, `</b>`);

        if(rateRaw.includes(`К`))
        {
            rateStat = rateRaw.replace(`-`, `▽`);
        }
        else
        {
            rateStat = (Math.round(rateRaw/1000) + `K`).replace(`-`, `▽`);
        }

        if(rateStat.includes(`NaN`))
        {
            rateStat = `--`;
        }

        // subs
        let subsStat = 0;
        let rawSubs = smartSlice(digitalRegions[3], `<b>`, `</b>`);

        if(rawSubs.includes(`К`))
        {
            subsStat = 4;
        }
        else if(rawSubs > SUBS_VALUES[0])
        {
            subsStat = SUBS_VALUES.length;
            for (let i = SUBS_VALUES.length - 1; i > 0 ; i--)
            {
                if(rawSubs < SUBS_VALUES[i])
                {
                    subsStat = i;
                }
            }
        }

        // timestamp
        let date = new Date();
        data.timestamp = date.getTime();

        data.exp = expStat;
        data.note = noteStat;
        data.rate = rateStat;
        data.subs = subsStat;
        data.ban = banStat;
        data.gender = genderStat;

        return data;
    }

    // ************************ CSS  *************************

    function addCustomCSS()
    {
        let styles = ``;
        for (let i = 0; i < NOTE_COLORS.length; i++)
        {
            styles += `.`+NOTE_COLORS[i]+`_note {background-color: `+NOTE_COLORS[i]+`;}`;
        }

        styles += `.userpage__forced-on {opacity: 1 !important; visibility: visible !important;}`;
        styles += `.userpage-note-tools {margin-left: 15px !important; margin-top: 4px !important;}`;
        styles += `.userpage-note-tool {font-size: 18px !important; padding: 12px !important; padding-left: 12px !important; padding-right: 12px !important;}`;

        styles += `.header-old {background-color: var(--color--header__bg) !important; --color--header__bg: var(--color-primary-700) !important; color: #f9f9fb !important; --color-primary-100: var(--color-primary-500); --color-primary-800:#f9f9fb; --color-primary-200: var(--color-primary-400)}`;
        styles += `.header-black-old {--color-primary-800:var(--color-primary-900)}`;
        styles += `.header-item-old {--color-primary-700:var(--color-primary-900) !important;}`;
        styles += `.header-item-button-old {--color-primary-700:var(--color-primary-900) !important;}`;

        styles += `.settings__forced-off {opacity: 0 !important; visibility: hidden !important; max-height: 1px !important;}`;
        styles += `.answer-trigger {opacity: 0 !important; visibility: hidden !important; padding: 0px; border: 0px;  max-height: 0px; transition: none !important;}`;
        styles += `.answer-trigger__place-holder {opacity: 0 !important; visibility: hidden !important; padding: 0px; border: 0px;  height: 113px !important; max-height: 113px !important;}`;

        styles += `.nsfw-blur {filter: blur(0px); object-position: 200% 200%; object-fit: none;}`;

        let styleSheet = document.createElement(`style`);
        styleSheet.type = `text/css`;
        styleSheet.innerText = styles;
        document.head.appendChild(styleSheet);
    }

    // ************************ RENDERING  *************************

    function renderUsername(userName, comment, data)
    {
        if(comment == null) return;

        let exp = ``;
        if(SHOW_EXP)
        {
            exp = EXP_ICO[data.exp] + ` `;
        }

        let note = ``;
        if(SHOW_NOTE && data.note > 0)
        {
            note = NOTE_ICO[data.note - 1] + ` `;

            let noteEl = comment?.parentElement?.parentElement?.querySelector(`.avatar__note`);

            if(noteEl == null || noteEl == undefined)
            {
                let avatar = comment?.parentElement?.parentElement?.querySelector(`.avatar`);

                noteEl = document.createElement(`span`);
                noteEl.classList.add(`avatar__note`);

                avatar.appendChild(noteEl);
            }

            // remove prev
            for (let i = 0; i < NOTE_COLORS.length; i++)
            {
                noteEl.classList.toggle(NOTE_COLORS[i]+`_note`, false);
            }

            noteEl.classList.add(NOTE_COLORS[data.note - 1]+`_note`);

        }
        if(SHOW_NOTE && data.note == 0)
        {
            let noteEl = comment?.parentElement?.parentElement?.querySelector(`.avatar__note`);

            if(noteEl != null && noteEl != undefined && noteEl.classList.length > 1)
            {
                noteEl.remove();
            }
        }

        let rate = ``;
        if(SHOW_RATE)
        {
            rate = data.rate + ` `;
        }

        let subs = ``;
        if(SHOW_SUBS)
        {
            subs = SUBS_ICO[data.subs] + ` `;
        }

        let ban = ``;
        if(SHOW_BAN && data.ban > 0)
        {
            ban = ` `+BAN_ICO[data.ban];
        }

        let gender = ``;
        if(SHOW_GENDER && data.gender > 0)
        {
            gender = ` `+GENDER_ICO[data.gender];
        }

        if(comment.childNodes.length > 1)
        {
            for (let i = 0; i < comment.childNodes.length; i++)
            {
                if(comment.childNodes[i].textContent.trim() == userName)
                {
                    comment.childNodes[i].textContent = exp + note + rate + subs + userName + ban + gender;
                }
            }
        }
        else
        {
            comment.textContent = exp + note + rate + subs + userName + ban + gender;
        }

    }

    function renderComment(comment)
    {
        let tools = comment.querySelector(`.comment__tools`);
        let authorLike = comment.querySelector(`.comment__author-like`);
        let rating = comment.querySelector(`.comment__rating-count`);
        let ratingUp = comment.querySelector(`.comment__rating-up`);
        let ratingDown = comment.querySelector(`.comment__rating-down`);

        renderAuthorLikes(authorLike);

        renderCommunityDescription();

        if(tools == null || rating == null || ratingUp == null || ratingDown == null)
        {
            setTimeout(() => { renderComment(comment); }, 50);
            return;
        }


        let meta = comment.getAttribute(`data-meta`);

        if(!comment.hasAttribute(`data-quicknote`) && (meta != null) && !meta.includes(`ua`))
        {
            comment.setAttribute(`data-quicknote`, 1);

            let uid = smartSlice(meta, `aid=`, `;`);

            renderCommentTools(tools, uid);
        }


        if(meta != null && meta.includes(`avh`))
        {
           let rawRating;

           let metaSplit = meta.split(`avh=`);

           if(metaSplit[1].includes(`;`))
           {
               rawRating = smartSlice(meta, `avh=`, `;`);
           }
           else
           {
               rawRating = metaSplit[1];
           }

           renderCommentLikes(rating, ratingUp, ratingDown, rawRating, comment.dataset.id, comment.dataset.authorId);
        }

    }

    function renderCommentTools(tools, uid)
    {
        if(!ENABLED_QUICK_NOTES()) return;

        for (let i = 0; i < NOTE_VALUES.length; i++)
        {
            if(!SHOW_QUICK_NOTE_VALUES[i]) continue;

            let tool = document.createElement(`div`);
            tool.classList.add(`comment__tool`);
            tool.classList.add(`hint`);

            tool.setAttribute(`aria-label`, `Отметить как `+NOTE_VALUES[i]);
            tool.setAttribute(`data-note`, i);
            tool.setAttribute(`data-uid`, uid);

            tool.textContent = NOTE_ICO[i];

            tool.addEventListener(`click`, clickQuicknote);

            tools.appendChild(tool);
        }
    }

    function renderCommunityDescription()
    {
        if(SHOW_COMMUNITY_DESCRIPTION) return;

        let page = document.querySelector(`.page-story`);

        page?.querySelectorAll(`.section-group`).forEach((section) => {

            let item = section.querySelector(`.community-comments`);

            if(item != null)
            {
                section.remove();
            }
        });
    }

    function renderAuthorLikes(like)
    {
        if(SHOW_AUTHOR_LIKE) return;

        like?.remove();
    }

    function renderCommentLikes(rating, ratingUp, ratingDown, raw, id, aid)
    {
        if(!SHOW_HIDDEN_COMMENT_LIKES) return;

        let dataMetaRating = raw.split(`:`);

        let storyId = id;
        let autorId = aid;
        let key = 253537024;
        let storySeed = (storyId % 99) + 1;
        let autorSeed = (autorId % 98);

        function restore(x)
        {
             return -x/storySeed - key - autorSeed / storySeed;
        }

        let plus = restore(dataMetaRating[0]);
        let minus = restore(dataMetaRating[1]);
        let resultRating = Math.round(plus - minus);

        if(resultRating > 100000 || resultRating < -100000) resultRating = 0;

        if(resultRating > 0) resultRating = `+`+resultRating;

        rating?.childNodes[0]?.remove();
        rating.textContent = resultRating;
        rating.setAttribute(`aria-label`, Math.round(plus)+` плюсов, `+Math.round(minus)+` минусов`);
        rating.dataset.originRating = resultRating;

        ratingUp.addEventListener(`click`, onChangeCommentRating);
        ratingDown.addEventListener(`click`, onChangeCommentRating);

    }

    function onChangeCommentRating(e)
    {
        let comment = e.target.parentNode;

        let rating = comment.querySelector(`.comment__rating-count`);
        let ratingUp = comment.querySelector(`.comment__rating-up`);
        let ratingDown = comment.querySelector(`.comment__rating-down`);

        setTimeout(() =>
        {
            let plus = ratingUp.classList.contains(`comment__rating-up_active`);
            let minus = ratingDown.classList.contains(`comment__rating-down_active`);

            let result = parseInt(rating.dataset.originRating) + (plus - minus);

            if(result > 0) result = `+`+result;

            rating.textContent = result;
        }, 50);

    }

    function renderUserpageTools()
    {
        if(!ENABLED_QUICK_NOTES()) return;

        let isUser = document.querySelector(`.page-profile`)?.querySelector(`.background`)?.hasAttribute(`data-editable`);

        if(isUser == true) return;

        let uid = document.querySelector(`.page-profile`).querySelector(`.section-group`).getAttribute(`data-user-id`);

        let root = document.querySelector(`.main__inner`);
        let panel = document.querySelector(`.feed-panel`);

        let tools = document.createElement(`div`);
        tools.classList.add(`comment__tools`);
        tools.classList.add(`userpage__forced-on`);
        tools.classList.add(`userpage-note-tools`);
        root.insertBefore(tools, panel);

        for (let i = 0; i < NOTE_VALUES.length; i++)
        {
            if(!SHOW_QUICK_NOTE_VALUES[i]) continue;

            let tool = document.createElement(`div`);
            tool.classList.add(`comment__tool`);
            tool.classList.add(`hint`);
            tool.classList.add(`userpage-note-tool`);

            tool.setAttribute(`aria-label`, `Отметить как `+NOTE_VALUES[i]);
            tool.setAttribute(`data-note`, i);
            tool.setAttribute(`data-uid`, uid);

            tool.textContent = NOTE_ICO[i];

            tool.addEventListener(`click`, clickUserNote);

            tools.appendChild(tool);
        }
    }

    function renderPost(article)
    {
        let rating = article.querySelector(`.story__rating-count`);
        let emotions = article.querySelector(`.story__emotions`);

        if(rating == null || emotions == null)
        {
            setTimeout(() => { renderPost(article); }, 50);
            return;
        }

        //

        if (SHOW_HIDDEN_LIKES && rating?.firstChild?.tagName == `SPAN`) {

            rating.removeChild(rating?.firstChild);

            let dataMetaRating = article.getAttribute(`data-meta-rating`).split(`:`);

            let storyId = article.getAttribute(`data-story-id`);
            let autorId = article.getAttribute(`data-author-id`);
            let key = 253537024;
            let storySeed = (storyId % 99) + 1;
            let autorSeed = (autorId % 98);

            function restore(x)
            {
                 return -x/storySeed - key - autorSeed / storySeed;
            }

            let resultRating = Math.round(restore(dataMetaRating[0]) - restore(dataMetaRating[1]));

            if(resultRating > 100000 || resultRating < -100000) resultRating = 0;

            rating.textContent = resultRating;
        }


        if(!SHOW_EMOTIONS)
        {
            emotions?.remove();
        }


        if(!SHOW_SHORT_POST_DESIGN)
        {
            article.classList.toggle(`story_short`, false);

            let bg = article.querySelector(`.icon--ui__bg-story-short`);

            bg?.remove();
        }
    }

    function renderHeader(header)
    {
        if(header == undefined) header = document.querySelector(`.header__main`);

        header.classList.toggle(`header-old`, MAKE_OLD_HEADER);

        header.querySelector(`.icon--ui__logo-text`).childNodes[0].classList.toggle(`header-old`, MAKE_OLD_HEADER);

        header.querySelector(`.header-menu__subs-counter`).classList.toggle(`header-black-old`, MAKE_OLD_HEADER);

        header.querySelectorAll(`.header-menu__item`).forEach(item => {

            item.classList.toggle(`header-item-button-old`, MAKE_OLD_HEADER);
        });

        header.querySelectorAll(`.header-right-menu__item`).forEach(item => {

            item.classList.toggle(`header-item-old`, MAKE_OLD_HEADER);
        });

    }

    let commentsRoot;
    let comments;
    let answer;
    let sectionTopTrigger;
    let sectionDownTrigger;
    function renderAnswerTop()
    {
        if(!MAKE_ANSWER_TOP) return;


        setTimeout(() =>
        {
            commentsRoot = document.querySelector(`.story-comments`);
            comments = commentsRoot?.querySelector(`.story-comments__all`);

            if(comments == null || comments.scrollHeight < window.screen.height) return;


            comments.querySelectorAll(`section`).forEach(item => {
                if(item.dataset?.role == `answer`)
                {
                    answer = item;
                }
            });



            sectionTopTrigger = document.createElement(`section`);
            sectionTopTrigger.classList.add(`story-comments__top-trigger`);
            sectionTopTrigger.classList.add(`answer-trigger`);
            comments.prepend(sectionTopTrigger);
            intersector.observe(sectionTopTrigger);

            sectionDownTrigger = document.createElement(`section`);
            sectionDownTrigger.classList.add(`story-comments__down-trigger`);
            sectionDownTrigger.classList.add(`answer-trigger`);
            comments.append(sectionDownTrigger);
            intersector.observe(sectionDownTrigger);

        }, 50);
    }

    // ************************ SETTINGS  *************************

    function renderSettings()
    {

        let enableUISection = false;

        let header = document.querySelector(`.feed-panel`).querySelector(`.menu`);

        let items = [];
        header.querySelectorAll(`.menu__item`).forEach(item => {
            items.push(item);
            item.addEventListener(`click`, (e) => {
                if(enableUISection)
                {
                    settingItem.classList.toggle(`menu__item_current`, false);

                    settings?.remove();

                    if(settingsOld != null)
                    {
                        settingsContainer.appendChild(settingsOld);
                        setTimeout(() => e.target.classList.toggle(`menu__item_current`, true), 100);
                    }

                    enableUISection= false;
                }
            });
        });

        let settingsContainer = document.querySelector(`.settings`);
        let settings;
        let settingsOld;

        let settingItem = document.createElement(`a`);
        settingItem.classList.add(`menu__item`);
        settingItem.classList.add(`menu__item_route`);
        settingItem.textContent = `UI++`;
        header.appendChild(settingItem);

        settingItem.addEventListener(`click`, () => {

            enableUISection = true;

            items.forEach(item => {item.classList.toggle(`menu__item_current`, false);});

            settingItem.classList.toggle(`menu__item_current`, true);

            settingsOld = settingsContainer.querySelector(`.settings-main`)
                        || settingsContainer.querySelector(`.settings-security`)
                        || settingsContainer.querySelector(`.settings-save`)
                        || settingsContainer.querySelector(`.settings-notifications`);

            settingsOld?.remove();

            settings = document.createElement(`div`);
            settings.classList.add(`settings-main`);
            settingsContainer.appendChild(settings);

            let sectionGroup = document.createElement(`div`);
            sectionGroup.classList.add(`section-group`);
            settings.appendChild(sectionGroup);

            let sectionHeader = document.createElement(`section`);
            sectionHeader.classList.add(`section_gray`);
            sectionGroup.appendChild(sectionHeader);

            let h = document.createElement(`h4`);
            h.textContent = `Настройки сторонего скрипта Pikabu UI++`;
            sectionHeader.appendChild(h);

            let sectionBody = document.createElement(`section`);
            //sectionBody.classList.add(`section`);
            sectionBody.classList.add(`section_padding_none`);
            sectionGroup.appendChild(sectionBody);

            let options = document.createElement(`div`);
            options.classList.add(`settings-main__options`);
            sectionBody.appendChild(options);

            const addLine = (tittle, desc) => {
                let line = document.createElement(`h4`);
                line.classList.add(`settings-main__sub-header`);
                line.textContent = tittle;
                options.appendChild(line);

                if(desc != undefined) line.insertAdjacentHTML(`beforeend`,`<i class="fa fa-question-circle hint" aria-label="`+desc+`"></i>`);

                return line;
            };

            let quickNoteElements = [];

            const addCheckbox = (tittle, current, name, desc) => {
                let op = document.createElement(`div`);
                op.classList.add(`settings-main__option`);
                options.appendChild(op);

                let l = document.createElement(`label`);
                op.appendChild(l);

                let checkbox = document.createElement(`span`);
                checkbox.classList.add(`checkbox`);
                checkbox.classList.add(`checkbox_switch`);
                checkbox.classList.toggle(`checkbox_checked`, current);
                checkbox.setAttribute(`tabindex`, `0`);
                checkbox.setAttribute(`unselectable`, `on`);
                l.appendChild(checkbox);

                checkbox.addEventListener(`click`, () => {
                    let value = !GM_getValue(name, 1);
                    GM_setValue(name, value);
                    eval(name+` = value;`);
                    checkbox.classList.toggle(`checkbox_checked`, value);

                    let hideQuickNote = !ENABLED_QUICK_NOTES();
                    for(const el of quickNoteElements)
                    {
                        el.classList.toggle(`settings__forced-off`, hideQuickNote);
                    }

                    if(name == `MAKE_OLD_HEADER`)
                    {
                        MAKE_OLD_HEADER = value;

                        renderHeader();
                    }
                });

                l.insertAdjacentHTML(`beforeend`, tittle);

                if(desc != undefined) l.insertAdjacentHTML(`beforeend`,`<i class="fa fa-question-circle hint" aria-label="`+desc+`"></i>`);

                return op;
            };

            // design

            addLine(`Внешний вид`);
            addCheckbox(`Вернуть старый дизайн шапки `, MAKE_OLD_HEADER, `MAKE_OLD_HEADER`, `Часть цветов может не совпадать, а некоторые анимации не работать. Получилось что получилось.`);
            addCheckbox(`Дублировать блок написания комментария в начало поста `, MAKE_ANSWER_TOP, `MAKE_ANSWER_TOP`);

            addLine(`Отображение стандартной информации`);
            addCheckbox(`Показывать лайки автора в его посте `, SHOW_AUTHOR_LIKE, `SHOW_AUTHOR_LIKE`);
            addCheckbox(`Показывать дизайн коротких постов `, SHOW_SHORT_POST_DESIGN, `SHOW_SHORT_POST_DESIGN`);
            addCheckbox(`Показывать эмоции у постов `, SHOW_EMOTIONS, `SHOW_EMOTIONS`);
            addCheckbox(`Показывать описание сообщества при открытии поста `, SHOW_COMMUNITY_DESCRIPTION, `SHOW_COMMUNITY_DESCRIPTION`);
            addCheckbox(`Уменьшить заголовок постов избранных авторов `, MINIFY_AUTHOR_PANEL, `MINIFY_AUTHOR_PANEL`);

            addLine(`Отображение скрытой информации`);
            addCheckbox(`Показывать оценку свежих постов `, SHOW_HIDDEN_LIKES, `SHOW_HIDDEN_LIKES`);
            addCheckbox(`Показывать оценку свежих комментариев `, SHOW_HIDDEN_COMMENT_LIKES, `SHOW_HIDDEN_COMMENT_LIKES`, `Оценка обновляется с небольшой задержкой.`);

            addLine(`Прочий функционал`);
            addCheckbox(`Убрать вотермарку pikabu.ru при копировании изображений `, MUTE_WATERMARK, `MUTE_WATERMARK`);

            addLine(`Дополнительная информация рядом с никнеймом `, `Данная функция отправляет множество запросов к серверу пикабу (на каждого пользователя по запросу), так что потенциально может замедлить работу сайта. Для отключения необходимо снять все пункты (блок умных заметок исчезнет).`);


            let noteDesc = ``;
            for(let i = 0; i < 4; i++) noteDesc += `<br>  `+NOTE_ICO[i]+` - `+NOTE_VALUES[i];

            addCheckbox(`Показывать дату регистрации `, SHOW_EXP, `SHOW_EXP`, EXP_ICO[0]+` - Менее месяца<br>`+EXP_ICO[1]+` - 1 год<br>`+EXP_ICO[2]+` - Более 1 года<br>`+EXP_ICO[3]+` - Более `+EXP_VALUES[0]+` лет<br>`+EXP_ICO[4]+` - Более `+EXP_VALUES[1]+` лет<br>`+EXP_ICO[5]+` - Более `+EXP_VALUES[2]+` лет`);
            addCheckbox(`Показывать значок умной заметки `, SHOW_NOTE, `SHOW_NOTE`, `Оставьте в заметке пользователя один из хэштегов чтобы показывать специальный маркер, а также изменить цвет заметки: `+noteDesc);
            addCheckbox(`Показывать рейтинг `, SHOW_RATE, `SHOW_RATE`);
            addCheckbox(`Показывать подписчиков `, SHOW_SUBS, `SHOW_SUBS`, SUBS_ICO[1]+` - Более `+SUBS_VALUES[0]+` подписчиков<br>`+SUBS_ICO[2]+` - Более `+SUBS_VALUES[1]+` подписчиков<br>`+SUBS_ICO[3]+` - Более `+SUBS_VALUES[2]+` подписчиков<br>`+SUBS_ICO[4]+` - Более `+SUBS_VALUES[3]+` подписчиков`);
            addCheckbox(`Показывать бан `, SHOW_BAN, `SHOW_BAN`, BAN_ICO[1]+` - Временныый бан<br>`+BAN_ICO[2]+` - Вечный бан` );
            addCheckbox(`Показывать пол `, SHOW_GENDER, `SHOW_GENDER`, GENDER_ICO[1]+` - Пикабушник<br>`+GENDER_ICO[2]+` - Пикабушница` );

            quickNoteElements.push(addLine(`Умные заметки `, `Рядом с комментариями и на странице пользователя будут кнопки для быстрого добавления заметки с хэштегом. Кнопки рядом с комментариями также сохраняют ссылку на комментарий. Нажатие на кнопку срабатывает сразу, однако иконка обновится с небольшой задержкой из-за очереди загрузки. <br>ОСТОРОЖНО: При добавлении хэтега через кнопку, предыдущая заметка полностью удаляется.`));

            quickNoteElements.push(addCheckbox(`Показывать кнопку #добро `, SHOW_QUICK_NOTE_0, `SHOW_QUICK_NOTE_0`));
            quickNoteElements.push(addCheckbox(`Показывать кнопку #интересно `, SHOW_QUICK_NOTE_1, `SHOW_QUICK_NOTE_1`));
            quickNoteElements.push(addCheckbox(`Показывать кнопку #осторожно `, SHOW_QUICK_NOTE_2, `SHOW_QUICK_NOTE_2`));
            quickNoteElements.push(addCheckbox(`Показывать кнопку #неприемлемый `, SHOW_QUICK_NOTE_3, `SHOW_QUICK_NOTE_3`));
            quickNoteElements.push(addCheckbox(`Автоматический бан #неприемлемого `, AUTOBAN, `AUTOBAN`, `При добавлении хэштега #неприемлемый автоматически скрываются комментарии пользователя. Если убрать хэштег, то комментарии снова будут показываться. Работает только при добавлении хэштегов через кнопки быстрого добавления.` ));

            let sectionBottom = document.createElement(`section`);
            sectionBottom.classList.add(`section_gray`);
            sectionBottom.classList.add(`section_center`);
            sectionGroup.appendChild(sectionBottom);

            let buttonClear = document.createElement(`button`);
            buttonClear.classList.add(`button_danger`);
            buttonClear.textContent = `УДАЛИТЬ КЭШИРОВАННЫЕ ДАННЫЕ`;
            sectionBottom.appendChild(buttonClear);


            buttonClear.addEventListener(`click`, () => {
                resetDatabase();
            });

            let hideQuickNote = !ENABLED_QUICK_NOTES();
            for(const el of quickNoteElements)
            {
                el.classList.toggle(`settings__forced-off`, hideQuickNote);
            }

        });

    }

})();