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

web/src/features/channel/ChannelSwitcher.tsx

@@ -0,0 +1,22 @@
+import { useChannels } from '@/store/channels';
+import { useAccount } from '@/store/account';
+import { channelPath, navigate } from '@/app/navigation';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import styles from './ThreadSidebar.module.css';
+
+export function ChannelSwitcher({ id, onCreate }: { id?: string; onCreate: () => void }) {
+  const channels = useChannels((s) => s.list);
+  const username = useAccount((s) => s.username);
+  const personal = useAccount((s) => s.personal);
+  return <section className={styles.panel} aria-label="我的空间导航">
+    <button className={styles.identity} type="button" onClick={() => navigate('/')} aria-label="账号与设备设置">
+      {personal?.avatar ? <img src={personal.avatar} className={styles.avatar} alt="" /> : <Icon name="desktop" size={20} />}
+      <span>{personal?.displayName || username || '访客'}</span>
+    </button>
+    <div className={styles.heading}><strong>空间</strong><Button variant="ghost" icon="edit" label="新建空间" disabled={!username} onClick={onCreate} /></div>
+    <nav className={styles.channels} aria-label="空间列表">{channels.map((channel) => <button key={channel.id} type="button"
+      className={`${styles.thread} ${channel.id === id ? styles.selected : ''}`} aria-current={channel.id === id ? 'page' : undefined}
+      onClick={() => navigate(channelPath(channel.id))}><Icon name={channel.mode === 'enc' ? 'lock' : 'file'} size={14} /><span>{channel.name || channel.id.slice(0, 8)}</span></button>)}</nav>
+  </section>;
+}