Improve emoji picker

View Controllers/EmojiPickerViewController.swift

@@ -4,16 +4,180 @@ import Combine
 import UIKit
 import ViewModels
 
-final class EmojiPickerViewController: UIViewController {
+final class EmojiPickerViewController: UICollectionViewController {
     let searchBar = UISearchBar()
 
     private let viewModel: EmojiPickerViewModel
-    private let selectionAction: (PickerEmoji) -> Void
+    private let selectionAction: (EmojiPickerViewController, PickerEmoji) -> Void
-    private let dismissAction: () -> Void
+    private let deletionAction: (EmojiPickerViewController) -> Void
-    private let skinToneButton = UIButton()
+    private let searchPresentationAction: (EmojiPickerViewController, UINavigationController) -> Void
+    private let skinToneButton = UIBarButtonItem()
+    private let deleteButton = UIBarButtonItem()
+    private let closeButton = UIBarButtonItem(systemItem: .close)
+    private let presentSearchButton = UIButton()
     private var cancellables = Set<AnyCancellable>()
 
-    private lazy var collectionView: UICollectionView = {
+    private lazy var dataSource: UICollectionViewDiffableDataSource<PickerEmoji.Category, PickerEmoji> = {
+        let cellRegistration = UICollectionView.CellRegistration
+        <EmojiCollectionViewCell, PickerEmoji> { [weak self] in
+            $0.emoji = self?.applyingDefaultSkinTone(emoji: $2) ?? $2
+        }
+
+        let headerRegistration = UICollectionView.SupplementaryRegistration
+        <EmojiCategoryHeaderView>(elementKind: "Header") { [weak self] in
+            $0.label.text = self?.dataSource.snapshot().sectionIdentifiers[$2.section].displayName
+        }
+
+        let dataSource = UICollectionViewDiffableDataSource
+        <PickerEmoji.Category, PickerEmoji>(collectionView: collectionView) {
+            $0.dequeueConfiguredReusableCell(using: cellRegistration, for: $1, item: $2)
+        }
+
+        dataSource.supplementaryViewProvider = {
+            $0.dequeueConfiguredReusableSupplementary(using: headerRegistration, for: $2)
+        }
+
+        return dataSource
+    }()
+
+    private lazy var defaultSkinToneSelectionMenu: UIMenu = {
+        let clearSkinToneAction = UIAction(title: SystemEmoji.SkinTone.noneExample) { [weak self] _ in
+            self?.skinToneButton.title = SystemEmoji.SkinTone.noneExample
+            self?.viewModel.identityContext.appPreferences.defaultEmojiSkinTone = nil
+            self?.reloadVisibleItems()
+        }
+
+        let setSkinToneActions = SystemEmoji.SkinTone.allCases.map { [weak self] skinTone in
+            UIAction(title: skinTone.example) { _ in
+                self?.skinToneButton.title = skinTone.example
+                self?.viewModel.identityContext.appPreferences.defaultEmojiSkinTone = skinTone
+                self?.reloadVisibleItems()
+            }
+        }
+
+        return UIMenu(
+            title: NSLocalizedString("emoji.default-skin-tone", comment: ""),
+            children: [clearSkinToneAction] + setSkinToneActions)
+    }()
+
+    init(viewModel: EmojiPickerViewModel,
+         selectionAction: @escaping (EmojiPickerViewController, PickerEmoji) -> Void,
+         deletionAction: @escaping (EmojiPickerViewController) -> Void,
+         searchPresentationAction: @escaping (EmojiPickerViewController, UINavigationController) -> Void) {
+        self.viewModel = viewModel
+        self.selectionAction = selectionAction
+        self.deletionAction = deletionAction
+        self.searchPresentationAction = searchPresentationAction
+
+        super.init(collectionViewLayout: Self.layout())
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    // swiftlint:disable:next function_body_length
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        searchBar.translatesAutoresizingMaskIntoConstraints = false
+        searchBar.searchBarStyle = .minimal
+        searchBar.placeholder = NSLocalizedString("emoji.search", comment: "")
+        searchBar.searchTextField.addAction(
+            UIAction { [weak self] _ in
+                self?.viewModel.query = self?.searchBar.text ?? ""
+                self?.collectionView.setContentOffset(.zero, animated: false)
+            },
+            for: .editingChanged)
+        navigationItem.titleView = searchBar
+
+        searchBar.addSubview(presentSearchButton)
+        presentSearchButton.translatesAutoresizingMaskIntoConstraints = false
+        presentSearchButton.accessibilityLabel = NSLocalizedString("emoji.search", comment: "")
+        presentSearchButton.addAction(UIAction { [weak self] _ in self?.presentSearch() }, for: .touchUpInside)
+
+        skinToneButton.accessibilityLabel =
+            NSLocalizedString("emoji.default-skin-tone-button.accessibility-label", comment: "")
+
+        skinToneButton.title = viewModel.identityContext.appPreferences.defaultEmojiSkinTone?.example
+            ?? SystemEmoji.SkinTone.noneExample
+        skinToneButton.accessibilityLabel =
+            NSLocalizedString("emoji.default-skin-tone-button.accessibility-label", comment: "")
+        skinToneButton.menu = defaultSkinToneSelectionMenu
+
+        deleteButton.primaryAction = UIAction(image: UIImage(systemName: "delete.left")) { [weak self] _ in
+            guard let self = self else { return }
+
+            self.deletionAction(self)
+        }
+        deleteButton.tintColor = .label
+
+        navigationItem.rightBarButtonItems = [deleteButton, skinToneButton]
+
+        closeButton.primaryAction = UIAction { [weak self] _ in
+            self?.presentingViewController?.dismiss(animated: true)
+        }
+
+        collectionView.backgroundColor = .clear
+        collectionView.dataSource = dataSource
+        collectionView.isAccessibilityElement = false
+        collectionView.shouldGroupAccessibilityChildren = true
+
+        NSLayoutConstraint.activate([
+            presentSearchButton.leadingAnchor.constraint(equalTo: searchBar.leadingAnchor),
+            presentSearchButton.topAnchor.constraint(equalTo: searchBar.topAnchor),
+            presentSearchButton.trailingAnchor.constraint(equalTo: searchBar.trailingAnchor),
+            presentSearchButton.bottomAnchor.constraint(equalTo: searchBar.bottomAnchor)
+        ])
+
+        viewModel.$emoji
+            .sink { [weak self] in self?.dataSource.apply(
+                $0.snapshot(),
+                animatingDifferences: !UIAccessibility.isReduceMotionEnabled) }
+            .store(in: &cancellables)
+
+        if let currentKeyboardLanguageIdentifier = searchBar.textInputMode?.primaryLanguage {
+            viewModel.locale = Locale(identifier: currentKeyboardLanguageIdentifier)
+        }
+
+        NotificationCenter.default.publisher(for: UITextInputMode.currentInputModeDidChangeNotification)
+            .compactMap { [weak self] _ in self?.searchBar.textInputMode?.primaryLanguage }
+            .compactMap(Locale.init(identifier:))
+            .assign(to: \.locale, on: viewModel)
+            .store(in: &cancellables)
+    }
+
+    override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+        guard let item = dataSource.itemIdentifier(for: indexPath) else { return }
+
+        select(emoji: applyingDefaultSkinTone(emoji: item))
+        viewModel.updateUse(emoji: item)
+    }
+
+    override func collectionView(_ collectionView: UICollectionView,
+                                 contextMenuConfigurationForItemAt indexPath: IndexPath,
+                                 point: CGPoint) -> UIContextMenuConfiguration? {
+        guard let item = dataSource.itemIdentifier(for: indexPath),
+              case let .system(emoji, inFrequentlyUsed) = item,
+              !emoji.skinToneVariations.isEmpty
+        else { return nil }
+
+        return UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { _ in
+            UIMenu(children: ([emoji] + emoji.skinToneVariations).map { skinToneVariation in
+                UIAction(title: skinToneVariation.emoji) { [weak self] _ in
+                    self?.select(emoji: .system(skinToneVariation, inFrequentlyUsed: inFrequentlyUsed))
+                    self?.viewModel.updateUse(emoji: item)
+                }
+            })
+        }
+    }
+}
+
+private extension EmojiPickerViewController {
+    static let headerElementKind = "com.metabolist.metatext.emoji-picker.header"
+
+    static func layout() -> UICollectionViewLayout {
         let itemSize = NSCollectionLayoutSize(
             widthDimension: .absolute(.minimumButtonDimension),
             heightDimension: .absolute(.minimumButtonDimension))
@@ -44,197 +208,25 @@ final class EmojiPickerViewController: UIViewController {
 
         section.boundarySupplementaryItems = [header]
 
-        let layout = UICollectionViewCompositionalLayout(section: section)
+        return UICollectionViewCompositionalLayout(section: section)
-
-        return UICollectionView(frame: .zero, collectionViewLayout: layout)
-    }()
-
-    private lazy var dataSource: UICollectionViewDiffableDataSource<PickerEmoji.Category, PickerEmoji> = {
-        let cellRegistration = UICollectionView.CellRegistration
-        <EmojiCollectionViewCell, PickerEmoji> { [weak self] in
-            $0.emoji = self?.applyingDefaultSkinTone(emoji: $2) ?? $2
-        }
-
-        let headerRegistration = UICollectionView.SupplementaryRegistration
-        <EmojiCategoryHeaderView>(elementKind: "Header") { [weak self] in
-            $0.label.text = self?.dataSource.snapshot().sectionIdentifiers[$2.section].displayName
-        }
-
-        let dataSource = UICollectionViewDiffableDataSource
-        <PickerEmoji.Category, PickerEmoji>(collectionView: collectionView) {
-            $0.dequeueConfiguredReusableCell(using: cellRegistration, for: $1, item: $2)
-        }
-
-        dataSource.supplementaryViewProvider = {
-            $0.dequeueConfiguredReusableSupplementary(using: headerRegistration, for: $2)
-        }
-
-        return dataSource
-    }()
-
-    private lazy var defaultSkinToneSelectionMenu: UIMenu = {
-        let clearSkinToneAction = UIAction(title: SystemEmoji.SkinTone.noneExample) { [weak self] _ in
-            self?.skinToneButton.setTitle(SystemEmoji.SkinTone.noneExample, for: .normal)
-            self?.viewModel.identityContext.appPreferences.defaultEmojiSkinTone = nil
-            self?.reloadVisibleItems()
-        }
-
-        let setSkinToneActions = SystemEmoji.SkinTone.allCases.map { [weak self] skinTone in
-            UIAction(title: skinTone.example) { _ in
-                self?.skinToneButton.setTitle(skinTone.example, for: .normal)
-                self?.viewModel.identityContext.appPreferences.defaultEmojiSkinTone = skinTone
-                self?.reloadVisibleItems()
-            }
-        }
-
-        return UIMenu(
-            title: NSLocalizedString("emoji.default-skin-tone", comment: ""),
-            children: [clearSkinToneAction] + setSkinToneActions)
-    }()
-
-    init(viewModel: EmojiPickerViewModel,
-         selectionAction: @escaping (PickerEmoji) -> Void,
-         dismissAction: @escaping () -> Void) {
-        self.viewModel = viewModel
-        self.selectionAction = selectionAction
-        self.dismissAction = dismissAction
-
-        super.init(nibName: nil, bundle: nil)
     }
 
-    @available(*, unavailable)
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
-    }
-
-    // swiftlint:disable:next function_body_length
-    override func viewDidLoad() {
-        super.viewDidLoad()
-
-        view.addSubview(searchBar)
-        searchBar.translatesAutoresizingMaskIntoConstraints = false
-        searchBar.searchBarStyle = .minimal
-        searchBar.placeholder = NSLocalizedString("emoji.search", comment: "")
-        searchBar.searchTextField.addAction(
-            UIAction { [weak self] _ in
-                self?.viewModel.query = self?.searchBar.text ?? ""
-                self?.collectionView.setContentOffset(.zero, animated: false)
-            },
-            for: .editingChanged)
-
-        view.addSubview(skinToneButton)
-        skinToneButton.translatesAutoresizingMaskIntoConstraints = false
-        skinToneButton.titleLabel?.adjustsFontSizeToFitWidth = true
-        skinToneButton.setTitle(
-            viewModel.identityContext.appPreferences.defaultEmojiSkinTone?.example ?? SystemEmoji.SkinTone.noneExample,
-            for: .normal)
-        skinToneButton.showsMenuAsPrimaryAction = true
-        skinToneButton.menu = defaultSkinToneSelectionMenu
-        skinToneButton.accessibilityLabel =
-            NSLocalizedString("emoji.default-skin-tone-button.accessibility-label", comment: "")
-
-        view.addSubview(collectionView)
-        collectionView.translatesAutoresizingMaskIntoConstraints = false
-        collectionView.backgroundColor = .clear
-        collectionView.dataSource = dataSource
-        collectionView.delegate = self
-        collectionView.isAccessibilityElement = false
-        collectionView.shouldGroupAccessibilityChildren = true
-
-        NSLayoutConstraint.activate([
-            searchBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
-            searchBar.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
-            skinToneButton.leadingAnchor.constraint(equalTo: searchBar.trailingAnchor, constant: .defaultSpacing),
-            skinToneButton.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
-            skinToneButton.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
-            skinToneButton.bottomAnchor.constraint(equalTo: searchBar.bottomAnchor),
-            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
-            collectionView.topAnchor.constraint(equalTo: searchBar.bottomAnchor),
-            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
-            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
-        ])
-
-        viewModel.$emoji
-            .sink { [weak self] in self?.dataSource.apply(
-                $0.snapshot(),
-                animatingDifferences: !UIAccessibility.isReduceMotionEnabled) }
-            .store(in: &cancellables)
-
-        if let currentKeyboardLanguageIdentifier = searchBar.textInputMode?.primaryLanguage {
-            viewModel.locale = Locale(identifier: currentKeyboardLanguageIdentifier)
-        }
-
-        NotificationCenter.default.publisher(for: UITextInputMode.currentInputModeDidChangeNotification)
-            .compactMap { [weak self] _ in self?.searchBar.textInputMode?.primaryLanguage }
-            .compactMap(Locale.init(identifier:))
-            .assign(to: \.locale, on: viewModel)
-            .store(in: &cancellables)
-    }
-
-    override func viewDidAppear(_ animated: Bool) {
-        super.viewDidAppear(animated)
-
-        guard let containerView = popoverPresentationController?.containerView else { return }
-
-        // gets the popover presentation controller's built-in visual effect view to actually show
-        func setClear(view: UIView) {
-            view.backgroundColor = .clear
-
-            if view == self.view {
-                return
-            }
-
-            for view in view.subviews {
-                setClear(view: view)
-            }
-        }
-
-        setClear(view: containerView)
-    }
-
-    override func viewDidDisappear(_ animated: Bool) {
-        super.viewDidDisappear(animated)
-
-        dismissAction()
-    }
-}
-
-extension EmojiPickerViewController: UICollectionViewDelegate {
-    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
-        guard let item = dataSource.itemIdentifier(for: indexPath) else { return }
-
-        select(emoji: applyingDefaultSkinTone(emoji: item))
-        viewModel.updateUse(emoji: item)
-    }
-
-    func collectionView(_ collectionView: UICollectionView,
-                        contextMenuConfigurationForItemAt indexPath: IndexPath,
-                        point: CGPoint) -> UIContextMenuConfiguration? {
-        guard let item = dataSource.itemIdentifier(for: indexPath),
-              case let .system(emoji, inFrequentlyUsed) = item,
-              !emoji.skinToneVariations.isEmpty
-        else { return nil }
-
-        return UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { _ in
-            UIMenu(children: ([emoji] + emoji.skinToneVariations).map { skinToneVariation in
-                UIAction(title: skinToneVariation.emoji) { [weak self] _ in
-                    self?.select(emoji: .system(skinToneVariation, inFrequentlyUsed: inFrequentlyUsed))
-                    self?.viewModel.updateUse(emoji: item)
-                }
-            })
-        }
-    }
-}
-
-private extension EmojiPickerViewController {
-    static let headerElementKind = "com.metabolist.metatext.emoji-picker.header"
-
     func select(emoji: PickerEmoji) {
-        selectionAction(emoji)
+        selectionAction(self, emoji)
 
         UISelectionFeedbackGenerator().selectionChanged()
     }
 
+    func presentSearch() {
+        guard let navigationController = self.navigationController else { return }
+
+        presentSearchButton.isHidden = true
+        navigationItem.leftBarButtonItem = closeButton
+        navigationItem.rightBarButtonItems = [self.skinToneButton]
+        collectionView.backgroundView = UIVisualEffectView(effect: UIBlurEffect(style: .systemChromeMaterial))
+        searchPresentationAction(self, navigationController)
+    }
+
     func reloadVisibleItems() {
         var snapshot = dataSource.snapshot()
         let visibleItems = collectionView.indexPathsForVisibleItems.compactMap(dataSource.itemIdentifier(for:))

View Controllers/NewStatusViewController.swift

@@ -263,8 +263,14 @@ private extension NewStatusViewController {
         viewModel.$alertItem
             .compactMap { $0 }
             .sink { [weak self] alertItem in
-                self?.dismissEmojiPickerIfPresented {
+                guard let self = self else { return }
-                    self?.present(alertItem: alertItem)
+
+                if self.presentedViewController != nil {
+                    self.dismiss(animated: true) {
+                        self.present(alertItem: alertItem)
+                    }
+                } else {
+                    self.present(alertItem: alertItem)
                 }
             }
             .store(in: &cancellables)
@@ -290,9 +296,7 @@ private extension NewStatusViewController {
 
         picker.modalPresentationStyle = .overFullScreen
         picker.delegate = self
-        dismissEmojiPickerIfPresented {
+        present(picker, animated: true)
-            self.present(picker, animated: true)
-        }
     }
 
     #if !IS_SHARE_EXTENSION
@@ -343,9 +347,7 @@ private extension NewStatusViewController {
             picker.mediaTypes = [UTType.image.description]
         }
 
-        dismissEmojiPickerIfPresented {
+        present(picker, animated: true)
-            self.present(picker, animated: true)
-        }
     }
     #endif
 
@@ -367,57 +369,51 @@ private extension NewStatusViewController {
         documentPickerController.delegate = self
         documentPickerController.allowsMultipleSelection = false
         documentPickerController.modalPresentationStyle = .overFullScreen
-        dismissEmojiPickerIfPresented {
+        present(documentPickerController, animated: true)
-            self.present(documentPickerController, animated: true)
-        }
     }
 
     func presentEmojiPicker(tag: Int) {
-        if dismissEmojiPickerIfPresented() {
-            return
-        }
-
         guard let fromView = view.viewWithTag(tag) else { return }
 
-        let emojiPickerViewModel = EmojiPickerViewModel(identityContext: viewModel.identityContext)
+        if fromView.inputView == nil {
+            let emojiPickerViewModel = EmojiPickerViewModel(identityContext: viewModel.identityContext)
 
-        emojiPickerViewModel.$alertItem.assign(to: \.alertItem, on: viewModel).store(in: &cancellables)
+            emojiPickerViewModel.$alertItem.assign(to: \.alertItem, on: viewModel).store(in: &cancellables)
 
-        let emojiPickerController = EmojiPickerViewController(viewModel: emojiPickerViewModel) {
+            let emojiPickerController =
-            guard let textInput = fromView as? UITextInput else { return }
+                EmojiPickerViewController(viewModel: emojiPickerViewModel) { [weak self] picker, emoji in
+                    guard let textInput = fromView as? UITextInput,
+                          let selectedTextRange = textInput.selectedTextRange
+                    else { return }
 
-            if let selectedTextRange = textInput.selectedTextRange {
+                    textInput.replace(selectedTextRange, withText: emoji.escaped.appending(" "))
-                textInput.replace(selectedTextRange, withText: $0.escaped.appending(" "))
-            }
-        } dismissAction: {
-            fromView.becomeFirstResponder()
-        }
 
-        emojiPickerController.searchBar.inputAccessoryView = fromView.inputAccessoryView
+                    if (self?.presentedViewController as? UINavigationController)?.viewControllers.first === picker {
-        emojiPickerController.preferredContentSize = .init(
+                        self?.dismiss(animated: true)
-            width: view.readableContentGuide.layoutFrame.width,
+                    }
-            height: view.frame.height)
+                } deletionAction: { _ in
-        emojiPickerController.modalPresentationStyle = .popover
+                    (fromView as? UITextInput)?.deleteBackward()
-        emojiPickerController.popoverPresentationController?.delegate = self
+                } searchPresentationAction: { [weak self] picker, navigation in
-        emojiPickerController.popoverPresentationController?.sourceView = fromView
+                    (fromView as? UITextView)?.inputView = nil
-        emojiPickerController.popoverPresentationController?.sourceRect =
+                    (fromView as? UITextField)?.inputView = nil
-            .init(origin: .init(x: fromView.bounds.midX, y: fromView.bounds.maxY), size: .zero)
+                    fromView.reloadInputViews()
-        emojiPickerController.popoverPresentationController?.backgroundColor = .clear
 
-        present(emojiPickerController, animated: true)
+                    navigation.removeFromParent()
-    }
+                    navigation.preferredContentSize = CGSize(width: 100, height: 100)
+                    picker.searchBar.becomeFirstResponder()
+                    self?.present(navigation, animated: true)
+                }
 
-    @discardableResult
+            let pickerNavigation = UINavigationController(rootViewController: emojiPickerController)
-    func dismissEmojiPickerIfPresented(completion: (() -> Void)? = nil) -> Bool {
-        let emojiPickerPresented = presentedViewController is EmojiPickerViewController
 
-        if emojiPickerPresented {
+            (fromView as? UITextView)?.inputView = pickerNavigation.view
-            dismiss(animated: true, completion: completion)
+            (fromView as? UITextField)?.inputView = pickerNavigation.view
         } else {
-            completion?()
+            (fromView as? UITextView)?.inputView = nil
+            (fromView as? UITextField)?.inputView = nil
         }
 
-        return emojiPickerPresented
+        fromView.reloadInputViews()
     }
 
     func presentAttachmentEditor(attachmentViewModel: AttachmentViewModel, compositionViewModel: CompositionViewModel) {
@@ -426,9 +422,7 @@ private extension NewStatusViewController {
         let navigationController = UINavigationController(rootViewController: editAttachmentViewController)
 
         navigationController.modalPresentationStyle = .overFullScreen
-        dismissEmojiPickerIfPresented {
+        present(navigationController, animated: true)
-            self.present(navigationController, animated: true)
-        }
     }
 
     func changeIdentity(_ identity: Identity) {