➕ ADDS: unseen_count on Lists dropdown

Author: mehmoodak

client/layout/sidebar/expandable-heading.jsx

@@ -10,6 +10,7 @@ import { decodeEntities } from 'calypso/lib/formatting';
 const ExpandableSidebarHeading = ( {
 	title,
 	count,
+	compactCount,
 	icon,
 	customIcon,
 	materialIcon,
@@ -42,7 +43,7 @@ const ExpandableSidebarHeading = ( {
 			{ undefined !== customIcon && customIcon }
 			<span className="sidebar__expandable-title">
 				{ decodeEntities( title ) }
-				{ undefined !== count && <Count count={ count } /> }
+				{ undefined !== count && <Count count={ count } compact={ compactCount } /> }
 				{ inlineText && <span className="sidebar__inline-text">{ inlineText }</span> }
 			</span>
 			{ appendContent }
@@ -74,6 +75,7 @@ const ExpandableSidebarHeading = ( {
 ExpandableSidebarHeading.propTypes = {
 	title: PropTypes.oneOfType( [ TranslatableString, PropTypes.element ] ).isRequired,
 	count: PropTypes.number,
+	compactCount: PropTypes.bool,
 	onClick: PropTypes.func,
 	customIcon: PropTypes.node,
 	icon: PropTypes.string,

client/layout/sidebar/expandable.jsx

@@ -41,6 +41,7 @@ export const ExpandableSidebarMenu = ( menuProps ) => {
 		className,
 		title,
 		count,
+		compactCount,
 		onClick,
 		icon,
 		materialIcon,
@@ -112,6 +113,7 @@ export const ExpandableSidebarMenu = ( menuProps ) => {
 				<ExpandableSidebarHeading
 					title={ title }
 					count={ count }
+					compactCount={ compactCount }
 					onClick={ ( event ) => {
 						setSubmenuHovered( false );
 						onClick( event );
@@ -144,6 +146,7 @@ ExpandableSidebarMenu.propTypes = {
 	className: PropTypes.string,
 	title: PropTypes.oneOfType( [ TranslatableString, PropTypes.element ] ).isRequired,
 	count: PropTypes.number,
+	compactCount: PropTypes.bool,
 	onClick: PropTypes.func,
 	customIcon: PropTypes.node,
 	icon: PropTypes.string,

client/reader/sidebar/reader-sidebar-lists/index.tsx

@@ -17,6 +17,7 @@ interface ReaderSidebarListsProps {
 }
 
 const ReaderSidebarLists = ( {
+	lists,
 	isOpen,
 	onClick,
 	path,
@@ -30,17 +31,22 @@ const ReaderSidebarLists = ( {
 		recordReaderTracksEvent( 'calypso_reader_sidebar_lists_dropdown_title_clicked' );
 	}
 
+	const totalUnseenCount: number =
+		lists?.reduce( ( total, list ) => total + ( list.unseen_count ?? 0 ), 0 ) || 0;
+
 	return (
 		<li>
 			<ExpandableSidebarMenu
-				expanded={ isOpen }
+				expanded={ isOpen ?? false }
 				title={ translate( 'Lists' ) }
+				count={ totalUnseenCount }
+				compactCount
 				onClick={ navigateToLists }
 				disableFlyout
 				className={ path === '/reader/lists' ? 'sidebar__menu--selected' : '' }
 				expandableIconClick={ onClick }
 			>
-				<ReaderSidebarListsList path={ path } { ...passedProps } />
+				<ReaderSidebarListsList path={ path } lists={ lists } { ...passedProps } />
 			</ExpandableSidebarMenu>
 		</li>
 	);