Display the reaction picker as one horizontal row in both clients

tools/chatgui-android/app/src/main/java/com/utun/chat/ui/components/PollUi.kt

@@ -1,6 +1,7 @@
 package com.utun.chat.ui.components
 
 import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
@@ -157,8 +158,12 @@ fun MessageReactions(message: Message, catalog: List<ReactionState>, onReact: (M
     }
     }
     if (picker) AlertDialog(onDismissRequest = { picker = false }, title = { Text(stringResource(R.string.poll_react)) },
-        text = { FlowRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+        text = { Row(Modifier.fillMaxWidth().horizontalScroll(rememberScrollState()), horizontalArrangement = Arrangement.spacedBy(4.dp)) {
-            for (reaction in catalog) TextButton(onClick = { onReact(message, reaction.id); picker = false }) { Text(reaction.emoji) }
+            for (reaction in catalog) IconToggleButton(checked = message.feedback?.reactions.orEmpty().any { it.mine && it.id == reaction.id },
+                onCheckedChange = {
+                    LogManager.addLog("DEBUG", "POLL", "reaction chosen message=${message.messageId} emoji=${reaction.id}")
+                    onReact(message, reaction.id); picker = false
+                }) { Text(reaction.emoji) }
         } },
         confirmButton = { TextButton(onClick = { onReact(message, null); picker = false }) {
             Text(stringResource(R.string.poll_clear_reactions))

tools/chatgui/src/messagefeedback.cpp

@@ -20,6 +20,10 @@
 #include <QJsonArray>
 #include <QMenu>
 #include <QCursor>
+#include <QWidgetAction>
+#include <QScrollArea>
+#include <QHBoxLayout>
+#include <QToolButton>
 #include <cstring>
 
 extern "C" {
@@ -32,14 +36,22 @@ void MessageList::addReactionActions(QMenu* menu, const QString& channel, const
     QSet<int> mine;
     for (const auto& value : m_feedback.value(messageId).value("reactions").toArray())
         if (value.toObject().value("mine").toBool()) mine.insert(value.toObject().value("id").toInt());
+    auto* action = new QWidgetAction(menu); auto* scroll = new QScrollArea(menu); auto* content = new QWidget;
+    auto* row = new QHBoxLayout(content); row->setContentsMargins(4, 4, 4, 4); row->setSpacing(2);
+    scroll->setHorizontalScrollBarPolicy(Qt::ScrollBarAsNeeded); scroll->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    scroll->setFrameShape(QFrame::NoFrame); scroll->setFixedSize(qMin(560, qMax(240, m_view->viewport()->width() - 32)), 64);
     for (unsigned i = 0; i < CHAT_REACTION_COUNT; i++) {
-        auto* action = menu->addAction(QString::fromUtf8(chat_reaction_emoji(i)));
+        auto* button = new QToolButton(content); button->setText(QString::fromUtf8(chat_reaction_emoji(i)));
-        action->setCheckable(true); action->setChecked(mine.contains(i));
+        button->setCheckable(true); button->setChecked(mine.contains(i)); button->setFixedSize(36, 36);
-        connect(action, &QAction::triggered, this, [this, channel, messageId, i]() {
+        QFont font = button->font(); font.setPixelSize(22); button->setFont(font);
+        connect(button, &QToolButton::clicked, this, [this, menu, channel, messageId, i]() {
             GUI_DEBUG("reaction: chosen ch=%s message=%s emoji=%u", qPrintable(channel), qPrintable(messageId), i);
+            menu->close();
             sendFeedback({{"cmd", "react"}, {"ch", channel}, {"message_id", messageId}, {"emoji", (int)i}});
         });
+        row->addWidget(button);
     }
+    scroll->setWidget(content); action->setDefaultWidget(scroll); menu->addAction(action);
 }
 
 void MessageList::requestReaction(const QModelIndex& index, int emoji) {