From 1f2ab9b7527c617133e82caee1dfdc1c83c56240 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Wed, 29 Apr 2026 07:16:16 -0700
Subject: [PATCH] show keyboard hints for space pause

---
 js/src/features/particles/stream-view.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index 24e2324..b164081 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -101,7 +101,8 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
   {
     label: "Playback",
     bindings: [
-      { keys: ["Hold", "Space"], description: "Pause" },
+      { keys: ["Space"], description: "Toggle pause" },
+      { keys: ["Hold", "Space"], description: "Pause while held" },
       { keys: ["Hold", "Shift"], description: "1.5× speed" },
       { keys: ["Shift", "←", "→"], description: "Seek ±5s" },
     ],
@@ -375,11 +376,18 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
           <div className="relative flex h-full w-full cursor-pointer items-center justify-center">
             {renderParticle(currentParticle)}
 
-            {fastPlayback && (
-              <div className="pointer-events-none absolute right-4 top-14 z-20 rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
-                1.5x
-              </div>
-            )}
+            <div className="pointer-events-none absolute right-4 top-14 z-20 flex flex-col items-end gap-1.5">
+              {fastPlayback && (
+                <div className="rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
+                  1.5x
+                </div>
+              )}
+              {paused && (
+                <div className="rounded-full bg-black/40 px-2.5 py-1 text-xs font-medium text-white/70 backdrop-blur-sm">
+                  Paused
+                </div>
+              )}
+            </div>
           </div>
         )}
       </div>