Page MenuHomePhorge
Files F32199318

D10391.1765106376.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D10391.1765106376.diff
View Options

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 (
+ <div className={css.unreadBadgeContainer}>
+ <UnreadBadge unreadCount={unreadCountValue} />
+ </div>
+ );
+ }, [unreadCountValue]);
+
return (
<div className={css.container}>
<div
@@ -19,6 +35,7 @@
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
+ {unreadBadge}
<SWMansionIcon icon="home-1" size={24} />
</div>
</div>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 11:19 AM (21 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5838404
Default Alt Text
D10391.1765106376.diff (2 KB)

Event Timeline