keyboard-driven navigation

Resolves #66

js/src/features/compose/controls-indicator.tsx

@@ -26,30 +26,37 @@ export default function ControlsIndicator({
           back
         </span>
       )}
-      <button
-        type="button"
-        onClick={() =>
-          setRecordingMode(recordingMode === "video" ? "audio" : "video")
-        }
-        title={
-          recordingMode === "video"
-            ? "Switch to audio-only"
-            : "Switch to video"
-        }
-        className="flex items-center gap-1 rounded bg-white/10 px-1.5 py-0.5 text-xs text-white/50 transition-colors hover:text-white/80"
-      >
-        {recordingMode === "video" ? (
-          <>
-            <Video className="size-3" />
-            Video
-          </>
-        ) : (
-          <>
-            <Mic className="size-3" />
-            Audio
-          </>
-        )}
-      </button>
+      {type === "new" && (
+        <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
+          role="button"
+          onClick={() =>
+            setRecordingMode(recordingMode === "video" ? "audio" : "video")
+          }
+          title={
+            recordingMode === "video"
+              ? "Switch to audio-only"
+              : "Switch to video"
+          }
+          className="cursor-pointer rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs transition-colors hover:text-white/80"
+        >
+          {recordingMode === "video" ? (
+            <><Video className="inline size-3" /> Video</>
+          ) : (
+            <><Mic className="inline size-3" /> Audio</>
+          )}
+        </kbd>
+      </span>
       <span>
         <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
           Hold `