fix/dm replies and history

src/components/layout/ChatArea.tsx

@@ -50,6 +50,7 @@ import InviteUserModal from "../ui/InviteUserModal";
 import LoadingSpinner from "../ui/LoadingSpinner";
 import ModerationModal, { type ModerationAction } from "../ui/ModerationModal";
 import ReactionModal from "../ui/ReactionModal";
+import { ReactionPopover } from "../ui/ReactionPopover";
 import { ReplyBadge } from "../ui/ReplyBadge";
 import { ScrollToBottomButton } from "../ui/ScrollToBottomButton";
 import { TextArea } from "../ui/TextInput";
@@ -536,6 +537,9 @@ export const ChatArea: React.FC<{
     selectedServerId,
     currentUser,
   });
+  const [reactionAnchorRect, setReactionAnchorRect] = useState<DOMRect | null>(
+    null,
+  );
 
   // Memoize preview styles — selectedColor/selectedFormatting don't change while typing,
   // so recomputing this on every keystroke is unnecessary object churn.
@@ -942,7 +946,7 @@ export const ChatArea: React.FC<{
 
     // Handle Enter key behavior based on settings
     if (e.key === "Enter") {
-      if (isMobile && globalSettings.enableMultilineInput) {
+      if (isNativeMobile && globalSettings.enableMultilineInput) {
         return;
       }
 
@@ -1436,6 +1440,7 @@ export const ChatArea: React.FC<{
   ]);
 
   const handleReactClick = (message: MessageType, buttonElement: Element) => {
+    setReactionAnchorRect(buttonElement.getBoundingClientRect());
     openReactionModal(message);
   };
 
@@ -1818,7 +1823,7 @@ export const ChatArea: React.FC<{
                     selectedChannel
                       ? `Message #${selectedChannel.name.replace(/^#/, "")}${
                           globalSettings.enableMultilineInput &&
-                          !isMobile &&
+                          !isNativeMobile &&
                           !isCompactInput
                             ? globalSettings.multilineOnShiftEnter
                               ? " (Shift+Enter for new line)"
@@ -1838,7 +1843,7 @@ export const ChatArea: React.FC<{
                         : "Type a message..."
                   }
                   enterKeyHint={
-                    isMobile && globalSettings.enableMultilineInput
+                    isNativeMobile && globalSettings.enableMultilineInput
                       ? "enter"
                       : "send"
                   }
@@ -1860,7 +1865,7 @@ export const ChatArea: React.FC<{
                   }}
                   onAtClick={handleAtButtonClick}
                   onSendClick={handleSendMessage}
-                  showSendButton={isMobile}
+                  showSendButton={isNativeMobile}
                   hideEmoji={isNativeMobile}
                   hasText={messageText.trim().length > 0}
                 />
@@ -2043,11 +2048,20 @@ export const ChatArea: React.FC<{
         }}
       />
 
-      <ReactionModal
-        isOpen={reactionModal.isOpen}
-        onClose={closeReactionModal}
-        onSelectEmoji={selectReaction}
-      />
+      {isNarrowView ? (
+        <ReactionModal
+          isOpen={reactionModal.isOpen}
+          onClose={closeReactionModal}
+          onSelectEmoji={selectReaction}
+        />
+      ) : (
+        <ReactionPopover
+          isOpen={reactionModal.isOpen}
+          anchorRect={reactionAnchorRect}
+          onClose={closeReactionModal}
+          onSelectEmoji={selectReaction}
+        />
+      )}
 
       <ModerationModal
         isOpen={moderationModal.isOpen}

src/components/message/MessageItem.tsx

@@ -927,7 +927,7 @@ export const MessageItem = (props: MessageItemProps) => {
           />
 
           <div
-            className={`flex-1 relative ${isCurrentUser ? "text-white" : ""}`}
+            className={`flex-1 min-w-0 relative ${isCurrentUser ? "text-white" : ""}`}
           >
             {showHeader && (
               <MessageHeader
@@ -944,7 +944,7 @@ export const MessageItem = (props: MessageItemProps) => {
               />
             )}
 
-            <div className="relative">
+            <div className="relative min-w-0">
               {message.replyMessage && (
                 <MessageReply
                   replyMessage={message.replyMessage}

src/components/message/MessageReply.tsx

@@ -1,4 +1,5 @@
 import type React from "react";
+import { RiReplyFill } from "react-icons/ri";
 import { stripIrcFormatting } from "../../lib/messageFormatter";
 import type { MessageType } from "../../types";
 
@@ -29,17 +30,25 @@ export const MessageReply: React.FC<MessageReplyProps> = ({
 
   return (
     <div
-      className={`bg-${theme}-dark-200 rounded text-sm text-${theme}-text-muted mb-2 pl-1 pr-2 select-none line-clamp-2 ${onReplyClick ? "cursor-pointer hover:bg-opacity-80" : ""}`}
+      className={`flex mb-2 min-w-0 w-full rounded-md overflow-hidden bg-black/[0.22] border border-white/[0.04] transition-colors ${onReplyClick ? "cursor-pointer hover:bg-black/[0.32]" : ""}`}
       onClick={onReplyClick}
       title={onReplyClick ? "Click to jump to message" : ""}
     >
-      ┌ Replying to{" "}
-      <strong>
-        <span className="cursor-pointer" onClick={handleUsernameClick}>
-          {replyUsername}
-        </span>
-      </strong>
-      : {plainContent}
+      <div className="w-0.5 flex-shrink-0 bg-indigo-400/70 rounded-l" />
+      <div className="flex-1 min-w-0 py-1.5 px-2.5 overflow-hidden">
+        <div className="flex items-center gap-1.5 mb-0.5">
+          <RiReplyFill className="text-[11px] flex-shrink-0 text-indigo-400/70" />
+          <span
+            className="text-xs font-semibold text-indigo-300 hover:underline cursor-pointer truncate"
+            onClick={handleUsernameClick}
+          >
+            {replyUsername}
+          </span>
+        </div>
+        <div className={`text-xs text-${theme}-text-muted opacity-80 truncate`}>
+          {plainContent}
+        </div>
+      </div>
     </div>
   );
 };

src/components/ui/ReactionModal.tsx

@@ -18,7 +18,6 @@ const ReactionModal: React.FC<ReactionModalProps> = ({
 
   const handleEmojiSelect = (emojiData: EmojiClickData) => {
     onSelectEmoji(emojiData.emoji);
-    onClose();
   };
 
   const handleBackdropClick = (e: React.MouseEvent) => {
@@ -41,7 +40,7 @@ const ReactionModal: React.FC<ReactionModalProps> = ({
             onClick={onClose}
             className="text-sm text-discord-text-muted hover:text-white w-full text-center py-1"
           >
-            Cancel
+            Close
           </button>
         </div>
       </div>

src/components/ui/ReactionPopover.tsx

@@ -0,0 +1,81 @@
+import type { EmojiClickData } from "emoji-picker-react";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { AppEmojiPicker } from "./AppEmojiPicker";
+
+interface Props {
+  isOpen: boolean;
+  anchorRect: DOMRect | null;
+  onClose: () => void;
+  onSelectEmoji: (emoji: string) => void;
+}
+
+const PICKER_W = 352;
+const PICKER_H = 450;
+const GAP = 8;
+const MARGIN = 12;
+
+function computeStyle(anchorRect: DOMRect): React.CSSProperties {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const top =
+    anchorRect.bottom + GAP + PICKER_H <= vh - MARGIN
+      ? anchorRect.bottom + GAP
+      : Math.max(MARGIN, anchorRect.top - GAP - PICKER_H);
+
+  const left = Math.min(
+    Math.max(MARGIN, anchorRect.left),
+    vw - PICKER_W - MARGIN,
+  );
+
+  return { position: "fixed", top, left, zIndex: 50, width: PICKER_W };
+}
+
+export function ReactionPopover({
+  isOpen,
+  anchorRect,
+  onClose,
+  onSelectEmoji,
+}: Props) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !anchorRect) return null;
+
+  return createPortal(
+    <div ref={popoverRef} style={computeStyle(anchorRect)}>
+      <div className="bg-discord-dark-400 rounded-lg shadow-lg border border-discord-dark-300 overflow-hidden">
+        <AppEmojiPicker
+          onEmojiClick={(d: EmojiClickData) => onSelectEmoji(d.emoji)}
+        />
+      </div>
+    </div>,
+    document.body,
+  );
+}

src/components/ui/ReplyBadge.tsx

@@ -26,7 +26,7 @@ export function ReplyBadge({
         className="ml-auto flex-shrink-0 p-1 rounded hover:bg-discord-dark-300 text-discord-text-muted hover:text-discord-text-normal transition-colors"
         onClick={onClose}
       >
-        <FaTimes className="text-xs" />
+        <FaTimes className="text-base" />
       </button>
     </div>
   );

src/hooks/useMessageSending.ts

@@ -154,10 +154,35 @@ export function useMessageSending({
         );
       } else if (commandName === "me") {
         const actionMessage = cleanedText.substring(4).trim();
+        const target =
+          selectedChannel?.name ?? selectedPrivateChat?.username ?? "";
+        if (!target) return;
         ircClient.sendRaw(
           selectedServerId,
-          `PRIVMSG ${selectedChannel?.name || ""} :\u0001ACTION ${actionMessage}\u0001`,
+          `PRIVMSG ${target} :\u0001ACTION ${actionMessage}\u0001`,
         );
+        // Non-echo fallback: servers without echo-message won't reflect our
+        // ACTION back, so add it locally the same way regular DMs are handled.
+        if (
+          selectedPrivateChat &&
+          currentUser &&
+          !ircClient.hasCapability(selectedServerId, "echo-message")
+        ) {
+          const { addMessage } = useStore.getState();
+          const outgoingMessage: Message = {
+            id: uuidv4(),
+            content: `\u0001ACTION ${actionMessage}\u0001`,
+            timestamp: new Date(),
+            userId: currentUser.username || currentUser.id,
+            channelId: selectedPrivateChat.id,
+            serverId: selectedServerId,
+            type: "message" as const,
+            reactions: [],
+            replyMessage: localReplyTo,
+            mentioned: [],
+          };
+          addMessage(outgoingMessage);
+        }
       } else if (commandName === "away") {
         const message = args.join(" ");
         if (message) {
@@ -173,7 +198,15 @@ export function useMessageSending({
         ircClient.sendRaw(selectedServerId, fullCommand);
       }
     },
-    [selectedServerId, selectedChannel, currentUser, setAway, clearAway],
+    [
+      selectedServerId,
+      selectedChannel,
+      selectedPrivateChat,
+      currentUser,
+      localReplyTo,
+      setAway,
+      clearAway,
+    ],
   );
 
   /**
@@ -431,9 +464,12 @@ export function useMessageSending({
         sendRegularMessage(cleanedText, target);
       }
 
-      // For private messages, manually add our own message to the chat
-      // since the server doesn't echo private messages back to us
-      if (selectedPrivateChat && currentUser) {
+      // Only needed for servers that won't echo our outgoing DM back.
+      if (
+        selectedPrivateChat &&
+        currentUser &&
+        !ircClient.hasCapability(selectedServerId, "echo-message")
+      ) {
         const outgoingMessage: Message = {
           id: uuidv4(),
           content: cleanedText,

src/hooks/useReactions.ts

@@ -70,13 +70,11 @@ export function useReactions({
       const server = servers.find((s) => s.id === message.serverId);
       if (!server) return { server: undefined, target: undefined };
 
-      if (message.channelId) {
-        const channel = server.channels.find((c) => c.id === message.channelId);
-        return { server, target: channel?.name };
-      }
-      // Private message
+      const channel = server.channels.find((c) => c.id === message.channelId);
+      if (channel) return { server, target: channel.name };
+
       const privateChat = server.privateChats?.find(
-        (pc) => pc.username === message.userId.split("-")[0],
+        (pc) => pc.id === message.channelId,
       );
       return { server, target: privateChat?.username };
     },
@@ -96,8 +94,16 @@ export function useReactions({
       const { server, target } = findServerAndTarget(reactionModal.message);
 
       if (server && target) {
-        // Check if user has already reacted with this emoji
-        const existingReaction = reactionModal.message.reactions.find(
+        // Check live store state — reactionModal.message is stale after optimistic updates
+        const storeMsg = (() => {
+          const key = `${reactionModal.message.serverId}-${reactionModal.message.channelId}`;
+          return useStore
+            .getState()
+            .messages[key]?.find((m) => m.id === reactionModal.message?.id);
+        })();
+        const liveReactions =
+          storeMsg?.reactions ?? reactionModal.message.reactions;
+        const existingReaction = liveReactions.find(
           (r) => r.emoji === emoji && r.userId === currentUser?.username,
         );
 
@@ -152,8 +158,6 @@ export function useReactions({
           });
         }
       }
-
-      closeReactionModal();
     },
     [
       reactionModal.message,

src/lib/ircClient.ts

@@ -107,6 +107,7 @@ export interface EventMap {
   BATCH_END: BaseIRCEvent & { batchId: string };
   MULTILINE_MESSAGE: BaseMessageEvent & {
     channelName?: string;
+    target: string; // raw BATCH recipient (channel name or username)
     lines: string[];
     messageIds: string[]; // All message IDs that make up this multiline message
   };
@@ -1913,6 +1914,7 @@ export class IRCClient {
                 (batch.batchMsgId ? { msgid: batch.batchMsgId } : undefined), // Preserve all BATCH opener tags (includes +draft/reply)
               sender,
               channelName: target.startsWith("#") ? target : undefined,
+              target,
               message: combinedMessage,
               lines: batch.messages,
               messageIds: batch.messageIds || [],
@@ -2830,6 +2832,10 @@ export class IRCClient {
     return this.currentUsers.get(serverId) || null;
   }
 
+  hasCapability(serverId: string, cap: string): boolean {
+    return this.servers.get(serverId)?.capabilities?.includes(cap) ?? false;
+  }
+
   getBatchType(serverId: string, batchId: string): string | undefined {
     return this.activeBatches.get(serverId)?.get(batchId)?.type;
   }