Feat better mobile context menu

.changeset/feat_add_better_mobile_context.md

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

.changeset/feat_add_event_reactions.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add reactions to arbitrary events

.changeset/fix_ghost_quickmenu.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix ghost quickmenu

src/app/components/SwipeableMessageWrapper.tsx

@@ -71,7 +71,7 @@ export function SwipeableMessageWrapper({
   onReply,
 }: {
   children: ReactNode;
-  onReply: () => void;
+  onReply?: () => void;
 }) {
   const settings = useAtomValue(settingsAtom);
 
@@ -83,7 +83,7 @@ export function SwipeableMessageWrapper({
     [settings.mobileGestures, settings.rightSwipeAction]
   );
 
-  if (!isSwipeToReplyEnabled) {
+  if (!isSwipeToReplyEnabled || !onReply) {
     return children;
   }
 

src/app/components/emoji-board/EmojiBoard.tsx

@@ -386,6 +386,7 @@ type EmojiBoardProps = {
   onStickerSelect?: (mxc: string, shortcode: string, label: string) => void;
   allowTextCustomEmoji?: boolean;
   addToRecentEmoji?: boolean;
+  isFullWidth?: boolean;
 };
 
 export function EmojiBoard({
@@ -399,6 +400,7 @@ export function EmojiBoard({
   onStickerSelect,
   allowTextCustomEmoji,
   addToRecentEmoji = true,
+  isFullWidth,
 }: Readonly<EmojiBoardProps>) {
   const mx = useMatrixClient();
   const [saveStickerEmojiBandwidth] = useSetting(settingsAtom, 'saveStickerEmojiBandwidth');
@@ -539,8 +541,12 @@ export function EmojiBoard({
         returnFocusOnDeactivate,
         initialFocus: false,
         onDeactivate: requestClose,
-        clickOutsideDeactivates: true,
-        allowOutsideClick: true,
+
+        allowOutsideClick: (e) => {
+          e.preventDefault();
+          requestClose();
+          return false;
+        },
         isKeyForward: (evt: KeyboardEvent) =>
           !editableActiveElement() && isKeyHotkey(['arrowdown', 'arrowright'], evt),
         isKeyBackward: (evt: KeyboardEvent) =>
@@ -578,6 +584,7 @@ export function EmojiBoard({
             />
           )
         }
+        isFullWidth={isFullWidth}
       >
         <Box grow="Yes">
           <EmojiGroupHolder

src/app/components/emoji-board/components/Layout.tsx

@@ -9,11 +9,12 @@ export const EmojiBoardLayout = as<
     header: ReactNode;
     sidebar?: ReactNode;
     children: ReactNode;
+    isFullWidth?: boolean;
   }
->(({ className, header, sidebar, children, ...props }, ref) => (
+>(({ className, header, sidebar, children, isFullWidth, ...props }, ref) => (
   <Box
     display="InlineFlex"
-    className={classNames(css.Base, className)}
+    className={classNames(css.Base({ isFullWidth }), className)}
     direction="Row"
     {...props}
     ref={ref}

src/app/components/emoji-board/components/styles.css.ts

@@ -1,20 +1,33 @@
 import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { toRem, color, config, DefaultReset, FocusOutline } from 'folds';
 
 /**
  * Layout
  */
 
-export const Base = style({
-  maxWidth: toRem(432),
-  width: `calc(100vw - 2 * ${config.space.S400})`,
-  height: toRem(450),
-  backgroundColor: color.Surface.Container,
-  color: color.Surface.OnContainer,
-  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-  borderRadius: config.radii.R400,
-  boxShadow: config.shadow.E200,
-  overflow: 'hidden',
+export const Base = recipe({
+  base: [
+    {
+      maxWidth: toRem(432),
+      width: `calc(100vw - 2 * ${config.space.S400})`,
+      height: toRem(450),
+      backgroundColor: color.Surface.Container,
+      color: color.Surface.OnContainer,
+      border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+      borderRadius: config.radii.R400,
+      boxShadow: config.shadow.E200,
+      overflow: 'hidden',
+    },
+  ],
+  variants: {
+    isFullWidth: {
+      true: {
+        maxWidth: '100vw',
+        width: `calc(100vw - ${config.borderWidth.B300})`,
+      },
+    },
+  },
 });
 
 export const Header = style({

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>