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/ChatListColumn.tsx

@@ -0,0 +1,73 @@
+import { Link, useParams } from 'react-router-dom';
+
+import { Icon } from '@/app/Icon';
+import { avatarBgClass, avatarLetter } from '@/lib/avatar';
+import { formatListTime } from '@/lib/messages/time';
+import { formatMessagePreview } from '@/lib/messages/preview';
+import { useChatList } from '@/lib/tinode/hooks';
+import { useSessionStore } from '@/stores/session';
+
+/**
+ * Chat-list row sort: by `touched` (last activity) descending. Pinned-conversations-first isn't
+ * wired yet -- that's driven by the P2P conversation-settings API (GET/PATCH /conversations/{topic}/
+ * settings {pinned}), which the detail panel doesn't build until its "置顶聊天" toggle lands.
+ */
+export function ChatListColumn() {
+  const { topicId } = useParams();
+  const myUserId = useSessionStore((s) => s.myUserId);
+  const contacts = useChatList();
+  const sorted = [...contacts].sort((a, b) => (b.touched?.getTime() ?? 0) - (a.touched?.getTime() ?? 0));
+
+  return (
+    <aside className="flex h-full w-full flex-none flex-col border-r border-border-panel bg-white md:w-[300px] lg:w-80">
+      <header className="flex h-15 flex-none items-center justify-between px-5">
+        <h1 className="m-0 text-xl font-semibold text-text-heading">消息</h1>
+        <Icon name="add_comment" className="text-text-heading" />
+      </header>
+      <div className="mx-3 mb-2.5 flex h-9 items-center rounded-lg bg-surface-search px-3">
+        <Icon name="search" className="text-[18px] text-text-placeholder-2" />
+        <input
+          placeholder="搜索会话、联系人、消息"
+          className="ml-2 w-full bg-transparent text-sm text-text-body outline-none placeholder:text-text-placeholder-2"
+        />
+      </div>
+      <div className="flex flex-1 flex-col overflow-y-auto">
+        {sorted.map((contact) => {
+          const name = contact.public?.fn || contact.topic;
+          const preview = formatMessagePreview(contact.latestMessage?.(), myUserId);
+          const active = topicId === contact.topic;
+          return (
+            <Link
+              key={contact.topic}
+              to={`/messages/${contact.topic}`}
+              className={`grid min-h-[68px] grid-cols-[44px_minmax(0,1fr)_auto] items-center gap-3 border-b border-list-item px-4 py-2.5 no-underline hover:bg-[#f6f8fb] ${
+                active ? 'bg-accent-selected-bg' : 'bg-white'
+              }`}
+            >
+              <span className={`relative grid h-11 w-11 place-items-center rounded-lg text-base font-medium text-white ${avatarBgClass(contact.topic || '')}`}>
+                {avatarLetter(name)}
+                {contact.online ? (
+                  <span className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-white bg-online" />
+                ) : null}
+              </span>
+              <span className="flex min-w-0 flex-col gap-1">
+                <span className="flex items-center gap-1.5">
+                  <strong className="truncate text-[15px] font-medium text-[#272b31]">{name}</strong>
+                </span>
+                <small className="truncate text-[13px] text-text-tertiary-2">{preview}</small>
+              </span>
+              <span className="flex flex-none flex-col items-end justify-between gap-1.5">
+                <time className="text-xs text-text-tertiary-3">{contact.touched ? formatListTime(contact.touched) : ''}</time>
+                {contact.unread ? (
+                  <b className="grid h-[18px] min-w-[18px] place-items-center rounded-full bg-unread px-1.5 text-[11px] font-medium text-white">
+                    {contact.unread}
+                  </b>
+                ) : null}
+              </span>
+            </Link>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}