From 21b5e4e64314bbf0155ee204b3a8c852c0c6767c Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 16:25:25 +0800
Subject: [PATCH 01/22] feat: add messages.html WebUI for short messages
 (closes #752)

Adds a standalone messages.html page hosted on the Cloudflare Pages site,
allowing iOS/iPadOS users (and anyone without userscript support) to read
and send XMOJ short messages via the existing API.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html    |   7 +-
 messages.html | 710 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 716 insertions(+), 1 deletion(-)
 create mode 100644 messages.html
diff --git a/index.html b/index.html
index 268a37b2..07c17b00 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,11 @@
                     <li class="nav-item">
                         <a class="nav-link" href="#About">关于</a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="messages.html">短消息 WebUI
+                            <span class="badge bg-warning text-dark ms-1">Alpha</span>
+                        </a>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -129,7 +134,7 @@ <h2>介绍</h2>
             <ul class="list-group">
                 <li class="list-group-item"><b>比赛ACM排名与下载功能</b>：允许用户查看比赛的ACM排名，并提供下载选项，方便离线查阅。</li>
                 <li class="list-group-item"><b>讨论区</b>：我们自行搭建了一个讨论服务，你可以在里面发表你的声音。</li>
-                <li class="list-group-item"><b>短消息</b>：我们自行搭建了一个短消息服务，你可以在这里和你最好的伙伴交流。</li>
+                <li class="list-group-item"><b>短消息</b>：我们自行搭建了一个短消息服务，你可以在这里和你最好的伙伴交流。iOS/iPadOS 等无法安装用户脚本的设备可使用 <a href="messages.html">短消息 WebUI</a>（Alpha）直接收发消息。</li>
                 <li class="list-group-item"><b>查看更多标程</b>：展示更多的标准程序代码，帮助用户更好地理解题目要求和正确解法。</li>
                 <li class="list-group-item"><b>获取别人的测试点数据</b>：允许用户获取其他人的测试点数据，用于分析问题和优化代码。</li>
                 <li class="list-group-item"><b>自动刷新比赛列表与排名</b>：使比赛列表和排名页面自动定时刷新，获取最新信息。</li>
diff --git a/messages.html b/messages.html
new file mode 100644
index 00000000..6421be0d
--- /dev/null
+++ b/messages.html
@@ -0,0 +1,710 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <title>短消息 WebUI — XMOJ-Script</title>
+    <link rel="icon" href="favicon.ico">
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body { padding-top: 56px; }
+        #thread-messages { max-height: 60vh; overflow-y: auto; }
+        #thread-messages img { max-width: 100%; max-height: 300px; object-fit: contain; cursor: pointer; }
+        .compose-sticky { position: sticky; bottom: 0; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 0.75rem 0; }
+        .msg-bubble-cell { word-break: break-word; max-width: 60vw; }
+        #upload-indicator { font-size: 0.8em; }
+        .bookmarklet-link { cursor: grab; }
+    </style>
+    <script>
+        (function() {
+            var t = localStorage.getItem('xmoj-msg-theme') || 'auto';
+            document.documentElement.setAttribute('data-bs-theme',
+                t === 'auto'
+                    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+                    : t);
+        })();
+    </script>
+</head>
+<body>
+
+<!-- Navbar -->
+<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
+    <div class="container">
+        <a class="navbar-brand fw-semibold" href="index.html">XMOJ-Script</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMain">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navMain">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" href="messages.html">短消息 WebUI</a>
+                </li>
+            </ul>
+            <div class="d-flex align-items-center gap-2">
+                <span id="nav-username" class="text-body-secondary small"></span>
+                <button class="btn btn-outline-secondary btn-sm" id="btn-theme" title="切换主题">&#9788;</button>
+                <button class="btn btn-outline-danger btn-sm d-none" id="btn-logout">退出登录</button>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<!-- ==================== SCREEN: LOGIN ==================== -->
+<div id="screen-login" class="container py-4" style="max-width:480px;">
+    <h4 class="mb-3">登录</h4>
+    <p class="text-body-secondary small">短消息 WebUI 让您无需安装用户脚本即可收发 XMOJ 站内短消息，适用于 iOS/iPadOS 等不支持用户脚本的设备。</p>
+
+    <ul class="nav nav-tabs mb-3" id="loginTabs">
+        <li class="nav-item">
+            <button class="nav-link active" data-tab="bookmarklet">书签登录（推荐）</button>
+        </li>
+        <li class="nav-item">
+            <button class="nav-link" data-tab="manual">手动输入</button>
+        </li>
+    </ul>
+
+    <!-- Tab: Bookmarklet -->
+    <div id="tab-bookmarklet">
+        <div class="card border-0 shadow-sm mb-3">
+            <div class="card-body">
+                <h6 class="card-title">第一步：添加书签</h6>
+                <p class="card-text small text-body-secondary">将下方链接拖动到浏览器书签栏，或复制代码手动新建书签。</p>
+                <div class="d-flex gap-2 align-items-start flex-wrap">
+                    <a id="bookmarklet-link" href="#" class="btn btn-outline-primary bookmarklet-link"
+                       onclick="return false;" draggable="true">&#128278; 登录到短消息 WebUI</a>
+                    <button class="btn btn-outline-secondary btn-sm" id="btn-copy-bookmarklet">复制代码</button>
+                </div>
+            </div>
+        </div>
+        <div class="card border-0 shadow-sm">
+            <div class="card-body">
+                <h6 class="card-title">第二步：在 XMOJ 上使用书签</h6>
+                <ol class="small text-body-secondary mb-0">
+                    <li>前往 <a href="https://www.xmoj.tech" target="_blank">xmoj.tech</a> 并登录。</li>
+                    <li>点击刚才添加的书签。</li>
+                    <li>页面会自动跳转回此处并完成登录。</li>
+                </ol>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tab: Manual -->
+    <div id="tab-manual" style="display:none;">
+        <div class="card border-0 shadow-sm">
+            <div class="card-body">
+                <p class="small text-body-secondary">在 xmoj.tech 登录后，从 Cookie 中获取 PHPSESSID（可用浏览器开发者工具查看）。</p>
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control" id="input-username" placeholder="用户名">
+                    <label for="input-username">用户名</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control font-monospace" id="input-phpsessid" placeholder="PHPSESSID">
+                    <label for="input-phpsessid">PHPSESSID</label>
+                </div>
+                <button class="btn btn-primary w-100" id="btn-manual-login">登录</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- ==================== SCREEN: MAIL LIST ==================== -->
+<div id="screen-list" class="container py-3" style="display:none;">
+    <div class="d-flex align-items-center justify-content-between mb-2">
+        <h5 class="mb-0">收件箱</h5>
+        <div class="d-flex gap-2">
+            <button class="btn btn-outline-secondary btn-sm" id="btn-refresh-list" title="刷新">&#8635;</button>
+            <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#compose-panel">&#43; 新消息</button>
+        </div>
+    </div>
+
+    <!-- Compose new message -->
+    <div class="collapse mb-3" id="compose-panel">
+        <div class="card card-body border-0 shadow-sm">
+            <div class="form-floating mb-2">
+                <input type="text" class="form-control" id="compose-to" placeholder="收件人">
+                <label for="compose-to">收件人用户名</label>
+            </div>
+            <div class="form-floating mb-2">
+                <textarea class="form-control" id="compose-body" placeholder="消息内容" style="height:80px;"></textarea>
+                <label for="compose-body">消息内容</label>
+            </div>
+            <button class="btn btn-primary" id="btn-compose-send">发送</button>
+        </div>
+    </div>
+
+    <!-- Mail list table -->
+    <div class="table-responsive">
+        <table class="table table-hover table-borderless align-middle">
+            <thead class="table-light">
+                <tr>
+                    <th>用户</th>
+                    <th>最新消息</th>
+                    <th class="text-nowrap">时间</th>
+                </tr>
+            </thead>
+            <tbody id="list-tbody">
+                <tr id="list-loading-row">
+                    <td colspan="3" class="text-center text-body-secondary py-4">
+                        <span class="spinner-border spinner-border-sm me-2"></span>加载中…
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- ==================== SCREEN: THREAD ==================== -->
+<div id="screen-thread" class="container py-3" style="display:none;">
+    <div class="d-flex align-items-center gap-2 mb-3">
+        <button class="btn btn-outline-secondary btn-sm" id="btn-back">&#8592; 返回</button>
+        <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
+        <button class="btn btn-outline-secondary btn-sm" id="btn-refresh-thread" title="刷新">&#8635;</button>
+    </div>
+
+    <!-- Messages table -->
+    <div id="thread-messages" class="mb-2">
+        <table class="table table-hover table-borderless align-top">
+            <thead class="table-light">
+                <tr>
+                    <th class="text-nowrap">发送者</th>
+                    <th>内容</th>
+                    <th class="text-nowrap">时间</th>
+                    <th class="text-nowrap">状态</th>
+                </tr>
+            </thead>
+            <tbody id="thread-tbody">
+                <tr id="thread-loading-row">
+                    <td colspan="4" class="text-center text-body-secondary py-4">
+                        <span class="spinner-border spinner-border-sm me-2"></span>加载中…
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Compose area -->
+    <div class="compose-sticky">
+        <div class="d-flex gap-2 align-items-end">
+            <div class="flex-grow-1">
+                <textarea class="form-control" id="thread-compose" rows="2"
+                          placeholder="输入消息… (Ctrl+Enter 发送)"></textarea>
+                <div id="upload-indicator" class="text-body-secondary mt-1" style="min-height:1.2em;"></div>
+            </div>
+            <div class="d-flex flex-column gap-1">
+                <button class="btn btn-outline-secondary btn-sm" id="btn-upload-image" title="上传图片">&#128247;</button>
+                <button class="btn btn-primary" id="btn-thread-send">
+                    <span id="send-spinner" class="spinner-border spinner-border-sm d-none me-1"></span>发送
+                </button>
+            </div>
+        </div>
+        <input type="file" id="file-input" accept="image/png,image/jpeg" style="display:none;">
+    </div>
+</div>
+
+<!-- ==================== IMAGE VIEWER MODAL ==================== -->
+<div class="modal fade" id="img-modal" tabindex="-1">
+    <div class="modal-dialog modal-xl modal-dialog-centered">
+        <div class="modal-content bg-transparent border-0">
+            <div class="modal-body p-0 text-center">
+                <img id="img-modal-src" src="" alt="" class="img-fluid" style="cursor:pointer; max-height:90vh;">
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- ==================== TOAST ==================== -->
+<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index:9999;">
+    <div id="app-toast" class="toast align-items-center border-0" role="alert">
+        <div class="d-flex">
+            <div class="toast-body" id="toast-body">消息</div>
+            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/marked/9.1.6/marked.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
+<script>
+'use strict';
+
+// ── Constants ──────────────────────────────────────────────────────────────
+const API_BASE          = 'https://api.xmoj-bbs.me/';
+const ASSET_BASE        = 'https://assets.xmoj-bbs.me/GetImage?ImageID=';
+const XMOJ_BASE        = 'https://www.xmoj.tech';
+const WEBUI_VERSION     = 'webui-1.0.0';
+const STORAGE_USER      = 'xmoj-msg-username';
+const STORAGE_SESSION   = 'xmoj-msg-phpsessid';
+const THREAD_REFRESH_MS = 10000;
+const SCROLL_THRESHOLD  = 80;
+const MAX_IMAGE_BYTES   = 5 * 1024 * 1024;
+const PREVIEW_LEN       = 60;
+
+// ── State ──────────────────────────────────────────────────────────────────
+let currentUser    = null;   // { username, phpsessid }
+let currentThread  = null;   // other user's username
+let refreshTimer   = null;
+let isFirstLoad    = true;
+
+// ── Bootstrap instances ────────────────────────────────────────────────────
+const toastEl    = document.getElementById('app-toast');
+const toastBS    = new bootstrap.Toast(toastEl, { delay: 3500 });
+const imgModalEl = document.getElementById('img-modal');
+const imgModalBS = new bootstrap.Modal(imgModalEl);
+
+// ── Utility ────────────────────────────────────────────────────────────────
+function showToast(msg, type) {
+    const body = document.getElementById('toast-body');
+    body.textContent = msg;
+    toastEl.className = 'toast align-items-center border-0 text-bg-' + (type || 'secondary');
+    toastBS.show();
+}
+
+function showScreen(id) {
+    ['screen-login', 'screen-list', 'screen-thread'].forEach(function(s) {
+        document.getElementById(s).style.display = s === id ? '' : 'none';
+    });
+}
+
+function escapeHtml(s) {
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+function renderMarkdown(md) {
+    var html = marked.parse(String(md || ''));
+    return DOMPurify.sanitize(html, {
+        ALLOWED_TAGS: ['p','br','strong','em','del','code','pre','blockquote',
+                       'ul','ol','li','a','img','h1','h2','h3','h4','h5','h6','table',
+                       'thead','tbody','tr','th','td','hr','span'],
+        ALLOWED_ATTR: ['href','src','alt','title','class','target','rel'],
+        FORCE_BODY: true,
+        ADD_ATTR: ['target'],
+        FORBID_SCRIPT: true,
+    });
+}
+
+function stripMarkdown(md) {
+    return String(md || '').replace(/!\[.*?\]\(.*?\)/g, '[图片]')
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+        .replace(/[*_`#>~]/g, '')
+        .replace(/\s+/g, ' ').trim();
+}
+
+function formatTime(ts) {
+    if (!ts) return '';
+    var d = new Date(ts * 1000);
+    var now = new Date();
+    var pad = function(n) { return String(n).padStart(2, '0'); };
+    if (d.toDateString() === now.toDateString()) {
+        return pad(d.getHours()) + ':' + pad(d.getMinutes());
+    }
+    return (d.getMonth() + 1) + '/' + d.getDate() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
+}
+
+function userLink(username) {
+    return '<a href="' + XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username) +
+           '" target="_blank" rel="noopener">' + escapeHtml(username) + '</a>';
+}
+
+// ── Theme ──────────────────────────────────────────────────────────────────
+function initTheme() {
+    var t = localStorage.getItem('xmoj-msg-theme') || 'auto';
+    applyTheme(t);
+}
+
+function applyTheme(t) {
+    var resolved = t === 'auto'
+        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+        : t;
+    document.documentElement.setAttribute('data-bs-theme', resolved);
+    localStorage.setItem('xmoj-msg-theme', t);
+    document.getElementById('btn-theme').title = '当前：' + (t === 'auto' ? '自动' : t === 'dark' ? '深色' : '浅色');
+}
+
+document.getElementById('btn-theme').addEventListener('click', function() {
+    var order = ['auto', 'dark', 'light'];
+    var cur = localStorage.getItem('xmoj-msg-theme') || 'auto';
+    var next = order[(order.indexOf(cur) + 1) % order.length];
+    applyTheme(next);
+});
+
+// ── Session ────────────────────────────────────────────────────────────────
+function saveSession(username, phpsessid) {
+    localStorage.setItem(STORAGE_USER, username);
+    localStorage.setItem(STORAGE_SESSION, phpsessid);
+    currentUser = { username: username, phpsessid: phpsessid };
+}
+
+function loadSession() {
+    var u = localStorage.getItem(STORAGE_USER);
+    var s = localStorage.getItem(STORAGE_SESSION);
+    if (u && s) {
+        currentUser = { username: u, phpsessid: s };
+        return true;
+    }
+    return false;
+}
+
+function logout() {
+    localStorage.removeItem(STORAGE_USER);
+    localStorage.removeItem(STORAGE_SESSION);
+    currentUser = null;
+    currentThread = null;
+    stopRefresh();
+    document.getElementById('nav-username').textContent = '';
+    document.getElementById('btn-logout').classList.add('d-none');
+    showScreen('screen-login');
+}
+
+function onLoggedIn() {
+    document.getElementById('nav-username').textContent = currentUser.username;
+    document.getElementById('btn-logout').classList.remove('d-none');
+    loadMailList();
+    showScreen('screen-list');
+}
+
+// ── API ────────────────────────────────────────────────────────────────────
+async function apiCall(action, data) {
+    var res = await fetch(API_BASE + action, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            Authentication: { SessionID: currentUser.phpsessid, Username: currentUser.username },
+            Data: data,
+            Version: WEBUI_VERSION
+        })
+    });
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    return res.json();
+}
+
+// ── Mail List ──────────────────────────────────────────────────────────────
+async function loadMailList() {
+    var tbody = document.getElementById('list-tbody');
+    tbody.innerHTML = '<tr id="list-loading-row"><td colspan="3" class="text-center text-body-secondary py-4">' +
+        '<span class="spinner-border spinner-border-sm me-2"></span>加载中…</td></tr>';
+    try {
+        var result = await apiCall('GetMailList', {});
+        var list = result && result.Data && result.Data.MailList;
+        if (!list || list.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="3" class="text-center text-body-secondary py-4">暂无消息</td></tr>';
+            return;
+        }
+        tbody.innerHTML = list.map(function(item) {
+            var hasUnread = item.UnreadCount > 0;
+            var preview = stripMarkdown(item.LastsMessage);
+            if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
+            return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
+                '<td>' + userLink(item.OtherUser) +
+                (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
+                '</td>' +
+                '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
+                '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
+                '</tr>';
+        }).join('');
+        tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
+            row.addEventListener('click', function(e) {
+                if (e.target.tagName === 'A') return;
+                openThread(row.dataset.user);
+            });
+        });
+    } catch (err) {
+        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-danger py-4">加载失败：' + escapeHtml(err.message) + '</td></tr>';
+        showToast('加载消息列表失败：' + err.message, 'danger');
+    }
+}
+
+// ── Thread ─────────────────────────────────────────────────────────────────
+function openThread(otherUser) {
+    currentThread = otherUser;
+    isFirstLoad = true;
+    document.getElementById('thread-title').textContent = '与 ' + otherUser + ' 的对话';
+    document.getElementById('thread-tbody').innerHTML =
+        '<tr id="thread-loading-row"><td colspan="4" class="text-center text-body-secondary py-4">' +
+        '<span class="spinner-border spinner-border-sm me-2"></span>加载中…</td></tr>';
+    showScreen('screen-thread');
+    loadThread();
+    startRefresh();
+    // Mark as read (fire-and-forget)
+    apiCall('ReadUserMailMention', { UserID: otherUser }).catch(function() {});
+}
+
+async function loadThread() {
+    if (!currentThread) return;
+    var scrollEl = document.getElementById('thread-messages');
+    var atBottom = isFirstLoad ||
+        (scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < SCROLL_THRESHOLD);
+    try {
+        var result = await apiCall('GetMail', { OtherUser: currentThread });
+        var mails = result && result.Data && result.Data.Mail;
+        var tbody = document.getElementById('thread-tbody');
+        if (!mails || mails.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="4" class="text-center text-body-secondary py-4">暂无消息</td></tr>';
+            return;
+        }
+        tbody.innerHTML = mails.map(function(m) {
+            var isUnread = !m.IsRead && m.FromUser !== currentUser.username;
+            return '<tr class="' + (isUnread ? 'table-primary' : '') + '">' +
+                '<td class="text-nowrap">' + userLink(m.FromUser) + '</td>' +
+                '<td class="msg-bubble-cell">' + renderMarkdown(m.Content) + '</td>' +
+                '<td class="text-nowrap text-body-secondary small">' + formatTime(m.SendTime) + '</td>' +
+                '<td class="text-nowrap small">' + (isUnread ? '<span class="badge text-bg-warning">未读</span>' : '<span class="text-body-secondary">已读</span>') + '</td>' +
+                '</tr>';
+        }).join('');
+        // Make images clickable
+        tbody.querySelectorAll('img').forEach(function(img) {
+            img.addEventListener('click', function() {
+                document.getElementById('img-modal-src').src = img.src;
+                imgModalBS.show();
+            });
+        });
+        // Make links open in new tab
+        tbody.querySelectorAll('a').forEach(function(a) {
+            a.setAttribute('target', '_blank');
+            a.setAttribute('rel', 'noopener noreferrer');
+        });
+        if (atBottom) {
+            scrollEl.scrollTop = scrollEl.scrollHeight;
+        }
+        isFirstLoad = false;
+    } catch (err) {
+        showToast('加载消息失败：' + err.message, 'danger');
+    }
+}
+
+// ── Send Message ───────────────────────────────────────────────────────────
+async function sendMessage() {
+    var textarea = document.getElementById('thread-compose');
+    var btn = document.getElementById('btn-thread-send');
+    var spinner = document.getElementById('send-spinner');
+    var content = textarea.value.trim();
+    if (!content) return;
+    btn.disabled = true;
+    spinner.classList.remove('d-none');
+    try {
+        await apiCall('SendMail', { ToUser: currentThread, Content: content });
+        textarea.value = '';
+        await loadThread();
+    } catch (err) {
+        showToast('发送失败：' + err.message, 'danger');
+    } finally {
+        btn.disabled = false;
+        spinner.classList.add('d-none');
+    }
+}
+
+// ── Compose (from list) ────────────────────────────────────────────────────
+async function sendCompose() {
+    var toInput = document.getElementById('compose-to');
+    var bodyInput = document.getElementById('compose-body');
+    var btn = document.getElementById('btn-compose-send');
+    var to = toInput.value.trim();
+    var content = bodyInput.value.trim();
+    if (!to || !content) { showToast('请填写收件人和消息内容', 'warning'); return; }
+    btn.disabled = true;
+    btn.textContent = '发送中…';
+    try {
+        await apiCall('SendMail', { ToUser: to, Content: content });
+        toInput.value = '';
+        bodyInput.value = '';
+        bootstrap.Collapse.getInstance(document.getElementById('compose-panel')).hide();
+        showToast('发送成功', 'success');
+        await loadMailList();
+    } catch (err) {
+        showToast('发送失败：' + err.message, 'danger');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = '发送';
+    }
+}
+
+// ── Image Upload ───────────────────────────────────────────────────────────
+function setUploadIndicator(msg) {
+    document.getElementById('upload-indicator').textContent = msg;
+}
+
+async function uploadImageData(dataUrl) {
+    var textarea = document.getElementById('thread-compose');
+    var placeholder = '![上传中…]()';
+    textarea.value += '\n' + placeholder;
+    setUploadIndicator('图片上传中…');
+    try {
+        var result = await apiCall('UploadImage', { Image: dataUrl });
+        var imageId = result && result.Data && result.Data.ImageID;
+        if (!imageId) throw new Error('未获取到 ImageID');
+        var mdImg = '![图片](' + ASSET_BASE + imageId + ')';
+        textarea.value = textarea.value.replace(placeholder, mdImg);
+        setUploadIndicator('');
+        showToast('图片上传成功', 'success');
+    } catch (err) {
+        textarea.value = textarea.value.replace('\n' + placeholder, '');
+        setUploadIndicator('');
+        showToast('图片上传失败：' + err.message, 'danger');
+    }
+}
+
+function handleImageFile(file) {
+    if (!file) return;
+    if (!['image/png', 'image/jpeg'].includes(file.type)) {
+        showToast('仅支持 PNG 和 JPEG 图片', 'warning');
+        return;
+    }
+    if (file.size > MAX_IMAGE_BYTES) {
+        showToast('图片大小不能超过 5 MB', 'warning');
+        return;
+    }
+    var reader = new FileReader();
+    reader.onload = function(e) { uploadImageData(e.target.result); };
+    reader.readAsDataURL(file);
+}
+
+// ── Auto Refresh ───────────────────────────────────────────────────────────
+function startRefresh() {
+    stopRefresh();
+    refreshTimer = setInterval(loadThread, THREAD_REFRESH_MS);
+}
+
+function stopRefresh() {
+    if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
+}
+
+// ── Bookmarklet ────────────────────────────────────────────────────────────
+function generateBookmarklet() {
+    var dest = location.origin + location.pathname;
+    // The bookmarklet reads cookie + username from XMOJ and redirects here
+    var code = '(function(){' +
+        'var m=document.cookie.match(/PHPSESSID=([^;]+)/);' +
+        'var s=m?m[1]:"";' +
+        'var el=document.querySelector("#profile a")||document.querySelector("#profile");' +
+        'var n=el?el.textContent.trim():"";' +
+        'if(!s||!n){alert("请先登录 XMOJ！");}' +
+        'else{location.href=' + JSON.stringify(dest) + '+"#session="+encodeURIComponent(n)+":"+encodeURIComponent(s);}' +
+        '})();';
+    return 'javascript:' + code;
+}
+
+function initBookmarklet() {
+    var link = document.getElementById('bookmarklet-link');
+    var code = generateBookmarklet();
+    link.href = code;
+    document.getElementById('btn-copy-bookmarklet').addEventListener('click', function() {
+        navigator.clipboard.writeText(code).then(function() {
+            showToast('已复制到剪贴板', 'success');
+        }).catch(function() {
+            showToast('复制失败，请手动复制', 'warning');
+        });
+    });
+}
+
+function checkSessionHash() {
+    var hash = location.hash;
+    if (!hash.startsWith('#session=')) return false;
+    var val = decodeURIComponent(hash.slice('#session='.length));
+    var idx = val.indexOf(':');
+    if (idx < 1) return false;
+    var username = val.slice(0, idx);
+    var phpsessid = val.slice(idx + 1);
+    if (!username || !phpsessid) return false;
+    saveSession(username, phpsessid);
+    history.replaceState(null, '', location.pathname);
+    return true;
+}
+
+// ── Login Tabs ─────────────────────────────────────────────────────────────
+document.querySelectorAll('#loginTabs .nav-link').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+        document.querySelectorAll('#loginTabs .nav-link').forEach(function(b) { b.classList.remove('active'); });
+        btn.classList.add('active');
+        var tab = btn.dataset.tab;
+        document.getElementById('tab-bookmarklet').style.display = tab === 'bookmarklet' ? '' : 'none';
+        document.getElementById('tab-manual').style.display = tab === 'manual' ? '' : 'none';
+    });
+});
+
+// ── Event Wiring ───────────────────────────────────────────────────────────
+document.getElementById('btn-manual-login').addEventListener('click', function() {
+    var username = document.getElementById('input-username').value.trim();
+    var phpsessid = document.getElementById('input-phpsessid').value.trim();
+    if (!username || !phpsessid) { showToast('请填写用户名和 PHPSESSID', 'warning'); return; }
+    saveSession(username, phpsessid);
+    onLoggedIn();
+});
+
+document.getElementById('btn-logout').addEventListener('click', logout);
+
+document.getElementById('btn-refresh-list').addEventListener('click', loadMailList);
+
+document.getElementById('btn-compose-send').addEventListener('click', sendCompose);
+
+document.getElementById('btn-back').addEventListener('click', function() {
+    stopRefresh();
+    currentThread = null;
+    showScreen('screen-list');
+    loadMailList();
+});
+
+document.getElementById('btn-refresh-thread').addEventListener('click', loadThread);
+
+document.getElementById('btn-thread-send').addEventListener('click', sendMessage);
+
+document.getElementById('thread-compose').addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' && e.ctrlKey) { e.preventDefault(); sendMessage(); }
+});
+
+document.getElementById('btn-upload-image').addEventListener('click', function() {
+    document.getElementById('file-input').click();
+});
+
+document.getElementById('file-input').addEventListener('change', function(e) {
+    handleImageFile(e.target.files[0]);
+    e.target.value = '';
+});
+
+document.getElementById('thread-compose').addEventListener('paste', function(e) {
+    var items = e.clipboardData && e.clipboardData.items;
+    if (!items) return;
+    for (var i = 0; i < items.length; i++) {
+        if (items[i].type.startsWith('image/')) {
+            e.preventDefault();
+            handleImageFile(items[i].getAsFile());
+            return;
+        }
+    }
+});
+
+document.getElementById('img-modal-src').addEventListener('click', function() {
+    imgModalBS.hide();
+});
+
+// Pause auto-refresh when tab is hidden
+document.addEventListener('visibilitychange', function() {
+    if (document.hidden) { stopRefresh(); }
+    else if (currentThread) { loadThread(); startRefresh(); }
+});
+
+// ── Boot ───────────────────────────────────────────────────────────────────
+(function init() {
+    initTheme();
+    initBookmarklet();
+
+    // Check for bookmarklet redirect
+    if (checkSessionHash()) {
+        onLoggedIn();
+        return;
+    }
+
+    if (loadSession()) {
+        onLoggedIn();
+    } else {
+        showScreen('screen-login');
+    }
+})();
+</script>
+</body>
+</html>

From 8e93694f718e9c363a0ae9304b9bc71d40e7ae0b Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 16:31:19 +0800
Subject: [PATCH 02/22] fix: replace bootcdn with jsDelivr in messages.html

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/messages.html b/messages.html
index 6421be0d..7508e9ca 100644
--- a/messages.html
+++ b/messages.html
@@ -6,7 +6,7 @@
     <meta name="color-scheme" content="light dark">
     <title>短消息 WebUI — XMOJ-Script</title>
     <link rel="icon" href="favicon.ico">
-    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body { padding-top: 56px; }
         #thread-messages { max-height: 60vh; overflow-y: auto; }
@@ -224,9 +224,9 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     </div>
 </div>
 
-<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
-<script src="https://cdn.bootcdn.net/ajax/libs/marked/9.1.6/marked.min.js"></script>
-<script src="https://cdn.bootcdn.net/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
 <script>
 'use strict';
 

From 2713021d5d1be2733905f1ae0c565f41c32a7beb Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 16:32:39 +0800
Subject: [PATCH 03/22] fix: switch CDN from jsDelivr to cdnjs (Cloudflare) for
 China accessibility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/messages.html b/messages.html
index 7508e9ca..0ddb8745 100644
--- a/messages.html
+++ b/messages.html
@@ -6,7 +6,7 @@
     <meta name="color-scheme" content="light dark">
     <title>短消息 WebUI — XMOJ-Script</title>
     <link rel="icon" href="favicon.ico">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body { padding-top: 56px; }
         #thread-messages { max-height: 60vh; overflow-y: auto; }
@@ -224,9 +224,9 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
 <script>
 'use strict';
 

From 30e68f6d9954a3b04586e8c43565cc6a3e426b08 Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 16:36:54 +0800
Subject: [PATCH 04/22] fix: replace bookmarklet-first login with session login
 + per-browser instructions

Bookmarklets are not usable on mobile and confusing on desktop.
Make the session (PHPSESSID) tab the default with an accordion of
step-by-step instructions for Chrome, Firefox, Safari (macOS), and
iOS/iPadOS. Bookmarklet tab kept as secondary option for desktop users.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 155 +++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 127 insertions(+), 28 deletions(-)

diff --git a/messages.html b/messages.html
index 0ddb8745..87d0f3f2 100644
--- a/messages.html
+++ b/messages.html
@@ -51,25 +51,142 @@
 </nav>
 
 <!-- ==================== SCREEN: LOGIN ==================== -->
-<div id="screen-login" class="container py-4" style="max-width:480px;">
-    <h4 class="mb-3">登录</h4>
-    <p class="text-body-secondary small">短消息 WebUI 让您无需安装用户脚本即可收发 XMOJ 站内短消息，适用于 iOS/iPadOS 等不支持用户脚本的设备。</p>
+<div id="screen-login" class="container py-4" style="max-width:520px;">
+    <h4 class="mb-1">登录</h4>
+    <p class="text-body-secondary small mb-3">无需安装用户脚本，在任意浏览器（包括 iOS Safari）收发 XMOJ 站内短消息。</p>
 
     <ul class="nav nav-tabs mb-3" id="loginTabs">
         <li class="nav-item">
-            <button class="nav-link active" data-tab="bookmarklet">书签登录（推荐）</button>
+            <button class="nav-link active" data-tab="manual">会话登录</button>
         </li>
         <li class="nav-item">
-            <button class="nav-link" data-tab="manual">手动输入</button>
+            <button class="nav-link" data-tab="bookmarklet">书签登录（桌面端）</button>
         </li>
     </ul>
 
-    <!-- Tab: Bookmarklet -->
-    <div id="tab-bookmarklet">
+    <!-- Tab: Manual (default) -->
+    <div id="tab-manual">
+        <p class="small text-body-secondary">
+            先在 <a href="https://www.xmoj.tech" target="_blank" rel="noopener">xmoj.tech</a> 完成登录，
+            再按下方说明找到您的用户名和会话 ID（PHPSESSID）并填入。
+        </p>
+
+        <!-- How-to accordion -->
+        <div class="accordion mb-3" id="howto-accordion">
+            <div class="accordion-item">
+                <h2 class="accordion-header">
+                    <button class="accordion-button collapsed small py-2" type="button"
+                            data-bs-toggle="collapse" data-bs-target="#howto-chrome">
+                        Chrome / Edge / 其他 Chromium 浏览器
+                    </button>
+                </h2>
+                <div id="howto-chrome" class="accordion-collapse collapse" data-bs-parent="#howto-accordion">
+                    <div class="accordion-body small">
+                        <ol class="mb-0 ps-3">
+                            <li>打开 <a href="https://www.xmoj.tech" target="_blank" rel="noopener">xmoj.tech</a> 并登录。</li>
+                            <li>按 <kbd>F12</kbd> 打开开发者工具。</li>
+                            <li>切换到"应用"（Application）标签页。</li>
+                            <li>左侧展开"Cookie" → 点击 <code>https://www.xmoj.tech</code>。</li>
+                            <li>在列表中找到 <code>PHPSESSID</code>，复制其"值"列。</li>
+                            <li>用户名可在页面右上角个人信息处查看。</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <div class="accordion-item">
+                <h2 class="accordion-header">
+                    <button class="accordion-button collapsed small py-2" type="button"
+                            data-bs-toggle="collapse" data-bs-target="#howto-firefox">
+                        Firefox
+                    </button>
+                </h2>
+                <div id="howto-firefox" class="accordion-collapse collapse" data-bs-parent="#howto-accordion">
+                    <div class="accordion-body small">
+                        <ol class="mb-0 ps-3">
+                            <li>打开 <a href="https://www.xmoj.tech" target="_blank" rel="noopener">xmoj.tech</a> 并登录。</li>
+                            <li>按 <kbd>F12</kbd> 打开开发者工具。</li>
+                            <li>切换到"存储"（Storage）标签页。</li>
+                            <li>左侧展开"Cookie" → 点击 <code>https://www.xmoj.tech</code>。</li>
+                            <li>在列表中找到 <code>PHPSESSID</code>，复制其"值"列。</li>
+                            <li>用户名可在页面右上角个人信息处查看。</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <div class="accordion-item">
+                <h2 class="accordion-header">
+                    <button class="accordion-button collapsed small py-2" type="button"
+                            data-bs-toggle="collapse" data-bs-target="#howto-safari-mac">
+                        Safari（macOS）
+                    </button>
+                </h2>
+                <div id="howto-safari-mac" class="accordion-collapse collapse" data-bs-parent="#howto-accordion">
+                    <div class="accordion-body small">
+                        <ol class="mb-0 ps-3">
+                            <li>在菜单栏选择"Safari" → "偏好设置" → "高级"，勾选"在菜单栏中显示开发菜单"。</li>
+                            <li>打开 <a href="https://www.xmoj.tech" target="_blank" rel="noopener">xmoj.tech</a> 并登录。</li>
+                            <li>菜单栏选择"开发" → "显示 Web 检查器"。</li>
+                            <li>切换到"存储"标签页 → "Cookie" → 找到 <code>PHPSESSID</code>。</li>
+                            <li>用户名可在页面右上角个人信息处查看。</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <div class="accordion-item">
+                <h2 class="accordion-header">
+                    <button class="accordion-button collapsed small py-2" type="button"
+                            data-bs-toggle="collapse" data-bs-target="#howto-ios">
+                        iOS / iPadOS Safari
+                    </button>
+                </h2>
+                <div id="howto-ios" class="accordion-collapse collapse" data-bs-parent="#howto-accordion">
+                    <div class="accordion-body small">
+                        <p class="mb-2">iOS Safari 不提供直接查看 Cookie 的界面。有以下两种方法：</p>
+                        <p class="fw-semibold mb-1">方法一：使用桌面端获取后手动输入</p>
+                        <ol class="mb-2 ps-3">
+                            <li>在桌面浏览器（Chrome/Firefox/Safari）中按上方说明找到 PHPSESSID。</li>
+                            <li>将值记录下来，在此处手动填入。</li>
+                        </ol>
+                        <p class="fw-semibold mb-1">方法二：连接 Mac 使用 Safari Web 检查器</p>
+                        <ol class="mb-0 ps-3">
+                            <li>在 iOS 设置 → Safari → 高级 中，打开"Web 检查器"。</li>
+                            <li>用数据线将设备连接到 Mac。</li>
+                            <li>在 Mac 的 Safari → 开发菜单中找到您的设备和 xmoj.tech。</li>
+                            <li>在存储标签页中找到 <code>PHPSESSID</code>。</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card border-0 shadow-sm">
+            <div class="card-body">
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control" id="input-username" placeholder="用户名"
+                           autocomplete="username" autocapitalize="none">
+                    <label for="input-username">用户名</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control font-monospace" id="input-phpsessid"
+                           placeholder="PHPSESSID" autocomplete="off" autocapitalize="none">
+                    <label for="input-phpsessid">PHPSESSID（会话 ID）</label>
+                </div>
+                <button class="btn btn-primary w-100" id="btn-manual-login">登录</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tab: Bookmarklet (desktop only) -->
+    <div id="tab-bookmarklet" style="display:none;">
+        <div class="alert alert-info small py-2">
+            书签登录仅适用于桌面浏览器（Chrome/Firefox/Edge），移动端请使用"会话登录"。
+        </div>
         <div class="card border-0 shadow-sm mb-3">
             <div class="card-body">
                 <h6 class="card-title">第一步：添加书签</h6>
-                <p class="card-text small text-body-secondary">将下方链接拖动到浏览器书签栏，或复制代码手动新建书签。</p>
+                <p class="card-text small text-body-secondary">
+                    将下方按钮<strong>拖动到书签栏</strong>，或点击"复制代码"后手动新建书签并粘贴为网址。
+                </p>
                 <div class="d-flex gap-2 align-items-start flex-wrap">
                     <a id="bookmarklet-link" href="#" class="btn btn-outline-primary bookmarklet-link"
                        onclick="return false;" draggable="true">&#128278; 登录到短消息 WebUI</a>
@@ -79,33 +196,15 @@ <h6 class="card-title">第一步：添加书签</h6>
         </div>
         <div class="card border-0 shadow-sm">
             <div class="card-body">
-                <h6 class="card-title">第二步：在 XMOJ 上使用书签</h6>
+                <h6 class="card-title">第二步：在 XMOJ 上点击书签</h6>
                 <ol class="small text-body-secondary mb-0">
-                    <li>前往 <a href="https://www.xmoj.tech" target="_blank">xmoj.tech</a> 并登录。</li>
+                    <li>前往 <a href="https://www.xmoj.tech" target="_blank" rel="noopener">xmoj.tech</a> 并登录。</li>
                     <li>点击刚才添加的书签。</li>
                     <li>页面会自动跳转回此处并完成登录。</li>
                 </ol>
             </div>
         </div>
     </div>
-
-    <!-- Tab: Manual -->
-    <div id="tab-manual" style="display:none;">
-        <div class="card border-0 shadow-sm">
-            <div class="card-body">
-                <p class="small text-body-secondary">在 xmoj.tech 登录后，从 Cookie 中获取 PHPSESSID（可用浏览器开发者工具查看）。</p>
-                <div class="form-floating mb-3">
-                    <input type="text" class="form-control" id="input-username" placeholder="用户名">
-                    <label for="input-username">用户名</label>
-                </div>
-                <div class="form-floating mb-3">
-                    <input type="text" class="form-control font-monospace" id="input-phpsessid" placeholder="PHPSESSID">
-                    <label for="input-phpsessid">PHPSESSID</label>
-                </div>
-                <button class="btn btn-primary w-100" id="btn-manual-login">登录</button>
-            </div>
-        </div>
-    </div>
 </div>
 
 <!-- ==================== SCREEN: MAIL LIST ==================== -->

From a1ca4e59252afcfef620ddcec16467addef114d4 Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 16:44:29 +0800
Subject: [PATCH 05/22] fix: add required DebugMode field to API request body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

API returns "参数DebugMode未找到" without it, causing all calls to fail.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/messages.html b/messages.html
index 87d0f3f2..a10061a8 100644
--- a/messages.html
+++ b/messages.html
@@ -476,7 +476,8 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
         body: JSON.stringify({
             Authentication: { SessionID: currentUser.phpsessid, Username: currentUser.username },
             Data: data,
-            Version: WEBUI_VERSION
+            Version: WEBUI_VERSION,
+            DebugMode: false
         })
     });
     if (!res.ok) throw new Error('HTTP ' + res.status);

From 1b811da026974ba09074d3c6b8c6eec0d93c2696 Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 16:48:49 +0800
Subject: [PATCH 06/22] fix: decouple IsRead status display from message sender
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Status badge (未读/已读) now reflects IsRead directly.
Row highlight (table-primary) still only applies to incoming unread messages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/messages.html b/messages.html
index a10061a8..2deedefb 100644
--- a/messages.html
+++ b/messages.html
@@ -549,8 +549,9 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
             return;
         }
         tbody.innerHTML = mails.map(function(m) {
-            var isUnread = !m.IsRead && m.FromUser !== currentUser.username;
-            return '<tr class="' + (isUnread ? 'table-primary' : '') + '">' +
+            var isUnread = !m.IsRead;
+            var isHighlight = isUnread && m.FromUser !== currentUser.username;
+            return '<tr class="' + (isHighlight ? 'table-primary' : '') + '">' +
                 '<td class="text-nowrap">' + userLink(m.FromUser) + '</td>' +
                 '<td class="msg-bubble-cell">' + renderMarkdown(m.Content) + '</td>' +
                 '<td class="text-nowrap text-body-secondary small">' + formatTime(m.SendTime) + '</td>' +

From 380cc233d771ab942381e2930059a3e7c39f1724 Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 16:57:48 +0800
Subject: [PATCH 07/22] fix: sort thread messages oldest-first so newest
 appears at bottom

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/messages.html b/messages.html
index 2deedefb..742c84ef 100644
--- a/messages.html
+++ b/messages.html
@@ -548,6 +548,7 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
             tbody.innerHTML = '<tr><td colspan="4" class="text-center text-body-secondary py-4">暂无消息</td></tr>';
             return;
         }
+        mails.sort(function(a, b) { return a.SendTime - b.SendTime; });
         tbody.innerHTML = mails.map(function(m) {
             var isUnread = !m.IsRead;
             var isHighlight = isUnread && m.FromUser !== currentUser.username;

From 6d2a5a71daf118e8162377a5210dfe51a833638d Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 17:01:56 +0800
Subject: [PATCH 08/22] fix: switch index.html CDN from bootcdn to cdnjs
 (Cloudflare)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 07c17b00..30a99ba7 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,8 @@
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6214673028530012"
      crossorigin="anonymous"></script>
     <meta name="viewport" content="width=device-width">
-    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
     <title>小明的OJ增强脚本</title>
 </head>
 

From 75a851d46b768fa7227aaef1a21048d63716c76e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:02:14 +0000
Subject: [PATCH 09/22] Initial plan


From 7bb1777f4c1fb0d9f71c6cd4d752fb7729981287 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:07:53 +0000
Subject: [PATCH 10/22] feat: improve messages.html UX per feedback

- Desktop/mobile login tab priority: bookmarklet on desktop (pointer: fine), session on mobile
- Replace sender name links with Bootstrap popovers showing user info popup
- Image zoom: cursor: zoom-in/zoom-out, title tooltip on images
- Global Ctrl+V paste handler for images anywhere in thread view
- Auto-resize compose textarea as user types

Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com>
---
 messages.html | 105 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 92 insertions(+), 13 deletions(-)

diff --git a/messages.html b/messages.html
index 742c84ef..e664b71d 100644
--- a/messages.html
+++ b/messages.html
@@ -10,11 +10,15 @@
     <style>
         body { padding-top: 56px; }
         #thread-messages { max-height: 60vh; overflow-y: auto; }
-        #thread-messages img { max-width: 100%; max-height: 300px; object-fit: contain; cursor: pointer; }
+        #thread-messages img { max-width: 100%; max-height: 300px; object-fit: contain; cursor: zoom-in; }
         .compose-sticky { position: sticky; bottom: 0; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 0.75rem 0; }
         .msg-bubble-cell { word-break: break-word; max-width: 60vw; }
         #upload-indicator { font-size: 0.8em; }
         .bookmarklet-link { cursor: grab; }
+        .user-info-btn { font-size: inherit; vertical-align: baseline; text-decoration: none; }
+        .user-info-btn:hover { text-decoration: underline; }
+        #img-modal .modal-body { cursor: zoom-out; }
+        #thread-compose { resize: none; overflow-y: hidden; }
     </style>
     <script>
         (function() {
@@ -406,11 +410,47 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     return (d.getMonth() + 1) + '/' + d.getDate() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
 }
 
-function userLink(username) {
-    return '<a href="' + XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username) +
-           '" target="_blank" rel="noopener">' + escapeHtml(username) + '</a>';
+// Popover state for user info buttons
+var _activePopoverBtn = null;
+
+function userSpan(username) {
+    return '<button type="button" class="btn btn-link p-0 user-info-btn" ' +
+           'data-username="' + escapeHtml(username) + '">' +
+           escapeHtml(username) + '</button>';
+}
+
+function initUserButtons(container) {
+    container.querySelectorAll('.user-info-btn').forEach(function(btn) {
+        var username = btn.dataset.username;
+        var popover = new bootstrap.Popover(btn, {
+            trigger: 'click',
+            html: true,
+            placement: 'top',
+            title: '<strong>' + escapeHtml(username) + '</strong>',
+            content: '<a href="' + XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username) +
+                     '" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary w-100">查看用户资料</a>',
+        });
+        btn.addEventListener('show.bs.popover', function() {
+            if (_activePopoverBtn && _activePopoverBtn !== btn) {
+                var prev = bootstrap.Popover.getInstance(_activePopoverBtn);
+                if (prev) prev.hide();
+            }
+            _activePopoverBtn = btn;
+        });
+        btn.addEventListener('hidden.bs.popover', function() {
+            if (_activePopoverBtn === btn) _activePopoverBtn = null;
+        });
+    });
 }
 
+// Close active popover when clicking outside
+document.addEventListener('click', function(e) {
+    if (_activePopoverBtn && !_activePopoverBtn.contains(e.target) && !e.target.closest('.popover')) {
+        var inst = bootstrap.Popover.getInstance(_activePopoverBtn);
+        if (inst) inst.hide();
+    }
+});
+
 // ── Theme ──────────────────────────────────────────────────────────────────
 function initTheme() {
     var t = localStorage.getItem('xmoj-msg-theme') || 'auto';
@@ -501,16 +541,17 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
             var preview = stripMarkdown(item.LastsMessage);
             if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
             return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
-                '<td>' + userLink(item.OtherUser) +
+                '<td>' + userSpan(item.OtherUser) +
                 (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
                 '</td>' +
                 '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
                 '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
                 '</tr>';
         }).join('');
+        initUserButtons(tbody);
         tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
             row.addEventListener('click', function(e) {
-                if (e.target.tagName === 'A') return;
+                if (e.target.closest('.user-info-btn') || e.target.closest('.popover')) return;
                 openThread(row.dataset.user);
             });
         });
@@ -553,14 +594,16 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
             var isUnread = !m.IsRead;
             var isHighlight = isUnread && m.FromUser !== currentUser.username;
             return '<tr class="' + (isHighlight ? 'table-primary' : '') + '">' +
-                '<td class="text-nowrap">' + userLink(m.FromUser) + '</td>' +
+                '<td class="text-nowrap">' + userSpan(m.FromUser) + '</td>' +
                 '<td class="msg-bubble-cell">' + renderMarkdown(m.Content) + '</td>' +
                 '<td class="text-nowrap text-body-secondary small">' + formatTime(m.SendTime) + '</td>' +
                 '<td class="text-nowrap small">' + (isUnread ? '<span class="badge text-bg-warning">未读</span>' : '<span class="text-body-secondary">已读</span>') + '</td>' +
                 '</tr>';
         }).join('');
-        // Make images clickable
+        initUserButtons(tbody);
+        // Make images clickable to zoom
         tbody.querySelectorAll('img').forEach(function(img) {
+            img.title = '点击放大';
             img.addEventListener('click', function() {
                 document.getElementById('img-modal-src').src = img.src;
                 imgModalBS.show();
@@ -719,13 +762,17 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 }
 
 // ── Login Tabs ─────────────────────────────────────────────────────────────
+function setLoginTab(tab) {
+    document.querySelectorAll('#loginTabs .nav-link').forEach(function(b) {
+        b.classList.toggle('active', b.dataset.tab === tab);
+    });
+    document.getElementById('tab-bookmarklet').style.display = tab === 'bookmarklet' ? '' : 'none';
+    document.getElementById('tab-manual').style.display = tab === 'manual' ? '' : 'none';
+}
+
 document.querySelectorAll('#loginTabs .nav-link').forEach(function(btn) {
     btn.addEventListener('click', function() {
-        document.querySelectorAll('#loginTabs .nav-link').forEach(function(b) { b.classList.remove('active'); });
-        btn.classList.add('active');
-        var tab = btn.dataset.tab;
-        document.getElementById('tab-bookmarklet').style.display = tab === 'bookmarklet' ? '' : 'none';
-        document.getElementById('tab-manual').style.display = tab === 'manual' ? '' : 'none';
+        setLoginTab(btn.dataset.tab);
     });
 });
 
@@ -780,6 +827,32 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     }
 });
 
+// Auto-resize textarea as user types
+(function() {
+    var ta = document.getElementById('thread-compose');
+    function autoResize() {
+        ta.style.height = 'auto';
+        ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
+    }
+    ta.addEventListener('input', autoResize);
+    autoResize();
+})();
+
+// Global paste handler: upload image from clipboard when in thread view
+document.addEventListener('paste', function(e) {
+    if (document.getElementById('screen-thread').style.display === 'none') return;
+    if (e.defaultPrevented) return; // already handled by local handler
+    var items = e.clipboardData && e.clipboardData.items;
+    if (!items) return;
+    for (var i = 0; i < items.length; i++) {
+        if (items[i].type.startsWith('image/')) {
+            e.preventDefault();
+            handleImageFile(items[i].getAsFile());
+            return;
+        }
+    }
+});
+
 document.getElementById('img-modal-src').addEventListener('click', function() {
     imgModalBS.hide();
 });
@@ -795,6 +868,12 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     initTheme();
     initBookmarklet();
 
+    // Set default login tab: bookmarklet on desktop, session login on mobile
+    var isDesktop = window.matchMedia
+        ? window.matchMedia('(pointer: fine)').matches
+        : (!('ontouchstart' in window) && window.innerWidth >= 1024);
+    setLoginTab(isDesktop ? 'bookmarklet' : 'manual');
+
     // Check for bookmarklet redirect
     if (checkSessionHash()) {
         onLoggedIn();

From a1e6eac1b0a78fa341e931a54377abd2b1c1284e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:11:20 +0000
Subject: [PATCH 11/22] fix: add year prefix to formatTime when message is from
 a previous year

Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com>
---
 messages.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/messages.html b/messages.html
index e664b71d..5e67b70a 100644
--- a/messages.html
+++ b/messages.html
@@ -407,7 +407,9 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     if (d.toDateString() === now.toDateString()) {
         return pad(d.getHours()) + ':' + pad(d.getMinutes());
     }
-    return (d.getMonth() + 1) + '/' + d.getDate() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
+    var datePart = (d.getFullYear() !== now.getFullYear() ? d.getFullYear() + '/' : '') +
+        (d.getMonth() + 1) + '/' + d.getDate();
+    return datePart + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
 }
 
 // Popover state for user info buttons

From e8640be84c3f283d8f9daf5d0e5301e9d703882c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:17:22 +0000
Subject: [PATCH 12/22] fix: remove table-light from thead to fix dark mode
 color on user row

Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com>
---
 messages.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/messages.html b/messages.html
index 5e67b70a..3e99370a 100644
--- a/messages.html
+++ b/messages.html
@@ -240,7 +240,7 @@ <h5 class="mb-0">收件箱</h5>
     <!-- Mail list table -->
     <div class="table-responsive">
         <table class="table table-hover table-borderless align-middle">
-            <thead class="table-light">
+            <thead>
                 <tr>
                     <th>用户</th>
                     <th>最新消息</th>
@@ -269,7 +269,7 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     <!-- Messages table -->
     <div id="thread-messages" class="mb-2">
         <table class="table table-hover table-borderless align-top">
-            <thead class="table-light">
+            <thead>
                 <tr>
                     <th class="text-nowrap">发送者</th>
                     <th>内容</th>

From ff05e25412a8a4bf1e8840b7714a9338254f64f6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:33:13 +0000
Subject: [PATCH 13/22] fix(messages.html): dark mode table-primary, year
 display bug, user info modal

Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com>
---
 messages.html | 131 ++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 96 insertions(+), 35 deletions(-)

diff --git a/messages.html b/messages.html
index 3e99370a..7e2fd96c 100644
--- a/messages.html
+++ b/messages.html
@@ -19,6 +19,13 @@
         .user-info-btn:hover { text-decoration: underline; }
         #img-modal .modal-body { cursor: zoom-out; }
         #thread-compose { resize: none; overflow-y: hidden; }
+        /* Bootstrap 5.3.3 does not ship dark-mode overrides for .table-primary;
+           supply them here using Bootstrap's own semantic color tokens. */
+        [data-bs-theme="dark"] .table-primary {
+            --bs-table-color: var(--bs-primary-text-emphasis);
+            --bs-table-bg: var(--bs-primary-bg-subtle);
+            --bs-table-border-color: var(--bs-primary-border-subtle);
+        }
     </style>
     <script>
         (function() {
@@ -306,6 +313,24 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     </div>
 </div>
 
+<!-- ==================== USER INFO MODAL ==================== -->
+<div class="modal fade" id="user-info-modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body" id="user-info-modal-body"></div>
+            <div class="modal-footer">
+                <a id="user-info-profile-link" href="#" target="_blank" rel="noopener"
+                   class="btn btn-primary">查看完整资料</a>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- ==================== IMAGE VIEWER MODAL ==================== -->
 <div class="modal fade" id="img-modal" tabindex="-1">
     <div class="modal-dialog modal-xl modal-dialog-centered">
@@ -352,10 +377,11 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 let isFirstLoad    = true;
 
 // ── Bootstrap instances ────────────────────────────────────────────────────
-const toastEl    = document.getElementById('app-toast');
-const toastBS    = new bootstrap.Toast(toastEl, { delay: 3500 });
-const imgModalEl = document.getElementById('img-modal');
-const imgModalBS = new bootstrap.Modal(imgModalEl);
+const toastEl        = document.getElementById('app-toast');
+const toastBS        = new bootstrap.Toast(toastEl, { delay: 3500 });
+const imgModalEl     = document.getElementById('img-modal');
+const imgModalBS     = new bootstrap.Modal(imgModalEl);
+const userInfoModalBS = new bootstrap.Modal(document.getElementById('user-info-modal'));
 
 // ── Utility ────────────────────────────────────────────────────────────────
 function showToast(msg, type) {
@@ -401,7 +427,7 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 
 function formatTime(ts) {
     if (!ts) return '';
-    var d = new Date(ts * 1000);
+    var d = new Date(ts);
     var now = new Date();
     var pad = function(n) { return String(n).padStart(2, '0'); };
     if (d.toDateString() === now.toDateString()) {
@@ -412,47 +438,82 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     return datePart + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
 }
 
-// Popover state for user info buttons
-var _activePopoverBtn = null;
-
 function userSpan(username) {
     return '<button type="button" class="btn btn-link p-0 user-info-btn" ' +
            'data-username="' + escapeHtml(username) + '">' +
            escapeHtml(username) + '</button>';
 }
 
+async function showUserInfo(username) {
+    var title = document.getElementById('user-info-modal-title');
+    var body = document.getElementById('user-info-modal-body');
+    var profileLink = document.getElementById('user-info-profile-link');
+    var profileUrl = XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username);
+
+    title.textContent = username;
+    profileLink.href = profileUrl;
+    body.innerHTML = '<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>加载中…</div>';
+    userInfoModalBS.show();
+
+    try {
+        var res = await fetch(profileUrl);
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        var html = await res.text();
+
+        if (html.indexOf('No such User!') !== -1) {
+            body.innerHTML = '<p class="text-body-secondary mb-0">用户不存在。</p>';
+            return;
+        }
+
+        var doc = new DOMParser().parseFromString(html, 'text/html');
+
+        var captionEl = doc.querySelector('#statics > caption');
+        var nickname = '';
+        if (captionEl) {
+            // Caption text format: "UserID--Nickname"
+            var parts = captionEl.textContent.trim().split('--');
+            if (parts.length > 1) nickname = parts[1].trim();
+        }
+
+        var submitEl = doc.querySelector('#statics > tbody > tr:nth-child(3) > td:nth-child(2)');
+        var acceptEl = doc.querySelector('#statics > tbody > tr:nth-child(4) > td:nth-child(2)');
+        var submitCount = submitEl ? (parseInt(submitEl.textContent.trim()) || 0) : 0;
+        var acceptCount = acceptEl ? (parseInt(acceptEl.textContent.trim()) || 0) : 0;
+        var rating = submitCount > 0 ? ((acceptCount / submitCount) * 1000).toFixed(1) : '—';
+
+        var tbodyRows = doc.querySelectorAll('#statics > tbody > tr');
+        var email = '';
+        if (tbodyRows.length > 0) {
+            var lastCells = tbodyRows[tbodyRows.length - 1].querySelectorAll('td');
+            if (lastCells.length >= 2) email = lastCells[1].textContent.trim();
+        }
+
+        var rows = [];
+        if (nickname) rows.push(['昵称', escapeHtml(nickname)]);
+        rows.push(['评分', escapeHtml(acceptCount + ' / ' + submitCount) +
+            ' <span class="text-body-secondary small ms-1">(' + escapeHtml(String(rating)) + ')</span>']);
+        if (email) rows.push(['邮箱', '<a href="mailto:' + escapeHtml(email) + '">' + escapeHtml(email) + '</a>']);
+
+        body.innerHTML = '<dl class="row mb-0">' +
+            rows.map(function(r) {
+                return '<dt class="col-4 text-truncate">' + r[0] + '</dt>' +
+                       '<dd class="col-8 mb-2">' + r[1] + '</dd>';
+            }).join('') +
+            '</dl>';
+    } catch (e) {
+        body.innerHTML = '<p class="text-body-secondary mb-0">无法加载用户信息，请直接访问资料页面。</p>';
+    }
+}
+
 function initUserButtons(container) {
     container.querySelectorAll('.user-info-btn').forEach(function(btn) {
-        var username = btn.dataset.username;
-        var popover = new bootstrap.Popover(btn, {
-            trigger: 'click',
-            html: true,
-            placement: 'top',
-            title: '<strong>' + escapeHtml(username) + '</strong>',
-            content: '<a href="' + XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username) +
-                     '" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary w-100">查看用户资料</a>',
-        });
-        btn.addEventListener('show.bs.popover', function() {
-            if (_activePopoverBtn && _activePopoverBtn !== btn) {
-                var prev = bootstrap.Popover.getInstance(_activePopoverBtn);
-                if (prev) prev.hide();
-            }
-            _activePopoverBtn = btn;
-        });
-        btn.addEventListener('hidden.bs.popover', function() {
-            if (_activePopoverBtn === btn) _activePopoverBtn = null;
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            showUserInfo(btn.dataset.username);
         });
     });
 }
 
-// Close active popover when clicking outside
-document.addEventListener('click', function(e) {
-    if (_activePopoverBtn && !_activePopoverBtn.contains(e.target) && !e.target.closest('.popover')) {
-        var inst = bootstrap.Popover.getInstance(_activePopoverBtn);
-        if (inst) inst.hide();
-    }
-});
-
 // ── Theme ──────────────────────────────────────────────────────────────────
 function initTheme() {
     var t = localStorage.getItem('xmoj-msg-theme') || 'auto';
@@ -553,7 +614,7 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
         initUserButtons(tbody);
         tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
             row.addEventListener('click', function(e) {
-                if (e.target.closest('.user-info-btn') || e.target.closest('.popover')) return;
+                if (e.target.closest('.user-info-btn')) return;
                 openThread(row.dataset.user);
             });
         });

From 7678bd51ef89492d8d24eb222e5c9eb9ebddb4fa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:41:02 +0000
Subject: [PATCH 14/22] fix(messages.html): set Referer to xmoj.tech and
 include credentials in userinfo fetch

Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com>
---
 messages.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/messages.html b/messages.html
index 7e2fd96c..d0ca90b4 100644
--- a/messages.html
+++ b/messages.html
@@ -456,7 +456,10 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
     userInfoModalBS.show();
 
     try {
-        var res = await fetch(profileUrl);
+        var res = await fetch(profileUrl, {
+            referrer: XMOJ_BASE + '/',
+            credentials: 'include'
+        });
         if (!res.ok) throw new Error('HTTP ' + res.status);
         var html = await res.text();
 

From 5a4b175b7e56cf0f9f0413e2ae41a6d8ef01ba02 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:47:00 +0000
Subject: [PATCH 15/22] feat(messages.html): add local contact search box to
 mail list

Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com>
---
 messages.html | 67 ++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/messages.html b/messages.html
index d0ca90b4..d1f88849 100644
--- a/messages.html
+++ b/messages.html
@@ -229,6 +229,12 @@ <h5 class="mb-0">收件箱</h5>
         </div>
     </div>
 
+    <!-- Search contacts -->
+    <div class="mb-2">
+        <input type="search" class="form-control form-control-sm" id="list-search"
+               placeholder="搜索联系人…" autocomplete="off" autocapitalize="none">
+    </div>
+
     <!-- Compose new message -->
     <div class="collapse mb-3" id="compose-panel">
         <div class="card card-body border-0 shadow-sm">
@@ -375,6 +381,7 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 let currentThread  = null;   // other user's username
 let refreshTimer   = null;
 let isFirstLoad    = true;
+let mailListCache  = [];     // last fetched mail list (for local search)
 
 // ── Bootstrap instances ────────────────────────────────────────────────────
 const toastEl        = document.getElementById('app-toast');
@@ -591,6 +598,38 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 }
 
 // ── Mail List ──────────────────────────────────────────────────────────────
+function renderMailList(query) {
+    var tbody = document.getElementById('list-tbody');
+    var q = query ? query.trim().toLowerCase() : '';
+    var list = q
+        ? mailListCache.filter(function(item) { return item.OtherUser.toLowerCase().indexOf(q) !== -1; })
+        : mailListCache;
+    if (list.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-body-secondary py-4">' +
+            (q ? '未找到匹配的联系人' : '暂无消息') + '</td></tr>';
+        return;
+    }
+    tbody.innerHTML = list.map(function(item) {
+        var hasUnread = item.UnreadCount > 0;
+        var preview = stripMarkdown(item.LastsMessage);
+        if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
+        return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
+            '<td>' + userSpan(item.OtherUser) +
+            (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
+            '</td>' +
+            '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
+            '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
+            '</tr>';
+    }).join('');
+    initUserButtons(tbody);
+    tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
+        row.addEventListener('click', function(e) {
+            if (e.target.closest('.user-info-btn')) return;
+            openThread(row.dataset.user);
+        });
+    });
+}
+
 async function loadMailList() {
     var tbody = document.getElementById('list-tbody');
     tbody.innerHTML = '<tr id="list-loading-row"><td colspan="3" class="text-center text-body-secondary py-4">' +
@@ -598,29 +637,13 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
     try {
         var result = await apiCall('GetMailList', {});
         var list = result && result.Data && result.Data.MailList;
-        if (!list || list.length === 0) {
+        mailListCache = list || [];
+        if (mailListCache.length === 0) {
             tbody.innerHTML = '<tr><td colspan="3" class="text-center text-body-secondary py-4">暂无消息</td></tr>';
             return;
         }
-        tbody.innerHTML = list.map(function(item) {
-            var hasUnread = item.UnreadCount > 0;
-            var preview = stripMarkdown(item.LastsMessage);
-            if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
-            return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
-                '<td>' + userSpan(item.OtherUser) +
-                (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
-                '</td>' +
-                '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
-                '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
-                '</tr>';
-        }).join('');
-        initUserButtons(tbody);
-        tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
-            row.addEventListener('click', function(e) {
-                if (e.target.closest('.user-info-btn')) return;
-                openThread(row.dataset.user);
-            });
-        });
+        var searchEl = document.getElementById('list-search');
+        renderMailList(searchEl ? searchEl.value : '');
     } catch (err) {
         tbody.innerHTML = '<tr><td colspan="3" class="text-center text-danger py-4">加载失败：' + escapeHtml(err.message) + '</td></tr>';
         showToast('加载消息列表失败：' + err.message, 'danger');
@@ -855,6 +878,10 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 
 document.getElementById('btn-refresh-list').addEventListener('click', loadMailList);
 
+document.getElementById('list-search').addEventListener('input', function() {
+    renderMailList(this.value);
+});
+
 document.getElementById('btn-compose-send').addEventListener('click', sendCompose);
 
 document.getElementById('btn-back').addEventListener('click', function() {

From d4f7bb163526f7d06a59ed54978a9de6eedfb731 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:54:20 +0000
Subject: [PATCH 16/22] feat(messages.html): show badge next to username +
 clear search on back + auto-scroll fix

Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com>
---
 messages.html | 165 ++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 119 insertions(+), 46 deletions(-)

diff --git a/messages.html b/messages.html
index d1f88849..c4d227af 100644
--- a/messages.html
+++ b/messages.html
@@ -451,6 +451,54 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
            escapeHtml(username) + '</button>';
 }
 
+function loadBadgesForContainer(container) {
+    // Group buttons by username in a single DOM pass
+    var byUsername = new Map();
+    container.querySelectorAll('.user-info-btn').forEach(function(btn) {
+        var u = btn.dataset.username;
+        if (!u) return;
+        if (!byUsername.has(u)) byUsername.set(u, []);
+        byUsername.get(u).push(btn);
+    });
+    byUsername.forEach(function(btns, u) {
+        getUserBadge(u).then(function(badge) {
+            if (!badge || !badge.Content) return;
+            btns.forEach(function(b) {
+                // Avoid duplicates on re-render
+                if (b.nextElementSibling && b.nextElementSibling.classList.contains('user-badge')) return;
+                var span = document.createElement('span');
+                span.className = 'badge ms-1 user-badge';
+                span.style.backgroundColor = badge.BackgroundColor;
+                span.style.color = badge.Color;
+                span.textContent = badge.Content;
+                b.insertAdjacentElement('afterend', span);
+            });
+        }).catch(function() {});
+    });
+}
+
+async function getUserBadge(username) {
+    var BADGE_TTL = 1000 * 60 * 60 * 24; // 24 h, matching XMOJ.user.js
+    var prefix = 'UserScript-User-' + username + '-Badge-';
+    var lastUpdate = localStorage.getItem(prefix + 'LastUpdateTime');
+    if (lastUpdate && (Date.now() - parseInt(lastUpdate)) < BADGE_TTL) {
+        return {
+            BackgroundColor: localStorage.getItem(prefix + 'BackgroundColor') || '',
+            Color: localStorage.getItem(prefix + 'Color') || '',
+            Content: localStorage.getItem(prefix + 'Content') || ''
+        };
+    }
+    var result = await apiCall('GetBadge', { UserID: username });
+    var badge = (result && result.Success && result.Data)
+        ? result.Data
+        : { BackgroundColor: '', Color: '', Content: '' };
+    localStorage.setItem(prefix + 'BackgroundColor', badge.BackgroundColor || '');
+    localStorage.setItem(prefix + 'Color', badge.Color || '');
+    localStorage.setItem(prefix + 'Content', badge.Content || '');
+    localStorage.setItem(prefix + 'LastUpdateTime', String(Date.now()));
+    return badge;
+}
+
 async function showUserInfo(username) {
     var title = document.getElementById('user-info-modal-title');
     var body = document.getElementById('user-info-modal-body');
@@ -462,57 +510,68 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
     body.innerHTML = '<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>加载中…</div>';
     userInfoModalBS.show();
 
-    try {
-        var res = await fetch(profileUrl, {
-            referrer: XMOJ_BASE + '/',
-            credentials: 'include'
-        });
-        if (!res.ok) throw new Error('HTTP ' + res.status);
-        var html = await res.text();
+    var results = await Promise.allSettled([
+        fetch(profileUrl, { referrer: XMOJ_BASE + '/', credentials: 'include' })
+            .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.text(); }),
+        getUserBadge(username)
+    ]);
+
+    // ── Badge (render into title) ───────────────────────────────────────────
+    var badge = results[1].status === 'fulfilled' ? results[1].value : null;
+    if (badge && badge.Content) {
+        title.innerHTML = escapeHtml(username) +
+            ' <span class="badge ms-2" style="background-color:' + escapeHtml(badge.BackgroundColor) +
+            ';color:' + escapeHtml(badge.Color) + '">' + escapeHtml(badge.Content) + '</span>';
+    }
 
-        if (html.indexOf('No such User!') !== -1) {
-            body.innerHTML = '<p class="text-body-secondary mb-0">用户不存在。</p>';
-            return;
-        }
+    // ── Profile (render into body) ──────────────────────────────────────────
+    if (results[0].status === 'rejected') {
+        body.innerHTML = '<p class="text-body-secondary mb-0">无法加载用户信息，请直接访问资料页面。</p>';
+        return;
+    }
 
-        var doc = new DOMParser().parseFromString(html, 'text/html');
+    var html = results[0].value;
 
-        var captionEl = doc.querySelector('#statics > caption');
-        var nickname = '';
-        if (captionEl) {
-            // Caption text format: "UserID--Nickname"
-            var parts = captionEl.textContent.trim().split('--');
-            if (parts.length > 1) nickname = parts[1].trim();
-        }
+    if (html.indexOf('No such User!') !== -1) {
+        body.innerHTML = '<p class="text-body-secondary mb-0">用户不存在。</p>';
+        return;
+    }
 
-        var submitEl = doc.querySelector('#statics > tbody > tr:nth-child(3) > td:nth-child(2)');
-        var acceptEl = doc.querySelector('#statics > tbody > tr:nth-child(4) > td:nth-child(2)');
-        var submitCount = submitEl ? (parseInt(submitEl.textContent.trim()) || 0) : 0;
-        var acceptCount = acceptEl ? (parseInt(acceptEl.textContent.trim()) || 0) : 0;
-        var rating = submitCount > 0 ? ((acceptCount / submitCount) * 1000).toFixed(1) : '—';
-
-        var tbodyRows = doc.querySelectorAll('#statics > tbody > tr');
-        var email = '';
-        if (tbodyRows.length > 0) {
-            var lastCells = tbodyRows[tbodyRows.length - 1].querySelectorAll('td');
-            if (lastCells.length >= 2) email = lastCells[1].textContent.trim();
-        }
+    var doc = new DOMParser().parseFromString(html, 'text/html');
 
-        var rows = [];
-        if (nickname) rows.push(['昵称', escapeHtml(nickname)]);
-        rows.push(['评分', escapeHtml(acceptCount + ' / ' + submitCount) +
-            ' <span class="text-body-secondary small ms-1">(' + escapeHtml(String(rating)) + ')</span>']);
-        if (email) rows.push(['邮箱', '<a href="mailto:' + escapeHtml(email) + '">' + escapeHtml(email) + '</a>']);
-
-        body.innerHTML = '<dl class="row mb-0">' +
-            rows.map(function(r) {
-                return '<dt class="col-4 text-truncate">' + r[0] + '</dt>' +
-                       '<dd class="col-8 mb-2">' + r[1] + '</dd>';
-            }).join('') +
-            '</dl>';
-    } catch (e) {
-        body.innerHTML = '<p class="text-body-secondary mb-0">无法加载用户信息，请直接访问资料页面。</p>';
+    var captionEl = doc.querySelector('#statics > caption');
+    var nickname = '';
+    if (captionEl) {
+        // Caption text format: "UserID--Nickname"
+        var parts = captionEl.textContent.trim().split('--');
+        if (parts.length > 1) nickname = parts[1].trim();
+    }
+
+    var submitEl = doc.querySelector('#statics > tbody > tr:nth-child(3) > td:nth-child(2)');
+    var acceptEl = doc.querySelector('#statics > tbody > tr:nth-child(4) > td:nth-child(2)');
+    var submitCount = submitEl ? (parseInt(submitEl.textContent.trim()) || 0) : 0;
+    var acceptCount = acceptEl ? (parseInt(acceptEl.textContent.trim()) || 0) : 0;
+    var rating = submitCount > 0 ? ((acceptCount / submitCount) * 1000).toFixed(1) : '—';
+
+    var tbodyRows = doc.querySelectorAll('#statics > tbody > tr');
+    var email = '';
+    if (tbodyRows.length > 0) {
+        var lastCells = tbodyRows[tbodyRows.length - 1].querySelectorAll('td');
+        if (lastCells.length >= 2) email = lastCells[1].textContent.trim();
     }
+
+    var rows = [];
+    if (nickname) rows.push(['昵称', escapeHtml(nickname)]);
+    rows.push(['评分', escapeHtml(acceptCount + ' / ' + submitCount) +
+        ' <span class="text-body-secondary small ms-1">(' + escapeHtml(String(rating)) + ')</span>']);
+    if (email) rows.push(['邮箱', '<a href="mailto:' + escapeHtml(email) + '">' + escapeHtml(email) + '</a>']);
+
+    body.innerHTML = '<dl class="row mb-0">' +
+        rows.map(function(r) {
+            return '<dt class="col-4 text-truncate">' + r[0] + '</dt>' +
+                   '<dd class="col-8 mb-2">' + r[1] + '</dd>';
+        }).join('') +
+        '</dl>';
 }
 
 function initUserButtons(container) {
@@ -622,6 +681,7 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
             '</tr>';
     }).join('');
     initUserButtons(tbody);
+    loadBadgesForContainer(tbody);
     tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
         row.addEventListener('click', function(e) {
             if (e.target.closest('.user-info-btn')) return;
@@ -690,6 +750,7 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
                 '</tr>';
         }).join('');
         initUserButtons(tbody);
+        loadBadgesForContainer(tbody);
         // Make images clickable to zoom
         tbody.querySelectorAll('img').forEach(function(img) {
             img.title = '点击放大';
@@ -697,6 +758,12 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
                 document.getElementById('img-modal-src').src = img.src;
                 imgModalBS.show();
             });
+            // Re-scroll after each image loads so the bottom stays in view
+            if (atBottom) {
+                img.addEventListener('load', function() {
+                    scrollEl.scrollTop = scrollEl.scrollHeight;
+                });
+            }
         });
         // Make links open in new tab
         tbody.querySelectorAll('a').forEach(function(a) {
@@ -704,7 +771,11 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
             a.setAttribute('rel', 'noopener noreferrer');
         });
         if (atBottom) {
-            scrollEl.scrollTop = scrollEl.scrollHeight;
+            // Use requestAnimationFrame so the browser has finished laying out
+            // the new rows before we read scrollHeight
+            requestAnimationFrame(function() {
+                scrollEl.scrollTop = scrollEl.scrollHeight;
+            });
         }
         isFirstLoad = false;
     } catch (err) {
@@ -887,7 +958,9 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 document.getElementById('btn-back').addEventListener('click', function() {
     stopRefresh();
     currentThread = null;
+    document.getElementById('list-search').value = '';
     showScreen('screen-list');
+    renderMailList('');
     loadMailList();
 });
 

From 5d3fa3c5433e92b8b443e126b0446f8fb47b92e1 Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 17:58:47 +0800
Subject: [PATCH 17/22] fix: make conversation rows obviously clickable in mail
 list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add caption "点击任意行打开对话 →" above table and a › chevron
in a trailing column on each row.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 332 +++++++-------------------------------------------
 1 file changed, 45 insertions(+), 287 deletions(-)

diff --git a/messages.html b/messages.html
index c4d227af..aa687d1a 100644
--- a/messages.html
+++ b/messages.html
@@ -10,22 +10,11 @@
     <style>
         body { padding-top: 56px; }
         #thread-messages { max-height: 60vh; overflow-y: auto; }
-        #thread-messages img { max-width: 100%; max-height: 300px; object-fit: contain; cursor: zoom-in; }
+        #thread-messages img { max-width: 100%; max-height: 300px; object-fit: contain; cursor: pointer; }
         .compose-sticky { position: sticky; bottom: 0; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 0.75rem 0; }
         .msg-bubble-cell { word-break: break-word; max-width: 60vw; }
         #upload-indicator { font-size: 0.8em; }
         .bookmarklet-link { cursor: grab; }
-        .user-info-btn { font-size: inherit; vertical-align: baseline; text-decoration: none; }
-        .user-info-btn:hover { text-decoration: underline; }
-        #img-modal .modal-body { cursor: zoom-out; }
-        #thread-compose { resize: none; overflow-y: hidden; }
-        /* Bootstrap 5.3.3 does not ship dark-mode overrides for .table-primary;
-           supply them here using Bootstrap's own semantic color tokens. */
-        [data-bs-theme="dark"] .table-primary {
-            --bs-table-color: var(--bs-primary-text-emphasis);
-            --bs-table-bg: var(--bs-primary-bg-subtle);
-            --bs-table-border-color: var(--bs-primary-border-subtle);
-        }
     </style>
     <script>
         (function() {
@@ -229,12 +218,6 @@ <h5 class="mb-0">收件箱</h5>
         </div>
     </div>
 
-    <!-- Search contacts -->
-    <div class="mb-2">
-        <input type="search" class="form-control form-control-sm" id="list-search"
-               placeholder="搜索联系人…" autocomplete="off" autocapitalize="none">
-    </div>
-
     <!-- Compose new message -->
     <div class="collapse mb-3" id="compose-panel">
         <div class="card card-body border-0 shadow-sm">
@@ -253,16 +236,18 @@ <h5 class="mb-0">收件箱</h5>
     <!-- Mail list table -->
     <div class="table-responsive">
         <table class="table table-hover table-borderless align-middle">
-            <thead>
+            <caption class="caption-top small text-body-secondary pb-1">点击任意行打开对话 &#8594;</caption>
+            <thead class="table-light">
                 <tr>
                     <th>用户</th>
                     <th>最新消息</th>
                     <th class="text-nowrap">时间</th>
+                    <th></th>
                 </tr>
             </thead>
             <tbody id="list-tbody">
                 <tr id="list-loading-row">
-                    <td colspan="3" class="text-center text-body-secondary py-4">
+                    <td colspan="4" class="text-center text-body-secondary py-4">
                         <span class="spinner-border spinner-border-sm me-2"></span>加载中…
                     </td>
                 </tr>
@@ -282,7 +267,7 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     <!-- Messages table -->
     <div id="thread-messages" class="mb-2">
         <table class="table table-hover table-borderless align-top">
-            <thead>
+            <thead class="table-light">
                 <tr>
                     <th class="text-nowrap">发送者</th>
                     <th>内容</th>
@@ -319,24 +304,6 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     </div>
 </div>
 
-<!-- ==================== USER INFO MODAL ==================== -->
-<div class="modal fade" id="user-info-modal" tabindex="-1">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="modal-body" id="user-info-modal-body"></div>
-            <div class="modal-footer">
-                <a id="user-info-profile-link" href="#" target="_blank" rel="noopener"
-                   class="btn btn-primary">查看完整资料</a>
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
-            </div>
-        </div>
-    </div>
-</div>
-
 <!-- ==================== IMAGE VIEWER MODAL ==================== -->
 <div class="modal fade" id="img-modal" tabindex="-1">
     <div class="modal-dialog modal-xl modal-dialog-centered">
@@ -381,14 +348,12 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 let currentThread  = null;   // other user's username
 let refreshTimer   = null;
 let isFirstLoad    = true;
-let mailListCache  = [];     // last fetched mail list (for local search)
 
 // ── Bootstrap instances ────────────────────────────────────────────────────
-const toastEl        = document.getElementById('app-toast');
-const toastBS        = new bootstrap.Toast(toastEl, { delay: 3500 });
-const imgModalEl     = document.getElementById('img-modal');
-const imgModalBS     = new bootstrap.Modal(imgModalEl);
-const userInfoModalBS = new bootstrap.Modal(document.getElementById('user-info-modal'));
+const toastEl    = document.getElementById('app-toast');
+const toastBS    = new bootstrap.Toast(toastEl, { delay: 3500 });
+const imgModalEl = document.getElementById('img-modal');
+const imgModalBS = new bootstrap.Modal(imgModalEl);
 
 // ── Utility ────────────────────────────────────────────────────────────────
 function showToast(msg, type) {
@@ -434,153 +399,18 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 
 function formatTime(ts) {
     if (!ts) return '';
-    var d = new Date(ts);
+    var d = new Date(ts * 1000);
     var now = new Date();
     var pad = function(n) { return String(n).padStart(2, '0'); };
     if (d.toDateString() === now.toDateString()) {
         return pad(d.getHours()) + ':' + pad(d.getMinutes());
     }
-    var datePart = (d.getFullYear() !== now.getFullYear() ? d.getFullYear() + '/' : '') +
-        (d.getMonth() + 1) + '/' + d.getDate();
-    return datePart + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
-}
-
-function userSpan(username) {
-    return '<button type="button" class="btn btn-link p-0 user-info-btn" ' +
-           'data-username="' + escapeHtml(username) + '">' +
-           escapeHtml(username) + '</button>';
-}
-
-function loadBadgesForContainer(container) {
-    // Group buttons by username in a single DOM pass
-    var byUsername = new Map();
-    container.querySelectorAll('.user-info-btn').forEach(function(btn) {
-        var u = btn.dataset.username;
-        if (!u) return;
-        if (!byUsername.has(u)) byUsername.set(u, []);
-        byUsername.get(u).push(btn);
-    });
-    byUsername.forEach(function(btns, u) {
-        getUserBadge(u).then(function(badge) {
-            if (!badge || !badge.Content) return;
-            btns.forEach(function(b) {
-                // Avoid duplicates on re-render
-                if (b.nextElementSibling && b.nextElementSibling.classList.contains('user-badge')) return;
-                var span = document.createElement('span');
-                span.className = 'badge ms-1 user-badge';
-                span.style.backgroundColor = badge.BackgroundColor;
-                span.style.color = badge.Color;
-                span.textContent = badge.Content;
-                b.insertAdjacentElement('afterend', span);
-            });
-        }).catch(function() {});
-    });
-}
-
-async function getUserBadge(username) {
-    var BADGE_TTL = 1000 * 60 * 60 * 24; // 24 h, matching XMOJ.user.js
-    var prefix = 'UserScript-User-' + username + '-Badge-';
-    var lastUpdate = localStorage.getItem(prefix + 'LastUpdateTime');
-    if (lastUpdate && (Date.now() - parseInt(lastUpdate)) < BADGE_TTL) {
-        return {
-            BackgroundColor: localStorage.getItem(prefix + 'BackgroundColor') || '',
-            Color: localStorage.getItem(prefix + 'Color') || '',
-            Content: localStorage.getItem(prefix + 'Content') || ''
-        };
-    }
-    var result = await apiCall('GetBadge', { UserID: username });
-    var badge = (result && result.Success && result.Data)
-        ? result.Data
-        : { BackgroundColor: '', Color: '', Content: '' };
-    localStorage.setItem(prefix + 'BackgroundColor', badge.BackgroundColor || '');
-    localStorage.setItem(prefix + 'Color', badge.Color || '');
-    localStorage.setItem(prefix + 'Content', badge.Content || '');
-    localStorage.setItem(prefix + 'LastUpdateTime', String(Date.now()));
-    return badge;
+    return (d.getMonth() + 1) + '/' + d.getDate() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
 }
 
-async function showUserInfo(username) {
-    var title = document.getElementById('user-info-modal-title');
-    var body = document.getElementById('user-info-modal-body');
-    var profileLink = document.getElementById('user-info-profile-link');
-    var profileUrl = XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username);
-
-    title.textContent = username;
-    profileLink.href = profileUrl;
-    body.innerHTML = '<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>加载中…</div>';
-    userInfoModalBS.show();
-
-    var results = await Promise.allSettled([
-        fetch(profileUrl, { referrer: XMOJ_BASE + '/', credentials: 'include' })
-            .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.text(); }),
-        getUserBadge(username)
-    ]);
-
-    // ── Badge (render into title) ───────────────────────────────────────────
-    var badge = results[1].status === 'fulfilled' ? results[1].value : null;
-    if (badge && badge.Content) {
-        title.innerHTML = escapeHtml(username) +
-            ' <span class="badge ms-2" style="background-color:' + escapeHtml(badge.BackgroundColor) +
-            ';color:' + escapeHtml(badge.Color) + '">' + escapeHtml(badge.Content) + '</span>';
-    }
-
-    // ── Profile (render into body) ──────────────────────────────────────────
-    if (results[0].status === 'rejected') {
-        body.innerHTML = '<p class="text-body-secondary mb-0">无法加载用户信息，请直接访问资料页面。</p>';
-        return;
-    }
-
-    var html = results[0].value;
-
-    if (html.indexOf('No such User!') !== -1) {
-        body.innerHTML = '<p class="text-body-secondary mb-0">用户不存在。</p>';
-        return;
-    }
-
-    var doc = new DOMParser().parseFromString(html, 'text/html');
-
-    var captionEl = doc.querySelector('#statics > caption');
-    var nickname = '';
-    if (captionEl) {
-        // Caption text format: "UserID--Nickname"
-        var parts = captionEl.textContent.trim().split('--');
-        if (parts.length > 1) nickname = parts[1].trim();
-    }
-
-    var submitEl = doc.querySelector('#statics > tbody > tr:nth-child(3) > td:nth-child(2)');
-    var acceptEl = doc.querySelector('#statics > tbody > tr:nth-child(4) > td:nth-child(2)');
-    var submitCount = submitEl ? (parseInt(submitEl.textContent.trim()) || 0) : 0;
-    var acceptCount = acceptEl ? (parseInt(acceptEl.textContent.trim()) || 0) : 0;
-    var rating = submitCount > 0 ? ((acceptCount / submitCount) * 1000).toFixed(1) : '—';
-
-    var tbodyRows = doc.querySelectorAll('#statics > tbody > tr');
-    var email = '';
-    if (tbodyRows.length > 0) {
-        var lastCells = tbodyRows[tbodyRows.length - 1].querySelectorAll('td');
-        if (lastCells.length >= 2) email = lastCells[1].textContent.trim();
-    }
-
-    var rows = [];
-    if (nickname) rows.push(['昵称', escapeHtml(nickname)]);
-    rows.push(['评分', escapeHtml(acceptCount + ' / ' + submitCount) +
-        ' <span class="text-body-secondary small ms-1">(' + escapeHtml(String(rating)) + ')</span>']);
-    if (email) rows.push(['邮箱', '<a href="mailto:' + escapeHtml(email) + '">' + escapeHtml(email) + '</a>']);
-
-    body.innerHTML = '<dl class="row mb-0">' +
-        rows.map(function(r) {
-            return '<dt class="col-4 text-truncate">' + r[0] + '</dt>' +
-                   '<dd class="col-8 mb-2">' + r[1] + '</dd>';
-        }).join('') +
-        '</dl>';
-}
-
-function initUserButtons(container) {
-    container.querySelectorAll('.user-info-btn').forEach(function(btn) {
-        btn.addEventListener('click', function(e) {
-            e.stopPropagation();
-            showUserInfo(btn.dataset.username);
-        });
-    });
+function userLink(username) {
+    return '<a href="' + XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username) +
+           '" target="_blank" rel="noopener">' + escapeHtml(username) + '</a>';
 }
 
 // ── Theme ──────────────────────────────────────────────────────────────────
@@ -657,39 +487,6 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 }
 
 // ── Mail List ──────────────────────────────────────────────────────────────
-function renderMailList(query) {
-    var tbody = document.getElementById('list-tbody');
-    var q = query ? query.trim().toLowerCase() : '';
-    var list = q
-        ? mailListCache.filter(function(item) { return item.OtherUser.toLowerCase().indexOf(q) !== -1; })
-        : mailListCache;
-    if (list.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-body-secondary py-4">' +
-            (q ? '未找到匹配的联系人' : '暂无消息') + '</td></tr>';
-        return;
-    }
-    tbody.innerHTML = list.map(function(item) {
-        var hasUnread = item.UnreadCount > 0;
-        var preview = stripMarkdown(item.LastsMessage);
-        if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
-        return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
-            '<td>' + userSpan(item.OtherUser) +
-            (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
-            '</td>' +
-            '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
-            '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
-            '</tr>';
-    }).join('');
-    initUserButtons(tbody);
-    loadBadgesForContainer(tbody);
-    tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
-        row.addEventListener('click', function(e) {
-            if (e.target.closest('.user-info-btn')) return;
-            openThread(row.dataset.user);
-        });
-    });
-}
-
 async function loadMailList() {
     var tbody = document.getElementById('list-tbody');
     tbody.innerHTML = '<tr id="list-loading-row"><td colspan="3" class="text-center text-body-secondary py-4">' +
@@ -697,15 +494,31 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
     try {
         var result = await apiCall('GetMailList', {});
         var list = result && result.Data && result.Data.MailList;
-        mailListCache = list || [];
-        if (mailListCache.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="3" class="text-center text-body-secondary py-4">暂无消息</td></tr>';
+        if (!list || list.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="4" class="text-center text-body-secondary py-4">暂无消息</td></tr>';
             return;
         }
-        var searchEl = document.getElementById('list-search');
-        renderMailList(searchEl ? searchEl.value : '');
+        tbody.innerHTML = list.map(function(item) {
+            var hasUnread = item.UnreadCount > 0;
+            var preview = stripMarkdown(item.LastsMessage);
+            if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
+            return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
+                '<td>' + userLink(item.OtherUser) +
+                (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
+                '</td>' +
+                '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
+                '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
+                '<td class="text-body-secondary text-end">&#8250;</td>' +
+                '</tr>';
+        }).join('');
+        tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
+            row.addEventListener('click', function(e) {
+                if (e.target.tagName === 'A') return;
+                openThread(row.dataset.user);
+            });
+        });
     } catch (err) {
-        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-danger py-4">加载失败：' + escapeHtml(err.message) + '</td></tr>';
+        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-danger py-4">加载失败：' + escapeHtml(err.message) + '</td></tr>';
         showToast('加载消息列表失败：' + err.message, 'danger');
     }
 }
@@ -743,27 +556,18 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
             var isUnread = !m.IsRead;
             var isHighlight = isUnread && m.FromUser !== currentUser.username;
             return '<tr class="' + (isHighlight ? 'table-primary' : '') + '">' +
-                '<td class="text-nowrap">' + userSpan(m.FromUser) + '</td>' +
+                '<td class="text-nowrap">' + userLink(m.FromUser) + '</td>' +
                 '<td class="msg-bubble-cell">' + renderMarkdown(m.Content) + '</td>' +
                 '<td class="text-nowrap text-body-secondary small">' + formatTime(m.SendTime) + '</td>' +
                 '<td class="text-nowrap small">' + (isUnread ? '<span class="badge text-bg-warning">未读</span>' : '<span class="text-body-secondary">已读</span>') + '</td>' +
                 '</tr>';
         }).join('');
-        initUserButtons(tbody);
-        loadBadgesForContainer(tbody);
-        // Make images clickable to zoom
+        // Make images clickable
         tbody.querySelectorAll('img').forEach(function(img) {
-            img.title = '点击放大';
             img.addEventListener('click', function() {
                 document.getElementById('img-modal-src').src = img.src;
                 imgModalBS.show();
             });
-            // Re-scroll after each image loads so the bottom stays in view
-            if (atBottom) {
-                img.addEventListener('load', function() {
-                    scrollEl.scrollTop = scrollEl.scrollHeight;
-                });
-            }
         });
         // Make links open in new tab
         tbody.querySelectorAll('a').forEach(function(a) {
@@ -771,11 +575,7 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
             a.setAttribute('rel', 'noopener noreferrer');
         });
         if (atBottom) {
-            // Use requestAnimationFrame so the browser has finished laying out
-            // the new rows before we read scrollHeight
-            requestAnimationFrame(function() {
-                scrollEl.scrollTop = scrollEl.scrollHeight;
-            });
+            scrollEl.scrollTop = scrollEl.scrollHeight;
         }
         isFirstLoad = false;
     } catch (err) {
@@ -922,17 +722,13 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 }
 
 // ── Login Tabs ─────────────────────────────────────────────────────────────
-function setLoginTab(tab) {
-    document.querySelectorAll('#loginTabs .nav-link').forEach(function(b) {
-        b.classList.toggle('active', b.dataset.tab === tab);
-    });
-    document.getElementById('tab-bookmarklet').style.display = tab === 'bookmarklet' ? '' : 'none';
-    document.getElementById('tab-manual').style.display = tab === 'manual' ? '' : 'none';
-}
-
 document.querySelectorAll('#loginTabs .nav-link').forEach(function(btn) {
     btn.addEventListener('click', function() {
-        setLoginTab(btn.dataset.tab);
+        document.querySelectorAll('#loginTabs .nav-link').forEach(function(b) { b.classList.remove('active'); });
+        btn.classList.add('active');
+        var tab = btn.dataset.tab;
+        document.getElementById('tab-bookmarklet').style.display = tab === 'bookmarklet' ? '' : 'none';
+        document.getElementById('tab-manual').style.display = tab === 'manual' ? '' : 'none';
     });
 });
 
@@ -949,18 +745,12 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 
 document.getElementById('btn-refresh-list').addEventListener('click', loadMailList);
 
-document.getElementById('list-search').addEventListener('input', function() {
-    renderMailList(this.value);
-});
-
 document.getElementById('btn-compose-send').addEventListener('click', sendCompose);
 
 document.getElementById('btn-back').addEventListener('click', function() {
     stopRefresh();
     currentThread = null;
-    document.getElementById('list-search').value = '';
     showScreen('screen-list');
-    renderMailList('');
     loadMailList();
 });
 
@@ -993,32 +783,6 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
     }
 });
 
-// Auto-resize textarea as user types
-(function() {
-    var ta = document.getElementById('thread-compose');
-    function autoResize() {
-        ta.style.height = 'auto';
-        ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
-    }
-    ta.addEventListener('input', autoResize);
-    autoResize();
-})();
-
-// Global paste handler: upload image from clipboard when in thread view
-document.addEventListener('paste', function(e) {
-    if (document.getElementById('screen-thread').style.display === 'none') return;
-    if (e.defaultPrevented) return; // already handled by local handler
-    var items = e.clipboardData && e.clipboardData.items;
-    if (!items) return;
-    for (var i = 0; i < items.length; i++) {
-        if (items[i].type.startsWith('image/')) {
-            e.preventDefault();
-            handleImageFile(items[i].getAsFile());
-            return;
-        }
-    }
-});
-
 document.getElementById('img-modal-src').addEventListener('click', function() {
     imgModalBS.hide();
 });
@@ -1034,12 +798,6 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
     initTheme();
     initBookmarklet();
 
-    // Set default login tab: bookmarklet on desktop, session login on mobile
-    var isDesktop = window.matchMedia
-        ? window.matchMedia('(pointer: fine)').matches
-        : (!('ontouchstart' in window) && window.innerWidth >= 1024);
-    setLoginTab(isDesktop ? 'bookmarklet' : 'manual');
-
     // Check for bookmarklet redirect
     if (checkSessionHash()) {
         onLoggedIn();

From 24c80cc04e7d65c0ea1696ce7576b83dd630f9a3 Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 18:01:25 +0800
Subject: [PATCH 18/22] fix: correct colspan on loading row to match 4-column
 list table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/messages.html b/messages.html
index aa687d1a..931b27f5 100644
--- a/messages.html
+++ b/messages.html
@@ -489,7 +489,7 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 // ── Mail List ──────────────────────────────────────────────────────────────
 async function loadMailList() {
     var tbody = document.getElementById('list-tbody');
-    tbody.innerHTML = '<tr id="list-loading-row"><td colspan="3" class="text-center text-body-secondary py-4">' +
+    tbody.innerHTML = '<tr id="list-loading-row"><td colspan="4" class="text-center text-body-secondary py-4">' +
         '<span class="spinner-border spinner-border-sm me-2"></span>加载中…</td></tr>';
     try {
         var result = await apiCall('GetMailList', {});

From a68d888fd7ab9b4a89387a25b5ee7a4dbc53e82f Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 18:08:54 +0800
Subject: [PATCH 19/22] fix: restore all features lost in bad rebase; add
 clickable row hints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restored: contact search, renderMailList, mailListCache, user badges,
user info modal, userSpan, auto-resize textarea, global paste handler,
requestAnimationFrame scroll, setLoginTab, dark-mode table-primary fix.

Added on top: caption "点击任意行打开对话 →" and › chevron column
to make list rows obviously clickable.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 325 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 285 insertions(+), 40 deletions(-)

diff --git a/messages.html b/messages.html
index 931b27f5..8f54e70d 100644
--- a/messages.html
+++ b/messages.html
@@ -10,11 +10,22 @@
     <style>
         body { padding-top: 56px; }
         #thread-messages { max-height: 60vh; overflow-y: auto; }
-        #thread-messages img { max-width: 100%; max-height: 300px; object-fit: contain; cursor: pointer; }
+        #thread-messages img { max-width: 100%; max-height: 300px; object-fit: contain; cursor: zoom-in; }
         .compose-sticky { position: sticky; bottom: 0; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 0.75rem 0; }
         .msg-bubble-cell { word-break: break-word; max-width: 60vw; }
         #upload-indicator { font-size: 0.8em; }
         .bookmarklet-link { cursor: grab; }
+        .user-info-btn { font-size: inherit; vertical-align: baseline; text-decoration: none; }
+        .user-info-btn:hover { text-decoration: underline; }
+        #img-modal .modal-body { cursor: zoom-out; }
+        #thread-compose { resize: none; overflow-y: hidden; }
+        /* Bootstrap 5.3.3 does not ship dark-mode overrides for .table-primary;
+           supply them here using Bootstrap's own semantic color tokens. */
+        [data-bs-theme="dark"] .table-primary {
+            --bs-table-color: var(--bs-primary-text-emphasis);
+            --bs-table-bg: var(--bs-primary-bg-subtle);
+            --bs-table-border-color: var(--bs-primary-border-subtle);
+        }
     </style>
     <script>
         (function() {
@@ -218,6 +229,12 @@ <h5 class="mb-0">收件箱</h5>
         </div>
     </div>
 
+    <!-- Search contacts -->
+    <div class="mb-2">
+        <input type="search" class="form-control form-control-sm" id="list-search"
+               placeholder="搜索联系人…" autocomplete="off" autocapitalize="none">
+    </div>
+
     <!-- Compose new message -->
     <div class="collapse mb-3" id="compose-panel">
         <div class="card card-body border-0 shadow-sm">
@@ -237,7 +254,7 @@ <h5 class="mb-0">收件箱</h5>
     <div class="table-responsive">
         <table class="table table-hover table-borderless align-middle">
             <caption class="caption-top small text-body-secondary pb-1">点击任意行打开对话 &#8594;</caption>
-            <thead class="table-light">
+            <thead>
                 <tr>
                     <th>用户</th>
                     <th>最新消息</th>
@@ -267,7 +284,7 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     <!-- Messages table -->
     <div id="thread-messages" class="mb-2">
         <table class="table table-hover table-borderless align-top">
-            <thead class="table-light">
+            <thead>
                 <tr>
                     <th class="text-nowrap">发送者</th>
                     <th>内容</th>
@@ -304,6 +321,24 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     </div>
 </div>
 
+<!-- ==================== USER INFO MODAL ==================== -->
+<div class="modal fade" id="user-info-modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body" id="user-info-modal-body"></div>
+            <div class="modal-footer">
+                <a id="user-info-profile-link" href="#" target="_blank" rel="noopener"
+                   class="btn btn-primary">查看完整资料</a>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- ==================== IMAGE VIEWER MODAL ==================== -->
 <div class="modal fade" id="img-modal" tabindex="-1">
     <div class="modal-dialog modal-xl modal-dialog-centered">
@@ -348,12 +383,14 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 let currentThread  = null;   // other user's username
 let refreshTimer   = null;
 let isFirstLoad    = true;
+let mailListCache  = [];     // last fetched mail list (for local search)
 
 // ── Bootstrap instances ────────────────────────────────────────────────────
-const toastEl    = document.getElementById('app-toast');
-const toastBS    = new bootstrap.Toast(toastEl, { delay: 3500 });
-const imgModalEl = document.getElementById('img-modal');
-const imgModalBS = new bootstrap.Modal(imgModalEl);
+const toastEl        = document.getElementById('app-toast');
+const toastBS        = new bootstrap.Toast(toastEl, { delay: 3500 });
+const imgModalEl     = document.getElementById('img-modal');
+const imgModalBS     = new bootstrap.Modal(imgModalEl);
+const userInfoModalBS = new bootstrap.Modal(document.getElementById('user-info-modal'));
 
 // ── Utility ────────────────────────────────────────────────────────────────
 function showToast(msg, type) {
@@ -399,18 +436,153 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 
 function formatTime(ts) {
     if (!ts) return '';
-    var d = new Date(ts * 1000);
+    var d = new Date(ts);
     var now = new Date();
     var pad = function(n) { return String(n).padStart(2, '0'); };
     if (d.toDateString() === now.toDateString()) {
         return pad(d.getHours()) + ':' + pad(d.getMinutes());
     }
-    return (d.getMonth() + 1) + '/' + d.getDate() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
+    var datePart = (d.getFullYear() !== now.getFullYear() ? d.getFullYear() + '/' : '') +
+        (d.getMonth() + 1) + '/' + d.getDate();
+    return datePart + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
 }
 
-function userLink(username) {
-    return '<a href="' + XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username) +
-           '" target="_blank" rel="noopener">' + escapeHtml(username) + '</a>';
+function userSpan(username) {
+    return '<button type="button" class="btn btn-link p-0 user-info-btn" ' +
+           'data-username="' + escapeHtml(username) + '">' +
+           escapeHtml(username) + '</button>';
+}
+
+function loadBadgesForContainer(container) {
+    // Group buttons by username in a single DOM pass
+    var byUsername = new Map();
+    container.querySelectorAll('.user-info-btn').forEach(function(btn) {
+        var u = btn.dataset.username;
+        if (!u) return;
+        if (!byUsername.has(u)) byUsername.set(u, []);
+        byUsername.get(u).push(btn);
+    });
+    byUsername.forEach(function(btns, u) {
+        getUserBadge(u).then(function(badge) {
+            if (!badge || !badge.Content) return;
+            btns.forEach(function(b) {
+                // Avoid duplicates on re-render
+                if (b.nextElementSibling && b.nextElementSibling.classList.contains('user-badge')) return;
+                var span = document.createElement('span');
+                span.className = 'badge ms-1 user-badge';
+                span.style.backgroundColor = badge.BackgroundColor;
+                span.style.color = badge.Color;
+                span.textContent = badge.Content;
+                b.insertAdjacentElement('afterend', span);
+            });
+        }).catch(function() {});
+    });
+}
+
+async function getUserBadge(username) {
+    var BADGE_TTL = 1000 * 60 * 60 * 24; // 24 h, matching XMOJ.user.js
+    var prefix = 'UserScript-User-' + username + '-Badge-';
+    var lastUpdate = localStorage.getItem(prefix + 'LastUpdateTime');
+    if (lastUpdate && (Date.now() - parseInt(lastUpdate)) < BADGE_TTL) {
+        return {
+            BackgroundColor: localStorage.getItem(prefix + 'BackgroundColor') || '',
+            Color: localStorage.getItem(prefix + 'Color') || '',
+            Content: localStorage.getItem(prefix + 'Content') || ''
+        };
+    }
+    var result = await apiCall('GetBadge', { UserID: username });
+    var badge = (result && result.Success && result.Data)
+        ? result.Data
+        : { BackgroundColor: '', Color: '', Content: '' };
+    localStorage.setItem(prefix + 'BackgroundColor', badge.BackgroundColor || '');
+    localStorage.setItem(prefix + 'Color', badge.Color || '');
+    localStorage.setItem(prefix + 'Content', badge.Content || '');
+    localStorage.setItem(prefix + 'LastUpdateTime', String(Date.now()));
+    return badge;
+}
+
+async function showUserInfo(username) {
+    var title = document.getElementById('user-info-modal-title');
+    var body = document.getElementById('user-info-modal-body');
+    var profileLink = document.getElementById('user-info-profile-link');
+    var profileUrl = XMOJ_BASE + '/userinfo.php?user=' + encodeURIComponent(username);
+
+    title.textContent = username;
+    profileLink.href = profileUrl;
+    body.innerHTML = '<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>加载中…</div>';
+    userInfoModalBS.show();
+
+    var results = await Promise.allSettled([
+        fetch(profileUrl, { referrer: XMOJ_BASE + '/', credentials: 'include' })
+            .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.text(); }),
+        getUserBadge(username)
+    ]);
+
+    // ── Badge (render into title) ───────────────────────────────────────────
+    var badge = results[1].status === 'fulfilled' ? results[1].value : null;
+    if (badge && badge.Content) {
+        title.innerHTML = escapeHtml(username) +
+            ' <span class="badge ms-2" style="background-color:' + escapeHtml(badge.BackgroundColor) +
+            ';color:' + escapeHtml(badge.Color) + '">' + escapeHtml(badge.Content) + '</span>';
+    }
+
+    // ── Profile (render into body) ──────────────────────────────────────────
+    if (results[0].status === 'rejected') {
+        body.innerHTML = '<p class="text-body-secondary mb-0">无法加载用户信息，请直接访问资料页面。</p>';
+        return;
+    }
+
+    var html = results[0].value;
+
+    if (html.indexOf('No such User!') !== -1) {
+        body.innerHTML = '<p class="text-body-secondary mb-0">用户不存在。</p>';
+        return;
+    }
+
+    var doc = new DOMParser().parseFromString(html, 'text/html');
+
+    var captionEl = doc.querySelector('#statics > caption');
+    var nickname = '';
+    if (captionEl) {
+        // Caption text format: "UserID--Nickname"
+        var parts = captionEl.textContent.trim().split('--');
+        if (parts.length > 1) nickname = parts[1].trim();
+    }
+
+    var submitEl = doc.querySelector('#statics > tbody > tr:nth-child(3) > td:nth-child(2)');
+    var acceptEl = doc.querySelector('#statics > tbody > tr:nth-child(4) > td:nth-child(2)');
+    var submitCount = submitEl ? (parseInt(submitEl.textContent.trim()) || 0) : 0;
+    var acceptCount = acceptEl ? (parseInt(acceptEl.textContent.trim()) || 0) : 0;
+    var rating = submitCount > 0 ? ((acceptCount / submitCount) * 1000).toFixed(1) : '—';
+
+    var tbodyRows = doc.querySelectorAll('#statics > tbody > tr');
+    var email = '';
+    if (tbodyRows.length > 0) {
+        var lastCells = tbodyRows[tbodyRows.length - 1].querySelectorAll('td');
+        if (lastCells.length >= 2) email = lastCells[1].textContent.trim();
+    }
+
+    var rows = [];
+    if (nickname) rows.push(['昵称', escapeHtml(nickname)]);
+    rows.push(['评分', escapeHtml(acceptCount + ' / ' + submitCount) +
+        ' <span class="text-body-secondary small ms-1">(' + escapeHtml(String(rating)) + ')</span>']);
+    if (email) rows.push(['邮箱', '<a href="mailto:' + escapeHtml(email) + '">' + escapeHtml(email) + '</a>']);
+
+    body.innerHTML = '<dl class="row mb-0">' +
+        rows.map(function(r) {
+            return '<dt class="col-4 text-truncate">' + r[0] + '</dt>' +
+                   '<dd class="col-8 mb-2">' + r[1] + '</dd>';
+        }).join('') +
+        '</dl>';
+}
+
+function initUserButtons(container) {
+    container.querySelectorAll('.user-info-btn').forEach(function(btn) {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            showUserInfo(btn.dataset.username);
+        });
+    });
 }
 
 // ── Theme ──────────────────────────────────────────────────────────────────
@@ -487,6 +659,40 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 }
 
 // ── Mail List ──────────────────────────────────────────────────────────────
+function renderMailList(query) {
+    var tbody = document.getElementById('list-tbody');
+    var q = query ? query.trim().toLowerCase() : '';
+    var list = q
+        ? mailListCache.filter(function(item) { return item.OtherUser.toLowerCase().indexOf(q) !== -1; })
+        : mailListCache;
+    if (list.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-body-secondary py-4">' +
+            (q ? '未找到匹配的联系人' : '暂无消息') + '</td></tr>';
+        return;
+    }
+    tbody.innerHTML = list.map(function(item) {
+        var hasUnread = item.UnreadCount > 0;
+        var preview = stripMarkdown(item.LastsMessage);
+        if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
+        return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
+            '<td>' + userSpan(item.OtherUser) +
+            (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
+            '</td>' +
+            '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
+            '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
+            '<td class="text-body-secondary text-end">&#8250;</td>' +
+            '</tr>';
+    }).join('');
+    initUserButtons(tbody);
+    loadBadgesForContainer(tbody);
+    tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
+        row.addEventListener('click', function(e) {
+            if (e.target.closest('.user-info-btn')) return;
+            openThread(row.dataset.user);
+        });
+    });
+}
+
 async function loadMailList() {
     var tbody = document.getElementById('list-tbody');
     tbody.innerHTML = '<tr id="list-loading-row"><td colspan="4" class="text-center text-body-secondary py-4">' +
@@ -494,29 +700,13 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     try {
         var result = await apiCall('GetMailList', {});
         var list = result && result.Data && result.Data.MailList;
-        if (!list || list.length === 0) {
+        mailListCache = list || [];
+        if (mailListCache.length === 0) {
             tbody.innerHTML = '<tr><td colspan="4" class="text-center text-body-secondary py-4">暂无消息</td></tr>';
             return;
         }
-        tbody.innerHTML = list.map(function(item) {
-            var hasUnread = item.UnreadCount > 0;
-            var preview = stripMarkdown(item.LastsMessage);
-            if (preview.length > PREVIEW_LEN) preview = preview.slice(0, PREVIEW_LEN) + '…';
-            return '<tr class="' + (hasUnread ? 'table-primary' : '') + '" data-user="' + escapeHtml(item.OtherUser) + '" style="cursor:pointer;">' +
-                '<td>' + userLink(item.OtherUser) +
-                (hasUnread ? ' <span class="badge text-bg-danger ms-1">' + item.UnreadCount + '</span>' : '') +
-                '</td>' +
-                '<td class="text-body-secondary small">' + escapeHtml(preview) + '</td>' +
-                '<td class="text-nowrap text-body-secondary small">' + formatTime(item.SendTime) + '</td>' +
-                '<td class="text-body-secondary text-end">&#8250;</td>' +
-                '</tr>';
-        }).join('');
-        tbody.querySelectorAll('tr[data-user]').forEach(function(row) {
-            row.addEventListener('click', function(e) {
-                if (e.target.tagName === 'A') return;
-                openThread(row.dataset.user);
-            });
-        });
+        var searchEl = document.getElementById('list-search');
+        renderMailList(searchEl ? searchEl.value : '');
     } catch (err) {
         tbody.innerHTML = '<tr><td colspan="4" class="text-center text-danger py-4">加载失败：' + escapeHtml(err.message) + '</td></tr>';
         showToast('加载消息列表失败：' + err.message, 'danger');
@@ -556,18 +746,27 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
             var isUnread = !m.IsRead;
             var isHighlight = isUnread && m.FromUser !== currentUser.username;
             return '<tr class="' + (isHighlight ? 'table-primary' : '') + '">' +
-                '<td class="text-nowrap">' + userLink(m.FromUser) + '</td>' +
+                '<td class="text-nowrap">' + userSpan(m.FromUser) + '</td>' +
                 '<td class="msg-bubble-cell">' + renderMarkdown(m.Content) + '</td>' +
                 '<td class="text-nowrap text-body-secondary small">' + formatTime(m.SendTime) + '</td>' +
                 '<td class="text-nowrap small">' + (isUnread ? '<span class="badge text-bg-warning">未读</span>' : '<span class="text-body-secondary">已读</span>') + '</td>' +
                 '</tr>';
         }).join('');
-        // Make images clickable
+        initUserButtons(tbody);
+        loadBadgesForContainer(tbody);
+        // Make images clickable to zoom
         tbody.querySelectorAll('img').forEach(function(img) {
+            img.title = '点击放大';
             img.addEventListener('click', function() {
                 document.getElementById('img-modal-src').src = img.src;
                 imgModalBS.show();
             });
+            // Re-scroll after each image loads so the bottom stays in view
+            if (atBottom) {
+                img.addEventListener('load', function() {
+                    scrollEl.scrollTop = scrollEl.scrollHeight;
+                });
+            }
         });
         // Make links open in new tab
         tbody.querySelectorAll('a').forEach(function(a) {
@@ -575,7 +774,11 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
             a.setAttribute('rel', 'noopener noreferrer');
         });
         if (atBottom) {
-            scrollEl.scrollTop = scrollEl.scrollHeight;
+            // Use requestAnimationFrame so the browser has finished laying out
+            // the new rows before we read scrollHeight
+            requestAnimationFrame(function() {
+                scrollEl.scrollTop = scrollEl.scrollHeight;
+            });
         }
         isFirstLoad = false;
     } catch (err) {
@@ -722,13 +925,17 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 }
 
 // ── Login Tabs ─────────────────────────────────────────────────────────────
+function setLoginTab(tab) {
+    document.querySelectorAll('#loginTabs .nav-link').forEach(function(b) {
+        b.classList.toggle('active', b.dataset.tab === tab);
+    });
+    document.getElementById('tab-bookmarklet').style.display = tab === 'bookmarklet' ? '' : 'none';
+    document.getElementById('tab-manual').style.display = tab === 'manual' ? '' : 'none';
+}
+
 document.querySelectorAll('#loginTabs .nav-link').forEach(function(btn) {
     btn.addEventListener('click', function() {
-        document.querySelectorAll('#loginTabs .nav-link').forEach(function(b) { b.classList.remove('active'); });
-        btn.classList.add('active');
-        var tab = btn.dataset.tab;
-        document.getElementById('tab-bookmarklet').style.display = tab === 'bookmarklet' ? '' : 'none';
-        document.getElementById('tab-manual').style.display = tab === 'manual' ? '' : 'none';
+        setLoginTab(btn.dataset.tab);
     });
 });
 
@@ -745,12 +952,18 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
 
 document.getElementById('btn-refresh-list').addEventListener('click', loadMailList);
 
+document.getElementById('list-search').addEventListener('input', function() {
+    renderMailList(this.value);
+});
+
 document.getElementById('btn-compose-send').addEventListener('click', sendCompose);
 
 document.getElementById('btn-back').addEventListener('click', function() {
     stopRefresh();
     currentThread = null;
+    document.getElementById('list-search').value = '';
     showScreen('screen-list');
+    renderMailList('');
     loadMailList();
 });
 
@@ -783,6 +996,32 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     }
 });
 
+// Auto-resize textarea as user types
+(function() {
+    var ta = document.getElementById('thread-compose');
+    function autoResize() {
+        ta.style.height = 'auto';
+        ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
+    }
+    ta.addEventListener('input', autoResize);
+    autoResize();
+})();
+
+// Global paste handler: upload image from clipboard when in thread view
+document.addEventListener('paste', function(e) {
+    if (document.getElementById('screen-thread').style.display === 'none') return;
+    if (e.defaultPrevented) return; // already handled by local handler
+    var items = e.clipboardData && e.clipboardData.items;
+    if (!items) return;
+    for (var i = 0; i < items.length; i++) {
+        if (items[i].type.startsWith('image/')) {
+            e.preventDefault();
+            handleImageFile(items[i].getAsFile());
+            return;
+        }
+    }
+});
+
 document.getElementById('img-modal-src').addEventListener('click', function() {
     imgModalBS.hide();
 });
@@ -798,6 +1037,12 @@ <h5 class="mb-0 flex-grow-1" id="thread-title">与 … 的对话</h5>
     initTheme();
     initBookmarklet();
 
+    // Set default login tab: bookmarklet on desktop, session login on mobile
+    var isDesktop = window.matchMedia
+        ? window.matchMedia('(pointer: fine)').matches
+        : (!('ontouchstart' in window) && window.innerWidth >= 1024);
+    setLoginTab(isDesktop ? 'bookmarklet' : 'manual');
+
     // Check for bookmarklet redirect
     if (checkSessionHash()) {
         onLoggedIn();

From fef60acd0d05111d8a523225ad7049bcff63eb50 Mon Sep 17 00:00:00 2001
From: boomzero <thomas_rainbowfish@icloud.com>
Date: Sun, 15 Mar 2026 18:14:00 +0800
Subject: [PATCH 20/22] fix: blur image before hiding modal to prevent
 aria-hidden focus warning

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 messages.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/messages.html b/messages.html
index 8f54e70d..b3f58c9e 100644
--- a/messages.html
+++ b/messages.html
@@ -1023,6 +1023,7 @@ <h5 class="modal-title" id="user-info-modal-title">用户信息</h5>
 });
 
 document.getElementById('img-modal-src').addEventListener('click', function() {
+    this.blur();
     imgModalBS.hide();
 });
 

From 64573031d6bbe083ef4e3a7a3df2f1a580e667ba Mon Sep 17 00:00:00 2001
From: Shan Wenxiao <seanoj_noreply@yeah.net>
Date: Sun, 15 Mar 2026 18:33:32 +0800
Subject: [PATCH 21/22] Update link text for messages page in index.html

Signed-off-by: Shan Wenxiao <seanoj_noreply@yeah.net>
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 30a99ba7..06c99abe 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@
                         <a class="nav-link" href="#About">关于</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="messages.html">短消息 WebUI
+                        <a class="nav-link" href="messages.html">短消息在线看
                             <span class="badge bg-warning text-dark ms-1">Alpha</span>
                         </a>
                     </li>

From 7dd281c3f29ef70db9488e6c0765ae4d0842c466 Mon Sep 17 00:00:00 2001
From: Shan Wenxiao <seanoj_noreply@yeah.net>
Date: Sun, 15 Mar 2026 18:34:38 +0800
Subject: [PATCH 22/22] Update names

Signed-off-by: Shan Wenxiao <seanoj_noreply@yeah.net>
---
 messages.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/messages.html b/messages.html
index b3f58c9e..ea7e2484 100644
--- a/messages.html
+++ b/messages.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="light dark">
-    <title>短消息 WebUI — XMOJ-Script</title>
+    <title>短消息在线看 — XMOJ-Script</title>
     <link rel="icon" href="favicon.ico">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
     <style>
@@ -49,7 +49,7 @@
         <div class="collapse navbar-collapse" id="navMain">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item">
-                    <a class="nav-link active" href="messages.html">短消息 WebUI</a>
+                    <a class="nav-link active" href="messages.html">短消息在线看</a>
                 </li>
             </ul>
             <div class="d-flex align-items-center gap-2">
@@ -200,7 +200,7 @@ <h6 class="card-title">第一步：添加书签</h6>
                 </p>
                 <div class="d-flex gap-2 align-items-start flex-wrap">
                     <a id="bookmarklet-link" href="#" class="btn btn-outline-primary bookmarklet-link"
-                       onclick="return false;" draggable="true">&#128278; 登录到短消息 WebUI</a>
+                       onclick="return false;" draggable="true">&#128278; 登录到短消息在线看</a>
                     <button class="btn btn-outline-secondary btn-sm" id="btn-copy-bookmarklet">复制代码</button>
                 </div>
             </div>
