benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add explicit member actions button in chat info
Some checks are pending
CI / test (push) Has started running
Details

Browse Source
This commit is contained in:
Alex
2026-03-08 21:43:08 +03:00
parent c742d785e3
commit 00df092096
2 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/src/components/ChatInfoPanel.tsx
View File

@@ -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>
);