diff --git a/web/src/app/AppShell.tsx b/web/src/app/AppShell.tsx index 7bbf44a7..8c9f6120 100644 --- a/web/src/app/AppShell.tsx +++ b/web/src/app/AppShell.tsx @@ -1,5 +1,7 @@ import { Outlet } from 'react-router-dom'; +import { useChatList } from '@/lib/tinode/hooks'; + import { BottomTabBar } from './BottomTabBar'; import { NavRail } from './NavRail'; @@ -10,17 +12,20 @@ import { NavRail } from './NavRail'; * columns within a section. */ export function AppShell() { + const contacts = useChatList(); + const unreadMessages = contacts.reduce((sum, c) => sum + (c.unread || 0), 0); + return (
- +
- +
diff --git a/web/src/app/BottomTabBar.tsx b/web/src/app/BottomTabBar.tsx index 2a28fce5..55b4d825 100644 --- a/web/src/app/BottomTabBar.tsx +++ b/web/src/app/BottomTabBar.tsx @@ -2,31 +2,44 @@ import { NavLink } from 'react-router-dom'; import { Icon } from './Icon'; -const TABS = [ - { to: '/messages', icon: 'chat_bubble', label: '消息' }, - { to: '/contacts', icon: 'contacts', label: '通讯录' }, - { to: '/settings', icon: 'person', label: '我的' }, -]; +interface TabItem { + to: string; + icon: string; + label: string; + badge?: number; +} /** * Replaces the old app's message-center-view.jsx-embedded 2-tab (消息/工作台) bar: this one is * top-level (visible regardless of which section is open, not just inside the message list) and * has 3 tabs per the new design, since 工作台 no longer exists. */ -export function BottomTabBar() { +export function BottomTabBar({ unreadMessages = 0 }: { unreadMessages?: number }) { + const tabs: TabItem[] = [ + { to: '/messages', icon: 'chat_bubble', label: '消息', badge: unreadMessages }, + { to: '/contacts', icon: 'contacts', label: '通讯录' }, + { to: '/settings', icon: 'person', label: '我的' }, + ]; return (