消息列表和聊天窗口接入真实上传头像，替换字母色块（联系人页此前已接入）

用户报告：头像上传后，联系人页面已经能正确显示，但消息列表（会话列表）和
聊天对话框（顶部头像+消息气泡头像+详情栏）仍然只显示字母色块。

根因：联系人页面（ContactsListColumn/FriendProfileView等）走的是REST
/friends、/users/{id}/profile这些接口，响应里天然带avatar_file_id字段，
接的是同一个Avatar组件。但消息列表/聊天窗口这条线读的是Tinode SDK本地维护的
话题缓存（me.contacts()/topic.public），这个对象里根本没有avatar_file_id
这个字段（那是REST专属字段，SDK的public.fn/public.photo走的是完全不同的同步
机制）——所以即使Avatar组件本身没问题，这几个位置也从来没被塞过真实的
avatar_file_id，只能落到字母兜底分支。

修复：在这几处渲染点旁路补一份轻量的id->avatar_file_id映射，全部复用已经在
发的请求（不新增网络开销）：
- ChatListColumn.tsx（会话列表）：群聊复用自己已有的groups查询（本来就为了
  显示"N人"徽标在发），单聊新增一个与ContactsListColumn同key的/friends查询
  （对方是好友时才有数据，走查询缓存去重）。
- ConversationView.tsx（聊天窗口顶部+消息气泡）：群聊复用自己已有的group
  profile查询；P2P peer新增一个与DetailColumn同key的/users/{id}/profile
  查询；"我"发的消息复用（不再限定isSelf才拉）已有的/me查询。
- DetailColumn.tsx（P2P详情栏大头像）：本来就在查/friends和/user-profile，
  只是从来没把里面的avatar_file_id接到头像上。
- GroupDetailColumn.tsx（群详情栏大头像+成员格子头像，随上一条commit一起
  提交）：同样是本来就在查的group/members数据里现成的字段。

Avatar.tsx新增可选的fallbackBgClass prop——"我"发的消息气泡头像，字母兜底
色块设计上固定是强调色而不是按id哈希取色，原来内联写死bg-accent，现在通过
这个prop走统一组件不用另外复制一份渲染逻辑。

已知未覆盖（跟此前记录的已知缺口一致，本次未处理）：群成员选择器/邀请弹层/
群管理弹层等曝光度更低的头像位置仍是字母色块。

重要：本次修复只是把avatar_file_id正确传给了Avatar组件——实机测试时发现
GET /v0/file/s/{id}这个下载接口目前会302重定向到一个跨域地址，
useAuthedBlobUrl用fetch+鉴权头去请求时，浏览器跟着重定向到那个跨域地址后
被CORS拦截（Failed to fetch，redirect:'manual'下确认type是opaqueredirect）。
用三个不同账号/不同file_id复测结果一致，不是个例。也就是说这条修复目前
"接线是对的"，但只要这个后端问题不解决，任何地方（含联系人页、头像上传页
本身）新上传的头像实际都不会真的显示成图片，只会退回字母色块——这是后端
问题，按惯例记录不在这个仓库里修。

web/src/app/Avatar.tsx

@@ -9,6 +9,10 @@ interface AvatarProps {
   /** Sizing/rounding/font-size only (e.g. "h-20 w-20 rounded-[20px] text-2xl") -- the fallback tile's
    *  own color/centering/weight are applied internally, not expected from the caller. */
   className?: string;
+  /** Overrides the hashed `avatarBgClass(id)` fallback color -- e.g. "bg-accent" for the current
+   *  user's own message-row avatar, which by design is always the fixed accent color rather than a
+   *  per-id hash like every other tile. No effect once avatarFileId resolves to a real image. */
+  fallbackBgClass?: string;
 }
 
 /**
@@ -20,12 +24,14 @@ interface AvatarProps {
  * `/v0/file/s/{id}` shape `useAuthedBlobUrl` (same authenticated-fetch-to-blob-URL mechanism already
  * used for chat attachments) expects.
  */
-export function Avatar({ id, name, avatarFileId, className = '' }: AvatarProps) {
+export function Avatar({ id, name, avatarFileId, className = '', fallbackBgClass }: AvatarProps) {
   const remote = useAuthedBlobUrl(avatarFileId ? `/v0/file/s/${avatarFileId}` : undefined);
   if (remote.url) {
     return <img src={remote.url} alt="" className={`object-cover ${className}`} />;
   }
   return (
-    <span className={`grid place-items-center font-medium text-white ${avatarBgClass(id)} ${className}`}>{avatarLetter(name)}</span>
+    <span className={`grid place-items-center font-medium text-white ${fallbackBgClass || avatarBgClass(id)} ${className}`}>
+      {avatarLetter(name)}
+    </span>
   );
 }