feat(profile): better filter UX (#1189)

Co-authored-by: Alice Mikhaylenko <[email protected]>

Author: GeopJr

data/gresource.xml

@@ -3,6 +3,7 @@
     <gresource prefix="/dev/geopjr/Tuba/">
         <file>style.css</file>
         <file>style-dark.css</file>
+        <file>style-hc.css</file>
 
         <file preprocess="xml-stripblanks">icons/scalable/actions/tuba-hashtag-symbolic.svg</file>
         <file preprocess="xml-stripblanks">icons/scalable/actions/tuba-bookmarks-symbolic.svg</file>

data/style-hc.css

@@ -0,0 +1,17 @@
+.ttl-profile-cover.thanks {
+	background: alpha(@accent_bg_color, 0.08);
+}
+
+.ttl-profile-cover.thanks avatar {
+	border-color: alpha(@accent_bg_color, 0.08);
+}
+
+.toggle-group-17 {
+	box-shadow: inset 0 0 0 1px var(--border-color);
+}
+
+.toggle-group-17 button:checked {
+	box-shadow: inset 0 0 0 1px var(--border-color),
+		0 1px 3px 1px rgb(0 0 0 / 7%),
+		0 2px 6px 2px rgb(0 0 0 / 3%);
+}

data/style.css

@@ -300,7 +300,7 @@ headerbar.flat.no-title .title {
 	background-color: alpha(@warning_bg_color, .1);
 }
 
-.ttl-post.direct:hover{
+.ttl-post.direct:hover {
 	background-color: darker(alpha(@warning_bg_color, .1));
 }
 
@@ -336,7 +336,7 @@ headerbar.flat.no-title .title {
 .about .app-version:hover{background:radial-gradient(circle at 9.75% 50%,#0000 6.66%,#7902aa 6.7%,#0000 8.4%),conic-gradient(at 26.66% 50%,#0000 222.75deg,#ffd800 0 317.25deg,#0000 0),conic-gradient(at 33% 50%,#0000 222.75deg,white 0 317.25deg,#0000 0),conic-gradient(at 39% 50%,#0000 222.75deg,#ffa6b9 0 317.25deg,#0000 0),conic-gradient(at 45.66% 50%,#0000 222.75deg,#00d2ff 0 317.25deg,#0000 0),conic-gradient(at 52% 50%,#0000 222.75deg,#753000 0 317.25deg,#0000 0),conic-gradient(at 58.33% 50%,#0000 222.75deg,#000 0 317.25deg,#0000 0),linear-gradient(to bottom,#e40303,#e40303 16.67%,#ff8c00 16.67%,#ff8c00 33.33%,#ffed00 33.33%,#ffed00 50%,#008026 50%,#008026 66.67%,#004dff 66.67%,#004dff 83.33%,#750787 83.33%,#750787);}
 
 /* Composer auto completion */
-GtkSourceAssistant.completion list row{
+GtkSourceAssistant.completion list row {
 	padding: 6px 12px 6px 12px;
 }
 
@@ -433,12 +433,12 @@ video > overlay > revealer > controls, .audio-controls {
 	animation: loadbg 0.5s ease;
 }
 
-.ttl-poll-row:first-child{
+.ttl-poll-row:first-child {
 	border-top-left-radius: 12px;
 	border-top-right-radius: 12px;
 }
 
-.ttl-poll-row:last-child{
+.ttl-poll-row:last-child {
 	border-bottom-left-radius: 12px;
 	border-bottom-right-radius: 12px;
 }
@@ -477,7 +477,7 @@ video > overlay > revealer > controls, .audio-controls {
 
 .ttl-view listview>row.activatable:selected:hover,
 .ttl-view listview>row.activatable:hover {
-	background-color:transparent;
+	background-color: transparent;
 }
 
 .ttl-view listview>row.activatable:selected:active,
@@ -496,7 +496,8 @@ video > overlay > revealer > controls, .audio-controls {
 }
 
 /* .ttl-view .small.content .card { */
-.ttl-view .small.fake-content .card {
+.ttl-view .small.fake-content .card,
+.ttl-view .small.fake-content .toggle-group-17 {
 	border-left: none;
 	border-right: none;
 	border-radius: 0px;
@@ -508,7 +509,7 @@ video > overlay > revealer > controls, .audio-controls {
 }
 
 /* .ttl-view .content row:not(.ttl-post) { */
-.ttl-view .fake-content row:not(.ttl-post) {
+.ttl-view .fake-content row:not(.ttl-post):not(.toggle-group-17) {
 	padding: 0px;
 }
 
@@ -558,6 +559,7 @@ video > overlay > revealer > controls, .audio-controls {
 .ttl-view .small.fake-content .card {
 	box-shadow: none;
 }
+
 .ttl-view .small .preview_card.explore .preview_card_h {
 	border-radius: 0px;
 }
@@ -660,7 +662,8 @@ video > overlay > revealer > controls, .audio-controls {
 	font-size: small;
 }
 
-.preview_card:not(.explore), .preview_card:not(.explore) image:not(.attachment-overlay-icon) {
+.preview_card:not(.explore),
+.preview_card:not(.explore) image:not(.attachment-overlay-icon) {
 	background-color: alpha(currentColor, 0.0625);
 }
 
@@ -767,7 +770,8 @@ list.uniform-border-color row {
 	border-bottom-color: @borders;
 }
 
-.emoji-reaction-expander > box > list, .emoji-reaction-expander > box > list > row  {
+.emoji-reaction-expander>box>list,
+.emoji-reaction-expander>box>list>row {
 	border-radius: inherit;
 }
 
@@ -778,3 +782,31 @@ list.uniform-border-color row {
 .ttl-profile-cover.thanks avatar {
 	border-color: alpha(@accent_bg_color, 0.1);
 }
+
+.toggle-group-17 {
+	background: color-mix(in srgb, currentColor 10%, transparent);
+	border-radius: 9px;
+	padding: 3px;
+}
+
+.toggle-group-17 button {
+	padding: 2px 15px;
+	transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	transition-property: outline-color, outline-width, outline-offset, background, box-shadow;
+}
+
+.toggle-group-17 button:checked {
+	background: rgb(from var(--card-bg-color) r g b / calc(alpha * 2));
+	color: var(--card-fg-color);
+	box-shadow: 0 1px 3px 1px rgb(0 0 0 / 7%),
+		0 2px 6px 2px rgb(0 0 0 / 3%);
+}
+
+.toggle-group-17 separator {
+	margin: 3px 1px;
+	transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.toggle-group-17 separator.hidden {
+	opacity: 0;
+}

data/ui/menus.ui

@@ -65,39 +65,6 @@
 
     <section>
       <attribute name="label" translatable="yes">Timeline</attribute>
-      <submenu id="profile-filter-menu">
-        <attribute name="label" translatable="yes">Filter</attribute>
-        <!-- <item>
-          <attribute name="label" translatable="yes">Posts</attribute>
-          <attribute name="action">view.source</attribute>
-          <attribute name="target">statuses</attribute>
-        </item>
-        <item>
-          <attribute name="label" translatable="yes">Following</attribute>
-          <attribute name="action">view.source</attribute>
-          <attribute name="target">following</attribute>
-        </item>
-        <item>
-          <attribute name="label" translatable="yes">Followers</attribute>
-          <attribute name="action">view.source</attribute>
-          <attribute name="target">followers</attribute>
-        </item> -->
-
-        <!-- <section> -->
-          <item>
-            <attribute name="label" translatable="yes">Include Replies</attribute>
-            <attribute name="action">view.include-replies</attribute>
-            <attribute name="hidden-when">action-disabled</attribute>
-          </item>
-          <item>
-            <attribute name="label" translatable="yes">Include Media</attribute>
-            <attribute name="action">view.only-media</attribute>
-            <attribute name="hidden-when">action-disabled</attribute>
-          </item>
-        <!-- </section> -->
-
-      </submenu>
-
     <!-- <section> -->
       <!-- <submenu id="copy-menu">
         <attribute name="label" translatable="yes">Share</attribute>

src/Views/ContentBase.vala

@@ -101,11 +101,11 @@ public class Tuba.Views.ContentBase : Views.Base {
 		this.model.remove_all ();
 	}
 
-	protected virtual void clear_all_but_first () {
+	protected virtual void clear_all_but_first (int i = 1) {
 		base.clear ();
 
-		if (model.n_items > 1)
-			model.splice (1, model.n_items - 1, {});
+		if (model.n_items > i)
+			model.splice (i, model.n_items - i, {});
 	}
 
 	public override void on_content_changed () {

src/Views/Profile.vala

@@ -16,14 +16,17 @@ public class Tuba.Views.Profile : Views.Accounts {
 		}
 	}
 
+	public class FilterGroup : Widgetizable, GLib.Object {
+		public override Gtk.Widget to_widget () {
+			return new Widgets.ProfileFilterGroup ();
+		}
+	}
+
 	public ProfileAccount profile { get; construct set; }
-	public bool include_replies { get; set; default = false; }
-	public bool only_media { get; set; default = false; }
+	public Widgets.ProfileFilterGroup.Filter filter { get; set; default = Widgets.ProfileFilterGroup.Filter.POSTS; }
 	public string source { get; set; default = "statuses"; }
 
 	protected Gtk.MenuButton menu_button;
-	protected SimpleAction media_action;
-	protected SimpleAction replies_action;
 	protected SimpleAction muting_action;
 	protected SimpleAction hiding_reblogs_action;
 	protected SimpleAction blocking_action;
@@ -41,14 +44,15 @@ public class Tuba.Views.Profile : Views.Accounts {
 		);
 
 		model.insert (0, profile);
+		model.insert (1, new FilterGroup ());
 		profile.rs.invalidated.connect (on_rs_updated);
 	}
 	~Profile () {
 		debug ("Destroying Profile view");
 	}
 
 	public bool append_pinned () {
-		if (source == "statuses") {
+		if (source == "statuses" && filter == Widgets.ProfileFilterGroup.Filter.POSTS) {
 			new Request.GET (@"/api/v1/accounts/$(profile.account.id)/statuses")
 				.with_account (account)
 				.with_param ("pinned", "true")
@@ -64,8 +68,7 @@ public class Tuba.Views.Profile : Views.Accounts {
 
 						to_add += e_status;
 					});
-					model.splice (1, 0, to_add);
-
+					model.splice (2, 0, to_add);
 				})
 				.exec ();
 		}
@@ -110,6 +113,12 @@ public class Tuba.Views.Profile : Views.Accounts {
 			widget_status.pin_changed.connect (on_refresh);
 		}
 
+		var widget_filter_group = widget as Widgets.ProfileFilterGroup;
+		if (widget_filter_group != null) {
+			widget_filter_group.remove_css_class ("card");
+			widget_filter_group.filter_change.connect (change_filter);
+		}
+
 		return widget;
 	}
 
@@ -151,6 +160,11 @@ public class Tuba.Views.Profile : Views.Accounts {
 		invalidate_actions (true);
 	}
 
+	protected void change_filter (Widgets.ProfileFilterGroup.Filter filter) {
+		this.filter = filter;
+		invalidate_actions (true);
+	}
+
 	protected override void build_header () {
 		base.build_header ();
 
@@ -198,26 +212,12 @@ public class Tuba.Views.Profile : Views.Accounts {
 	}
 
 	protected override void clear () {
-		base.clear_all_but_first ();
+		base.clear_all_but_first (2);
 	}
 
 	protected override void build_actions () {
 		base.build_actions ();
 
-		media_action = new SimpleAction.stateful ("only-media", null, false);
-		media_action.change_state.connect (v => {
-			media_action.set_state (only_media = v.get_boolean ());
-			invalidate_actions (true);
-		});
-		actions.add_action (media_action);
-
-		replies_action = new SimpleAction.stateful ("include-replies", null, false);
-		replies_action.change_state.connect (v => {
-			replies_action.set_state (include_replies = v.get_boolean ());
-			invalidate_actions (true);
-		});
-		actions.add_action (replies_action);
-
 		notify_on_new_post_action = new SimpleAction.stateful ("notify_on_post", null, false);
 		notify_on_new_post_action.change_state.connect (v => {
 			profile.rs.modify ("follow", {{"notify", v.get_boolean ().to_string ()}});
@@ -332,8 +332,6 @@ public class Tuba.Views.Profile : Views.Accounts {
 	}
 
 	void invalidate_actions (bool refresh) {
-		replies_action.set_enabled (accepts == typeof (API.Status));
-		media_action.set_enabled (accepts == typeof (API.Status));
 		muting_action.set_state (profile.rs.muting);
 		hiding_reblogs_action.set_state (!profile.rs.showing_reblogs);
 		hiding_reblogs_action.set_enabled (profile.rs.following);
@@ -356,8 +354,20 @@ public class Tuba.Views.Profile : Views.Accounts {
 
 	public override Request append_params (Request req) {
 		if (page_next == null && source == "statuses") {
-			req.with_param ("exclude_replies", (!include_replies).to_string ());
-			req.with_param ("only_media", only_media.to_string ());
+			switch (this.filter) {
+				case Widgets.ProfileFilterGroup.Filter.POSTS:
+					req.with_param ("exclude_replies", "true");
+					break;
+				case Widgets.ProfileFilterGroup.Filter.REPLIES:
+					req.with_param ("exclude_replies", "false");
+					req.with_param ("exclude_reblogs", "true");
+					break;
+				case Widgets.ProfileFilterGroup.Filter.MEDIA:
+					req.with_param ("only_media", "true");
+					break;
+				default:
+					assert_not_reached ();
+			}
 		}
 		return base.append_params (req);
 	}

src/Views/Timeline.vala

@@ -151,9 +151,9 @@ public class Tuba.Views.Timeline : AccountHolder, Streamable, Views.ContentBase
 		base.clear ();
 	}
 
-	protected override void clear_all_but_first () {
+	protected override void clear_all_but_first (int i = 1) {
 		cleanup_timeline_api ();
-		base.clear_all_but_first ();
+		base.clear_all_but_first (i);
 	}
 
 	public void get_pages (string? header) {