feat(web): add spaces, grouped channels and file chat

web/src/features/channel/ChatMessage.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { useWorkspace } from '@/store/workspace';
+import { useAccount } from '@/store/account';
+import { useDownload } from '@/features/item/download';
+import { iconOf } from '@/features/item/summary';
+import { formatSize, formatTime, formatTransferProgress } from '@/lib/format';
+import { Icon } from '@/ui/Icon';
+import { Button } from '@/ui/Button';
+import styles from './ChatPane.module.css';
+
+export function ChatMessage({ id, onOpenFile, onDelete }: { id: string; onOpenFile: (id: string) => void; onDelete: (id: string) => void }) {
+  const item = useWorkspace((s) => s.byId[id]);
+  const owner = useWorkspace((s) => s.channel?.role === 'owner');
+  const username = useAccount((s) => s.username);
+  const download = useDownload();
+  const [downloading, setDownloading] = useState(false);
+  if (!item) return null;
+  const sender = item.author;
+  const name = sender?.displayName || sender?.username || item.deviceId || '未知用户';
+  const self = sender?.username !== undefined && sender.username === username;
+  const ready = item.state.kind === 'complete';
+  async function save() {
+    if (!item || downloading) return;
+    setDownloading(true); try { await download(item); } finally { setDownloading(false); }
+  }
+  return <article className={`${styles.message} ${self ? styles.mine : ''}`} aria-label={item.kind === 'file' ? `${name} 上传了 ${item.name}` : `${name} 的消息`}>
+    {sender?.avatar ? <img className={styles.avatar} src={sender.avatar} alt={`${name} 的头像`} />
+      : <span className={`${styles.avatar} ${styles.avatarFallback}`} role="img" aria-label={`${name} 的默认头像`}>{Array.from(name)[0] ?? '?'}</span>}
+    <div className={styles.bubble}>
+      <header><strong className={styles.senderName} title={sender ? `${sender.username} · ${item.deviceId}` : item.deviceId}>{name}</strong><time>{formatTime(item.ts)}</time>
+        {owner || self ? <Button variant="ghost" icon="trash" label={item.kind === 'file' ? `删除文件消息 ${item.name}` : '删除消息'} onClick={() => onDelete(id)} /> : null}
+      </header>
+      {item.state.kind === 'tampered' ? <p className={styles.integrity}>内容校验失败，已拒绝显示。</p> : item.kind === 'text' ? <p className={styles.messageText}>{item.text}</p>
+        : <div className={styles.fileMessage}>
+          <button type="button" className={styles.fileCard} aria-label={`预览文件 ${item.name}`} disabled={!ready} onClick={() => onOpenFile(id)}>
+            <span className={styles.fileIcon}><Icon name={iconOf(item)} size={28} /></span>
+            <span className={styles.fileInfo}><strong>{item.name}</strong><span>{formatSize(item.size)} · {item.mime}</span></span>
+          </button>
+          <div className={styles.fileActions}><Button variant="ghost" icon="eye" disabled={!ready} onClick={() => onOpenFile(id)}>预览</Button>
+            <Button variant="ghost" icon="download" disabled={!ready || downloading} onClick={() => { void save(); }}>{downloading ? '下载中…' : '下载'}</Button>
+          </div>
+        </div>}
+      {item.state.kind === 'receiving' ? <div className={styles.delivery} role="status">{formatTransferProgress(item.state)}<progress max={1} value={item.state.progress} /></div>
+        : item.state.kind === 'incomplete' ? <span className={styles.delivery}>发送未完成，等待续传。</span> : null}
+    </div>
+  </article>;
+}