feat(web): space roles, upload queue with pipelined frames, background resume and faster sending

web/src/features/channel/RoleBadges.tsx

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { badgesOf, type Badge } from '@/lib/roles';
+import { useWorkspace } from '@/store/workspace';
+import styles from './RoleBadges.module.css';
+
+function List({ items }: { items: Badge[] }) {
+  return <>{items.map((badge) => <span key={badge.key} className={`${styles.badge} ${styles[badge.color]}`}>{badge.text}</span>)}</>;
+}
+
+/** 名字前后的身份标签:空间主固定一个,其余是身份组里自定义的前缀、后缀 */
+export function useBadges(username: string | undefined): { prefix: Badge[]; suffix: Badge[] } {
+  const roles = useWorkspace((s) => s.roles);
+  const creator = useWorkspace((s) => s.channel?.creatorAccount);
+  return useMemo(() => badgesOf(roles, username, creator), [roles, username, creator]);
+}
+
+export function NameWithBadges({ username, children }: { username: string | undefined; children: React.ReactNode }) {
+  const { prefix, suffix } = useBadges(username);
+  return <><List items={prefix} />{children}<List items={suffix} /></>;
+}