Make emoji picker use the grid view

resources/qml/Avatar.qml

@@ -60,7 +60,13 @@ AbstractButton {
         smooth: true
         sourceSize.width: avatar.width * Screen.devicePixelRatio
         sourceSize.height: avatar.height * Screen.devicePixelRatio
-        source: avatar.url ? (avatar.url + "?radius=" + (Settings.avatarCircles ? 100 : 25) + ((avatar.crop) ? "" : "&scale")) : ""
+        source: if (avatar.url.startsWith('image://')) {
+            return avatar.url + "?radius=" + (Settings.avatarCircles ? 100 : 25) + ((avatar.crop) ? "" : "&scale");
+        } else if (avatar.url.startsWith(':/')) {
+            return "image://colorimage/" + avatar.url + "?" + textColor;
+        } else {
+            return "";
+        }
 
     }
 

resources/qml/MessageInput.qml

@@ -441,6 +441,7 @@ Rectangle {
                 id: stickerPopup
 
                 colors: Nheko.colors
+                emoji: false
             }
 
         }
@@ -456,10 +457,17 @@ Rectangle {
             image: ":/icons/icons/ui/smile.svg"
             ToolTip.visible: hovered
             ToolTip.text: qsTr("Emoji")
-            onClicked: emojiPopup.visible ? emojiPopup.close() : emojiPopup.show(emojiButton, function(emoji) {
+            onClicked: emojiPopup2.visible ? emojiPopup2.close() : emojiPopup2.show(emojiButton, room.roomId, function(plaintext, markdown) {
-                messageInput.insert(messageInput.cursorPosition, emoji);
+                messageInput.insert(messageInput.cursorPosition, markdown);
                 TimelineManager.focusMessageInput();
             })
+
+            StickerPicker {
+                id: emojiPopup2
+
+                colors: Nheko.colors
+                emoji: true
+            }
         }
 
         ImageButton {

resources/qml/emoji/StickerPicker.qml

@@ -17,13 +17,14 @@ Menu {
     property var colors
     property string roomid
     property alias model: gridView.model
+    required property bool emoji
     property var textArea
     property real highlightHue: Nheko.colors.highlight.hslHue
     property real highlightSat: Nheko.colors.highlight.hslSaturation
     property real highlightLight: Nheko.colors.highlight.hslLightness
-    readonly property int stickerDim: 128
+    readonly property int stickerDim: emoji ? 48 : 128
-    readonly property int stickerDimPad: 128 + Nheko.paddingSmall
+    readonly property int stickerDimPad: stickerDim + Nheko.paddingSmall
-    readonly property int stickersPerRow: 3
+    readonly property int stickersPerRow: emoji ? 7 : 3
     readonly property int sidebarAvatarSize: 24
 
     function show(showAt, roomid_, callback) {
@@ -110,10 +111,10 @@ Menu {
             ListView {
                 id: gridView
 
-                model: roomid ? TimelineManager.completerFor("stickergrid", roomid) : null
+                model: roomid ? TimelineManager.completerFor(stickerPopup.emoji ? "emojigrid" : "stickergrid", roomid) : null
                 Layout.row: 1
                 Layout.column: 1
-                Layout.preferredHeight: cellHeight * 3.5
+                Layout.preferredHeight: cellHeight * (stickersPerRow + 0.5)
                 Layout.preferredWidth: stickersPerRow * stickerDimPad + 20 - Nheko.paddingSmall
                 property int cellHeight: stickerDimPad
                 boundsBehavior: Flickable.StopAtBounds
@@ -157,24 +158,59 @@ Menu {
                         model: row
 
                         delegate: AbstractButton {
+                            id: del
+
+                            required property var modelData
+
                             width: stickerDim
                             height: stickerDim
                             hoverEnabled: true
-                            ToolTip.text: ":" + modelData.shortcode + ": - " + modelData.body
+                            ToolTip.text: ":" + modelData.shortcode + ": - " + (modelData.unicode ? model.unicodeName : modelData.body)
                             ToolTip.visible: hovered
                             // TODO: maybe add favorites at some point?
                             onClicked: {
-                                console.debug("Picked " + modelData.descriptor);
+                                console.debug("Picked " + modelData);
                                 stickerPopup.close();
+                                if (!stickerPopup.emoji) {
+                                    // return descriptor to calculate sticker to send
                                     callback(modelData.descriptor);
+                                } else if (modelData.unicode) {
+                                    // return the emoji unicode as both plain text and markdown
+                                    callback(modelData.unicode, modelData.unicode);
+                                } else {
+                                    // return the emoji url as plain text and a markdown link as markdown
+                                    callback(modelData.url, modelData.markdown);
+                                }
                             }
 
-                            contentItem: Image {
+                            contentItem: DelegateChooser {
+                                roleValue: del.modelData.unicode != undefined
+
+                                DelegateChoice {
+                                    roleValue: true
+
+                                    Text {
+                                        width: stickerDim
+                                        height: stickerDim
+                                        horizontalAlignment: Text.AlignHCenter
+                                        verticalAlignment: Text.AlignVCenter
+                                        font.family: Settings.emojiFont
+                                        font.pixelSize: 36
+                                        text: del.modelData.unicode.replace('\ufe0f', '')
+                                        color: Nheko.colors.text
+                                    }
+                                }
+
+                                DelegateChoice {
+                                    roleValue: false
+                                    Image {
                                         height: stickerDim
                                         width: stickerDim
-                                source: modelData.url.replace("mxc://", "image://MxcImage/") + "?scale"
+                                        source: del.modelData.url.replace("mxc://", "image://MxcImage/") + "?scale"
                                         fillMode: Image.PreserveAspectFit
                                     }
+                                }
+                            }
 
                             background: Rectangle {
                                 anchors.fill: parent

src/GridImagePackModel.cpp

@@ -4,24 +4,113 @@
 
 #include "GridImagePackModel.h"
 
+#include <QCoreApplication>
 #include <QTextBoundaryFinder>
 
 #include <algorithm>
 
 #include "Cache.h"
 #include "Cache_p.h"
+#include "emoji/Provider.h"
 
 Q_DECLARE_METATYPE(StickerImage)
+Q_DECLARE_METATYPE(TextEmoji)
 Q_DECLARE_METATYPE(SectionDescription)
 Q_DECLARE_METATYPE(QList<SectionDescription>)
 
+static QString
+categoryToName(emoji::Emoji::Category cat)
+{
+    switch (cat) {
+    case emoji::Emoji::Category::People:
+        return QCoreApplication::translate("emoji-catagory", "People");
+    case emoji::Emoji::Category::Nature:
+        return QCoreApplication::translate("emoji-catagory", "Nature");
+    case emoji::Emoji::Category::Food:
+        return QCoreApplication::translate("emoji-catagory", "Food");
+    case emoji::Emoji::Category::Activity:
+        return QCoreApplication::translate("emoji-catagory", "Activity");
+    case emoji::Emoji::Category::Travel:
+        return QCoreApplication::translate("emoji-catagory", "Travel");
+    case emoji::Emoji::Category::Objects:
+        return QCoreApplication::translate("emoji-catagory", "Objects");
+    case emoji::Emoji::Category::Symbols:
+        return QCoreApplication::translate("emoji-catagory", "Symbols");
+    case emoji::Emoji::Category::Flags:
+        return QCoreApplication::translate("emoji-catagory", "Flags");
+    default:
+        return "";
+    }
+}
+
+static QString
+categoryToIcon(emoji::Emoji::Category cat)
+{
+    switch (cat) {
+    case emoji::Emoji::Category::People:
+        return QStringLiteral(":/icons/icons/emoji-categories/people.svg");
+    case emoji::Emoji::Category::Nature:
+        return QStringLiteral(":/icons/icons/emoji-categories/nature.svg");
+    case emoji::Emoji::Category::Food:
+        return QStringLiteral(":/icons/icons/emoji-categories/foods.svg");
+    case emoji::Emoji::Category::Activity:
+        return QStringLiteral(":/icons/icons/emoji-categories/activity.svg");
+    case emoji::Emoji::Category::Travel:
+        return QStringLiteral(":/icons/icons/emoji-categories/travel.svg");
+    case emoji::Emoji::Category::Objects:
+        return QStringLiteral(":/icons/icons/emoji-categories/objects.svg");
+    case emoji::Emoji::Category::Symbols:
+        return QStringLiteral(":/icons/icons/emoji-categories/symbols.svg");
+    case emoji::Emoji::Category::Flags:
+        return QStringLiteral(":/icons/icons/emoji-categories/flags.svg");
+    default:
+        return "";
+    }
+}
+
 GridImagePackModel::GridImagePackModel(const std::string &roomId, bool stickers, QObject *parent)
   : QAbstractListModel(parent)
   , room_id(roomId)
+  , columns(stickers ? 3 : 7)
 {
     [[maybe_unused]] static auto id  = qRegisterMetaType<StickerImage>();
-    [[maybe_unused]] static auto id2 = qRegisterMetaType<SectionDescription>();
+    [[maybe_unused]] static auto id2 = qRegisterMetaType<TextEmoji>();
-    [[maybe_unused]] static auto id3 = qRegisterMetaType<QList<SectionDescription>>();
+    [[maybe_unused]] static auto id3 = qRegisterMetaType<SectionDescription>();
+    [[maybe_unused]] static auto id4 = qRegisterMetaType<QList<SectionDescription>>();
+
+    if (!stickers) {
+        for (const auto &category : {
+               emoji::Emoji::Category::People,
+               emoji::Emoji::Category::Nature,
+               emoji::Emoji::Category::Food,
+               emoji::Emoji::Category::Activity,
+               emoji::Emoji::Category::Travel,
+               emoji::Emoji::Category::Objects,
+               emoji::Emoji::Category::Symbols,
+               emoji::Emoji::Category::Flags,
+             }) {
+            PackDesc newPack{};
+            newPack.packname   = categoryToName(category);
+            newPack.packavatar = categoryToIcon(category);
+
+            auto emojisInCategory = std::ranges::equal_range(
+              emoji::Provider::emoji, category, {}, &emoji::Emoji::category);
+            newPack.emojis.reserve(emojisInCategory.size());
+
+            for (const auto &e : emojisInCategory) {
+                newPack.emojis.push_back(TextEmoji{.unicode     = e.unicode(),
+                                                   .unicodeName = e.unicodeName(),
+                                                   .shortcode   = e.shortName()});
+            }
+
+            size_t packRowCount =
+              (newPack.emojis.size() / columns) + (newPack.emojis.size() % columns ? 1 : 0);
+            newPack.firstRow = rowToPack.size();
+            for (size_t i = 0; i < packRowCount; i++)
+                rowToPack.push_back(packs.size());
+            packs.push_back(std::move(newPack));
+        }
+    }
 
     auto originalPacks = cache::client()->getImagePacks(room_id, stickers);
 
@@ -63,6 +152,25 @@ GridImagePackModel::GridImagePackModel(const std::string &roomId, bool stickers,
 
     std::uint32_t packIndex = 0;
     for (const auto &pack : packs) {
+        std::uint32_t emojiIndex = 0;
+        for (const auto &emoji : pack.emojis) {
+            std::pair<std::uint32_t, std::uint32_t> key{packIndex, emojiIndex};
+
+            QString string1 = emoji.shortcode.toCaseFolded();
+            QString string2 = emoji.unicodeName.toCaseFolded();
+
+            if (!string1.isEmpty()) {
+                trie_.insert<ElementRank::first>(string1.toUcs4(), key);
+                insertParts(string1, key);
+            }
+            if (!string2.isEmpty()) {
+                trie_.insert<ElementRank::first>(string2.toUcs4(), key);
+                insertParts(string2, key);
+            }
+
+            emojiIndex++;
+        }
+
         std::uint32_t imgIndex = 0;
         for (const auto &img : pack.images) {
             std::pair<std::uint32_t, std::uint32_t> key{packIndex, imgIndex};
@@ -112,6 +220,7 @@ GridImagePackModel::data(const QModelIndex &index, int role) const
                 return nameFromPack(pack);
             case Roles::Row: {
                 std::size_t offset = static_cast<std::size_t>(index.row()) - pack.firstRow;
+                if (pack.emojis.empty()) {
                     QList<StickerImage> imgs;
                     auto endOffset = std::min((offset + 1) * columns, pack.images.size());
                     for (std::size_t img = offset * columns; img < endOffset; img++) {
@@ -126,6 +235,13 @@ GridImagePackModel::data(const QModelIndex &index, int role) const
                                         }});
                     }
                     return QVariant::fromValue(imgs);
+                } else {
+                    auto endOffset = std::min((offset + 1) * columns, pack.emojis.size());
+                    QList<TextEmoji> imgs(pack.emojis.begin() + offset * columns,
+                                          pack.emojis.begin() + endOffset);
+
+                    return QVariant::fromValue(imgs);
+                }
             }
             default:
                 return {};
@@ -142,6 +258,7 @@ GridImagePackModel::data(const QModelIndex &index, int role) const
             case Roles::PackName:
                 return nameFromPack(pack);
             case Roles::Row: {
+                if (pack.emojis.empty()) {
                     QList<StickerImage> imgs;
                     for (auto img = firstIndex;
                          imgs.size() < columns && img < currentSearchResult.size() &&
@@ -158,6 +275,16 @@ GridImagePackModel::data(const QModelIndex &index, int role) const
                                         }});
                     }
                     return QVariant::fromValue(imgs);
+                } else {
+                    QList<TextEmoji> emojis;
+                    for (auto emoji = firstIndex;
+                         emojis.size() < columns && emoji < currentSearchResult.size() &&
+                         currentSearchResult[emoji].first == firstEntry.first;
+                         emoji++) {
+                        emojis.push_back(pack.emojis.at(currentSearchResult[emoji].second));
+                    }
+                    return QVariant::fromValue(emojis);
+                }
             }
             default:
                 return {};

src/GridImagePackModel.h

@@ -20,6 +20,7 @@ struct StickerImage
     Q_PROPERTY(QString shortcode MEMBER shortcode CONSTANT)
     Q_PROPERTY(QString body MEMBER body CONSTANT)
     Q_PROPERTY(QStringList descriptor READ descriptor CONSTANT)
+    Q_PROPERTY(QString markdown READ markdown CONSTANT)
 
 public:
     QStringList descriptor() const
@@ -34,6 +35,13 @@ public:
             return {};
     }
 
+    QString markdown() const
+    {
+        return QStringLiteral(
+                 "<img data-mx-emoticon height=\"32\" src=\"%1\" alt=\"%2\" title=\"%2\">")
+          .arg(url.toHtmlEscaped(), !body.isEmpty() ? body : shortcode);
+    }
+
     QString url;
     QString shortcode;
     QString body;
@@ -54,6 +62,19 @@ public:
     int firstRowWith = 0;
 };
 
+struct TextEmoji
+{
+    Q_GADGET
+    Q_PROPERTY(QString unicode MEMBER unicode CONSTANT)
+    Q_PROPERTY(QString unicodeName MEMBER unicodeName CONSTANT)
+    Q_PROPERTY(QString shortcode MEMBER shortcode CONSTANT)
+
+public:
+    QString unicode;
+    QString unicodeName;
+    QString shortcode;
+};
+
 class GridImagePackModel final : public QAbstractListModel
 {
     Q_OBJECT
@@ -90,6 +111,7 @@ private:
         std::string room_id, state_key;
 
         std::vector<std::pair<mtx::events::msc2545::PackImage, QString>> images;
+        std::vector<TextEmoji> emojis;
         std::size_t firstRow;
     };
 

src/timeline/TimelineViewManager.cpp

@@ -478,6 +478,9 @@ TimelineViewManager::completerFor(const QString &completerName, const QString &r
         auto proxy        = new CompletionProxyModel(stickerModel, 1, static_cast<size_t>(-1) / 4);
         stickerModel->setParent(proxy);
         return proxy;
+    } else if (completerName == QLatin1String("emojigrid")) {
+        auto stickerModel = new GridImagePackModel(roomId.toStdString(), false);
+        return stickerModel;
     } else if (completerName == QLatin1String("stickergrid")) {
         auto stickerModel = new GridImagePackModel(roomId.toStdString(), true);
         return stickerModel;