feat(评论): 最近表情改为分组 tab + 提交后面板收起 + 小编徽章配色 + 走心评论 20 条

- emoticon-recent.js: 「最近使用」从面板顶部独立栏重构为分组切换条最左侧的
  同构 tab（data-index="recent"），无记录时整个 tab 隐藏；复用 Artalk 原生
  .atk-grp[data-type=image] 网格样式，零自定义布局。
- artalk.js:
  · 新建评论成功（res.ok）后，对当前激活的插件按钮派发 click()，收起仍展开的
    表情面板（Artalk 上游只 reset 输入内容、不关面板），内部 openedPlug 状态同步复位。
  · 徽章处理末尾把徽章文字镜像到 data-badge 属性，供 CSS 按名字配色。
- artalk.html: 新增 .atk-badge[data-badge="小编"] 玫红实底规则（含暗色模式），
  特异性高于博主规则，两者互不覆盖。
- featured-comments.html: 走心评论 limit 8 → 20（后端上限）。
- main.css: 移除旧 .atk-recent-emoticons 相关样式。

themes/Ying/assets/js/modules/artalk.js

@@ -1307,7 +1307,16 @@ artalk.on('comment-rendered', function(node) {
         var allBadges = nickEl.querySelectorAll(
             '.atk-badge, .atk-pinned-badge, .atk-title-badge, .atk-link-badge, .atk-feed-badge, .atk-rank-badge'
         );
-        for (var bi = 0; bi < allBadges.length; bi++) allBadges[bi].classList.add('atk-cmt-badge');
+        for (var bi = 0; bi < allBadges.length; bi++) {
+            var bdg = allBadges[bi];
+            bdg.classList.add('atk-cmt-badge');
+            // 7) 把徽章文字镜像到 data-badge —— CSS 就能按「博主 / 小编 / ...」分别配色。
+            //    系统徽章（.atk-badge）身上只有 class + 文字可用：badge_color 是 Artalk
+            //    写在元素内联 style 上的，而主题的 !important 实底规则会盖掉它，
+            //    所以按文字做一个稳定的选择器钩子（以后加新徽章配色不用再改 JS）。
+            var btxt = (bdg.textContent || '').trim();
+            if (btxt && bdg.getAttribute('data-badge') !== btxt) bdg.setAttribute('data-badge', btxt);
+        }
     } catch (e) { /* 徽章注入失败不影响评论 */ }
 
     // ── 友链申请入口卡片：评论内容就是约定 URL（https://usj.cc/link-apply）时，
@@ -1717,6 +1726,19 @@ artalk.on('list-loaded', function() {
         }, 80);
     }
 
+    // ── 提交成功后收起还开着的插件面板（表情 / 图片 …）──────────────────────
+    // Artalk 的插件面板是 toggle：点「表情」展开、再点收起。提交成功后它只会
+    // reset() 输入内容，不会把面板关掉 —— 于是「选完表情 → 发表」之后表情面板
+    // 还杵在那里，输入框看起来像没复位。这里补一次收起。
+    // 必须走「点当前 active 按钮」这条路：按钮 toggle 依赖内部 openedPlug 状态，
+    // 直接改 style.display='none' 会让状态和 UI 脱节（下次点按钮要点两下才开）。
+    function closePlugPanels() {
+        try {
+            var btns = document.querySelectorAll('.atk-plug-btn-wrap .atk-plug-btn.active');
+            for (var i = 0; i < btns.length; i++) btns[i].click();
+        } catch (e) {}
+    }
+
     // ── fetch 拦截：只认「新建评论」这一个请求 ────────────────────────────
     // 之所以要先 await 读完 body 再放行，是因为 Artalk 在 `await fetch(...)` 之后
     // 才触发 editor-submitted；如果这里用 res.clone().json() 异步解析而不 await，
@@ -1747,6 +1769,7 @@ artalk.on('list-loaded', function() {
             var p = origFetch.apply(this, args);
             return p.then(function (res) {
                 if (res && res.ok) {
+                    closePlugPanels();   // 发表成功 → 顺手把展开的表情/图片面板收起来
                     // 成功：读一下 body 看是不是落进了审核队列（服务端返回的就是
                     // 煮熟的评论对象本体，is_pending 是它的字段）
                     return res.clone().json().then(function (d) {