Page MenuHomePhorge
Files F32176629

D10393.1765068228.diff
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

D10393.1765068228.diff
View Options

diff --git a/web/navigation-sidebar/community-list-item.css b/web/navigation-sidebar/community-list-item.css
--- a/web/navigation-sidebar/community-list-item.css
+++ b/web/navigation-sidebar/community-list-item.css
@@ -1,3 +1,13 @@
+.container {
+ position: relative;
+}
+
.container:hover {
cursor: pointer;
}
+
+.unreadBadgeContainer {
+ position: absolute;
+ right: -8px;
+ bottom: 14px;
+}
diff --git a/web/navigation-sidebar/community-list-item.react.js b/web/navigation-sidebar/community-list-item.react.js
--- a/web/navigation-sidebar/community-list-item.react.js
+++ b/web/navigation-sidebar/community-list-item.react.js
@@ -2,10 +2,13 @@
import * as React from 'react';
+import { unreadCountSelectorForCommunity } from 'lib/selectors/thread-selectors.js';
import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
import css from './community-list-item.css';
import ThreadAvatar from '../avatars/thread-avatar.react.js';
+import UnreadBadge from '../components/unread-badge.react.js';
+import { useSelector } from '../redux/redux-utils.js';
import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
type Props = {
@@ -14,6 +17,22 @@
function CommunityListItem(props: Props): React.Node {
const { threadInfo } = props;
+ const { id: threadID } = threadInfo;
+
+ const communityUnreadCountSelector =
+ unreadCountSelectorForCommunity(threadID);
+ const unreadCountValue = useSelector(communityUnreadCountSelector);
+
+ const unreadBadge = React.useMemo(() => {
+ if (unreadCountValue === 0) {
+ return null;
+ }
+ return (
+ <div className={css.unreadBadgeContainer}>
+ <UnreadBadge unreadCount={unreadCountValue} />
+ </div>
+ );
+ }, [unreadCountValue]);
const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
tooltipLabel: threadInfo.uiName,
@@ -26,6 +45,7 @@
onMouseLeave={onMouseLeave}
>
<ThreadAvatar size="S" threadInfo={threadInfo} />
+ {unreadBadge}
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 12:43 AM (14 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5841689
Default Alt Text
D10393.1765068228.diff (1 KB)

Event Timeline