From 7f6a702412389f596dd261e5f4374d91209e1f92 Mon Sep 17 00:00:00 2001
From: Suhail Saqan <suhail.saqan@gmail.com>
Date: Thu, 7 Sep 2023 17:57:19 -0700
Subject: [PATCH] emojis: make width dynamic and font bigger

add calculateOverlayWidth to support this

Closes: https://github.com/damus-io/damus/pull/1542
Signed-off-by: William Casarin <jb55@jb55.com>
---
 damus/Views/ActionBar/EventActionBar.swift | 62 ++++++++++++++--------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/damus/Views/ActionBar/EventActionBar.swift b/damus/Views/ActionBar/EventActionBar.swift
index f314fd62..f5b453a9 100644
--- a/damus/Views/ActionBar/EventActionBar.swift
+++ b/damus/Views/ActionBar/EventActionBar.swift
@@ -256,8 +256,8 @@ struct LikeButton: View {
         Group {
             if isReactionsVisible {
                 ZStack {
-                    RoundedRectangle(cornerRadius: 10)
-                        .frame(width: 250, height: 50)
+                    RoundedRectangle(cornerRadius: 20)
+                        .frame(width: calculateOverlayWidth(), height: 50)
                         .foregroundColor(DamusColors.black)
                         .scaleEffect(Double(showReactionsBG), anchor: .topTrailing)
                         .animation(
@@ -267,9 +267,9 @@ struct LikeButton: View {
                         .overlay(
                             Rectangle()
                                 .foregroundColor(Color.white.opacity(0.2))
-                                .frame(width: 250, height: 50)
+                                .frame(width: calculateOverlayWidth(), height: 50)
                                 .clipShape(
-                                    RoundedRectangle(cornerRadius: 10)
+                                    RoundedRectangle(cornerRadius: 20)
                                 )
                         )
                         .overlay(reactions())
@@ -287,9 +287,43 @@ struct LikeButton: View {
             }
         }
     }
+    
+    func calculateOverlayWidth() -> CGFloat {
+        let maxWidth: CGFloat = 250
+        let numberOfEmojis = emojis.count
+        let minimumWidth: CGFloat = 75
+        
+        if numberOfEmojis > 0 {
+            let emojiWidth: CGFloat = 25
+            let padding: CGFloat = 15
+            let buttonWidth: CGFloat = 18
+            let buttonPadding: CGFloat = 20
+            
+            let totalWidth = CGFloat(numberOfEmojis) * (emojiWidth + padding) + buttonWidth + buttonPadding
+            return min(maxWidth, max(minimumWidth, totalWidth))
+        } else {
+            return minimumWidth
+        }
+    }
 
     func reactions() -> some View {
         HStack {
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack(spacing: 15) {
+                    ForEach(emojis, id: \.self) { emoji in
+                        if let index = emojis.firstIndex(of: emoji) {
+                            let scale = index < showEmojis.count ? showEmojis[index] : 0
+                            Text(emoji)
+                                .font(.system(size: 25))
+                                .scaleEffect(Double(scale))
+                                .onTapGesture {
+                                    emojiTapped(emoji)
+                                }
+                        }
+                    }
+                }
+                .padding(.leading, 10)
+            }
             Button(action: {
                 withAnimation(.easeOut(duration: 0.2)) {
                     isReactionsVisible = false
@@ -298,26 +332,10 @@ struct LikeButton: View {
                 showEmojis = []
             }) {
                 Image(systemName: "xmark.circle.fill")
-                    .font(.body)
+                    .font(.system(size: 18))
                     .foregroundColor(.gray)
             }
-            .padding(.leading, 7.5)
-            
-            ScrollView(.horizontal, showsIndicators: false) {
-                HStack(spacing: 20) {
-                    ForEach(emojis, id: \.self) { emoji in
-                        if let index = emojis.firstIndex(of: emoji) {
-                            let scale = index < showEmojis.count ? showEmojis[index] : 0
-                            Text(emoji)
-                                .scaleEffect(Double(scale))
-                                .onTapGesture {
-                                    emojiTapped(emoji)
-                                }
-                        }
-                    }
-                }
-                .padding(.trailing, 10)
-            }
+            .padding(.trailing, 7.5)
         }
     }