Add chord keyboard shortcuts and staged capture UI

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

@@ -6,22 +6,49 @@ import { getShortcutOs } from "@/utils/shortcut-platform";
 
 export function Shortcut({
   keys,
+  chord,
   style,
   textStyle,
 }: {
-  keys: ShortcutKey[];
+  keys?: ShortcutKey[];
+  chord?: ShortcutKey[][];
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
 }): ReactElement {
+  const displayChord = chord ?? (keys ? [keys] : []);
+  const shortcutOs = getShortcutOs();
+  const singleCombo = displayChord[0];
+
+  if (!singleCombo) {
+    return <View style={style} />;
+  }
+
+  if (displayChord.length === 1) {
+    return (
+      <View style={[styles.badge, style]}>
+        <Text style={[styles.text, textStyle]}>{formatShortcut(singleCombo, shortcutOs)}</Text>
+      </View>
+    );
+  }
+
   return (
-    <View style={[styles.root, style]}>
-      <Text style={[styles.text, textStyle]}>{formatShortcut(keys, getShortcutOs())}</Text>
+    <View style={[styles.sequence, style]}>
+      {displayChord.map(function (combo, index) {
+        return (
+          <View key={`${combo.join("+")}-${index}`} style={styles.sequenceItem}>
+            <View style={styles.badge}>
+              <Text style={[styles.text, textStyle]}>{formatShortcut(combo, shortcutOs)}</Text>
+            </View>
+            {index < displayChord.length - 1 ? <Text style={styles.separator}>→</Text> : null}
+          </View>
+        );
+      })}
     </View>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  root: {
+  badge: {
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 2,
     borderRadius: theme.borderRadius.md,
@@ -29,6 +56,21 @@ const styles = StyleSheet.create((theme) => ({
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
   },
+  sequence: {
+    flexDirection: "row",
+    alignItems: "center",
+    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,