feat: improve usability with clickable keyboard hints

This allows people to use the app even if they aren't used to their
keyboard.
Closes #186

js/desktop/src/features/network-root.tsx

@@ -5,6 +5,7 @@ import { particlePath } from "@/lib/particle-path";
 import { ParticleListView } from "@/features/particles/particle-list-view";
 import { VideoAudioToggle } from "@/components/video-audio-toggle";
 import { ComposeOverlay } from "./compose/compose-overlay";
+import { useComposeIntentStore } from "@/stores/compose-intent-store";
 import { ComposeQuotaIndicator } from "./compose/compose-quota-indicator";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useStreamParticles } from "@/hooks/use-stream-particles";
@@ -91,6 +92,7 @@ export default function NetworkRoot() {
 }
 
 function NetworkRootControls() {
+  const requestIntent = useComposeIntentStore((s) => s.request);
   return (
     <div className="flex items-center gap-4 text-sm text-white/50">
       <span>
@@ -109,18 +111,28 @@ function NetworkRootControls() {
         jump
       </span>
       <VideoAudioToggle />
-      <span>
+      <button
+        type="button"
+        onClick={() => requestIntent("record")}
+        className="cursor-pointer rounded transition-colors hover:text-white/80"
+        title="Start recording (or hold `)"
+      >
         <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
           Hold `
         </kbd>{" "}
         to start
-      </span>
-      <span>
+      </button>
+      <button
+        type="button"
+        onClick={() => requestIntent("text")}
+        className="cursor-pointer rounded transition-colors hover:text-white/80"
+        title="Compose text (or press T)"
+      >
         <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
           T
         </kbd>{" "}
         text
-      </span>
+      </button>
     </div>
   );
 }