feat: double tap to reply

i18n/strings/en.json

@@ -110,6 +110,8 @@
  "theme": "Theme",
  "theme_remark": "You'll have to open or close the side menu for your changes to appear everywhere.",
  "messaging": {
+ "doubleTapToReply": "Reply to messages by double-tapping them",
+ "doubleTapToReply_remark": "This is only supported in the new message view.",
  "emojiPack": "Emoji pack",
  "experimentalScrolling": "Enable channel scrolling for old message view",
  "experimentalScrolling_remark": "You can only scroll backwards.",

src/Generic.tsx

@@ -206,6 +206,14 @@ export const app = {
  default: true,
  type: 'boolean',
  },
+ {
+ key: 'ui.messaging.doubleTapToReply',
+ category: 'functionality',
+ default: true,
+ type: 'boolean',
+ experimental: true,
+ remark: true,
+ },
  {
  key: 'ui.messaging.emojiPack',
  category: 'appearance',

src/MessageView.tsx

@@ -21,7 +21,16 @@ import {Button, Text} from './components/common/atoms';
 import {Message} from './components/common/messaging';
 import {calculateGrouped, fetchMessages} from './lib/utils';
 
-function renderMessage(msg: RevoltMessage, messages?: RevoltMessage[]) {
+type DoubleTapState = {
+ count: number;
+ message: string;
+};
+
+function renderMessage(
+ msg: RevoltMessage,
+ onPress: (m: RevoltMessage) => void,
+ messages?: RevoltMessage[],
+) {
  let grouped: boolean;
  try {
  grouped = messages
@@ -40,13 +49,46 @@ function renderMessage(msg: RevoltMessage, messages?: RevoltMessage[]) {
  key={`message-${msg._id}`}
  message={msg}
  grouped={grouped}
+ onPress={() => onPress(msg)}
  onUserPress={() => app.openProfile(msg.author, msg.channel?.server)}
  onLongPress={async () => app.openMessage(msg)}
  queued={false}
  />
  );
 }
 
+function handleTap(
+ oldState: DoubleTapState,
+ newMessage: RevoltMessage,
+ setState: (s: DoubleTapState) => void,
+) {
+ if (newMessage._id === oldState.message) {
+ if (oldState.count === 1) {
+ if (app.settings.get('ui.messaging.doubleTapToReply')) {
+ const existingReplies = [...app.getReplyingMessages()];
+ if (
+ existingReplies.filter(m => m.message._id === newMessage._id).length >
+ 0
+ ) {
+ setState({count: 0, message: ''});
+ return;
+ }
+ if (existingReplies.length >= 5) {
+ setState({count: 0, message: ''});
+ return;
+ }
+ app.setReplyingMessages([
+ ...existingReplies,
+ {message: newMessage, mentions: false},
+ ]);
+ }
+ setState({count: 0, message: ''});
+ }
+ } else {
+ setState({count: 1, message: newMessage._id});
+ }
+}
+
 function MessageViewErrorMessage({
  error,
  resetErrorBoundary,
@@ -80,9 +122,18 @@ export const NewMessageView = observer(
  console.log(`[NEWMESSAGEVIEW] Creating message view for ${channel._id}...`);
  const [messages, setMessages] = React.useState([] as RevoltMessage[]);
  const [loading, setLoading] = React.useState(true);
+ const [doubleTapStatus, setDoubleTapStatus] = React.useState({
+ count: 0,
+ message: '',
+ });
+ // const setDoubleTapStatus = (s: DoubleTapState) => {
+ // console.log(s);
+ // _setDoubleTapStatus(s);
+ // };
  const [atEndOfPage, setAtEndOfPage] = React.useState(false);
  const [error, setError] = React.useState(null as any);
  let scrollView: FlatList | null;
+
  React.useEffect(() => {
  console.log(`[NEWMESSAGEVIEW] Fetching messages for ${channel._id}...`);
  async function getMessages() {
@@ -133,8 +184,12 @@ export const NewMessageView = observer(
  });
 
  // set functions here so they don't get recreated
+ const onPress = (m: RevoltMessage) => {
+ handleTap(doubleTapStatus, m, setDoubleTapStatus);
+ };
+
  const renderItem = ({item}: {item: RevoltMessage}) => {
- return renderMessage(item, messages);
+ return renderMessage(item, onPress, messages);
  };
 
  const keyExtractor = (item: RevoltMessage) => {

src/components/common/messaging/Message.tsx

@@ -31,6 +31,7 @@ type MessageProps = {
  queued: boolean;
  onUserPress?: any;
  onUsernamePress?: any;
+ onPress?: any;
  onLongPress?: any;
 };
 
@@ -225,6 +226,11 @@ export const Message = observer((props: MessageProps) => {
  key={props.message._id}
  activeOpacity={0.8}
  delayLongPress={750}
+ onPress={
+ props.message.author?.relationship === 'Blocked'
+ ? null
+ : props.onPress
+ }
  onLongPress={
  props.message.author?.relationship === 'Blocked'
  ? null