Feat better mobile context menu (#946)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

This PR implements a context menu for mobile, refactors the option
menus, and unifies events and messages to a limited degree, it also
fixes some focus issues

The pr does NOT fix quickmenu being underlayed in the thread root, or
the entirety or focus issues. These issues could be fixed in the future
with the help of this by creating an atom and showing the quickemenu as
a unique item in the RoomView but that would still require a lot of
work, it also does NOT unify the events and messages entirely or reduce
the amount of data that is requested before usage, though it enables it
for future development, nor does it the rightclicking outside of the
MessageInternal/children but still within the message not bringing the
menu

(view of the menu on a random real message)
<img width="1080" height="2307" alt="image"
src="https://github.com/user-attachments/assets/90a85aaa-abde-4b15-a81f-b13dc2fb2a8d"
/>

(maximum size of a mobile menu)
<img width="1080" height="2307" alt="image"
src="https://github.com/user-attachments/assets/a5e98400-aee2-469a-8721-057d04077885"
/>

(this pr does NOT remove the mobile quickmenu so you can still access
the message the old way)
<img width="1080" height="2307" alt="image"
src="https://github.com/user-attachments/assets/f31c2288-7f9c-4b35-b775-8dd9fa216636"
/>

If you wish to select text from a message you have to first bring the
menu and then select it from it

Fixes #

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->
This is being written w the assistance of whatever music is in my ears
while writing it :p

Author: 7w1

.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',