feat(web): add message edit flow in context menu and composer

web/src/components/MessageList.tsx

@@ -51,6 +51,7 @@ export function MessageList() {
   const setFocusedMessage = useChatStore((s) => s.setFocusedMessage);
   const chats = useChatStore((s) => s.chats);
   const setReplyToMessage = useChatStore((s) => s.setReplyToMessage);
+  const setEditingMessage = useChatStore((s) => s.setEditingMessage);
   const updateChatPinnedMessage = useChatStore((s) => s.updateChatPinnedMessage);
   const removeMessage = useChatStore((s) => s.removeMessage);
   const restoreMessages = useChatStore((s) => s.restoreMessages);
@@ -125,9 +126,12 @@ export function MessageList() {
     setDeleteMessageId(null);
     setForwardMessageId(null);
     setForwardSelectedChatIds(new Set());
+    if (activeChatId) {
+      setEditingMessage(activeChatId, null);
+    }
     setReactionsByMessage({});
     setAttachmentsByMessage({});
-  }, [activeChatId]);
+  }, [activeChatId, setEditingMessage]);
 
   useEffect(() => {
     if (!activeChatId) {
@@ -587,6 +591,21 @@ export function MessageList() {
               >
                 Reply
               </button>
+              {canEditMessage(messagesMap.get(ctx.messageId), me?.id) ? (
+                <button
+                  className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
+                  onClick={() => {
+                    const msg = messagesMap.get(ctx.messageId);
+                    if (msg) {
+                      setReplyToMessage(chatId, null);
+                      setEditingMessage(chatId, msg);
+                    }
+                    setCtx(null);
+                  }}
+                >
+                  Edit
+                </button>
+              ) : null}
               <button
                 className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
                 onClick={() => {
@@ -1031,6 +1050,12 @@ function canDeleteForEveryone(
   return message.sender_id === meId;
 }
 
+function canEditMessage(message: Message | undefined, meId: number | undefined): boolean {
+  if (!message || !meId) return false;
+  if (message.sender_id !== meId) return false;
+  return message.type === "text";
+}
+
 function guessFileTypeByMessageType(messageType: Message["type"]): string {
   if (messageType === "image") return "image/jpeg";
   if (messageType === "video" || messageType === "circle_video") return "video/mp4";