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

feat: mentions badge in chat list and muted-mention delivery
All checks were successful
CI / test (push) Successful in 21s
Details

Browse Source
This commit is contained in:
Alex
2026-03-08 12:23:39 +03:00
parent fc7a9cc3a6
commit 0594b890c3
9 changed files with 92 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,7 @@ export function ChatList() {
const setFocusedMessage = useChatStore((s) => s.setFocusedMessage);
const loadChats = useChatStore((s) => s.loadChats);
const me = useAuthStore((s) => s.me);
const logout = useAuthStore((s) => s.logout);
const [search, setSearch] = useState("");
const [userResults, setUserResults] = useState<UserSearchItem[]>([]);
const [discoverResults, setDiscoverResults] = useState<DiscoverChat[]>([]);
@@ -234,9 +235,18 @@ export function ChatList() {
<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}
{(chat.unread_count ?? 0) > 0 || (chat.unread_mentions_count ?? 0) > 0 ? (
<span className="inline-flex items-center gap-1">
{(chat.unread_mentions_count ?? 0) > 0 ? (
<span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950">
@
</span>
) : null}
{(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>
) : null}
</span>
) : (
<span className="shrink-0 text-[11px] text-slate-400">
@@ -281,8 +291,17 @@ export function ChatList() {
<button className="block w-full rounded px-3 py-2 text-left text-sm hover:bg-slate-800" onClick={() => { setSettingsOpen(true); setMenuOpen(false); }}>
Settings
</button>
<button className="block w-full rounded px-3 py-2 text-left text-sm hover:bg-slate-800" onClick={() => setMenuOpen(false)}>
More
<button
className="block w-full rounded px-3 py-2 text-left text-sm text-red-300 hover:bg-slate-800"
onClick={() => {
setMenuOpen(false);
if (!window.confirm("Log out of your account?")) {
return;
}
logout();
}}
>
Logout
</button>
</div>
) : null}