feat: hold to pause stream playback

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

@@ -177,19 +177,20 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
     else resume();
   }, [composeActive, pause, resume]);
 
-  // Playback keyboard: arrows, escape
+  // Playback keyboard: arrows, escape, hold-space-to-pause
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
+    function isInputTarget(e: KeyboardEvent) {
-      if (composeActive) return;
-
       const target = e.target as HTMLElement;
-      if (
+      return (
         target.tagName === "INPUT" ||
         target.tagName === "TEXTAREA" ||
         target.isContentEditable
-      ) {
+      );
-        return;
+    }
-      }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (composeActive) return;
+      if (isInputTarget(e)) return;
 
       switch (e.key) {
         case "ArrowRight":
@@ -202,6 +203,10 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
           e.preventDefault();
           prev();
           break;
+        case " ":
+          e.preventDefault();
+          if (!e.repeat) pause();
+          break;
         case "Escape":
           e.preventDefault();
           navigate(`/${networkId}`);
@@ -215,11 +220,26 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
           break;
         }
       }
-    }
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (composeActive) return;
+      if (isInputTarget(e)) return;
+
+      if (e.key === " ") {
+        e.preventDefault();
+        resume();
+      }
+    };
+
     window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
   },
-    [composeActive, next, prev, navigate, networkId, streamParticle.id],
+    [composeActive, next, prev, pause, resume, navigate, networkId, streamParticle.id],
   );
 
   // Click-to-navigate: left 30% = prev, right 70% = next