feat: Implement more obvious account switcher

Mastodon/Scene/Root/MainTab/MainTabBarController.swift

@@ -43,6 +43,7 @@ class MainTabBarController: UITabBarController {
     
     static let avatarButtonSize = CGSize(width: 25, height: 25)
     let avatarButton = CircleAvatarButton()
+    let accountSwitcherChevron = UIImageView(image: UIImage(systemName: "chevron.up.chevron.down"))
     
     @Published var currentTab: Tab = .home
         
@@ -506,13 +507,20 @@ extension MainTabBarController {
         }
         anchorImageView.alpha = 0
         
+        accountSwitcherChevron.translatesAutoresizingMaskIntoConstraints = false
+        view.addSubview(accountSwitcherChevron)
+        
         self.avatarButton.translatesAutoresizingMaskIntoConstraints = false
         view.addSubview(self.avatarButton)
         NSLayoutConstraint.activate([
-            self.avatarButton.centerXAnchor.constraint(equalTo: anchorImageView.centerXAnchor),
+            self.avatarButton.centerXAnchor.constraint(equalTo: anchorImageView.centerXAnchor, constant: -16),
             self.avatarButton.centerYAnchor.constraint(equalTo: anchorImageView.centerYAnchor),
             self.avatarButton.widthAnchor.constraint(equalToConstant: MainTabBarController.avatarButtonSize.width).priority(.required - 1),
             self.avatarButton.heightAnchor.constraint(equalToConstant: MainTabBarController.avatarButtonSize.height).priority(.required - 1),
+            accountSwitcherChevron.widthAnchor.constraint(equalToConstant: 10),
+            accountSwitcherChevron.heightAnchor.constraint(equalToConstant: 18),
+            accountSwitcherChevron.leadingAnchor.constraint(equalTo: avatarButton.trailingAnchor, constant: 8),
+            accountSwitcherChevron.centerYAnchor.constraint(equalTo: avatarButton.centerYAnchor)
         ])
         self.avatarButton.setContentHuggingPriority(.required - 1, for: .horizontal)
         self.avatarButton.setContentHuggingPriority(.required - 1, for: .vertical)
@@ -520,6 +528,7 @@ extension MainTabBarController {
     }
     
     private func updateAvatarButtonAppearance() {
+        accountSwitcherChevron.tintColor = currentTab == .me ? .label : .secondaryLabel
         avatarButton.borderColor = currentTab == .me ? .label : .systemFill
         avatarButton.setNeedsLayout()
     }

Mastodon/Scene/Root/Sidebar/SidebarViewModel.swift

@@ -80,6 +80,7 @@ extension SidebarViewModel {
             }()
             cell.item = SidebarListContentView.Item(
                 isActive: false,
+                showAccountSwitcher: item == .me,
                 title: item.title,
                 image: item.image,
                 activeImage: item.selectedImage,
@@ -157,6 +158,7 @@ extension SidebarViewModel {
             case .setting:
                 let item = SidebarListContentView.Item(
                     isActive: false,
+                    showAccountSwitcher: false,
                     title: L10n.Common.Controls.Actions.settings,
                     image: Asset.ObjectsAndTools.gear.image.withRenderingMode(.alwaysTemplate),
                     activeImage: Asset.ObjectsAndTools.gear.image.withRenderingMode(.alwaysTemplate),
@@ -166,6 +168,7 @@ extension SidebarViewModel {
             case .compose:
                 let item = SidebarListContentView.Item(
                     isActive: false,
+                    showAccountSwitcher: self.currentTab == .me,
                     title: L10n.Common.Controls.Actions.compose,
                     image: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),
                     activeImage: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),
@@ -213,6 +216,7 @@ extension SidebarViewModel {
             
             let item = SidebarListContentView.Item(
                 isActive: false,
+                showAccountSwitcher: false,
                 title: L10n.Common.Controls.Actions.compose,
                 image: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),
                 activeImage: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),

Mastodon/Scene/Root/Sidebar/View/SidebarListContentView.swift

@@ -23,7 +23,8 @@ final class SidebarListContentView: UIView, UIContentView {
         button.borderColor = UIColor.label
         return button
     }()
-    
+    let accountSwitcherChevron = UIImageView(image: UIImage(systemName: "chevron.up.chevron.down"))
+
     private var currentConfiguration: ContentConfiguration!
     var configuration: UIContentConfiguration {
         get {
@@ -60,6 +61,9 @@ extension SidebarListContentView {
             imageView.widthAnchor.constraint(equalToConstant: 40).priority(.required - 1),
             imageView.heightAnchor.constraint(equalToConstant: 40).priority(.required - 1),
         ])
+        
+        accountSwitcherChevron.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(accountSwitcherChevron)
 
         avatarButton.translatesAutoresizingMaskIntoConstraints = false
         addSubview(avatarButton)
@@ -68,6 +72,10 @@ extension SidebarListContentView {
             avatarButton.centerYAnchor.constraint(equalTo: imageView.centerYAnchor),
             avatarButton.widthAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1.0).priority(.required - 2),
             avatarButton.heightAnchor.constraint(equalTo: imageView.heightAnchor, multiplier: 1.0).priority(.required - 2),
+            accountSwitcherChevron.widthAnchor.constraint(equalToConstant: 12),
+            accountSwitcherChevron.heightAnchor.constraint(equalToConstant: 22),
+            accountSwitcherChevron.leadingAnchor.constraint(equalTo: avatarButton.trailingAnchor, constant: 4),
+            accountSwitcherChevron.centerYAnchor.constraint(equalTo: avatarButton.centerYAnchor)
         ])
         avatarButton.setContentHuggingPriority(.defaultLow - 10, for: .vertical)
         avatarButton.setContentHuggingPriority(.defaultLow - 10, for: .horizontal)
@@ -96,6 +104,8 @@ extension SidebarListContentView {
         imageView.isHidden = item.imageURL != nil
         avatarButton.isHidden = item.imageURL == nil
         imageView.image = item.isActive ? item.activeImage.withRenderingMode(.alwaysTemplate) : item.image.withRenderingMode(.alwaysTemplate)
+        accountSwitcherChevron.isHidden = !item.showAccountSwitcher
+        accountSwitcherChevron.tintColor = item.isActive ? .label : .secondaryLabel
         avatarButton.avatarImageView.setImage(
             url: item.imageURL,
             placeholder: avatarButton.avatarImageView.image ?? .placeholder(color: .systemFill),  // reuse to avoid blink
@@ -112,7 +122,8 @@ extension SidebarListContentView {
         var isSelected: Bool = false
         var isHighlighted: Bool = false
         var isActive: Bool
-        
+        var showAccountSwitcher: Bool
+
         // model
         let title: String
         var image: UIImage
@@ -124,6 +135,7 @@ extension SidebarListContentView {
             return lhs.isSelected == rhs.isSelected
                 && lhs.isHighlighted == rhs.isHighlighted
                 && lhs.isActive == rhs.isActive
+                && lhs.showAccountSwitcher == rhs.showAccountSwitcher
                 && lhs.title == rhs.title
                 && lhs.image == rhs.image
                 && lhs.activeImage == rhs.activeImage
@@ -134,6 +146,7 @@ extension SidebarListContentView {
             hasher.combine(isSelected)
             hasher.combine(isHighlighted)
             hasher.combine(isActive)
+            hasher.combine(showAccountSwitcher)
             hasher.combine(title)
             hasher.combine(image)
             hasher.combine(activeImage)