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/text-editor.tsx

@@ -6,6 +6,7 @@ import { useAllLinkMetadata } from '@/hooks/use-link-metadata';
 import { AttachmentStrip } from '@/features/compose/attachment-strip';
 import type { PendingAttachment } from '@/features/compose/attachment-strip';
 import { Button } from '@/components/ui/button';
+import { KeyHint } from '@/components/key-hint';
 import { MarkdownEditor } from '@/features/compose/markdown-editor';
 
 export interface TextEditorAttachmentProps {
@@ -111,25 +112,26 @@ export function TextEditor({
 
   const keyboardHints = (
     <div className="absolute bottom-4 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">
-          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={() => {
+          if (textContent.trim()) onSubmit();
+        }}
+        title={`Submit (or press ${metaKey}+Enter)`}
+      >
         {submitHint}
-      </span>
+      </KeyHint>
       {immersive && (
-        <span>
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-            {metaKey}+M
-          </kbd>{' '}
+        <KeyHint
+          keys={`${metaKey}+M`}
+          onClick={() => setForceCardMode(true)}
+          title={`Switch to markdown editor (or press ${metaKey}+M)`}
+        >
           markdown
-        </span>
+        </KeyHint>
       )}
       {attachmentProps && (
         <span>