feat(mobile): ReactionStrip quick-reactor + ReactionPills display

2026-05-14 00:19:15 +02:00
parent 153e40bdcb
commit 8d7ed592b8
2 changed files with 112 additions and 0 deletions
@@ -0,0 +1,45 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '../theme/colors';
+
+// Hardcoded 6-emoji quick reactor shown at the top of the long-press
+// sheet. A full emoji picker is post-Phase-4; this is the Discord-style
+// fast path the vast majority of reactions go through.
+export const QUICK_REACTIONS = ['👍', '❤️', '😂', '😮', '😢', '🎉'] as const;
+
+export function ReactionStrip({ onReact }: { onReact: (emoji: string) => void }) {
+  return (
+    <View style={styles.row}>
+      {QUICK_REACTIONS.map((e) => (
+        <Pressable
+          key={e}
+          onPress={() => onReact(e)}
+          style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
+          hitSlop={6}
+        >
+          <Text style={styles.emoji}>{e}</Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    borderBottomColor: colors.border,
+    borderBottomWidth: 1,
+  },
+  button: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 22,
+  },
+  buttonPressed: { backgroundColor: colors.accentMuted },
+  emoji: { fontSize: 26 },
+});