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

web/src/features/channel/ThreadSidebar.tsx

@@ -0,0 +1,92 @@
+import { useState, type FormEvent } from 'react';
+import type { ChannelGroupInfo, ThreadInfo } from '@/core-bridge/types';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import styles from './ThreadSidebar.module.css';
+
+interface Props {
+  threads: ThreadInfo[];
+  groups: ChannelGroupInfo[];
+  selectedThreadId?: string;
+  enabled: boolean;
+  onSelectThread: (id: string) => void;
+  onCreateThread: (name: string, groupId?: string) => Promise<string>;
+  onRenameThread: (id: string, name: string) => Promise<void>;
+  onCreateGroup: (name: string) => Promise<string>;
+  onRenameGroup: (id: string, name: string) => Promise<void>;
+  onGroupThread: (id: string, groupId?: string) => Promise<void>;
+}
+type Editor = { kind: 'channel' | 'group'; id?: string; groupId?: string };
+
+export function ThreadSidebar(props: Props) {
+  const [edit, setEdit] = useState<Editor>();
+  const [name, setName] = useState('');
+  const [groupId, setGroupId] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
+  const knownGroups = new Set(props.groups.map((group) => group.id));
+  const ungrouped = props.threads.filter((thread) => !thread.groupId || !knownGroups.has(thread.groupId));
+  function begin(target: Editor, initial = '') { setEdit(target); setName(initial); setGroupId(target.groupId ?? ''); setError(''); }
+  function toggle(id: string) { setCollapsed((previous) => { const next = new Set(previous); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }
+  function select(id: string) { props.onSelectThread(id); setEdit(undefined); }
+  async function submit(event: FormEvent) {
+    event.preventDefault(); if (!edit || !name.trim() || busy || !props.enabled) return;
+    setBusy(true); setError('');
+    try {
+      if (edit.kind === 'group') {
+        if (edit.id) await props.onRenameGroup(edit.id, name); else await props.onCreateGroup(name);
+      } else if (edit.id) {
+        const original = props.threads.find((thread) => thread.id === edit.id);
+        if (original?.name !== name.trim()) await props.onRenameThread(edit.id, name);
+        if ((original?.groupId ?? '') !== groupId) await props.onGroupThread(edit.id, groupId || undefined);
+      } else props.onSelectThread(await props.onCreateThread(name, groupId || undefined));
+      if (groupId) setCollapsed((previous) => { const next = new Set(previous); next.delete(groupId); return next; });
+      setEdit(undefined);
+    } catch (cause) { setError(cause instanceof Error ? cause.message : '操作失败'); }
+    finally { setBusy(false); }
+  }
+  return <section className={styles.panel} aria-label="空间频道导航">
+    <div className={styles.heading}><strong>频道</strong><span className={styles.groupActions}>
+      <Button variant="ghost" icon="folder" label="新建频道分组" disabled={!props.enabled || busy} onClick={() => begin({ kind: 'group' })} />
+      <Button variant="ghost" icon="edit" label="新建频道" disabled={!props.enabled || busy} onClick={() => begin({ kind: 'channel' })} />
+    </span></div>
+    {ungrouped.length ? <div className={styles.groupLabel}>未分组</div> : null}
+    <ChannelRows threads={ungrouped} selectedId={props.selectedThreadId} enabled={props.enabled} busy={busy} onSelect={select}
+      onEdit={(thread) => begin({ kind: 'channel', id: thread.id, groupId: thread.groupId }, thread.name)} />
+    {props.groups.map((group) => {
+      const threads = props.threads.filter((thread) => thread.groupId === group.id);
+      return <section className={styles.group} aria-label={`频道分组 ${group.name}`} key={group.id}>
+        <div className={styles.groupHeading}><button className={styles.groupToggle} type="button" aria-label={`分组 ${group.name}`} aria-expanded={!collapsed.has(group.id)} onClick={() => toggle(group.id)}>
+          <Icon name={collapsed.has(group.id) ? 'chevronRight' : 'chevronDown'} size={14} /><span>{group.name}</span><small>{threads.length}</small>
+        </button>{props.enabled ? <span className={styles.groupActions}>
+          <Button variant="ghost" icon="edit" label={`重命名分组 ${group.name}`} disabled={busy} onClick={() => begin({ kind: 'group', id: group.id }, group.name)} />
+          <Button variant="ghost" icon="file" label={`在 ${group.name} 新建频道`} disabled={busy} onClick={() => begin({ kind: 'channel', groupId: group.id })} />
+        </span> : null}</div>
+        {!collapsed.has(group.id) ? <ChannelRows threads={threads} selectedId={props.selectedThreadId} enabled={props.enabled} busy={busy} onSelect={select}
+          onEdit={(thread) => begin({ kind: 'channel', id: thread.id, groupId: thread.groupId }, thread.name)} /> : null}
+        {!collapsed.has(group.id) && !threads.length ? <p className={styles.empty}>此分组还没有频道。</p> : null}
+      </section>;
+    })}
+    {edit ? <form className={styles.channelEditor} onSubmit={(event) => { void submit(event); }}>
+      <label>{edit.kind === 'group' ? '分组名称' : '频道名称'}<input autoFocus disabled={busy} aria-label={edit.kind === 'group' ? '分组名称' : '频道名称'} maxLength={80} value={name} onChange={(event) => setName(event.target.value)} /></label>
+      {edit.kind === 'channel' ? <label>所属分组<select aria-label="所属分组" disabled={busy} value={groupId} onChange={(event) => setGroupId(event.target.value)}>
+        <option value="">未分组</option>{props.groups.map((group) => <option key={group.id} value={group.id}>{group.name}</option>)}
+      </select></label> : null}
+      <div className={styles.groupActions}><Button type="submit" variant="primary" disabled={busy || !name.trim()}>{edit.id ? '保存' : '创建'}</Button>
+        <Button variant="ghost" onClick={() => setEdit(undefined)}>取消</Button></div>
+    </form> : null}
+    {!props.threads.length && !props.groups.length ? <p className={styles.empty}>创建一个频道后开始聊天和上传文件。</p> : null}
+    {error ? <p className={styles.error} role="alert">{error}</p> : null}
+  </section>;
+}
+
+function ChannelRows({ threads, selectedId, enabled, busy, onSelect, onEdit }: {
+  threads: ThreadInfo[]; selectedId?: string; enabled: boolean; busy: boolean; onSelect: (id: string) => void; onEdit: (thread: ThreadInfo) => void;
+}) {
+  return <ul className={styles.threads}>{threads.map((thread) => <li className={styles.threadRow} key={thread.id}>
+    <button className={`${styles.thread} ${thread.id === selectedId ? styles.selected : ''}`} type="button" disabled={busy} aria-current={thread.id === selectedId ? 'page' : undefined}
+      onClick={() => onSelect(thread.id)}><span aria-hidden="true">#</span><span>{thread.name}</span></button>
+    {enabled && thread.id === selectedId ? <Button variant="ghost" icon="more" disabled={busy} label={`频道设置 ${thread.name}`} onClick={() => onEdit(thread)} /> : null}
+  </li>)}</ul>;
+}