fix: WS upgrade via metrics middleware (realtime), DM names, tap reactions

web/src/components/ChatWindow.tsx

@@ -28,7 +28,7 @@ interface ChatWindowProps {
   onRetry: (message: ClientMessage) => void
   onReact: (message: ClientMessage, emoji: string) => void
   onMembersChanged: () => void
-  onMembersLoaded: (members: Member[]) => void
+  onMembersLoaded: (conversationId: number, members: Member[]) => void
 }
 
 function TypingDots() {
@@ -251,21 +251,21 @@ export default function ChatWindow({
   onMembersLoaded,
 }: ChatWindowProps) {
   const [members, setMembers] = useState<Member[]>([])
-  const [membersLoading, setMembersLoading] = useState(conversation?.type === 'group')
+  const [membersLoading, setMembersLoading] = useState(conversation !== null)
   const [membersOpen, setMembersOpen] = useState(false)
 
   const conversationId = conversation?.id ?? null
   const isGroup = conversation?.type === 'group'
 
   useEffect(() => {
-    if (conversationId === null || !isGroup) return
+    if (conversationId === null) return
     let cancelled = false
     api
       .listMembers(conversationId)
       .then((list) => {
         if (cancelled) return
         setMembers(list)
-        onMembersLoaded(list)
+        onMembersLoaded(conversationId, list)
       })
       .catch(() => {
         if (!cancelled) setMembers([])
@@ -276,7 +276,7 @@ export default function ChatWindow({
     return () => {
       cancelled = true
     }
-  }, [conversationId, isGroup, membersVersion, onMembersLoaded])
+  }, [conversationId, membersVersion, onMembersLoaded])
 
   if (!conversation) {
     return (

web/src/components/MessageBubble.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import Avatar from './Avatar'
 import { IconAlert, IconCheck, IconCheckCheck, IconFile, IconSmile } from './icons'
 import { formatBytes, formatTime, userTitle } from '../lib/format'
@@ -78,6 +78,29 @@ export default function MessageBubble({
   const isSending = message.status === 'sending'
   const isError = message.status === 'error'
   const accent = isOwn ? OWN_COLOR : PEER_COLOR
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (!pickerOpen) return
+    const onPointerDown = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node
+      if (panelRef.current?.contains(target) || buttonRef.current?.contains(target)) return
+      setPickerOpen(false)
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setPickerOpen(false)
+    }
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('touchstart', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('touchstart', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [pickerOpen])
 
   const grouped = useMemo(() => {
     const map = new Map<string, number[]>()
@@ -104,31 +127,7 @@ export default function MessageBubble({
         ))}
 
       <div className={`flex max-w-[86%] flex-col sm:max-w-[70%] ${isOwn ? 'items-end' : 'items-start'}`}>
-        <div className="relative">
-          <div
-            className={`absolute -top-8 z-10 hidden items-center gap-0.5 bg-panel p-0.5 group-hover:flex group-focus-within:flex ${
-              isOwn ? 'right-0' : 'left-0'
-            }`}
-            style={{ border: '2px solid', borderColor: '#dfdfdf #0a0a0a #0a0a0a #dfdfdf' }}
-          >
-            {QUICK_EMOJIS.map((emoji) => (
-              <button
-                key={emoji}
-                type="button"
-                onClick={() => onReact(message, emoji)}
-                aria-label={`Реакция ${emoji}`}
-                className="inline-flex h-6 w-6 items-center justify-center text-sm hover:bg-accent-ghost"
-              >
-                {emoji}
-              </button>
-            ))}
-            <span className="mx-0.5 h-5 w-px bg-surface-3" aria-hidden="true" />
-            <span className="inline-flex h-6 w-6 items-center justify-center text-muted" aria-hidden="true">
-              <IconSmile className="h-3.5 w-3.5" />
-            </span>
-          </div>
-
-          <div className={`bevel bg-surface ${isError ? 'bg-[#ffecec]' : ''} ${isSending ? 'opacity-70' : ''}`}>
+        <div className={`bevel bg-surface ${isError ? 'bg-[#ffecec]' : ''} ${isSending ? 'opacity-70' : ''}`}>
             <div className="flex items-center gap-2 border-b border-surface-3 bg-surface-2 px-2 py-0.5">
               {showName && (
                 <span className="truncate text-[11px] font-bold" style={{ color: accent }}>
@@ -156,6 +155,17 @@ export default function MessageBubble({
                   {!isSending && !isError && !message.read_by_peer && <IconCheck className="h-3.5 w-3.5" />}
                 </span>
               )}
+              <button
+                ref={buttonRef}
+                type="button"
+                onClick={() => setPickerOpen((open) => !open)}
+                aria-label="Поставить реакцию"
+                aria-expanded={pickerOpen}
+                title="Поставить реакцию"
+                className="retro-btn inline-flex h-7 w-7 shrink-0 items-center justify-center"
+              >
+                <IconSmile className="h-3.5 w-3.5" />
+              </button>
             </div>
 
             <div className="px-2 py-1.5">
@@ -174,7 +184,33 @@ export default function MessageBubble({
               {message.edited_at && <span className="mt-0.5 block font-mono text-[10px] text-muted">изменено</span>}
             </div>
           </div>
-        </div>
+
+        {pickerOpen && (
+          <div
+            ref={panelRef}
+            className="mt-1 flex items-center gap-0.5 bg-panel p-0.5"
+            style={{ border: '2px solid', borderColor: '#dfdfdf #0a0a0a #0a0a0a #dfdfdf' }}
+          >
+            {QUICK_EMOJIS.map((emoji) => (
+              <button
+                key={emoji}
+                type="button"
+                onClick={() => {
+                  onReact(message, emoji)
+                  setPickerOpen(false)
+                }}
+                aria-label={`Реакция ${emoji}`}
+                className="inline-flex h-7 w-7 items-center justify-center text-base hover:bg-accent-ghost"
+              >
+                {emoji}
+              </button>
+            ))}
+            <span className="mx-0.5 h-5 w-px bg-surface-3" aria-hidden="true" />
+            <span className="inline-flex h-7 w-7 items-center justify-center text-muted" aria-hidden="true">
+              <IconSmile className="h-3.5 w-3.5" />
+            </span>
+          </div>
+        )}
 
         {grouped.length > 0 && (
           <div className={`mt-1 flex flex-wrap gap-1 ${isOwn ? 'justify-end' : 'justify-start'}`}>

web/src/screens/ChatApp.tsx

@@ -46,6 +46,16 @@ export default function ChatApp({ user }: ChatAppProps) {
   const selectedIdRef = useRef(selectedId)
   const conversationsRef = useRef(conversations)
   const typingTimers = useRef(new Map<number, number>())
+  const membersLoadedRef = useRef(new Set<number>())
+  const membersInFlightRef = useRef(new Set<number>())
+  const mountedRef = useRef(true)
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
 
   useEffect(() => {
     selectedIdRef.current = selectedId
@@ -81,6 +91,35 @@ export default function ChatApp({ user }: ChatAppProps) {
     void loadContacts()
   }, [loadContacts])
 
+  useEffect(() => {
+    for (const conversation of conversations) {
+      if (membersLoadedRef.current.has(conversation.id) || membersInFlightRef.current.has(conversation.id)) {
+        continue
+      }
+      membersInFlightRef.current.add(conversation.id)
+      api
+        .listMembers(conversation.id)
+        .then((members) => {
+          membersLoadedRef.current.add(conversation.id)
+          if (!mountedRef.current) return
+          members.forEach((member) => rememberUser(member.user))
+          if (conversation.type !== 'group') {
+            const others = members.filter((member) => member.user.id !== user.id)
+            if (others.length === 1) {
+              const peerId = others[0].user.id
+              setLearnedPeers((prev) =>
+                prev[conversation.id] === peerId ? prev : { ...prev, [conversation.id]: peerId },
+              )
+            }
+          }
+        })
+        .catch(() => {})
+        .finally(() => {
+          membersInFlightRef.current.delete(conversation.id)
+        })
+    }
+  }, [conversations, rememberUser, user.id])
+
   useEffect(() => {
     void ensurePushSubscription()
   }, [])
@@ -323,10 +362,21 @@ export default function ChatApp({ user }: ChatAppProps) {
   )
 
   const handleMembersLoaded = useCallback(
-    (members: Member[]) => {
+    (conversationId: number, members: Member[]) => {
+      membersLoadedRef.current.add(conversationId)
       members.forEach((member) => rememberUser(member.user))
+      const conversation = conversationsRef.current.find((item) => item.id === conversationId)
+      if (conversation && conversation.type !== 'group') {
+        const others = members.filter((member) => member.user.id !== user.id)
+        if (others.length === 1) {
+          const peerId = others[0].user.id
+          setLearnedPeers((prev) =>
+            prev[conversationId] === peerId ? prev : { ...prev, [conversationId]: peerId },
+          )
+        }
+      }
     },
-    [rememberUser],
+    [rememberUser, user.id],
   )
 
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : null