@jesonliu/lark-claudecode-bridge 1.4.3 → 2.0.1

package/assets/web/js/pages/permissions.js

@@ -1,7 +1,11 @@
-// ============ 权限（页内一级 tab：免确认工具 / 危险命令黑名单） ============
-import { S, $, esc, toast, saveDoc } from '../core.js';
+// ============ 权限（页内一级 tab：免确认工具 / 危险命令黑名单 / 接入申请） ============
+// 改动即时保存并热生效；「全部工具免确认」缺省开启（显式 false 才算关闭），开启时黑名单是唯一安全网。
+import { S, $, esc, toast, saveDoc, api } from '../core.js';
 import { confirmDialog } from '../ui.js';
 
+const svg = (inner, s = 14) => `<svg viewBox="0 0 24 24" width="${s}" height="${s}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+const IC_INFO = '<circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M12 12v4"/>';
+
 let permTab = 'allow'; // tab 状态：切换 / 重渲染保持
 function renderPermissions(el) {
   const p = S.doc.permissions || (S.doc.permissions = {});
@@ -10,14 +14,93 @@ function renderPermissions(el) {
   el.innerHTML = `
   <div class="tabs">
     <button data-t="allow" class="${permTab === 'allow' ? 'active' : ''}">免确认工具</button>
-    <button data-t="danger" class="${permTab === 'danger' ? 'active' : ''}">危险命令黑名单</button>
+    <button data-t="danger" class="${permTab === 'danger' ? 'active' : ''}">危险命令黑名单 <span class="tag off" style="margin-left:4px">${p.dangerous_commands.length}</span></button>
+    <button data-t="pair" class="${permTab === 'pair' ? 'active' : ''}">接入申请 <span class="tag off" style="margin-left:4px" id="pairCount">…</span></button>
   </div>
   <div id="permPanel"></div>`;
   el.querySelectorAll('.tabs button').forEach((b) =>
     b.onclick = () => { permTab = b.dataset.t; renderPermissions(el); });
   const panel = $('#permPanel');
   if (permTab === 'danger') renderDangerTab(panel, p);
+  else if (permTab === 'pair') renderPairTab(panel);
   else renderAllowTab(panel, p);
+  if (permTab !== 'pair') void refreshPairCount(); // 徽标数量任何 tab 下都保持新鲜
+}
+
+/** 接入申请徽标数量（tab 头）；面板不存在时静默退出（页面已切换） */
+async function refreshPairCount() {
+  let n = 0;
+  try { n = (await api('GET', '/api/access/pending')).pending.length; } catch { /* 失联：保持原样 */ }
+  const el = $('#pairCount');
+  if (el) { el.textContent = String(n); el.className = `tag ${n > 0 ? 'warn' : 'off'}`; }
+  return n;
+}
+
+// ============ 接入申请 tab：配对授权（码不再发到来话群，私发管理员 + 此处审批） ============
+let pairPollTimer = null;
+function renderPairTab(panel) {
+  if (pairPollTimer) { clearInterval(pairPollTimer); pairPollTimer = null; }
+  panel.innerHTML = `
+  <div class="panel">
+    <header class="panel-head"><h3>接入申请</h3>
+      <div class="panel-actions">
+        <span class="tip" data-tip="未知用户私聊/群里艾特机器人时，配对码私聊发给管理员并出现在这里；批准后立即生效，也可忽略（15 分钟自动过期）">${svg(IC_INFO)}</span>
+        <button class="btn sm" id="pairRefresh">↻ 刷新</button>
+      </div></header>
+    <div class="panel-body">
+      <div id="pairList"><span class="hint">加载中…</span></div>
+    </div>
+    <footer class="panel-foot">批准 = 该用户获得使用权限（member）；不批准可忽略，申请 15 分钟后自动过期。终端 <code>lcb pair &lt;码&gt;</code> 双通道并存。配对码私聊发给当前配置的管理员（该机器人最早的使用者），不再发到来话群。</footer>
+  </div>`;
+  $('#pairRefresh').onclick = () => void loadPairList();
+  void loadPairList();
+  pairPollTimer = setInterval(() => { if (panel.isConnected) void loadPairList(true); else { clearInterval(pairPollTimer); pairPollTimer = null; } }, 30_000);
+}
+
+async function loadPairList(silent = false) {
+  const box = $('#pairList');
+  if (!box) return;
+  try {
+    const { pending } = await api('GET', '/api/access/pending');
+    await refreshPairCount();
+    if (!box.isConnected) return;
+    if (!pending.length) {
+      box.innerHTML = '<div class="banner ok" style="margin:6px 0"><span>暂无接入申请。未知用户联系机器人时会自动出现在这里（配对码同时私聊发给管理员）。</span></div>';
+      return;
+    }
+    box.innerHTML = `<table><thead><tr><th>申请人</th><th>机器人</th><th>配对码</th><th>剩余有效期</th><th style="width:170px">操作</th></tr></thead>
+      <tbody>${pending.map((it) => `
+        <tr>
+          <td><b>${esc(it.displayName || it.name)}</b>${it.displayName && it.displayName !== it.name ? ` <span class="hint" style="font-size:11px">${esc(it.name)}</span>` : ''}</td>
+          <td>${esc(it.appName || it.appId || '—')}</td>
+          <td><code>${esc(it.code)}</code></td>
+          <td>${it.expiresInSec > 60 ? `${Math.floor(it.expiresInSec / 60)} 分钟` : '<span class="tag warn">即将过期</span>'}</td>
+          <td style="display:flex;gap:6px">
+            <button class="btn sm primary" data-act="approve" data-code="${esc(it.code)}" data-name="${esc(it.displayName || it.name)}">授权</button>
+            <button class="btn sm danger" data-act="reject" data-code="${esc(it.code)}" data-name="${esc(it.displayName || it.name)}">拒绝</button>
+          </td>
+        </tr>`).join('')}</tbody></table>`;
+    box.querySelectorAll('button[data-act]').forEach((b) => {
+      b.onclick = async () => {
+        const approve = b.dataset.act === 'approve';
+        if (!(await confirmDialog({
+          title: approve ? '批准接入申请' : '拒绝接入申请',
+          message: approve
+            ? `确定批准 <b>${esc(b.dataset.name)}</b> 使用机器人？批准后对方即可开始对话。`
+            : `确定拒绝 <b>${esc(b.dataset.name)}</b> 的申请？对方再次发消息可重新发起申请。`,
+          confirmText: approve ? '批准' : '拒绝',
+          danger: !approve,
+        }))) return;
+        try {
+          await api('POST', `/api/access/pending/${approve ? 'approve' : 'reject'}`, { code: b.dataset.code });
+          toast(approve ? `✅ 已批准 ${b.dataset.name}` : '已拒绝该申请');
+        } catch (e) { toast(e.message, true); }
+        void loadPairList();
+      };
+    });
+  } catch (e) {
+    if (!silent) box.innerHTML = `<div class="banner err" style="margin:6px 0"><span>加载失败：${esc(e.message)}</span></div>`;
+  }
 }
 
 function renderAllowTab(panel, p) {
@@ -26,28 +109,30 @@ function renderAllowTab(panel, p) {
   // 缺省即开（与后端 DEFAULT_ALLOW_ALL_TOOLS 一致）：只有显式 false 才算用户主动关闭
   const allOn = p.allow_all_tools !== false;
   panel.innerHTML = `
-  <div class="card">
-    <h3>免确认工具</h3>
-    <div class="switch-row">
-      <label class="switch">
-        <input type="checkbox" id="allowAll" ${allOn ? 'checked' : ''}>
-        <span class="track"></span>
-      </label>
-      <span class="switch-label">全部工具免确认（除危险命令黑名单外）</span>
-    </div>
-    ${allOn ? '<div style="background:var(--warn-bg);color:var(--warn-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 已开启全部放行：除命中危险命令黑名单的 Bash 外，所有工具（含 Write/Edit）都不再弹确认卡，下方名单暂不生效</div>' : ''}
-    <div class="${allOn ? 'block-disabled' : ''}">
-      <div class="desc">名单内工具直接放行不弹确认卡（配置即整体替换内置默认）。Bash 仍受危险命令黑名单约束。</div>
-      <div class="list-toolbar">
-        <input type="text" id="newTool" placeholder="工具名，如 Write" style="max-width:320px">
-        <button class="btn" id="addTool">添加</button>
-        <button class="btn" id="resetTools" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+  <div class="panel">
+    <header class="panel-head"><h3>免确认工具</h3>
+      <div class="panel-actions">
+        ${isDefault ? '<span class="tag off">与内置默认一致</span>' : ''}
+        <span class="tip" data-tip="开启后除命中黑名单的 Bash 外，所有工具（含写入）都不再弹确认卡">${svg(IC_INFO)}</span>
+      </div></header>
+    <div class="panel-body">
+      <div class="switch-row" style="margin-top:0">
+        <label class="switch"><input type="checkbox" id="allowAll" ${allOn ? 'checked' : ''}><span class="track"></span></label>
+        <span class="switch-label">全部工具免确认（除危险命令黑名单外）</span>
+      </div>
+      ${allOn ? '<div class="banner warn" style="margin:8px 0"><span>已开启全部放行——下方名单暂不生效，黑名单是唯一安全网。</span></div>' : ''}
+      <div style="${allOn ? 'opacity:.45;pointer-events:none' : ''}">
+        <div class="desc" style="margin:8px 0 4px">名单内工具直接放行不弹确认卡（配置即整体替换内置默认）。Bash 仍受危险命令黑名单约束。</div>
+        <table><tbody id="toolBody"></tbody></table>
+        ${p.allow_tools.length === 0 ? '<div class="banner warn" style="margin:8px 0"><span>⚠️ 名单为空：所有工具（含 Write/Edit）都会弹确认卡</span></div>' : ''}
+        <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
+          <input type="text" id="newTool" placeholder="工具名，如 Write" style="max-width:300px">
+          <button class="btn" id="addTool">添加</button>
+          <button class="btn" id="resetTools" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+        </div>
       </div>
-      ${p.allow_tools.length === 0 ? '<div style="background:var(--warn-bg);color:var(--warn-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 名单为空：所有工具（含 Write/Edit）都会弹确认卡</div>' : ''}
-      ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
-      <table><tbody id="toolBody"></tbody></table>
     </div>
-    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：${allOn ? '全部免确认已开启，除危险命令外一律直通' : '白名单命中直通，未命中弹确认卡'}。</div>
+    <footer class="panel-foot">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：${allOn ? '全部免确认已开启，除危险命令外一律直通' : '白名单命中直通，未命中弹确认卡'}。</footer>
   </div>`;
   $('#toolBody').innerHTML = p.allow_tools.map((t, i) =>
     `<tr><td><code>${esc(t)}</code></td><td style="width:80px"><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
@@ -112,18 +197,19 @@ function renderDangerTab(panel, p) {
   const defaults = S.status?.permissionDefaults?.dangerousCommands || [];
   const isDefault = defaults.length > 0 && JSON.stringify(p.dangerous_commands) === JSON.stringify(defaults);
   panel.innerHTML = `
-  <div class="card">
-    <h3>危险命令黑名单</h3>
-    <div class="desc">正则源串（不区分大小写），命中即弹确认卡。删除正则 = 放宽对应命令为直通，请谨慎。</div>
-    <div class="list-toolbar">
-      <input type="text" id="newDc" placeholder="正则源串，如 \\bgit\\s+push\\b.*--force" style="max-width:480px">
-      <button class="btn" id="addDc">添加</button>
-      <button class="btn" id="resetDc" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+  <div class="panel">
+    <header class="panel-head"><h3>危险命令黑名单</h3>
+      <div class="panel-actions"><span class="tip" data-tip="正则（不区分大小写），命中的 Bash 命令弹确认卡">${svg(IC_INFO)}</span></div></header>
+    <div class="panel-body">
+      ${p.dangerous_commands.length === 0 ? '<div class="banner err" style="margin-bottom:10px"><span>黑名单为空——所有 Bash 命令（含 rm -rf、sudo）将免确认直通，请确认有意为之。</span></div>' : ''}
+      <table><tbody id="dcBody"></tbody></table>
+      <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
+        <input type="text" id="newDc" placeholder="正则源串，如 \\bgit\\s+push\\b.*--force" style="max-width:420px">
+        <button class="btn" id="addDc">添加</button>
+        <button class="btn" id="resetDc" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+      </div>
     </div>
-    ${p.dangerous_commands.length === 0 ? '<div style="background:var(--err-bg);color:var(--err-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 黑名单为空：所有 Bash 命令（含 rm -rf、sudo）将免确认直通，请确认有意为之</div>' : ''}
-    ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
-    <table><tbody id="dcBody"></tbody></table>
-    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。「全部工具免确认」开启时本黑名单是唯一的安全网——删除正则等于放行对应命令。</div>
+    <footer class="panel-foot">正则源串不区分大小写，命中即弹确认卡；删除正则 = 放宽对应命令为直通，请谨慎。改动即时保存并热生效。「全部工具免确认」开启时本黑名单是唯一的安全网。</footer>
   </div>`;
   $('#dcBody').innerHTML = p.dangerous_commands.map((s, i) =>
     `<tr><td style="width:90%"><code>${esc(s)}</code></td><td><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
@@ -165,6 +251,7 @@ function renderDangerTab(panel, p) {
 export const page = {
   id: 'permissions',
   title: '权限',
+  desc: '工具免确认名单、危险命令黑名单与接入申请审批，改动即时生效',
   icon: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1 1 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
   render: renderPermissions,
 };

package/assets/web/js/pages/plugins.js

@@ -1,48 +1,58 @@
-// ============ 插件 ============
+// ============ 插件（已装列表 + 管理市场 / 从市场安装 双卡；市场卡在左：先添加市场再安装） ============
 import { $, esc, toast, api } from '../core.js';
 import { confirmDialog } from '../ui.js';
 
 // 点击 combobox 之外收起面板的监听只注册一次（模块级标志，等价原 document.body 标记法）
 let comboHideBound = false;
+let badgeCount = 0; // 有新版本的插件数（导航徽标；进过本页后可见）
 
 async function renderPlugins(el) {
   el.innerHTML = `
-  <div class="card">
-    <h3>Claude Code 插件 <button class="btn sm" id="plCheckUpdate" style="margin-left:8px">检查更新</button></h3>
-    <div class="desc">两处目录的已启用插件都会自动加载（managed 托管目录优先）：本机 <code>~/.claude</code>（来源「本机」，与本机 claude CLI 共用）与 bridge 托管目录 <code id="pluginDir">…</code>。装好后下一条消息自动加载。飞书端同样可用 <code>/plugin install xxx@marketplace</code>（仅管理员）。打开页面在后台自动检查远程市场新版本（不阻塞列表，5 分钟内不重复；只检测不升级，升级点单行「更新」）。</div>
-    <div class="hint" id="plSyncNote" hidden style="margin:6px 0"></div>
-    <table><thead><tr><th>插件</th><th>市场</th><th>来源</th><th>版本</th><th style="width:90px">状态</th><th style="width:250px">操作</th></tr></thead>
-    <tbody id="plBody"><tr><td colspan="6" class="hint">加载中…</td></tr></tbody></table>
+  <div class="panel">
+    <header class="panel-head"><h3>已安装插件</h3>
+      <div class="panel-actions"><button class="btn sm" id="plCheckUpdate">检查更新</button></div></header>
+    <div class="panel-body">
+      <div class="hint" id="plSyncNote" hidden style="margin:0 0 8px"></div>
+      <table><thead><tr><th>插件</th><th style="width:120px">市场</th><th style="width:130px">来源</th><th style="width:170px">版本</th><th style="width:90px">状态</th><th style="width:230px">操作</th></tr></thead>
+      <tbody id="plBody"><tr><td colspan="6" class="hint">加载中…</td></tr></tbody></table>
+    </div>
+    <footer class="panel-foot">两处目录的已启用插件都会自动加载（managed 托管目录优先）：本机 <code>~/.claude</code> 与 bridge 托管目录 <code id="pluginDir">…</code>。启停 / 更新后<b>下一条消息生效</b>，无须重启；飞书端亦可用 <code>/plugin install xxx@marketplace</code>（仅管理员）。</footer>
   </div>
-  <div class="card">
-    <h3>安装 / 市场</h3>
-    <div class="desc">安装来源为已添加的市场：新插件先「添加市场」，再从下拉选择安装。</div>
-    <label>从市场安装插件</label>
-    <div class="row" style="max-width:760px">
-      <div class="combo">
-        <input type="text" id="plInstall" placeholder="（加载中…）" autocomplete="off">
-        <div class="combo-panel" id="plInstallPanel" hidden></div>
+  <div class="grid2" style="gap:16px;align-items:start">
+    <div class="panel" style="margin:0">
+      <header class="panel-head"><h3>管理市场</h3></header>
+      <div class="panel-body">
+        <div class="mini-note" style="margin-bottom:10px">安装来源为已添加的市场：新插件先在这里「添加市场」，再到右侧安装。</div>
+        <label class="fld">添加市场（git 地址或本机路径）</label>
+        <div class="input-btn"><input type="text" id="plMarket" placeholder="https://github.com/…/marketplace"><button class="btn" id="plDoMarketAdd">添加</button></div>
+        <label class="fld" style="margin-top:12px">目标目录</label>
+        <div class="input-btn"><select id="plMarketDir">
+          <option value="user" selected>本机 ~/.claude</option>
+          <option value="bridge">bridge 托管目录</option>
+        </select><button class="btn" id="plDoMarketUpdate">全部更新</button></div>
+        <div class="mini-note" style="margin-top:8px">「全部更新」= 刷新市场索引 + 逐个更新该目录所有已装插件。</div>
       </div>
-      <select id="plDir" style="max-width:170px">
-        <option value="user" selected>装到本机 ~/.claude</option>
-        <option value="bridge">装到 bridge 托管目录</option>
-      </select>
-      <button class="btn primary" id="plDoInstall">安装</button>
     </div>
-    <div class="hint" style="margin:6px 0">默认装本机 ~/.claude：本机 claude CLI 与桥接器两处共用一份，无须安装两次。装好后下一条消息自动加载。</div>
-    <label style="margin-top:14px">管理市场</label>
-    <div class="row" style="max-width:760px">
-      <input type="text" id="plMarket" placeholder="marketplace git 地址或本机路径">
-      <select id="plMarketDir" style="max-width:170px">
-        <option value="user" selected>本机 ~/.claude</option>
-        <option value="bridge">bridge 托管目录</option>
-      </select>
-      <button class="btn" id="plDoMarketAdd">添加市场</button>
-      <button class="btn" id="plDoMarketUpdate">全部更新</button>
+    <div class="panel" style="margin:0">
+      <header class="panel-head"><h3>从市场安装</h3></header>
+      <div class="panel-body">
+        <label class="fld">搜索插件 <span class="tip" data-tip="候选来自已添加市场的全部插件；也可在飞书端 /plugin install xxx@marketplace（仅管理员）">ⓘ</span></label>
+        <div class="input-btn" style="align-items:flex-start">
+          <div class="combo" style="flex:1;min-width:0">
+            <input type="text" id="plInstall" placeholder="（加载中…）" autocomplete="off">
+            <div class="combo-panel" id="plInstallPanel" hidden></div>
+          </div>
+        </div>
+        <label class="fld" style="margin-top:12px">安装到</label>
+        <select id="plDir">
+          <option value="user" selected>本机 ~/.claude（推荐：本机 CLI 与桥接器共用一份）</option>
+          <option value="bridge">bridge 托管目录</option>
+        </select>
+        <div style="margin-top:12px"><button class="btn primary" id="plDoInstall">安装</button></div>
+      </div>
     </div>
-    <div class="hint" style="margin:6px 0">「全部更新」= 刷新市场索引 + 逐个更新该目录所有已装插件。</div>
-    <pre class="report" id="plReport" style="display:none;margin-top:12px"></pre>
-  </div>`;
+  </div>
+  <pre class="report" id="plReport" style="display:none;margin-top:0"></pre>`;
   const report = (title, text) => {
     $('#plReport').style.display = '';
     $('#plReport').textContent = `${title}\n${text}`;
@@ -65,11 +75,12 @@ async function renderPlugins(el) {
   /** 渲染已装插件表（本地秒出与后台刷新完成两条路径共用；入参 /api/plugins 响应） */
   const renderList = (r) => {
     installed = r.plugins || [];
+    badgeCount = installed.filter((p) => p.latestVersion).length;
     $('#pluginDir').textContent = r.configDir;
     const body = $('#plBody');
     if (!body) return; // 页面已切走（后台刷新回调晚于切页）
     if (!installed.length) {
-      body.innerHTML = '<tr><td colspan="6" class="hint">尚未安装任何插件</td></tr>';
+      body.innerHTML = '<tr class="empty"><td colspan="6">尚未安装任何插件</td></tr>';
       return;
     }
     body.innerHTML = installed.map((p) => `
@@ -77,9 +88,9 @@ async function renderPlugins(el) {
         <td><b>${esc(p.name)}</b></td>
         <td>${esc(p.marketplace || '-')}</td>
         <td>${p.source === 'bridge' ? '<span class="tag warn">bridge 托管</span>' : '<span class="tag off">本机 ~/.claude</span>'}</td>
-        <td class="hint">${esc(p.version || '-')}${p.latestVersion ? ` <span class="tag warn">→ ${esc(p.latestVersion)}</span>` : ''}</td>
+        <td><span class="mono">${esc(p.version || '-')}</span>${p.latestVersion ? ` <span class="tag warn">→ ${esc(p.latestVersion)}</span>` : ''}</td>
         <td>${p.enabled ? '<span class="tag ok">已启用</span>' : '<span class="tag off">未启用</span>'}</td>
-        <td>
+        <td class="ops">
           <button class="btn sm" data-op="update" data-arg="${esc(p.key)}" data-dir="${p.source}">更新</button>
           <button class="btn sm" data-op="${p.enabled ? 'disable' : 'enable'}" data-arg="${esc(p.key)}" data-dir="${p.source}">${p.enabled ? '停用' : '启用'}</button>
           <button class="btn sm danger" data-op="uninstall" data-arg="${esc(p.key)}" data-dir="${p.source}">卸载</button>
@@ -263,7 +274,7 @@ async function renderPlugins(el) {
         }
       }
       $('#plDoInstall').disabled = !available.length;
-      input.placeholder = available.length ? '输入关键词搜索插件，从结果中选择' : '（请先在下方添加市场）';
+      input.placeholder = available.length ? '输入关键词搜索插件，从结果中选择' : '（请先在左侧添加市场）';
     } catch (e) {
       available = [];
       $('#plDoInstall').disabled = true;
@@ -360,6 +371,9 @@ async function renderPlugins(el) {
 export const page = {
   id: 'plugins',
   title: '插件',
+  desc: '两处目录的 Claude Code 插件统一管理，改动下一条消息自动生效',
+  legend: false,
+  badge: () => (badgeCount ? `<span class="nav-badge">${badgeCount}</span>` : ''),
   icon: '<path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z"/>',
   render: renderPlugins,
 };