feat: emoji reactions

.yarn/patches/react-native-emoji-selector-npm-0.2.0-d28c8d59eb.patch

@@ -0,0 +1,22 @@
+diff --git a/index.js b/index.js
+index 0737acd14b749375ceac4111250d4b9dab6ee3cf..1d6c6d52d46530bb361eef14cf6dc063e435bb0e 100644
+--- a/index.js
++++ b/index.js
+@@ -91,7 +91,7 @@ const TabBar = ({ theme, activeCategory, onPress, width }) => {
+             style={{
+               textAlign: "center",
+               paddingBottom: 8,
+-              fontSize: tabSize - 24
++              fontSize: Math.max(tabSize - 24, 1)
+             }}
+           >
+             {category.symbol}
+@@ -112,7 +112,7 @@ const EmojiCell = ({ emoji, colSize, ...other }) => (
+     }}
+     {...other}
+   >
+-    <Text style={{ color: "#FFFFFF", fontSize: colSize - 12 }}>
++    <Text style={{ color: "#FFFFFF", fontSize: Math.max(colSize - 12, 1) }}>
+       {charFromEmojiObject(emoji)}
+     </Text>
+   </TouchableOpacity>

package.json

@@ -47,7 +47,8 @@
     "react-native": "^0.79.0-rc.4",
     "react-native-device-info": "^14.0.4",
     "react-native-drawer-layout": "^4.1.2",
-    "react-native-gesture-handler": "^2.25.0",
+    "react-native-emoji-selector": "patch:react-native-emoji-selector@npm%3A0.2.0#~/.yarn/patches/react-native-emoji-selector-npm-0.2.0-d28c8d59eb.patch",
+    "react-native-gesture-handler": "2.20.2",
     "react-native-get-random-values": "^1.11.0",
     "react-native-keyboard-controller": "^1.16.8",
     "react-native-mmkv": "^3.2.0",

src/Generic.tsx

@@ -348,6 +348,11 @@ export const app = {
       `[FUNCTIONS] Tried to run uninitialised function openMessage (args: ${m})`,
     );
   },
+  openAddReaction: (m: Message | null) => {
+    console.log(
+      `[FUNCTIONS] Tried to run uninitialised function openAddReaction (args: ${m})`
+    );
+  },
   openChannelContextMenu: (c: Channel | null) => {
     console.log(
       `[FUNCTIONS] Tried to run uninitialised function openChannelContextMenu (args: ${c})`,

src/Modals.tsx

@@ -32,6 +32,7 @@ import {
   ServerSettingsSheet,
   SettingsSheet,
   StatusSheet,
+  AddReactionSheet
 } from '@clerotri/components/sheets';
 
 // Modals appear to break on the new architecture unless you wrap them in a View. see also https://github.com/react-navigation/react-navigation/issues/12301#issuecomment-2501692557
@@ -55,6 +56,7 @@ const BottomSheets = observer(() => {
       <MemberListSheet />
       <PinnedMessagesSheet />
       <ServerInfoSheet />
+      <AddReactionSheet />
     </>
   );
 });

src/components/common/BottomSheet.tsx

@@ -4,13 +4,14 @@ import {StyleSheet} from 'react-native';
 import BottomSheetCore, {
   BottomSheetBackdrop,
   BottomSheetScrollView,
+  BottomSheetView
 } from '@gorhom/bottom-sheet';
 import {observer} from 'mobx-react-lite';
 
 import {commonValues, Theme, ThemeContext} from '@clerotri/lib/themes';
 
 export const BottomSheet = observer(
-  ({sheetRef, children}: {sheetRef: any; children: any}) => {
+  ({sheetRef, innerScroll, children}: {sheetRef: any; innerScroll?: boolean; children: any}) => {
     const {currentTheme} = useContext(ThemeContext);
     const localStyles = useMemo(
       () => generateLocalStyles(currentTheme),
@@ -28,8 +29,13 @@ export const BottomSheet = observer(
         backdropComponent={BottomSheetBackdrop}
         style={localStyles.sheet}
         backgroundStyle={localStyles.sheetBackground}
-        handleIndicatorStyle={localStyles.handleIndicator}>
-        <BottomSheetScrollView>{children}</BottomSheetScrollView>
+        handleIndicatorStyle={localStyles.handleIndicator}
+        enableContentPanningGesture={!innerScroll}>
+        {innerScroll ? (
+          <BottomSheetView style={{ flexDirection: 'column', flex: 1 }}>{children}</BottomSheetView>
+        ) : (
+          <BottomSheetScrollView>{children}</BottomSheetScrollView>
+        )}
       </BottomSheetCore>
     );
   },

src/components/common/messaging/MessageReactions.tsx

@@ -1,9 +1,11 @@
 import {useContext} from 'react';
 import {Pressable, type PressableProps, StyleSheet, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
+import MaterialIcon from '@react-native-vector-icons/material-icons';
 
 import type {Message} from 'revolt.js';
 
+import {app} from '@clerotri/Generic';
 import {client} from '@clerotri/lib/client';
 import {Text} from '@clerotri/components/common/atoms';
 import {Image} from '@clerotri/crossplat/Image';
@@ -57,6 +59,9 @@ const Reaction = observer(
 export const MessageReactions = observer(({msg}: {msg: Message}) => {
   const reactions = [];
 
+  const {currentTheme} = useContext(ThemeContext);
+  const localStyles = generateLocalStyles(currentTheme);
+
   for (const key of msg.reactions.keys()) {
     reactions.push(key);
   }
@@ -78,6 +83,20 @@ export const MessageReactions = observer(({msg}: {msg: Message}) => {
             />
           );
         })}
+        {msg.channel?.havePermission('React') ? (
+          <Pressable
+                key={`message-${msg._id}-add-reaction}`}
+                onPress={() => app.openAddReaction(msg)}
+                style={localStyles.reaction}>
+                <View style={{flexDirection: 'row'}}>
+                  <MaterialIcon
+                    name="add-reaction"
+                    size={20}
+                    color={currentTheme.foregroundPrimary}
+                  />
+                </View>
+              </Pressable>
+        ) : null}
       </View>
     );
   }

src/components/sheets/AddReactionSheet.tsx

@@ -0,0 +1,67 @@
+import { useContext, useRef, useState, useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { observer } from 'mobx-react-lite';
+import EmojiSelector from 'react-native-emoji-selector';
+// import EmojiPicker from 'emoji-picker-react';
+
+import type BottomSheetCore from '@gorhom/bottom-sheet';
+
+import type { Message } from 'revolt.js';
+
+import { client } from '@clerotri/lib/client';
+import { showToast } from '@clerotri/lib/utils';
+import { app, setFunction } from '@clerotri/Generic';
+import { BottomSheet } from '@clerotri/components/common/BottomSheet';
+import { ThemeContext } from '@clerotri/lib/themes';
+import { useBackHandler } from '@clerotri/lib/ui';
+
+export const AddReactionSheet = observer(() => {
+  const { currentTheme } = useContext(ThemeContext);
+
+  const [message, setMessage] = useState(null as Message | null);
+
+  const sheetRef = useRef<BottomSheetCore>(null);
+
+  useBackHandler(() => {
+    if (message) {
+      sheetRef.current?.close();
+      return true;
+    }
+
+    return false;
+  });
+
+  setFunction('openAddReaction', async (m: Message | null) => {
+    setMessage(m);
+    m ? sheetRef.current?.expand() : sheetRef.current?.close();
+  });
+
+  function selectEmoji(emoji: string) {
+    if (!message) return;
+
+    const reaction = message.reactions.get(emoji) || [];
+
+    message.channel?.havePermission('React')
+      ? !Array.from(reaction).includes(client.user?._id!)
+        ? message.react(emoji)
+        : message.unreact(emoji)
+      : showToast('You cannot react to this message.');
+    app.openAddReaction(null);
+  }
+
+  return (
+    // BottomSheet cannot wrap our children in a scroll view because it will
+    // create a nested set of scroll views which causes issues
+    <BottomSheet innerScroll={true} sheetRef={sheetRef}>
+      <View style={{ paddingHorizontal: 16, flex: 1 }}>
+        {!message ? (
+          <></>
+        ) : (
+          <EmojiSelector
+            onEmojiSelected={selectEmoji}
+            columns={8} />
+        )}
+      </View>
+    </BottomSheet>
+  );
+});

src/components/sheets/MessageMenuSheet.tsx

@@ -56,6 +56,22 @@ export const MessageMenuSheet = observer(() => {
               }}>
               <ReplyMessage message={message} showSymbol={false} />
             </View>
+            {message.channel?.havePermission('React') && settings.get('ui.messaging.showReactions') ? (
+              <ContextButton
+              onPress={() => {
+                app.openAddReaction(message);
+                app.openMessage(null);
+              }}>
+              <View style={styles.iconContainer}>
+                <MaterialIcon
+                  name="add-reaction"
+                  size={20}
+                  color={currentTheme.foregroundPrimary}
+                />
+              </View>
+              <Text>Add Reaction</Text>
+            </ContextButton>
+            ) : null}
             {message.channel?.havePermission('SendMessage') ? (
               <ContextButton
                 onPress={() => {

src/components/sheets/index.ts

@@ -11,3 +11,4 @@ export {ServerInviteSheet} from './ServerInviteSheet';
 export {ServerSettingsSheet} from './ServerSettingsSheet';
 export {SettingsSheet} from './SettingsSheet';
 export {StatusSheet} from './StatusSheet';
+export {AddReactionSheet} from './AddReactionSheet';

yarn.lock

@@ -5053,6 +5053,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-datasource@npm:^6.0.0":
+  version: 6.1.1
+  resolution: "emoji-datasource@npm:6.1.1"
+  checksum: 10c0/b65d4cc3fa32d8ec03a5bc1c7c8506083ad12f3c2e244b7a8213c4f83619735899d124bb7471d1c794a6f4ac838f7b090c163495fa9b85bb96de4147daffa6aa
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -9129,7 +9136,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -9319,17 +9326,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-gesture-handler@npm:^2.25.0":
-  version: 2.25.0
-  resolution: "react-native-gesture-handler@npm:2.25.0"
+"react-native-emoji-selector@npm:0.2.0":
+  version: 0.2.0
+  resolution: "react-native-emoji-selector@npm:0.2.0"
+  dependencies:
+    emoji-datasource: "npm:^6.0.0"
+  checksum: 10c0/699d63074c9127e8e1ed8ea9bdc0ccfc5f4669e17564c2aef417082c756d513d49a74811ad0fc222197806e3a0e2cd90e78a98f2d39c6fba4625306c7cb32e8a
+  languageName: node
+  linkType: hard
+
+"react-native-emoji-selector@patch:react-native-emoji-selector@npm%3A0.2.0#~/.yarn/patches/react-native-emoji-selector-npm-0.2.0-d28c8d59eb.patch":
+  version: 0.2.0
+  resolution: "react-native-emoji-selector@patch:react-native-emoji-selector@npm%3A0.2.0#~/.yarn/patches/react-native-emoji-selector-npm-0.2.0-d28c8d59eb.patch::version=0.2.0&hash=31bf66"
+  dependencies:
+    emoji-datasource: "npm:^6.0.0"
+  checksum: 10c0/51a6ba707ade719e8bcbb4231e760195762d68f95264e5677706f45950b976dc4f6128dc4684faaad4eff670ba1b77ce83a1e9519533fe9c4ce363a0da3eb035
+  languageName: node
+  linkType: hard
+
+"react-native-gesture-handler@npm:2.20.2":
+  version: 2.20.2
+  resolution: "react-native-gesture-handler@npm:2.20.2"
   dependencies:
     "@egjs/hammerjs": "npm:^2.0.17"
     hoist-non-react-statics: "npm:^3.3.0"
     invariant: "npm:^2.2.4"
+    prop-types: "npm:^15.7.2"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/95eccc67fb07418ef76b84bcee4b29c16865e78afa367ec82d94b08554cfa7337158ab23937b785bd9a732e62c9c815b294a93d1b2c2cbdc7a8a1e7029f2ba35
+  checksum: 10c0/94c16a40370adfaaff8af6aec5938a8d5c5704afaf7ec569d9e11c66ecc3b5c763314c091a76573885636c04d9e6084de3696d59595c56aac9eb17b2f28e5c6c
   languageName: node
   linkType: hard
 
@@ -9992,7 +10018,8 @@ __metadata:
     react-native: "npm:^0.79.0-rc.4"
     react-native-device-info: "npm:^14.0.4"
     react-native-drawer-layout: "npm:^4.1.2"
-    react-native-gesture-handler: "npm:^2.25.0"
+    react-native-emoji-selector: "patch:react-native-emoji-selector@npm%3A0.2.0#~/.yarn/patches/react-native-emoji-selector-npm-0.2.0-d28c8d59eb.patch"
+    react-native-gesture-handler: "npm:2.20.2"
     react-native-get-random-values: "npm:^1.11.0"
     react-native-keyboard-controller: "npm:^1.16.8"
     react-native-mmkv: "npm:^3.2.0"