e.stopPropagation()}>
diff --git a/packages/shared/src/components/MessageItem.jsx b/packages/shared/src/components/MessageItem.jsx
index 9d9cf51..77523e0 100644
--- a/packages/shared/src/components/MessageItem.jsx
+++ b/packages/shared/src/components/MessageItem.jsx
@@ -212,6 +212,7 @@ const MessageItem = React.memo(({
onScrollToMessage,
onProfilePopup,
onImageClick,
+ onLongPress,
scrollToBottom,
Attachment,
LinkPreview,
@@ -300,6 +301,9 @@ const MessageItem = React.memo(({
onMouseEnter={onHover}
onMouseLeave={onLeave}
onContextMenu={onContextMenu}
+ onTouchStart={onLongPress?.onTouchStart}
+ onTouchMove={onLongPress?.onTouchMove}
+ onTouchEnd={onLongPress?.onTouchEnd}
>
{isMentioned &&
}
diff --git a/packages/shared/src/components/MobileMessageDrawer.jsx b/packages/shared/src/components/MobileMessageDrawer.jsx
new file mode 100644
index 0000000..e030006
--- /dev/null
+++ b/packages/shared/src/components/MobileMessageDrawer.jsx
@@ -0,0 +1,158 @@
+import React, { useState, useRef, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { EmojieIcon, EditIcon, ReplyIcon, DeleteIcon, PinIcon } from '../assets/icons';
+import { getEmojiUrl } from '../assets/emojis';
+import ColoredIcon from './ColoredIcon';
+
+const ICON_COLOR_DEFAULT = 'hsl(240, 4.294%, 68.039%)';
+
+const QUICK_REACTIONS = [
+ { name: 'thumbsup', category: 'people' },
+ { name: 'fire', category: 'nature' },
+ { name: 'heart', category: 'symbols' },
+ { name: 'joy', category: 'people' },
+ { name: 'sob', category: 'people' },
+ { name: 'eyes', category: 'people' },
+];
+
+const CopyIcon = () => (
+
+);
+
+const MobileMessageDrawer = ({ message, isOwner, isAttachment, canDelete, onClose, onAction, onQuickReaction }) => {
+ const [closing, setClosing] = useState(false);
+ const drawerRef = useRef(null);
+ const dragStartY = useRef(null);
+ const dragCurrentY = useRef(null);
+ const dragStartTime = useRef(null);
+
+ const dismiss = useCallback(() => {
+ setClosing(true);
+ setTimeout(onClose, 200);
+ }, [onClose]);
+
+ const handleAction = useCallback((action) => {
+ onAction(action);
+ dismiss();
+ }, [onAction, dismiss]);
+
+ const handleQuickReaction = useCallback((name) => {
+ onQuickReaction(name);
+ dismiss();
+ }, [onQuickReaction, dismiss]);
+
+ // Swipe-to-dismiss
+ const handleTouchStart = useCallback((e) => {
+ dragStartY.current = e.touches[0].clientY;
+ dragCurrentY.current = e.touches[0].clientY;
+ dragStartTime.current = Date.now();
+ if (drawerRef.current) {
+ drawerRef.current.style.transition = 'none';
+ }
+ }, []);
+
+ const handleTouchMove = useCallback((e) => {
+ if (dragStartY.current === null) return;
+ dragCurrentY.current = e.touches[0].clientY;
+ const dy = dragCurrentY.current - dragStartY.current;
+ if (dy > 0 && drawerRef.current) {
+ drawerRef.current.style.transform = `translateY(${dy}px)`;
+ }
+ }, []);
+
+ const handleTouchEnd = useCallback(() => {
+ if (dragStartY.current === null || !drawerRef.current) return;
+ const dy = dragCurrentY.current - dragStartY.current;
+ const dt = (Date.now() - dragStartTime.current) / 1000;
+ const velocity = dt > 0 ? dy / dt : 0;
+ const drawerHeight = drawerRef.current.offsetHeight;
+ const threshold = drawerHeight * 0.3;
+
+ if (dy > threshold || velocity > 500) {
+ dismiss();
+ } else {
+ drawerRef.current.style.transition = 'transform 0.2s ease-out';
+ drawerRef.current.style.transform = 'translateY(0)';
+ }
+ dragStartY.current = null;
+ }, [dismiss]);
+
+ const isPinned = message?.pinned;
+
+ return ReactDOM.createPortal(
+ <>
+
+
+
+
+ {/* Quick reactions */}
+
+ {QUICK_REACTIONS.map(({ name, category }) => (
+
+ ))}
+
+
+
+
+
+ {/* Primary actions */}
+
+ {isOwner && !isAttachment && (
+
+ )}
+
+ {!isAttachment && (
+
+ )}
+
+
+
+ {/* Danger actions */}
+ {canDelete && (
+
+
+
+ )}
+
+ ,
+ document.body
+ );
+};
+
+export default MobileMessageDrawer;
diff --git a/packages/shared/src/index.css b/packages/shared/src/index.css
index 688c3b2..bcbccca 100644
--- a/packages/shared/src/index.css
+++ b/packages/shared/src/index.css
@@ -3417,6 +3417,134 @@ body {
}
+/* ============================================
+ MOBILE MESSAGE ACTION DRAWER
+ ============================================ */
+
+@keyframes mobileDrawerOverlayIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes mobileDrawerSlideUp {
+ from { transform: translateY(100%); }
+ to { transform: translateY(0); }
+}
+
+@keyframes mobileDrawerSlideDown {
+ from { transform: translateY(0); }
+ to { transform: translateY(100%); }
+}
+
+.mobile-drawer-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.6);
+ z-index: 10002;
+ animation: mobileDrawerOverlayIn 0.2s ease;
+}
+
+.mobile-drawer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ max-height: 70vh;
+ background: #1C1D22;
+ border-radius: 16px 16px 0 0;
+ z-index: 10003;
+ animation: mobileDrawerSlideUp 0.25s ease-out;
+ padding-bottom: env(safe-area-inset-bottom, 0px);
+ touch-action: none;
+ overflow-y: auto;
+}
+
+.mobile-drawer.mobile-drawer-closing {
+ animation: mobileDrawerSlideDown 0.2s ease-in forwards;
+}
+
+.mobile-drawer-handle {
+ display: flex;
+ justify-content: center;
+ padding: 10px 0 6px;
+}
+
+.mobile-drawer-handle-bar {
+ width: 40px;
+ height: 4px;
+ border-radius: 2px;
+ background: hsla(240, 4%, 60%, 0.4);
+}
+
+.mobile-drawer-reactions {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px 12px;
+}
+
+.mobile-drawer-reaction-btn {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: #2E3138;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ border: none;
+ -webkit-tap-highlight-color: transparent;
+ transition: background-color 0.15s;
+}
+
+.mobile-drawer-reaction-btn:active {
+ background: hsla(240, 4%, 40%, 0.4);
+}
+
+.mobile-drawer-separator {
+ height: 1px;
+ background: hsla(240, 4%, 60%, 0.12);
+ margin: 0 16px;
+}
+
+.mobile-drawer-card {
+ margin: 8px 16px;
+ border-radius: 12px;
+ background: #27272F;
+ overflow: hidden;
+}
+
+.mobile-drawer-action {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 14px 16px;
+ color: var(--text-normal, #dbdee1);
+ font-size: 15px;
+ cursor: pointer;
+ border: none;
+ background: none;
+ width: 100%;
+ text-align: left;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-drawer-action:active {
+ background: hsla(240, 4%, 60%, 0.08);
+}
+
+.mobile-drawer-action + .mobile-drawer-action {
+ border-top: 1px solid hsla(240, 4%, 60%, 0.12);
+}
+
+.mobile-drawer-action-danger {
+ color: #ed4245;
+}
+
/* Remove border between server-list and channel-list on mobile */
.is-mobile .server-list {
border-right: none;