feat(app): add header tooltips + shortcuts (#16)

2026-02-05 22:40:29 +07:00
parent 6784a3feec
commit a2eab7b00b
9 changed files with 747 additions and 14 deletions
@@ -0,0 +1,37 @@
+import type { ReactElement } from "react";
+import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { formatShortcut, type ShortcutKey } from "@/utils/format-shortcut";
+import { getShortcutOs } from "@/utils/shortcut-platform";
+
+export function Shortcut({
+  keys,
+  style,
+  textStyle,
+}: {
+  keys: ShortcutKey[];
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}): ReactElement {
+  return (
+    <View style={[styles.root, style]}>
+      <Text style={[styles.text, textStyle]}>{formatShortcut(keys, getShortcutOs())}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  root: {
+    paddingHorizontal: theme.spacing[1],
+    paddingVertical: 2,
+    borderRadius: theme.borderRadius.sm,
+    backgroundColor: theme.colors.surface2,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+  },
+  text: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+}));