feat(status): reaction posting (#1145)

Author: GeopJr

data/style.css

@@ -766,3 +766,7 @@ popover.mini-profile > contents {
 list.uniform-border-color row {
 	border-bottom-color: @borders;
 }
+
+.emoji-reaction-expander > box > list, .emoji-reaction-expander > box > list > row  {
+	border-radius: inherit;
+}

data/ui/widgets/announcement.ui

@@ -27,7 +27,7 @@
           </object>
         </child>
         <child>
-          <object class="GtkBox">
+          <object class="GtkBox" id="mainbox">
             <property name="orientation">vertical</property>
             <child>
               <object class="GtkBox">
@@ -140,17 +140,6 @@
                 </child>
               </object>
             </child>
-
-            <child>
-              <object class="GtkFlowBox" id="emoji_reactions">
-                <property name="margin-top">16</property>
-                <property name="visible">0</property>
-                <property name="column_spacing">6</property>
-                <property name="row_spacing">6</property>
-                <!-- Lower values leave space between items -->
-                <property name="max_children_per_line">100</property>
-              </object>
-            </child>
           </object>
         </child>
       </object>
@@ -159,4 +148,4 @@
       <class name="ttl-post" />
     </style>
   </template>
-</interface>
+</interface>

src/API/EmojiReaction.vala

@@ -1,6 +1,26 @@
-public class Tuba.API.EmojiReaction : Entity {
+public class Tuba.API.EmojiReaction : Entity, Widgetizable {
 	public int64 count { get; set; default = 0;}
 	public string? url { get; set; default = null; }
 	public string? name { get; set; default = null; }
 	public bool me { get; set; default = false; }
+	public Gee.ArrayList<API.Account>? accounts { get; set; default = null; }
+	public Gee.ArrayList<string>? account_ids { get; set; default = null; }
+
+	public override Type deserialize_array_type (string prop) {
+		switch (prop) {
+			case "accounts":
+				return typeof (API.Account);
+			case "account-ids":
+				return Type.STRING;
+		}
+
+		return base.deserialize_array_type (prop);
+	}
+
+	public override Gtk.Widget to_widget () {
+		return new Widgets.EmojiReactionAccounts (this);
+	}
+
+	public override void open () {
+	}
 }

src/API/Instance.vala

@@ -186,6 +186,16 @@ public class Tuba.API.Instance : Entity {
 		}
 	}
 
+	public int64 compat_status_reactions_max {
+		get {
+			if (configuration != null && configuration.reactions != null) {
+				return configuration.reactions.max_reactions;
+			}
+
+			return 0;
+		}
+	}
+
 	public static API.Instance from (Json.Node node) throws Error {
 		return Entity.from_json (typeof (API.Instance), node) as API.Instance;
 	}

src/API/Notification.vala

@@ -62,6 +62,8 @@ public class Tuba.API.Notification : Entity, Widgetizable {
 	public string? kind { get; set; default = null; }
 	public string? created_at { get; set; default = null; }
 	public API.Status? status { get; set; default = null; }
+	public string? emoji { get; set; default = null; }
+	public string? emoji_url { get; set; default = null; }
 	public API.Admin.Report? report { get; set; default = null; }
 
 	// the docs claim that 'relationship_severance_event'
@@ -157,7 +159,7 @@ public class Tuba.API.Notification : Entity, Widgetizable {
 			kind_actor_name = _("%s (& %d others)").printf (account.display_name, others);
 		}
 
-		issuer.describe_kind (kind, out res_kind, kind_actor_name);
+		issuer.describe_kind (kind, out res_kind, kind_actor_name, emoji);
 		var toast = new GLib.Notification (res_kind.description);
 		if (status != null) {
 			var body = "";

src/Services/Accounts/InstanceAccount.vala

@@ -20,6 +20,8 @@ public class Tuba.InstanceAccount : API.Account, Streamable {
 	public const string KIND_ADMIN_REPORT = "admin.report";
 	public const string KIND_ADMIN_SIGNUP = "admin.sign_up";
 	public const string KIND_STATUS = "status";
+	public const string KIND_PLEROMA_REACTION = "pleroma:emoji_reaction";
+	public const string KIND_REACTION = "reaction";
 
 	public string uuid { get; set; }
 	public bool admin_mode { get; set; default=false; }
@@ -220,7 +222,8 @@ public class Tuba.InstanceAccount : API.Account, Streamable {
 		string? kind,
 		out Kind result,
 		string? actor_name = null,
-		string? callback_url = null
+		string? callback_url = null,
+		string? other_data = null
 	) {
 		switch (kind) {
 			case KIND_MENTION:
@@ -347,6 +350,26 @@ public class Tuba.InstanceAccount : API.Account, Streamable {
 					_("%s just posted").printf (actor_name),
 				};
 				break;
+			case KIND_PLEROMA_REACTION:
+			case KIND_REACTION:
+				string body;
+				if (other_data == null) {
+					// translators: the variable is a string user name,
+					//				this is used for notifications
+					body = _("%s reacted to your post").printf (actor_name);
+				} else {
+					// translators: the first variable is a string user name,
+					//				the second variable is an emoji,
+					//				this is used for notifications
+					body = _("%s reacted to your post with %s").printf (actor_name, other_data);
+				}
+
+				result = {
+					"tuba-smile-symbolic",
+					body,
+					callback_url
+				};
+				break;
 			default:
 				result = {
 					null,

src/Views/StatusStats.vala

@@ -1,12 +1,13 @@
 public class Tuba.Views.StatusStats : Views.TabbedBase {
 	Views.ContentBase favorited;
 	Views.ContentBase boosted;
+	Views.ContentBase reacted;
 
 	construct {
 		label = _("Post Stats");
 	}
 
-	public StatusStats (string status_id) {
+	public StatusStats (string status_id, bool has_reactors = false) {
 		favorited = add_timeline_tab (
 			// translators: title for a list of people that favorited a post
 			_("Favorited By"),
@@ -26,5 +27,17 @@ public class Tuba.Views.StatusStats : Views.TabbedBase {
 			_("No Boosts"),
 			"tuba-heart-broken-symbolic"
 		);
+
+		if (has_reactors && accounts.active.instance_info != null && accounts.active.instance_info.pleroma != null) {
+			reacted = add_timeline_tab (
+				// translators: title for a list of people that have reacted to a post
+				_("Reactions"),
+				"tuba-smile-symbolic",
+				@"/api/v1/pleroma/statuses/$(status_id)/reactions",
+				typeof (API.EmojiReaction),
+				_("No Reactions"),
+				"tuba-heart-broken-symbolic"
+			);
+		}
 	}
 }

src/Widgets/Announcement.vala

@@ -1,80 +1,5 @@
 [GtkTemplate (ui = "/dev/geopjr/Tuba/ui/widgets/announcement.ui")]
 public class Tuba.Widgets.Announcement : Gtk.ListBoxRow {
-	public class ReactButton : Gtk.Button {
-		private Gtk.Label reactions_label;
-		public string shortcode { get; private set; }
-		public signal void reaction_toggled ();
-
-		private bool _has_reacted = false;
-		public bool has_reacted {
-			get {
-				return _has_reacted;
-			}
-			set {
-				_has_reacted = value;
-				update_reacted (value);
-			}
-		}
-
-		private int64 _reactions = 0;
-		public int64 reactions {
-			get {
-				return _reactions;
-			}
-			set {
-				_reactions = value;
-				reactions_label.label = value.to_string ();
-			}
-		}
-
-		public ReactButton (API.EmojiReaction reaction) {
-			this.set_accessible_role (Gtk.AccessibleRole.TOGGLE_BUTTON);
-
-			// translators: the variable is the emoji or its name if it's custom
-			tooltip_text = _("React with %s").printf (reaction.name);
-			shortcode = reaction.name;
-
-			var badge = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6);
-			if (reaction.url != null) {
-				badge.append (new Widgets.Emoji (reaction.url));
-			} else {
-				badge.append (new Gtk.Label (reaction.name));
-			}
-
-			reactions_label = new Gtk.Label (null);
-			reactions = reaction.count;
-
-			badge.append (reactions_label);
-			this.child = badge;
-
-			_has_reacted = reaction.me;
-			if (reaction.me == true) {
-				this.add_css_class ("accent");
-				this.update_state (Gtk.AccessibleState.PRESSED, Gtk.AccessibleTristate.TRUE, -1);
-			}
-
-			this.clicked.connect (on_clicked);
-		}
-
-		public void update_reacted (bool reacted = true) {
-			if (reacted) {
-				this.add_css_class ("accent");
-				reactions = reactions + 1;
-				this.update_state (Gtk.AccessibleState.PRESSED, Gtk.AccessibleTristate.TRUE, -1);
-			} else {
-				this.remove_css_class ("accent");
-				reactions = reactions - 1;
-				this.update_state (Gtk.AccessibleState.PRESSED, Gtk.AccessibleTristate.FALSE, -1);
-			}
-			_has_reacted = reacted;
-		}
-
-		private void on_clicked () {
-			reaction_toggled ();
-		}
-	}
-
-	private API.Announcement announcement { get; private set; }
 	public signal void open ();
 
 	[GtkChild] protected unowned Adw.Avatar avatar;
@@ -84,7 +9,7 @@ public class Tuba.Widgets.Announcement : Gtk.ListBoxRow {
 	[GtkChild] protected unowned Gtk.Image attention_indicator;
 	[GtkChild] protected unowned Gtk.Label date_label;
 	[GtkChild] protected unowned Widgets.MarkupView content;
-	[GtkChild] protected unowned Gtk.FlowBox emoji_reactions;
+	[GtkChild] protected unowned Gtk.Box mainbox;
 
 	private void aria_describe_status () {
 		// translators: This is an accessibility label.
@@ -142,37 +67,6 @@ public class Tuba.Widgets.Announcement : Gtk.ListBoxRow {
 		);
 	}
 
-	private Gee.ArrayList<API.EmojiReaction>? reactions {
-		set {
-			if (value == null) return;
-
-			var i = 0;
-			Gtk.FlowBoxChild? fb_child = null;
-			while ((fb_child = emoji_reactions.get_child_at_index (i)) != null) {
-				emoji_reactions.remove (fb_child);
-				i = i + 1;
-			}
-
-			foreach (API.EmojiReaction p in value) {
-				if (p.count <= 0) return;
-
-				var badge_button = new ReactButton (p);
-				badge_button.reaction_toggled.connect (on_reaction_toggled);
-
-				//  emoji_reactions.append(badge_button); // GTK >= 4.5
-				emoji_reactions.insert (
-					new Gtk.FlowBoxChild () {
-						child = badge_button,
-						focusable = false
-					},
-					-1
-				);
-			}
-
-			emoji_reactions.visible = value.size > 0;
-		}
-	}
-
 	void settings_updated () {
 		Tuba.toggle_css (this, settings.larger_font_size, "ttl-status-font-large");
 		Tuba.toggle_css (this, settings.larger_line_height, "ttl-status-line-height-large");
@@ -199,8 +93,6 @@ public class Tuba.Widgets.Announcement : Gtk.ListBoxRow {
 	string announcement_date;
 	int reactions_count = 0;
 	public Announcement (API.Announcement t_announcement) {
-		announcement = t_announcement;
-
 		content.instance_emojis = t_announcement.emojis_map;
 		content.content = t_announcement.content;
 		attention_indicator.visible = !t_announcement.read;
@@ -226,34 +118,17 @@ public class Tuba.Widgets.Announcement : Gtk.ListBoxRow {
 		if (instance_title != "") avatar.show_initials = true;
 		if (instance_thumbnail != "") Tuba.Helper.Image.request_paintable (instance_thumbnail, null, false, on_cache_response);
 
-		reactions = t_announcement.reactions;
 		reactions_count = t_announcement.reactions.size;
+		if (reactions_count > 0)
+			mainbox.append (new Widgets.ReactionsRow (t_announcement.id, t_announcement.reactions, true) {
+				margin_top = 16
+			});
 
-		announcement.bind_property ("read", attention_indicator, "visible", GLib.BindingFlags.SYNC_CREATE | GLib.BindingFlags.INVERT_BOOLEAN);
+		t_announcement.bind_property ("read", attention_indicator, "visible", GLib.BindingFlags.SYNC_CREATE | GLib.BindingFlags.INVERT_BOOLEAN);
 		aria_describe_status ();
 	}
 
 	void on_cache_response (Gdk.Paintable? data) {
 		avatar.custom_image = data;
 	}
-
-	private void on_reaction_toggled (ReactButton btn) {
-		var endpoint = @"/api/v1/announcements/$(announcement.id)/reactions/$(btn.shortcode)";
-		var req = btn.has_reacted ? new Request.DELETE (endpoint) : new Request.PUT (endpoint);
-
-		btn.sensitive = false;
-		req
-			.with_account (accounts.active)
-			.then (() => {
-				btn.update_reacted (!btn.has_reacted);
-				btn.sensitive = true;
-			})
-			.on_error ((code, message) => {
-				warning (@"Error while reacting to announcement: $code $message");
-				btn.sensitive = true;
-
-				app.toast ("%s: %s".printf (_("Error"), message));
-			})
-			.exec ();
-	}
 }