room-history: Make text reactions smaller

data/resources/style.css: Added class for font on applying reaction
src/session/content/room_history/message_row/reaction.rs: Added check if reaction contains text or not
src/utils.rs: Added regex function for general purpose

Even if it's their primary use in clients is to send emoji reactions, reactions can actually contain any text.
We have to make sure that we ellipsize long texts, and we need to fix the font as it's currently too big.

To fix this issue, I used regex function to check whether reaction contains text or not.

https://gitlab.gnome.org/GNOME/fractal/-/issues/1044

Part-of: <https://gitlab.gnome.org/GNOME/fractal/-/merge_requests/1134>

data/resources/style.css

@@ -444,6 +444,9 @@ message-reactions .toggle:checked {
 }
 
 message-reactions .reaction-key {
+  font-size: 0.8em;
+}
+message-reactions .reaction-key.emoji{
   font-size: 1.1em;
 }
 

data/resources/ui/content-message-reaction.ui

@@ -12,6 +12,8 @@
           <object class="GtkBox">
             <child>
               <object class="GtkLabel" id="reaction_key">
+                <property name="max-width-chars">23</property>
+                <property name="ellipsize">end</property>
                 <style>
                   <class name="reaction-key"/>
                 </style>

src/session/content/room_history/message_row/reaction.rs

@@ -1,7 +1,7 @@
 use adw::subclass::prelude::*;
 use gtk::{glib, prelude::*, CompositeTemplate};
 
-use crate::session::room::ReactionGroup;
+use crate::{session::room::ReactionGroup, utils::EMOJI_REGEX};
 
 mod imp {
     use glib::subclass::InitializingObject;
@@ -95,6 +95,13 @@ impl MessageReaction {
         let priv_ = self.imp();
         let key = group.key();
         priv_.reaction_key.set_label(key);
+
+        if EMOJI_REGEX.is_match(key) {
+            priv_.reaction_key.add_css_class("emoji");
+        } else {
+            priv_.reaction_key.remove_css_class("emoji");
+        }
+
         priv_
             .button
             .set_action_target_value(Some(&key.to_variant()));

src/session/content/room_history/message_row/text.rs

@@ -10,30 +10,14 @@ use matrix_sdk::ruma::{
     matrix_uri::MatrixId,
     MatrixToUri, MatrixUri,
 };
-use once_cell::sync::Lazy;
-use regex::Regex;
 use sourceview::prelude::*;
 
 use crate::{
     components::{LabelWithWidgets, Pill, DEFAULT_PLACEHOLDER},
     session::{room::Member, Room, UserExt},
+    utils::EMOJI_REGEX,
 };
 
-static EMOJI_REGEX: Lazy<Regex> = Lazy::new(|| {
-    Regex::new(
-        r"(?x)
-        ^
-        [\p{White_Space}\p{Emoji_Component}]*
-        [\p{Emoji}--\p{Decimal_Number}]+
-        [\p{White_Space}\p{Emoji}\p{Emoji_Component}--\p{Decimal_Number}]*
-        $
-        # That string is made of at least one emoji, except digits, possibly more,
-        # possibly with modifiers, possibly with spaces, but nothing else
-        ",
-    )
-    .unwrap()
-});
-
 enum WithMentions<'a> {
     Yes(&'a Room),
     No,

src/utils.rs

@@ -1,5 +1,3 @@
-use sourceview::prelude::BufferExt;
-
 /// Spawn a future on the default `MainContext`
 ///
 /// This was taken from `gtk-macros`
@@ -180,6 +178,9 @@ use matrix_sdk::ruma::{
     events::room::MediaSource, EventId, OwnedEventId, OwnedTransactionId, TransactionId, UInt,
 };
 use mime::Mime;
+use once_cell::sync::Lazy;
+use regex::Regex;
+use sourceview::prelude::*;
 
 // Returns an expression that is the and’ed result of the given boolean
 // expressions.
@@ -462,3 +463,19 @@ pub async fn check_if_reachable(hostname: &impl AsRef<str>) -> bool {
         }
     }
 }
+
+/// Regex that matches a string that only includes emojis.
+pub static EMOJI_REGEX: Lazy<Regex> = Lazy::new(|| {
+    Regex::new(
+        r"(?x)
+        ^
+        [\p{White_Space}\p{Emoji_Component}]*
+        [\p{Emoji}--\p{Decimal_Number}]+
+        [\p{White_Space}\p{Emoji}\p{Emoji_Component}--\p{Decimal_Number}]*
+        $
+        # That string is made of at least one emoji, except digits, possibly more,
+        # possibly with modifiers, possibly with spaces, but nothing else
+        ",
+    )
+    .unwrap()
+});