refactor(shortcuts): simplify chord display and clean up capture UI

package-lock.json

@@ -25,6 +25,7 @@
       },
       "devDependencies": {
         "@biomejs/biome": "^2.4.8",
+        "concurrently": "^9.2.1",
         "get-port-cli": "^3.0.0",
         "knip": "^5.82.1",
         "patch-package": "^8.0.1",
@@ -15184,6 +15185,31 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "license": "MIT"
     },
+    "node_modules/concurrently": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
+      "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "4.1.2",
+        "rxjs": "7.8.2",
+        "shell-quote": "1.8.3",
+        "supports-color": "8.1.1",
+        "tree-kill": "1.2.2",
+        "yargs": "17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
     "node_modules/connect": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
@@ -32547,6 +32573,16 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "license": "MIT"
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",

package.json

@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.8",
+    "concurrently": "^9.2.1",
     "get-port-cli": "^3.0.0",
     "knip": "^5.82.1",
     "patch-package": "^8.0.1",

packages/app/src/components/ui/shortcut.tsx

@@ -35,11 +35,8 @@ export function Shortcut({
     <View style={[styles.sequence, style]}>
       {displayChord.map(function (combo, index) {
         return (
-          <View key={`${combo.join("+")}-${index}`} style={styles.sequenceItem}>
+          <View key={`${combo.join("+")}-${index}`} style={styles.badge}>
-            <View style={styles.badge}>
+            <Text style={[styles.text, textStyle]}>{formatShortcut(combo, shortcutOs)}</Text>
-              <Text style={[styles.text, textStyle]}>{formatShortcut(combo, shortcutOs)}</Text>
-            </View>
-            {index < displayChord.length - 1 ? <Text style={styles.separator}>→</Text> : null}
           </View>
         );
       })}
@@ -62,15 +59,6 @@ const styles = StyleSheet.create((theme) => ({
     flexWrap: "wrap",
     gap: theme.spacing[1],
   },
-  sequenceItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1],
-  },
-  separator: {
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.foregroundMuted,
-  },
   text: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,

packages/app/src/screens/settings/keyboard-shortcuts-section.tsx

@@ -125,11 +125,6 @@ export function KeyboardShortcutsSection() {
       event.stopPropagation();
 
       const key = event.key ?? "";
-      if (key === "Escape") {
-        cancelCapture();
-        return;
-      }
-
       if (key === "Backspace") {
         setCapturedCombos((current) => (current.length > 0 ? current.slice(0, -1) : current));
         return;
@@ -147,7 +142,7 @@ export function KeyboardShortcutsSection() {
     return () => {
       window.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [cancelCapture, capturingBindingId]);
+  }, [capturingBindingId]);
 
   useEffect(() => {
     return () => {

packages/app/src/utils/format-shortcut.ts

@@ -5,7 +5,7 @@ export type ShortcutOs = "mac" | "non-mac";
 const KEY_DISPLAY: Record<string, string> = {
   Backspace: "⌫",
   Enter: "↩",
-  Esc: "⎋",
+  Esc: "Esc",
   Space: "␣",
   Left: "←",
   Right: "→",