Feat better mobile context menu

.changeset/feat_add_better_mobile_context.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add a new Mobile Context

src/app/components/event-readers/EventReaders.tsx

@@ -28,7 +28,6 @@ export const EventReaders = as<'div', EventReadersProps>(
     const openProfile = useOpenUserRoomProfile();
     const space = useSpaceOptionally();
     const nicknames = useAtomValue(nicknamesAtom);
-
     const getName = (userId: string) =>
       getMemberDisplayName(room, userId, nicknames) ?? getMxIdLocalPart(userId) ?? userId;
 

src/app/components/message/layout/Base.tsx

@@ -13,6 +13,7 @@ export const MessageBase = as<'div', css.MessageBaseVariants>(
       collapse,
       autoCollapse,
       space,
+      mobile,
       ...props
     },
     ref
@@ -27,6 +28,7 @@ export const MessageBase = as<'div', css.MessageBaseVariants>(
           collapse,
           autoCollapse,
           space,
+          mobile,
         }),
         className
       )}

src/app/components/message/layout/layout.css.ts

@@ -65,6 +65,15 @@ export const messageJumpHighlight = style({
   animationIterationCount: 'infinite',
 });
 
+const MobileVariant = styleVariants({
+  true: {
+    WebkitUserSelect: 'none',
+    msUserSelect: 'none',
+    userSelect: 'none',
+    MozUserSelect: 'none',
+  },
+});
+
 const HighlightVariant = styleVariants({
   true: [messageJumpHighlight],
 });
@@ -108,6 +117,8 @@ export const MessageBase = recipe({
       borderRadius: `0 ${config.radii.R400} ${config.radii.R400} 0`,
       minHeight: toRem(16),
       contain: 'layout',
+      flexGrow: '1',
+      width: '100',
     },
   ],
   variants: {
@@ -124,6 +135,7 @@ export const MessageBase = recipe({
     notifyHighlight: NotifyHighlightVariant,
     selected: SelectedVariant,
     isMarked: MarkedVariant,
+    mobile: MobileVariant,
   },
   defaultVariants: {
     space: '400',

src/app/components/message/modals/GlobalModalManager.tsx

@@ -10,18 +10,23 @@ import { MessageSourceInternal } from './MessageSource';
 import { MessageForwardInternal } from './MessageForward';
 import { MessageAllReactionInternal } from './MessageReactions';
 import { MessageReadReceiptInternal } from './MessageReadRecipts';
+import { MobileOptionsInternal } from './Options';
 
 export function GlobalModalManager() {
   const [modal, setModal] = useAtom(modalAtom);
 
-  const close = () => setModal(null);
-
-  if (modal?.type === ModalType.Forward) {
-    return <MessageForwardInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />;
-  }
+  const close = () => {
+    setModal(null);
+  };
 
   if (!modal) return null;
 
+  if (modal.type === ModalType.Forward) {
+    return <MessageForwardInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />;
+  }
+  if (modal.type === ModalType.MobileOptions) {
+    return <MobileOptionsInternal options={modal.options} />;
+  }
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
@@ -34,24 +39,22 @@ export function GlobalModalManager() {
           }}
         >
           <div>
+            {' '}
             {modal.type === ModalType.Report && (
               <Box>
                 <MessageReportInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
               </Box>
             )}
-
             {modal.type === ModalType.Delete && (
               <Box>
                 <MessageDeleteInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
               </Box>
             )}
-
             {modal.type === ModalType.Source && (
               <Modal variant="Surface" size="300">
                 <MessageSourceInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
               </Modal>
             )}
-
             {modal.type === ModalType.Reactions && (
               <Modal variant="Surface" size="300">
                 <MessageAllReactionInternal
@@ -61,7 +64,6 @@ export function GlobalModalManager() {
                 />
               </Modal>
             )}
-
             {modal.type === ModalType.EditHistory && (
               <Modal variant="Surface" size="300">
                 <MessageEditHistoryInternal
@@ -71,7 +73,6 @@ export function GlobalModalManager() {
                 />
               </Modal>
             )}
-
             {modal.type === ModalType.ReadReceipts && (
               <Modal variant="Surface" size="300">
                 <MessageReadReceiptInternal

src/app/components/message/modals/MessageDelete.tsx

@@ -25,7 +25,15 @@ import * as Sentry from '@sentry/react';
 
 const debugLog = createDebugLogger('MessageDelete');
 
-export function MessageDeleteItem({ room, mEvent }: { room: Room; mEvent: MatrixEvent }) {
+export function MessageDeleteItem({
+  room,
+  mEvent,
+  closeMenu,
+}: {
+  room: Room;
+  mEvent: MatrixEvent;
+  closeMenu?: () => void;
+}) {
   const setModal = useSetAtom(modalAtom);
 
   return (
@@ -43,6 +51,7 @@ export function MessageDeleteItem({ room, mEvent }: { room: Room; mEvent: Matrix
           room,
           mEvent,
         });
+        closeMenu?.();
       }}
     >
       <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>

src/app/components/message/modals/MessageReadRecipts.tsx

@@ -7,7 +7,15 @@ import { modalAtom, ModalType } from '$state/modal';
 import { EventReaders } from '$components/event-readers';
 import * as css from '$features/room/message/styles.css';
 
-export function MessageReadReceiptItem({ room, eventId }: { room: Room; eventId: string }) {
+export function MessageReadReceiptItem({
+  room,
+  eventId,
+  closeMenu,
+}: {
+  room: Room;
+  eventId: string;
+  closeMenu?: () => void;
+}) {
   const setModal = useSetAtom(modalAtom);
 
   return (
@@ -23,6 +31,7 @@ export function MessageReadReceiptItem({ room, eventId }: { room: Room; eventId:
           room,
           eventId,
         });
+        closeMenu?.();
       }}
     >
       <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>

src/app/components/message/modals/MessageReport.tsx

@@ -25,7 +25,15 @@ import * as Sentry from '@sentry/react';
 
 const debugLog = createDebugLogger('MessageReport');
 
-export function MessageReportItem({ room, mEvent }: { room: Room; mEvent: MatrixEvent }) {
+export function MessageReportItem({
+  room,
+  mEvent,
+  closeMenu,
+}: {
+  room: Room;
+  mEvent: MatrixEvent;
+  closeMenu?: () => void;
+}) {
   const setModal = useSetAtom(modalAtom);
 
   return (
@@ -43,6 +51,7 @@ export function MessageReportItem({ room, mEvent }: { room: Room; mEvent: Matrix
           room,
           mEvent,
         });
+        closeMenu?.();
       }}
     >
       <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>

src/app/components/message/modals/MessageSource.tsx

@@ -8,7 +8,15 @@ import { getEventEdits } from '$utils/room';
 import { modalAtom, ModalType } from '$state/modal';
 import * as css from '$features/room/message/styles.css';
 
-export function MessageSourceCodeItem({ room, mEvent }: { room: Room; mEvent: MatrixEvent }) {
+export function MessageSourceCodeItem({
+  room,
+  mEvent,
+  closeMenu,
+}: {
+  room: Room;
+  mEvent: MatrixEvent;
+  closeMenu: () => void;
+}) {
   const setModal = useSetAtom(modalAtom);
 
   return (
@@ -24,6 +32,7 @@ export function MessageSourceCodeItem({ room, mEvent }: { room: Room; mEvent: Ma
           room,
           mEvent,
         });
+        closeMenu();
       }}
     >
       <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>