From 2b1e13632a69a33ac6c683b23d0f42e5326b5313 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Fri, 3 Apr 2026 11:19:02 +0300
Subject: [PATCH] Simplify chat actions dropdown

---
 .../messages/MessageActionsMenu.tsx           | 78 +++++++------------
 .../messages/MessageReadersModal.tsx          | 15 +---
 2 files changed, 30 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/messages/MessageActionsMenu.tsx b/frontend/src/components/messages/MessageActionsMenu.tsx
index e905b671..d5e07f4b 100644
--- a/frontend/src/components/messages/MessageActionsMenu.tsx
+++ b/frontend/src/components/messages/MessageActionsMenu.tsx
@@ -38,13 +38,11 @@ export default function MessageActionsMenu({
       (message.author_id === currentUserId || message.author?.id === currentUserId || message.sender?.id === currentUserId)
   );
   const readers = message.read_by || [];
-  const previewReaders = readers.slice(0, 3);
-  const hasMoreReaders = readers.length > previewReaders.length;
 
   return (
     <div
       data-actions-menu="true"
-      className="fixed z-[60] min-w-[220px] max-w-[248px] rounded-xl border border-gray-200 bg-white py-2 shadow-lg ring-1 ring-slate-100"
+      className="fixed z-[60] min-w-[208px] max-w-[232px] rounded-xl border border-gray-200 bg-white py-1.5 shadow-lg ring-1 ring-slate-100"
       style={{
         left: anchor.x,
         top: anchor.y - 8,
@@ -52,18 +50,15 @@ export default function MessageActionsMenu({
       }}
     >
       {canReply ? (
-        <div className="px-3 pb-2">
-          <div className="mb-2 flex items-center justify-between">
-            <span className="text-[10px] font-semibold uppercase tracking-[0.08em] text-gray-400">Быстрые реакции</span>
-          </div>
-
-          <div className="flex items-center gap-1.5">
+        <div className="border-b border-slate-100 px-2.5 pb-2 pt-1">
+          <div className="mb-1.5 px-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-gray-400">Реакции</div>
+          <div className="flex items-center gap-1">
           {recentReactions.map((emoji) => (
             <button
               key={`recent-${message.id}-${emoji}`}
               type="button"
               onClick={() => onQuickReact(emoji)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gray-50 text-base transition hover:bg-sky-50"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md text-base transition hover:bg-sky-50"
               title="Быстрая реакция"
             >
               {emoji}
@@ -72,7 +67,7 @@ export default function MessageActionsMenu({
           <button
             type="button"
             onClick={onOpenReactionPicker}
-            className="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gray-50 text-gray-500 transition hover:bg-sky-50 hover:text-sky-700"
+            className="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 transition hover:bg-sky-50 hover:text-sky-700"
             title="Все смайлы"
           >
             <Smile size={14} />
@@ -81,50 +76,31 @@ export default function MessageActionsMenu({
         </div>
       ) : null}
 
-      {isMine ? (
-        <div className="border-t border-slate-100 px-3 py-2">
-          <div className="mb-1.5 flex items-center gap-1.5 text-gray-500">
-            <CheckCheck size={13} />
-            <span className="text-[10px] font-semibold uppercase tracking-[0.08em]">Прочитали</span>
-          </div>
+      <div className="py-1">
+        {isMine && onShowAllReaders ? (
+          <>
+            <button
+              type="button"
+              onClick={onShowAllReaders}
+              className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm text-gray-700 transition hover:bg-gray-50"
+            >
+              <span className="flex items-center gap-2">
+                <CheckCheck size={13} className="text-gray-400" />
+                Кто прочитал
+              </span>
+              <span className="text-xs text-gray-400">{readers.length}</span>
+            </button>
+            <div className="my-1 border-t border-slate-100" />
+          </>
+        ) : null}
 
-          {readers.length > 0 ? (
-            <>
-              <div className="flex flex-col gap-1.5">
-              {previewReaders.map((reader) => (
-                <div
-                  key={`reader-${message.id}-${reader.id}`}
-                  className="text-xs font-medium leading-4 text-gray-700 break-words"
-                >
-                  {reader.name}
-                </div>
-              ))}
-              </div>
-
-              {onShowAllReaders ? (
-                <button
-                  type="button"
-                  onClick={onShowAllReaders}
-                  className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-sky-700 transition hover:text-sky-800"
-                >
-                  <span>{hasMoreReaders ? `Показать весь список (${readers.length})` : "Открыть список"}</span>
-                </button>
-              ) : null}
-            </>
-          ) : (
-            <p className="text-xs text-gray-500">Пока никто не дочитал это сообщение.</p>
-          )}
-        </div>
-      ) : null}
-
-      <div className="border-t border-slate-100 py-1">
         {canReply ? (
           <button
             type="button"
             onClick={onReply}
-            className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-sky-700 transition hover:bg-sky-50"
+            className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 transition hover:bg-sky-50"
           >
-            <Reply size={13} />
+            <Reply size={13} className="text-gray-400" />
             Ответить
           </button>
         ) : null}
@@ -135,7 +111,7 @@ export default function MessageActionsMenu({
             onClick={onEdit}
             className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 transition hover:bg-gray-50"
           >
-            <Pencil size={13} />
+            <Pencil size={13} className="text-gray-400" />
             Редактировать
           </button>
         ) : null}
@@ -146,7 +122,7 @@ export default function MessageActionsMenu({
             onClick={onDelete}
             className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-red-600 transition hover:bg-red-50"
           >
-            <Trash2 size={13} />
+            <Trash2 size={13} className="text-red-400" />
             Удалить
           </button>
         ) : null}
diff --git a/frontend/src/components/messages/MessageReadersModal.tsx b/frontend/src/components/messages/MessageReadersModal.tsx
index af9a66d2..160f0b41 100644
--- a/frontend/src/components/messages/MessageReadersModal.tsx
+++ b/frontend/src/components/messages/MessageReadersModal.tsx
@@ -15,18 +15,9 @@ export default function MessageReadersModal({ isOpen, onClose, readers }: Messag
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Прочитали сообщение" size="sm">
       <div className="space-y-4">
-        <div className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
-          <div className="flex items-center gap-2 text-gray-700">
-            <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500">
-              <CheckCheck size={16} />
-            </span>
-            <div>
-              <p className="text-sm font-semibold">Полный список прочитавших</p>
-              <p className="text-xs text-gray-500">
-                {readers.length === 1 ? "1 сотрудник" : `${readers.length} сотрудников`}
-              </p>
-            </div>
-          </div>
+        <div className="flex items-center gap-2 text-sm text-gray-600">
+          <CheckCheck size={16} className="text-gray-400" />
+          <p>{readers.length === 1 ? "Сообщение прочитал 1 сотрудник" : `Сообщение прочитали ${readers.length} сотрудников`}</p>
         </div>
 
         {readers.length > 0 ? (