refactor: update api and client to reference humanIds

js/src/features/compose/configure-stream-step.tsx

@@ -24,16 +24,16 @@ export function ConfigureStreamStep({
 
   const [name, setName] = useState(() => generateRandomName());
   const [everyone, setEveryone] = useState(true);
-  const userEmail = useAuthStore((s) => s.user?.email);
-  const [selectedEmails, setSelectedEmails] = useState<Set<string>>(new Set());
+  const userId = useAuthStore((s) => s.user?.id);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
-  const members = (network?.humans ?? []).filter((h) => h.email !== userEmail);
+  const members = (network?.humans ?? []).filter((h) => h.id !== userId);
 
-  const toggleMember = useCallback((email: string) => {
-    setSelectedEmails((prev) => {
+  const toggleMember = useCallback((id: string) => {
+    setSelectedIds((prev) => {
       const next = new Set(prev);
-      if (next.has(email)) next.delete(email);
-      else next.add(email);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       return next;
     });
   }, []);
@@ -41,8 +41,8 @@ export function ConfigureStreamStep({
   const buildVisibleTo = useCallback((): string[] => {
     if (everyone && networkId) return [`network:${networkId}`];
 
-    return Array.from(removeDuplicates([...selectedEmails, userEmail])).map((e) => `human:${e}`);
-  }, [everyone, networkId, selectedEmails, userEmail]);
+    return Array.from(removeDuplicates([...selectedIds, userId].filter(Boolean) as string[])).map((id) => `human:${id}`);
+  }, [everyone, networkId, selectedIds, userId]);
 
   const handleSubmit = useCallback(() => {
     if (!name.trim() || !networkId) return;
@@ -117,16 +117,16 @@ export function ConfigureStreamStep({
               <ScrollArea className="max-h-48">
                 <div className="space-y-0.5 p-1">
                   {members.map((member, index) => {
-                    const isSelected = selectedEmails.has(member.email);
+                    const isSelected = selectedIds.has(member.id);
                     const initials = member.email_prefix
                       .slice(0, 2)
                       .toUpperCase();
 
                     return (
                       <div
-                        key={member.email}
+                        key={member.id}
                         role="button"
-                        onClick={() => toggleMember(member.email)}
+                        onClick={() => toggleMember(member.id)}
                         className={cn(
                           "flex w-full cursor-pointer items-center gap-2.5 rounded px-3 py-1.5 text-left text-sm transition-colors",
                           "text-white/70 hover:bg-white/5",