feat(web): real chat list + P2P conversation view against live Tinode data

Phase 2 core loop: chat list and single-chat conversation now read/write real
Tinode topic data end to end, replacing the earlier hardcoded placeholders.

- lib/tinode/topics.ts: per-topic pub-sub layered on connection.ts's pattern
  (Topic.onData/onInfo/etc are single-slot callbacks, claimed once and fanned
  out). Implements the old app's subscribe lifecycle: `me` subscribed once
  per session (metadata only), each contact gets a one-shot preview
  subscription (withLaterData(1), never left), opening a conversation
  leaves-then-resubscribes with a full history page (withData, not
  withLaterData -- a preview prefetch already nudging _maxSeq would make
  withLaterData return empty).
- lib/tinode/hooks.ts: useChatList()/useTopicMessages() via
  useSyncExternalStore, snapshots cached and only invalidated on real
  topic-change notifications (not recomputed every render).
- lib/tinode/send.ts: sendText/retryMessage via createMessage+publishDraft
  (optimistic local echo), not the simpler publish() -- matches the old
  app's approach. retryMessage flushes the failed local entry and rebuilds
  before republishing, per the old app's context-menu retry handler.
- lib/messages/{time,avatar,attachments,status,preview,dispatch,drafty}:
  formatting utilities. Avatar color hash ports the old app's Java-style
  string hash but with modulus 11 (this design's palette) not the old app's
  16. @mention renders flat accent blue per the new design, not the old
  app's per-user hash color -- a deliberate simplification. File-type icons
  (PDF/Word/Excel/PPT) are new-design-only; the old app buckets all
  documents identically. Date/time formatting is written fresh against the
  design spec (today+time combined, weekday tier) since the old app never
  combines a relative-date word with a time in one string.
- ChatListColumn, MessageBubble, ConversationView: real components replacing
  the placeholder chat list and "占位" conversation view.
- tinode-sdk.d.ts: expanded with the real Topic/MetaGetBuilder/Drafty
  surface needed above, verified against the installed SDK source
  (createMessage/publishDraft/messages/msgStatus/noteRead/flushMessage/
  Drafty.format's exact treeBottomUp contract, MESSAGE_STATUS_* statics).

Verified end to end against the real backend: used the still-functional old
app (a second account, ixp355087) to create a real friendship and exchange
messages with the new app's test account, confirming the new chat list and
conversation view correctly render pre-existing real data, sending a new
message shows the right optimistic-then-delivered status transition, and
the old app receives it live in return.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/features/messages/MessageBubble.tsx

@@ -0,0 +1,72 @@
+import type { StoredMessage, Topic } from 'tinode-sdk';
+
+import { Icon } from '@/app/Icon';
+import { avatarBgClass, avatarLetter } from '@/lib/avatar';
+import { isRecalled, isServerDeleted, systemNoticeText } from '@/lib/messages/dispatch';
+import { renderDrafty } from '@/lib/messages/drafty';
+import { formatBubbleTime, formatEventTimestamp } from '@/lib/messages/time';
+import { isFailedStatus, isSendingStatus, outgoingStatusLabel } from '@/lib/messages/status';
+import { retryMessage } from '@/lib/tinode/send';
+
+interface MessageRowProps {
+  topic: Topic;
+  msg: StoredMessage;
+  mine: boolean;
+  isGroup: boolean;
+  peerName: string;
+}
+
+export function MessageRow({ topic, msg, mine, isGroup, peerName }: MessageRowProps) {
+  if (isServerDeleted(msg)) {
+    return <div className="py-1 text-center text-xs text-text-tertiary-4">此消息已被删除</div>;
+  }
+
+  const noticeText = systemNoticeText(msg);
+  if (noticeText) {
+    return (
+      <div className="flex flex-col items-center gap-1 py-1">
+        <div className="text-xs text-text-tertiary-4">{noticeText}</div>
+        {msg.ts ? <div className="text-xs text-text-tertiary-4">{formatEventTimestamp(msg.ts)}</div> : null}
+      </div>
+    );
+  }
+
+  const failed = isFailedStatus(topic, msg);
+  const sending = isSendingStatus(topic, msg);
+  const statusLabel = mine ? outgoingStatusLabel(topic, msg, isGroup) : msg.ts ? formatBubbleTime(msg.ts) : '';
+
+  const retry = () => {
+    if (typeof msg.seq === 'number') retryMessage(topic, msg.seq);
+  };
+
+  return (
+    <div className={`flex items-end gap-2.5 ${mine ? 'flex-row-reverse' : ''}`}>
+      {!mine ? (
+        <span
+          className={`grid h-9 w-9 flex-none place-items-center rounded-lg text-sm font-medium text-white ${avatarBgClass(msg.from || peerName)}`}
+        >
+          {avatarLetter(peerName)}
+        </span>
+      ) : (
+        <span className="w-9 flex-none" />
+      )}
+      <div className={`flex max-w-[60%] flex-col gap-1 ${mine ? 'items-end' : 'items-start'}`}>
+        <div
+          className={`px-3.5 py-2.5 text-[15px] leading-[1.55] break-words ${
+            mine ? 'rounded-[12px_4px_12px_12px] bg-bubble-mine' : 'rounded-[4px_12px_12px_12px] bg-white shadow-bubble'
+          } ${isRecalled(msg) ? 'text-text-tertiary-4 italic' : ''}`}
+        >
+          {isRecalled(msg) ? '⚠ 消息已删除' : renderDrafty(msg.content)}
+        </div>
+        {failed ? (
+          <button type="button" onClick={retry} className="flex items-center gap-1 text-xs text-danger-text">
+            <Icon name="error" className="text-[16px]" />
+            发送失败，点击重试
+          </button>
+        ) : (
+          <span className="text-[11px] text-text-tertiary-3">{sending ? '发送中…' : statusLabel}</span>
+        )}
+      </div>
+    </div>
+  );
+}