feat: Add mobile gesture (again)

src/app/components/BackRouteHandler.tsx

@@ -1,86 +1,10 @@
-import { ReactNode, useCallback } from 'react';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
-import {
-  getDirectPath,
-  getExplorePath,
-  getHomePath,
-  getInboxPath,
-  getSpacePath,
-} from '../pages/pathUtils';
-import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
+import { ReactNode } from 'react';
+import { useGoBack } from '../hooks/useGoBack';
 
 type BackRouteHandlerProps = {
   children: (onBack: () => void) => ReactNode;
 };
 export function BackRouteHandler({ children }: BackRouteHandlerProps) {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const goBack = useCallback(() => {
-    if (
-      matchPath(
-        {
-          path: HOME_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getHomePath());
-      return;
-    }
-    if (
-      matchPath(
-        {
-          path: DIRECT_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getDirectPath());
-      return;
-    }
-    const spaceMatch = matchPath(
-      {
-        path: SPACE_PATH,
-        caseSensitive: true,
-        end: false,
-      },
-      location.pathname
-    );
-    if (spaceMatch?.params.spaceIdOrAlias) {
-      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
-      return;
-    }
-    if (
-      matchPath(
-        {
-          path: EXPLORE_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getExplorePath());
-      return;
-    }
-    if (
-      matchPath(
-        {
-          path: INBOX_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getInboxPath());
-    }
-  }, [navigate, location]);
-
+  const goBack = useGoBack();
   return children(goBack);
 }

src/app/components/SlideMenuChild.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { matchPath, useLocation } from "react-router-dom";
+import { HOME_PATH, DIRECT_PATH, SPACE_PATH, EXPLORE_PATH, INBOX_PATH } from "../pages/paths";
+import React from "react";
+import { Direct } from "../pages/client/direct";
+import { Explore } from "../pages/client/explore";
+import { Home } from "../pages/client/home";
+import { Inbox } from "../pages/client/inbox";
+import { Space } from "../pages/client/space";
+
+// A component to match path and return the corresponding slide menu parent.
+export function SlideMenuChild() {
+	const location = useLocation();
+
+	let previousComponent: ReactNode;
+	if (matchPath({ path: HOME_PATH, caseSensitive: true, end: false, }, location.pathname)) previousComponent = <Home />;
+	else if (matchPath({ path: DIRECT_PATH, caseSensitive: true, end: false, }, location.pathname)) previousComponent = <Direct />;
+	else if (matchPath({ path: EXPLORE_PATH, caseSensitive: true, end: false, }, location.pathname)) previousComponent = <Explore />;
+	else if (matchPath({ path: INBOX_PATH, caseSensitive: true, end: false, }, location.pathname)) previousComponent = <Inbox />;
+	else if (matchPath({ path: SPACE_PATH, caseSensitive: true, end: false, }, location.pathname)) previousComponent = <Space />;
+
+	return previousComponent;
+}

src/app/components/page/Page.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, MutableRefObject, ReactNode } from 'react';
+import React, { ComponentProps, CSSProperties, MutableRefObject, ReactNode } from 'react';
 import { Box, Header, Line, Scroll, Text, as } from 'folds';
 import classNames from 'classnames';
 import { ContainerColor } from '../../styles/ContainerColor.css';
@@ -146,3 +146,12 @@ export function PageHero({
 export const PageContentCenter = as<'div'>(({ className, ...props }, ref) => (
   <div className={classNames(css.PageContentCenter, className)} {...props} ref={ref} />
 ));
+
+// Only used in mobile for slide menu
+export function PageRootFloat({ children, style }: { children: ReactNode, style: CSSProperties }) {
+  return (
+    <Box grow="Yes" style={style} className={classNames(css.PageRootFloat, ContainerColor({ variant: 'Background' }))}>
+      {children}
+    </Box>
+  );
+}

src/app/components/page/style.css.ts

@@ -78,3 +78,13 @@ export const PageContentCenter = style([
     margin: 'auto',
   },
 ]);
+
+export const PageRootFloat = style([
+  DefaultReset,
+  {
+    position: "fixed",
+    left: 0, top: 0,
+    width: "100vw", height: "100vh",
+    transition: "transform ease .25s"
+  }
+]);

src/app/features/room/Room.tsx

@@ -13,6 +13,10 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { PageRootFloat } from '../../components/page';
+import { SidebarNav } from '../../pages/client/SidebarNav';
+import { SlideMenuChild } from '../../components/SlideMenuChild';
+import { useSlideMenu } from '../../hooks/useSlideMenu';
 
 export function Room() {
   const { eventId } = useParams();
@@ -24,6 +28,8 @@ export function Room() {
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room.roomId);
 
+  const { offset, offsetOverride, onTouchStart, onTouchEnd, onTouchMove } = useSlideMenu();
+
   useKeyDown(
     window,
     useCallback(
@@ -38,7 +44,7 @@ export function Room() {
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
-      <Box grow="Yes">
+      <Box grow="Yes" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchMove={onTouchMove}>
         <RoomView room={room} eventId={eventId} />
         {screenSize === ScreenSize.Desktop && isDrawer && (
           <>
@@ -47,6 +53,14 @@ export function Room() {
           </>
         )}
       </Box>
+      {/* Create a slide menu offscreen for mobile. Same for all other slide menus. */}
+      {screenSize === ScreenSize.Mobile && <PageRootFloat style={{
+        transform: `translateX(${offsetOverride ? 0 : (-window.innerWidth + offset[0])}px)`,
+        transition: offset[0] ? "none" : ""
+      }}>
+        <SidebarNav />
+        <SlideMenuChild />
+      </PageRootFloat>}
     </PowerLevelsContextProvider>
   );
 }

src/app/features/room/RoomTimeline.tsx

@@ -117,6 +117,10 @@ import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useTouchOffset } from '../../hooks/useTouchOffset';
+import { PageRoot } from '../../components/page';
+import { Space } from '../../pages/client/space';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -888,13 +892,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     [mx, room, editor]
   );
 
-  const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    (evt) => {
-      const replyId = evt.currentTarget.getAttribute('data-event-id');
-      if (!replyId) {
-        console.warn('Button should have "data-event-id" attribute!');
-        return;
-      }
+  // This is been changed to accept the replyId directly instead of a mouse event in order to be used for swipe left reply.
+  const handleReply = useCallback(
+    (replyId: string) => {
       const replyEvt = room.findEventById(replyId);
       if (!replyEvt) return;
       const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
@@ -990,7 +990,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             relations={hasReactions ? reactionRelations : undefined}
             onUserClick={handleUserClick}
             onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
+            onReply={handleReply}
             onReactionToggle={handleReactionToggle}
             onEditId={handleEdit}
             reply={
@@ -1062,7 +1062,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             relations={hasReactions ? reactionRelations : undefined}
             onUserClick={handleUserClick}
             onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
+            onReply={handleReply}
             onReactionToggle={handleReactionToggle}
             onEditId={handleEdit}
             reply={
@@ -1170,7 +1170,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             relations={hasReactions ? reactionRelations : undefined}
             onUserClick={handleUserClick}
             onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
+            onReply={handleReply}
             onReactionToggle={handleReactionToggle}
             reactions={
               reactionRelations && (

src/app/features/room/message/Message.tsx

@@ -76,6 +76,7 @@ import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
 import { StateEvent } from '../../../../types/matrix/room';
+import { useTouchOffset } from '../../../hooks/useTouchOffset';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -666,7 +667,7 @@ export type MessageProps = {
   messageSpacing: MessageSpacing;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
-  onReplyClick: MouseEventHandler<HTMLButtonElement>;
+  onReply: (replyId: string) => void;
   onEditId?: (eventId?: string) => void;
   onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
   reply?: ReactNode;
@@ -690,7 +691,7 @@ export const Message = as<'div', MessageProps>(
       messageSpacing,
       onUserClick,
       onUsernameClick,
-      onReplyClick,
+      onReply,
       onReactionToggle,
       onEditId,
       reply,
@@ -708,6 +709,21 @@ export const Message = as<'div', MessageProps>(
     const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
     const [menuAnchor, setMenuAnchor] = useState<RectCords>();
     const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
+    // Swipe left gesture that, if it is pulled to the left by 20% of screen width, trigger a reply
+    const { offset, onTouchStart, onTouchEnd, onTouchMove } = useTouchOffset({ offsetLimit: [-0.25 * window.innerWidth, 0, 0, 0], touchEndCallback: ([x]) => {
+      if (x < -0.2 * window.innerWidth)
+        onReply(mEvent.getId()!);
+    }});
+
+    // Wrapper of the new onReply for the old onReplyClick
+    const onReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback((evt) => {
+      const replyId = evt.currentTarget.getAttribute('data-event-id');
+      if (!replyId) {
+        console.warn('Button should have "data-event-id" attribute!');
+        return;
+      }
+      onReply(replyId);
+    }, []);
 
     const senderDisplayName =
       getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
@@ -838,6 +854,10 @@ export const Message = as<'div', MessageProps>(
         collapse={collapse}
         highlight={highlight}
         selected={!!menuAnchor || !!emojiBoardAnchor}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
+        onTouchMove={onTouchMove}
+        style={{ transform: `translateX(${offset[0]}px)`, transition: offset[0] ? "none" : "" }}
         {...props}
         {...hoverProps}
         {...focusWithinProps}

src/app/features/room/message/styles.css.ts

@@ -3,6 +3,7 @@ import { DefaultReset, config, toRem } from 'folds';
 
 export const MessageBase = style({
   position: 'relative',
+  transition: 'transform ease .25s'
 });
 
 export const MessageOptionsBase = style([

src/app/hooks/useGoBack.ts

@@ -0,0 +1,78 @@
+import { useCallback } from "react";
+import { useNavigate, useLocation, matchPath } from "react-router-dom";
+import { HOME_PATH, DIRECT_PATH, SPACE_PATH, EXPLORE_PATH, INBOX_PATH } from "../pages/paths";
+import { getHomePath, getDirectPath, getSpacePath, getExplorePath, getInboxPath } from "../pages/pathUtils";
+
+// Moved goBack from BackRouteHandler for reusabilitiy
+export function useGoBack() {
+	const navigate = useNavigate();
+	const location = useLocation();
+
+	const goBack = useCallback(() => {
+		if (
+			matchPath(
+				{
+					path: HOME_PATH,
+					caseSensitive: true,
+					end: false,
+				},
+				location.pathname
+			)
+		) {
+			navigate(getHomePath());
+			return;
+		}
+		if (
+			matchPath(
+				{
+					path: DIRECT_PATH,
+					caseSensitive: true,
+					end: false,
+				},
+				location.pathname
+			)
+		) {
+			navigate(getDirectPath());
+			return;
+		}
+		const spaceMatch = matchPath(
+			{
+				path: SPACE_PATH,
+				caseSensitive: true,
+				end: false,
+			},
+			location.pathname
+		);
+		if (spaceMatch?.params.spaceIdOrAlias) {
+			navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
+			return;
+		}
+		if (
+			matchPath(
+				{
+					path: EXPLORE_PATH,
+					caseSensitive: true,
+					end: false,
+				},
+				location.pathname
+			)
+		) {
+			navigate(getExplorePath());
+			return;
+		}
+		if (
+			matchPath(
+				{
+					path: INBOX_PATH,
+					caseSensitive: true,
+					end: false,
+				},
+				location.pathname
+			)
+		) {
+			navigate(getInboxPath());
+		}
+	}, [navigate, location]);
+
+	return goBack;
+}