Reader: Convert SiteStream to functional component and add sidebar

client/blocks/follow-button/README.md

@@ -40,3 +40,4 @@ function render() {
 
 - `following`: (default: false) a boolean indicating if the current user is currently following the site URL
 - `disabled`: (default: false) a boolean indicating if the button is currently disabled
+- `hasButtonStyle`: (default: false) a boolean indicating if the button should use a style with a button shape/border

client/blocks/follow-button/button.jsx

@@ -18,6 +18,7 @@ class FollowButton extends Component {
 		followingLabel: PropTypes.string,
 		followIcon: PropTypes.object,
 		followingIcon: PropTypes.object,
+		hasButtonStyle: PropTypes.bool,
 	};
 
 	static defaultProps = {
@@ -58,6 +59,10 @@ class FollowButton extends Component {
 			menuClasses.push( 'is-disabled' );
 		}
 
+		if ( this.props.hasButtonStyle ) {
+			menuClasses.push( 'has-button-style' );
+		}
+
 		const followingIcon = this.props.followingIcon || (
 			<Gridicon key="following" icon="reader-following" size={ iconSize } />
 		);

client/blocks/follow-button/index.jsx

@@ -23,6 +23,7 @@ class FollowButtonContainer extends Component {
 		siteId: PropTypes.number,
 		followIcon: PropTypes.object,
 		followingIcon: PropTypes.object,
+		hasButtonStyle: PropTypes.bool,
 	};
 
 	static defaultProps = {
@@ -63,6 +64,7 @@ class FollowButtonContainer extends Component {
 				className={ this.props.className }
 				followIcon={ this.props.followIcon }
 				followingIcon={ this.props.followingIcon }
+				hasButtonStyle={ this.props.hasButtonStyle }
 			/>
 		);
 	}

client/blocks/follow-button/style.scss

@@ -118,6 +118,42 @@ button.follow-button {
 			border-width: 1px 1px 2px;
 		}
 	}
+
+	&.has-button-style,
+	&.has-button-style:hover {
+		background-color: var(--color-accent);
+		border-radius: 4px;
+		box-sizing: border-box;
+		font-weight: 500;
+		padding: 12px 24px 12px 20px;
+
+		svg.reader-follow-feed * {
+			stroke: var(--color-text-inverted);
+		}
+
+		svg.reader-following-feed * {
+			stroke: var(--color-text);
+		}
+
+		.follow-button__label {
+			color: var(--color-text-inverted);
+			margin-left: 8px;
+
+			@include breakpoint-deprecated( "<660px" ) {
+				display: unset;
+			}
+		}
+
+		&.is-following,
+		&.is-following:hover {
+			background-color: var(--color-surface);
+			border: 1px solid var(--color-neutral-10);
+
+			.follow-button__label {
+				color: var(--color-text);
+			}
+		}
+	}
 }
 
 .follow-button__label {

client/blocks/reader-feed-header/follow.jsx

@@ -0,0 +1,117 @@
+import { Gridicon } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import ReaderSiteNotificationSettings from 'calypso/blocks/reader-site-notification-settings';
+import ReaderSuggestedFollowsDialog from 'calypso/blocks/reader-suggested-follows/dialog';
+import ReaderFollowButton from 'calypso/reader/follow-button';
+import { getSiteUrl, isEligibleForUnseen } from 'calypso/reader/get-helpers';
+import { useSelector } from 'calypso/state';
+import { recordReaderTracksEvent } from 'calypso/state/reader/analytics/actions';
+import { getFeed } from 'calypso/state/reader/feeds/selectors';
+import { hasReaderFollowOrganization, isFollowing } from 'calypso/state/reader/follows/selectors';
+import { requestMarkAllAsSeen } from 'calypso/state/reader/seen-posts/actions';
+import { getSite } from 'calypso/state/reader/sites/selectors';
+import getUserSetting from 'calypso/state/selectors/get-user-setting';
+import isFeedWPForTeams from 'calypso/state/selectors/is-feed-wpforteams';
+import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams';
+
+export default function ReaderFeedHeaderFollow( props ) {
+	const { feed, site, streamKey } = props;
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+	const [ isSuggestedFollowsModalOpen, setIsSuggestedFollowsModalOpen ] = useState( false );
+	const siteId = site?.ID;
+	const siteUrl = getSiteUrl( { feed, site } );
+
+	const { following, hasOrganization, isEmailBlocked, isWPForTeamsItem } = useSelector(
+		( state ) => {
+			let _siteId = siteId;
+			let _feedId = feed?.feed_ID;
+			let _feed = _feedId ? getFeed( state, _feedId ) : undefined;
+			let _site = _siteId ? getSite( state, _siteId ) : undefined;
+
+			if ( _feed && ! _siteId ) {
+				_siteId = _feed.blog_ID || undefined;
+				_site = _siteId ? getSite( state, _feed.blog_ID ) : undefined;
+			}
+
+			if ( _site && ! _feedId ) {
+				_feedId = _site.feed_ID;
+				_feed = _feedId ? getFeed( state, _site.feed_ID ) : undefined;
+			}
+
+			return {
+				following: _feed && isFollowing( state, { feedUrl: _feed.feed_URL } ),
+				hasOrganization: hasReaderFollowOrganization( state, _feedId, _siteId ),
+				isEmailBlocked: getUserSetting( state, 'subscription_delivery_email_blocked' ),
+				isWPForTeamsItem: isSiteWPForTeams( state, _siteId ) || isFeedWPForTeams( state, _feedId ),
+			};
+		}
+	);
+
+	const openSuggestedFollowsModal = ( followClicked ) => {
+		setIsSuggestedFollowsModalOpen( followClicked );
+	};
+
+	const onCloseSuggestedFollowModal = () => {
+		setIsSuggestedFollowsModalOpen( false );
+	};
+
+	const markAllAsSeen = () => {
+		dispatch( recordReaderTracksEvent( 'calypso_reader_mark_all_as_seen_clicked' ) );
+
+		dispatch(
+			requestMarkAllAsSeen( {
+				identifier: streamKey,
+				feedIds: [ feed.feed_ID ],
+				feedUrls: [ feed.URL ],
+			} )
+		);
+	};
+
+	return (
+		<div className="reader-feed-header__follow">
+			<div className="reader-feed-header__follow-and-settings">
+				{ siteUrl && (
+					<div className="reader-feed-header__follow-button">
+						<ReaderFollowButton
+							siteUrl={ siteUrl }
+							hasButtonStyle={ true }
+							iconSize={ 24 }
+							onFollowToggle={ openSuggestedFollowsModal }
+						/>
+					</div>
+				) }
+
+				{ site && following && ! isEmailBlocked && (
+					<div className="reader-feed-header__email-settings">
+						<ReaderSiteNotificationSettings iconSize={ 24 } showLabel={ false } siteId={ siteId } />
+					</div>
+				) }
+			</div>
+			{ isEligibleForUnseen( { isWPForTeamsItem, hasOrganization } ) && feed && (
+				<button
+					onClick={ markAllAsSeen }
+					className="reader-feed-header__seen-button"
+					disabled={ feed.unseen_count === 0 }
+				>
+					<Gridicon icon="visible" size={ 24 } />
+					<span
+						className="reader-feed-header__visibility"
+						title={ translate( 'Mark all as seen' ) }
+					>
+						{ translate( 'Mark all as seen' ) }
+					</span>
+				</button>
+			) }
+			{ siteId && (
+				<ReaderSuggestedFollowsDialog
+					onClose={ onCloseSuggestedFollowModal }
+					siteId={ +siteId }
+					isVisible={ isSuggestedFollowsModalOpen }
+				/>
+			) }
+		</div>
+	);
+}