feat: allow clicking keyboard hints throughout (#266)

* allow clicking keyboard hints

* Update js/desktop/src/components/key-hint.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* nits

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

js/desktop/src/features/compose/configure-stream-step.tsx

@@ -5,6 +5,7 @@ import { metaKey } from '@/lib/platform';
 import { useAuthStore } from '@/stores/auth-store';
 import { generateRandomName } from '@/lib/random-name';
 import { Input } from '@/components/ui/input';
+import { KeyHint } from '@/components/key-hint';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -158,18 +159,16 @@ export function ConfigureStreamStep({
 
       {/* Keyboard hints */}
       <div className="absolute bottom-8 left-0 right-0 flex items-center justify-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">
-            Esc
-          </kbd>{' '}
+        <KeyHint keys="Esc" onClick={onCancel} title="Cancel (or press Esc)">
           cancel
-        </span>
-        <span>
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-            {metaKey}+Enter
-          </kbd>{' '}
+        </KeyHint>
+        <KeyHint
+          keys={`${metaKey}+Enter`}
+          onClick={handleSubmit}
+          title={`Create stream (or press ${metaKey}+Enter)`}
+        >
           create
-        </span>
+        </KeyHint>
       </div>
     </div>
   );