feat: position reactions in better spot

This prevents overlap with captions. It also introduces the laughing
emoji.

js/src/features/particles/stream-view.tsx

@@ -138,7 +138,7 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
   {
     label: "Reactions",
     bindings: [
-      { keys: ["1-6"], description: "Toggle emoji reaction" },
+      { keys: ["1-7"], description: "Toggle emoji reaction" },
     ],
   },
 ];
@@ -288,7 +288,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
           e.preventDefault();
           setShowKeybindings((v) => !v);
           break;
-        case "1": case "2": case "3": case "4": case "5": case "6":
+        case "1": case "2": case "3": case "4": case "5": case "6": case "7":
           e.preventDefault();
           handleToggleReaction(REACTION_EMOJIS[parseInt(e.key) - 1]);
           break;
@@ -419,7 +419,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
 
       {/* Reaction bar — always visible */}
       {currentParticle && (
-        <div className="absolute bottom-16 left-4 z-10">
+        <div className="absolute right-4 top-1/2 -translate-y-1/2 z-10">
           <ReactionBar
             reactions={getReactions(currentParticle)}
             currentHumanId={authedUser?.id ?? ""}