From 00df092096aaec77a02665080925eaf0e8406acd Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 21:43:08 +0300
Subject: [PATCH] feat(web): add explicit member actions button in chat info

---
 docs/core-checklist-status.md        |  2 +-
 web/src/components/ChatInfoPanel.tsx | 49 +++++++++++++++++++---------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/docs/core-checklist-status.md b/docs/core-checklist-status.md
index 3d8257a..f59bf54 100644
--- a/docs/core-checklist-status.md
+++ b/docs/core-checklist-status.md
@@ -31,7 +31,7 @@ Legend:
 22. Text Formatting - `PARTIAL` (bold/italic/underline/spoiler/mono/links + strikethrough + quote/code block; toolbar still evolving)
 23. Groups - `PARTIAL` (create/add/remove/invite link; join-by-invite and invite permissions covered by integration tests; members API now returns profile fields (`username/name/avatar_url`) and web Chat Info consumes them to avoid extra per-member profile requests; add-member search also shows avatars; advanced moderation still partial)
 24. Roles - `DONE` (owner/admin/member)
-25. Admin Rights - `PARTIAL` (delete/pin/edit info + explicit ban APIs for groups/channels including ban list endpoint; web Chat Info now shows searchable `Banned users` with both inline and right-click `Unban` actions for owner/admin, member search, avatars in moderation lists, invite-link copy/regenerate actions, and ban metadata (`who banned/when`); integration tests cover channel member read-only, channel admin full-delete, channel message delete-for-all permissions, group profile edit permissions, owner-only role management rules, and admin-visible/member-forbidden ban-list access; remaining UX moderation tools limited)
+25. Admin Rights - `PARTIAL` (delete/pin/edit info + explicit ban APIs for groups/channels including ban list endpoint; web Chat Info now shows searchable `Banned users` with both inline and right-click `Unban` actions for owner/admin, member search, avatars in moderation lists, invite-link copy/regenerate actions, ban metadata (`who banned/when`), and explicit member action button for touch/trackpad UX; integration tests cover channel member read-only, channel admin full-delete, channel message delete-for-all permissions, group profile edit permissions, owner-only role management rules, and admin-visible/member-forbidden ban-list access; remaining UX moderation tools limited)
 26. Channels - `PARTIAL` (create/post/edit/delete/subscribe/unsubscribe; integration tests now also cover invite-link permissions (member forbidden, admin allowed); UX edge-cases still polishing)
 27. Channel Types - `DONE` (public/private)
 28. Notifications - `PARTIAL` (browser notifications + mute/settings; chat mute is propagated in chat list payload, honored by web realtime notifications with mention override, and mute toggle now syncs instantly in chat store; backend now emits `chat_updated` after notification mute/unmute for cross-tab consistency; no mobile push infra)
diff --git a/web/src/components/ChatInfoPanel.tsx b/web/src/components/ChatInfoPanel.tsx
index 6f276a8..f45eec4 100644
--- a/web/src/components/ChatInfoPanel.tsx
+++ b/web/src/components/ChatInfoPanel.tsx
@@ -578,23 +578,42 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
                         }}
                         type="button"
                       >
-                        <div className="flex items-start gap-2">
-                          {user?.avatar_url ? (
-                            <img alt="avatar" className="h-8 w-8 shrink-0 rounded-full object-cover" src={user.avatar_url} />
-                          ) : (
-                            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-500/30 text-[11px] font-semibold uppercase text-sky-100">
-                              {initialsFromName(user?.name || user?.username || `user ${member.user_id}`)}
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="flex min-w-0 items-start gap-2">
+                            {user?.avatar_url ? (
+                              <img alt="avatar" className="h-8 w-8 shrink-0 rounded-full object-cover" src={user.avatar_url} />
+                            ) : (
+                              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-500/30 text-[11px] font-semibold uppercase text-sky-100">
+                                {initialsFromName(user?.name || user?.username || `user ${member.user_id}`)}
+                              </div>
+                            )}
+                            <div className="min-w-0 flex-1">
+                              <p className="flex items-center gap-1 truncate text-sm font-semibold">
+                                <span className="truncate">{user?.name || `user #${member.user_id}`}</span>
+                                {member.role === "owner" ? <span className="rounded bg-amber-500/20 px-1.5 py-0.5 text-[10px] text-amber-300">👑 owner</span> : null}
+                                {member.role === "admin" ? <span className="rounded bg-sky-500/20 px-1.5 py-0.5 text-[10px] text-sky-300">👑 admin</span> : null}
+                              </p>
+                              <p className="truncate text-xs text-slate-400">@{user?.username || "unknown"}</p>
+                              {canOpenMemberMenu ? <p className="mt-1 text-[11px] text-slate-500">Right click for actions</p> : null}
                             </div>
-                          )}
-                          <div className="min-w-0 flex-1">
-                            <p className="flex items-center gap-1 truncate text-sm font-semibold">
-                              <span className="truncate">{user?.name || `user #${member.user_id}`}</span>
-                              {member.role === "owner" ? <span className="rounded bg-amber-500/20 px-1.5 py-0.5 text-[10px] text-amber-300">👑 owner</span> : null}
-                              {member.role === "admin" ? <span className="rounded bg-sky-500/20 px-1.5 py-0.5 text-[10px] text-sky-300">👑 admin</span> : null}
-                            </p>
-                            <p className="truncate text-xs text-slate-400">@{user?.username || "unknown"}</p>
-                            {canOpenMemberMenu ? <p className="mt-1 text-[11px] text-slate-500">Right click for actions</p> : null}
                           </div>
+                          {canOpenMemberMenu ? (
+                            <button
+                              className="rounded bg-slate-700 px-1.5 py-0.5 text-xs hover:bg-slate-600"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                const rect = event.currentTarget.getBoundingClientRect();
+                                setMemberCtx({
+                                  x: Math.min(rect.left, window.innerWidth - 210),
+                                  y: Math.min(rect.bottom + 4, window.innerHeight - 170),
+                                  member,
+                                });
+                              }}
+                              type="button"
+                            >
+                              ⋯
+                            </button>
+                          ) : null}
                         </div>
                       </button>
                     );