enhance keyboard experience

Now we have network root and stream-view defining their own hints
instead of trying to re-use one component. And we also introduce an
overlay for additional commands for people.

js/src/features/network-root.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { CircleDot, CircleCheckBig } from "lucide-react";
 import { particlePath } from "@/lib/particle-path";
 import { ParticleListView } from "@/features/particles/particle-list-view";
-import ControlsIndicator from "@/features/compose/controls-indicator";
+import { VideoAudioToggle } from "@/components/video-audio-toggle";
 import { ComposeOverlay } from "./compose/compose-overlay";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useStreamParticles } from "@/hooks/use-stream-particles";
@@ -63,9 +63,44 @@ export default function NetworkRoot() {
       <ComposeOverlay networkId={networkId!} onActiveChange={setComposeActive} />
       <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center p-3">
         <div className="pointer-events-auto">
-          <ControlsIndicator type={"new"} />
+          <NetworkRootControls />
         </div>
       </div>
     </div>
   );
 }
+
+function NetworkRootControls() {
+  return (
+    <div className="flex items-center gap-4 text-sm text-white/50">
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          ↑↓
+        </kbd>{" "}
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          Enter
+        </kbd>{" "}
+        navigate
+      </span>
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          1–9
+        </kbd>{" "}
+        jump
+      </span>
+      <VideoAudioToggle />
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          Hold `
+        </kbd>{" "}
+        to start
+      </span>
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          T
+        </kbd>{" "}
+        text
+      </span>
+    </div>
+  );
+}