security: access control for particles (#169)

* setup firebase custom token

* docs

* docs

* feat: allow admin removing members from a network

* fix: properly handle fallback avatar and names

This is especially helpful in the case of members who were removed from
a network

js/src/features/network-settings.tsx

@@ -15,12 +15,22 @@ import {
   useNetworkInvitations,
   useInviteMembers,
   useRevokeInvitation,
-} from "@/hooks/use-invitations";
+  useRemoveMember,
+} from "@/hooks/use-member-management";
 import { useAuthStore } from "@/stores/auth-store";
 import { BillingSection } from "@/features/network-billing";
+import { ConfirmDestructiveOverlay } from "@/components/confirm-destructive-overlay";
 import type { Human } from "@/api/types";
 
-function MemberRow({ human, isAdmin }: { human: Human; isAdmin: boolean }) {
+function MemberRow({
+  human,
+  isAdmin,
+  onRemove,
+}: {
+  human: Human;
+  isAdmin: boolean;
+  onRemove?: () => void;
+}) {
   const initials = human.email_prefix.slice(0, 2).toUpperCase();
 
   return (
@@ -40,6 +50,17 @@ function MemberRow({ human, isAdmin }: { human: Human; isAdmin: boolean }) {
           Admin
         </Badge>
       )}
+      {onRemove && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={onRemove}
+          className="text-muted-foreground hover:text-destructive shrink-0"
+          aria-label={`Remove ${human.email}`}
+        >
+          <X className="size-3.5" />
+        </Button>
+      )}
     </div>
   );
 }
@@ -170,6 +191,8 @@ export default function NetworkSettingsPage() {
   const { data: invitations } = useNetworkInvitations(networkId!);
   const currentUser = useAuthStore((s) => s.user);
   const isAdmin = currentUser?.id === network?.admin_human.id;
+  const [memberToRemove, setMemberToRemove] = useState<Human | null>(null);
+  const removeMember = useRemoveMember(networkId!);
 
   const billingRef = useRef<HTMLDivElement>(null);
 
@@ -228,17 +251,23 @@ export default function NetworkSettingsPage() {
             }
           />
           <Separator />
-          {network?.humans.map((human, index) => (
-            <div key={human.id}>
-              <MemberRow
-                human={human}
-                isAdmin={human.id === network.admin_human.id}
-              />
-              {index < network.humans.length - 1 && (
-                <Separator className="mx-4" />
-              )}
-            </div>
-          ))}
+          {network?.humans.map((human, index) => {
+            const isRowAdmin = human.id === network.admin_human.id;
+            const canRemove =
+              isAdmin && !isRowAdmin && human.id !== currentUser?.id;
+            return (
+              <div key={human.id}>
+                <MemberRow
+                  human={human}
+                  isAdmin={isRowAdmin}
+                  onRemove={canRemove ? () => setMemberToRemove(human) : undefined}
+                />
+                {index < network.humans.length - 1 && (
+                  <Separator className="mx-4" />
+                )}
+              </div>
+            );
+          })}
         </Section>
 
         {isAdmin && network && (
@@ -299,6 +328,42 @@ export default function NetworkSettingsPage() {
 
         <div className="h-6" />
       </ScrollArea>
+
+      {memberToRemove && (
+        <ConfirmDestructiveOverlay
+          title={`Remove ${memberToRemove.email_prefix}?`}
+          description={
+            <ul className="list-disc space-y-1 pl-4">
+              <li>
+                They'll lose access to this network's streams and files within
+                seconds.
+              </li>
+              <li>Any content they posted stays in the network.</li>
+              <li>
+                If they're in a live huddle, they may remain until the call ends.
+              </li>
+            </ul>
+          }
+          confirmLabel="Remove"
+          pendingLabel="Removing…"
+          isPending={removeMember.isPending}
+          onConfirm={() => {
+            const target = memberToRemove;
+            removeMember.mutate(target.id, {
+              onSuccess: () => {
+                toast.success(`Removed ${target.email}`);
+                setMemberToRemove(null);
+              },
+              onError: (err) => {
+                toast.error(err.message || "Failed to remove member");
+              },
+            });
+          }}
+          onClose={() => {
+            if (!removeMember.isPending) setMemberToRemove(null);
+          }}
+        />
+      )}
     </div>
   );
 }