feat: show when there is an active huddle

This introduces a webhook which listens to events from livekit and
updates our firestore stream particle. It keeps the client simple,
reacting to changes to firestore docs.

js/src/features/particles/particle-list-view.tsx

@@ -10,6 +10,7 @@ import {
   CircleCheck,
   StickyNote,
   Timer,
+  Phone,
   type LucideIcon,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -101,6 +102,10 @@ function StreamRow({
     network?.message_retention_hours ?? 24,
   );
 
+  const hasActiveHuddle =
+    particle.huddle_active_participants && particle.huddle_active_participants.length > 0;
+  const huddleCount = particle.huddle_active_participants?.length ?? 0;
+
   const isDM =
     particle.visible_to.length === 2 &&
     particle.visible_to.every((v) => v.startsWith("human:"));
@@ -162,6 +167,7 @@ function StreamRow({
       className={cn(
         "flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer transition-colors hover:bg-accent",
         isSelected && "bg-accent",
+        hasActiveHuddle && "bg-gradient-to-r from-red-500/10 to-transparent",
       )}
     >
       {shortcutKey && (
@@ -188,7 +194,13 @@ function StreamRow({
           >
             {particle.properties.name}
           </p>
-          <div className="flex shrink-0 items-center gap-1">
+          <div className="flex shrink-0 items-center gap-1.5">
+            {hasActiveHuddle && (
+              <span className="flex items-center gap-1 rounded-full bg-red-500/15 px-1.5 py-0.5">
+                <Phone className="size-3 text-red-400" />
+                <span className="text-[10px] font-medium text-red-400">{huddleCount}</span>
+              </span>
+            )}
             {expiringSoon && (
               <Timer className="size-3 text-muted-foreground/60" />
             )}