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

feat(web): split chat list into pinned and regular sections
Some checks failed
CI / test (push) Failing after 19s
Details

Browse Source 
- render explicit Pinned and Chats blocks

- keep pin context actions unchanged
This commit is contained in:
Alex
2026-03-08 11:35:31 +03:00
parent 8fcfd60ff5
commit 39b61ec94b
1 changed files with 54 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
web/src/components/ChatList.tsx
View File

@@ -171,6 +171,52 @@ export function ChatList() {
];
const visibleChats = tab === "archived" ? archivedChats : filteredChats;
const pinnedVisibleChats = visibleChats.filter((chat) => chat.pinned);
const regularVisibleChats = visibleChats.filter((chat) => !chat.pinned);
function renderChatRow(chat: (typeof visibleChats)[number]) {
return (
<button
className={`block w-full border-b border-slate-800/60 px-4 py-3 text-left transition ${
activeChatId === chat.id ? "bg-sky-500/20" : "hover:bg-slate-800/65"
}`}
key={chat.id}
onClick={() => setActiveChatId(chat.id)}
onContextMenu={(e) => {
e.preventDefault();
const safePos = getSafeContextPosition(e.clientX, e.clientY, 176, 56);
setCtxChatId(chat.id);
setCtxPos(safePos);
}}
>
<div className="flex items-start gap-3">
<div className="relative mt-0.5">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/30 text-sm font-semibold uppercase text-sky-100">
{chat.pinned ? "📌" : (chat.display_title || chat.title || chat.type).slice(0, 1)}
</div>
{chat.type === "private" && chat.counterpart_is_online ? (
<span className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border border-slate-900 bg-emerald-400" />
) : null}
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-2">
<p className="truncate text-sm font-semibold">{chatLabel(chat)}</p>
{(chat.unread_count ?? 0) > 0 ? (
<span className="inline-flex min-w-5 items-center justify-center rounded-full bg-sky-500 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950">
{chat.unread_count}
</span>
) : (
<span className="shrink-0 text-[11px] text-slate-400">
{formatChatListTime(chat.last_message_created_at)}
</span>
)}
</div>
<p className="truncate text-xs text-slate-400">{chatPreviewLabel(chat)}</p>
</div>
</div>
</button>
);
}
return (
<aside className="relative flex h-full w-full flex-col bg-slate-900/60" onClick={() => { setCtxChatId(null); setCtxPos(null); setMenuOpen(false); }}>
@@ -343,47 +389,14 @@ export function ChatList() {
<p className="px-4 py-3 text-xs text-slate-400">Archive is empty</p>
) : null}
{visibleChats.map((chat) => (
<button
className={`block w-full border-b border-slate-800/60 px-4 py-3 text-left transition ${
activeChatId === chat.id ? "bg-sky-500/20" : "hover:bg-slate-800/65"
}`}
key={chat.id}
onClick={() => setActiveChatId(chat.id)}
onContextMenu={(e) => {
e.preventDefault();
const safePos = getSafeContextPosition(e.clientX, e.clientY, 176, 56);
setCtxChatId(chat.id);
setCtxPos(safePos);
}}
>
<div className="flex items-start gap-3">
<div className="relative mt-0.5">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/30 text-sm font-semibold uppercase text-sky-100">
{chat.pinned ? "📌" : (chat.display_title || chat.title || chat.type).slice(0, 1)}
</div>
{chat.type === "private" && chat.counterpart_is_online ? (
<span className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border border-slate-900 bg-emerald-400" />
) : null}
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-2">
<p className="truncate text-sm font-semibold">{chatLabel(chat)}</p>
{(chat.unread_count ?? 0) > 0 ? (
<span className="inline-flex min-w-5 items-center justify-center rounded-full bg-sky-500 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950">
{chat.unread_count}
</span>
) : (
<span className="shrink-0 text-[11px] text-slate-400">
{formatChatListTime(chat.last_message_created_at)}
</span>
)}
</div>
<p className="truncate text-xs text-slate-400">{chatPreviewLabel(chat)}</p>
</div>
</div>
</button>
))}
{pinnedVisibleChats.length > 0 ? (
<p className="px-4 py-2 text-[10px] uppercase tracking-wide text-slate-400">Pinned</p>
) : null}
{pinnedVisibleChats.map(renderChatRow)}
{regularVisibleChats.length > 0 ? (
<p className="px-4 py-2 text-[10px] uppercase tracking-wide text-slate-400">Chats</p>
) : null}
{regularVisibleChats.map(renderChatRow)}
</div>
<NewChatPanel />