chat-info-members: Use GtkListView instead of GtkListBox

Author: yuraiz

.editorconfig

@@ -7,5 +7,5 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 charset = utf-8
 
-[*.{build,yml,ui,yaml}]
+[*.{build,yml,ui,yaml,css}]
 indent_size = 2

data/resources/resources.gresource.xml

@@ -13,6 +13,7 @@
     <file compressed="true" preprocess="xml-stripblanks">ui/add-account-row.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/avatar-with-selection.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/components-avatar.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">ui/components-chat-member-row.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/components-message-entry.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/content.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/content-chat-action-bar.ui</file>

data/resources/style.css

@@ -213,7 +213,7 @@ messagesticker messageindicators,
 .osd-indicator {
   background-color: alpha(black, 0.4);
   color: white;
-  opacity: 1.0; /* Reset opacity from message bubble */
+  opacity: 1; /* Reset opacity from message bubble */
   border-radius: 9999px;
   padding: 2px 6px;
   margin: 6px;
@@ -268,7 +268,7 @@ messageindicators,
   padding: 0;
 }
 
-.message-entry > overlay > entry > scrolledwindow > scrollbar  {
+.message-entry > overlay > entry > scrolledwindow > scrollbar {
   box-shadow: none;
   background: none;
 }
@@ -298,3 +298,7 @@ window.chat-info .main-page > avatar {
 window.chat-info .main-page > list {
   margin-top: 12px;
 }
+
+chatmember {
+  padding: 6px 0px;
+}

data/resources/ui/components-chat-member-row.ui

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="ComponentsChatMemberRow" parent="GtkBox">
+    <property name="spacing">12</property>
+    <child>
+      <object class="ComponentsAvatar" id="avatar">
+        <property name="size">40</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <property name="valign">center</property>
+        <child>
+          <object class="GtkBox">
+            <property name="hexpand">True</property>
+            <child>
+              <object class="GtkLabel" id="user_name_label">
+                <style>
+                  <class name="heading"/>
+                </style>
+                <property name="ellipsize">end</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="member_status_label">
+                <style>
+                  <class name="accent"/>
+                  <class name="caption"/>
+                </style>
+                <property name="hexpand">True</property>
+                <property name="xalign">1</property>
+                <property name="ellipsize">end</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkInscription" id="user_status_label">
+            <style>
+              <class name="dim-label"/>
+            </style>
+            <property name="xalign">0</property>
+            <property name="text-overflow">ellipsize-end</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

data/resources/ui/content-chat-info-window.ui

@@ -17,17 +17,15 @@
                 <property name="centering-policy">strict</property>
                 <property name="title-widget">
                   <object class="AdwViewSwitcherTitle" id="title">
+                    <property name="title" translatable="yes">Info</property>
                     <property name="stack">stack</property>
                   </object>
                 </property>
-                <style>
-                  <class name="flat"/>
-                </style>
               </object>
             </child>
             <child>
               <object class="AdwViewStack" id="stack">
-                <property name="vexpand">true</property>
+                <property name="vexpand">True</property>
                 <child>
                   <object class="AdwViewStackPage">
                     <property name="name">info</property>
@@ -91,15 +89,16 @@
                     <property name="child">
                       <object class="GtkScrolledWindow">
                         <property name="child">
-                          <object class="AdwClamp">
+                          <object class="AdwClampScrollable">
                             <property name="maximum-size">440</property>
                             <property name="tightening-threshold">200</property>
                             <property name="child">
-                              <object class="GtkListBox" id="members_list">
-                                <property name="valign">center</property>
-                                <property name="selection-mode">none</property>
+                              <object class="GtkListView" id="members_list">
+                                <property name="model">
+                                  <object class="GtkNoSelection" id="selection"/>
+                                </property>
                                 <style>
-                                  <class name="boxed-list"/>
+                                  <class name="navigation-sidebar"/>
                                 </style>
                               </object>
                             </property>

src/session/components/chat_member_row.rs

@@ -0,0 +1,86 @@
+use crate::tdlib::ChatMember;
+use gettextrs::gettext;
+use gtk::prelude::*;
+use gtk::subclass::prelude::*;
+use gtk::{glib, CompositeTemplate};
+
+use super::Avatar;
+use crate::{expressions, strings};
+use tdlib::enums::{UserStatus, UserType};
+
+mod imp {
+    use super::*;
+    #[derive(Debug, Default, CompositeTemplate)]
+    #[template(resource = "/com/github/melix99/telegrand/ui/components-chat-member-row.ui")]
+    pub(crate) struct ChatMemberRow {
+        #[template_child]
+        pub(super) avatar: TemplateChild<Avatar>,
+        #[template_child]
+        pub(super) user_name_label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) member_status_label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) user_status_label: TemplateChild<gtk::Inscription>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for ChatMemberRow {
+        const NAME: &'static str = "ComponentsChatMemberRow";
+        type Type = super::ChatMemberRow;
+        type ParentType = gtk::Box;
+
+        fn class_init(klass: &mut Self::Class) {
+            Self::bind_template(klass);
+            klass.set_css_name("chatmember");
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
+    }
+
+    impl ObjectImpl for ChatMemberRow {}
+
+    impl WidgetImpl for ChatMemberRow {}
+
+    impl BoxImpl for ChatMemberRow {}
+}
+
+glib::wrapper! {
+    pub(crate) struct ChatMemberRow(ObjectSubclass<imp::ChatMemberRow>)
+        @extends gtk::Widget;
+}
+
+impl ChatMemberRow {
+    pub fn new() -> Self {
+        glib::Object::new(&[])
+    }
+    pub fn bind_member(&self, member: ChatMember) {
+        let imp = self.imp();
+
+        let user = member.user();
+
+        let user_expression = gtk::ObjectExpression::new(&user);
+        let name_expression = expressions::user_display_name(&user_expression);
+        name_expression.bind(&*imp.user_name_label, "label", Some(&user));
+
+        if let UserType::Bot(_) = user.type_().0 {
+            imp.user_status_label.set_text(Some(&gettext("bot")));
+        } else {
+            let status = user.status().0;
+            let status_label = &*imp.user_status_label;
+
+            match status {
+                UserStatus::Online(_) => status_label.set_css_classes(&["accent"]),
+                _ => status_label.set_css_classes(&["dim-label"]),
+            }
+
+            let status = strings::user_status(&status);
+            imp.user_status_label.set_text(Some(&status));
+        };
+
+        imp.member_status_label.set_label(&member.status());
+
+        imp.avatar.set_item(Some(user.upcast()));
+    }
+}

src/session/components/mod.rs

@@ -1,7 +1,9 @@
 mod avatar;
+mod chat_member_row;
 mod message_entry;
 mod snow;
 
 pub(crate) use self::avatar::Avatar;
+pub(crate) use self::chat_member_row::ChatMemberRow;
 pub(crate) use self::message_entry::MessageEntry;
 pub(crate) use self::snow::Snow;

src/session/content/chat_info_window.rs

@@ -5,12 +5,15 @@ use gtk::subclass::prelude::*;
 use gtk::{glib, CompositeTemplate};
 use tdlib::enums::ChatMembers::ChatMembers as TdChatMembers;
 use tdlib::enums::User::User as TdUser;
-use tdlib::enums::{ChatMemberStatus, MessageSender, UserType};
+use tdlib::enums::{MessageSender, UserType};
 use tdlib::functions;
-use tdlib::types::{BasicGroupFullInfo, ChatMember, ChatMembers, SupergroupFullInfo};
+use tdlib::types::{
+    BasicGroupFullInfo, ChatMember as TdChatMember, ChatMembers, SupergroupFullInfo,
+};
 
 use crate::i18n::ngettext_f;
-use crate::tdlib::{BasicGroup, BoxedUserStatus, Chat, ChatType, Supergroup, User};
+use crate::session::components::ChatMemberRow;
+use crate::tdlib::{BasicGroup, BoxedUserStatus, Chat, ChatMember, ChatType, Supergroup, User};
 use crate::utils::spawn;
 use crate::{expressions, strings};
 
@@ -34,7 +37,7 @@ mod imp {
         #[template_child]
         pub(super) members_page: TemplateChild<adw::ViewStackPage>,
         #[template_child]
-        pub(super) members_list: TemplateChild<gtk::ListBox>,
+        pub(super) members_list: TemplateChild<gtk::ListView>,
     }
 
     #[glib::object_subclass]
@@ -310,81 +313,63 @@ impl ChatInfoWindow {
         self.update_info_list_visibility();
     }
 
-    async fn append_members(&self, members: Vec<ChatMember>) {
-        let session = self.chat().unwrap().session();
-        let client_id = session.client_id();
+    async fn append_members(&self, members: Vec<TdChatMember>) {
+        let members: Vec<_> = {
+            let mut users: Vec<User> = vec![];
 
-        let members_list = &self.imp().members_list;
+            let session = self.chat().unwrap().session();
+            let client_id = session.client_id();
 
-        for member in members {
-            if let MessageSender::User(user) = member.member_id {
-                if let Ok(TdUser(user)) = functions::get_user(user.user_id, client_id).await {
-                    let user_row = adw::ActionRow::new();
-                    user_row.set_title_lines(1);
-                    user_row.set_subtitle_lines(1);
-
-                    let user = User::from_td_object(user, &session);
-
-                    let user_expression = gtk::ObjectExpression::new(&user);
-                    let name_expression = expressions::user_display_name(&user_expression);
-                    name_expression.bind(&user_row, "title", Some(&user));
-
-                    User::this_expression("status")
-                        .chain_closure::<String>(closure!(
-                            |_: Option<glib::Object>, status: BoxedUserStatus| {
-                                strings::user_status(&status.0)
-                            }
-                        ))
-                        .bind(&user_row, "subtitle", Some(&user));
-
-                    if let UserType::Bot(_) = user.type_().0 {
-                        user_row.set_subtitle(&gettext("bot"));
-                    } else {
-                        User::this_expression("status")
-                            .chain_closure::<String>(closure!(
-                                |_: Option<glib::Object>, status: BoxedUserStatus| {
-                                    strings::user_status(&status.0)
-                                }
-                            ))
-                            .bind(&user_row, "subtitle", Some(&user));
-                    };
-
-                    let avatar = crate::session::components::Avatar::new();
-
-                    avatar.set_item(Some(user.upcast()));
-                    avatar.set_size(32);
-                    user_row.add_prefix(&avatar);
-
-                    let status = match member.status {
-                        ChatMemberStatus::Creator(owner) => {
-                            let title = if owner.custom_title.is_empty() {
-                                gettext("Owner")
-                            } else {
-                                owner.custom_title
-                            };
-                            Some(title)
-                        }
-                        ChatMemberStatus::Administrator(admin) => {
-                            let title = if admin.custom_title.is_empty() {
-                                gettext("Admin")
-                            } else {
-                                admin.custom_title
-                            };
-                            Some(title)
-                        }
-                        _ => None,
-                    };
-
-                    if let Some(text) = status {
-                        let owner_label = gtk::Label::new(Some(&text));
-                        owner_label.set_yalign(0.2);
-                        owner_label.set_css_classes(&["caption", "accent"]);
-                        user_row.add_suffix(&owner_label);
+            for member in &members {
+                let user = match member.member_id {
+                    MessageSender::User(ref user) => {
+                        let TdUser(user) =
+                            functions::get_user(user.user_id, client_id).await.unwrap();
+                        User::from_td_object(user, &session)
                     }
-
-                    members_list.append(&user_row);
-                }
+                    MessageSender::Chat(_) => unreachable!(),
+                };
+                users.push(user);
             }
+
+            members
+                .into_iter()
+                .zip(users.into_iter())
+                .map(|(member, user)| ChatMember::new(member, user))
+                .collect()
+        };
+
+        let members_list = &self.imp().members_list;
+
+        let selection_model: gtk::NoSelection = members_list.model().unwrap().downcast().unwrap();
+
+        let model: gtk::gio::ListStore = if let Some(model) = selection_model.model() {
+            model.downcast().unwrap()
+        } else {
+            let model = gtk::gio::ListStore::new(ChatMember::static_type());
+            selection_model.set_model(Some(&model));
+            model
+        };
+
+        model.extend_from_slice(&members);
+
+        if members_list.factory().is_none() {
+            let factory = gtk::SignalListItemFactory::new();
+
+            factory.connect_setup(move |_, list_item| {
+                list_item.set_property("child", ChatMemberRow::new());
+            });
+
+            factory.connect_bind(move |_, list_item| {
+                let list_item: &gtk::ListItem = list_item.downcast_ref().unwrap();
+
+                let user_row: ChatMemberRow = list_item.child().unwrap().downcast().unwrap();
+                let member: ChatMember = list_item.item().unwrap().downcast().unwrap();
+
+                user_row.bind_member(member);
+            });
+
+            members_list.set_factory(Some(&factory));
         }
     }