feat(frontend): translate UI to English and refresh layout styles

src/pages/ChatPage.tsx

@@ -127,7 +127,7 @@ export default function ChatPage() {
       setMessages(res.data.items ?? [])
       setPageInfo(res.data.page ?? null)
     } catch {
-      setError('消息拉取失败')
+      setError('Failed to load messages')
     } finally {
       setLoading(false)
     }
@@ -144,7 +144,7 @@ export default function ChatPage() {
       socket?.emit('typing.stop', { channelId })
       setContent('')
     } catch {
-      setError('发送失败')
+      setError('Failed to send message')
     }
   }
 
@@ -158,7 +158,7 @@ export default function ChatPage() {
       setEditingContent('')
       await pullMessages()
     } catch {
-      setError('编辑失败')
+      setError('Failed to edit message')
     }
   }
 
@@ -169,7 +169,7 @@ export default function ChatPage() {
       await guildApi().delete(`/channels/${channelId}/messages/${messageId}`)
       await pullMessages()
     } catch {
-      setError('删除失败')
+      setError('Failed to delete message')
     }
   }
 
@@ -201,41 +201,44 @@ export default function ChatPage() {
   }, [channelId, socket, socketState])
 
   return (
-    <section>
-      <h2>聊天</h2>
-      <p>Guild: {guildId || '-'}</p>
-      <p>Socket: {socketState}</p>
-      <p>在线人数: {onlineCount}</p>
-      {loading ? <p>加载中...</p> : null}
-      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
-      {typingUsers.length ? <p>正在输入: {typingUsers.join(', ')}</p> : null}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
-        <input value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
-        <input value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
-        <input value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
-        <button onClick={pullMessages}>拉取</button>
+    <section className="panel">
+      <h2>Chat</h2>
+      <p className="muted">Guild: {guildId || '-'}</p>
+      <p className="muted">Socket: {socketState}</p>
+      <p className="muted">Online users: {onlineCount}</p>
+      {loading ? <p className="muted">Loading...</p> : null}
+      {error ? <p className="error-text">{error}</p> : null}
+      {typingUsers.length ? <p className="muted">Typing: {typingUsers.join(', ')}</p> : null}
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
+        <input className="input" value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
+        <input className="input" value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
+        <input className="input" value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
+        <button className="btn btn-secondary" onClick={pullMessages}>Fetch</button>
       </div>
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="输入消息" />
-        <button onClick={sendMessage}>发送</button>
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="Type a message" />
+        <button className="btn" onClick={sendMessage}>Send</button>
       </div>
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
-        <input value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="新内容" />
-        <button onClick={editMessage}>编辑</button>
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
+        <input className="input" value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="Updated content" />
+        <button className="btn btn-secondary" onClick={editMessage}>Edit</button>
       </div>
-      <ul>
+      <ul className="list-reset">
         {messages.map((m) => (
-          <li key={m.messageId}>
-            #{m.seq} {m.content} ({m.messageId}){' '}
-            <button type="button" onClick={() => deleteMessage(m.messageId)}>
-              删除
+          <li key={m.messageId} className="card" style={{ marginTop: 8 }}>
+            <div>
+              <strong>#{m.seq}</strong> {m.content}
+            </div>
+            <div className="muted">{m.messageId}</div>
+            <button className="btn btn-danger" type="button" onClick={() => deleteMessage(m.messageId)}>
+              Delete
             </button>
           </li>
         ))}
       </ul>
-      {!loading && !messages.length ? <p>暂无消息</p> : null}
+      {!loading && !messages.length ? <p className="muted">No messages yet</p> : null}
       {pageInfo ? (
         <p>
           next_expected_seq: {pageInfo.nextExpectedSeq ?? '-'} | highest_committed_seq: {pageInfo.highestCommittedSeq ?? '-'} |