Show both defaults and frequent emojis in the timeline item menu, make the list scrollable (#3534)

ElementX/Sources/Application/AppSettings.swift

@@ -47,7 +47,6 @@ final class AppSettings {
         case fuzzyRoomListSearchEnabled
         case enableOnlySignedDeviceIsolationMode
         case knockingEnabled
-        case frequentEmojisEnabled
     }
     
     private static var suiteName: String = InfoPlistReader.main.appGroupIdentifier
@@ -281,9 +280,6 @@ final class AppSettings {
     @UserPreference(key: UserDefaultsKeys.knockingEnabled, defaultValue: false, storageType: .userDefaults(store))
     var knockingEnabled
     
-    @UserPreference(key: UserDefaultsKeys.frequentEmojisEnabled, defaultValue: isDevelopmentBuild, storageType: .userDefaults(store))
-    var frequentEmojisEnabled
-
     #endif
     
     // MARK: - Shared

ElementX/Sources/Screens/Settings/DeveloperOptionsScreen/DeveloperOptionsScreenModels.swift

@@ -50,7 +50,6 @@ protocol DeveloperOptionsProtocol: AnyObject {
     var enableOnlySignedDeviceIsolationMode: Bool { get set }
     var elementCallBaseURLOverride: URL? { get set }
     var knockingEnabled: Bool { get set }
-    var frequentEmojisEnabled: Bool { get set }
 }
 
 extension AppSettings: DeveloperOptionsProtocol { }

ElementX/Sources/Screens/Settings/DeveloperOptionsScreen/View/DeveloperOptionsScreen.swift

@@ -53,10 +53,6 @@ struct DeveloperOptionsScreen: View {
                 Toggle(isOn: $context.hideTimelineMedia) {
                     Text("Hide image & video previews")
                 }
-                
-                Toggle(isOn: $context.frequentEmojisEnabled) {
-                    Text("Show frequently used emojis")
-                }
             }
             
             Section("Join rules") {

ElementX/Sources/Screens/Timeline/View/ItemMenu/TimelineItemMenu.swift

@@ -11,6 +11,7 @@ import SwiftUI
 struct TimelineItemMenu: View {
     @EnvironmentObject private var context: TimelineViewModel.Context
     @Environment(\.dismiss) private var dismiss
+    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
     
     @State private var reactionsFrame = CGRect.zero
     
@@ -109,31 +110,43 @@ struct TimelineItemMenu: View {
     }
     
     private var reactionsSection: some View {
-        ScrollView(.horizontal) {
+        HStack(spacing: 8) {
-            HStack(alignment: .center, spacing: 8) {
+            ScrollView(.horizontal) {
-                ForEach(actions.reactions, id: \.key) {
+                HStack(alignment: .center, spacing: 8) {
-                    reactionButton(for: $0.key)
+                    ForEach(actions.reactions, id: \.key) {
-                }
+                        reactionButton(for: $0.key)
-                
-                Button {
-                    dismiss()
-                    // Otherwise we get errors that a sheet is already presented
-                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
-                        context.send(viewAction: .displayEmojiPicker(itemID: item.id))
                     }
-                } label: {
-                    CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG)
-                        .foregroundColor(.compound.iconSecondary)
-                        .padding(10)
                 }
-                .accessibilityLabel(L10n.actionReact)
+                .padding(.horizontal)
+                .frame(minWidth: reactionsFrame.width, maxWidth: .infinity, alignment: .center)
             }
-            .padding(.horizontal)
+            .scrollIndicators(.hidden)
-            .frame(minWidth: reactionsFrame.width, maxWidth: .infinity, alignment: .center)
+            .scrollBounceBehavior(.basedOnSize, axes: .horizontal)
+            .readFrame($reactionsFrame)
+            .overlay {
+                if horizontalSizeClass == .compact {
+                    LinearGradient(stops: [.init(color: .clear, location: 0.0),
+                                           .init(color: .clear, location: 0.9),
+                                           .init(color: .compound.bgCanvasDefault, location: 1.0)],
+                                   startPoint: .leading,
+                                   endPoint: .trailing)
+                        .allowsHitTesting(false)
+                }
+            }
+            
+            Button {
+                dismiss()
+                // Otherwise we get errors that a sheet is already presented
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    context.send(viewAction: .displayEmojiPicker(itemID: item.id))
+                }
+            } label: {
+                CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG)
+                    .foregroundColor(.compound.iconSecondary)
+                    .padding(10)
+            }
+            .accessibilityLabel(L10n.actionReact)
         }
-        .scrollIndicators(.hidden)
-        .scrollBounceBehavior(.basedOnSize, axes: .horizontal)
-        .readFrame($reactionsFrame)
     }
     
     private func reactionButton(for emoji: String) -> some View {

ElementX/Sources/Screens/Timeline/View/ItemMenu/TimelineItemMenuAction.swift

@@ -5,6 +5,7 @@
 // Please see LICENSE in the repository root for full details.
 //
 
+import OrderedCollections
 import SFSafeSymbols
 import SwiftUI
 
@@ -25,30 +26,32 @@ struct TimelineItemMenuActions {
         self.actions = actions
         self.debugActions = debugActions
         
-        // Only process 5 of the most frequently used emojis instead of all of them
+        var frequentlyUsed: OrderedSet<TimelineItemMenuReaction> = [
-        var frequentlyUsed = emojiProvider.frequentlyUsedSystemEmojis().prefix(5).map { TimelineItemMenuReaction(key: $0, symbol: .heart) }
-        
-        frequentlyUsed += [
             .init(key: "👍️", symbol: .handThumbsup),
             .init(key: "👎️", symbol: .handThumbsdown),
-            .init(key: "🔥", symbol: .flame),
+            .init(key: "🎉", symbol: .partyPopper),
-            .init(key: "❤️", symbol: .heart),
+            .init(key: "❤️", symbol: .heart)
-            .init(key: "👏", symbol: .handsClap)
         ]
         
-        frequentlyUsed = Array(frequentlyUsed.prefix(5))
+        frequentlyUsed.append(contentsOf: emojiProvider.frequentlyUsedSystemEmojis().map { TimelineItemMenuReaction(key: $0, symbol: .heart) })
         
         reactions = if isReactable {
-            frequentlyUsed
+            Array(frequentlyUsed.elements.prefix(10))
         } else {
             []
         }
     }
 }
 
-struct TimelineItemMenuReaction {
+struct TimelineItemMenuReaction: Hashable {
     let key: String
     let symbol: SFSymbol
+    
+    // Frequently used emojis on the all use the same .heart SFSymbol.
+    // Override equatable so we can remove duplicates.
+    static func == (lhs: TimelineItemMenuReaction, rhs: TimelineItemMenuReaction) -> Bool {
+        lhs.key == rhs.key
+    }
 }
 
 enum TimelineItemMenuAction: Identifiable, Hashable {

ElementX/Sources/Services/Emojis/EmojiProvider.swift

@@ -57,7 +57,7 @@ class EmojiProvider: EmojiProviderProtocol {
     }
     
     func frequentlyUsedSystemEmojis() -> [String] {
-        guard appSettings.frequentEmojisEnabled, !ProcessInfo.processInfo.isiOSAppOnMac else {
+        guard !ProcessInfo.processInfo.isiOSAppOnMac else {
             return []
         }
         
@@ -72,7 +72,7 @@ class EmojiProvider: EmojiProviderProtocol {
     }
     
     func markEmojiAsFrequentlyUsed(_ emoji: String) {
-        guard appSettings.frequentEmojisEnabled else {
+        guard !ProcessInfo.processInfo.isiOSAppOnMac else {
             return
         }