ui: add expand react button

Session/Conversations/Message Cells/Content Views/ReactionContainerView.swift

@@ -37,10 +37,26 @@ final class ReactionContainerView : UIView {
         stackView.axis = .horizontal
         stackView.spacing = Values.smallSpacing
         stackView.alignment = .center
-        for reaction in reactions {
+        
+        var displayedReactions: [(String, (Int, Bool))]
+        var expandButtonReactions: [String]
+        
+        if reactions.count >= 6 {
+            displayedReactions = Array(reactions[0...2])
+            expandButtonReactions = Array(reactions[3...5]).map{ $0.0 }
+        } else {
+            displayedReactions = reactions
+            expandButtonReactions = []
+        }
+        
+        for reaction in displayedReactions {
             let reactionView = ReactionView(emoji: reaction.0, value: reaction.1)
             stackView.addArrangedSubview(reactionView)
         }
+        if expandButtonReactions.count > 0 {
+            let expandButton = ExpandingReactionButton(emojis: expandButtonReactions)
+            stackView.addArrangedSubview(expandButton)
+        }
         containerView.addArrangedSubview(stackView)
     }
 }

Session/Conversations/Message Cells/Content Views/ReactionView.swift

@@ -54,3 +54,53 @@ final class ReactionView : UIView {
         }
     }
 }
+
+final class ExpandingReactionButton: UIView {
+    private let emojis: [String]
+    
+    // MARK: Settings
+    private let size: CGFloat = 22
+    private let margin: CGFloat = 15
+    
+    // MARK: Lifecycle
+    init(emojis: [String]) {
+        self.emojis = emojis
+        super.init(frame: CGRect.zero)
+        setUpViewHierarchy()
+    }
+    
+    override init(frame: CGRect) {
+        preconditionFailure("Use init(viewItem:textColor:) instead.")
+    }
+    
+    required init?(coder: NSCoder) {
+        preconditionFailure("Use init(viewItem:textColor:) instead.")
+    }
+    
+    private func setUpViewHierarchy() {
+        var rightMargin: CGFloat = 0
+        for emoji in self.emojis.reversed() {
+            let container = UIView()
+            container.set(.width, to: size)
+            container.set(.height, to: size)
+            container.backgroundColor = Colors.receivedMessageBackground
+            container.layer.cornerRadius = size / 2
+            container.layer.borderWidth = 1
+            container.layer.borderColor = isDarkMode ? UIColor.black.cgColor : UIColor.white.cgColor
+            
+            let emojiLabel = UILabel()
+            emojiLabel.text = emoji
+            emojiLabel.font = .systemFont(ofSize: Values.verySmallFontSize)
+            
+            container.addSubview(emojiLabel)
+            emojiLabel.center(in: container)
+            
+            addSubview(container)
+            container.pin([ UIView.VerticalEdge.top, UIView.VerticalEdge.bottom ], to: self)
+            container.pin(.right, to: .right, of: self, withInset: -rightMargin)
+            rightMargin += margin
+        }
+        
+        set(.width, to: rightMargin - margin + size)
+    }
+}