Add <Unread Count>+ as indicator unreads matching length of conversation fetch

frontend/src/api.ts

@@ -15,6 +15,9 @@ import type {
 
 const API_BASE = '/api';
 
+/** Max messages fetched per conversation for unread counting. If count equals this, there may be more. */
+export const UNREAD_FETCH_LIMIT = 100;
+
 async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
   const res = await fetch(`${API_BASE}${url}`, {
     ...options,
@@ -130,7 +133,7 @@ export const api = {
   },
   getMessagesBulk: (
     conversations: Array<{ type: 'PRIV' | 'CHAN'; conversation_key: string }>,
-    limitPerConversation: number = 100
+    limitPerConversation: number = UNREAD_FETCH_LIMIT
   ) =>
     fetchJson<Record<string, Message[]>>(
       `/messages/bulk?limit_per_conversation=${limitPerConversation}`,

frontend/src/components/Sidebar.tsx

@@ -4,6 +4,7 @@ import { getStateKey, type ConversationTimes } from '../utils/conversationState'
 import { getPubkeyPrefix, getContactDisplayName } from '../utils/pubkey';
 import { ContactAvatar } from './ContactAvatar';
 import { CONTACT_TYPE_REPEATER } from '../utils/contactAvatar';
+import { UNREAD_FETCH_LIMIT } from '../api';
 import { Input } from './ui/input';
 import { Button } from './ui/button';
 import { cn } from '@/lib/utils';
@@ -26,6 +27,11 @@ interface SidebarProps {
   onMarkAllRead: () => void;
 }
 
+/** Format unread count, showing "X+" if at the fetch limit (indicating there may be more) */
+function formatUnreadCount(count: number): string {
+  return count >= UNREAD_FETCH_LIMIT ? `${count}+` : `${count}`;
+}
+
 // Load sort preference from localStorage (default to 'recent')
 function loadSortOrder(): SortOrder {
   try {
@@ -333,7 +339,7 @@ export function Sidebar({
                           : 'bg-primary text-primary-foreground'
                       )}
                     >
-                      {unreadCount}
+                      {formatUnreadCount(unreadCount)}
                     </span>
                   )}
                 </div>
@@ -394,7 +400,7 @@ export function Sidebar({
                           : 'bg-primary text-primary-foreground'
                       )}
                     >
-                      {unreadCount}
+                      {formatUnreadCount(unreadCount)}
                     </span>
                   )}
                 </div>

frontend/src/hooks/useUnreadCounts.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { api } from '../api';
+import { api, UNREAD_FETCH_LIMIT } from '../api';
 import {
   getLastMessageTimes,
   setLastMessageTime,
@@ -71,7 +71,7 @@ export function useUnreadCounts(
       if (conversations.length === 0) return;
 
       try {
-        const bulkMessages = await api.getMessagesBulk(conversations, 100);
+        const bulkMessages = await api.getMessagesBulk(conversations, UNREAD_FETCH_LIMIT);
         const newUnreadCounts: Record<string, number> = {};
         const newMentions: Record<string, boolean> = {};
         const newLastMessageTimes: Record<string, number> = {};