// ==UserScript==
// @name         V2EX 非同一般的扩展
// @namespace    LeoKu(https://leoku.top)
// @version      0.5.4
// @description  美化 V2EX，提升浏览体验！
// @author       LeoKu
// @match        https://www.v2ex.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

"use strict";

// src/web-scripts/globals.ts
var loginName = $('#Top .tools > a[href^="/member"]').text();
var ownerName = $("#Main > .box:nth-child(1) > .header > small > a").text();
var commentBox = $('#Main .box:has(.cell[id^="r_"])');
var commentCells = $('#Main .cell[id^="r_"]');
var cellTableRows = commentCells.find("table > tbody > tr");
var commentData = cellTableRows.map((idx, tr) => {
  const id = commentCells[idx].id;
  const td = $(tr).find("> td:nth-child(3)");
  const name = td.find("> strong > a").text();
  const content = td.find("> .reply_content").text();
  const likes = Number(td.find("span.small").text());
  const floor = td.find("span.no").text();
  return { id, name, content, likes, floor, index: idx };
}).get();

// src/web-scripts/nested-comments.ts
function nestedComments() {
  let i = 1;
  while (i < commentCells.length) {
    const cellDom = commentCells[i];
    const { name, content } = commentData[i];
    if (name === ownerName) {
      cellDom.classList.add("owner");
    }
    if (name === loginName) {
      cellDom.classList.add("self");
    }
    if (content.includes("@")) {
      for (let j = i - 1; j >= 0; j--) {
        if (content.match(`@${commentData[j].name}`)) {
          cellDom.classList.add("responder");
          commentCells[j].append(cellDom);
          break;
        }
      }
    }
    i++;
  }
}

// src/web-scripts/popular.ts
function popular() {
  const popularCommentData = commentData.filter(({ likes }) => likes > 0).sort((a, b) => b.likes - a.likes);
  if (popularCommentData.length > 0) {
    const commentContainer = $(`
        <div class="extra-comments-mask">
          <div class="extra-comments-content box">
            <div class="extra-comments-bar">
              <span>\u672C\u9875\u5171\u6709 ${popularCommentData.length} \u6761\u70ED\u95E8\u56DE\u590D</span>
              <button class="extra-comments-close-btn normal button">\u5173\u95ED<kbd>Esc</kbd></button>
            </div>
          </div>
        </div>
        `).css({
      position: "fixed",
      inset: "0",
      "z-index": "999",
      "overflow-y": "auto"
    }).hide();
    {
      const commentBoxCount = commentBox.find(".cell:first-of-type > span.gray");
      const countText = commentBoxCount.text();
      const newCountText = countText.substring(0, countText.indexOf("\u56DE\u590D") + 2);
      const countTextSpan = `<span class="count-text">${newCountText}</span><span class="split-dot">\xB7</span>`;
      let boundEvent = false;
      const clickHandler = (e) => {
        const content = $(".extra-comments-content");
        if ($(e.target).closest(content).length === 0) {
          handleModalClose();
        }
      };
      const keyupHandler = (e) => {
        if (e.key === "Escape") {
          handleModalClose();
        }
      };
      const handleModalClose = () => {
        $(document).off("click", clickHandler);
        $(document).off("keydown", keyupHandler);
        boundEvent = false;
        commentContainer.fadeOut("fast");
        document.body.classList.remove("modal-open");
      };
      const handleModalOpen = () => {
        if (!boundEvent) {
          $(document).on("click", clickHandler);
          $(document).on("keydown", keyupHandler);
          boundEvent = true;
        }
        commentContainer.fadeIn("fast");
        document.body.classList.add("modal-open");
      };
      const closeBtn = commentContainer.find(".extra-comments-close-btn");
      closeBtn.on("click", handleModalClose);
      const popularBtn = $('<span class="popular-btn effect-btn">\u{1F525} \u67E5\u770B\u70ED\u95E8\u56DE\u590D</span>');
      popularBtn.on("click", (e) => {
        e.stopPropagation();
        handleModalOpen();
      });
      commentBoxCount.empty().append(countTextSpan).append(popularBtn);
    }
    const templete = $("<templete></templete>");
    popularCommentData.forEach(({ index }) => {
      templete.append(commentCells.eq(index).clone());
    });
    commentContainer.find(".extra-comments-content").append(templete.html());
    commentBox.append(commentContainer);
  }
}

// src/web-scripts/replace-element.ts
var iconHeart = `
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="currentColor"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
  />
</svg>

`;
function replaceHeart() {
  commentCells.find(".small.fade").addClass("heart-box").find('img[alt="\u2764\uFE0F"]').replaceWith(`
      <span class="icon-heart">
        ${iconHeart}
      </span>
    `);
}
function setControls() {
  const thankAreas = commentCells.find(".thank_area");
  thankAreas.each((_, el) => {
    const thankArea = $(el);
    const thanked = thankArea.hasClass("thanked");
    const control = $('<span class="control-area">');
    const thankIcon = $(`
      <span class="control">
        ${iconHeart}
      </span>
    `);
    if (thanked) {
      thankIcon.attr("title", "\u5DF2\u611F\u8C22").css({ color: "#f43f5e", cursor: "default" });
      control.append($("<a>").append(thankIcon));
    } else {
      const hide = thankArea.find("> a").eq(0).removeClass("thank");
      const thank = thankArea.find("> a").eq(1).removeClass("thank");
      hide.html(`
        <span class="control effect-btn" title="\u9690\u85CF">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
            />
          </svg>
        </span>
      `);
      thankIcon.attr("title", "\u611F\u8C22").addClass("effect-btn");
      thank.empty().append(thankIcon);
      control.append(hide).append(thank);
    }
    const reply = thankArea.find("+ a");
    reply.find('> img[alt="Reply"]').replaceWith(`
      <span class="control effect-btn" title="\u56DE\u590D">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
          />
        </svg>
      </span>
    `);
    control.append(reply);
    control.replaceAll(thankArea);
  });
}

// src/web-scripts/style.ts
var style = `body{--v2p-font-noto-sans: -apple-system, BlinkMacSystemFont, "Noto Sans SC", sans-serif;--v2p-color-main-100: #f1f5f9;--v2p-color-main-200: #e2e8f0;--v2p-color-main-300: #cbd5e1;--v2p-color-main-400: #94a3b8;--v2p-color-main-500: #64748b;--v2p-color-main-600: #475569;--v2p-color-main-700: #334155;--v2p-color-main-800: #1e293b;--v2p-color-main-900: #0f172a;--v2p-color-accent-50: #ecfdf5;--v2p-color-accent-100: #d1fae5;--v2p-color-accent-200: #a7f3d0;--v2p-color-accent-300: #6ee7b7;--v2p-color-accent-400: #34d399;--v2p-color-accent-500: #10b981;--v2p-color-accent-600: #059669;--v2p-color-border: rgb(238 238 238);--v2p-color-wrapper-bg: rgb(249 250 252);--v2p-color-content-bg: rgb(255 255 255);--color-fade: #94a3b8;--color-gray: #94a3b8;--link-color: #1e293b;--box-border-color: #f1f5f9;--box-foreground-color: #1e293b;color:var(--v2p-color-main-800);font-family:var(--v2p-font-noto-sans);background-color:var(--v2p-color-wrapper-bg)}body #Top{height:55px;background-color:var(--v2p-color-content-bg);border:none}body #Bottom{border:none}body #Wrapper{background-color:inherit;background-image:none}body #Wrapper .content{display:flex;gap:15px}body #Leftbar{order:1;float:none}body #Main{flex:1;order:2;margin:0}body #Rightbar{order:3;float:none}body .box{overflow:hidden;background-color:var(--v2p-color-content-bg);border:none;border-radius:8px;box-shadow:none}body .box .header .gray{color:var(--v2p-color-main-400)}body.modal-open{overflow:hidden}body .normal.button{position:relative;display:inline-flex;gap:5px;align-items:center;height:28px;padding:0 12px;color:var(--v2p-color-main-500);font-weight:500;font-size:14px;font-family:inherit;line-height:28px;background:none;background-color:var(--v2p-color-main-100);border:none;border-radius:6px;outline:none;box-shadow:0 1.8px 0 var(--v2p-color-main-200),0 1.8px 0 var(--v2p-color-main-100);cursor:pointer;user-select:none}body .normal.button:hover:enabled{color:var(--v2p-color-main-500);font-weight:500;text-shadow:none;background-color:var(--v2p-color-main-100);border:none;box-shadow:0 1.8px 0 var(--v2p-color-main-200),0 1.8px 0 var(--v2p-color-main-100)}body .normal.button.super{color:var(--v2p-color-accent-500);background-color:var(--v2p-color-accent-100);box-shadow:0 1.8px 0 var(--v2p-color-accent-200),0 1.8px 0 var(--v2p-color-accent-100)}body .normal.button.super:hover:enabled{color:var(--v2p-color-accent-500);font-weight:500;text-shadow:none;background-color:var(--v2p-color-accent-100);border:none;box-shadow:0 1.8px 0 var(--v2p-color-accent-200),0 1.8px 0 var(--v2p-color-accent-100)}body .normal.button kbd{position:relative;right:-4px;padding:0 3px;line-height:initial;border:1px solid var(--v2p-color-main-200);border-radius:4px}::selection{color:currentcolor;background-color:var(--v2p-color-main-200)}img::selection{background-color:var(--v2p-color-main-400)}#reply-box.reply-box-sticky{bottom:20px;overflow:hidden;border:none;border-radius:10px;box-shadow:0 0 15px 5px var(--v2p-color-main-200)}#reply-box #reply_content{border-color:var(--v2p-color-main-300);border-radius:6px}#search-container{height:30px;margin:0 30px;background-color:var(--v2p-color-main-100);border:none;border-radius:6px}#search-container::before{top:0;left:4px;background-size:14px 14px;opacity:.6;filter:none}#search-container.active{background-color:var(--v2p-color-main-100)}#search-container #search-result{top:42px;box-shadow:0 0 15px 5px var(--v2p-color-main-200)}#no-comments-yet{color:var(--v2p-color-main-400);border-color:var(--v2p-color-main-400)}.box .tag,.box>.cell:first-of-type .tag{color:currentcolor;font-size:12px;background-color:var(--v2p-color-main-100);border-radius:5px}#Top .content{height:100%}#Top .site-nav{height:100%;padding:0}#Top .tools{display:flex;gap:8px 15px;align-items:center;justify-content:flex-end;font-weight:400;font-size:14px}#Top .tools .top{margin-left:0;padding:3px 5px;color:var(--v2p-color-main-400);border-radius:4px}#Top .tools .top:hover{color:var(--v2p-color-main-800)}#Top .tools .top:not(.effect-btn):hover{background-color:var(--v2p-color-main-100)}#Top .tools .top.effect-btn{transition:color .3s}#Main>.box{padding:0 12px}#Main>.box .cell{padding:20px 10px}#Main .topic_content{font-size:16px}#Main .cell_tab_current{border-color:var(--v2p-color-main-800)}#Main .cell.item{border-bottom:1px solid var(--v2p-color-border)}#Main .cell.item .item_title{font-weight:600;opacity:.8}#Main .cell.item .item_title:hover{opacity:1}#Main .cell.item .topic-link{color:var(--v2p-color-main-800);text-decoration:none}#Main .cell.item .topic-link:visited{color:var(--v2p-color-main-400)}#Main .cell.item .topic_info{position:relative}#Main .cell.item .topic_info::after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:var(--v2p-color-content-bg);content:""}#Main .cell.item .topic_info .node{padding:5px 6px;color:var(--v2p-color-main-400);font-size:13px;background-color:var(--v2p-color-main-100);border-radius:4px}#Main .cell.item .topic_info .votes,#Main .cell.item .topic_info .node,#Main .cell.item .topic_info strong:first-of-type,#Main .cell.item .topic_info span:first-of-type{position:relative;z-index:99}#Main .cell.item:hover .count_livid{opacity:1}#Main .cell.item .count_livid{display:inline-block;padding:5px 10px;color:var(--v2p-color-main-400);font-weight:400;white-space:nowrap;background-color:var(--v2p-color-main-200);border-radius:5px;opacity:.8}#Main .cell.item tr>td:nth-child(2){width:30px}#Main #Tabs{display:flex;gap:6px 8px;align-items:center}#Main #SecondaryTabs{padding:10px;background-color:var(--v2p-color-main-100);border-radius:5px}#Main .cell[id^=r]:hover>table td:last-of-type .fr a{opacity:1}#Main .cell[id^=r]>table:first-of-type td:first-of-type{width:40px}#Main .cell[id^=r]>table:first-of-type td:first-of-type .avatar{width:40px !important;border-radius:5px}#Main .cell[id^=r]>table~.cell{padding:20px 0 0 15px;border:none}#Main .cell[id^=r]>table~.cell .cell{padding:20px 0 0;border:none}#Main .cell[id^=r]>table~.cell tr td:first-of-type{width:25px}#Main .cell[id^=r]>table~.cell tr td:first-of-type .avatar{width:25px !important;border-radius:4px}#Main .cell[id^=r]>table~.cell tr td:nth-child(3) strong a{font-size:13px;opacity:.75}#Main .cell[id^=r]>table~.cell .reply_content{font-size:14px}#Main .cell[id^=r]>table td:nth-of-type(2){width:15px}#Main .cell[id^=r]>table td:last-of-type a.dark{color:var(--v2p-color-main-600);text-decoration:none}#Main .cell[id^=r]>table td:last-of-type .fr{position:relative;top:-3px}#Main .cell[id^=r]>table td:last-of-type .fr a{opacity:0}#Main .cell[id^=r] .no{position:relative;top:-4px;padding:5px 10px;color:var(--v2p-color-main-300);font-size:12px;background-color:rgba(0,0,0,0);border-radius:5px}#Main .cell[id^=r] .badge.op,#Main .cell[id^=r] .badge.mod{padding:2px 5px;color:var(--v2p-color-accent-500);font-weight:600;background-color:var(--v2p-color-accent-50);border:1px solid var(--v2p-color-accent-400);border-radius:4px;user-select:none}#Main .reply_content{font-size:15px}#Main .reply_content a[href^=http]{color:var(--v2p-color-main-500);text-decoration:none;background-color:var(--v2p-color-main-100)}#Main .reply_content a[href^=http]:hover{color:var(--v2p-color-accent-500);background-color:var(--v2p-color-accent-50)}#Main .reply_content a[href^="/member"]{color:var(--v2p-color-main-400);font-size:13px;text-decoration:underline;background-color:var(--v2p-color-main-100)}#Main .thank_area{font-size:12px}#Main .tab{margin:0;background-color:rgba(0,0,0,0)}#Main .tab:not(.effect-btn):hover{background-color:var(--v2p-color-main-100)}#Main .tab_current{background-color:var(--v2p-color-main-700)}.topic_buttons{display:flex;flex-direction:row-reverse;align-items:center;padding:8px 0;column-gap:5px;background:none}.topic_buttons .topic_stats{margin-left:auto;padding:0 !important;font-size:12px}.topic_buttons a.tb:link{display:flex;flex-direction:row-reverse;align-items:center;padding:8px 5px;column-gap:5px;background:none;border-radius:4px}.topic_buttons .tb:hover:not(.effect-btn){background:var(--v2p-color-main-100);filter:none}.topic_buttons #topic_thank .tb::after{content:"\u{1F64F}"}.topic_buttons .tb:nth-child(2)::after{content:"\u2B50"}.topic_buttons .tb:nth-child(3)::after{content:"\u{1F426}"}.topic_buttons .tb:nth-child(4)::after{content:"\u{1F648}"}#Rightbar .box{opacity:.5;transition:opacity .25s}#Rightbar .box:hover{opacity:1}#Rightbar .balance_area{display:flex;align-items:center}#Bottom .inner .small.fade{display:none}.effect-btn{position:relative;z-index:1;margin:0;background:none;background-color:rgba(0,0,0,0);cursor:pointer;user-select:none}.effect-btn::before{position:absolute;top:0;right:-5px;bottom:0;left:-5px;z-index:-1;background-color:var(--v2p-color-main-100);border-radius:5px;transform:scale(0.6);opacity:0;transition:transform .3s,opacity .3s;content:""}.effect-btn:hover::before{transform:scale(1);opacity:1}.popular-btn{padding:5px 0}.split-dot{margin:0 8px;font-weight:800;font-size:20px;font-size:15px}.extra-comments-mask{padding:60px;overflow:hidden;background-color:rgba(0,0,0,.25)}.extra-comments-content.box{position:relative;box-sizing:border-box;width:800px;height:100%;margin:0 auto;padding:0 20px;overflow-x:hidden;overflow-y:auto}.extra-comments-bar{position:sticky;top:0;right:0;left:0;z-index:10;display:flex;align-items:center;padding:20px 0;background-color:var(--v2p-color-content-bg)}.extra-comments-close-btn{margin-left:auto}.heart-box{position:relative;top:3px;display:inline-flex;align-items:center;column-gap:5px}.icon-heart{display:inline-flex;width:16px;height:16px;color:#f43f5e}.icon-heart svg{fill:#ffe4e6}@supports selector(:has(*)){#Main .cell[id^=r]>table:hover .control-area{opacity:1}}@supports selector(:has(*)){#Main .cell[id^=r]:not(:has(.cell:hover))>table:hover .control-area{opacity:1}}.control-area{display:inline-flex;align-items:center;font-size:12px;column-gap:15px;opacity:0}.control-area .control{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:4px 0;color:var(--v2p-color-main-400)}.control-area>a{text-decoration:none;opacity:1}
`;
function addStyle() {
  $(`<style type='text/css'>${style}</style>`).appendTo("head");
}

// src/web-scripts/index.ts
{
  $("#Top .site-nav .tools > .top").addClass("effect-btn");
  $("#Main .tab").addClass("effect-btn");
  $("#Main .topic_buttons a.tb").addClass("effect-btn");
  $("#Main .topic-link, .item_hot_topic_title > a, .item_node").attr("target", "_blank");
}
addStyle();
replaceHeart();
setControls();
popular();
nestedComments();