Reader: Minor Improvements (#23700)

* Add ReaderStreamTitleView.makeForFollowing

* Add ReaderNavigationCustomTitleView to fake navigation title appearance with animation

* Fix an issue with scrollViewToTop after selecting interests

* Add dot

* Add custom titles for Recent

* Implement only for Recent

* Add custom header in Discover

* Fix title for Saved

* Fix background color fo site icon placeholders in the Reader menu

* Fix an issue with chevron in sidebar showing wrong icon when collapsed

* Extract ReaderPostToolbarViewModel

* Use Sans font for site details

* Integrate new title when showing sites

* Add white background and border to avatars

* Fix add tag presentation

* Reduce spacing for buttons in Subscriptions view

* Remove subscription URLs in compact mode

Author: kean

WordPress/Classes/System/ReaderPresenter.swift

@@ -143,7 +143,11 @@ final class ReaderPresenter: NSObject, SplitViewDisplayable {
         case .addTag:
             let addTagVC = UIHostingController(rootView: ReaderTagsAddTagView())
             addTagVC.modalPresentationStyle = .formSheet
-            addTagVC.preferredContentSize = CGSize(width: 420, height: 124)
+            let preferredHeight: CGFloat = 124
+            addTagVC.sheetPresentationController?.detents = [.custom(resolver: { _ in
+                preferredHeight
+            })]
+            addTagVC.preferredContentSize = CGSize(width: 420, height: preferredHeight)
             sidebar.present(addTagVC, animated: true, completion: nil)
         case .discoverTags:
             let tags = viewContext.allObjects(

WordPress/Classes/Utility/Media/ImageView.swift

@@ -19,6 +19,9 @@ final class ImageView: UIView {
     var isErrorViewEnabled = true
     var loadingStyle = LoadingStyle.background
 
+    /// The background color to use when the image is loaded.
+    var successBackgroundColor = UIColor.clear
+
     override init(frame: CGRect) {
         super.init(frame: frame)
 
@@ -69,7 +72,7 @@ final class ImageView: UIView {
         case .success(let image):
             imageView.configure(image: image)
             imageView.isHidden = false
-            backgroundColor = .clear
+            backgroundColor = successBackgroundColor
         case .failure:
             if isErrorViewEnabled {
                 makeErrorView().isHidden = false

WordPress/Classes/Utility/SharedStrings.swift

@@ -27,5 +27,9 @@ enum SharedStrings {
 
     enum Reader {
         static let unfollow = NSLocalizedString("reader.button.unfollow", value: "Unfollow", comment: "Reader sidebar button title")
+        static let recent = NSLocalizedString("reader.recent.title", value: "Recent", comment: "Used in multiple contexts, usually as a screen title")
+        static let discover = NSLocalizedString("reader.discover.title", value: "Discover", comment: "Used in multiple contexts, usually as a screen title")
+        static let saved = NSLocalizedString("reader.saved.title", value: "Saved", comment: "Used in multiple contexts, usually as a screen title")
+        static let likes = NSLocalizedString("reader.likes.title", value: "Likes", comment: "Used in multiple contexts, usually as a screen title")
     }
 }

WordPress/Classes/ViewRelated/Reader/ReaderDiscoverHeaderView.swift

@@ -5,7 +5,7 @@ protocol ReaderDiscoverHeaderViewDelegate: AnyObject {
 }
 
 final class ReaderDiscoverHeaderView: UIView, UITextViewDelegate {
-    private let titleView = ReaderStreamTitleView()
+    private let titleView = ReaderStreamTitleView(insets: nil)
     private let channelsStackView = UIStackView(spacing: 8, [])
     private var channelViews: [ReaderDiscoverChannelView] = []
 
@@ -25,9 +25,9 @@ final class ReaderDiscoverHeaderView: UIView, UITextViewDelegate {
 
         let stackView = UIStackView(axis: .vertical, spacing: 8, [titleView, scrollView])
         addSubview(stackView)
-        stackView.pinEdges(insets: UIEdgeInsets(top: 16, left: 16, bottom: 8, right: 16))
+        stackView.pinEdges(insets: ReaderStreamTitleView.preferredInsets)
 
-        titleView.titleLabel.text = Strings.title
+        titleView.titleLabel.text = SharedStrings.Reader.discover
         titleView.detailsTextView.attributedText = {
             guard let details = try? NSMutableAttributedString(markdown: Strings.details) else {
                 return nil
@@ -204,7 +204,6 @@ enum ReaderDiscoverChannel: Hashable {
 }
 
 private enum Strings {
-    static let title = NSLocalizedString("reader.discover.header.title", value: "Discover", comment: "Header view title")
     static let details = NSLocalizedString("reader.discover.header.title", value: "Explore popular blogs that inspire, educate, and entertain based on your [interests](/interests).", comment: "Reader Discover header view details label. The text has a Markdown URL: [interests](/interests). Only the text in the square brackets needs to be translated: [<translate_this>](/interests).")
     static let editInterests = NSLocalizedString("reader.editInterests.title", value: "Edit Interests", comment: "Screen title")
 }

WordPress/Classes/ViewRelated/Reader/ReaderDiscoverViewController.swift

@@ -93,14 +93,16 @@ class ReaderDiscoverViewController: UIViewController, ReaderDiscoverHeaderViewDe
 
         if FeatureFlag.readerReset.enabled {
             // Important to set before `viewDidLoad`
-            streamVC.isReaderResetDiscoverEnabled = true
+            streamVC.isEmbeddedInDiscover = true
             streamVC.setHeaderView(headerView)
         }
 
         addChild(streamVC)
         view.addSubview(streamVC.view)
         streamVC.view.pinEdges()
         streamVC.didMove(toParent: self)
+
+        navigationItem.titleView = streamVC.navigationItem.titleView // important
     }
 
     /// TODO: (tech-debt) the app currently stores the responses from the `/discover`

WordPress/Classes/ViewRelated/Reader/ReaderPostCell.swift

@@ -132,6 +132,9 @@ private final class ReaderPostCellView: UIView {
     private func setupStyle() {
         avatarView.layer.cornerRadius = ReaderPostCell.avatarSize / 2
         avatarView.layer.masksToBounds = true
+        avatarView.successBackgroundColor = UIColor.white
+        avatarView.layer.borderWidth = 0.5
+        avatarView.layer.borderColor = UIColor.opaqueSeparator.withAlphaComponent(0.5).cgColor
         avatarView.isErrorViewEnabled = false
 
         buttonAuthor.maximumContentSizeCategory = .accessibilityLarge
@@ -299,6 +302,11 @@ private final class ReaderPostCellView: UIView {
             imageView.setImage(with: imageURL)
         }
 
+        configureToolbar(with: viewModel.toolbar)
+        configureToolbarAccessibility(with: viewModel.toolbar)
+    }
+
+    private func configureToolbar(with viewModel: ReaderPostToolbarViewModel) {
         buttons.bookmark.configuration = {
             var configuration = buttons.bookmark.configuration ?? .plain()
             configuration.image = UIImage(systemName: viewModel.isBookmarked ? "bookmark.fill" : "bookmark")
@@ -320,8 +328,6 @@ private final class ReaderPostCellView: UIView {
                 return configuration
             }()
         }
-
-        configureAccessibility(with: viewModel)
     }
 
     private func setAvatar(with viewModel: ReaderPostCellViewModel) {
@@ -401,7 +407,7 @@ private extension ReaderPostCellView {
         buttons.like.accessibilityIdentifier = "reader-like-button"
     }
 
-    func configureAccessibility(with viewModel: ReaderPostCellViewModel) {
+    func configureToolbarAccessibility(with viewModel: ReaderPostToolbarViewModel) {
         buttons.bookmark.accessibilityLabel = viewModel.isBookmarked ? NSLocalizedString("reader.post.buttonRemoveBookmark.accessibilityLint", value: "Remove bookmark", comment: "Button accessibility label") : NSLocalizedString("reader.post.buttonBookmark.accessibilityLabel", value: "Bookmark", comment: "Button accessibility label")
         buttons.reblog.accessibilityLabel = NSLocalizedString("reader.post.buttonReblog.accessibilityLabel", value: "Reblog", comment: "Button accessibility label")
         buttons.comment.accessibilityLabel = {

WordPress/Classes/ViewRelated/Reader/ReaderPostCellViewModel.swift

@@ -12,12 +12,7 @@ final class ReaderPostCellViewModel {
     let imageURL: URL?
 
     // Footer (Buttons)
-    let isBookmarked: Bool
-    let isCommentsEnabled: Bool
-    let commentCount: Int
-    let isLikesEnabled: Bool
-    let likeCount: Int
-    let isLiked: Bool
+    let toolbar: ReaderPostToolbarViewModel
 
     weak var viewController: ReaderStreamViewController?
 
@@ -32,7 +27,6 @@ final class ReaderPostCellViewModel {
         self.post = post
 
         let isP2 = (topic as? ReaderSiteTopic)?.isP2Type == true
-
         if isP2 {
             self.author = post.authorDisplayName ?? ""
         } else {
@@ -42,15 +36,7 @@ final class ReaderPostCellViewModel {
         self.title = post.titleForDisplay() ?? ""
         self.details = post.contentPreviewForDisplay() ?? ""
         self.imageURL = post.featuredImageURLForDisplay()
-
-        self.isBookmarked = post.isSavedForLater
-
-        self.isCommentsEnabled = post.isCommentsEnabled
-        self.commentCount = post.commentCount?.intValue ?? 0
-
-        self.isLikesEnabled = post.isLikesEnabled()
-        self.likeCount = post.likeCount?.intValue ?? 0
-        self.isLiked = post.isLiked()
+        self.toolbar = ReaderPostToolbarViewModel.make(post: post)
 
         if isP2 {
             self.avatarURL = post.authorAvatarURL.flatMap(URL.init)
@@ -75,12 +61,14 @@ final class ReaderPostCellViewModel {
         self.title = "Discovering the Wonders of the Wild"
         self.details = "Lorem ipsum dolor sit amet. Non omnis quia et natus voluptatum et eligendi voluptate vel iusto fuga sit repellendus molestiae aut voluptatem blanditiis ad neque sapiente. Id galisum distinctio quo enim aperiam non veritatis vitae et ducimus rerum."
         self.imageURL = URL(string: "https://picsum.photos/1260/630.jpg")
-        self.isBookmarked = false
-        self.isLikesEnabled = true
-        self.likeCount = 9000
-        self.isCommentsEnabled = true
-        self.commentCount = 213
-        self.isLiked = true
+        self.toolbar = ReaderPostToolbarViewModel(
+            isBookmarked: false,
+            isCommentsEnabled: true,
+            commentCount: 9000,
+            isLikesEnabled: true,
+            likeCount: 213,
+            isLiked: true
+        )
     }
 
     static func mock() -> ReaderPostCellViewModel {
@@ -113,3 +101,23 @@ final class ReaderPostCellViewModel {
         ReaderLikeAction().execute(with: post)
     }
 }
+
+struct ReaderPostToolbarViewModel {
+    let isBookmarked: Bool
+    let isCommentsEnabled: Bool
+    let commentCount: Int
+    let isLikesEnabled: Bool
+    let likeCount: Int
+    let isLiked: Bool
+
+    static func make(post: ReaderPost) -> ReaderPostToolbarViewModel {
+        ReaderPostToolbarViewModel(
+            isBookmarked: post.isSavedForLater,
+            isCommentsEnabled: post.isCommentsEnabled,
+            commentCount: post.commentCount?.intValue ?? 0,
+            isLikesEnabled: post.isLikesEnabled(),
+            likeCount: post.likeCount?.intValue ?? 0,
+            isLiked: post.isLiked()
+        )
+    }
+}

WordPress/Classes/ViewRelated/Reader/ReaderSidebarSubscriptionsSection.swift

@@ -18,7 +18,6 @@ struct ReaderSidebarSubscriptionsSection: View {
                 Text(site.title)
             } icon: {
                 SiteIconView(viewModel: SiteIconViewModel(readerSiteTopic: site, size: .small))
-                    .environment(\.siteIconBackgroundColor, Color(.systemBackground))
                     .frame(width: 28, height: 28)
             }
             .lineLimit(1)

WordPress/Classes/ViewRelated/Reader/ReaderSidebarViewController.swift

@@ -108,6 +108,7 @@ private struct ReaderSidebarView: View {
         }
         makeSection(Strings.lists, isExpanded: $isSectionListsExpanded) {
             ReaderSidebarListsSection(viewModel: viewModel)
+                .environment(\.siteIconBackgroundColor, Color(viewModel.isCompact ? .secondarySystemBackground : .systemBackground))
         }
         makeSection(Strings.tags, isExpanded: $isSectionTagsExpanded) {
             ReaderSidebarTagsSection(viewModel: viewModel)
@@ -160,7 +161,7 @@ private struct ReaderSidebarSection<Content: View>: View {
                         .font(.subheadline.weight(.semibold))
                         .foregroundStyle(.secondary)
                     Spacer()
-                    Image(systemName: "chevron.down")
+                    Image(systemName: isExpanded ? "chevron.down" : "chevron.right")
                         .font(.system(size: 14).weight(.semibold))
                         .foregroundStyle(AppColor.brand)
                 }

WordPress/Classes/ViewRelated/Reader/ReaderSiteHeaderView.swift

@@ -94,7 +94,7 @@ struct ReaderSiteHeader: View {
             }
             VStack(alignment: .leading, spacing: 4) {
                 Text(viewModel.title)
-                    .font(Font(WPStyleGuide.serifFontForTextStyle(.title2, fontWeight: .semibold)))
+                    .font(Font(WPStyleGuide.fontForTextStyle(.title1, fontWeight: .semibold)))
                 Text(viewModel.siteUrl)
                     .font(.subheadline)
             }