diff --git a/web/navigation-sidebar/navigation-sidebar-home-button.css b/web/navigation-sidebar/navigation-sidebar-home-button.css --- a/web/navigation-sidebar/navigation-sidebar-home-button.css +++ b/web/navigation-sidebar/navigation-sidebar-home-button.css @@ -1,6 +1,7 @@ .container { padding-top: 24px; border-bottom: 1px solid var(--separator-background-primary-default); + position: relative; } .buttonContainer { @@ -11,3 +12,9 @@ .buttonContainer:hover { cursor: pointer; } + +.unreadBadgeContainer { + position: absolute; + right: -8px; + top: 16px; +} diff --git a/web/navigation-sidebar/navigation-sidebar-home-button.react.js b/web/navigation-sidebar/navigation-sidebar-home-button.react.js --- a/web/navigation-sidebar/navigation-sidebar-home-button.react.js +++ b/web/navigation-sidebar/navigation-sidebar-home-button.react.js @@ -3,15 +3,31 @@ import * as React from 'react'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; +import { unreadCount } from 'lib/selectors/thread-selectors.js'; import css from './navigation-sidebar-home-button.css'; +import UnreadBadge from '../components/unread-badge.react.js'; +import { useSelector } from '../redux/redux-utils.js'; import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js'; function NavigationSidebarHomeButton(): React.Node { + const unreadCountValue = useSelector(unreadCount); + const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({ tooltipLabel: 'Home', }); + const unreadBadge = React.useMemo(() => { + if (unreadCountValue === 0) { + return null; + } + return ( +
+ +
+ ); + }, [unreadCountValue]); + return (
+ {unreadBadge}