feat: mentions badge in chat list and muted-mention delivery

web/src/chat/types.ts

@@ -15,6 +15,7 @@ export interface Chat {
   archived?: boolean;
   pinned?: boolean;
   unread_count?: number;
+  unread_mentions_count?: number;
   pinned_message_id?: number | null;
   members_count?: number | null;
   online_count?: number | null;

web/src/components/ChatList.tsx

@@ -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}

web/src/pages/ChatsPage.tsx

@@ -3,7 +3,6 @@ import { ChatList } from "../components/ChatList";
 import { ChatInfoPanel } from "../components/ChatInfoPanel";
 import { MessageComposer } from "../components/MessageComposer";
 import { MessageList } from "../components/MessageList";
-import { getNotifications, type NotificationItem } from "../api/notifications";
 import { searchMessages } from "../api/chats";
 import type { Message } from "../chat/types";
 import { useRealtime } from "../hooks/useRealtime";
@@ -14,7 +13,6 @@ import { useState } from "react";
 
 export function ChatsPage() {
   const me = useAuthStore((s) => s.me);
-  const logout = useAuthStore((s) => s.logout);
   const loadChats = useChatStore((s) => s.loadChats);
   const activeChatId = useChatStore((s) => s.activeChatId);
   const chats = useChatStore((s) => s.chats);
@@ -29,9 +27,6 @@ export function ChatsPage() {
   const [searchLoading, setSearchLoading] = useState(false);
   const [searchResults, setSearchResults] = useState<Message[]>([]);
   const [searchActiveIndex, setSearchActiveIndex] = useState(0);
-  const [notificationsOpen, setNotificationsOpen] = useState(false);
-  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
-  const [loadingNotifications, setLoadingNotifications] = useState(false);
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const activeTrack = useAudioPlayerStore((s) => s.track);
   const isAudioPlaying = useAudioPlayerStore((s) => s.isPlaying);
@@ -139,33 +134,6 @@ export function ChatsPage() {
     setFocusedMessage(current.chat_id, current.id);
   }, [searchOpen, searchActiveIndex, searchResults, setFocusedMessage]);
 
-  useEffect(() => {
-    if (!notificationsOpen) {
-      return;
-    }
-    let cancelled = false;
-    setLoadingNotifications(true);
-    void (async () => {
-      try {
-        const items = await getNotifications(30);
-        if (!cancelled) {
-          setNotifications(items);
-        }
-      } catch {
-        if (!cancelled) {
-          setNotifications([]);
-        }
-      } finally {
-        if (!cancelled) {
-          setLoadingNotifications(false);
-        }
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [notificationsOpen]);
-
   return (
     <main className="h-screen w-full p-2 text-text md:p-3">
       <div className="mx-auto flex h-full max-w-[1500px] gap-2 md:gap-3">
@@ -192,15 +160,6 @@ export function ChatsPage() {
                   </div>
                 </div>
                 <div className="flex items-center gap-1.5">
-                  <button
-                    className="relative rounded-full bg-slate-700/70 px-2.5 py-1.5 text-xs font-semibold hover:bg-slate-600/80"
-                    onClick={() => setNotificationsOpen(true)}
-                  >
-                    Notifications
-                    {notifications.length > 0 ? (
-                      <span className="ml-1 rounded-full bg-sky-500 px-1.5 py-0.5 text-[10px] text-slate-950">{notifications.length}</span>
-                    ) : null}
-                  </button>
                   <button
                     className="rounded-full bg-slate-700/70 px-2.5 py-1.5 text-xs font-semibold hover:bg-slate-600/80"
                     onClick={() => {
@@ -212,9 +171,6 @@ export function ChatsPage() {
                   >
                     Search
                   </button>
-                  <button className="rounded-full bg-slate-700/70 px-2.5 py-1.5 text-xs font-semibold hover:bg-slate-600/80" onClick={logout}>
-                    Logout
-                  </button>
                 </div>
               </>
             ) : (
@@ -311,26 +267,6 @@ export function ChatsPage() {
         </section>
       </div>
       <ChatInfoPanel chatId={activeChatId} open={infoOpen} onClose={() => setInfoOpen(false)} />
-      {notificationsOpen ? (
-        <div className="fixed inset-0 z-[130] flex items-start justify-center bg-slate-950/60 p-3 md:p-6" onClick={() => setNotificationsOpen(false)}>
-          <div className="w-full max-w-xl rounded-2xl border border-slate-700/80 bg-slate-900 p-3 shadow-2xl" onClick={(e) => e.stopPropagation()}>
-            <div className="mb-2 flex items-center justify-between">
-              <p className="text-sm font-semibold">Notifications</p>
-              <button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={() => setNotificationsOpen(false)}>Close</button>
-            </div>
-            {loadingNotifications ? <p className="px-2 py-1 text-xs text-slate-400">Loading...</p> : null}
-            {!loadingNotifications && notifications.length === 0 ? <p className="px-2 py-1 text-xs text-slate-400">No notifications</p> : null}
-            <div className="tg-scrollbar max-h-[50vh] space-y-1 overflow-auto">
-              {notifications.map((item) => (
-                <div className="rounded-lg bg-slate-800/80 px-3 py-2" key={item.id}>
-                  <p className="text-xs font-semibold text-slate-200">{item.event_type}</p>
-                  <p className="text-[11px] text-slate-400">{new Date(item.created_at).toLocaleString()}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      ) : null}
     </main>
   );
 }

web/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/api/auth.ts","./src/api/chats.ts","./src/api/http.ts","./src/api/notifications.ts","./src/api/search.ts","./src/api/users.ts","./src/app/app.tsx","./src/chat/types.ts","./src/components/apperrorboundary.tsx","./src/components/authpanel.tsx","./src/components/chatinfopanel.tsx","./src/components/chatlist.tsx","./src/components/messagecomposer.tsx","./src/components/messagelist.tsx","./src/components/newchatpanel.tsx","./src/components/settingspanel.tsx","./src/components/toastviewport.tsx","./src/hooks/userealtime.ts","./src/pages/authpage.tsx","./src/pages/chatspage.tsx","./src/store/audioplayerstore.ts","./src/store/authstore.ts","./src/store/chatstore.ts","./src/store/uistore.ts","./src/utils/format.ts","./src/utils/formatmessage.tsx","./src/utils/preferences.ts","./src/utils/ws.ts"],"version":"5.9.2"}
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/api/auth.ts","./src/api/chats.ts","./src/api/http.ts","./src/api/notifications.ts","./src/api/search.ts","./src/api/users.ts","./src/app/app.tsx","./src/chat/types.ts","./src/components/apperrorboundary.tsx","./src/components/authpanel.tsx","./src/components/chatinfopanel.tsx","./src/components/chatlist.tsx","./src/components/messagecomposer.tsx","./src/components/messagelist.tsx","./src/components/newchatpanel.tsx","./src/components/settingspanel.tsx","./src/components/toastviewport.tsx","./src/hooks/userealtime.ts","./src/pages/authpage.tsx","./src/pages/chatspage.tsx","./src/store/audioplayerstore.ts","./src/store/authstore.ts","./src/store/chatstore.ts","./src/store/uistore.ts","./src/utils/format.ts","./src/utils/formatmessage.tsx","./src/utils/preferences.ts","./src/utils/webnotifications.ts","./src/utils/ws.ts"],"version":"5.9.2"}