feat: allow reactions to particles in stream

Closes #111
2026-04-08 10:14:47 -07:00
parent ac7336592a
commit 5f80bd15d5
4 changed files with 173 additions and 6 deletions
@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { Plus, X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { REACTION_EMOJIS, type Reactions } from "@/api/types";
+import { cn } from "@/lib/utils";
+import type { Human } from "@/api/types";
+
+interface ReactionBarProps {
+  reactions: Reactions;
+  currentHumanId: string;
+  humans?: Human[];
+  onToggle: (emoji: string) => void;
+}
+
+function getReactorNames(
+  humanIds: string[],
+  humans?: Human[],
+): string {
+  return humanIds
+    .map((id) => {
+      const human = humans?.find((h) => h.id === id);
+      return human?.email_prefix ?? id;
+    })
+    .join(", ");
+}
+
+export function ReactionBar({ reactions, currentHumanId, humans, onToggle }: ReactionBarProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const activeEmojis = REACTION_EMOJIS.filter(
+    (emoji) => reactions?.[emoji] && reactions[emoji].length > 0,
+  );
+
+  const handleToggle = (emoji: string) => {
+    onToggle(emoji);
+    setExpanded(false);
+  };
+
+  return (
+    <div className="flex items-center gap-1.5">
+      {/* Existing reaction pills */}
+      {activeEmojis.map((emoji) => {
+        const reactors = reactions![emoji];
+        const isMine = reactors.includes(currentHumanId);
+        return (
+          <Tooltip key={emoji}>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => { e.stopPropagation(); handleToggle(emoji); }}
+                className={cn(
+                  "flex items-center gap-1 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm transition-colors",
+                  isMine
+                    ? "bg-white/20 ring-1 ring-white/40"
+                    : "bg-black/40 hover:bg-black/50",
+                )}
+              >
+                <span className="text-sm">{emoji}</span>
+                <span className="text-white/80">{reactors.length}</span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="text-xs">
+              {getReactorNames(reactors, humans)}
+            </TooltipContent>
+          </Tooltip>
+        );
+      })}
+
+      {/* Expand / picker toggle */}
+      {expanded ? (
+        <div className="flex items-center gap-0.5 rounded-full bg-black/40 px-1.5 py-0.5 backdrop-blur-sm">
+          {REACTION_EMOJIS.map((emoji) => {
+            // Skip emojis that already have pills
+            if (activeEmojis.includes(emoji)) return null;
+            return (
+              <button
+                key={emoji}
+                onClick={(e) => { e.stopPropagation(); handleToggle(emoji); }}
+                className="rounded-full px-1 py-0.5 text-sm transition-colors hover:bg-white/15"
+              >
+                {emoji}
+              </button>
+            );
+          })}
+          <button
+            onClick={(e) => { e.stopPropagation(); setExpanded(false); }}
+            className="flex size-5 items-center justify-center rounded-full transition-colors hover:bg-white/15"
+          >
+            <X className="size-3 text-white/60" />
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={(e) => { e.stopPropagation(); setExpanded(true); }}
+          className="flex size-6 items-center justify-center rounded-full bg-black/40 backdrop-blur-sm transition-colors hover:bg-black/50"
+        >
+          <Plus className="size-3 text-white/60" />
+        </button>
+      )}
+    </div>
+  );
+}