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/lib/messages/drafty.tsx

@@ -0,0 +1,68 @@
+import { Fragment, type ReactNode } from 'react';
+
+import { Drafty, type DraftyContent } from 'tinode-sdk';
+
+/**
+ * Bubble content renderer for the Drafty style tags this app currently sends/receives. Grown
+ * incrementally alongside composer features -- IM/VD/AU/QQ/TC/VC/BN/FM land when their respective
+ * message types (images, voice, quotes, cards, calls, forms) are actually built, matching this
+ * project's existing pattern for the SDK's own ambient types.
+ *
+ * @mention renders as a flat accent blue (README §3.2's "@提及：文本内 color:#1677ff") rather than
+ * porting the old app's per-user hash-colored mentions -- a deliberate new-design simplification,
+ * not an oversight (confirmed against the old app's formatters.js:122-128, which does hash-color
+ * mentions the same way avatars are colored).
+ */
+function formatNode(
+  style: string | undefined,
+  data: Record<string, unknown> | undefined,
+  values: ReactNode[] | null,
+  key: number | string,
+): ReactNode {
+  const children = values ?? undefined;
+  switch (style) {
+    case 'ST':
+      return <b key={key}>{children}</b>;
+    case 'EM':
+      return <i key={key}>{children}</i>;
+    case 'DL':
+      return <s key={key}>{children}</s>;
+    case 'CO':
+      return (
+        <code key={key} className="rounded bg-surface-input px-1 py-0.5 font-mono text-[0.9em]">
+          {children}
+        </code>
+      );
+    case 'BR':
+      return <br key={key} />;
+    case 'MN':
+      return (
+        <span key={key} className="text-accent">
+          {children}
+        </span>
+      );
+    case 'HL':
+      return (
+        <mark key={key} className="bg-warn-bg">
+          {children}
+        </mark>
+      );
+    case 'LN': {
+      const url = typeof data?.url === 'string' ? data.url : undefined;
+      return (
+        <a key={key} href={url} target="_blank" rel="noreferrer" className="text-accent underline">
+          {children}
+        </a>
+      );
+    }
+    default:
+      return <Fragment key={key}>{children}</Fragment>;
+  }
+}
+
+export function renderDrafty(content: DraftyContent | string | null | undefined): ReactNode {
+  if (content == null) return null;
+  if (typeof content === 'string') return content;
+  if (Drafty.isPlainText(content)) return Drafty.toPlainText(content);
+  return Drafty.format(content, formatNode);
+}