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/compose/recording-overlay.tsx

@@ -7,6 +7,7 @@ import { AttachmentStrip } from "@/features/compose/attachment-strip";
 import type { PendingAttachment } from "@/features/compose/attachment-strip";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import { useComposeIntentStore } from "@/stores/compose-intent-store";
 
 interface RecordingOverlayProps {
   step: "recording" | "reviewing";
@@ -150,6 +151,7 @@ export function RecordingOverlay({
   const isReviewing = step === "reviewing";
   const isRecording = step === "recording";
   const isLoading = isRecording && !mediaStream;
+  const requestIntent = useComposeIntentStore((s) => s.request);
 
   return (
     <div
@@ -217,14 +219,24 @@ export function RecordingOverlay({
       {/* Bottom center: keyboard hints */}
       {isRecording && !isLoading && (
         <div className="absolute bottom-4 z-10 flex items-center gap-4 text-sm text-white/50">
-          <span>
+          <button
+            type="button"
+            onClick={() => requestIntent("stop")}
+            className="cursor-pointer rounded transition-colors hover:text-white/80"
+            title="Finish recording (or release `)"
+          >
             Release{" "}
             <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
               `
             </kbd>{" "}
             to review
-          </span>
-          <span>
+          </button>
+          <button
+            type="button"
+            onClick={() => requestIntent("cancel")}
+            className="cursor-pointer rounded transition-colors hover:text-white/80"
+            title="Discard recording (or press Esc / Q)"
+          >
             <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
               Esc
             </kbd>{" or "}
@@ -232,7 +244,7 @@ export function RecordingOverlay({
               Q
             </kbd>{" "}
             to cancel
-          </span>
+          </button>
         </div>
       )}
 
@@ -248,13 +260,23 @@ export function RecordingOverlay({
             </div>
           )}
           <div className="flex items-center gap-4 text-sm text-white/50">
-            <span>
+            <button
+              type="button"
+              onClick={() => requestIntent("send")}
+              className="cursor-pointer rounded transition-colors hover:text-white/80"
+              title="Send (or press Enter)"
+            >
               <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
                 Enter
               </kbd>{" "}
               next
-            </span>
-            <span>
+            </button>
+            <button
+              type="button"
+              onClick={() => requestIntent("cancel")}
+              className="cursor-pointer rounded transition-colors hover:text-white/80"
+              title="Discard (or press Esc / Q)"
+            >
               <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
                 Esc
               </kbd>{" or "}
@@ -262,7 +284,7 @@ export function RecordingOverlay({
                 Q
               </kbd>{" "}
               to cancel
-            </span>
+            </button>
             <span>
               <Button
                 variant="ghost"