Merge remote-tracking branch 'upstream/master' into master-windows-changes

.github/workflows/build.yml

@@ -2,11 +2,12 @@ name: Build
 on: [pull_request, push]
 jobs:
   build:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
       - run: sudo apt-get update
-      - run: sudo apt-get install -y build-essential gettext cmake valac libgee-0.8-dev libsqlite3-dev libgtk-3-dev libnotify-dev libgpgme-dev libsoup2.4-dev libgcrypt20-dev libqrencode-dev libgspell-1-dev libnice-dev libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev libsrtp2-dev libwebrtc-audio-processing-dev
+      - run: sudo apt-get remove libunwind-14-dev
+      - run: sudo apt-get install -y build-essential gettext cmake valac libgee-0.8-dev libsqlite3-dev libgtk-4-dev libnotify-dev libgpgme-dev libsoup2.4-dev libgcrypt20-dev libqrencode-dev libgspell-1-dev libnice-dev libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev libsrtp2-dev libwebrtc-audio-processing-dev
       - run: ./configure --with-tests --with-libsignal-in-tree
       - run: make
       - run: build/xmpp-vala-test

CMakeLists.txt

@@ -187,7 +187,6 @@ endif(WIN32)
 set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR})
 set(CMAKE_LIBRARY_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR})
 
-set(GTK3_GLOBAL_VERSION 3.22)
 set(GLib_GLOBAL_VERSION 2.38)
 set(ICU_GLOBAL_VERSION 57)
 

cmake/FindGDK4.cmake

@@ -0,0 +1,38 @@
+include(PkgConfigWithFallback)
+find_pkg_config_with_fallback(GDK4
+    PKG_CONFIG_NAME gdk-4.0
+    LIB_NAMES gdk-4
+    INCLUDE_NAMES gdk/gdk.h
+    INCLUDE_DIR_SUFFIXES gtk-4.0 gtk-4.0/include gtk+-4.0 gtk+-4.0/include
+    DEPENDS Pango Cairo GDKPixbuf2
+)
+
+if(GDK4_FOUND AND NOT GDK4_VERSION)
+    find_file(GDK4_VERSION_HEADER "gdk/gdkversionmacros.h" HINTS ${GDK4_INCLUDE_DIRS})
+    mark_as_advanced(GDK4_VERSION_HEADER)
+
+    if(GDK4_VERSION_HEADER)
+        file(STRINGS "${GDK4_VERSION_HEADER}" GDK4_MAJOR_VERSION REGEX "^#define GDK_MAJOR_VERSION +\\(?([0-9]+)\\)?$")
+        string(REGEX REPLACE "^#define GDK_MAJOR_VERSION \\(?([0-9]+)\\)?$" "\\1" GDK4_MAJOR_VERSION "${GDK4_MAJOR_VERSION}")
+        file(STRINGS "${GDK4_VERSION_HEADER}" GDK4_MINOR_VERSION REGEX "^#define GDK_MINOR_VERSION +\\(?([0-9]+)\\)?$")
+        string(REGEX REPLACE "^#define GDK_MINOR_VERSION \\(?([0-9]+)\\)?$" "\\1" GDK4_MINOR_VERSION "${GDK4_MINOR_VERSION}")
+        file(STRINGS "${GDK4_VERSION_HEADER}" GDK4_MICRO_VERSION REGEX "^#define GDK_MICRO_VERSION +\\(?([0-9]+)\\)?$")
+        string(REGEX REPLACE "^#define GDK_MICRO_VERSION \\(?([0-9]+)\\)?$" "\\1" GDK4_MICRO_VERSION "${GDK4_MICRO_VERSION}")
+        set(GDK4_VERSION "${GDK4_MAJOR_VERSION}.${GDK4_MINOR_VERSION}.${GDK4_MICRO_VERSION}")
+        unset(GDK4_MAJOR_VERSION)
+        unset(GDK4_MINOR_VERSION)
+        unset(GDK4_MICRO_VERSION)
+    endif()
+endif()
+
+if (GDK4_FOUND)
+    find_file(GDK4_WITH_X11 "gdk/gdkx.h" HINTS ${GDK4_INCLUDE_DIRS})
+    if (GDK4_WITH_X11)
+        set(GDK4_WITH_X11 yes CACHE INTERNAL "Does GDK4 support X11")
+    endif (GDK4_WITH_X11)
+endif ()
+
+include(FindPackageHandleStandardArgs)
+find_package_handle_standard_args(GDK4
+    REQUIRED_VARS GDK4_LIBRARY
+    VERSION_VAR GDK4_VERSION)

cmake/FindGTK4.cmake

@@ -0,0 +1,30 @@
+include(PkgConfigWithFallback)
+find_pkg_config_with_fallback(GTK4
+    PKG_CONFIG_NAME gtk4
+    LIB_NAMES gtk-4
+    INCLUDE_NAMES gtk/gtk.h
+    INCLUDE_DIR_SUFFIXES gtk-4.0 gtk-4.0/include gtk+-4.0 gtk+-4.0/include gtk4 gtk4/include
+)
+
+if(GTK4_FOUND AND NOT GTK4_VERSION)
+    find_file(GTK4_VERSION_HEADER "gtk/gtkversion.h" HINTS ${GTK4_INCLUDE_DIRS})
+    mark_as_advanced(GTK4_VERSION_HEADER)
+
+    if(GTK4_VERSION_HEADER)
+        file(STRINGS "${GTK4_VERSION_HEADER}" GTK4_MAJOR_VERSION REGEX "^#define GTK_MAJOR_VERSION +\\(?([0-9]+)\\)?$")
+        string(REGEX REPLACE "^#define GTK_MAJOR_VERSION \\(?([0-9]+)\\)?$" "\\1" GTK4_MAJOR_VERSION "${GTK4_MAJOR_VERSION}")
+        file(STRINGS "${GTK4_VERSION_HEADER}" GTK4_MINOR_VERSION REGEX "^#define GTK_MINOR_VERSION +\\(?([0-9]+)\\)?$")
+        string(REGEX REPLACE "^#define GTK_MINOR_VERSION \\(?([0-9]+)\\)?$" "\\1" GTK4_MINOR_VERSION "${GTK4_MINOR_VERSION}")
+        file(STRINGS "${GTK4_VERSION_HEADER}" GTK4_MICRO_VERSION REGEX "^#define GTK_MICRO_VERSION +\\(?([0-9]+)\\)?$")
+        string(REGEX REPLACE "^#define GTK_MICRO_VERSION \\(?([0-9]+)\\)?$" "\\1" GTK4_MICRO_VERSION "${GTK4_MICRO_VERSION}")
+        set(GTK4_VERSION "${GTK4_MAJOR_VERSION}.${GTK4_MINOR_VERSION}.${GTK4_MICRO_VERSION}")
+        unset(GTK4_MAJOR_VERSION)
+        unset(GTK4_MINOR_VERSION)
+        unset(GTK4_MICRO_VERSION)
+    endif()
+endif()
+
+include(FindPackageHandleStandardArgs)
+find_package_handle_standard_args(GTK4
+    REQUIRED_VARS GTK4_LIBRARY
+    VERSION_VAR GTK4_VERSION)

cmake/FindGspell.cmake

@@ -4,7 +4,7 @@ find_pkg_config_with_fallback(Gspell
     LIB_NAMES gspell-1
     INCLUDE_NAMES gspell.h
     INCLUDE_DIR_SUFFIXES gspell-1 gspell-1/gspell
-    DEPENDS Gtk
+    DEPENDS GTK3
 )
 
 include(FindPackageHandleStandardArgs)

libdino/src/entity/encryption.vala

@@ -1,12 +1,16 @@
 namespace Dino.Entities {
 
-public enum Encryption {
+    public enum Encryption {
         NONE,
         PGP,
         OMEMO,
         DTLS_SRTP,
         SRTP,
-        UNKNOWN,
+        UNKNOWN;
-}
+
+        public bool is_some() {
+            return this != NONE;
+        }
+    }
 
 }

libdino/src/plugin/interfaces.vala

@@ -12,7 +12,8 @@ public enum Priority {
 }
 
 public enum WidgetType {
-    GTK
+    GTK3,
+    GTK4
 }
 
 public interface RootInterface : Object {
@@ -27,6 +28,8 @@ public interface EncryptionListEntry : Object {
 
     public abstract void encryption_activated(Entities.Conversation conversation, Plugins.SetInputFieldStatus callback);
     public abstract Object? get_encryption_icon(Entities.Conversation conversation, ContentItem content_item);
+    public abstract string? get_encryption_icon_name(Entities.Conversation conversation, ContentItem content_item);
+
 }
 
 public interface CallEncryptionEntry : Object {
@@ -45,15 +48,11 @@ public abstract class AccountSettingsEntry : Object {
     public abstract string name { get; }
     public virtual int16 label_top_padding { get { return -1; } }
 
-    public abstract AccountSettingsWidget? get_widget(WidgetType type);
-}
-
-public interface AccountSettingsWidget : Object {
-    public abstract void set_account(Account account);
-
     public abstract signal void activated();
-
     public abstract void deactivate();
+
+    public abstract void set_account(Account account);
+    public abstract Object? get_widget(WidgetType type);
 }
 
 public interface ContactDetailsProvider : Object {
@@ -76,10 +75,8 @@ public interface TextCommand : Object {
 public interface ConversationTitlebarEntry : Object {
     public abstract string id { get; }
     public abstract double order { get; }
-    public abstract ConversationTitlebarWidget? get_widget(WidgetType type);
+    public abstract Object? get_widget(WidgetType type);
-}
 
-public interface ConversationTitlebarWidget : Object {
     public abstract void set_conversation(Conversation conversation);
     public abstract void unset_conversation();
 }
@@ -146,10 +143,14 @@ public abstract class MetaConversationItem : Object {
     public bool requires_header { get; set; default=false; }
     public bool in_edit_mode { get; set; default=false; }
 
-    public abstract Object? get_widget(WidgetType type);
+    public abstract Object? get_widget(ConversationItemWidgetInterface outer, WidgetType type);
     public abstract Gee.List<MessageAction>? get_item_actions(WidgetType type);
 }
 
+public interface ConversationItemWidgetInterface: Object {
+    public abstract void set_widget(Object object, WidgetType type);
+}
+
 public delegate void MessageActionEvoked(Object button, Plugins.MetaConversationItem evoked_on, Object widget);
 public class MessageAction : Object {
     public string icon_name;

libdino/src/plugin/registry.vala

@@ -3,7 +3,7 @@ using Gee;
 namespace Dino.Plugins {
 
 public class Registry {
-    internal ArrayList<EncryptionListEntry> encryption_list_entries = new ArrayList<EncryptionListEntry>();
+    internal HashMap<Entities.Encryption, EncryptionListEntry> encryption_list_entries = new HashMap<Entities.Encryption, EncryptionListEntry>();
     internal HashMap<string, CallEncryptionEntry> call_encryption_entries = new HashMap<string, CallEncryptionEntry>();
     internal ArrayList<AccountSettingsEntry> account_settings_entries = new ArrayList<AccountSettingsEntry>();
     internal ArrayList<ContactDetailsProvider> contact_details_entries = new ArrayList<ContactDetailsProvider>();
@@ -17,11 +17,9 @@ public class Registry {
 
     public bool register_encryption_list_entry(EncryptionListEntry entry) {
         lock(encryption_list_entries) {
-            foreach(var e in encryption_list_entries) {
+            if (encryption_list_entries.has_key(entry.encryption)) return false;
-                if (e.encryption == entry.encryption) return false;
+
-            }
+            encryption_list_entries[entry.encryption] = entry;
-            encryption_list_entries.add(entry);
-            encryption_list_entries.sort((a,b) => b.name.collate(a.name));
             return true;
         }
     }

libdino/src/service/call_peer_state.vala

@@ -45,7 +45,10 @@ public class Dino.PeerState : Object {
         this.stream_interactor = stream_interactor;
         this.calls = stream_interactor.get_module(Calls.IDENTITY);
 
-        var session_info_type = stream_interactor.module_manager.get_module(call.account, Xep.JingleRtp.Module.IDENTITY).session_info_type;
+        Xep.JingleRtp.Module jinglertp_module = stream_interactor.module_manager.get_module(call.account, Xep.JingleRtp.Module.IDENTITY);
+        if (jinglertp_module == null) return;
+
+        var session_info_type = jinglertp_module.session_info_type;
         session_info_type.mute_update_received.connect((session,mute, name) => {
             if (this.sid != session.sid) return;
 

libdino/src/service/calls.vala

@@ -465,8 +465,8 @@ namespace Dino {
                 call_state.cim_message_type = message_stanza.type_;
 
                 Conversation? conversation = stream_interactor.get_module(ConversationManager.IDENTITY).approx_conversation_for_stanza(from_jid, to_jid, account, message_stanza.type_);
-                conversation.last_active = call_state.call.time;
                 if (conversation == null) return;
+                conversation.last_active = call_state.call.time;
 
                 if (call_state.call.direction == Call.DIRECTION_INCOMING) {
                     call_incoming(call_state.call, call_state, conversation, video_requested, multiparty);

libdino/src/service/content_item_store.vala

@@ -44,37 +44,11 @@ public class ContentItemStore : StreamInteractionModule, Object {
         Gee.TreeSet<ContentItem> items = new Gee.TreeSet<ContentItem>(ContentItem.compare_func);
 
         foreach (var row in select) {
-            int provider = row[db.content_item.content_type];
+            int id = row[db.content_item.id];
+            int content_type = row[db.content_item.content_type];
             int foreign_id = row[db.content_item.foreign_id];
             DateTime time = new DateTime.from_unix_utc(row[db.content_item.time]);
-            switch (provider) {
+            items.add(get_item(conversation, id, content_type, foreign_id, time));
-                case 1:
-                    Message? message = stream_interactor.get_module(MessageStorage.IDENTITY).get_message_by_id(foreign_id, conversation);
-                    if (message != null) {
-                        var message_item = new MessageItem(message, conversation, row[db.content_item.id]);
-                        message_item.time = time; // In case of message corrections, the original time should be used
-                        items.add(message_item);
-                    }
-                    break;
-                case 2:
-                    FileTransfer? file_transfer = stream_interactor.get_module(FileTransferStorage.IDENTITY).get_file_by_id(foreign_id, conversation);
-                    if (file_transfer != null) {
-                        Message? message = null;
-                        if (file_transfer.provider == 0 && file_transfer.info != null) {
-                            message = stream_interactor.get_module(MessageStorage.IDENTITY).get_message_by_id(int.parse(file_transfer.info), conversation);
-                        }
-                        var file_item = new FileItem(file_transfer, conversation, row[db.content_item.id], message);
-                        items.add(file_item);
-                    }
-                    break;
-                case 3:
-                    Call? call = stream_interactor.get_module(CallStore.IDENTITY).get_call_by_id(foreign_id, conversation);
-                    if (call != null) {
-                        var call_item = new CallItem(call, conversation, row[db.content_item.id]);
-                        items.add(call_item);
-                    }
-                    break;
-            }
         }
 
         Gee.List<ContentItem> ret = new ArrayList<ContentItem>();
@@ -84,7 +58,42 @@ public class ContentItemStore : StreamInteractionModule, Object {
         return ret;
     }
 
-    public ContentItem? get_item(Conversation conversation, int type, int foreign_id) {
+    public ContentItem get_item(Conversation conversation, int id, int content_type, int foreign_id, DateTime time) throws Error {
+        switch (content_type) {
+            case 1:
+                Message? message = stream_interactor.get_module(MessageStorage.IDENTITY).get_message_by_id(foreign_id, conversation);
+                if (message != null) {
+                    var message_item = new MessageItem(message, conversation, id);
+                    message_item.time = time; // In case of message corrections, the original time should be used
+                    return message_item;
+                }
+                break;
+            case 2:
+                FileTransfer? file_transfer = stream_interactor.get_module(FileTransferStorage.IDENTITY).get_file_by_id(foreign_id, conversation);
+                if (file_transfer != null) {
+                    Message? message = null;
+                    if (file_transfer.provider == 0 && file_transfer.info != null) {
+                        message = stream_interactor.get_module(MessageStorage.IDENTITY).get_message_by_id(int.parse(file_transfer.info), conversation);
+                    }
+                    var file_item = new FileItem(file_transfer, conversation, id, message);
+                    return file_item;
+                }
+                break;
+            case 3:
+                Call? call = stream_interactor.get_module(CallStore.IDENTITY).get_call_by_id(foreign_id, conversation);
+                if (call != null) {
+                    var call_item = new CallItem(call, conversation, id);
+                    return call_item;
+                }
+                break;
+            default:
+                warning("Unknown content item type: %i", content_type);
+                break;
+        }
+        throw new Error(-1, 0, "Bad content type %i or non existing content item %i", content_type, foreign_id);
+    }
+
+    public ContentItem? get_item_by_foreign(Conversation conversation, int type, int foreign_id) {
         QueryBuilder select = db.content_item.select()
             .with(db.content_item.content_type, "=", type)
             .with(db.content_item.foreign_id, "=", foreign_id);
@@ -122,6 +131,26 @@ public class ContentItemStore : StreamInteractionModule, Object {
         return get_items_from_query(select, conversation);
     }
 
+//    public Gee.List<ContentItemMeta> get_latest_meta(Conversation conversation, int count) {
+//        QueryBuilder select = db.content_item.select()
+//                .with(db.content_item.conversation_id, "=", conversation.id)
+//                .with(db.content_item.hide, "=", false)
+//                .order_by(db.content_item.time, "DESC")
+//                .order_by(db.content_item.id, "DESC")
+//                .limit(count);
+//
+//        var ret = new ArrayList<ContentItemMeta>();
+//        foreach (var row in select) {
+//            var item_meta = new ContentItemMeta() {
+//                id = row[db.content_item.id],
+//                content_type = row[db.content_item.content_type],
+//                foreign_id = row[db.content_item.foreign_id],
+//                time = new DateTime.from_unix_utc(row[db.content_item.time])
+//            };
+//        }
+//        return ret;
+//    }
+
     public Gee.List<ContentItem> get_before(Conversation conversation, ContentItem item, int count) {
         long time = (long) item.time.to_unix();
         QueryBuilder select = db.content_item.select()

libdino/src/service/counterpart_interaction_manager.vala

@@ -154,7 +154,7 @@ public class CounterpartInteractionManager : StreamInteractionModule, Object {
             conversation.read_up_to = message;
 
             // TODO: This only marks messages as read, not http file transfers.
-            ContentItem? content_item = stream_interactor.get_module(ContentItemStore.IDENTITY).get_item(conversation, 1, message.id);
+            ContentItem? content_item = stream_interactor.get_module(ContentItemStore.IDENTITY).get_item_by_foreign(conversation, 1, message.id);
             if (content_item == null) return;
             ContentItem? read_up_to_item = stream_interactor.get_module(ContentItemStore.IDENTITY).get_item_by_id(conversation, conversation.read_up_to_item);
             if (read_up_to_item != null && read_up_to_item.compare(content_item) > 0) return;

libdino/src/service/message_correction.vala

@@ -144,7 +144,7 @@ public class MessageCorrection : StreamInteractionModule, MessageListener {
     }
 
     private void on_received_correction(Conversation conversation, int message_id) {
-        ContentItem? content_item = stream_interactor.get_module(ContentItemStore.IDENTITY).get_item(conversation, 1, message_id);
+        ContentItem? content_item = stream_interactor.get_module(ContentItemStore.IDENTITY).get_item_by_foreign(conversation, 1, message_id);
         if (content_item != null) {
             received_correction(content_item);
         }

main/CMakeLists.txt

@@ -3,53 +3,55 @@ find_package(Gettext)
 include(${GETTEXT_USE_FILE})
 gettext_compile(${GETTEXT_PACKAGE} SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/po TARGET_NAME ${GETTEXT_PACKAGE}-translations)
 
+find_package(GTK4 REQUIRED)
 find_packages(MAIN_PACKAGES REQUIRED
     Gee
     GLib
     GModule
     GObject
-    GTK3
+    GTK4
     ICU
-    Gspell
 )
 
 set(RESOURCE_LIST
-    icons/dino-account-plus-symbolic.svg
+    icons/scalable/actions/dino-account-plus-symbolic.svg
-    icons/dino-changes-allowed-symbolic.svg
-    icons/dino-changes-prevent-symbolic.svg
-    icons/dino-conversation-list-placeholder-arrow.svg
-    icons/dino-double-tick-symbolic.svg
-    icons/dino-emoticon-symbolic.svg
-    icons/dino-qr-code-symbolic.svg
-    icons/dino-security-high-symbolic.svg
-    icons/dino-microphone-off-symbolic.svg
-    icons/dino-microphone-symbolic.svg
-    icons/dino-party-popper-symbolic.svg
-    icons/dino-phone-hangup-symbolic.svg
-    icons/dino-phone-in-talk-symbolic.svg
-    icons/dino-phone-missed-symbolic.svg
-    icons/dino-phone-ring-symbolic.svg
-    icons/dino-phone-symbolic.svg
-    icons/dino-status-away.svg
-    icons/dino-status-chat.svg
-    icons/dino-status-dnd.svg
-    icons/dino-status-online.svg
-    icons/im.dino.Dino.svg
-    icons/im.dino.Dino-symbolic.svg
-    icons/dino-tick-symbolic.svg
-    icons/dino-video-off-symbolic.svg
-    icons/dino-video-symbolic.svg
 
-    icons/dino-device-desktop-symbolic.svg
+    icons/scalable/apps/im.dino.Dino.svg
-    icons/dino-device-phone-symbolic.svg
+    icons/scalable/apps/im.dino.Dino-symbolic.svg
 
-    icons/dino-file-document-symbolic.svg
+    icons/scalable/devices/dino-device-desktop-symbolic.svg
-    icons/dino-file-download-symbolic.svg
+    icons/scalable/devices/dino-device-phone-symbolic.svg
-    icons/dino-file-image-symbolic.svg
+    icons/scalable/devices/dino-phone-hangup-symbolic.svg
-    icons/dino-file-music-symbolic.svg
+    icons/scalable/devices/dino-phone-in-talk-symbolic.svg
-    icons/dino-file-symbolic.svg
+    icons/scalable/devices/dino-phone-missed-symbolic.svg
-    icons/dino-file-table-symbolic.svg
+    icons/scalable/devices/dino-phone-ring-symbolic.svg
-    icons/dino-file-video-symbolic.svg
+    icons/scalable/devices/dino-phone-symbolic.svg
+
+    icons/scalable/emotes/dino-emoticon-symbolic.svg
+
+    icons/scalable/mimetypes/dino-file-document-symbolic.svg
+    icons/scalable/mimetypes/dino-file-download-symbolic.svg
+    icons/scalable/mimetypes/dino-file-image-symbolic.svg
+    icons/scalable/mimetypes/dino-file-music-symbolic.svg
+    icons/scalable/mimetypes/dino-file-symbolic.svg
+    icons/scalable/mimetypes/dino-file-table-symbolic.svg
+    icons/scalable/mimetypes/dino-file-video-symbolic.svg
+
+    icons/scalable/status/dino-double-tick-symbolic.svg
+    icons/scalable/status/dino-microphone-off-symbolic.svg
+    icons/scalable/status/dino-microphone-symbolic.svg
+    icons/scalable/status/dino-security-high-symbolic.svg
+    icons/scalable/status/dino-status-away.svg
+    icons/scalable/status/dino-status-chat.svg
+    icons/scalable/status/dino-status-dnd.svg
+    icons/scalable/status/dino-status-online.svg
+    icons/scalable/status/dino-tick-symbolic.svg
+    icons/scalable/status/dino-video-off-symbolic.svg
+    icons/scalable/status/dino-video-symbolic.svg
+
+    icons/scalable/ui/dino-conversation-list-placeholder-arrow.svg
+    icons/scalable/ui/dino-qr-code-symbolic.svg
+    icons/scalable/ui/dino-party-popper-symbolic.svg
 
     add_conversation/add_contact_dialog.ui
     add_conversation/add_groupchat_dialog.ui
@@ -60,13 +62,13 @@ set(RESOURCE_LIST
     call_widget.ui
     chat_input.ui
     contact_details_dialog.ui
+    conversation_item_widget.ui
     conversation_list_titlebar.ui
     conversation_list_titlebar_csd.ui
     conversation_row.ui
     conversation_view.ui
     file_default_widget.ui
     file_send_overlay.ui
-    emojichooser.ui
     global_search.ui
     conversation_content_view/item_metadata_header.ui
     conversation_content_view/view.ui
@@ -101,13 +103,13 @@ compile_gresources(
 
 unset(MAIN_EXTRA_OPTIONS)
 unset(MAIN_EXTRA_PACKAGES)
-find_package(GDK3)
-if(GDK3_WITH_X11)
-    set(MAIN_EXTRA_OPTIONS ${MAIN_EXTRA_OPTIONS} -D GDK3_WITH_X11)
-    set(MAIN_EXTRA_PACKAGES ${MAIN_EXTRA_PACKAGES} gdk-x11-3.0)
-endif(GDK3_WITH_X11)
 set(MAIN_EXTRA_OPTIONS ${MAIN_EXTRA_OPTIONS} --vapidir=${CMAKE_CURRENT_SOURCE_DIR}/vapi)
 
+set(MAIN_DEFINITIONS)
+if(GTK4_VERSION VERSION_GREATER_EQUAL "4.6")
+    set(MAIN_DEFINITIONS ${MAIN_DEFINITIONS} GTK_4_6)
+endif()
+
 vala_precompile(MAIN_VALA_C
 SOURCES
     src/main.vala
@@ -145,24 +147,6 @@ SOURCES
     src/ui/call_window/participant_widget.vala
     src/ui/call_window/video_settings_popover.vala
 
-    src/ui/chat_input/chat_input_controller.vala
-    src/ui/chat_input/chat_text_view.vala
-    src/ui/chat_input/edit_history.vala
-    src/ui/chat_input/encryption_button.vala
-    src/ui/chat_input/occupants_tab_completer.vala
-    src/ui/chat_input/smiley_converter.vala
-    src/ui/chat_input/spell_checker.vala
-    src/ui/chat_input/view.vala
-
-    src/ui/contact_details/blocking_provider.vala
-    src/ui/contact_details/settings_provider.vala
-    src/ui/contact_details/permissions_provider.vala
-    src/ui/contact_details/dialog.vala
-    src/ui/contact_details/muc_config_form_provider.vala
-
-    src/ui/conversation_selector/conversation_selector_row.vala
-    src/ui/conversation_selector/conversation_selector.vala
-
     src/ui/conversation_content_view/call_widget.vala
     src/ui/conversation_content_view/chat_state_populator.vala
     src/ui/conversation_content_view/content_populator.vala
@@ -175,6 +159,22 @@ SOURCES
     src/ui/conversation_content_view/message_widget.vala
     src/ui/conversation_content_view/subscription_notification.vala
 
+    src/ui/chat_input/chat_input_controller.vala
+    src/ui/chat_input/chat_text_view.vala
+    src/ui/chat_input/encryption_button.vala
+    src/ui/chat_input/occupants_tab_completer.vala
+    src/ui/chat_input/smiley_converter.vala
+    src/ui/chat_input/view.vala
+
+    src/ui/contact_details/blocking_provider.vala
+    src/ui/contact_details/settings_provider.vala
+    src/ui/contact_details/permissions_provider.vala
+    src/ui/contact_details/dialog.vala
+    src/ui/contact_details/muc_config_form_provider.vala
+
+    src/ui/conversation_selector/conversation_selector.vala
+    src/ui/conversation_selector/conversation_selector_row.vala
+
     src/ui/conversation_titlebar/call_entry.vala
     src/ui/conversation_titlebar/menu_entry.vala
     src/ui/conversation_titlebar/occupants_entry.vala
@@ -197,28 +197,28 @@ SOURCES
     src/ui/util/sizing_bin.vala
     src/ui/util/size_request_box.vala
     src/ui/util/scaling_image.vala
-    src/ui/util/preview_file_chooser_native.vala
 CUSTOM_VAPIS
     ${CMAKE_BINARY_DIR}/exports/xmpp-vala.vapi
     ${CMAKE_BINARY_DIR}/exports/qlite.vapi
     ${CMAKE_BINARY_DIR}/exports/dino_internal.vapi
-    vapi/emojichooser.vapi
 PACKAGES
     ${MAIN_PACKAGES}
     ${MAIN_EXTRA_PACKAGES}
 GRESOURCES
     ${MAIN_GRESOURCES_XML}
+DEFINITIONS
+    ${MAIN_DEFINITIONS}
 OPTIONS
     ${MAIN_EXTRA_OPTIONS}
 )
 
-add_definitions(${VALA_CFLAGS} -DGETTEXT_PACKAGE=\"${GETTEXT_PACKAGE}\" -DLOCALE_INSTALL_DIR=\"${LOCALE_INSTALL_DIR}\")
+add_definitions(${VALA_CFLAGS} -DGETTEXT_PACKAGE=\"${GETTEXT_PACKAGE}\" -DLOCALE_INSTALL_DIR=\"${LOCALE_INSTALL_DIR}\" -DG_LOG_DOMAIN="dino")
 if(WIN32)
     add_link_options("-Wl,--export-all-symbols")
     set(CMAKE_RC_COMPILE_OBJECT "<CMAKE_RC_COMPILER> --use-temp-file -O coff <DEFINES> -i <SOURCE> -o <OBJECT>")
-    add_executable(dino ${MAIN_VALA_C} ${MAIN_GRESOURCES_TARGET} src/emojichooser.c dino-info.rc)
+    add_executable(dino ${MAIN_VALA_C} ${MAIN_GRESOURCES_TARGET} dino-info.rc)
 else(WIN32)
-    add_executable(dino ${MAIN_VALA_C} ${MAIN_GRESOURCES_TARGET} src/emojichooser.c)
+    add_executable(dino ${MAIN_VALA_C} ${MAIN_GRESOURCES_TARGET})
 endif(WIN32)
 add_dependencies(dino ${GETTEXT_PACKAGE}-translations)
 target_include_directories(dino PRIVATE src)
@@ -232,18 +232,5 @@ install(TARGETS dino ${TARGET_INSTALL})
 install(FILES data/im.dino.Dino.appdata.xml DESTINATION ${APPDATA_FILE_INSTALL_DIR})
 install(FILES data/im.dino.Dino.desktop DESTINATION ${DESKTOP_FILE_INSTALL_DIR})
 install(FILES data/im.dino.Dino.service DESTINATION ${SERVICE_FILE_INSTALL_DIR})
-install(FILES data/icons/im.dino.Dino.svg DESTINATION ${ICON_INSTALL_DIR}/hicolor/scalable/apps)
+install(FILES data/icons/scalable/apps/im.dino.Dino.svg DESTINATION ${ICON_INSTALL_DIR}/hicolor/scalable/apps)
-install(FILES data/icons/im.dino.Dino-symbolic.svg DESTINATION ${ICON_INSTALL_DIR}/hicolor/symbolic/apps)
+install(FILES data/icons/scalable/apps/im.dino.Dino-symbolic.svg DESTINATION ${ICON_INSTALL_DIR}/hicolor/symbolic/apps)
-install(FILES
-    data/icons/dino-status-away.svg
-    data/icons/dino-status-chat.svg
-    data/icons/dino-status-dnd.svg
-    data/icons/dino-status-online.svg
-
-    data/icons/dino-changes-prevent-symbolic.svg
-    data/icons/dino-double-tick-symbolic.svg
-    data/icons/dino-qr-code-symbolic.svg
-    data/icons/dino-tick-symbolic.svg
-DESTINATION
-    ${ICON_INSTALL_DIR}/hicolor/scalable/status
-)

main/data/add_conversation/add_contact_dialog.ui

@@ -1,128 +1,101 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiAddContactDialog">
+        <property name="title" translatable="1">Add Contact</property>
         <property name="valign">center</property>
         <property name="modal">True</property>
         <child type="titlebar">
             <object class="GtkHeaderBar">
-                <property name="title" translatable="yes">Add Contact</property>
+                <property name="show-title-buttons">False</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkButton" id="cancel_button">
-                        <property name="label" translatable="yes">Cancel</property>
+                        <property name="label" translatable="1">Cancel</property>
-                        <property name="sensitive">True</property>
-                        <property name="visible">True</property>
                     </object>
-                    <packing>
-                        <property name="pack_type">start</property>
-                    </packing>
                 </child>
-                <child>
+                <child type="end">
                     <object class="GtkButton" id="ok_button">
-                        <property name="has_default">True</property>
+                        <property name="label" translatable="1">Add</property>
-                        <property name="can_default">True</property>
+                        <property name="sensitive">0</property>
-                        <property name="label" translatable="yes">Add</property>
-                        <property name="sensitive">False</property>
-                        <property name="visible">True</property>
                         <style>
                             <class name="suggested-action"/>
                         </style>
                     </object>
-                    <packing>
-                        <property name="pack_type">end</property>
-                    </packing>
                 </child>
             </object>
         </child>
-        <child internal-child="vbox">
+        <child internal-child="content_area">
             <object class="GtkBox">
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkGrid" id="info_grid">
                         <property name="orientation">vertical</property>
-                        <property name="margin">20</property>
+                        <property name="margin-start">20</property>
+                        <property name="margin-end">20</property>
+                        <property name="margin-top">20</property>
+                        <property name="margin-bottom">20</property>
                         <property name="row-spacing">7</property>
                         <property name="column-spacing">10</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Account</property>
+                                <property name="label" translatable="1">Account</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">0</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="DinoUiAccountComboBox" id="account_combobox">
                                 <property name="hexpand">True</property>
                                 <property name="width_request">200</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">0</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel">
                                 <property name="label">JID</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">1</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkEntry" id="jid_entry">
-                                <property name="activates_default">True</property>
+                                <property name="activates_default">1</property>
-                                <property name="hexpand">True</property>
+                                <property name="hexpand">1</property>
                                 <property name="width_request">200</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">1</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Alias</property>
+                                <property name="label" translatable="1">Alias</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">2</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">2</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkEntry" id="alias_entry">
-                                <property name="activates_default">True</property>
+                                <property name="activates_default">1</property>
-                                <property name="hexpand">True</property>
+                                <property name="hexpand">1</property>
                                 <property name="width_request">200</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">2</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">2</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                     </object>
                 </child>
@@ -133,4 +106,4 @@
             <action-widget response="ok" default="true">ok_button</action-widget>
         </action-widgets>
     </template>
-</interface>
+</interface>

main/data/add_conversation/add_groupchat_dialog.ui

@@ -1,201 +1,164 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiAddGroupchatDialog">
         <property name="valign">center</property>
         <property name="modal">True</property>
         <child type="titlebar">
             <object class="GtkHeaderBar">
-                <property name="visible">True</property>
+                <property name="show-title-buttons">False</property>
                 <child>
                     <object class="GtkButton" id="cancel_button">
-                        <property name="label" translatable="yes">Cancel</property>
+                        <property name="label" translatable="1">Cancel</property>
-                        <property name="sensitive">True</property>
-                        <property name="visible">True</property>
                     </object>
-                    <packing>
-                        <property name="pack_type">start</property>
-                    </packing>
                 </child>
-                <child>
+                <child type="end">
                     <object class="GtkButton" id="ok_button">
-                        <property name="can_default">True</property>
+                        <property name="sensitive">0</property>
-                        <property name="has_default">True</property>
-                        <property name="sensitive">False</property>
-                        <property name="visible">True</property>
                         <style>
                             <class name="suggested-action"/>
                         </style>
                     </object>
-                    <packing>
-                        <property name="pack_type">end</property>
-                    </packing>
                 </child>
             </object>
         </child>
-        <child internal-child="vbox">
+        <child internal-child="content_area">
             <object class="GtkBox" id="main">
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkGrid">
                         <property name="orientation">vertical</property>
-                        <property name="margin">20</property>
+                        <property name="margin-start">20</property>
+                        <property name="margin-end">20</property>
+                        <property name="margin-top">20</property>
+                        <property name="margin-bottom">20</property>
                         <property name="margin-start">40</property>
                         <property name="margin-end">40</property>
                         <property name="row-spacing">7</property>
                         <property name="column-spacing">10</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Account</property>
+                                <property name="label" translatable="1">Account</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">0</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkStack" id="accounts_stack">
-                                <property name="visible">True</property>
                                 <child>
-                                    <object class="DinoUiAccountComboBox" id="account_combobox">
+                                    <object class="GtkStackPage">
-                                        <property name="hexpand">True</property>
-                                        <property name="width_request">200</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                    <packing>
                                         <property name="name">combobox</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="DinoUiAccountComboBox" id="account_combobox">
+                                                <property name="hexpand">True</property>
+                                                <property name="width_request">200</property>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
                                 <child>
-                                    <object class="GtkLabel" id="account_label">
+                                    <object class="GtkStackPage">
-                                        <property name="xalign">0</property>
-                                        <property name="can_focus">True</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                    <packing>
                                         <property name="name">label</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkLabel" id="account_label">
+                                                <property name="xalign">0</property>
+                                                <property name="focusable">1</property>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">0</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel">
                                 <property name="label">JID</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">1</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkEntry" id="jid_entry">
-                                <property name="activates_default">True</property>
+                                <property name="activates_default">1</property>
-                                <property name="hexpand">True</property>
+                                <property name="hexpand">1</property>
                                 <property name="width_request">200</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">1</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Nick</property>
+                                <property name="label" translatable="1">Nick</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">2</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">2</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkEntry" id="nick_entry">
-                                <property name="activates_default">True</property>
+                                <property name="activates_default">1</property>
-                                <property name="hexpand">True</property>
+                                <property name="hexpand">1</property>
                                 <property name="width_request">200</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">2</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">2</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Password</property>
+                                <property name="label" translatable="1">Password</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">3</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">3</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkEntry" id="password_entry">
-                                <property name="activates_default">True</property>
+                                <property name="activates_default">1</property>
-                                <property name="visibility">False</property>
+                                <property name="visibility">0</property>
-                                <property name="hexpand">True</property>
+                                <property name="hexpand">1</property>
                                 <property name="width_request">200</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">3</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">3</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel" id="alias_label">
-                                <property name="label" translatable="yes">Alias</property>
+                                <property name="label" translatable="1">Alias</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">5</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">5</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkEntry" id="alias_entry">
-                                <property name="activates_default">True</property>
+                                <property name="activates_default">1</property>
-                                <property name="hexpand">True</property>
+                                <property name="hexpand">1</property>
                                 <property name="width_request">200</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">5</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">5</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                     </object>
                 </child>
@@ -206,4 +169,4 @@
             <action-widget response="ok" default="true">ok_button</action-widget>
         </action-widgets>
     </template>
-</interface>
+</interface>

main/data/add_conversation/conference_details_fragment.ui

@@ -1,272 +1,236 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiConferenceDetailsFragment">
-        <property name="visible">True</property>
         <child>
             <object class="GtkOverlay">
-                <property name="visible">True</property>
+                <property name="child">
-                <child>
                     <object class="GtkGrid">
                         <property name="orientation">vertical</property>
-                        <property name="margin">20</property>
+                        <property name="margin-start">20</property>
+                        <property name="margin-end">20</property>
+                        <property name="margin-top">20</property>
+                        <property name="margin-bottom">20</property>
                         <property name="margin_end">40</property>
                         <property name="margin_start">40</property>
                         <property name="row-spacing">7</property>
                         <property name="column-spacing">10</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Account</property>
+                                <property name="label" translatable="1">Account</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="dim-label"/>
                                 </style>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">0</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkStack" id="accounts_stack">
-                                <property name="visible">True</property>
                                 <child>
-                                    <object class="GtkButton" id="accounts_button">
+                                    <object class="GtkStackPage">
-                                        <property name="relief">none</property>
-                                        <property name="visible">True</property>
-                                        <child>
-                                            <object class="GtkLabel" id="accounts_label">
-                                                <property name="xalign">0</property>
-                                                <property name="visible">True</property>
-                                            </object>
-                                        </child>
-                                    </object>
-                                    <packing>
                                         <property name="name">label</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkButton" id="accounts_button">
+                                                <property name="has-frame">False</property>
+                                                <child>
+                                                    <object class="GtkLabel" id="accounts_label">
+                                                        <property name="xalign">0</property>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
                                 <child>
-                                    <object class="DinoUiAccountComboBox" id="account_combobox">
+                                    <object class="GtkStackPage">
-                                        <property name="hexpand">True</property>
-                                        <property name="width_request">200</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                    <packing>
                                         <property name="name">entry</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="DinoUiAccountComboBox" id="account_combobox">
+                                                <property name="hexpand">True</property>
+                                                <property name="width_request">200</property>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">0</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel">
                                 <property name="label">JID</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="dim-label"/>
                                 </style>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">1</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkStack" id="jid_stack">
-                                <property name="visible">True</property>
                                 <child>
-                                    <object class="GtkButton" id="jid_button">
+                                    <object class="GtkStackPage">
-                                        <property name="relief">none</property>
-                                        <property name="visible">True</property>
-                                        <child>
-                                            <object class="GtkLabel" id="jid_label">
-                                                <property name="xalign">0</property>
-                                                <property name="visible">True</property>
-                                            </object>
-                                        </child>
-                                    </object>
-                                    <packing>
                                         <property name="name">label</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkButton" id="jid_button">
+                                                <property name="has-frame">False</property>
+                                                <child>
+                                                    <object class="GtkLabel" id="jid_label">
+                                                        <property name="xalign">0</property>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
                                 <child>
-                                    <object class="GtkEntry" id="jid_entry">
+                                    <object class="GtkStackPage">
-                                        <property name="hexpand">True</property>
-                                        <property name="width_request">200</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                    <packing>
                                         <property name="name">entry</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkEntry" id="jid_entry">
+                                                <property name="hexpand">1</property>
+                                                <property name="width_request">200</property>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">1</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Nick</property>
+                                <property name="label" translatable="1">Nick</property>
                                 <property name="xalign">1</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="dim-label"/>
                                 </style>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">2</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">2</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkStack" id="nick_stack">
-                                <property name="visible">True</property>
                                 <child>
-                                    <object class="GtkButton" id="nick_button">
+                                    <object class="GtkStackPage">
-                                        <property name="relief">none</property>
-                                        <property name="visible">True</property>
-                                        <child>
-                                            <object class="GtkLabel" id="nick_label">
-                                                <property name="xalign">0</property>
-                                                <property name="visible">True</property>
-                                            </object>
-                                        </child>
-                                    </object>
-                                    <packing>
                                         <property name="name">label</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkButton" id="nick_button">
+                                                <property name="has-frame">False</property>
+                                                <child>
+                                                    <object class="GtkLabel" id="nick_label">
+                                                        <property name="xalign">0</property>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
                                 <child>
-                                    <object class="GtkEntry" id="nick_entry">
+                                    <object class="GtkStackPage">
-                                        <property name="hexpand">True</property>
-                                        <property name="width_request">200</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                    <packing>
                                         <property name="name">entry</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkEntry" id="nick_entry">
+                                                <property name="hexpand">1</property>
+                                                <property name="width_request">200</property>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">2</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">2</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkLabel" id="password_text_label">
-                                <property name="label" translatable="yes">Password</property>
+                                <property name="visible">0</property>
+                                <property name="label" translatable="1">Password</property>
                                 <property name="xalign">1</property>
                                 <style>
                                     <class name="dim-label"/>
                                 </style>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">3</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">3</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkStack" id="password_stack">
+                                <property name="visible">0</property>
                                 <child>
-                                    <object class="GtkButton" id="password_button">
+                                    <object class="GtkStackPage">
-                                        <property name="relief">none</property>
-                                        <property name="visible">True</property>
-                                        <child>
-                                            <object class="GtkLabel" id="password_label">
-                                                <property name="xalign">0</property>
-                                                <property name="visible">True</property>
-                                            </object>
-                                        </child>
-                                    </object>
-                                    <packing>
                                         <property name="name">label</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkButton" id="password_button">
+                                                <property name="has-frame">False</property>
+                                                <child>
+                                                    <object class="GtkLabel" id="password_label">
+                                                        <property name="xalign">0</property>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
                                 <child>
-                                    <object class="GtkEntry" id="password_entry">
+                                    <object class="GtkStackPage">
-                                        <property name="hexpand">True</property>
-                                        <property name="width_request">200</property>
-                                        <property name="visibility">False</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                    <packing>
                                         <property name="name">entry</property>
-                                    </packing>
+                                        <property name="child">
+                                            <object class="GtkEntry" id="password_entry">
+                                                <property name="hexpand">1</property>
+                                                <property name="width_request">200</property>
+                                                <property name="visibility">0</property>
+                                            </object>
+                                        </property>
+                                    </object>
                                 </child>
+                                <layout>
+                                    <property name="column">1</property>
+                                    <property name="row">3</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">1</property>
-                                <property name="top_attach">3</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                     </object>
-                    <packing>
+                </property>
-                        <property name="index">-1</property>
-                    </packing>
-                </child>
                 <child type="overlay">
                     <object class="GtkRevealer" id="notification_revealer">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
                         <property name="halign">center</property>
                         <property name="valign">start</property>
-                        <child>
+                        <property name="child">
                             <object class="GtkFrame" id="frame2">
-                                <property name="visible">True</property>
+<!--                                <property name="shadow_type">none</property>-->
-                                <property name="can_focus">False</property>
-                                <property name="label_xalign">0</property>
-                                <property name="shadow_type">none</property>
                                 <style>
                                     <class name="app-notification"/>
                                 </style>
-                                <child>
+                                <property name="child">
                                     <object class="GtkBox" id="box2">
-                                        <property name="visible">True</property>
-                                        <property name="can_focus">False</property>
                                         <property name="spacing">20</property>
                                         <child>
-                                            <object class="GtkLabel" id="notification_label">
+                                            <object class="GtkLabel" id="notification_label"/>
-                                                <property name="visible">True</property>
-                                                <property name="can_focus">False</property>
-                                            </object>
-                                            <packing>
-                                                <property name="expand">False</property>
-                                                <property name="fill">True</property>
-                                                <property name="position">0</property>
-                                            </packing>
                                         </child>
                                         <child>
                                             <object class="GtkButton" id="notification_button">
-                                                <property name="visible">True</property>
+                                                <property name="focusable">1</property>
-                                                <property name="can_focus">True</property>
+                                                <property name="receives_default">1</property>
-                                                <property name="receives_default">True</property>
+                                                <property name="has-frame">False</property>
-                                                <property name="relief">none</property>
                                                 <child>
                                                     <object class="GtkImage" id="image2">
-                                                        <property name="visible">True</property>
-                                                        <property name="can_focus">False</property>
                                                         <property name="icon_name">window-close-symbolic</property>
                                                     </object>
                                                 </child>
@@ -274,19 +238,14 @@
                                                     <class name="image-button"/>
                                                 </style>
                                             </object>
-                                            <packing>
-                                                <property name="expand">False</property>
-                                                <property name="fill">True</property>
-                                                <property name="position">1</property>
-                                            </packing>
                                         </child>
                                     </object>
-                                </child>
+                                </property>
                                 <child type="label_item">
                                     <placeholder/>
                                 </child>
                             </object>
-                        </child>
+                        </property>
                     </object>
                 </child>
             </object>

main/data/add_conversation/list_row.ui

@@ -1,62 +1,51 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiListRow" parent="GtkListBoxRow">
+    <requires lib="gtk" version="4.0"/>
-        <property name="visible">True</property>
+    <object class="GtkGrid" id="outer_grid">
+        <property name="margin-start">3</property>
+        <property name="margin-end">3</property>
+        <property name="margin-top">3</property>
+        <property name="margin-bottom">3</property>
+        <property name="column-spacing">10</property>
         <child>
-            <object class="GtkGrid" id="outer_grid">
+            <object class="DinoUiAvatarImage" id="image">
-                <property name="orientation">horizontal</property>
+                <property name="allow_gray">False</property>
-                <property name="margin">3</property>
+                <property name="height">30</property>
-                <property name="column-spacing">10</property>
+                <property name="width">30</property>
-                <property name="visible">True</property>
+                <property name="valign">center</property>
+            </object>
+        </child>
+        <child>
+            <object class="GtkGrid">
+                <property name="orientation">vertical</property>
                 <child>
-                    <object class="DinoUiAvatarImage" id="image">
+                    <object class="GtkLabel" id="name_label">
-                        <property name="allow_gray">False</property>
+                        <property name="max_width_chars">1</property>
-                        <property name="height">30</property>
+                        <property name="ellipsize">end</property>
-                        <property name="width">30</property>
+                        <property name="hexpand">1</property>
-                        <property name="valign">center</property>
+                        <property name="xalign">0</property>
-                        <property name="visible">True</property>
+                        <layout>
+                            <property name="column">0</property>
+                            <property name="row">0</property>
+                        </layout>
                     </object>
                 </child>
                 <child>
-                    <object class="GtkGrid">
+                    <object class="GtkLabel" id="via_label">
-                        <property name="orientation">vertical</property>
+                        <property name="max_width_chars">1</property>
-                        <property name="visible">True</property>
+                        <property name="ellipsize">end</property>
-                        <child>
+                        <property name="hexpand">1</property>
-                            <object class="GtkLabel" id="name_label">
+                        <property name="xalign">0</property>
-                                <property name="max_width_chars">1</property>
+                        <attributes>
-                                <property name="ellipsize">end</property>
+                            <attribute name="scale" value="0.8"></attribute>
-                                <property name="expand">True</property>
+                        </attributes>
-                                <property name="xalign">0</property>
+                        <layout>
-                                <property name="visible">True</property>
+                            <property name="column">0</property>
-                            </object>
+                            <property name="row">1</property>
-                            <packing>
+                        </layout>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
-                        </child>
-                        <child>
-                            <object class="GtkLabel" id="via_label">
-                                <property name="max_width_chars">1</property>
-                                <property name="ellipsize">end</property>
-                                <property name="expand">True</property>
-                                <property name="xalign">0</property>
-                                <property name="visible">True</property>
-                                <attributes>
-                                    <attribute name="scale" value="0.8"/>
-                                </attributes>
-                            </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
-                        </child>
                     </object>
                 </child>
             </object>
         </child>
-    </template>
+    </object>
 </interface>

main/data/add_conversation/select_jid_fragment.ui

@@ -1,86 +1,69 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiSelectJidFragment">
         <property name="height_request">500</property>
         <property name="width_request">460</property>
-        <property name="visible">True</property>
         <child>
             <object class="GtkGrid">
-                <property name="expand">True</property>
+                <property name="hexpand">1</property>
                 <property name="margin-top">20</property>
-                <property name="margin-right">80</property>
+                <property name="margin-end">80</property>
                 <property name="margin-bottom">20</property>
-                <property name="margin-left">80</property>
+                <property name="margin-start">80</property>
                 <property name="orientation">vertical</property>
                 <property name="row-spacing">10</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkEntry" id="entry">
-                        <property name="activates_default">True</property>
+                        <property name="activates_default">1</property>
-                        <property name="hexpand">True</property>
+                        <property name="hexpand">1</property>
-                        <property name="visible">True</property>
                     </object>
                 </child>
                 <child>
                     <object class="GtkBox">
-                        <property name="expand">True</property>
+                        <property name="hexpand">1</property>
+                        <property name="vexpand">1</property>
                         <property name="orientation">vertical</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkFrame">
-                                <property name="visible">True</property>
+                                <property name="child">
-                                <child>
                                     <object class="GtkScrolledWindow" id="scrolled_window">
                                         <property name="hscrollbar_policy">never</property>
-                                        <property name="expand">True</property>
+                                        <property name="hexpand">1</property>
-                                        <property name="visible">True</property>
+                                        <property name="vexpand">1</property>
-                                        <child>
+                                        <property name="child">
                                             <object class="GtkBox" id="box">
                                                 <property name="orientation">vertical</property>
-                                                <property name="visible">True</property>
+                                            </object>
+                                        </property>
+                                    </object>
+                                </property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkBox">
+                                <property name="css-classes">toolbar</property>
+                                <style>
+                                    <class name="toolbar"/>
+                                    <class name="inline-toolbar"/>
+                                </style>
+                                <child>
+                                    <object class="GtkButton" id="add_button">
+                                        <child>
+                                            <object class="GtkImage">
+                                                <property name="icon-name">list-add-symbolic</property>
+                                                <property name="icon-size">normal</property>
                                             </object>
                                         </child>
                                     </object>
                                 </child>
-                            </object>
-                        </child>
-                        <child>
-                            <object class="GtkToolbar">
-                                <property name="visible">True</property>
-                                <style>
-                                    <class name="inline-toolbar"/>
-                                </style>
                                 <child>
-                                    <object class="GtkToolItem">
+                                    <object class="GtkButton" id="remove_button">
-                                        <property name="visible">True</property>
+                                        <property name="sensitive">0</property>
                                         <child>
-                                            <object class="GtkBox">
+                                            <object class="GtkImage">
-                                                <property name="visible">True</property>
+                                                <property name="icon-name">list-remove-symbolic</property>
-                                                <child>
+                                                <property name="icon-size">normal</property>
-                                                    <object class="GtkButton" id="add_button">
-                                                        <property name="visible">True</property>
-                                                        <child>
-                                                            <object class="GtkImage">
-                                                                <property name="icon-name">list-add-symbolic</property>
-                                                                <property name="icon-size">1</property>
-                                                                <property name="visible">True</property>
-                                                            </object>
-                                                        </child>
-                                                    </object>
-                                                </child>
-                                                <child>
-                                                    <object class="GtkButton" id="remove_button">
-                                                        <property name="sensitive">False</property>
-                                                        <property name="visible">True</property>
-                                                        <child>
-                                                            <object class="GtkImage">
-                                                                <property name="icon-name">list-remove-symbolic</property>
-                                                                <property name="icon-size">1</property>
-                                                                <property name="visible">True</property>
-                                                            </object>
-                                                        </child>
-                                                    </object>
-                                                </child>
                                             </object>
                                         </child>
                                     </object>

main/data/call_widget.ui

@@ -10,46 +10,38 @@
                 <property name="target-width">350</property>
                 <property name="max-width">350</property>
                 <property name="hexpand">True</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkBox">
                         <property name="orientation">vertical</property>
                         <property name="halign">fill</property>
                         <property name="hexpand">true</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkBox">
                                 <property name="orientation">horizontal</property>
                                 <property name="spacing">10</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="call-box"/>
                                 </style>
                                 <child>
                                     <object class="GtkImage" id="image">
-                                        <property name="icon-size">5</property>
                                         <property name="opacity">0.7</property>
-                                        <property name="visible">True</property>
                                     </object>
                                 </child>
                                 <child>
                                     <object class="GtkBox">
                                         <property name="orientation">vertical</property>
                                         <property name="hexpand">True</property>
-                                        <property name="visible">True</property>
                                         <child>
                                             <object class="GtkLabel" id="title_label">
                                                 <property name="ellipsize">middle</property>
                                                 <property name="xalign">0</property>
                                                 <property name="yalign">0</property>
-                                                <property name="visible">True</property>
                                             </object>
                                         </child>
                                         <child>
                                             <object class="GtkLabel" id="subtitle_label">
                                                 <property name="xalign">0</property>
                                                 <property name="yalign">1</property>
-                                                <property name="visible">True</property>
                                                 <attributes>
                                                     <attribute name="scale" value="0.8"/>
                                                 </attributes>
@@ -64,21 +56,21 @@
                                 <property name="transition-type">slide-down</property>
                                 <property name="transition-duration">200</property>
                                 <property name="reveal-child">True</property>
-                                <property name="visible">True</property>
                                 <child>
                                     <object class="GtkBox" id="outer_additional_box">
-                                        <property name="visible">True</property>
                                         <child>
                                             <object class="GtkBox" id="incoming_call_box">
                                                 <property name="halign">end</property>
                                                 <property name="orientation">horizontal</property>
                                                 <property name="spacing">5</property>
-                                                <property name="margin">10</property>
+                                                <property name="margin_top">10</property>
+                                                <property name="margin_bottom">10</property>
+                                                <property name="margin_start">10</property>
+                                                <property name="margin_end">10</property>
                                                 <property name="hexpand">True</property>
                                                 <child>
                                                     <object class="GtkButton" id="reject_call_button">
                                                         <property name="label" translatable="yes">Reject</property>
-                                                        <property name="visible">True</property>
                                                         <style>
                                                             <class name="destructive-action"/>
                                                         </style>
@@ -87,7 +79,6 @@
                                                 <child>
                                                     <object class="GtkButton" id="accept_call_button">
                                                         <property name="label" translatable="yes">Accept</property>
-                                                        <property name="visible">True</property>
                                                         <style>
                                                             <class name="suggested-action"/>
                                                         </style>
@@ -97,7 +88,10 @@
                                         </child>
                                         <child>
                                             <object class="GtkBox" id="multiparty_peer_box">
-                                                <property name="margin">10</property>
+                                                <property name="margin_top">10</property>
+                                                <property name="margin_bottom">10</property>
+                                                <property name="margin_start">10</property>
+                                                <property name="margin_end">10</property>
                                                 <property name="spacing">7</property>
                                                 <property name="hexpand">True</property>
                                             </object>

main/data/chat_input.ui

@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <requires lib="gtk+" version="3.22"/>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiChatInputView">
         <property name="hexpand">True</property>
         <property name="orientation">vertical</property>
-        <property name="visible">True</property>
         <style>
             <class name="dino-chatinput"/>
         </style>
@@ -12,46 +11,59 @@
             <object class="GtkFrame" id="frame">
                 <property name="margin_start">14</property>
                 <property name="margin_end">14</property>
-                <property name="visible">True</property>
+                <property name="child">
-                <child>
                     <object class="GtkBox" id="outer_box">
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkButton" id="file_button">
-                                <property name="tooltip-text" translatable="yes">Send a file</property>
+                                <property name="icon-name">mail-attachment-symbolic</property>
-                                <property name="can-focus">False</property>
+                                <property name="margin-top">2</property>
-                                <property name="margin-top">3</property>
-                                <property name="relief">none</property>
                                 <property name="valign">start</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="flat"/>
                                     <class name="dino-chatinput-button"/>
+                                    <class name="dino-attach-button"/>
                                     <class name="image-button"/>
                                 </style>
-                                <child>
-                                    <object class="GtkImage">
-                                        <property name="icon-name">mail-attachment-symbolic</property>
-                                        <property name="icon-size">1</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                </child>
                             </object>
                         </child>
                         <child>
                             <object class="GtkSeparator" id="file_separator">
                                 <property name="orientation">vertical</property>
-                                <property name="visible">True</property>
                             </object>
                         </child>
                         <child>
                             <object class="DinoUiChatTextView" id="chat_text_view">
-                                <property name="visible">True</property>
+                                <property name="margin_start">7</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkMenuButton" id="emoji_button">
+                                <property name="icon-name">dino-emoticon-symbolic</property>
+                                <property name="has-frame">False</property>
+                                <property name="margin-top">2</property>
+                                <property name="valign">start</property>
+                                <style>
+                                    <class name="flat"/>
+                                    <class name="dino-chatinput-button"/>
+                                    <class name="image-button"/>
+                                </style>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkMenuButton" id="encryption_button">
+                                <property name="icon-name">changes-allow-symbolic</property>
+                                <property name="has-frame">False</property>
+                                <property name="margin-top">2</property>
+                                <property name="valign">start</property>
+                                <style>
+                                    <class name="flat"/>
+                                    <class name="dino-chatinput-button"/>
+                                    <class name="image-button"/>
+                                </style>
                             </object>
                         </child>
                     </object>
-                </child>
+                </property>
             </object>
         </child>
         <child>
@@ -60,9 +72,8 @@
                 <property name="margin_bottom">3</property>
                 <property name="margin_start">14</property>
                 <property name="margin_end">14</property>
-                <property name="visible">True</property>
                 <attributes>
-                    <attribute name="scale" value="0.8"/>
+                    <attribute name="scale" value="0.8"></attribute>
                 </attributes>
                 <style>
                     <class name="chat-input-status"/>

main/data/contact_details_dialog.ui

@@ -1,122 +1,107 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiContactDetailsDialog">
+        <property name="title">Conversation Details</property>
         <property name="modal">True</property>
         <child type="titlebar">
             <object class="GtkHeaderBar">
-                <property name="title">Conversation Details</property>
-                <property name="show_close_button">True</property>
-                <property name="visible">True</property>
             </object>
         </child>
-        <child internal-child="vbox">
+        <child internal-child="content_area">
             <object class="GtkBox">
-                <property name="expand">True</property>
+                <property name="hexpand">1</property>
-                <property name="visible">True</property>
+                <property name="vexpand">1</property>
                 <child>
                     <object class="GtkScrolledWindow">
-                        <property name="propagate_natural_height">True</property>
+                        <property name="propagate_natural_height">1</property>
                         <property name="max_content_height">500</property>
                         <property name="hscrollbar_policy">never</property>
-                        <property name="expand">True</property>
+                        <property name="hexpand">1</property>
-                        <property name="visible">True</property>
+                        <property name="vexpand">1</property>
-                        <child>
+                        <property name="child">
                             <object class="GtkBox">
                                 <property name="orientation">vertical</property>
-                                <property name="visible">True</property>
                                 <child>
                                     <object class="GtkGrid">
                                         <property name="margin-top">20</property>
                                         <property name="margin-bottom">12</property>
-                                        <property name="margin-right">100</property>
+                                        <property name="margin-end">100</property>
-                                        <property name="margin-left">100</property>
+                                        <property name="margin-start">100</property>
                                         <property name="column-spacing">10</property>
-                                        <property name="visible">True</property>
                                         <child>
                                             <object class="DinoUiAvatarImage" id="avatar">
                                                 <property name="height">50</property>
                                                 <property name="width">50</property>
-                                                <property name="visible">True</property>
                                                 <property name="allow_gray">False</property>
+                                                <layout>
+                                                    <property name="column">0</property>
+                                                    <property name="row">0</property>
+                                                    <property name="row-span">2</property>
+                                                </layout>
                                             </object>
-                                            <packing>
-                                                <property name="left_attach">0</property>
-                                                <property name="top_attach">0</property>
-                                                <property name="width">1</property>
-                                                <property name="height">2</property>
-                                            </packing>
                                         </child>
                                         <child>
                                             <object class="DinoUiUtilEntryLabelHybrid" id="name_hybrid">
                                                 <property name="xalign">0</property>
-                                                <property name="expand">True</property>
+                                                <property name="hexpand">True</property>
-                                                <property name="visible">True</property>
+                                                <layout>
+                                                    <property name="column">1</property>
+                                                    <property name="row">0</property>
+                                                </layout>
                                             </object>
-                                            <packing>
-                                                <property name="left_attach">1</property>
-                                                <property name="top_attach">0</property>
-                                                <property name="width">1</property>
-                                                <property name="height">1</property>
-                                            </packing>
                                         </child>
                                         <child>
                                             <object class="GtkLabel" id="name_label">
                                                 <property name="xalign">0</property>
-                                                <property name="expand">True</property>
+                                                <property name="hexpand">1</property>
-                                                <property name="visible">True</property>
                                                 <attributes>
-                                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
                                                 </attributes>
+                                                <layout>
+                                                    <property name="column">1</property>
+                                                    <property name="row">0</property>
+                                                </layout>
                                             </object>
-                                            <packing>
-                                                <property name="left_attach">1</property>
-                                                <property name="top_attach">0</property>
-                                                <property name="width">1</property>
-                                                <property name="height">1</property>
-                                            </packing>
                                         </child>
                                         <child>
                                             <object class="GtkLabel" id="jid_label">
                                                 <property name="xalign">0</property>
                                                 <property name="yalign">0</property>
-                                                <property name="selectable">True</property>
+                                                <property name="selectable">1</property>
-                                                <property name="expand">True</property>
+                                                <property name="hexpand">1</property>
-                                                <property name="visible">True</property>
+                                                <layout>
+                                                    <property name="column">1</property>
+                                                    <property name="row">1</property>
+                                                </layout>
                                             </object>
-                                            <packing>
-                                                <property name="left_attach">1</property>
-                                                <property name="top_attach">1</property>
-                                                <property name="width">1</property>
-                                                <property name="height">1</property>
-                                            </packing>
                                         </child>
                                         <child>
                                             <object class="GtkLabel" id="account_label">
                                                 <property name="xalign">1</property>
                                                 <property name="yalign">1</property>
-                                                <property name="margin">5</property>
+                                                <property name="margin-start">5</property>
-                                                <property name="expand">True</property>
+                                                <property name="margin-end">5</property>
-                                                <property name="visible">True</property>
+                                                <property name="margin-top">5</property>
+                                                <property name="margin-bottom">5</property>
+                                                <property name="hexpand">1</property>
+                                                <layout>
+                                                    <property name="column">2</property>
+                                                    <property name="row">1</property>
+                                                </layout>
                                             </object>
-                                            <packing>
-                                                <property name="left_attach">2</property>
-                                                <property name="top_attach">1</property>
-                                                <property name="width">1</property>
-                                                <property name="height">1</property>
-                                            </packing>
                                         </child>
                                     </object>
                                 </child>
                                 <child>
                                     <object class="GtkBox" id="main_box">
                                         <property name="orientation">vertical</property>
-                                        <property name="margin-right">100</property>
+                                        <property name="margin-end">100</property>
-                                        <property name="margin-left">100</property>
+                                        <property name="margin-start">100</property>
-                                        <property name="visible">True</property>
                                     </object>
                                 </child>
                             </object>
-                        </child>
+                        </property>
                     </object>
                 </child>
             </object>

main/data/conversation_content_view/item_metadata_header.ui

@@ -8,7 +8,6 @@
                 <property name="ellipsize">end</property>
                 <property name="xalign">0</property>
                 <property name="valign">baseline</property>
-                <property name="visible">True</property>
                 <attributes>
                     <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
                 </attributes>
@@ -18,7 +17,6 @@
             <object class="GtkLabel" id="time_label">
                 <property name="xalign">0</property>
                 <property name="valign">baseline</property>
-                <property name="visible">True</property>
                 <attributes>
                     <attribute name="scale" value="0.8"/>
                 </attributes>

main/data/conversation_content_view/view.ui

@@ -1,117 +1,98 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiConversationSummaryConversationView">
-        <property name="expand">True</property>
-        <property name="homogeneous">False</property>
-        <property name="spacing">0</property>
-        <property name="visible">True</property>
         <child>
             <object class="GtkStack" id="stack">
                 <property name="transition_type">crossfade</property>
-                <property name="visible">True</property>
                 <child>
-                    <object class="GtkOverlay">
+                    <object class="GtkStackPage">
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="GtkScrolledWindow" id="scrolled">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="expand">True</property>
-                                <property name="visible">True</property>
-                                <child>
-                                    <object class="GtkEventBox" id="main_wrap_event_box">
-                                        <property name="valign">end</property>
-                                        <property name="visible">True</property>
-                                            <child>
-                                                <object class="GtkOverlay">
-                                                    <property name="visible">True</property>
-                                                    <child>
-                                                        <object class="GtkEventBox" id="main_event_box">
-                                                            <property name="visible">True</property>
-                                                            <child>
-                                                                <object class="DinoUiSizeRequestBox" id="main">
-                                                                    <property name="margin-bottom">15</property>
-                                                                    <property name="expand">False</property>
-                                                                    <property name="orientation">vertical</property>
-                                                                    <property name="visible">True</property>
-                                                                    <property name="size-request-mode">height-for-width</property>
-                                                                </object>
-                                                            </child>
-                                                        </object>
-                                                    </child>
-                                                    <child type="overlay">
-                                                        <object class="GtkBox" id="message_menu_box">
-                                                            <property name="margin-right">10</property>
-                                                            <property name="visible">True</property>
-                                                            <property name="can_focus">False</property>
-                                                            <property name="halign">end</property>
-                                                            <property name="valign">start</property>
-                                                            <child>
-                                                                <object class="GtkButton" id="button1">
-                                                                    <property name="vexpand">False</property>
-                                                                    <property name="halign">end</property>
-                                                                    <property name="valign">end</property>
-                                                                    <child>
-                                                                        <object class="GtkImage" id="button1_icon">
-                                                                            <property name="icon-size">1</property>
-                                                                            <property name="visible">True</property>
-                                                                        </object>
-                                                                    </child>
-                                                                </object>
-                                                            </child>
-                                                        </object>
-                                                    </child>
-                                            </object>
-                                        </child>
-                                    </object>
-                                </child>
-                            </object>
-                            <packing>
-                                <property name="index">-1</property>
-                            </packing>
-                        </child>
-                        <child type="overlay">
-                            <object class="GtkRevealer" id="notification_revealer">
-                                <property name="visible">True</property>
-                                <property name="can_focus">False</property>
-                                <property name="halign">center</property>
-                                <property name="valign">start</property>
-                                <child>
-                                    <object class="GtkFrame" id="frame2">
-                                        <property name="visible">True</property>
-                                        <property name="can_focus">False</property>
-                                        <property name="label_xalign">0</property>
-                                        <property name="shadow_type">none</property>
-                                        <style>
-                                            <class name="app-notification"/>
-                                        </style>
-                                        <child>
-                                            <object class="GtkBox" id="notifications">
-                                                <property name="expand">False</property>
-                                                <property name="orientation">vertical</property>
-                                                <property name="visible">True</property>
-                                            </object>
-                                        </child>
-                                        <child type="label_item">
-                                            <placeholder/>
-                                        </child>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
-                    <packing>
                         <property name="name">main</property>
-                    </packing>
+                        <property name="child">
+                            <object class="GtkOverlay">
+                                <property name="child">
+                                    <object class="GtkScrolledWindow" id="scrolled">
+                                        <property name="hscrollbar_policy">never</property>
+                                        <property name="hexpand">1</property>
+                                        <property name="vexpand">1</property>
+                                        <property name="child">
+                                            <object class="GtkBox" id="main_wrap_box">
+                                                <property name="valign">end</property>
+                                                <child>
+                                                    <object class="GtkOverlay">
+                                                        <child>
+                                                            <object class="GtkBox" id="main_event_box">
+                                                                <child>
+                                                                    <object class="DinoUiSizeRequestBox" id="main">
+                                                                        <property name="margin-bottom">15</property>
+                                                                        <property name="orientation">vertical</property>
+                                                                        <property name="size-request-mode">height-for-width</property>
+                                                                    </object>
+                                                                </child>
+                                                            </object>
+                                                        </child>
+                                                        <child type="overlay">
+                                                            <object class="GtkBox" id="message_menu_box">
+                                                                <property name="margin-end">10</property>
+                                                                <property name="halign">end</property>
+                                                                <property name="valign">start</property>
+                                                                <child>
+                                                                    <object class="GtkButton" id="button1">
+                                                                        <property name="visible">0</property>
+                                                                        <property name="vexpand">0</property>
+                                                                        <property name="halign">end</property>
+                                                                        <property name="valign">end</property>
+                                                                        <child>
+                                                                            <object class="GtkImage" id="button1_icon">
+                                                                                <property name="icon-size">normal</property>
+                                                                            </object>
+                                                                        </child>
+                                                                    </object>
+                                                                </child>
+                                                            </object>
+                                                        </child>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </property>
+                                    </object>
+                                </property>
+                                <child type="overlay">
+                                    <object class="GtkRevealer" id="notification_revealer">
+                                        <property name="halign">center</property>
+                                        <property name="valign">start</property>
+                                        <property name="child">
+                                            <object class="GtkFrame" id="frame2">
+                                                <style>
+                                                    <class name="app-notification"/>
+                                                </style>
+                                                <property name="child">
+                                                    <object class="GtkBox" id="notifications">
+                                                        <property name="hexpand">0</property>
+                                                        <property name="vexpand">0</property>
+                                                        <property name="orientation">vertical</property>
+                                                    </object>
+                                                </property>
+                                                <child type="label_item">
+                                                    <placeholder/>
+                                                </child>
+                                            </object>
+                                        </property>
+                                    </object>
+                                </child>
+                            </object>
+                        </property>
+                    </object>
                 </child>
                 <child>
-                    <object class="GtkBox">
+                    <object class="GtkStackPage">
-                        <property name="visible">True</property>
-                    </object>
-                    <packing>
                         <property name="name">void</property>
-                    </packing>
+                        <property name="child">
+                            <object class="GtkBox"/>
+                        </property>
+                    </object>
                 </child>
             </object>
         </child>
     </template>
-</interface>
+</interface>

main/data/conversation_item_widget.ui

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <object class="GtkGrid" id="main_grid">
+    <property name="column-spacing">7</property>
+    <property name="row-spacing">2</property>
+    <child>
+      <object class="DinoUiAvatarImage" id="avatar_image">
+        <property name="height">35</property>
+        <property name="width">35</property>
+        <property name="valign">start</property>
+        <property name="margin-top">2</property>
+        <layout>
+          <property name="column">0</property>
+          <property name="row">0</property>
+          <property name="row-span">2</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel" id="name_label">
+        <property name="ellipsize">end</property>
+        <property name="xalign">0</property>
+        <property name="valign">baseline</property>
+        <attributes>
+          <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+        </attributes>
+        <layout>
+          <property name="column">1</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel" id="time_label">
+        <property name="xalign">0</property>
+        <property name="valign">baseline</property>
+        <attributes>
+          <attribute name="scale" value="0.8"/>
+        </attributes>
+        <style>
+          <class name="dim-label"/>
+        </style>
+        <layout>
+          <property name="column">2</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkImage" id="encrypted_image">
+        <property name="opacity">0.4</property>
+        <property name="pixel-size">12</property>
+        <property name="margin-top">2</property>
+        <layout>
+          <property name="column">3</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkImage" id="marked_image">
+        <property name="opacity">0.4</property>
+        <property name="pixel-size">13</property>
+        <property name="margin-top">2</property>
+        <property name="halign">start</property>
+        <property name="hexpand">True</property>
+        <layout>
+          <property name="column">4</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+  </object>
+</interface>

main/data/conversation_list_titlebar.ui

@@ -1,48 +1,41 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiConversationListTitlebar" parent="GtkBox">
-        <property name="hexpand">False</property>
+        <property name="hexpand">0</property>
-        <property name="visible">True</property>
         <style>
             <class name="dino-header-left"/>
         </style>
         <child>
             <object class="GtkBox">
-                <property name="margin">5</property>
+                <property name="margin-start">5</property>
-                <property name="hexpand">True</property>
+                <property name="margin-end">5</property>
-                <property name="visible">True</property>
+                <property name="margin-top">5</property>
+                <property name="margin-bottom">5</property>
+                <property name="hexpand">1</property>
                 <child>
                     <object class="GtkMenuButton" id="add_button">
-                        <property name="tooltip_text" translatable="yes">Start Conversation</property>
+                        <property name="has-frame">False</property>
-                        <property name="relief">none</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkImage">
-                                <property name="visible">True</property>
                                 <property name="icon-name">list-add-symbolic</property>
-                                <property name="icon-size">1</property>
+                                <property name="icon-size">normal</property>
                             </object>
                         </child>
                     </object>
-                    <packing>
-                        <property name="pack_type">start</property>
-                    </packing>
                 </child>
                 <child>
                     <object class="GtkMenuButton" id="menu_button">
-                        <property name="relief">none</property>
+                        <property name="halign">end</property>
-                        <property name="visible">True</property>
+                        <property name="hexpand">True</property>
+                        <property name="has-frame">False</property>
                         <child>
                             <object class="GtkImage">
-                                <property name="visible">True</property>
                                 <property name="icon-name">open-menu-symbolic</property>
-                                <property name="icon-size">1</property>
+                                <property name="icon-size">normal</property>
                             </object>
                         </child>
                     </object>
-                    <packing>
-                        <property name="pack_type">end</property>
-                    </packing>
                 </child>
             </object>
         </child>

main/data/conversation_list_titlebar_csd.ui

@@ -1,42 +1,30 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiConversationListTitlebarCsd" parent="GtkHeaderBar">
+    <requires lib="gtk" version="4.0"/>
+    <object class="GtkHeaderBar" id="header_bar">
         <property name="hexpand">False</property>
-        <property name="show_close_button">True</property>
-        <property name="visible">True</property>
         <style>
             <class name="dino-left"/>
         </style>
         <child>
             <object class="GtkMenuButton" id="add_button">
-                <property name="tooltip_text" translatable="yes">Start Conversation</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkImage">
-                        <property name="visible">True</property>
                         <property name="icon-name">list-add-symbolic</property>
-                        <property name="icon-size">1</property>
+                        <property name="icon-size">normal</property>
                     </object>
                 </child>
             </object>
-            <packing>
-                <property name="pack_type">start</property>
-            </packing>
         </child>
-        <child>
+        <child type="end">
             <object class="GtkMenuButton" id="menu_button">
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkImage">
-                        <property name="visible">True</property>
                         <property name="icon-name">open-menu-symbolic</property>
-                        <property name="icon-size">1</property>
+                        <property name="icon-size">normal</property>
                     </object>
                 </child>
             </object>
-            <packing>
-                <property name="pack_type">end</property>
-            </packing>
         </child>
-    </template>
+    </object>
 </interface>

main/data/conversation_row.ui

@@ -1,46 +1,40 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
     <template class="DinoUiConversationSelectorRow">
-        <property name="visible">True</property>
         <child>
             <object class="GtkRevealer" id="main_revealer">
                 <property name="transition-type">slide-down</property>
                 <property name="transition-duration">200</property>
-                <property name="reveal-child">False</property>
+                <property name="reveal-child">True</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkBox">
                         <property name="orientation">horizontal</property>
-                        <property name="margin">10</property>
+                        <property name="margin-top">10</property>
+                        <property name="margin-bottom">10</property>
                         <property name="margin-start">7</property>
                         <property name="margin-end">14</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="DinoUiAvatarImage" id="image">
                                 <property name="height">35</property>
                                 <property name="width">35</property>
                                 <property name="valign">center</property>
-                                <property name="visible">True</property>
                             </object>
                         </child>
                         <child>
                             <object class="GtkBox">
-                                <property name="margin-left">10</property>
+                                <property name="margin-start">10</property>
                                 <property name="orientation">vertical</property>
-                                <property name="visible">True</property>
                                 <child>
                                     <object class="GtkBox">
                                         <property name="valign">start</property>
-                                        <property name="visible">True</property>
                                         <property name="orientation">horizontal</property>
                                         <child>
                                             <object class="GtkLabel" id="name_label">
                                                 <property name="max_width_chars">1</property>
                                                 <property name="ellipsize">end</property>
-                                                <property name="expand">True</property>
+                                                <property name="hexpand">True</property>
-                                                <property name="margin-right">7</property>
+                                                <property name="margin-end">7</property>
                                                 <property name="xalign">0</property>
-                                                <property name="visible">True</property>
                                             </object>
                                         </child>
                                         <child>
@@ -48,7 +42,6 @@
                                                 <property name="transition-type">slide-right</property>
                                                 <property name="transition-duration">50</property>
                                                 <property name="reveal-child">True</property>
-                                                <property name="visible">True</property>
                                                 <child>
                                                     <object class="GtkLabel" id="time_label">
                                                         <property name="hexpand">False</property>
@@ -65,7 +58,6 @@
                                 <child>
                                     <object class="GtkBox">
                                         <property name="valign">end</property>
-                                        <property name="visible">True</property>
                                         <property name="orientation">horizontal</property>
                                         <child>
                                             <object class="GtkLabel" id="nick_label">
@@ -86,7 +78,8 @@
                                             <object class="GtkLabel" id="message_label">
                                                 <property name="max_width_chars">1</property>
                                                 <property name="ellipsize">end</property>
-                                                <property name="expand">True</property>
+                                                <property name="hexpand">True</property>
+                                                <property name="vexpand">True</property>
                                                 <property name="valign">end</property>
                                                 <property name="xalign">0</property>
                                                 <attributes>
@@ -99,7 +92,6 @@
                                                 <property name="transition-type">slide-right</property>
                                                 <property name="transition-duration">50</property>
                                                 <property name="reveal-child">True</property>
-                                                <property name="visible">True</property>
                                                 <child>
                                                     <object class="GtkLabel" id="unread_count_label">
                                                         <property name="vexpand">False</property>
@@ -121,11 +113,9 @@
                         <child>
                             <object class="GtkBox">
                                 <property name="orientation">vertical</property>
-                                <property name="visible">True</property>
                                 <child>
                                     <object class="GtkBox">
                                         <property name="vexpand">True</property>
-                                        <property name="visible">True</property>
                                     </object>
                                 </child>
                                 <child>
@@ -133,13 +123,11 @@
                                         <property name="transition-type">slide-left</property>
                                         <property name="transition-duration">100</property>
                                         <property name="reveal-child">False</property>
-                                        <property name="visible">True</property>
                                         <child>
                                             <object class="GtkButton" id="x_button">
                                                 <property name="width-request">27</property>
                                                 <property name="height-request">27</property>
                                                 <property name="vexpand">False</property>
-                                                <property name="visible">True</property>
                                                 <property name="margin-start">5</property>
                                                 <style>
                                                     <class name="conversation_list_row_xbutton"/>
@@ -150,7 +138,6 @@
                                                     <object class="GtkImage">
                                                         <property name="icon-name">window-close-symbolic</property>
                                                         <property name="icon-size">1</property>
-                                                        <property name="visible">True</property>
                                                     </object>
                                                 </child>
                                             </object>
@@ -160,7 +147,6 @@
                                 <child>
                                     <object class="GtkBox">
                                         <property name="vexpand">True</property>
-                                        <property name="visible">True</property>
                                     </object>
                                 </child>
                             </object>

main/data/conversation_view.ui

@@ -1,75 +1,70 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiConversationView" parent="GtkOverlay">
+    <template class="DinoUiConversationView">
-        <property name="visible">True</property>
         <child>
-            <object class="GtkBox">
+            <object class="GtkOverlay" id="overlay">
-                <property name="orientation">vertical</property>
-                <property name="visible">True</property>
-                <style>
-                    <class name="dino-conversation"/>
-                </style>
                 <child>
-                    <object class="GtkOverlay">
+                    <object class="GtkBox">
-                        <property name="visible">True</property>
+                        <property name="orientation">vertical</property>
+                        <style>
+                            <class name="dino-conversation"/>
+                        </style>
                         <child>
-                            <object class="DinoUiConversationSummaryConversationView" id="conversation_frame">
+                            <object class="GtkOverlay" id="conversation_overlay">
-                                <property name="visible">True</property>
+                                <property name="vexpand">True</property>
-                            </object>
-                        </child>
-                        <child type="overlay">
-                            <object class="GtkRevealer" id="goto_end_revealer">
-                                <property name="halign">end</property>
-                                <property name="valign">end</property>
-                                <property name="transition-type">crossfade</property>
-                                <property name="visible">True</property>
-                                <property name="margin-end">30</property>
-                                <property name="margin-bottom">30</property>
                                 <child>
-                                    <object class="GtkButton" id="goto_end_button">
+                                    <object class="DinoUiConversationSummaryConversationView" id="conversation_frame">
-                                        <property name="width-request">30</property>
+                                    </object>
-                                        <property name="height-request">30</property>
+                                </child>
-                                        <property name="vexpand">False</property>
+                                <child type="overlay">
+                                    <object class="GtkRevealer" id="goto_end_revealer">
                                         <property name="halign">end</property>
                                         <property name="valign">end</property>
-                                        <property name="visible">True</property>
+                                        <property name="transition-type">crossfade</property>
-                                        <style>
+                                        <property name="margin-end">30</property>
-                                            <class name="circular-button"/>
+                                        <property name="margin-bottom">30</property>
-                                        </style>
                                         <child>
-                                            <object class="GtkImage">
+                                            <object class="GtkButton" id="goto_end_button">
-                                                <property name="icon-name">go-down-symbolic</property>
+                                                <property name="width-request">30</property>
-                                                <property name="icon-size">1</property>
+                                                <property name="height-request">30</property>
-                                                <property name="visible">True</property>
+                                                <property name="vexpand">False</property>
+                                                <property name="halign">end</property>
+                                                <property name="valign">end</property>
+                                                <style>
+                                                    <class name="circular-button"/>
+                                                </style>
+                                                <child>
+                                                    <object class="GtkImage">
+                                                        <property name="icon-name">go-down-symbolic</property>
+                                                        <property name="icon-size">1</property>
+                                                    </object>
+                                                </child>
                                             </object>
                                         </child>
                                     </object>
                                 </child>
                             </object>
-
+                        </child>
+                        <child>
+                            <object class="DinoUiChatInputView" id="chat_input">
+                            </object>
                         </child>
                     </object>
                 </child>
-                <child>
+                <child type="overlay">
-                    <object class="DinoUiChatInputView" id="chat_input">
+                    <object class="GtkRevealer" id="white_revealer">
-                        <property name="visible">True</property>
+                        <property name="transition-type">crossfade</property>
-                    </object>
+                        <property name="transition-duration">200</property>
-                </child>
+                        <property name="reveal-child">False</property>
-            </object>
+                        <property name="visible">False</property>
-        </child>
+                        <child>
-        <child type="overlay">
+                            <object class="GtkBox">
-            <object class="GtkRevealer" id="white_revealer">
+                                <property name="opacity">0.7</property>
-                <property name="transition-type">crossfade</property>
+                                <style>
-                <property name="transition-duration">200</property>
+                                    <class name="dino-white-overlay"/>
-                <property name="reveal-child">False</property>
+                                </style>
-                <property name="visible">False</property>
+                            </object>
-                <child>
+                        </child>
-                    <object class="GtkBox">
-                        <property name="opacity">0.7</property>
-                        <property name="visible">true</property>
-                        <style>
-                            <class name="dino-white-overlay"/>
-                        </style>
                     </object>
                 </child>
             </object>

main/data/emojichooser.ui

@@ -1,410 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface domain="gtk30">
-  <template class="DinoEmojiChooser" parent="GtkPopover">
-    <property name="modal">1</property>
-    <style>
-      <class name="emoji-picker"/>
-    </style>
-    <child>
-      <object class="GtkBox" id="box">
-        <property name="orientation">vertical</property>
-        <property name="visible">1</property>
-        <child>
-          <object class="GtkSearchEntry" id="search_entry">
-            <property name="visible">1</property>
-            <property name="input-hints">no-emoji</property>
-            <signal name="search-changed" handler="search_changed"/>
-          </object>
-        </child>
-        <child>
-          <object class="GtkStack" id="stack">
-            <property name="visible">1</property>
-            <child>
-              <object class="GtkBox">
-                <property name="visible">1</property>
-                <property name="orientation">vertical</property>
-                <child>
-                  <object class="GtkScrolledWindow" id="scrolled_window">
-                    <property name="visible">1</property>
-                    <property name="vexpand">1</property>
-                    <property name="hscrollbar-policy">never</property>
-                    <property name="min-content-height">250</property>
-                    <style>
-                      <class name="view"/>
-                    </style>
-                    <child>
-                      <object class="GtkBox" id="emoji_box">
-                        <property name="visible">1</property>
-                        <property name="orientation">vertical</property>
-                        <property name="margin">6</property>
-                        <property name="spacing">6</property>
-                        <!-- Remember to keep headings here in sync with button tooltips below -->
-                        <child>
-                          <object class="GtkFlowBox" id="recent.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="people.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Smileys &amp; People</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="people.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="body.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Body &amp; Clothing</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="body.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="nature.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Animals &amp; Nature</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="nature.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="food.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Food &amp; Drink</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="food.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="travel.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Travel &amp; Places</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="travel.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="activities.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Activities</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="activities.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="objects.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes" context="emoji category">Objects</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="objects.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="symbols.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Symbols</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="symbols.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="flags.heading">
-                            <property name="visible">1</property>
-                            <property name="label" translatable="yes">Flags</property>
-                            <property name="xalign">0</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkFlowBox" id="flags.box">
-                            <property name="visible">1</property>
-                            <property name="homogeneous">1</property>
-                            <property name="selection-mode">none</property>
-                            <signal name="child-activated" handler="emoji_activated"/>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkBox">
-                    <property name="visible">1</property>
-                    <!-- Remember to keep tooltips here in sync with section headings above -->
-                    <child>
-                      <object class="GtkButton" id="recent.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Recent</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="recent.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="people.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Smileys &amp; People</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="people.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="body.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Body &amp; Clothing</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="body.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="nature.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Animals &amp; Nature</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="nature.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="food.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Food &amp; Drink</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="food.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="travel.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Travel &amp; Places</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="travel.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="activities.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Activities</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="activities.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="objects.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                         <property name="tooltip-text" translatable="yes" context="emoji category">Objects</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="objects.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="symbols.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Symbols</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="symbols.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="flags.button">
-                        <property name="visible">1</property>
-                        <property name="relief">none</property>
-                        <property name="tooltip-text" translatable="yes">Flags</property>
-                        <style>
-                          <class name="emoji-section"/>
-                        </style>
-                        <child>
-                          <object class="GtkImage" id="flags.icon">
-                            <property name="visible">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-              </object>
-              <packing>
-                <property name="name">list</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkGrid">
-                <property name="visible">1</property>
-                <property name="row-spacing">12</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">1</property>
-                    <property name="icon-name">edit-find-symbolic</property>
-                    <property name="pixel-size">72</property>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">1</property>
-                    <property name="label" translatable="yes">No Results Found</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                      <attribute name="scale" value="1.44"/>
-                    </attributes>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">1</property>
-                    <property name="label" translatable="yes">Try a different search</property>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">2</property>
-                  </packing>
-                </child>
-              </object>
-              <packing>
-                <property name="name">empty</property>
-              </packing>
-            </child>
-          </object>
-        </child>
-      </object>
-    </child>
-  </template>
-</interface>

main/data/file_default_widget.ui

@@ -1,110 +1,93 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiFileDefaultWidget" parent="GtkEventBox">
+  <requires lib="gtk" version="4.0"/>
-        <property name="halign">start</property>
+  <template class="DinoUiFileDefaultWidget">
-        <style>
+    <property name="halign">start</property>
-            <class name="file-box-outer"/>
+    <style>
-        </style>
+      <class name="file-box-outer"/>
+    </style>
+    <child>
+      <object class="DinoUiSizingBin">
+        <property name="target-width">500</property>
+        <property name="max-width">500</property>
+        <property name="hexpand">True</property>
         <child>
-            <object class="DinoUiSizingBin">
+          <object class="GtkBox">
-                <property name="target-width">500</property>
+            <property name="hexpand">1</property>
-                <property name="max-width">500</property>
+            <property name="spacing">10</property>
-                <property name="hexpand">True</property>
+            <style>
-                <property name="visible">True</property>
+              <class name="file-box"/>
+            </style>
+            <child>
+              <object class="GtkStack" id="image_stack">
+                <property name="transition-type">crossfade</property>
+                <property name="transition-duration">50</property>
+                <property name="valign">center</property>
                 <child>
-                    <object class="GtkBox">
+                  <object class="GtkStackPage">
-                        <property name="orientation">horizontal</property>
+                    <property name="name">download_image</property>
-                        <property name="halign">fill</property>
+                    <property name="child">
-                        <property name="hexpand">true</property>
+                      <object class="GtkImage">
-                        <property name="spacing">10</property>
+                        <property name="icon-name">dino-file-download-symbolic</property>
-                        <property name="visible">True</property>
+                        <property name="pixel-size">30</property>
-                        <style>
+                        <property name="opacity">0.7</property>
-                            <class name="file-box"/>
+                      </object>
-                        </style>
+                    </property>
-                        <child>
+                  </object>
-                            <object class="GtkEventBox" id="stack_event_box">
-                                <property name="visible">True</property>
-                                <child>
-                                    <object class="GtkStack" id="image_stack">
-                                        <property name="transition-type">crossfade</property>
-                                        <property name="transition-duration">50</property>
-                                        <property name="valign">center</property>
-                                        <property name="visible">True</property>
-                                        <child>
-                                            <object class="GtkImage">
-                                                <property name="icon-name">dino-file-download-symbolic</property>
-                                                <property name="icon-size">5</property>
-                                                <property name="opacity">0.7</property>
-                                                <property name="visible">True</property>
-                                            </object>
-                                            <packing>
-                                                <property name="name">download_image</property>
-                                            </packing>
-                                        </child>
-                                        <child>
-                                            <object class="GtkImage" id="content_type_image">
-                                                <property name="icon-size">5</property>
-                                                <property name="opacity">0.7</property>
-                                                <property name="visible">True</property>
-                                            </object>
-                                            <packing>
-                                                <property name="name">content_type_image</property>
-                                            </packing>
-                                        </child>
-                                        <child>
-                                            <object class="GtkSpinner" id="spinner">
-                                                <property name="visible">True</property>
-                                            </object>
-                                            <packing>
-                                                <property name="name">spinner</property>
-                                            </packing>
-                                        </child>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                        <child>
-                            <object class="GtkBox">
-                                <property name="orientation">vertical</property>
-                                <property name="hexpand">True</property>
-                                <property name="visible">True</property>
-                                <child>
-                                    <object class="GtkLabel" id="name_label">
-                                        <property name="ellipsize">middle</property>
-                                        <property name="xalign">0</property>
-                                        <property name="yalign">0</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                </child>
-                                <child>
-                                    <object class="GtkLabel" id="mime_label">
-                                        <property name="xalign">0</property>
-                                        <property name="yalign">1</property>
-                                        <property name="visible">True</property>
-                                        <attributes>
-                                            <attribute name="scale" value="0.8"/>
-                                        </attributes>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                        <child>
-                            <object class="GtkMenuButton" id="file_menu">
-                                <property name="visible">True</property>
-                                <property name="opacity">0</property>
-                                <property name="relief">none</property>
-                                <child>
-                                    <object class="GtkImage">
-                                        <property name="visible">True</property>
-                                        <property name="icon-name">open-menu-symbolic</property>
-                                        <property name="icon-size">1</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
                 </child>
-            </object>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">content_type_image</property>
+                    <property name="child">
+                      <object class="GtkImage" id="content_type_image">
+                        <property name="pixel-size">30</property>
+                        <property name="opacity">0.7</property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">spinner</property>
+                    <property name="child">
+                      <object class="GtkSpinner" id="spinner"/>
+                    </property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">vertical</property>
+                <property name="hexpand">1</property>
+                <child>
+                  <object class="GtkLabel" id="name_label">
+                    <property name="ellipsize">middle</property>
+                    <property name="xalign">0</property>
+                    <property name="yalign">0</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="mime_label">
+                    <property name="xalign">0</property>
+                    <property name="yalign">1</property>
+                    <attributes>
+                      <attribute name="scale" value="0.8"></attribute>
+                    </attributes>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkMenuButton" id="file_menu">
+                <property name="icon-name">open-menu-symbolic</property>
+                <property name="opacity">0</property>
+                <property name="has_frame">False</property>
+              </object>
+            </child>
+          </object>
         </child>
-    </template>
+      </object>
-</interface>
+    </child>
+  </template>
+</interface>

main/data/file_send_overlay.ui

@@ -1,67 +1,51 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiFileSendOverlay">
+    <requires lib="gtk" version="4.0"/>
-        <property name="hexpand">False</property>
+    <object class="GtkBox" id="main_box">
-        <property name="vexpand">False</property>
+        <property name="hexpand">0</property>
+        <property name="vexpand">0</property>
         <property name="halign">center</property>
         <property name="valign">center</property>
-        <property name="visible">True</property>
         <style>
             <class name="background"/>
             <class name="dino-file-overlay"/>
         </style>
         <child>
-            <object class="DinoUiSizeRequestBox">
+            <object class="GtkBox">
-                <property name="size-request-mode">height-for-width</property>
                 <property name="orientation">vertical</property>
-                <property name="margin-right">20</property>
+                <property name="margin-end">20</property>
-                <property name="margin-left">20</property>
+                <property name="margin-start">20</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkBox">
                         <property name="margin-top">10</property>
                         <property name="margin-bottom">10</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkLabel">
-                                <property name="label" translatable="yes">Send a file</property>
+                                <property name="label" translatable="1">Send a file</property>
-                                <property name="hexpand">True</property>
+                                <property name="hexpand">1</property>
-                                <property name="visible">True</property>
                                 <attributes>
-                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
                                 </attributes>
                             </object>
-                            <packing>
-                                <property name="pack_type">start</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkButton" id="close_button">
-                                <property name="can_default">True</property>
+                                <property name="focusable">1</property>
-                                <property name="can_focus">True</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="titlebutton"/>
                                     <class name="close"/>
                                 </style>
                                 <child>
                                     <object class="GtkImage">
-                                        <property name="visible">True</property>
                                         <property name="icon-name">window-close-symbolic</property>
-                                        <property name="icon-size">1</property>
                                     </object>
                                 </child>
                             </object>
-                            <packing>
-                                <property name="pack_type">end</property>
-                            </packing>
                         </child>
                     </object>
                 </child>
                 <child>
                     <object class="DinoUiSizingBin" id="file_widget_insert">
-                        <property name="visible">True</property>
                     </object>
                 </child>
                 <child>
@@ -69,29 +53,21 @@
                         <property name="margin-top">15</property>
                         <property name="margin-bottom">15</property>
                         <property name="spacing">5</property>
-                        <property name="visible">True</property>
                         <child>
-                            <object class="GtkLabel" id="info_label">
+                            <object class="GtkLabel" id="info_label"/>
-                                <property name="visible">True</property>
-                            </object>
                         </child>
                         <child>
                             <object class="GtkButton" id="send_button">
-                                <property name="label" translatable="yes">Send</property>
+                                <property name="label" translatable="1">Send</property>
-                                <property name="can_default">True</property>
+                                <property name="focusable">1</property>
-                                <property name="can_focus">True</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="suggested-action"/>
                                 </style>
                             </object>
-                            <packing>
-                                <property name="pack_type">end</property>
-                            </packing>
                         </child>
                     </object>
                 </child>
             </object>
         </child>
-    </template>
+    </object>
-</interface>
+</interface>

main/data/global_search.ui

@@ -1,170 +1,158 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiGlobalSearch" parent="GtkOverlay">
+    <requires lib="gtk" version="4.0"/>
-        <property name="visible">True</property>
+    <object class="GtkOverlay" id="overlay">
-        <child>
+        <property name="child">
             <object class="GtkBox">
                 <property name="orientation">vertical</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkSearchEntry" id="search_entry">
-                        <property name="visible">True</property>
+                        <property name="margin-start">12</property>
-                        <property name="margin">12</property>
+                        <property name="margin-end">12</property>
+                        <property name="margin-top">12</property>
+                        <property name="margin-bottom">12</property>
                     </object>
                 </child>
                 <child>
                     <object class="GtkStack" id="results_empty_stack">
-                        <property name="visible">True</property>
                         <child>
-                            <object class="GtkBox">
+                            <object class="GtkStackPage">
-                                <property name="orientation">vertical</property>
-                                <property name="spacing">10</property>
-                                <property name="valign">center</property>
-                                <property name="visible">True</property>
-                                <child>
-                                    <object class="GtkImage">
-                                        <property name="visible">True</property>
-                                        <property name="icon-name">system-search-symbolic</property>
-                                        <property name="icon-size">4</property>
-                                        <property name="pixel-size">72</property>
-                                        <style>
-                                            <class name="dim-label"/>
-                                        </style>
-                                    </object>
-                                </child>
-                                <child>
-                                    <object class="GtkLabel">
-                                        <property name="label" translatable="yes">No active search</property>
-                                        <property name="xalign">0.5</property>
-                                        <property name="yalign">0.5</property>
-                                        <property name="visible">True</property>
-                                        <attributes>
-                                            <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
-                                            <attribute name="scale" value="1.3"/>
-                                        </attributes>
-                                        <style>
-                                            <class name="dim-label"/>
-                                        </style>
-                                    </object>
-                                </child>
-                                <child>
-                                    <object class="GtkLabel">
-                                        <property name="label" translatable="yes">Type to start a search</property>
-                                        <property name="xalign">0.5</property>
-                                        <property name="yalign">0.5</property>
-                                        <property name="visible">True</property>
-                                        <style>
-                                            <class name="dim-label"/>
-                                        </style>
-                                    </object>
-                                </child>
-                            </object>
-                            <packing>
                                 <property name="name">empty</property>
-                            </packing>
+                                <property name="child">
-                        </child>
+                                    <object class="GtkBox">
-                        <child>
+                                        <property name="orientation">vertical</property>
-                            <object class="GtkBox">
+                                        <property name="spacing">10</property>
-                                <property name="orientation">vertical</property>
+                                        <property name="valign">center</property>
-                                <property name="spacing">10</property>
-                                <property name="valign">center</property>
-                                <property name="visible">True</property>
-                                <child>
-                                    <object class="GtkImage">
-                                        <property name="visible">True</property>
-                                        <property name="icon-name">face-uncertain-symbolic</property>
-                                        <property name="icon-size">4</property>
-                                        <property name="pixel-size">72</property>
-                                        <style>
-                                            <class name="dim-label"/>
-                                        </style>
-                                    </object>
-                                </child>
-                                <child>
-                                    <object class="GtkLabel">
-                                        <property name="label" translatable="yes">No matching messages</property>
-                                        <property name="xalign">0.5</property>
-                                        <property name="yalign">0.5</property>
-                                        <property name="visible">True</property>
-                                        <attributes>
-                                            <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
-                                            <attribute name="scale" value="1.3"/>
-                                        </attributes>
-                                        <style>
-                                            <class name="dim-label"/>
-                                        </style>
-                                    </object>
-                                </child>
-                                <child>
-                                    <object class="GtkLabel">
-                                        <property name="label" translatable="yes">Check the spelling or try to remove filters</property>
-                                        <property name="xalign">0.5</property>
-                                        <property name="yalign">0.5</property>
-                                        <property name="visible">True</property>
-                                        <style>
-                                            <class name="dim-label"/>
-                                        </style>
-                                    </object>
-                                </child>
-                            </object>
-                            <packing>
-                                <property name="name">no-result</property>
-                            </packing>
-                        </child>
-                        <child>
-                            <object class="GtkBox">
-                                <property name="orientation">vertical</property>
-                                <property name="visible">True</property>
-                                <child>
-                                    <object class="GtkLabel" id="entry_number_label">
-                                        <property name="xalign">0</property>
-                                        <property name="use-markup">True</property>
-                                        <property name="margin-left">17</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                </child>
-                                <child>
-                                    <object class="GtkScrolledWindow" id="results_scrolled">
-                                        <property name="hscrollbar-policy">never</property>
-                                        <property name="expand">True</property>
-                                        <property name="visible">True</property>
                                         <child>
-                                            <object class="GtkBox" id="results_box">
+                                            <object class="GtkImage">
-                                                <property name="orientation">vertical</property>
+                                                <property name="icon-name">system-search-symbolic</property>
-                                                <property name="spacing">25</property>
+                                                <property name="icon-size">large</property>
-                                                <property name="margin">10</property>
+                                                <property name="pixel-size">72</property>
-                                                <property name="valign">start</property>
+                                                <style>
-                                                <property name="visible">True</property>
+                                                    <class name="dim-label"/>
+                                                </style>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="GtkLabel">
+                                                <property name="label" translatable="1">No active search</property>
+                                                <attributes>
+                                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
+                                                    <attribute name="scale" value="1.3"></attribute>
+                                                </attributes>
+                                                <style>
+                                                    <class name="dim-label"/>
+                                                </style>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="GtkLabel">
+                                                <property name="label" translatable="1">Type to start a search</property>
+                                                <style>
+                                                    <class name="dim-label"/>
+                                                </style>
                                             </object>
                                         </child>
                                     </object>
-                                </child>
+                                </property>
                             </object>
-                            <packing>
+                        </child>
+                        <child>
+                            <object class="GtkStackPage">
+                                <property name="name">no-result</property>
+                                <property name="child">
+                                    <object class="GtkBox">
+                                        <property name="orientation">vertical</property>
+                                        <property name="spacing">10</property>
+                                        <property name="valign">center</property>
+                                        <child>
+                                            <object class="GtkImage">
+                                                <property name="icon-name">face-uncertain-symbolic</property>
+                                                <property name="icon-size">large</property>
+                                                <property name="pixel-size">72</property>
+                                                <style>
+                                                    <class name="dim-label"/>
+                                                </style>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="GtkLabel">
+                                                <property name="label" translatable="1">No matching messages</property>
+                                                <attributes>
+                                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
+                                                    <attribute name="scale" value="1.3"></attribute>
+                                                </attributes>
+                                                <style>
+                                                    <class name="dim-label"/>
+                                                </style>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="GtkLabel">
+                                                <property name="label" translatable="1">Check the spelling or try to remove filters</property>
+                                                <style>
+                                                    <class name="dim-label"/>
+                                                </style>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkStackPage">
                                 <property name="name">results</property>
-                            </packing>
+                                <property name="child">
+                                    <object class="GtkBox">
+                                        <property name="orientation">vertical</property>
+                                        <child>
+                                            <object class="GtkLabel" id="entry_number_label">
+                                                <property name="xalign">0</property>
+                                                <property name="use-markup">1</property>
+                                                <property name="margin-start">17</property>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="GtkScrolledWindow" id="results_scrolled">
+                                                <property name="hscrollbar-policy">never</property>
+                                                <property name="hexpand">1</property>
+                                                <property name="vexpand">1</property>
+                                                <property name="child">
+                                                    <object class="GtkBox" id="results_box">
+                                                        <property name="orientation">vertical</property>
+                                                        <property name="spacing">25</property>
+                                                        <property name="margin-start">10</property>
+                                                        <property name="margin-end">10</property>
+                                                        <property name="margin-top">10</property>
+                                                        <property name="margin-bottom">10</property>
+                                                        <property name="valign">start</property>
+                                                    </object>
+                                                </property>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </property>
+                            </object>
                         </child>
                     </object>
                 </child>
             </object>
-        </child>
+        </property>
         <child type="overlay">
             <object class="GtkFrame" id="auto_complete_overlay">
-                <property name="visible">True</property>
                 <property name="margin-top">42</property>
-                <property name="margin-left">12</property>
+                <property name="margin-start">12</property>
-                <property name="margin-right">12</property>
+                <property name="margin-end">12</property>
                 <property name="valign">start</property>
                 <style>
                     <class name="auto-complete"/>
                 </style>
-                <child>
+                <property name="child">
                     <object class="GtkListBox" id="auto_complete_list">
-                        <property name="visible">True</property>
                         <property name="selection-mode">browse</property>
                     </object>
-                </child>
+                </property>
             </object>
         </child>
-    </template>
+    </object>
 </interface>

main/data/icons/dino-changes-allowed-symbolic.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg version="1.1" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg">
-  <g transform="translate(-154.64 -256.66)">
-    <g transform="matrix(.74332 0 0 .74332 157.02 256.73)" fill="#000000">
-      <path d="m3 9h10c0.554 0 1 0.446 1 1v3c0 0.554-0.446 1-1 1h-10c-0.554 0-1-0.446-1-1v-3c0-0.554 0.446-1 1-1z" overflow="visible"/>
-      <path d="M 7,0 C 7,0 6.291,-0.014 5.553,0.356 4.814,0.725 4,1.666 4,3 V 4.4127188 H 6 V 3 C 6,2.333 6.186,2.275 6.447,2.145 6.71,2.014 7,2 7,2 H 9 C 9,2 9.291,2.014 9.553,2.145 9.814,2.275 10,2.333 10,3 v 8 h 2 V 3 C 12,1.667 11.186,0.725 10.447,0.356 9.71,-0.014 9,0 9,0 Z" font-family="sans-serif" font-weight="400" overflow="visible" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none" white-space="normal"/>
-      <path d="m2 12h12v4h-12z" overflow="visible"/>
-    </g>
-  </g>
-</svg>

main/data/icons/dino-changes-prevent-symbolic.svg

@@ -1,67 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   width="16"
-   version="1.1"
-   id="svg7384"
-   height="12">
-  <metadata
-     id="metadata90">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Gnome Symbolic Icon Theme</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <title
-     id="title9167">Gnome Symbolic Icon Theme</title>
-  <defs
-     id="defs7386" />
-  <g
-     transform="translate(-181.0002,-241)"
-     style="display:inline"
-     id="layer9">
-    <path
-       style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.76307714;marker:none"
-       id="rect4063"
-       d="m 188.13566,241.5 c -1.44483,0 -2.63542,1.19893 -2.63542,2.65384 v 2.65385 h -0.87847 c -0.48668,0 -0.87847,0.39453 -0.87847,0.88462 V 248.16225 253 h 4.39236 1.75695 4.39235 v -4.83775 -0.46994 c 0,-0.49009 -0.39179,-0.88462 -0.87846,-0.88462 h -0.87848 v -2.65385 c 0,-1.45491 -1.19059,-2.65384 -2.63541,-2.65384 z m 0,1.76922 h 1.75695 c 0.50187,0 0.87848,0.37925 0.87848,0.88462 v 2.65385 h -3.5139 v -2.65385 c 0,-0.50537 0.3766,-0.88462 0.87847,-0.88462 z" />
-  </g>
-  <g
-     transform="translate(-181.0002,-241)"
-     style="display:inline"
-     id="layer10" />
-  <g
-     transform="translate(-181.0002,-241)"
-     id="layer11" />
-  <g
-     transform="translate(-181.0002,-241)"
-     style="display:inline"
-     id="layer13" />
-  <g
-     transform="translate(-181.0002,-241)"
-     id="layer14" />
-  <g
-     transform="translate(-181.0002,-241)"
-     style="display:inline"
-     id="layer15" />
-  <g
-     transform="translate(-181.0002,-241)"
-     style="display:inline"
-     id="g71291" />
-  <g
-     transform="translate(-181.0002,-241)"
-     style="display:inline"
-     id="g4953" />
-  <g
-     transform="translate(-181.0002,-241)"
-     style="display:inline"
-     id="layer12" />
-</svg>

main/data/manage_accounts/account_row.ui

@@ -1,30 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiManageAccountsAccountRow">
-        <property name="visible">True</property>
         <child>
             <object class="GtkGrid">
-                <property name="orientation">horizontal</property>
+                <property name="margin-start">6</property>
-                <property name="margin">6</property>
+                <property name="margin-end">6</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
                 <property name="column-spacing">6</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="DinoUiAvatarImage" id="image">
                         <property name="height">40</property>
                         <property name="width">40</property>
-                        <property name="visible">True</property>
                     </object>
                 </child>
                 <child>
                     <object class="GtkLabel" id="jid_label">
-                        <property name="halign">0.5</property>
                         <property name="xalign">0</property>
-                        <property name="expand">True</property>
+                        <property name="hexpand">1</property>
-                        <property name="visible">True</property>
                     </object>
                 </child>
                 <child>
                     <object class="GtkImage" id="icon">
+                        <property name="visible">False</property>
                         <property name="icon-name">dialog-warning-symbolic</property>
                     </object>
                 </child>

main/data/manage_accounts/dialog.ui

@@ -1,78 +1,73 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiManageAccountsDialog">
+        <property name="title" translatable="1">Accounts</property>
         <property name="width-request">700</property>
         <property name="height-request">400</property>
         <property name="modal">True</property>
         <child type="titlebar">
-            <object class="GtkHeaderBar">
+            <object class="GtkHeaderBar"/>
-                <property name="title" translatable="yes">Accounts</property>
-                <property name="show_close_button">True</property>
-                <property name="visible">True</property>
-            </object>
         </child>
-        <child internal-child="vbox">
+        <child internal-child="content_area">
-            <object class="GtkBox">
+        <object class="GtkBox">
-                <property name="visible">True</property>
+            <child>
+            <object class="GtkStack" id="main_stack">
                 <child>
-                    <object class="GtkStack" id="main_stack">
+                    <object class="GtkStackPage">
-                    <property name="visible">True</property>
+                        <property name="name">accounts_exist</property>
-                        <child>
+                        <property name="child">
                             <object class="GtkBox">
-                                <property name="can_focus">True</property>
+                                <property name="focusable">1</property>
-                                <property name="expand">True</property>
+                                <property name="hexpand">True</property>
-                                <property name="visible">True</property>
+                                <property name="vexpand">True</property>
                                 <child>
                                     <object class="GtkBox">
-                                        <property name="expand">True</property>
+                                        <property name="hexpand">True</property>
-                                        <property name="orientation">horizontal</property>
+                                        <property name="vexpand">True</property>
-                                        <property name="margin">15</property>
+                                        <property name="margin-start">15</property>
+                                        <property name="margin-end">15</property>
+                                        <property name="margin-top">15</property>
+                                        <property name="margin-bottom">15</property>
                                         <property name="spacing">20</property>
-                                        <property name="visible">True</property>
                                         <child>
                                             <object class="GtkBox">
                                                 <property name="orientation">vertical</property>
                                                 <property name="width-request">250</property>
-                                                <property name="vexpand">True</property>
+                                                <property name="vexpand">1</property>
-                                                <property name="hexpand">False</property>
+                                                <property name="hexpand">0</property>
-                                                <property name="visible">True</property>
                                                 <child>
                                                     <object class="GtkScrolledWindow">
-                                                        <property name="shadow-type">in</property>
+<!--                                                        <property name="shadow-type">in</property>-->
-                                                        <property name="expand">True</property>
+                                                        <property name="hexpand">1</property>
-                                                        <property name="visible">True</property>
+                                                        <property name="vexpand">1</property>
-                                                        <child>
+                                                        <property name="child">
                                                             <object class="GtkBox">
                                                                 <property name="orientation">vertical</property>
-                                                                <property name="visible">True</property>
                                                                 <child>
                                                                     <object class="GtkListBox" id="account_list">
-                                                                        <property name="expand">True</property>
+                                                                        <property name="hexpand">1</property>
-                                                                        <property name="visible">True</property>
+                                                                        <property name="vexpand">1</property>
                                                                     </object>
                                                                 </child>
                                                             </object>
-                                                        </child>
+                                                        </property>
                                                     </object>
                                                 </child>
                                                 <child>
-                                                    <object class="GtkToolbar">
+                                                    <object class="GtkBox">
+                                                        <property name="css-classes">toolbar</property>
                                                         <style>
                                                             <class name="inline-toolbar"/>
                                                         </style>
-                                                        <property name="icon-size">menu</property>
-                                                        <property name="toolbar-style">icons</property>
-                                                        <property name="visible">True</property>
                                                         <child>
-                                                            <object class="GtkToolButton" id="add_account_button">
+                                                            <object class="GtkButton" id="add_account_button">
                                                                 <property name="icon-name">list-add-symbolic</property>
-                                                                <property name="visible">True</property>
                                                             </object>
                                                         </child>
                                                         <child>
-                                                            <object class="GtkToolButton" id="remove_account_button">
+                                                            <object class="GtkButton" id="remove_account_button">
                                                                 <property name="icon-name">list-remove-symbolic</property>
-                                                                <property name="visible">True</property>
                                                             </object>
                                                         </child>
                                                     </object>
@@ -81,23 +76,19 @@
                                         </child>
                                         <child>
                                             <object class="GtkGrid" id="settings_list">
-                                                <property name="expand">True</property>
+                                                <property name="hexpand">1</property>
+                                                <property name="vexpand">1</property>
                                                 <property name="column-spacing">10</property>
                                                 <property name="row-spacing">5</property>
-                                                <property name="visible">True</property>
                                                 <child>
                                                     <object class="GtkBox">
-                                                        <property name="visible">True</property>
                                                         <property name="halign">end</property>
                                                         <child>
-                                                            <object class="GtkBox">
+                                                            <object class="GtkBox"/>
-                                                                <property name="visible">True</property>
-                                                            </object>
                                                         </child>
                                                         <child>
                                                             <object class="GtkButton" id="image_button">
-                                                                <property name="relief">none</property>
+                                                                <property name="has-frame">False</property>
-                                                                <property name="visible">True</property>
                                                                 <style>
                                                                     <class name="image-button"/>
                                                                 </style>
@@ -105,145 +96,124 @@
                                                                     <object class="DinoUiAvatarImage" id="image">
                                                                         <property name="height">50</property>
                                                                         <property name="width">50</property>
-                                                                        <property name="xalign">1</property>
+<!--                                                                        <property name="xalign">1</property>-->
-                                                                        <property name="visible">True</property>
                                                                         <property name="allow_gray">False</property>
                                                                     </object>
                                                                 </child>
                                                             </object>
                                                         </child>
+                                                        <layout>
+                                                            <property name="column">0</property>
+                                                            <property name="row">0</property>
+                                                            <property name="row-span">2</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">0</property>
-                                                        <property name="top_attach">0</property>
-                                                        <property name="width">1</property>
-                                                        <property name="height">2</property>
-                                                    </packing>
                                                 </child>
                                                 <child>
                                                     <object class="GtkLabel" id="jid_label">
                                                         <property name="xalign">0</property>
                                                         <property name="yalign">1</property>
-                                                        <property name="visible">True</property>
                                                         <attributes>
-                                                            <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                                            <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
                                                         </attributes>
+                                                        <layout>
+                                                            <property name="column">1</property>
+                                                            <property name="row">0</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">1</property>
-                                                        <property name="top_attach">0</property>
-                                                        <property name="width">1</property>
-                                                        <property name="height">1</property>
-                                                    </packing>
                                                 </child>
                                                 <child>
                                                     <object class="GtkLabel" id="state_label">
                                                         <property name="xalign">0</property>
                                                         <property name="yalign">0</property>
-                                                        <property name="visible">True</property>
                                                         <style>
                                                             <class name="dim-label"/>
                                                         </style>
+                                                        <layout>
+                                                            <property name="column">1</property>
+                                                            <property name="row">1</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">1</property>
-                                                        <property name="top_attach">1</property>
-                                                        <property name="width">1</property>
-                                                        <property name="height">1</property>
-                                                    </packing>
                                                 </child>
                                                 <child>
                                                     <object class="GtkSwitch" id="active_switch">
-                                                        <property name="visible">True</property>
                                                         <property name="halign">end</property>
                                                         <property name="valign">center</property>
+                                                        <layout>
+                                                            <property name="column">2</property>
+                                                            <property name="row">0</property>
+                                                            <property name="row-span">2</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">2</property>
-                                                        <property name="top_attach">0</property>
-                                                        <property name="width">1</property>
-                                                        <property name="height">2</property>
-                                                    </packing>
                                                 </child>
                                                 <child>
                                                     <object class="GtkLabel">
-                                                        <property name="label" translatable="yes">Password</property>
+                                                        <property name="label" translatable="1">Password</property>
                                                         <property name="xalign">1</property>
-                                                        <property name="visible">True</property>
                                                         <style>
                                                             <class name="dim-label"/>
                                                         </style>
+                                                        <layout>
+                                                            <property name="column">0</property>
+                                                            <property name="row">2</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">0</property>
-                                                        <property name="top_attach">2</property>
-                                                        <property name="width">1</property>
-                                                        <property name="height">1</property>
-                                                    </packing>
                                                 </child>
                                                 <child>
                                                     <object class="DinoUiUtilEntryLabelHybrid" id="password_hybrid">
                                                         <property name="xalign">0</property>
                                                         <property name="width_request">200</property>
                                                         <property name="visibility">False</property>
-                                                        <property name="visible">True</property>
+                                                        <layout>
+                                                            <property name="column">1</property>
+                                                            <property name="row">2</property>
+                                                            <property name="column-span">2</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">1</property>
-                                                        <property name="top_attach">2</property>
-                                                        <property name="width">2</property>
-                                                        <property name="height">1</property>
-                                                    </packing>
                                                 </child>
                                                 <child>
                                                     <object class="GtkLabel">
-                                                        <property name="label" translatable="yes">Local alias</property>
+                                                        <property name="label" translatable="1">Local alias</property>
                                                         <property name="xalign">1</property>
-                                                        <property name="visible">True</property>
                                                         <style>
                                                             <class name="dim-label"/>
                                                         </style>
+                                                        <layout>
+                                                            <property name="column">0</property>
+                                                            <property name="row">3</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">0</property>
-                                                        <property name="top_attach">3</property>
-                                                        <property name="width">1</property>
-                                                        <property name="height">1</property>
-                                                    </packing>
                                                 </child>
                                                 <child>
                                                     <object class="DinoUiUtilEntryLabelHybrid" id="alias_hybrid">
                                                         <property name="xalign">0</property>
                                                         <property name="width_request">200</property>
-                                                        <property name="visible">True</property>
+`                                                       <layout>
+                                                            <property name="column">1</property>
+                                                            <property name="row">3</property>
+                                                            <property name="column-span">2</property>
+                                                        </layout>
                                                     </object>
-                                                    <packing>
-                                                        <property name="left_attach">1</property>
-                                                        <property name="top_attach">3</property>
-                                                        <property name="width">2</property>
-                                                        <property name="height">1</property>
-                                                    </packing>
                                                 </child>
                                             </object>
                                         </child>
                                     </object>
                                 </child>
                             </object>
-                            <packing>
+                        </property>
-                                <property name="name">accounts_exist</property>
+                    </object>
-                            </packing>
+                </child>
-                        </child>
+                <child>
-                        <child>
+                    <object class="GtkStackPage">
+                        <property name="name">no_accounts</property>
+                        <property name="child">
                             <object class="GtkBox">
                                 <property name="orientation">vertical</property>
                                 <property name="spacing">10</property>
                                 <property name="valign">center</property>
-                                <property name="visible">True</property>
                                 <child>
                                     <object class="GtkImage">
-                                        <property name="visible">True</property>
                                         <property name="icon-name">system-users-symbolic</property>
-                                        <property name="icon-size">4</property>
                                         <property name="pixel-size">72</property>
                                         <style>
                                             <class name="dim-label"/>
@@ -252,10 +222,7 @@
                                 </child>
                                 <child>
                                     <object class="GtkLabel">
-                                        <property name="label" translatable="yes">No accounts configured</property>
+                                        <property name="label" translatable="1">No accounts configured</property>
-                                        <property name="xalign">0.5</property>
-                                        <property name="yalign">0.5</property>
-                                        <property name="visible">True</property>
                                         <style>
                                             <class name="dim-label"/>
                                         </style>
@@ -263,9 +230,8 @@
                                 </child>
                                 <child>
                                     <object class="GtkButton" id="no_accounts_add">
-                                        <property name="label" translatable="yes">Add an account</property>
+                                        <property name="label" translatable="1">Add an account</property>
                                         <property name="halign">center</property>
-                                        <property name="visible">True</property>
                                         <style>
                                             <class name="text-button"/>
                                             <class name="suggested-action"/>
@@ -273,13 +239,12 @@
                                     </object>
                                 </child>
                             </object>
-                            <packing>
+                        </property>
-                                <property name="name">no_accounts</property>
-                            </packing>
-                        </child>
                     </object>
                 </child>
             </object>
+            </child>
+        </object>
         </child>
     </template>
 </interface>

main/data/menu_add.ui

@@ -6,8 +6,6 @@
                 <attribute name="action">app.add_chat</attribute>
                 <attribute name="label" translatable="yes">Start Conversation</attribute>
             </item>
-        </section>
-        <section>
             <item>
                 <attribute name="action">app.add_conference</attribute>
                 <attribute name="label" translatable="yes">Join Channel</attribute>

main/data/menu_encryption.ui

@@ -2,32 +2,21 @@
 <interface>
     <requires lib="gtk+" version="3.16"/>
     <object class="GtkPopoverMenu" id="menu_encryption">
-        <property name="can_focus">False</property>
+        <property name="child">
-        <child>
             <object class="GtkBox" id="encryption_box">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
                 <property name="orientation">vertical</property>
-                <property name="margin">10</property>
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
                 <child>
-                    <object class="GtkRadioButton" id="button_unencrypted">
+                    <object class="GtkCheckButton" id="button_unencrypted">
-                        <property name="label" translatable="yes">Unencrypted</property>
+                        <property name="label" translatable="1">Unencrypted</property>
-                        <property name="visible">True</property>
+                        <property name="focusable">1</property>
-                        <property name="can_focus">True</property>
+                        <property name="active">1</property>
-                        <property name="receives_default">False</property>
-                        <property name="active">True</property>
-                        <property name="draw_indicator">True</property>
                     </object>
-                    <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">0</property>
-                    </packing>
                 </child>
             </object>
-            <packing>
+        </property>
-                <property name="submenu">main</property>
-            </packing>
-        </child>
     </object>
-</interface>
+</interface>

main/data/message_item_widget_edit_mode.ui

@@ -6,27 +6,21 @@
         <property name="spacing">5</property>
         <property name="margin_top">5</property>
         <property name="margin_bottom">5</property>
-        <property name="visible">True</property>
         <child>
             <object class="GtkFrame" id="frame">
-                <property name="visible">True</property>
                 <style>
                     <class name="dino-chatinput"/>
                 </style>
                 <child>
                     <object class="GtkBox">
-                        <property name="visible">True</property>
                         <child>
-                            <object class="DinoUiChatTextView" id="chat_text_view">
+                            <object class="DinoUiChatTextView" id="chat_text_view" />
-                                <property name="visible">True</property>
-                            </object>
                         </child>
                         <child>
                             <object class="GtkMenuButton" id="emoji_button">
-                                <property name="relief">none</property>
+                                <property name="has-frame">False</property>
                                 <property name="margin-top">3</property>
                                 <property name="valign">start</property>
-                                <property name="visible">True</property>
                                 <style>
                                     <class name="dino-chatinput-button"/>
                                     <class name="flat"/>
@@ -35,7 +29,6 @@
                                     <object class="GtkImage">
                                         <property name="icon-name">dino-emoticon-symbolic</property>
                                         <property name="icon-size">1</property>
-                                        <property name="visible">True</property>
                                     </object>
                                 </child>
                             </object>
@@ -48,17 +41,14 @@
             <object class="GtkBox">
                 <property name="spacing">5</property>
                 <property name="halign">end</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkButton" id="cancel_button">
                         <property name="label" translatable="yes">Cancel</property>
-                        <property name="visible">True</property>
                     </object>
                 </child>
                 <child>
                     <object class="GtkButton" id="send_button">
                         <property name="label" translatable="yes">Update message</property>
-                        <property name="visible">True</property>
                         <style>
                             <class name="suggested-action"/>
                         </style>

main/data/occupant_list.ui

@@ -2,30 +2,23 @@
 <interface>
     <requires lib="gtk+" version="3.22"/>
     <template class="DinoUiOccupantMenuList">
-        <property name="visible">True</property>
         <child>
             <object class="GtkBox">
                 <property name="orientation">vertical</property>
-                <property name="visible">True</property>
                 <child>
-                    <object class="GtkToolItem">
+                    <object class="GtkSearchEntry" id="search_entry">
-                        <property name="visible">True</property>
+                        <property name="margin_top">8</property>
-                        <child>
+                        <property name="margin_bottom">8</property>
-                            <object class="GtkSearchEntry" id="search_entry">
+                        <property name="margin_start">8</property>
-                                <property name="margin">8</property>
+                        <property name="margin_end">8</property>
-                                <property name="visible">True</property>
-                            </object>
-                        </child>
                     </object>
                 </child>
                 <child>
                     <object class="GtkScrolledWindow">
                         <property name="max_content_height">500</property>
                         <property name="propagate_natural_height">True</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkListBox" id="list_box">
-                                <property name="visible">True</property>
                             </object>
                         </child>
                     </object>

main/data/occupant_list_item.ui

@@ -1,45 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiOccupantMenuListRow" parent="GtkListBoxRow">
+    <requires lib="gtk" version="4.0"/>
-        <property name="visible">True</property>
+    <object class="GtkGrid" id="main_grid">
+        <property name="margin-top">3</property>
+        <property name="margin-start">7</property>
+        <property name="margin-bottom">3</property>
+        <property name="margin-end">7</property>
+        <property name="column-spacing">10</property>
         <child>
-            <object class="GtkGrid">
+            <object class="DinoUiAvatarImage" id="image">
-                <property name="orientation">horizontal</property>
+                <property name="height">30</property>
-                <property name="margin-top">3</property>
+                <property name="width">30</property>
-                <property name="margin-left">7</property>
-                <property name="margin-bottom">3</property>
-                <property name="margin-right">7</property>
-                <property name="column-spacing">10</property>
-                <property name="visible">True</property>
-                <child>
-                    <object class="DinoUiAvatarImage" id="image">
-                        <property name="height">30</property>
-                        <property name="width">30</property>
-                        <property name="visible">True</property>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkGrid">
-                        <property name="orientation">vertical</property>
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="GtkLabel" id="name_label">
-                                <property name="max_width_chars">1</property>
-                                <property name="ellipsize">end</property>
-                                <property name="expand">True</property>
-                                <property name="xalign">0</property>
-                                <property name="visible">True</property>
-                            </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
-                        </child>
-                    </object>
-                </child>
             </object>
         </child>
-    </template>
+        <child>
-</interface>
+            <object class="GtkLabel" id="name_label">
+                <property name="max_width_chars">1</property>
+                <property name="ellipsize">end</property>
+                <property name="hexpand">1</property>
+                <property name="xalign">0</property>
+                <layout>
+                    <property name="column">1</property>
+                    <property name="row">0</property>
+                </layout>
+            </object>
+        </child>
+    </object>
+</interface>

main/data/search_autocomplete.ui

@@ -2,21 +2,19 @@
 <interface>
     <object class="GtkBox" id="root">
         <property name="orientation">horizontal</property>
-        <property name="visible">True</property>
         <child>
             <object class="DinoUiAvatarImage" id="image">
-                <property name="margin">4</property>
+                <property name="margin-top">4</property>
+                <property name="margin-bottom">4</property>
                 <property name="margin-start">6</property>
                 <property name="margin-end">6</property>
                 <property name="height">24</property>
                 <property name="width">24</property>
-                <property name="visible">True</property>
                 <property name="allow_gray">False</property>
             </object>
         </child>
         <child>
             <object class="GtkLabel" id="label">
-                <property name="visible">True</property>
                 <property name="ellipsize">end</property>
             </object>
         </child>

main/data/settings_dialog.ui

@@ -1,81 +1,67 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
     <template class="DinoUiSettingsDialog">
+        <property name="title" translatable="yes">Settings</property>
         <property name="modal">True</property>
         <child type="titlebar">
             <object class="GtkHeaderBar">
-                <property name="title" translatable="yes">Settings</property>
-                <property name="show_close_button">True</property>
-                <property name="visible">True</property>
             </object>
         </child>
-        <child internal-child="vbox">
+        <child internal-child="content_area">
             <object class="GtkBox">
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkGrid">
-                        <property name="margin">10</property>
+                        <property name="margin_top">10</property>
+                        <property name="margin_bottom">10</property>
+                        <property name="margin_start">10</property>
+                        <property name="margin_end">10</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
                         <property name="row-spacing">10</property>
-                        <property name="visible">True</property>
                         <child>
                             <object class="GtkCheckButton" id="typing_checkbutton">
                                 <property name="label" translatable="yes">Send typing notifications</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">0</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">0</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkCheckButton" id="marker_checkbutton">
                                 <property name="label" translatable="yes">Send read receipts</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">1</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">1</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkCheckButton" id="notification_checkbutton">
                                 <property name="label" translatable="yes">Notify when a new message arrives</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">2</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">2</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkCheckButton" id="emoji_checkbutton">
                                 <property name="label" translatable="yes">Convert smileys to emojis</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">3</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">3</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                         <child>
                             <object class="GtkCheckButton" id="check_spelling_checkbutton">
                                 <property name="label" translatable="yes">Check spelling</property>
-                                <property name="visible">True</property>
+                                <layout>
+                                    <property name="column">0</property>
+                                    <property name="row">4</property>
+                                </layout>
                             </object>
-                            <packing>
-                                <property name="left_attach">0</property>
-                                <property name="top_attach">4</property>
-                                <property name="width">1</property>
-                                <property name="height">1</property>
-                            </packing>
                         </child>
                     </object>
                 </child>

main/data/shortcuts.ui

@@ -4,22 +4,18 @@
         <property name="modal">True</property>
         <child>
             <object class="GtkShortcutsSection">
-                <property name="visible">True</property>
                 <property name="section-name">shortcuts</property>
                 <child>
                     <object class="GtkShortcutsGroup">
-                        <property name="visible">True</property>
                         <property name="title" translatable="yes">General</property>
                         <child>
                             <object class="GtkShortcutsShortcut">
-                                <property name="visible">True</property>
                                 <property name="accelerator">&lt;ctrl&gt;T</property>
                                 <property name="title" translatable="yes">Start Conversation</property>
                             </object>
                         </child>
                         <child>
                             <object class="GtkShortcutsShortcut">
-                                <property name="visible">True</property>
                                 <property name="accelerator">&lt;ctrl&gt;G</property>
                                 <property name="title" translatable="yes">Join Channel</property>
                             </object>
@@ -28,18 +24,15 @@
                 </child>
                 <child>
                     <object class="GtkShortcutsGroup">
-                        <property name="visible">True</property>
                         <property name="title" translatable="yes">Conversation</property>
                         <child>
                             <object class="GtkShortcutsShortcut">
-                                <property name="visible">True</property>
                                 <property name="accelerator">&lt;ctrl&gt;F</property>
                                 <property name="title" translatable="yes">Search messages</property>
                             </object>
                         </child>
                         <child>
                             <object class="GtkShortcutsShortcut">
-                                <property name="visible">True</property>
                                 <property name="accelerator">&lt;ctrl&gt;U</property>
                                 <property name="title" translatable="yes">Send a file</property>
                             </object>
@@ -48,18 +41,15 @@
                 </child>
                 <child>
                     <object class="GtkShortcutsGroup">
-                        <property name="visible">True</property>
                         <property name="title" translatable="yes">Navigation</property>
                         <child>
                             <object class="GtkShortcutsShortcut">
-                                <property name="visible">True</property>
                                 <property name="accelerator">&lt;ctrl&gt;Tab</property>
                                 <property name="title" translatable="yes">Jump to next conversation</property>
                             </object>
                         </child>
                         <child>
                             <object class="GtkShortcutsShortcut">
-                                <property name="visible">True</property>
                                 <property name="accelerator">&lt;ctrl&gt;&lt;Shift&gt;Tab</property>
                                 <property name="title" translatable="yes">Jump to previous conversation</property>
                             </object>

main/data/theme.css

@@ -27,8 +27,8 @@ window.dino-main .dino-conversation viewport /* Some themes set this */ {
 }
 
 @keyframes highlight {
-    from { background: alpha(@warning_color, 0.5) }
+    from { background: alpha(@warning_color, 0.5); }
-    to { background: transparent }
+    to { background: transparent; }
 }
 
 window.dino-main .dino-conversation .highlight-once {
@@ -38,16 +38,24 @@ window.dino-main .dino-conversation .highlight-once {
     animation-name: highlight;
 }
 
-window.dino-main .dino-conversation .message-box:hover {
+window.dino-main .dino-conversation .message-box.highlight {
     background: alpha(@theme_fg_color, 0.04);
 }
 
+window.dino-main .dino-conversation .message-box {
+    padding: 6px 15px 6px 15px;
+}
+
+window.dino-main .dino-conversation .message-box:not(.has-skeleton) {
+    padding-left: 58px;
+}
+
 window.dino-main .unread-count-notify {
     background-color: alpha(@theme_fg_color, 0.8);
     color: @theme_base_color;
     font-family: monospace;
     border-radius: 999em;
-    padding: .2em .41em;
+    padding: 0 .35em;
 }
 
 window.dino-main .unread-count-notify:backdrop {
@@ -142,7 +150,7 @@ window.dino-main .incoming-call-box {
 
 window.dino-main .multiparty-participants {
     border-top: 1px solid alpha(@theme_fg_color, 0.05);
-    background: alpha(@theme_fg_color, 0.04)
+    background: alpha(@theme_fg_color, 0.04);
 }
 
 window.dino-main .dino-sidebar > frame.collapsed {
@@ -171,34 +179,40 @@ window.dino-main .dino-chatinput frame box {
     background: transparent;
 }
 
-window.dino-main button.dino-attach-button {
+window.dino-main .dino-attach-button {
-    min-width: 24px; /* Make button the same with as avatars */
+    min-width: 24px; /* Make button the same width as avatars */
 }
 
-window.dino-main button.dino-chatinput-button {
+window.dino-main .dino-attach-button,
+window.dino-main .dino-chatinput-button button {
     border: none;
     background: transparent;
     box-shadow: none;
     min-height: 0;
     padding: 7px 5px;
-    color: alpha(@theme_fg_color, 0.6);
+    color: alpha(@theme_fg_color, 0.7);
     outline: none;
 }
 
-window.dino-main button.dino-chatinput-button:hover {
+window.dino-main .dino-attach-button:hover,
+window.dino-main .dino-chatinput-button button:hover {
     color: @theme_selected_bg_color;
 }
 
-window.dino-main button.dino-chatinput-button:backdrop {
+window.dino-main .dino-attach-button:backdrop,
+window.dino-main .dino-chatinput-button button:backdrop {
     color: alpha(@theme_unfocused_fg_color, 0.6);
 }
 
-window.dino-main button.dino-chatinput-button:active,
+window.dino-main .dino-attach-button:active,
-window.dino-main button.dino-chatinput-button:checked {
+window.dino-main .dino-attach-button:checked,
+window.dino-main .dino-chatinput-button button:active,
+window.dino-main .dino-chatinput-button button:checked {
     color: alpha(@theme_selected_bg_color, 0.8);
 }
 
-window.dino-main button.dino-chatinput-button:checked:backdrop {
+window.dino-main .dino-attach-button:checked:backdrop,
+window.dino-main .dino-chatinput-button button:checked:backdrop {
     color: alpha(@theme_unfocused_selected_bg_color, 0.8);
 }
 
@@ -228,7 +242,7 @@ box.dino-input-warning label {
 
 /*Chat input error*/
 
-box.dino-input-error frame border {
+box.dino-input-error frame {
     border-color: @error_color;
 }
 
@@ -237,19 +251,20 @@ box.dino-input-error frame separator {
     border: none;
 }
 
-box.dino-input-error label {
+box.dino-input-error .chat-input-status {
     color: @error_color;
 }
 
 @keyframes input-error-highlight {
-    0% { color: mix(@error_color, @theme_fg_color, 0.3);}
+    0% { transform: translate(0,0); }
-    30% { color: @error_color; text-shadow: 0px 0px 2px alpha(@error_color, 0.4); }
+    25% { transform: translate(-10px,0); }
-    100% { color: mix(@error_color, @theme_fg_color, 0.3); }
+    75% { transform: translate(10px,0); }
+    100% { transform: translate(0,0); }
 }
 
-box.dino-input-error label.input-status-highlight-once {
+box.dino-input-error .chat-input-status.input-status-highlight-once {
-    animation-duration: 1s;
+    animation-duration: 0.5s;
-    animation-timing-function: linear;
+    animation-timing-function: ease-in-out;
     animation-iteration-count: 1;
     animation-name: input-error-highlight;
 }
@@ -291,7 +306,7 @@ box.dino-input-error label.input-status-highlight-once {
     background: rgba(255,255,255,0.25);
 }
 
-.dino-call-window button.call-mediadevice-settings-button {
+.dino-call-window menubutton.call-mediadevice-settings-button button.toggle {
     border-radius: 1000px;
     min-height: 0;
     min-width: 0;
@@ -300,8 +315,8 @@ box.dino-input-error label.input-status-highlight-once {
     transition-duration: 0;
 }
 
-.dino-call-window button.call-mediadevice-settings-button:hover,
+.dino-call-window menubutton.call-mediadevice-settings-button button.toggle:hover,
-.dino-call-window button.call-mediadevice-settings-button:checked { /* Effect that makes the button slightly larger on hover :) */
+.dino-call-window menubutton.call-mediadevice-settings-button button.toggle:checked { /* Effect that makes the button slightly larger on hover :) */
     border-radius: 1000px;
     min-height: 0;
     min-width: 0;
@@ -309,7 +324,7 @@ box.dino-input-error label.input-status-highlight-once {
     margin: 0;
 }
 
-.dino-call-window .participant-header-bar {
+.dino-call-window .participant-header-bar .titles {
     background: none;
     border: none;
     border-radius: 0;
@@ -357,7 +372,7 @@ box.dino-input-error label.input-status-highlight-once {
 
 .dino-call-window .participant-name {
     color: white;
-    text-shadow: black;
+    text-shadow: 1px 1px 2px black;
 }
 
 .dino-call-window .text-no-controls {

main/data/unified_main_content.ui

@@ -1,94 +1,42 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <object class="GtkPaned" id="paned">
+        <property name="shrink-start-child">False</property>
+        <property name="shrink-end-child">False</property>
+        <property name="resize-start-child">False</property>
         <property name="position">300</property>
-        <property name="orientation">horizontal</property>
-        <property name="visible">True</property>
         <child>
             <object class="GtkStack" id="left_stack">
-                <property name="visible">True</property>
                 <child>
-                    <object class="GtkScrolledWindow" id="scrolled">
+                    <object class="GtkStackPage">
-                        <property name="expand">True</property>
-                        <property name="hscrollbar_policy">never</property>
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="DinoUiConversationSelector" id="conversation_list">
-                                <property name="visible">True</property>
-                            </object>
-                        </child>
-                    </object>
-                    <packing>
                         <property name="name">content</property>
-                    </packing>
+                        <property name="child">
-                </child>
+                            <object class="GtkScrolledWindow">
-                <child>
+                                <property name="hscrollbar_policy">never</property>
-                    <object class="GtkBox">
-                        <property name="margin">20</property>
-                        <property name="spacing">10</property>
-                        <property name="valign">start</property>
-                        <property name="halign">start</property>
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="GtkImage" id="conversation_list_placeholder_image">
-                                <property name="visible">True</property>
-                                <property name="valign">start</property>
-                                <style>
-                                    <class name="dim-label"/>
-                                </style>
-                            </object>
-                        </child>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="wrap">True</property>
-                                <property name="margin-top">70</property>
-                                <property name="margin-right">50</property>
-                                <property name="visible">True</property>
-                                <property name="valign">end</property>
-                                <property name="label" translatable="yes">Click here to start a conversation or join a channel.</property>
-                                <style>
-                                    <class name="dim-label"/>
-                                </style>
-                            </object>
-                        </child>
-                    </object>
-                    <packing>
-                        <property name="name">placeholder</property>
-                    </packing>
-                </child>
-            </object>
-            <packing>
-                <property name="resize">False</property>
-                <property name="shrink">False</property>
-            </packing>
-        </child>
-        <child>
-            <object class="GtkOverlay">
-                <property name="visible">True</property>
-                <child>
-                    <object class="GtkStack" id="right_stack">
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="DinoUiConversationView" id="conversation_view">
-                                <property name="visible">True</property>
-                            </object>
-                            <packing>
-                                <property name="name">content</property>
-                            </packing>
-                        </child>
-                        <child>
-                            <object class="GtkBox">
-                                <property name="orientation">vertical</property>
-                                <property name="expand">True</property>
-                                <property name="halign">center</property>
-                                <property name="valign">center</property>
-                                <property name="visible">True</property>
                                 <child>
-                                    <object class="GtkImage">
+                                    <object class="DinoUiConversationSelector" id="conversation_list">
-                                        <property name="icon-name">im.dino.Dino-symbolic</property>
+                                    </object>
-                                        <property name="pixel-size">144</property>
+                                </child>
-                                        <property name="margin-bottom">30</property>
+                            </object>
-                                        <property name="visible">True</property>
+                        </property>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkStackPage">
+                        <property name="name">placeholder</property>
+                        <property name="child">
+                            <object class="GtkBox">
+                                <property name="margin-start">20</property>
+                                <property name="margin-end">20</property>
+                                <property name="margin-top">20</property>
+                                <property name="margin-bottom">20</property>
+                                <property name="spacing">10</property>
+                                <property name="valign">start</property>
+                                <property name="halign">start</property>
+                                <child>
+                                    <object class="GtkImage" id="conversation_list_placeholder_image">
+                                        <property name="valign">start</property>
                                         <style>
                                             <class name="dim-label"/>
                                         </style>
@@ -96,52 +44,87 @@
                                 </child>
                                 <child>
                                     <object class="GtkLabel">
-                                        <property name="visible">True</property>
+                                        <property name="wrap">1</property>
-                                        <property name="label" translatable="yes">You have no open chats</property>
+                                        <property name="margin-top">70</property>
-                                        <property name="xalign">0.5</property>
+                                        <property name="margin-end">50</property>
-                                        <property name="yalign">0.5</property>
+                                        <property name="valign">end</property>
+                                        <property name="label" translatable="1">Click here to start a conversation or join a channel.</property>
                                         <style>
                                             <class name="dim-label"/>
                                         </style>
-                                        <attributes>
-                                            <attribute name="scale" value="1.2"/>
-                                        </attributes>
                                     </object>
                                 </child>
                             </object>
-                            <packing>
+                        </property>
-                                <property name="name">placeholder</property>
-                            </packing>
-                        </child>
                     </object>
                 </child>
+            </object>
+        </child>
+        <child>
+            <object class="GtkOverlay">
+                <property name="child">
+                    <object class="GtkStack" id="right_stack">
+                        <child>
+                            <object class="GtkStackPage">
+                                <property name="name">content</property>
+                                <property name="child">
+                                    <object class="DinoUiConversationView" id="conversation_view">
+                                    </object>
+                                </property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkStackPage">
+                                <property name="name">placeholder</property>
+                                <property name="child">
+                                    <object class="GtkBox">
+                                        <property name="orientation">vertical</property>
+                                        <property name="hexpand">1</property>
+                                        <property name="vexpand">1</property>
+                                        <property name="halign">center</property>
+                                        <property name="valign">center</property>
+                                        <child>
+                                            <object class="GtkImage">
+                                                <property name="icon-name">im.dino.Dino-symbolic</property>
+                                                <property name="pixel-size">144</property>
+                                                <property name="margin-bottom">30</property>
+                                                <style>
+                                                    <class name="dim-label"/>
+                                                </style>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="GtkLabel">
+                                                <property name="label" translatable="1">You have no open chats</property>
+                                                <style>
+                                                    <class name="dim-label"/>
+                                                </style>
+                                                <attributes>
+                                                    <attribute name="scale" value="1.2"></attribute>
+                                                </attributes>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </property>
+                            </object>
+                        </child>
+                    </object>
+                </property>
                 <child type="overlay">
                     <object class="GtkRevealer" id="search_revealer">
-                        <property name="visible">True</property>
                         <property name="halign">end</property>
                         <property name="transition-type">slide-left</property>
                         <style>
                             <class name="dino-sidebar"/>
                         </style>
-                        <child>
+                        <property name="child">
-                            <object class="GtkFrame">
+                            <object class="GtkFrame" id="search_frame">
-                                <property name="visible">True</property>
                                 <property name="width-request">400</property>
-                                <property name="shadow-type">none</property>
-                                <child>
-                                    <object class="DinoUiGlobalSearch" id="search_box">
-                                        <property name="visible">True</property>
-                                    </object>
-                                </child>
                             </object>
-                        </child>
+                        </property>
                     </object>
                 </child>
             </object>
-            <packing>
-                <property name="resize">True</property>
-                <property name="shrink">False</property>
-            </packing>
         </child>
     </object>
-</interface>
+</interface>

main/data/unified_window_placeholder.ui

@@ -1,21 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
+    <requires lib="gtk" version="4.0"/>
     <template class="DinoUiMainWindowPlaceholder">
         <property name="valign">center</property>
-        <property name="visible">True</property>
         <child>
             <object class="GtkBox" id="box">
                 <property name="orientation">vertical</property>
                 <property name="valign">center</property>
                 <property name="halign">center</property>
-                <property name="hexpand">True</property>
+                <property name="hexpand">1</property>
-                <property name="visible">True</property>
                 <child>
                     <object class="GtkImage">
                         <property name="icon-name">im.dino.Dino-symbolic</property>
                         <property name="pixel-size">144</property>
-                        <property name="margin">30</property>
+                        <property name="margin-start">30</property>
-                        <property name="visible">True</property>
+                        <property name="margin-end">30</property>
+                        <property name="margin-top">30</property>
+                        <property name="margin-bottom">30</property>
                         <style>
                             <class name="dim-label"/>
                         </style>
@@ -23,22 +24,18 @@
                 </child>
                 <child>
                     <object class="GtkLabel" id="title_label">
-                        <property name="xalign">0.5</property>
+                        <property name="visible">0</property>
-                        <property name="yalign">0.5</property>
                         <style>
                             <class name="dim-label"/>
                         </style>
                         <attributes>
-                            <attribute name="scale" value="1.3"/>
+                            <attribute name="scale" value="1.3"></attribute>
                         </attributes>
                     </object>
                 </child>
                 <child>
                     <object class="GtkLabel" id="label">
-                        <property name="xalign">0.5</property>
-                        <property name="yalign">0.5</property>
                         <property name="margin-top">5</property>
-                        <property name="visible">True</property>
                         <style>
                             <class name="dim-label"/>
                         </style>
@@ -48,7 +45,6 @@
                     <object class="GtkButton" id="primary_button">
                         <property name="margin-top">15</property>
                         <property name="halign">center</property>
-                        <property name="visible">True</property>
                         <style>
                             <class name="text-button"/>
                             <class name="suggested-action"/>
@@ -57,8 +53,9 @@
                 </child>
                 <child>
                     <object class="GtkButton" id="secondary_button">
+                        <property name="visible">0</property>
                         <property name="halign">center</property>
-                        <property name="no_show_all">True</property>
+<!--                        <property name="no_show_all">True</property>-->
                         <style>
                             <class name="text-button"/>
                         </style>

main/src/emojichooser.c

@@ -1,823 +0,0 @@
-/* gtkemojichooser.c: An Emoji chooser widget
- * Copyright 2017, Red Hat, Inc.
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 2 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library. If not, see <http://www.gnu.org/licenses/>.
- */
-
-#include "emojichooser.h"
-
-#define BOX_SPACE 6
-
-typedef struct {
-  GtkWidget *box;
-  GtkWidget *heading;
-  GtkWidget *button;
-  const char *first;
-  gunichar label;
-  gboolean empty;
-} EmojiSection;
-
-struct _DinoEmojiChooser
-{
-  GtkPopover parent_instance;
-
-  GtkWidget *search_entry;
-  GtkWidget *stack;
-  GtkWidget *scrolled_window;
-
-  int emoji_max_width;
-
-  EmojiSection recent;
-  EmojiSection people;
-  EmojiSection body;
-  EmojiSection nature;
-  EmojiSection food;
-  EmojiSection travel;
-  EmojiSection activities;
-  EmojiSection objects;
-  EmojiSection symbols;
-  EmojiSection flags;
-
-  GtkGesture *recent_long_press;
-  GtkGesture *recent_multi_press;
-  GtkGesture *people_long_press;
-  GtkGesture *people_multi_press;
-  GtkGesture *body_long_press;
-  GtkGesture *body_multi_press;
-
-  GVariant *data;
-  GtkWidget *box;
-  GVariantIter *iter;
-  guint populate_idle;
-
-  GSettings *settings;
-};
-
-struct _DinoEmojiChooserClass {
-  GtkPopoverClass parent_class;
-  gboolean (* popover_button_release_event)	(GtkWidget	     *widget,
-						 GdkEventButton      *event);
-};
-
-enum {
-  EMOJI_PICKED,
-  LAST_SIGNAL
-};
-
-static int signals[LAST_SIGNAL];
-
-G_DEFINE_TYPE (DinoEmojiChooser, dino_emoji_chooser, GTK_TYPE_POPOVER)
-
-static void
-dino_emoji_chooser_finalize (GObject *object)
-{
-  DinoEmojiChooser *chooser = DINO_EMOJI_CHOOSER (object);
-
-  if (chooser->populate_idle)
-    g_source_remove (chooser->populate_idle);
-
-  g_variant_unref (chooser->data);
-  g_object_unref (chooser->settings);
-
-  g_clear_object (&chooser->recent_long_press);
-  g_clear_object (&chooser->recent_multi_press);
-  g_clear_object (&chooser->people_long_press);
-  g_clear_object (&chooser->people_multi_press);
-  g_clear_object (&chooser->body_long_press);
-  g_clear_object (&chooser->body_multi_press);
-
-  G_OBJECT_CLASS (dino_emoji_chooser_parent_class)->finalize (object);
-}
-
-static void
-scroll_to_section (GtkButton *button,
-                   gpointer   data)
-{
-  EmojiSection *section = data;
-  DinoEmojiChooser *chooser;
-  GtkAdjustment *adj;
-  GtkAllocation alloc = { 0, 0, 0, 0 };
-
-  chooser = DINO_EMOJI_CHOOSER (gtk_widget_get_ancestor (GTK_WIDGET (button), GTK_TYPE_EMOJI_CHOOSER));
-
-  adj = gtk_scrolled_window_get_vadjustment (GTK_SCROLLED_WINDOW (chooser->scrolled_window));
-
-  if (section->heading)
-    gtk_widget_get_allocation (section->heading, &alloc);
-
-  gtk_adjustment_set_value (adj, alloc.y - BOX_SPACE);
-}
-
-static void
-add_emoji (GtkWidget    *box,
-           gboolean      prepend,
-           GVariant     *item,
-           gunichar      modifier,
-           DinoEmojiChooser *chooser);
-
-#define MAX_RECENT (7*3)
-
-static void
-populate_recent_section (DinoEmojiChooser *chooser)
-{
-  GVariant *variant;
-  GVariant *item;
-  GVariantIter iter;
-  gboolean empty = FALSE;
-
-  variant = g_settings_get_value (chooser->settings, "recent-emoji");
-  g_variant_iter_init (&iter, variant);
-  while ((item = g_variant_iter_next_value (&iter)))
-    {
-      GVariant *emoji_data;
-      gunichar modifier;
-
-      emoji_data = g_variant_get_child_value (item, 0);
-      g_variant_get_child (item, 1, "u", &modifier);
-      add_emoji (chooser->recent.box, FALSE, emoji_data, modifier, chooser);
-      g_variant_unref (emoji_data);
-      g_variant_unref (item);
-      empty = FALSE;
-    }
-
-  if (!empty)
-    {
-      gtk_widget_show (chooser->recent.box);
-      gtk_widget_set_sensitive (chooser->recent.button, TRUE);
-    }
-  g_variant_unref (variant);
-}
-
-static void
-add_recent_item (DinoEmojiChooser *chooser,
-                 GVariant        *item,
-                 gunichar         modifier)
-{
-  GList *children, *l;
-  int i;
-  GVariantBuilder builder;
-
-  g_variant_ref (item);
-
-  g_variant_builder_init (&builder, G_VARIANT_TYPE ("a((auss)u)"));
-  g_variant_builder_add (&builder, "(@(auss)u)", item, modifier);
-
-  children = gtk_container_get_children (GTK_CONTAINER (chooser->recent.box));
-  for (l = children, i = 1; l; l = l->next, i++)
-    {
-      GVariant *item2 = g_object_get_data (G_OBJECT (l->data), "emoji-data");
-      gunichar modifier2 = GPOINTER_TO_UINT (g_object_get_data (G_OBJECT (l->data), "modifier"));
-
-      if (modifier == modifier2 && g_variant_equal (item, item2))
-        {
-          gtk_widget_destroy (GTK_WIDGET (l->data));
-          i--;
-          continue;
-        }
-      if (i >= MAX_RECENT)
-        {
-          gtk_widget_destroy (GTK_WIDGET (l->data));
-          continue;
-        }
-
-      g_variant_builder_add (&builder, "(@(auss)u)", item2, modifier2);
-    }
-  g_list_free (children);
-
-  add_emoji (chooser->recent.box, TRUE, item, modifier, chooser);
-
-  /* Enable recent */
-  gtk_widget_show (chooser->recent.box);
-  gtk_widget_set_sensitive (chooser->recent.button, TRUE);
-
-  g_settings_set_value (chooser->settings, "recent-emoji", g_variant_builder_end (&builder));
-
-  g_variant_unref (item);
-}
-
-static void
-emoji_activated (GtkFlowBox      *box,
-                 GtkFlowBoxChild *child,
-                 gpointer         data)
-{
-  DinoEmojiChooser *chooser = data;
-  char *text;
-  GtkWidget *ebox;
-  GtkWidget *label;
-  GVariant *item;
-  gunichar modifier;
-
-  gtk_popover_popdown (GTK_POPOVER (chooser));
-
-  ebox = gtk_bin_get_child (GTK_BIN (child));
-  label = gtk_bin_get_child (GTK_BIN (ebox));
-  text = g_strdup (gtk_label_get_label (GTK_LABEL (label)));
-
-  item = (GVariant*) g_object_get_data (G_OBJECT (child), "emoji-data");
-  modifier = (gunichar) GPOINTER_TO_UINT (g_object_get_data (G_OBJECT (child), "modifier"));
-  add_recent_item (chooser, item, modifier);
-
-  g_signal_emit (data, signals[EMOJI_PICKED], 0, text);
-  g_free (text);
-}
-
-static gboolean
-has_variations (GVariant *emoji_data)
-{
-  GVariant *codes;
-  gsize i;
-  gboolean has_variations;
-
-  has_variations = FALSE;
-  codes = g_variant_get_child_value (emoji_data, 0);
-  for (i = 0; i < g_variant_n_children (codes); i++)
-    {
-      gunichar code;
-      g_variant_get_child (codes, i, "u", &code);
-      if (code == 0)
-        {
-          has_variations = TRUE;
-          break;
-        }
-    }
-  g_variant_unref (codes);
-
-  return has_variations;
-}
-
-static void
-show_variations (DinoEmojiChooser *chooser,
-                 GtkWidget       *child)
-{
-  GtkWidget *popover;
-  GtkWidget *view;
-  GtkWidget *box;
-  GVariant *emoji_data;
-  GtkWidget *parent_popover;
-  gunichar modifier;
-
-  if (!child)
-    return;
-
-  emoji_data = (GVariant*) g_object_get_data (G_OBJECT (child), "emoji-data");
-  if (!emoji_data)
-    return;
-
-  if (!has_variations (emoji_data))
-    return;
-
-  parent_popover = gtk_widget_get_ancestor (child, GTK_TYPE_POPOVER);
-  popover = gtk_popover_new (child);
-  view = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
-  gtk_style_context_add_class (gtk_widget_get_style_context (view), "view");
-  box = gtk_flow_box_new ();
-  gtk_flow_box_set_homogeneous (GTK_FLOW_BOX (box), TRUE);
-  gtk_flow_box_set_min_children_per_line (GTK_FLOW_BOX (box), 6);
-  gtk_flow_box_set_max_children_per_line (GTK_FLOW_BOX (box), 6);
-  gtk_flow_box_set_activate_on_single_click (GTK_FLOW_BOX (box), TRUE);
-  gtk_flow_box_set_selection_mode (GTK_FLOW_BOX (box), GTK_SELECTION_NONE);
-  gtk_container_add (GTK_CONTAINER (popover), view);
-  gtk_container_add (GTK_CONTAINER (view), box);
-
-  g_signal_connect (box, "child-activated", G_CALLBACK (emoji_activated), parent_popover);
-
-  add_emoji (box, FALSE, emoji_data, 0, chooser);
-  for (modifier = 0x1f3fb; modifier <= 0x1f3ff; modifier++)
-    add_emoji (box, FALSE, emoji_data, modifier, chooser);
-
-  gtk_widget_show_all (view);
-  gtk_popover_popup (GTK_POPOVER (popover));
-}
-
-static void
-update_hover (GtkWidget *widget,
-              GdkEvent  *event,
-              gpointer   data)
-{
-  if (event->type == GDK_ENTER_NOTIFY)
-    gtk_widget_set_state_flags (widget, GTK_STATE_FLAG_PRELIGHT, FALSE);
-  else
-    gtk_widget_unset_state_flags (widget, GTK_STATE_FLAG_PRELIGHT);
-}
-
-static void
-long_pressed_cb (GtkGesture *gesture,
-                 double      x,
-                 double      y,
-                 gpointer    data)
-{
-  DinoEmojiChooser *chooser = data;
-  GtkWidget *box;
-  GtkWidget *child;
-
-  box = gtk_event_controller_get_widget (GTK_EVENT_CONTROLLER (gesture));
-  child = GTK_WIDGET (gtk_flow_box_get_child_at_pos (GTK_FLOW_BOX (box), x, y));
-  show_variations (chooser, child);
-}
-
-static void
-pressed_cb (GtkGesture *gesture,
-            int         n_press,
-            double      x,
-            double      y,
-            gpointer    data)
-{
-  DinoEmojiChooser *chooser = data;
-  GtkWidget *box;
-  GtkWidget *child;
-
-  box = gtk_event_controller_get_widget (GTK_EVENT_CONTROLLER (gesture));
-  child = GTK_WIDGET (gtk_flow_box_get_child_at_pos (GTK_FLOW_BOX (box), x, y));
-  show_variations (chooser, child);
-}
-
-static gboolean
-popup_menu (GtkWidget *widget,
-            gpointer   data)
-{
-  DinoEmojiChooser *chooser = data;
-
-  show_variations (chooser, widget);
-  return TRUE;
-}
-
-static void
-add_emoji (GtkWidget    *box,
-           gboolean      prepend,
-           GVariant     *item,
-           gunichar      modifier,
-           DinoEmojiChooser *chooser)
-{
-  GtkWidget *child;
-  GtkWidget *ebox;
-  GtkWidget *label;
-  PangoAttrList *attrs;
-  GVariant *codes;
-  char text[64];
-  char *p = text;
-  gsize i;
-  PangoLayout *layout;
-  PangoRectangle rect;
-
-  codes = g_variant_get_child_value (item, 0);
-  for (i = 0; i < g_variant_n_children (codes); i++)
-    {
-      gunichar code;
-
-      g_variant_get_child (codes, i, "u", &code);
-      if (code == 0)
-        code = modifier;
-      if (code != 0)
-        p += g_unichar_to_utf8 (code, p);
-    }
-  g_variant_unref (codes);
-  p += g_unichar_to_utf8 (0xFE0F, p); /* U+FE0F is the Emoji variation selector */
-  p[0] = 0;
-
-  label = gtk_label_new (text);
-  attrs = pango_attr_list_new ();
-  pango_attr_list_insert (attrs, pango_attr_scale_new (PANGO_SCALE_X_LARGE));
-  gtk_label_set_attributes (GTK_LABEL (label), attrs);
-  pango_attr_list_unref (attrs);
-
-  layout = gtk_label_get_layout (GTK_LABEL (label));
-  pango_layout_get_extents (layout, &rect, NULL);
-
-  /* Check for fallback rendering that generates too wide items */
-  if (pango_layout_get_unknown_glyphs_count (layout) > 0 ||
-      rect.width >= 1.5 * chooser->emoji_max_width)
-    {
-      gtk_widget_destroy (label);
-      return;
-    }
-
-  child = gtk_flow_box_child_new ();
-  gtk_style_context_add_class (gtk_widget_get_style_context (child), "emoji");
-  g_object_set_data_full (G_OBJECT (child), "emoji-data",
-                          g_variant_ref (item),
-                          (GDestroyNotify)g_variant_unref);
-  if (modifier != 0)
-    g_object_set_data (G_OBJECT (child), "modifier", GUINT_TO_POINTER (modifier));
-
-  ebox = gtk_event_box_new ();
-  gtk_widget_add_events (ebox, GDK_ENTER_NOTIFY_MASK | GDK_LEAVE_NOTIFY_MASK);
-  g_signal_connect (ebox, "enter-notify-event", G_CALLBACK (update_hover), FALSE);
-  g_signal_connect (ebox, "leave-notify-event", G_CALLBACK (update_hover), FALSE);
-  gtk_container_add (GTK_CONTAINER (child), ebox);
-  gtk_container_add (GTK_CONTAINER (ebox), label);
-  gtk_widget_show_all (child);
-
-  if (chooser)
-    g_signal_connect (child, "popup-menu", G_CALLBACK (popup_menu), chooser);
-
-  gtk_flow_box_insert (GTK_FLOW_BOX (box), child, prepend ? 0 : -1);
-}
-
-static gboolean
-populate_emoji_chooser (gpointer data)
-{
-  DinoEmojiChooser *chooser = data;
-  GBytes *bytes = NULL;
-  GVariant *item;
-  guint64 start, now;
-
-  start = g_get_monotonic_time ();
-
-  if (!chooser->data)
-    {
-      bytes = g_resources_lookup_data ("/org/gtk/libgtk/emoji/emoji.data", 0, NULL);
-      if (bytes == NULL) {
-        bytes = g_resources_lookup_data ("/org/gtk/libgtk/emoji/en.data", 0, NULL);
-      }
-      chooser->data = g_variant_ref_sink (g_variant_new_from_bytes (G_VARIANT_TYPE ("a(auss)"), bytes, TRUE));
-    }
-
-  if (!chooser->iter)
-    {
-      chooser->iter = g_variant_iter_new (chooser->data);
-      chooser->box = chooser->people.box;
-    }
-  while ((item = g_variant_iter_next_value (chooser->iter)))
-    {
-      const char *name;
-
-      g_variant_get_child (item, 1, "&s", &name);
-
-      if (g_strcmp0 (name, chooser->body.first) == 0)
-        chooser->box = chooser->body.box;
-      else if (g_strcmp0 (name, chooser->nature.first) == 0)
-        chooser->box = chooser->nature.box;
-      else if (g_strcmp0 (name, chooser->food.first) == 0)
-        chooser->box = chooser->food.box;
-      else if (g_strcmp0 (name, chooser->travel.first) == 0)
-        chooser->box = chooser->travel.box;
-      else if (g_strcmp0 (name, chooser->activities.first) == 0)
-        chooser->box = chooser->activities.box;
-      else if (g_strcmp0 (name, chooser->objects.first) == 0)
-        chooser->box = chooser->objects.box;
-      else if (g_strcmp0 (name, chooser->symbols.first) == 0)
-        chooser->box = chooser->symbols.box;
-      else if (g_strcmp0 (name, chooser->flags.first) == 0)
-        chooser->box = chooser->flags.box;
-
-      add_emoji (chooser->box, FALSE, item, 0, chooser);
-      g_variant_unref (item);
-
-      now = g_get_monotonic_time ();
-      if (now > start + 8000)
-        return G_SOURCE_CONTINUE;
-    }
-
-  /* We scroll to the top on show, so check the right button for the 1st time */
-  gtk_widget_set_state_flags (chooser->recent.button, GTK_STATE_FLAG_CHECKED, FALSE);
-
-  g_variant_iter_free (chooser->iter);
-  chooser->iter = NULL;
-  chooser->box = NULL;
-  chooser->populate_idle = 0;
-
-  return G_SOURCE_REMOVE;
-}
-
-static void
-adj_value_changed (GtkAdjustment *adj,
-                   gpointer       data)
-{
-  DinoEmojiChooser *chooser = data;
-  double value = gtk_adjustment_get_value (adj);
-  EmojiSection const *sections[] = {
-    &chooser->recent,
-    &chooser->people,
-    &chooser->body,
-    &chooser->nature,
-    &chooser->food,
-    &chooser->travel,
-    &chooser->activities,
-    &chooser->objects,
-    &chooser->symbols,
-    &chooser->flags,
-  };
-  EmojiSection const *select_section = sections[0];
-  gsize i;
-
-  /* Figure out which section the current scroll position is within */
-  for (i = 0; i < G_N_ELEMENTS (sections); ++i)
-    {
-      EmojiSection const *section = sections[i];
-      GtkAllocation alloc;
-
-      if (section->heading)
-        gtk_widget_get_allocation (section->heading, &alloc);
-      else
-        gtk_widget_get_allocation (section->box, &alloc);
-
-      if (value < alloc.y - BOX_SPACE)
-        break;
-
-      select_section = section;
-    }
-
-  /* Un/Check the section buttons accordingly */
-  for (i = 0; i < G_N_ELEMENTS (sections); ++i)
-    {
-      EmojiSection const *section = sections[i];
-
-      if (section == select_section)
-        gtk_widget_set_state_flags (section->button, GTK_STATE_FLAG_CHECKED, FALSE);
-      else
-        gtk_widget_unset_state_flags (section->button, GTK_STATE_FLAG_CHECKED);
-    }
-}
-
-static gboolean
-filter_func (GtkFlowBoxChild *child,
-             gpointer         data)
-{
-  EmojiSection *section = data;
-  DinoEmojiChooser *chooser;
-  GVariant *emoji_data;
-  const char *text;
-  const char *name;
-  gboolean res;
-
-  res = TRUE;
-
-  chooser = DINO_EMOJI_CHOOSER (gtk_widget_get_ancestor (GTK_WIDGET (child), GTK_TYPE_EMOJI_CHOOSER));
-  text = gtk_entry_get_text (GTK_ENTRY (chooser->search_entry));
-  emoji_data = (GVariant *) g_object_get_data (G_OBJECT (child), "emoji-data");
-
-  if (text[0] == 0)
-    goto out;
-
-  if (!emoji_data)
-    goto out;
-
-  g_variant_get_child (emoji_data, 1, "&s", &name);
-  res = g_str_match_string (text, name, TRUE);
-
-out:
-  if (res)
-    section->empty = FALSE;
-
-  return res;
-}
-
-static void
-invalidate_section (EmojiSection *section)
-{
-  section->empty = TRUE;
-  gtk_flow_box_invalidate_filter (GTK_FLOW_BOX (section->box));
-}
-
-static void
-update_headings (DinoEmojiChooser *chooser)
-{
-  gtk_widget_set_visible (chooser->people.heading, !chooser->people.empty);
-  gtk_widget_set_visible (chooser->people.box, !chooser->people.empty);
-  gtk_widget_set_visible (chooser->body.heading, !chooser->body.empty);
-  gtk_widget_set_visible (chooser->body.box, !chooser->body.empty);
-  gtk_widget_set_visible (chooser->nature.heading, !chooser->nature.empty);
-  gtk_widget_set_visible (chooser->nature.box, !chooser->nature.empty);
-  gtk_widget_set_visible (chooser->food.heading, !chooser->food.empty);
-  gtk_widget_set_visible (chooser->food.box, !chooser->food.empty);
-  gtk_widget_set_visible (chooser->travel.heading, !chooser->travel.empty);
-  gtk_widget_set_visible (chooser->travel.box, !chooser->travel.empty);
-  gtk_widget_set_visible (chooser->activities.heading, !chooser->activities.empty);
-  gtk_widget_set_visible (chooser->activities.box, !chooser->activities.empty);
-  gtk_widget_set_visible (chooser->objects.heading, !chooser->objects.empty);
-  gtk_widget_set_visible (chooser->objects.box, !chooser->objects.empty);
-  gtk_widget_set_visible (chooser->symbols.heading, !chooser->symbols.empty);
-  gtk_widget_set_visible (chooser->symbols.box, !chooser->symbols.empty);
-  gtk_widget_set_visible (chooser->flags.heading, !chooser->flags.empty);
-  gtk_widget_set_visible (chooser->flags.box, !chooser->flags.empty);
-
-  if (chooser->recent.empty && chooser->people.empty &&
-      chooser->body.empty && chooser->nature.empty &&
-      chooser->food.empty && chooser->travel.empty &&
-      chooser->activities.empty && chooser->objects.empty &&
-      chooser->symbols.empty && chooser->flags.empty)
-    gtk_stack_set_visible_child_name (GTK_STACK (chooser->stack), "empty");
-  else
-    gtk_stack_set_visible_child_name (GTK_STACK (chooser->stack), "list");
-}
-
-static void
-search_changed (GtkEntry *entry,
-                gpointer  data)
-{
-  DinoEmojiChooser *chooser = data;
-
-  invalidate_section (&chooser->recent);
-  invalidate_section (&chooser->people);
-  invalidate_section (&chooser->body);
-  invalidate_section (&chooser->nature);
-  invalidate_section (&chooser->food);
-  invalidate_section (&chooser->travel);
-  invalidate_section (&chooser->activities);
-  invalidate_section (&chooser->objects);
-  invalidate_section (&chooser->symbols);
-  invalidate_section (&chooser->flags);
-
-  update_headings (chooser);
-}
-
-static void
-setup_section (DinoEmojiChooser *chooser,
-               EmojiSection   *section,
-               const char     *first,
-               const char     *icon)
-{
-  GtkAdjustment *adj;
-  GtkWidget *image;
-
-  section->first = first;
-
-  image = gtk_bin_get_child (GTK_BIN (section->button));
-  gtk_image_set_from_icon_name (GTK_IMAGE (image), icon, GTK_ICON_SIZE_BUTTON);
-
-  adj = gtk_scrolled_window_get_vadjustment (GTK_SCROLLED_WINDOW (chooser->scrolled_window));
-
-  gtk_container_set_focus_vadjustment (GTK_CONTAINER (section->box), adj);
-  gtk_flow_box_set_filter_func (GTK_FLOW_BOX (section->box), filter_func, section, NULL);
-  g_signal_connect (section->button, "clicked", G_CALLBACK (scroll_to_section), section);
-}
-
-static void
-dino_emoji_chooser_init (DinoEmojiChooser *chooser)
-{
-  GtkAdjustment *adj;
-
-  chooser->settings = g_settings_new ("org.gtk.Settings.EmojiChooser");
-
-  gtk_widget_init_template (GTK_WIDGET (chooser));
-
-  /* Get a reasonable maximum width for an emoji. We do this to
-   * skip overly wide fallback rendering for certain emojis the
-   * font does not contain and therefore end up being rendered
-   * as multiply glyphs.
-   */
-  {
-    PangoLayout *layout = gtk_widget_create_pango_layout (GTK_WIDGET (chooser), "🙂");
-    PangoAttrList *attrs;
-    PangoRectangle rect;
-
-    attrs = pango_attr_list_new ();
-    pango_attr_list_insert (attrs, pango_attr_scale_new (PANGO_SCALE_X_LARGE));
-    pango_layout_set_attributes (layout, attrs);
-    pango_attr_list_unref (attrs);
-
-    pango_layout_get_extents (layout, &rect, NULL);
-    chooser->emoji_max_width = rect.width;
-
-    g_object_unref (layout);
-  }
-
-  chooser->recent_long_press = gtk_gesture_long_press_new (chooser->recent.box);
-  g_signal_connect (chooser->recent_long_press, "pressed", G_CALLBACK (long_pressed_cb), chooser);
-  chooser->recent_multi_press = gtk_gesture_multi_press_new (chooser->recent.box);
-  gtk_gesture_single_set_button (GTK_GESTURE_SINGLE (chooser->recent_multi_press), GDK_BUTTON_SECONDARY);
-  g_signal_connect (chooser->recent_multi_press, "pressed", G_CALLBACK (pressed_cb), chooser);
-
-  chooser->people_long_press = gtk_gesture_long_press_new (chooser->people.box);
-  g_signal_connect (chooser->people_long_press, "pressed", G_CALLBACK (long_pressed_cb), chooser);
-  chooser->people_multi_press = gtk_gesture_multi_press_new (chooser->people.box);
-  gtk_gesture_single_set_button (GTK_GESTURE_SINGLE (chooser->people_multi_press), GDK_BUTTON_SECONDARY);
-  g_signal_connect (chooser->people_multi_press, "pressed", G_CALLBACK (pressed_cb), chooser);
-
-  chooser->body_long_press = gtk_gesture_long_press_new (chooser->body.box);
-  g_signal_connect (chooser->body_long_press, "pressed", G_CALLBACK (long_pressed_cb), chooser);
-  chooser->body_multi_press = gtk_gesture_multi_press_new (chooser->body.box);
-  gtk_gesture_single_set_button (GTK_GESTURE_SINGLE (chooser->body_multi_press), GDK_BUTTON_SECONDARY);
-  g_signal_connect (chooser->body_multi_press, "pressed", G_CALLBACK (pressed_cb), chooser);
-
-  adj = gtk_scrolled_window_get_vadjustment (GTK_SCROLLED_WINDOW (chooser->scrolled_window));
-  g_signal_connect (adj, "value-changed", G_CALLBACK (adj_value_changed), chooser);
-
-  setup_section (chooser, &chooser->recent, NULL, "emoji-recent-symbolic");
-  setup_section (chooser, &chooser->people, "grinning face", "emoji-people-symbolic");
-  setup_section (chooser, &chooser->body, "selfie", "emoji-body-symbolic");
-  setup_section (chooser, &chooser->nature, "monkey face", "emoji-nature-symbolic");
-  setup_section (chooser, &chooser->food, "grapes", "emoji-food-symbolic");
-  setup_section (chooser, &chooser->travel, "globe showing Europe-Africa", "emoji-travel-symbolic");
-  setup_section (chooser, &chooser->activities, "jack-o-lantern", "emoji-activities-symbolic");
-  setup_section (chooser, &chooser->objects, "muted speaker", "emoji-objects-symbolic");
-  setup_section (chooser, &chooser->symbols, "ATM sign", "emoji-symbols-symbolic");
-  setup_section (chooser, &chooser->flags, "chequered flag", "emoji-flags-symbolic");
-
-  populate_recent_section (chooser);
-
-  chooser->populate_idle = g_idle_add (populate_emoji_chooser, chooser);
-  g_source_set_name_by_id (chooser->populate_idle, "[gtk] populate_emoji_chooser");
-}
-
-static void
-dino_emoji_chooser_show (GtkWidget *widget)
-{
-  DinoEmojiChooser *chooser = DINO_EMOJI_CHOOSER (widget);
-  GtkAdjustment *adj;
-
-  GTK_WIDGET_CLASS (dino_emoji_chooser_parent_class)->show (widget);
-
-  adj = gtk_scrolled_window_get_vadjustment (GTK_SCROLLED_WINDOW (chooser->scrolled_window));
-  gtk_adjustment_set_value (adj, 0);
-
-  gtk_entry_set_text (GTK_ENTRY (chooser->search_entry), "");
-}
-
-static gboolean
-dino_emoji_chooser_button_release (GtkWidget      *widget,
-                                   GdkEventButton *event)
-{
-  DinoEmojiChooserClass *klass = DINO_EMOJI_CHOOSER_GET_CLASS(widget);
-  GtkWidget *event_widget = gtk_get_event_widget ((GdkEvent *) event);
-  if (!event_widget && event->window != gtk_widget_get_window (widget))
-    {
-      return GDK_EVENT_PROPAGATE;
-    }
-  return klass->popover_button_release_event (widget, event);
-}
-
-static void
-dino_emoji_chooser_class_init (DinoEmojiChooserClass *klass)
-{
-  GObjectClass *object_class = G_OBJECT_CLASS (klass);
-  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
-
-  object_class->finalize = dino_emoji_chooser_finalize;
-  widget_class->show = dino_emoji_chooser_show;
-  klass->popover_button_release_event = widget_class->button_release_event;
-  widget_class->button_release_event = dino_emoji_chooser_button_release;
-
-  signals[EMOJI_PICKED] = g_signal_new ("emoji-picked",
-                                        G_OBJECT_CLASS_TYPE (object_class),
-                                        G_SIGNAL_RUN_LAST,
-                                        0,
-                                        NULL, NULL,
-                                        NULL,
-                                        G_TYPE_NONE, 1, G_TYPE_STRING|G_SIGNAL_TYPE_STATIC_SCOPE);
-
-  gtk_widget_class_set_template_from_resource (widget_class, "/im/dino/Dino/emojichooser.ui");
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, search_entry);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, stack);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, scrolled_window);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, recent.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, recent.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, people.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, people.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, people.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, body.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, body.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, body.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, nature.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, nature.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, nature.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, food.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, food.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, food.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, travel.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, travel.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, travel.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, activities.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, activities.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, activities.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, objects.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, objects.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, objects.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, symbols.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, symbols.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, symbols.button);
-
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, flags.box);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, flags.heading);
-  gtk_widget_class_bind_template_child (widget_class, DinoEmojiChooser, flags.button);
-
-  gtk_widget_class_bind_template_callback (widget_class, emoji_activated);
-  gtk_widget_class_bind_template_callback (widget_class, search_changed);
-}
-
-DinoEmojiChooser *
-dino_emoji_chooser_new (void)
-{
-  return DINO_EMOJI_CHOOSER (g_object_new (GTK_TYPE_EMOJI_CHOOSER, NULL));
-}

main/src/emojichooser.h

@@ -1,36 +0,0 @@
-/* gtkemojichooser.h: An Emoji chooser widget
- * Copyright 2017, Red Hat, Inc.
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 2 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library. If not, see <http://www.gnu.org/licenses/>.
- */
-
-#pragma once
-#include <gtk/gtk.h>
-
-G_BEGIN_DECLS
-
-#define GTK_TYPE_EMOJI_CHOOSER                 (dino_emoji_chooser_get_type ())
-#define DINO_EMOJI_CHOOSER(obj)                 (G_TYPE_CHECK_INSTANCE_CAST ((obj), GTK_TYPE_EMOJI_CHOOSER, DinoEmojiChooser))
-#define DINO_EMOJI_CHOOSER_CLASS(klass)         (G_TYPE_CHECK_CLASS_CAST ((klass), GTK_TYPE_EMOJI_CHOOSER, DinoEmojiChooserClass))
-#define GTK_IS_EMOJI_CHOOSER(obj)              (G_TYPE_CHECK_INSTANCE_TYPE ((obj), GTK_TYPE_EMOJI_CHOOSER))
-#define GTK_IS_EMOJI_CHOOSER_CLASS(klass)      (G_TYPE_CHECK_CLASS_TYPE ((klass), GTK_TYPE_EMOJI_CHOOSER))
-#define DINO_EMOJI_CHOOSER_GET_CLASS(obj)       (G_TYPE_INSTANCE_GET_CLASS ((obj), GTK_TYPE_EMOJI_CHOOSER, DinoEmojiChooserClass))
-
-typedef struct _DinoEmojiChooser      DinoEmojiChooser;
-typedef struct _DinoEmojiChooserClass DinoEmojiChooserClass;
-
-GType      dino_emoji_chooser_get_type (void) G_GNUC_CONST;
-DinoEmojiChooser *dino_emoji_chooser_new      (void);
-
-G_END_DECLS

main/src/main.vala

@@ -20,7 +20,7 @@ void main(string[] args) {
         Intl.textdomain(GETTEXT_PACKAGE);
         internationalize(GETTEXT_PACKAGE, search_path_generator.get_locale_path(GETTEXT_PACKAGE, LOCALE_INSTALL_DIR));
 
-        Gtk.init(ref args);
+        Gtk.init();
         Dino.Ui.Application app = new Dino.Ui.Application() { search_path_generator=search_path_generator };
         Plugins.Loader loader = new Plugins.Loader(app);
         loader.load_all();

main/src/ui/add_conversation/add_conference_dialog.vala

@@ -10,14 +10,13 @@ namespace Dino.Ui {
 public class AddConferenceDialog : Gtk.Dialog {
 
     private Stack stack = new Stack();
-    private Button cancel_button;
+    private Button cancel_button = new Button();
     private Button ok_button;
-    private Label cancel_label = new Label(_("Cancel")) {visible=true};
-    private Image cancel_image = new Image.from_icon_name("go-previous-symbolic", IconSize.MENU) {visible=true};
 
     private SelectJidFragment select_fragment;
     private ConferenceDetailsFragment details_fragment;
     private ConferenceList conference_list;
+    private ListBox conference_list_box;
 
     private StreamInteractor stream_interactor;
 
@@ -29,7 +28,7 @@ public class AddConferenceDialog : Gtk.Dialog {
 
         stack.visible = true;
         stack.vhomogeneous = false;
-        get_content_area().add(stack);
+        get_content_area().append(stack);
 
         setup_headerbar();
         setup_jid_add_view();
@@ -40,8 +39,7 @@ public class AddConferenceDialog : Gtk.Dialog {
     private void show_jid_add_view() {
         // Rewire headerbar (if CSD)
         if (Util.use_csd()) {
-            if (cancel_image.get_parent() != null) cancel_button.remove(cancel_image);
+            cancel_button.set_label(_("Cancel"));
-            cancel_button.add(cancel_label);
             cancel_button.clicked.disconnect(show_jid_add_view);
             cancel_button.clicked.connect(on_cancel);
             ok_button.label = _("Next");
@@ -59,8 +57,7 @@ public class AddConferenceDialog : Gtk.Dialog {
     private void show_conference_details_view() {
         // Rewire headerbar (if CSD)
         if (Util.use_csd()) {
-            if (cancel_label.get_parent() != null) cancel_button.remove(cancel_label);
+            cancel_button.set_icon_name("go-previous-symbolic");
-            cancel_button.add(cancel_image);
             cancel_button.clicked.disconnect(on_cancel);
             cancel_button.clicked.connect(show_jid_add_view);
             ok_button.label = _("Join");
@@ -73,31 +70,30 @@ public class AddConferenceDialog : Gtk.Dialog {
 
         stack.transition_type = StackTransitionType.SLIDE_LEFT;
         stack.set_visible_child_name("details");
-        animate_window_resize();
+        animate_window_resize(details_fragment);
     }
 
     private void setup_headerbar() {
-        cancel_button = new Button() { visible=true };
+        ok_button = new Button() { can_focus=true };
-
+        ok_button.add_css_class("suggested-action");
-        ok_button = new Button() { can_focus=true, can_default=true, visible=true };
-        ok_button.get_style_context().add_class("suggested-action");
 
         if (Util.use_csd()) {
             HeaderBar header_bar = get_header_bar() as HeaderBar;
-            header_bar.show_close_button = false;
+            header_bar.show_title_buttons = false;
 
             header_bar.pack_start(cancel_button);
             header_bar.pack_end(ok_button);
 
-            ok_button.has_default = true;
+//            ok_button.has_default = true;
         }
     }
 
     private void setup_jid_add_view() {
         conference_list = new ConferenceList(stream_interactor);
-        conference_list.row_activated.connect(() => { ok_button.clicked(); });
+        conference_list_box = conference_list.get_list_box();
+        conference_list_box.row_activated.connect(() => { ok_button.clicked(); });
 
-        select_fragment = new SelectJidFragment(stream_interactor, conference_list, stream_interactor.get_accounts());
+        select_fragment = new SelectJidFragment(stream_interactor, conference_list_box, stream_interactor.get_accounts());
         select_fragment.add_jid.connect((row) => {
             AddGroupchatDialog dialog = new AddGroupchatDialog(stream_interactor);
             dialog.set_transient_for(this);
@@ -108,24 +104,24 @@ public class AddConferenceDialog : Gtk.Dialog {
             stream_interactor.get_module(MucManager.IDENTITY).remove_bookmark(conference_row.account, conference_row.bookmark);
         });
 
-        Box wrap_box = new Box(Orientation.VERTICAL, 0) { visible=true };
+        Box wrap_box = new Box(Orientation.VERTICAL, 0);
-        wrap_box.add(select_fragment);
+        wrap_box.append(select_fragment);
         stack.add_named(wrap_box, "select");
 
         if (!Util.use_csd()) {
-            Box box = new Box(Orientation.HORIZONTAL, 5) { halign=Align.END, margin_bottom=15, margin_start=80, margin_end=80, visible=true };
+            Box box = new Box(Orientation.HORIZONTAL, 5) { halign=Align.END, margin_bottom=15, margin_start=80, margin_end=80 };
 
-            Button ok_button = new Button() { label=_("Next"), sensitive=false, halign = Align.END, can_focus=true, can_default=true, visible=true };
+            Button ok_button = new Button.with_label(_("Next")) { sensitive=false, halign = Align.END, can_focus=true };
-            ok_button.get_style_context().add_class("suggested-action");
+            ok_button.add_css_class("suggested-action");
             ok_button.clicked.connect(on_next_button_clicked);
             select_fragment.notify["done"].connect(() => { ok_button.sensitive = select_fragment.done; });
-            Button cancel_button = new Button() { label=_("Cancel"), halign=Align.START, visible=true };
+            Button cancel_button = new Button.with_label(_("Cancel")) { halign=Align.START };
             cancel_button.clicked.connect(on_cancel);
-            box.add(cancel_button);
+            box.append(cancel_button);
-            box.add(ok_button);
+            box.append(ok_button);
-            wrap_box.add(box);
+            wrap_box.append(box);
 
-            ok_button.has_default = true;
+//            ok_button.has_default = true;
         }
     }
 
@@ -133,23 +129,23 @@ public class AddConferenceDialog : Gtk.Dialog {
         details_fragment = new ConferenceDetailsFragment(stream_interactor) { ok_button=ok_button };
         details_fragment.joined.connect(() => this.close());
 
-        Box wrap_box = new Box(Orientation.VERTICAL, 0) { visible=true };
+        Box wrap_box = new Box(Orientation.VERTICAL, 0);
-        wrap_box.add(details_fragment);
+        wrap_box.append(details_fragment);
 
         if (!Util.use_csd()) {
-            Box box = new Box(Orientation.HORIZONTAL, 5) { halign=Align.END, margin_bottom=15, margin_start=80, margin_end=80, visible=true };
+            Box box = new Box(Orientation.HORIZONTAL, 5) { halign=Align.END, margin_bottom=15, margin_start=80, margin_end=80 };
 
-            Button ok_button = new Button() { label=_("Join"), halign = Align.END, can_focus=true, can_default=true, visible=true };
+            Button ok_button = new Button.with_label(_("Join")) { halign = Align.END, can_focus=true };
-            ok_button.get_style_context().add_class("suggested-action");
+            ok_button.add_css_class("suggested-action");
             details_fragment.notify["done"].connect(() => { ok_button.sensitive = select_fragment.done; });
             details_fragment.ok_button = ok_button;
 
-            Button cancel_button = new Button() { label=_("Back"), halign=Align.START, visible=true };
+            Button cancel_button = new Button.with_label(_("Back")) { halign=Align.START };
             cancel_button.clicked.connect(show_jid_add_view);
-            box.add(cancel_button);
+            box.append(cancel_button);
-            box.add(ok_button);
+            box.append(ok_button);
 
-            wrap_box.add(box);
+            wrap_box.append(box);
         }
         stack.add_named(wrap_box, "details");
     }
@@ -164,8 +160,9 @@ public class AddConferenceDialog : Gtk.Dialog {
 
     private void on_next_button_clicked() {
         details_fragment.clear();
-        ListRow? row = conference_list.get_selected_row() as ListRow;
+
-        ConferenceListRow? conference_row = conference_list.get_selected_row() as ConferenceListRow;
+        ListRow? row = conference_list_box.get_selected_row() != null ? conference_list_box.get_selected_row().get_child() as ListRow : null;
+        ConferenceListRow? conference_row = conference_list_box.get_selected_row() != null ? conference_list_box.get_selected_row() as ConferenceListRow : null;
         if (conference_row != null) {
             details_fragment.account = conference_row.account;
             details_fragment.jid = conference_row.bookmark.jid.to_string();
@@ -183,21 +180,20 @@ public class AddConferenceDialog : Gtk.Dialog {
         close();
     }
 
-    private void animate_window_resize() {
+    private void animate_window_resize(Widget widget) {
-        int def_height, curr_width, curr_height;
+        int curr_height = get_size(Orientation.VERTICAL);
-        get_size(out curr_width, out curr_height);
+        var natural_size = Requisition();
-        stack.get_preferred_height(null, out def_height);
+        widget.get_preferred_size(null, out natural_size);
-        int difference = def_height - curr_height;
+        int difference = natural_size.height - curr_height;
         Timer timer = new Timer();
-        Timeout.add((int) (stack.transition_duration / 30),
+        Timeout.add((int) (stack.transition_duration / 30), () => {
-            () => {
+            ulong microsec;
-                ulong microsec;
+            timer.elapsed(out microsec);
-                timer.elapsed(out microsec);
+            ulong millisec = microsec / 1000;
-                ulong millisec = microsec / 1000;
+            double partial = double.min(1, (double) millisec / stack.transition_duration);
-                double partial = double.min(1, (double) millisec / stack.transition_duration);
+            default_height = (int) (curr_height + difference * partial);
-                resize(curr_width, (int) (curr_height + difference * partial));
+            return millisec < stack.transition_duration;
-                return millisec < stack.transition_duration;
+        });
-            });
     }
 }
 

main/src/ui/add_conversation/add_groupchat_dialog.vala

@@ -24,17 +24,18 @@ protected class AddGroupchatDialog : Gtk.Dialog {
         Object(use_header_bar : 1);
         this.stream_interactor = stream_interactor;
         ok_button.label = _("Add");
-        ok_button.get_style_context().add_class("suggested-action"); // TODO why doesn't it work in XML
+        ok_button.add_css_class("suggested-action"); // TODO why doesn't it work in XML
         accounts_stack.set_visible_child_name("combobox");
         account_combobox.initialize(stream_interactor);
 
         cancel_button.clicked.connect(() => { close(); });
         ok_button.clicked.connect(on_ok_button_clicked);
-        jid_entry.key_release_event.connect(on_jid_key_release);
+
-        nick_entry.key_release_event.connect(check_ok);
+        jid_entry.changed.connect(on_jid_key_release);
+        nick_entry.changed.connect(check_ok);
     }
 
-    private bool on_jid_key_release() {
+    private void on_jid_key_release() {
         check_ok();
         if (!alias_entry_changed) {
             try {
@@ -44,17 +45,15 @@ protected class AddGroupchatDialog : Gtk.Dialog {
                 alias_entry.text = jid_entry.text;
             }
         }
-        return false;
     }
 
-    private bool check_ok() {
+    private void check_ok() {
         try {
             Jid parsed_jid = new Jid(jid_entry.text);
             ok_button.sensitive = parsed_jid != null && parsed_jid.localpart != null && parsed_jid.resourcepart == null;
         } catch (InvalidJidError e) {
             ok_button.sensitive = false;
         }
-        return false;
     }
 
     private void on_ok_button_clicked() {

main/src/ui/add_conversation/conference_details_fragment.vala

@@ -114,12 +114,12 @@ protected class ConferenceDetailsFragment : Box {
 
         account_combobox.changed.connect(() => { accounts_label.label = account_combobox.selected.bare_jid.to_string(); });
         accounts_label.label = account_combobox.selected.bare_jid.to_string();
-        jid_entry.key_release_event.connect(on_jid_key_release_event);
+//        jid_entry.key_release_event.connect(on_jid_key_release_event);
-        nick_entry.key_release_event.connect(on_nick_key_release_event);
+//        nick_entry.key_release_event.connect(on_nick_key_release_event);
-        password_entry.key_release_event.connect(on_password_key_release_event);
+//        password_entry.key_release_event.connect(on_password_key_release_event);
 
-        jid_entry.key_release_event.connect(() => { done = true; return false; }); // just for notifying
+//        jid_entry.key_release_event.connect(() => { done = true; return false; }); // just for notifying
-        nick_entry.key_release_event.connect(() => { done = true; return false; });
+//        nick_entry.key_release_event.connect(() => { done = true; return false; });
 
         notification_button.clicked.connect(() => { notification_revealer.set_reveal_child(false); });
 
@@ -195,25 +195,25 @@ protected class ConferenceDetailsFragment : Box {
         notification_revealer.set_reveal_child(true);
     }
 
-    private bool on_jid_key_release_event(EventKey event) {
+//    private bool on_jid_key_release_event(EventKey event) {
-        jid_label.label = jid_entry.text;
+//        jid_label.label = jid_entry.text;
-        if (event.keyval == Key.Return) jid_stack.set_visible_child_name("label");
+//        if (event.keyval == Key.Return) jid_stack.set_visible_child_name("label");
-        return false;
+//        return false;
-    }
+//    }
-
+//
-    private bool on_nick_key_release_event(EventKey event) {
+//    private bool on_nick_key_release_event(EventKey event) {
-        nick_label.label = nick_entry.text;
+//        nick_label.label = nick_entry.text;
-        if (event.keyval == Key.Return) nick_stack.set_visible_child_name("label");
+//        if (event.keyval == Key.Return) nick_stack.set_visible_child_name("label");
-        return false;
+//        return false;
-    }
+//    }
-
+//
-    private bool on_password_key_release_event(EventKey event) {
+//    private bool on_password_key_release_event(EventKey event) {
-        string filler = "";
+//        string filler = "";
-        for (int i = 0; i < password_entry.text.length; i++) filler += password_entry.get_invisible_char().to_string();
+//        for (int i = 0; i < password_entry.text.length; i++) filler += password_entry.get_invisible_char().to_string();
-        password_label.label = filler;
+//        password_label.label = filler;
-        if (event.keyval == Key.Return) password_stack.set_visible_child_name("label");
+//        if (event.keyval == Key.Return) password_stack.set_visible_child_name("label");
-        return false;
+//        return false;
-    }
+//    }
 
     private void set_active_stack(Stack stack) {
         stack.set_visible_child_name("entry");

main/src/ui/add_conversation/conference_list.vala

@@ -7,22 +7,22 @@ using Dino.Entities;
 
 namespace Dino.Ui {
 
-protected class ConferenceList : FilterableList {
+protected class ConferenceList {
 
     public signal void conversation_selected(Conversation? conversation);
 
     private StreamInteractor stream_interactor;
+
+    private ListBox list_box = new ListBox();
     private HashMap<Account, Set<Conference>> lists = new HashMap<Account, Set<Conference>>(Account.hash_func, Account.equals_func);
-    private HashMap<Account, HashMap<Jid, Widget>> widgets = new HashMap<Account, HashMap<Jid, Widget>>(Account.hash_func, Account.equals_func);
+    private HashMap<Account, HashMap<Jid, ListBoxRow>> widgets = new HashMap<Account, HashMap<Jid, ListBoxRow>>(Account.hash_func, Account.equals_func);
+
+    ulong bookmarks_updated_handler_id = -1;
 
     public ConferenceList(StreamInteractor stream_interactor) {
         this.stream_interactor = stream_interactor;
 
-        set_filter_func(filter);
+        bookmarks_updated_handler_id = stream_interactor.get_module(MucManager.IDENTITY).bookmarks_updated.connect((account, conferences) => {
-        set_header_func(header);
-        set_sort_func(sort);
-
-        stream_interactor.get_module(MucManager.IDENTITY).bookmarks_updated.connect((account, conferences) => {
             lists[account] = conferences;
             refresh_conferences();
         });
@@ -38,24 +38,41 @@ protected class ConferenceList : FilterableList {
         stream_interactor.get_module(MucManager.IDENTITY).conference_removed.connect(remove_conference);
     }
 
+    ~ConferenceList() {
+        stream_interactor.get_module(MucManager.IDENTITY).disconnect(bookmarks_updated_handler_id);
+        stream_interactor.get_module(MucManager.IDENTITY).conference_added.disconnect(add_conference);
+        stream_interactor.get_module(MucManager.IDENTITY).conference_removed.disconnect(remove_conference);
+    }
+
     private void add_conference(Account account, Conference conference) {
         if (!widgets.has_key(account)) {
-            widgets[account] = new HashMap<Jid, Widget>(Jid.hash_func, Jid.equals_func);
+            widgets[account] = new HashMap<Jid, ListBoxRow>(Jid.hash_func, Jid.equals_func);
         }
         var widget = new ConferenceListRow(stream_interactor, conference, account);
-        widgets[account][conference.jid] = widget;
+        var list_box_row = new ListBoxRow();
-        add(widget);
+        list_box_row.set_child(widget);
+        widgets[account][conference.jid] = list_box_row;
+        list_box.append(list_box_row);
     }
 
     private void remove_conference(Account account, Jid jid) {
         if (widgets.has_key(account) && widgets[account].has_key(jid)) {
-            remove(widgets[account][jid]);
+            list_box.remove(widgets[account][jid]);
             widgets[account].unset(jid);
         }
     }
 
     public void refresh_conferences() {
-        @foreach((widget) => { remove(widget); });
+        foreach (Account account in widgets.keys) {
+
+            var account_widgets_cpy = new HashMap<Jid, ListBoxRow>();
+            account_widgets_cpy.set_all(widgets[account]);
+
+            foreach (Jid jid in account_widgets_cpy.keys) {
+                remove_conference(account, jid);
+            }
+        }
+
         foreach (Account account in lists.keys) {
             foreach (Conference conference in lists[account]) {
                 add_conference(account, conference);
@@ -72,31 +89,8 @@ protected class ConferenceList : FilterableList {
         refresh_conferences();
     }
 
-    private void header(ListBoxRow row, ListBoxRow? before_row) {
+    public ListBox get_list_box() {
-        if (row.get_header() == null && before_row != null) {
+        return list_box;
-            row.set_header(new Separator(Orientation.HORIZONTAL));
-        }
-    }
-
-    private bool filter(ListBoxRow r) {
-        if (r.get_type().is_a(typeof(ListRow))) {
-            ListRow row = r as ListRow;
-            if (filter_values != null) {
-                foreach (string filter in filter_values) {
-                    if (!(row.name_label.label.down().contains(filter.down()) ||
-                            row.jid.to_string().down().contains(filter.down()))) {
-                        return false;
-                    }
-                }
-            }
-        }
-        return true;
-    }
-
-    public override int sort(ListBoxRow row1, ListBoxRow row2) {
-        ListRow c1 = (row1 as ListRow);
-        ListRow c2 = (row2 as ListRow);
-        return c1.name_label.label.collate(c2.name_label.label);
     }
 }
 

main/src/ui/add_conversation/list_row.vala

@@ -6,16 +6,27 @@ using Xmpp;
 
 namespace Dino.Ui {
 
-[GtkTemplate (ui = "/im/dino/Dino/add_conversation/list_row.ui")]
+public class ListRow : Widget {
-public class ListRow : ListBoxRow {
 
-    [GtkChild] public unowned AvatarImage image;
+    public Grid outer_grid;
-    [GtkChild] public unowned Label name_label;
+    public AvatarImage image;
-    [GtkChild] public unowned Label via_label;
+    public Label name_label;
+    public Label via_label;
 
     public Jid? jid;
     public Account? account;
 
+    construct {
+        Builder builder = new Builder.from_resource("/im/dino/Dino/add_conversation/list_row.ui");
+        outer_grid = (Grid) builder.get_object("outer_grid");
+        image = (AvatarImage) builder.get_object("image");
+        name_label = (Label) builder.get_object("name_label");
+        via_label = (Label) builder.get_object("via_label");
+
+        this.layout_manager = new BinLayout();
+        outer_grid.set_parent(this);
+    }
+
     public ListRow() {}
 
     public ListRow.from_jid(StreamInteractor stream_interactor, Jid jid, Account account, bool show_account) {
@@ -26,8 +37,8 @@ public class ListRow : ListBoxRow {
         string display_name = Util.get_conversation_display_name(stream_interactor, conv);
         if (show_account && stream_interactor.get_accounts().size > 1) {
             via_label.label = @"via $(account.bare_jid)";
-            this.has_tooltip = true;
+            this.has_tooltip = Util.use_tooltips();
-            set_tooltip_text(jid.to_string());
+            set_tooltip_text(Util.string_if_tooltips_active(jid.to_string()));
         } else if (display_name != jid.bare_jid.to_string()){
             via_label.label = jid.bare_jid.to_string();
         } else {
@@ -36,6 +47,10 @@ public class ListRow : ListBoxRow {
         name_label.label = display_name;
         image.set_conversation(stream_interactor, conv);
     }
+
+    public override void dispose() {
+        outer_grid.unparent();
+    }
 }
 
 }

main/src/ui/add_conversation/roster_list.vala

@@ -6,23 +6,20 @@ using Xmpp;
 
 namespace Dino.Ui {
 
-protected class RosterList : FilterableList {
+protected class RosterList {
 
     public signal void conversation_selected(Conversation? conversation);
     private StreamInteractor stream_interactor;
     private Gee.List<Account> accounts;
     private ulong[] handler_ids = new ulong[0];
 
+    private ListBox list_box = new ListBox();
     private HashMap<Account, HashMap<Jid, ListRow>> rows = new HashMap<Account, HashMap<Jid, ListRow>>(Account.hash_func, Account.equals_func);
 
     public RosterList(StreamInteractor stream_interactor, Gee.List<Account> accounts) {
         this.stream_interactor = stream_interactor;
         this.accounts = accounts;
 
-        set_filter_func(filter);
-        set_header_func(header);
-        set_sort_func(sort);
-
         handler_ids += stream_interactor.get_module(RosterManager.IDENTITY).removed_roster_item.connect( (account, jid, roster_item) => {
             if (accounts.contains(account)) {
                 on_removed_roster_item(account, jid, roster_item);
@@ -33,7 +30,7 @@ protected class RosterList : FilterableList {
                 on_updated_roster_item(account, jid, roster_item);
             }
         });
-        destroy.connect(() => {
+        list_box.destroy.connect(() => {
             foreach (ulong handler_id in handler_ids) stream_interactor.get_module(RosterManager.IDENTITY).disconnect(handler_id);
         });
 
@@ -42,7 +39,7 @@ protected class RosterList : FilterableList {
 
     private void on_removed_roster_item(Account account, Jid jid, Roster.Item roster_item) {
         if (rows.has_key(account) && rows[account].has_key(jid)) {
-            remove(rows[account][jid]);
+            list_box.remove(rows[account][jid]);
             rows[account].unset(jid);
         }
     }
@@ -51,9 +48,9 @@ protected class RosterList : FilterableList {
         on_removed_roster_item(account, jid, roster_item);
         ListRow row = new ListRow.from_jid(stream_interactor, roster_item.jid, account, accounts.size > 1);
         rows[account][jid] = row;
-        add(row);
+        list_box.append(row);
-        invalidate_sort();
+        list_box.invalidate_sort();
-        invalidate_filter();
+        list_box.invalidate_filter();
     }
 
     private void fetch_roster_items(Account account) {
@@ -63,31 +60,8 @@ protected class RosterList : FilterableList {
         }
     }
 
-    private void header(ListBoxRow row, ListBoxRow? before_row) {
+    public ListBox get_list_box() {
-        if (row.get_header() == null && before_row != null) {
+        return list_box;
-            row.set_header(new Separator(Orientation.HORIZONTAL));
-        }
-    }
-
-    private bool filter(ListBoxRow r) {
-        if (r.get_type().is_a(typeof(ListRow))) {
-            ListRow row = r as ListRow;
-            if (filter_values != null) {
-                foreach (string filter in filter_values) {
-                    if (!(row.name_label.label.down().contains(filter.down()) ||
-                            row.jid.to_string().down().contains(filter.down()))) {
-                        return false;
-                    }
-                }
-            }
-        }
-        return true;
-    }
-
-    public override int sort(ListBoxRow row1, ListBoxRow row2) {
-        ListRow c1 = (row1 as ListRow);
-        ListRow c2 = (row2 as ListRow);
-        return c1.name_label.label.collate(c2.name_label.label);
     }
 }
 

main/src/ui/add_conversation/select_contact_dialog.vala

@@ -14,6 +14,7 @@ public class SelectContactDialog : Gtk.Dialog {
     public Button ok_button;
 
     private RosterList roster_list;
+    private ListBox roster_list_box;
     private SelectJidFragment select_jid_fragment;
     private StreamInteractor stream_interactor;
     private Gee.List<Account> accounts;
@@ -39,30 +40,30 @@ public class SelectContactDialog : Gtk.Dialog {
         cancel_button.visible = true;
 
         ok_button = new Button();
-        ok_button.get_style_context().add_class("suggested-action");
+        ok_button.add_css_class("suggested-action");
         ok_button.sensitive = false;
         ok_button.visible = true;
 
         if (Util.use_csd()) {
             HeaderBar header_bar = get_header_bar() as HeaderBar;
-            header_bar.show_close_button = false;
+            header_bar.show_title_buttons = false;
 
             header_bar.pack_start(cancel_button);
             header_bar.pack_end(ok_button);
         } else {
-            Box box = new Box(Orientation.HORIZONTAL, 5) { halign=Align.END, margin_bottom=15, margin_start=80, margin_end=80, visible=true };
+            Box box = new Box(Orientation.HORIZONTAL, 5) { halign=Align.END, margin_bottom=15, margin_start=80, margin_end=80 };
 
             cancel_button.halign = Align.START;
             ok_button.halign = Align.END;
-            box.add(cancel_button);
+            box.append(cancel_button);
-            box.add(ok_button);
+            box.append(ok_button);
 
-            get_content_area().add(box);
+            get_content_area().append(box);
         }
 
         cancel_button.clicked.connect(() => { close(); });
         ok_button.clicked.connect(() => {
-            ListRow? selected_row = roster_list.get_selected_row() as ListRow;
+            ListRow? selected_row = roster_list_box.get_selected_row() != null ? roster_list_box.get_selected_row().get_child() as ListRow : null;
             if (selected_row != null) selected(selected_row.account, selected_row.jid);
             close();
         });
@@ -70,21 +71,22 @@ public class SelectContactDialog : Gtk.Dialog {
 
     private void setup_view() {
         roster_list = new RosterList(stream_interactor, accounts);
-        roster_list.row_activated.connect(() => { ok_button.clicked(); });
+        roster_list_box = roster_list.get_list_box();
-        select_jid_fragment = new SelectJidFragment(stream_interactor, roster_list, accounts);
+        roster_list_box.row_activated.connect(() => { ok_button.clicked(); });
+        select_jid_fragment = new SelectJidFragment(stream_interactor, roster_list_box, accounts);
         select_jid_fragment.add_jid.connect((row) => {
             AddContactDialog add_contact_dialog = new AddContactDialog(stream_interactor);
             add_contact_dialog.set_transient_for(this);
             add_contact_dialog.present();
         });
         select_jid_fragment.remove_jid.connect((row) => {
-            ListRow list_row = roster_list.get_selected_row() as ListRow;
+            ListRow list_row = roster_list_box.get_selected_row() as ListRow;
             stream_interactor.get_module(RosterManager.IDENTITY).remove_jid(list_row.account, list_row.jid);
         });
         select_jid_fragment.notify["done"].connect(() => {
             ok_button.sensitive = select_jid_fragment.done;
         });
-        get_content_area().add(select_jid_fragment);
+        get_content_area().append(select_jid_fragment);
     }
 }
 

main/src/ui/add_conversation/select_jid_fragment.vala

@@ -12,7 +12,7 @@ public class SelectJidFragment : Gtk.Box {
     public signal void add_jid();
     public signal void remove_jid(ListRow row);
     public bool done {
-        get { return filterable_list.get_selected_row() != null; }
+        get { return list.get_selected_row() != null; }
         private set {}
     }
 
@@ -22,44 +22,52 @@ public class SelectJidFragment : Gtk.Box {
     [GtkChild] private unowned Button remove_button;
 
     private StreamInteractor stream_interactor;
-    private FilterableList filterable_list;
     private Gee.List<Account> accounts;
+    private ArrayList<Widget> added_rows = new ArrayList<Widget>();
 
-    private ArrayList<AddListRow> added_rows = new ArrayList<AddListRow>();
+    private ListBox list;
+    private string[]? filter_values;
 
-    public SelectJidFragment(StreamInteractor stream_interactor, FilterableList filterable_list, Gee.List<Account> accounts) {
+    public SelectJidFragment(StreamInteractor stream_interactor, ListBox list, Gee.List<Account> accounts) {
         this.stream_interactor = stream_interactor;
-        this.filterable_list = filterable_list;
+        this.list = list;
         this.accounts = accounts;
 
-        filterable_list.visible = true;
+        list.activate_on_single_click = false;
-        filterable_list.activate_on_single_click = false;
+        list.vexpand = true;
-        filterable_list.vexpand = true;
+        box.append(list);
-        box.add(filterable_list);
 
-        filterable_list.set_sort_func(sort);
+        list.set_sort_func(sort);
-        filterable_list.row_selected.connect(check_buttons_active);
+        list.set_filter_func(filter);
-        filterable_list.row_selected.connect(() => { done = true; }); // just for notifying
+        list.set_header_func(header);
+        list.row_selected.connect(check_buttons_active);
+        list.row_selected.connect(() => { done = true; }); // just for notifying
         entry.changed.connect(() => { set_filter(entry.text); });
         add_button.clicked.connect(() => { add_jid(); });
-        remove_button.clicked.connect(() => { remove_jid(filterable_list.get_selected_row() as ListRow); });
+        remove_button.clicked.connect(() => {
+            var list_row = list.get_selected_row();
+            if (list_row == null) return;
+            remove_jid(list_row.child as ListRow);
+        });
     }
 
     public void set_filter(string str) {
         if (entry.text != str) entry.text = str;
 
-        foreach (AddListRow row in added_rows) filterable_list.remove(row);
+        foreach (Widget row in added_rows) list.remove(row);
         added_rows.clear();
 
-        string[] ? values = str == "" ? null : str.split(" ");
+        filter_values = str == "" ? null : str.split(" ");
-        filterable_list.set_filter_values(values);
+        list.invalidate_filter();
+
         try {
             Jid parsed_jid = new Jid(str);
             if (parsed_jid != null && parsed_jid.localpart != null) {
                 foreach (Account account in accounts) {
-                    AddListRow row = new AddListRow(stream_interactor, parsed_jid, account);
+                    var list_row = new Gtk.ListBoxRow();
-                    filterable_list.add(row);
+                    list_row.set_child(new AddListRow(stream_interactor, parsed_jid, account));
-                    added_rows.add(row);
+                    list.append(list_row);
+                    added_rows.add(list_row);
                 }
             }
         } catch (InvalidJidError ignored) {
@@ -68,7 +76,7 @@ public class SelectJidFragment : Gtk.Box {
     }
 
     private void check_buttons_active() {
-        ListBoxRow? row = filterable_list.get_selected_row();
+        ListBoxRow? row = list.get_selected_row();
         bool active = row != null && !row.get_type().is_a(typeof(AddListRow));
         remove_button.sensitive = active;
     }
@@ -81,7 +89,35 @@ public class SelectJidFragment : Gtk.Box {
         } else if (al2 != null && al1 == null) {
             return 1;
         }
-        return filterable_list.sort(row1, row2);
+
+        ListRow? c1 = (row1.child as ListRow);
+        ListRow? c2 = (row2.child as ListRow);
+        if (c1 != null && c2 != null) {
+            return c1.name_label.label.collate(c2.name_label.label);
+        }
+
+        return 0;
+    }
+
+    private bool filter(ListBoxRow r) {
+        ListRow? row = (r.child as ListRow);
+        if (row == null) return true;
+
+        if (filter_values != null) {
+            foreach (string filter in filter_values) {
+                if (!(row.name_label.label.down().contains(filter.down()) ||
+                        row.jid.to_string().down().contains(filter.down()))) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+
+    private void header(ListBoxRow row, ListBoxRow? before_row) {
+        if (row.get_header() == null && before_row != null) {
+            row.set_header(new Separator(Orientation.HORIZONTAL));
+        }
     }
 
     private class AddListRow : ListRow {
@@ -101,16 +137,4 @@ public class SelectJidFragment : Gtk.Box {
     }
 }
 
-public abstract class FilterableList : Gtk.ListBox {
-    public string[]? filter_values;
-
-    public void set_filter_values(string[] values) {
-        if (filter_values == values) return;
-        filter_values = values;
-        invalidate_filter();
-    }
-
-    public abstract int sort(ListBoxRow row1, ListBoxRow row2);
-}
-
 }

main/src/ui/application.vala

@@ -35,7 +35,7 @@ public class Dino.Ui.Application : Gtk.Application, Dino.Application {
 
         CssProvider provider = new CssProvider();
         provider.load_from_resource("/im/dino/Dino/theme.css");
-        StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), provider, STYLE_PROVIDER_PRIORITY_APPLICATION);
+        StyleContext.add_provider_for_display(Gdk.Display.get_default(), provider, STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         create_actions();
         add_main_option_entries(options);
@@ -68,7 +68,7 @@ public class Dino.Ui.Application : Gtk.Application, Dino.Application {
                 var desktop_env = Environment.get_variable("XDG_CURRENT_DESKTOP");
                 if (desktop_env == null || !desktop_env.down().contains("gnome")) {
                     if (this.active_window != null) {
-                        this.active_window.urgency_hint = true;
+//                        this.active_window.urgency_hint = true;
                     }
                 }
             });
@@ -80,7 +80,7 @@ public class Dino.Ui.Application : Gtk.Application, Dino.Application {
                 config = new Config(db);
                 window = new MainWindow(this, stream_interactor, db, config);
                 controller.set_window(window);
-                if ((get_flags() & ApplicationFlags.IS_SERVICE) == ApplicationFlags.IS_SERVICE) window.delete_event.connect(window.hide_on_delete);
+                if ((get_flags() & ApplicationFlags.IS_SERVICE) == ApplicationFlags.IS_SERVICE) window.hide_on_close = true;
             }
             window.present();
         });
@@ -203,11 +203,6 @@ public class Dino.Ui.Application : Gtk.Application, Dino.Application {
             Builder builder = new Builder.from_resource("/im/dino/Dino/shortcuts.ui");
             ShortcutsWindow dialog = (ShortcutsWindow) builder.get_object("shortcuts-window");
             if (!use_csd()) {
-                // Hack to prevent CRITICAL in Gtk when trying to destroy non-existant headerbar
-                Widget shortcuts_hack = dialog.get_titlebar();
-                dialog.destroy.connect_after(() => {
-                    shortcuts_hack = null;
-                });
                 dialog.set_titlebar(null);
             }
             dialog.title = _("Keyboard Shortcuts");
@@ -292,12 +287,6 @@ public class Dino.Ui.Application : Gtk.Application, Dino.Application {
         dialog.copyright = "Copyright © 2016-2022 - Dino Team";
         dialog.license_type = License.GPL_3_0;
 
-        dialog.response.connect((response_id) => {
-            if (response_id == Gtk.ResponseType.CANCEL || response_id == Gtk.ResponseType.DELETE_EVENT) {
-                dialog.destroy();
-            }
-        });
-
         if (!use_csd()) {
             dialog.set_titlebar(null);
         }
@@ -308,14 +297,14 @@ public class Dino.Ui.Application : Gtk.Application, Dino.Application {
         Dialog dialog = new Dialog.with_buttons(_("Join Channel"), window, Gtk.DialogFlags.MODAL | Gtk.DialogFlags.USE_HEADER_BAR, _("Join"), ResponseType.OK, _("Cancel"), ResponseType.CANCEL);
         dialog.modal = true;
         Button ok_button = dialog.get_widget_for_response(ResponseType.OK) as Button;
-        ok_button.get_style_context().add_class("suggested-action");
+        ok_button.add_css_class("suggested-action");
         ConferenceDetailsFragment conference_fragment = new ConferenceDetailsFragment(stream_interactor) { ok_button=ok_button };
         conference_fragment.jid = jid;
         if (account != null)  {
             conference_fragment.account = account;
         }
         Box content_area = dialog.get_content_area();
-        content_area.add(conference_fragment);
+        content_area.append(conference_fragment);
         conference_fragment.joined.connect(() => {
             dialog.destroy();
         });

main/src/ui/avatar_image.vala

@@ -5,7 +5,7 @@ using Xmpp.Util;
 
 namespace Dino.Ui {
 
-public class AvatarImage : Misc {
+public class AvatarImage : Widget {
     public int height { get; set; default = 35; }
     public int width { get; set; default = 35; }
     public bool allow_gray { get; set; default = true; }
@@ -24,7 +24,7 @@ public class AvatarImage : Misc {
 
     public AvatarImage() {
         can_focus = false;
-        get_style_context().add_class("avatar");
+        add_css_class("avatar");
     }
 
     public override void dispose() {
@@ -34,17 +34,23 @@ public class AvatarImage : Misc {
         disconnect_stream_interactor();
     }
 
-    public override void get_preferred_width(out int minimum_width, out int natural_width) {
+    public override void measure(Orientation orientation, int for_size, out int minimum, out int natural, out int minimum_baseline, out int natural_baseline) {
-        minimum_width = width;
+        if (orientation == Orientation.HORIZONTAL) {
-        natural_width = width;
+            minimum = width;
+            natural = width;
+        } else {
+            minimum = height;
+            natural = height;
+        }
+        minimum_baseline = natural_baseline = -1;
     }
 
-    public override void get_preferred_height(out int minimum_height, out int natural_height) {
+    public override void snapshot(Snapshot snapshot) {
-        minimum_height = height;
+        Cairo.Context context = snapshot.append_cairo(Graphene.Rect.alloc().init(0, 0, width, height));
-        natural_height = height;
+        draw(context);
     }
 
-    public override bool draw(Cairo.Context ctx_in) {
+    public bool draw(Cairo.Context ctx_in) {
         Cairo.Context ctx = ctx_in;
         int width = this.width, height = this.height, base_factor = 1;
         if (use_image_surface == -1) {

main/src/ui/call_window/audio_settings_popover.vala

@@ -14,30 +14,30 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
     private HashMap<ListBoxRow, Plugins.MediaDevice> row_speaker_device = new HashMap<ListBoxRow, Plugins.MediaDevice>();
 
     public AudioSettingsPopover() {
-        Box box = new Box(Orientation.VERTICAL, 15) { margin=18, visible=true };
+        Box box = new Box(Orientation.VERTICAL, 15);
-        box.add(create_microphone_box());
+        box.append(create_microphone_box());
-        box.add(create_speaker_box());
+        box.append(create_speaker_box());
 
-        this.add(box);
+        this.set_child(box);
     }
 
     private Widget create_microphone_box() {
         Plugins.VideoCallPlugin call_plugin = Dino.Application.get_default().plugin_registry.video_call_plugin;
         Gee.List<Plugins.MediaDevice> devices = call_plugin.get_devices("audio", false);
 
-        Box micro_box = new Box(Orientation.VERTICAL, 10) { visible=true };
+        Box micro_box = new Box(Orientation.VERTICAL, 10);
-        micro_box.add(new Label("<b>" + _("Microphones") + "</b>") { use_markup=true, xalign=0, visible=true, can_focus=true /* grab initial focus*/ });
+        micro_box.append(new Label("<b>" + _("Microphones") + "</b>") { use_markup=true, xalign=0, can_focus=true /* grab initial focus*/ });
 
         if (devices.size == 0) {
-            micro_box.add(new Label(_("No microphone found.")));
+            micro_box.append(new Label(_("No microphone found.")));
         } else {
-            ListBox micro_list_box = new ListBox() { activate_on_single_click=true, selection_mode=SelectionMode.SINGLE, visible=true };
+            ListBox micro_list_box = new ListBox() { activate_on_single_click=true, selection_mode=SelectionMode.SINGLE };
             micro_list_box.set_header_func(listbox_header_func);
-            Frame micro_frame = new Frame(null) { visible=true };
+            Frame micro_frame = new Frame(null);
-            micro_frame.add(micro_list_box);
+            micro_frame.set_child(micro_list_box);
             foreach (Plugins.MediaDevice device in devices) {
-                Label display_name_label = new Label(device.display_name) { xalign=0, visible=true };
+                Label display_name_label = new Label(device.display_name) { xalign=0 };
-                Image image = new Image.from_icon_name("object-select-symbolic", IconSize.BUTTON) { visible=true };
+                Image image = new Image.from_icon_name("object-select-symbolic");
                 if (current_microphone_device == null || current_microphone_device.id != device.id) {
                     image.opacity = 0;
                 }
@@ -48,21 +48,21 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                         image.opacity = 1;
                     }
                 });
-                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, margin=7, visible=true };
+                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7 };
-                device_box.add(image);
+                device_box.append(image);
-                Box label_box = new Box(Orientation.VERTICAL, 0) { visible = true };
+                Box label_box = new Box(Orientation.VERTICAL, 0);
-                label_box.add(display_name_label);
+                label_box.append(display_name_label);
                 if (device.detail_name != null) {
-                    Label detail_name_label = new Label(device.detail_name) { xalign=0, visible=true };
+                    Label detail_name_label = new Label(device.detail_name) { xalign=0 };
-                    detail_name_label.get_style_context().add_class("dim-label");
+                    detail_name_label.add_css_class("dim-label");
                     detail_name_label.attributes = new Pango.AttrList();
                     detail_name_label.attributes.insert(Pango.attr_scale_new(0.8));
-                    label_box.add(detail_name_label);
+                    label_box.append(detail_name_label);
                 }
-                device_box.add(label_box);
+                device_box.append(label_box);
-                ListBoxRow list_box_row = new ListBoxRow() { visible=true };
+                ListBoxRow list_box_row = new ListBoxRow();
-                list_box_row.add(device_box);
+                list_box_row.set_child(device_box);
-                micro_list_box.add(list_box_row);
+                micro_list_box.append(list_box_row);
 
                 row_microphone_device[list_box_row] = device;
             }
@@ -71,7 +71,7 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                 microphone_selected(row_microphone_device[row]);
                 micro_list_box.unselect_row(row);
             });
-            micro_box.add(micro_frame);
+            micro_box.append(micro_frame);
         }
 
         return micro_box;
@@ -81,22 +81,22 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
         Plugins.VideoCallPlugin call_plugin = Dino.Application.get_default().plugin_registry.video_call_plugin;
         Gee.List<Plugins.MediaDevice> devices = call_plugin.get_devices("audio", true);
 
-        Box speaker_box = new Box(Orientation.VERTICAL, 10) { visible=true };
+        Box speaker_box = new Box(Orientation.VERTICAL, 10);
-        speaker_box.add(new Label("<b>" + _("Speakers") +"</b>") { use_markup=true, xalign=0, visible=true });
+        speaker_box.append(new Label("<b>" + _("Speakers") +"</b>") { use_markup=true, xalign=0 });
 
         if (devices.size == 0) {
-            speaker_box.add(new Label(_("No speaker found.")));
+            speaker_box.append(new Label(_("No speaker found.")));
         } else {
-            ListBox speaker_list_box = new ListBox() { activate_on_single_click=true, selection_mode=SelectionMode.SINGLE, visible=true };
+            ListBox speaker_list_box = new ListBox() { activate_on_single_click=true, selection_mode=SelectionMode.SINGLE };
             speaker_list_box.set_header_func(listbox_header_func);
             speaker_list_box.row_selected.connect((row) => {
 
             });
-            Frame speaker_frame = new Frame(null) { visible=true };
+            Frame speaker_frame = new Frame(null);
-            speaker_frame.add(speaker_list_box);
+            speaker_frame.set_child(speaker_list_box);
             foreach (Plugins.MediaDevice device in devices) {
-                Label display_name_label = new Label(device.display_name) { xalign=0, visible=true };
+                Label display_name_label = new Label(device.display_name) { xalign=0 };
-                Image image = new Image.from_icon_name("object-select-symbolic", IconSize.BUTTON) { visible=true };
+                Image image = new Image.from_icon_name("object-select-symbolic");
                 if (current_speaker_device == null || current_speaker_device.id != device.id) {
                     image.opacity = 0;
                 }
@@ -107,21 +107,21 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                         image.opacity = 1;
                     }
                 });
-                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, margin=7, visible=true };
+                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7 };
-                device_box.add(image);
+                device_box.append(image);
                 Box label_box = new Box(Orientation.VERTICAL, 0) { visible = true };
-                label_box.add(display_name_label);
+                label_box.append(display_name_label);
                 if (device.detail_name != null) {
-                    Label detail_name_label = new Label(device.detail_name) { xalign=0, visible=true };
+                    Label detail_name_label = new Label(device.detail_name) { xalign=0 };
-                    detail_name_label.get_style_context().add_class("dim-label");
+                    detail_name_label.add_css_class("dim-label");
                     detail_name_label.attributes = new Pango.AttrList();
                     detail_name_label.attributes.insert(Pango.attr_scale_new(0.8));
-                    label_box.add(detail_name_label);
+                    label_box.append(detail_name_label);
                 }
-                device_box.add(label_box);
+                device_box.append(label_box);
-                ListBoxRow list_box_row = new ListBoxRow() { visible=true };
+                ListBoxRow list_box_row = new ListBoxRow();
-                list_box_row.add(device_box);
+                list_box_row.set_child(device_box);
-                speaker_list_box.add(list_box_row);
+                speaker_list_box.append(list_box_row);
 
                 row_speaker_device[list_box_row] = device;
             }
@@ -130,7 +130,7 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                 speaker_selected(row_speaker_device[row]);
                 speaker_list_box.unselect_row(row);
             });
-            speaker_box.add(speaker_frame);
+            speaker_box.append(speaker_frame);
         }
 
         return speaker_box;

main/src/ui/call_window/call_bottom_bar.vala

@@ -9,63 +9,60 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
     public bool audio_enabled { get; set; }
     public bool video_enabled { get; set; }
 
-    public static IconSize ICON_SIZE_MEDIADEVICE_BUTTON = Gtk.icon_size_register("im.dino.Dino.CALL_MEDIADEVICE_BUTTON", 10, 10);
-
     public string counterpart_display_name { get; set; }
 
-    private Button audio_button = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START, visible=true };
+    private Button audio_button = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START };
-    private Overlay audio_button_overlay = new Overlay() { visible=true };
+    private Overlay audio_button_overlay = new Overlay();
-    private Image audio_image = new Image() { visible=true };
+    private Image audio_image = new Image() { pixel_size=22 };
     private MenuButton audio_settings_button = new MenuButton() { halign=Align.END, valign=Align.END };
     public AudioSettingsPopover? audio_settings_popover;
 
-    private Button video_button = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START, visible=true };
+    private Button video_button = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START };
-    private Overlay video_button_overlay = new Overlay() { visible=true };
+    private Overlay video_button_overlay = new Overlay();
-    private Image video_image = new Image() { visible=true };
+    private Image video_image = new Image() { pixel_size=22 };
     private MenuButton video_settings_button = new MenuButton() { halign=Align.END, valign=Align.END };
     public VideoSettingsPopover? video_settings_popover;
 
-    private Label label = new Label("") { margin=20, halign=Align.CENTER, valign=Align.CENTER, wrap=true, wrap_mode=Pango.WrapMode.WORD_CHAR, hexpand=true, visible=true };
+    private Label label = new Label("") { halign=Align.CENTER, valign=Align.CENTER, wrap=true, wrap_mode=Pango.WrapMode.WORD_CHAR, hexpand=true };
-    private Stack stack = new Stack() { visible=true };
+    private Stack stack = new Stack();
 
     public CallBottomBar() {
         Object(orientation:Orientation.HORIZONTAL, spacing:0);
 
-        Box main_buttons = new Box(Orientation.HORIZONTAL, 20) { margin_start=40, margin_end=40, margin=20, halign=Align.CENTER, hexpand=true, visible=true };
+        Box main_buttons = new Box(Orientation.HORIZONTAL, 20) { margin_start=40, margin_end=40, margin_bottom=20, margin_top=20, halign=Align.CENTER, hexpand=true };
 
-        audio_button.add(audio_image);
+        audio_button.set_child(audio_image);
-        audio_button.get_style_context().add_class("call-button");
+        audio_button.add_css_class("call-button");
         audio_button.clicked.connect(() => { audio_enabled = !audio_enabled; });
         audio_button.margin_end = audio_button.margin_bottom = 5; // space for the small settings button
-        audio_button_overlay.add(audio_button);
+        audio_button_overlay.set_child(audio_button);
         audio_button_overlay.add_overlay(audio_settings_button);
-        audio_settings_button.set_image(new Image.from_icon_name("go-up-symbolic", ICON_SIZE_MEDIADEVICE_BUTTON) { visible=true });
+        menu_button_set_icon_with_size(audio_settings_button, "go-up-symbolic", 10);
-        audio_settings_button.get_style_context().add_class("call-mediadevice-settings-button");
+        audio_settings_button.add_css_class("call-mediadevice-settings-button");
-        audio_settings_button.use_popover = true;
+        main_buttons.append(audio_button_overlay);
-        main_buttons.add(audio_button_overlay);
 
-        video_button.add(video_image);
+        video_button.set_child(video_image);
-        video_button.get_style_context().add_class("call-button");
+        video_button.add_css_class("call-button");
         video_button.clicked.connect(() => { video_enabled = !video_enabled; });
         video_button.margin_end = video_button.margin_bottom = 5;
-        video_button_overlay.add(video_button);
+        video_button_overlay.set_child(video_button);
         video_button_overlay.add_overlay(video_settings_button);
-        video_settings_button.set_image(new Image.from_icon_name("go-up-symbolic", ICON_SIZE_MEDIADEVICE_BUTTON) { visible=true });
+        menu_button_set_icon_with_size(video_settings_button, "go-up-symbolic", 10);
-        video_settings_button.get_style_context().add_class("call-mediadevice-settings-button");
+        video_settings_button.add_css_class("call-mediadevice-settings-button");
-        video_settings_button.use_popover = true;
+        main_buttons.append(video_button_overlay);
-        main_buttons.add(video_button_overlay);
 
-        Button button_hang = new Button.from_icon_name("dino-phone-hangup-symbolic", IconSize.LARGE_TOOLBAR) { height_request=45, width_request=45, halign=Align.START, valign=Align.START, visible=true };
+        Button button_hang = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START };
-        button_hang.get_style_context().add_class("call-button");
+        button_hang.set_child(new Image() { icon_name="dino-phone-hangup-symbolic", pixel_size=22 });
-        button_hang.get_style_context().add_class("destructive-action");
+        button_hang.add_css_class("call-button");
+        button_hang.add_css_class("destructive-action");
         button_hang.clicked.connect(() => hang_up());
-        main_buttons.add(button_hang);
+        main_buttons.append(button_hang);
 
-        label.get_style_context().add_class("text-no-controls");
+        label.add_css_class("text-no-controls");
 
         stack.add_named(main_buttons, "control-buttons");
         stack.add_named(label, "label");
-        this.add(stack);
+        this.append(stack);
 
         this.notify["audio-enabled"].connect(on_audio_enabled_changed);
         this.notify["video-enabled"].connect(on_video_enabled_changed);
@@ -76,7 +73,22 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
         on_audio_enabled_changed();
         on_video_enabled_changed();
 
-        this.get_style_context().add_class("call-bottom-bar");
+        this.add_css_class("call-bottom-bar");
+    }
+
+    private static void menu_button_set_icon_with_size(MenuButton menu_button, string icon_name, int pixel_size) {
+#if GTK_4_6
+        menu_button.set_child(new Image.from_icon_name(icon_name) { pixel_size=pixel_size });
+#else
+        menu_button.set_icon_name(icon_name);
+        var button = menu_button.get_first_child() as Button;
+        if (button == null) return;
+        var box = button.child as Box;
+        if (box == null) return;
+        var image = box.get_first_child() as Image;
+        if (image == null) return;
+        image.pixel_size = pixel_size;
+#endif
     }
 
     public AudioSettingsPopover? show_audio_device_choices(bool show) {
@@ -85,18 +97,15 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
         if (!show) return null;
 
         audio_settings_popover = new AudioSettingsPopover();
-
         audio_settings_button.popover = audio_settings_popover;
-
+        audio_settings_popover.microphone_selected.connect(() => { audio_settings_button.popdown(); });
-        audio_settings_popover.set_relative_to(audio_settings_button);
+        audio_settings_popover.speaker_selected.connect(() => { audio_settings_button.popdown(); });
-        audio_settings_popover.microphone_selected.connect(() => { audio_settings_button.active = false; });
-        audio_settings_popover.speaker_selected.connect(() => { audio_settings_button.active = false; });
 
         return audio_settings_popover;
     }
 
     public void show_audio_device_error() {
-        audio_settings_button.set_image(new Image.from_icon_name("dialog-warning-symbolic", IconSize.BUTTON) { visible=true });
+        audio_settings_button.set_icon_name("dialog-warning-symbolic");
         Util.force_error_color(audio_settings_button);
     }
 
@@ -106,43 +115,39 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
         if (!show) return null;
 
         video_settings_popover = new VideoSettingsPopover();
-
-
         video_settings_button.popover = video_settings_popover;
-
+        video_settings_popover.camera_selected.connect(() => { video_settings_button.popdown(); });
-        video_settings_popover.set_relative_to(video_settings_button);
-        video_settings_popover.camera_selected.connect(() => { video_settings_button.active = false; });
 
         return video_settings_popover;
     }
 
     public void show_video_device_error() {
-        video_settings_button.set_image(new Image.from_icon_name("dialog-warning-symbolic", IconSize.BUTTON) { visible=true });
+        video_settings_button.set_icon_name("dialog-warning-symbolic");
         Util.force_error_color(video_settings_button);
     }
 
     public void on_audio_enabled_changed() {
         if (audio_enabled) {
-            audio_image.set_from_icon_name("dino-microphone-symbolic", IconSize.LARGE_TOOLBAR);
+            audio_image.icon_name = "dino-microphone-symbolic";
-            audio_button.get_style_context().add_class("white-button");
+            audio_button.add_css_class("white-button");
-            audio_button.get_style_context().remove_class("transparent-white-button");
+            audio_button.remove_css_class("transparent-white-button");
         } else {
-            audio_image.set_from_icon_name("dino-microphone-off-symbolic", IconSize.LARGE_TOOLBAR);
+            audio_image.icon_name = "dino-microphone-off-symbolic";
-            audio_button.get_style_context().remove_class("white-button");
+            audio_button.remove_css_class("white-button");
-            audio_button.get_style_context().add_class("transparent-white-button");
+            audio_button.add_css_class("transparent-white-button");
         }
     }
 
     public void on_video_enabled_changed() {
         if (video_enabled) {
-            video_image.set_from_icon_name("dino-video-symbolic", IconSize.LARGE_TOOLBAR);
+            video_image.icon_name = "dino-video-symbolic";
-            video_button.get_style_context().add_class("white-button");
+            video_button.add_css_class("white-button");
-            video_button.get_style_context().remove_class("transparent-white-button");
+            video_button.remove_css_class("transparent-white-button");
 
         } else {
-            video_image.set_from_icon_name("dino-video-off-symbolic", IconSize.LARGE_TOOLBAR);
+            video_image.icon_name = "dino-video-off-symbolic";
-            video_button.get_style_context().remove_class("white-button");
+            video_button.remove_css_class("white-button");
-            video_button.get_style_context().add_class("transparent-white-button");
+            video_button.add_css_class("transparent-white-button");
         }
     }
 
@@ -152,6 +157,7 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
     }
 
     public bool is_menu_active() {
-        return video_settings_button.active || audio_settings_button.active;
+        return (video_settings_button.popover != null && video_settings_button.popover.visible) ||
+                (audio_settings_button.popover != null && audio_settings_button.popover.visible);
     }
 }

main/src/ui/call_window/call_connection_details_window.vala

@@ -4,16 +4,16 @@ namespace Dino.Ui {
 
     public class CallConnectionDetailsWindow : Gtk.Window {
 
-        public Box box = new Box(Orientation.VERTICAL, 15) { margin=10, halign=Align.CENTER, valign=Align.CENTER, visible=true };
+        public Box box = new Box(Orientation.VERTICAL, 15) { halign=Align.CENTER, valign=Align.CENTER };
 
         private bool video_added = false;
-        private CallContentDetails audio_details = new CallContentDetails("Audio") { visible=true };
+        private CallContentDetails audio_details = new CallContentDetails("Audio");
         private CallContentDetails video_details = new CallContentDetails("Video");
 
         public CallConnectionDetailsWindow() {
-            box.add(audio_details);
+            box.append(audio_details);
-            box.add(video_details);
+            box.append(video_details);
-            add(box);
+            set_child(box);
         }
 
         public void update_content(PeerInfo peer_info) {
@@ -36,24 +36,24 @@ namespace Dino.Ui {
 
     public class CallContentDetails : Gtk.Grid {
 
-        public Label rtp_title = new Label("RTP") { xalign=0, visible=true };
+        public Label rtp_title = new Label("RTP") { xalign=0 };
-        public Label rtcp_title = new Label("RTCP") { xalign=0, visible=true };
+        public Label rtcp_title = new Label("RTCP") { xalign=0 };
-        public Label target_recv_title = new Label("Target receive bitrate") { xalign=0, visible=true };
+        public Label target_recv_title = new Label("Target receive bitrate") { xalign=0 };
-        public Label target_send_title = new Label("Target send bitrate") { xalign=0, visible=true };
+        public Label target_send_title = new Label("Target send bitrate") { xalign=0 };
 
-        public Label rtp_ready = new Label("?") { xalign=0, visible=true };
+        public Label rtp_ready = new Label("?") { xalign=0 };
-        public Label rtcp_ready = new Label("?") { xalign=0, visible=true };
+        public Label rtcp_ready = new Label("?") { xalign=0 };
-        public Label sent_bps = new Label("?") { use_markup=true, xalign=0, visible=true };
+        public Label sent_bps = new Label("?") { use_markup=true, xalign=0 };
-        public Label recv_bps = new Label("?") { use_markup=true, xalign=0, visible=true };
+        public Label recv_bps = new Label("?") { use_markup=true, xalign=0 };
-        public Label codec = new Label("?") { xalign=0, visible=true };
+        public Label codec = new Label("?") { xalign=0 };
-        public Label target_receive_bitrate = new Label("n/a") { use_markup=true, xalign=0, visible=true };
+        public Label target_receive_bitrate = new Label("n/a") { use_markup=true, xalign=0 };
-        public Label target_send_bitrate = new Label("n/a") { use_markup=true, xalign=0, visible=true };
+        public Label target_send_bitrate = new Label("n/a") { use_markup=true, xalign=0 };
 
         private PeerContentInfo? prev_info = null;
         private int row_at = 0;
 
         public CallContentDetails(string headline) {
-            attach(new Label("<b>%s</b>".printf(headline)) { use_markup=true, xalign=0, visible=true }, 0, row_at++, 1, 1);
+            attach(new Label("<b>%s</b>".printf(headline)) { use_markup=true, xalign=0 }, 0, row_at++, 1, 1);
             attach(rtp_title, 0, row_at, 1, 1);
             attach(rtp_ready, 1, row_at++, 1, 1);
             attach(rtcp_title, 0, row_at, 1, 1);
@@ -104,7 +104,7 @@ namespace Dino.Ui {
         }
 
         private void put_row(string label) {
-            attach(new Label(label) { xalign=0, visible=true }, 0, row_at, 1, 1);
+            attach(new Label(label) { xalign=0 }, 0, row_at, 1, 1);
         }
     }
 }

main/src/ui/call_window/call_encryption_button.vala

@@ -2,72 +2,74 @@ using Dino.Entities;
 using Gtk;
 using Pango;
 
-public class Dino.Ui.CallEncryptionButton : MenuButton {
+public class Dino.Ui.CallEncryptionButtonController : Object {
 
-    private Image encryption_image = new Image.from_icon_name("", IconSize.BUTTON) { visible=true };
     private bool has_been_set = false;
     public bool controls_active { get; set; default=false; }
 
-    public CallEncryptionButton() {
+    public MenuButton button;
-        this.opacity = 0;
-        add(encryption_image);
-        this.set_popover(popover);
 
-        this.notify["controls-active"].connect(update_opacity);
+    public CallEncryptionButtonController(MenuButton button) {
+        this.button = button;
+
+        button.opacity = 0;
+//        button.set_popover(popover);
+
+        button.notify["controls-active"].connect(update_opacity);
     }
 
     public void set_icon(bool encrypted, string? icon_name) {
         if (encrypted) {
-            encryption_image.set_from_icon_name(icon_name ?? "changes-prevent-symbolic", IconSize.BUTTON);
+            button.icon_name = icon_name ?? "changes-prevent-symbolic";
-            get_style_context().remove_class("unencrypted");
+            button.remove_css_class("unencrypted");
         } else {
-            encryption_image.set_from_icon_name(icon_name ?? "changes-allow-symbolic", IconSize.BUTTON);
+            button.icon_name = icon_name ?? "changes-allow-symbolic";
-            get_style_context().add_class("unencrypted");
+            button.add_css_class("unencrypted");
         }
         has_been_set = true;
         update_opacity();
     }
 
     public void set_info(string? title, bool show_keys, Xmpp.Xep.Jingle.ContentEncryption? audio_encryption, Xmpp.Xep.Jingle.ContentEncryption? video_encryption) {
-        Popover popover = new Popover(this);
+        Popover popover = new Popover();
-        this.set_popover(popover);
+        button.set_popover(popover);
 
         if (audio_encryption == null) {
-            popover.add(new Label("This call is unencrypted.") { margin=10, visible=true } );
+            popover.set_child(new Label("This call is unencrypted.") );
             return;
         }
         if (title != null && !show_keys) {
-            popover.add(new Label(title) { use_markup=true, margin=10, visible=true } );
+            popover.set_child(new Label(title) { use_markup=true } );
             return;
         }
 
-        Box box = new Box(Orientation.VERTICAL, 10) { margin=10, visible=true };
+        Box box = new Box(Orientation.VERTICAL, 10);
-        box.add(new Label("<b>%s</b>".printf(title ?? "This call is end-to-end encrypted.")) { use_markup=true, xalign=0, visible=true });
+        box.append(new Label("<b>%s</b>".printf(title ?? "This call is end-to-end encrypted.")) { use_markup=true, xalign=0 });
 
         if (video_encryption == null) {
-            box.add(create_media_encryption_grid(audio_encryption));
+            box.append(create_media_encryption_grid(audio_encryption));
         } else {
-            box.add(new Label("<b>Audio</b>") { use_markup=true, xalign=0, visible=true });
+            box.append(new Label("<b>Audio</b>") { use_markup=true, xalign=0 });
-            box.add(create_media_encryption_grid(audio_encryption));
+            box.append(create_media_encryption_grid(audio_encryption));
-            box.add(new Label("<b>Video</b>") { use_markup=true, xalign=0, visible=true });
+            box.append(new Label("<b>Video</b>") { use_markup=true, xalign=0 });
-            box.add(create_media_encryption_grid(video_encryption));
+            box.append(create_media_encryption_grid(video_encryption));
         }
-        popover.add(box);
+        popover.set_child(box);
     }
 
     public void update_opacity() {
-        this.opacity = controls_active && has_been_set ? 1 : 0;
+        button.opacity = controls_active && has_been_set ? 1 : 0;
     }
 
     private Grid create_media_encryption_grid(Xmpp.Xep.Jingle.ContentEncryption? encryption) {
-        Grid ret = new Grid() { row_spacing=3, column_spacing=5, visible=true };
+        Grid ret = new Grid() { row_spacing=3, column_spacing=5 };
         if (encryption.peer_key.length > 0) {
-            ret.attach(new Label("Peer call key") { xalign=0, visible=true }, 1, 2, 1, 1);
+            ret.attach(new Label("Peer call key") { xalign=0 }, 1, 2, 1, 1);
-            ret.attach(new Label("<span font_family='monospace'>" + format_fingerprint(encryption.peer_key) + "</span>") { use_markup=true, max_width_chars=25, ellipsize=EllipsizeMode.MIDDLE, xalign=0, hexpand=true, visible=true }, 2, 2, 1, 1);
+            ret.attach(new Label("<span font_family='monospace'>" + format_fingerprint(encryption.peer_key) + "</span>") { use_markup=true, max_width_chars=25, ellipsize=EllipsizeMode.MIDDLE, xalign=0, hexpand=true }, 2, 2, 1, 1);
         }
         if (encryption.our_key.length > 0) {
-            ret.attach(new Label("Your call key") { xalign=0, visible=true }, 1, 3, 1, 1);
+            ret.attach(new Label("Your call key") { xalign=0 }, 1, 3, 1, 1);
-            ret.attach(new Label("<span font_family='monospace'>" + format_fingerprint(encryption.our_key) + "</span>") { use_markup=true, max_width_chars=25, ellipsize=EllipsizeMode.MIDDLE, xalign=0, hexpand=true, visible=true }, 2, 3, 1, 1);
+            ret.attach(new Label("<span font_family='monospace'>" + format_fingerprint(encryption.our_key) + "</span>") { use_markup=true, max_width_chars=25, ellipsize=EllipsizeMode.MIDDLE, xalign=0, hexpand=true }, 2, 3, 1, 1);
         }
         return ret;
     }

main/src/ui/call_window/call_window.vala

@@ -11,17 +11,19 @@ namespace Dino.Ui {
 
         public CallWindowController controller;
 
-        public Overlay overlay = new Overlay() { visible=true };
+        public Overlay overlay = new Overlay();
-        public Grid grid = new Grid() { visible=true };
+        public Grid grid = new Grid();
-        public CallBottomBar bottom_bar = new CallBottomBar() { visible=true };
+        public CallBottomBar bottom_bar = new CallBottomBar();
-        public Revealer bottom_bar_revealer = new Revealer() { valign=Align.END, transition_type=RevealerTransitionType.CROSSFADE, transition_duration=200, visible=true };
+        public Revealer bottom_bar_revealer = new Revealer() { valign=Align.END, transition_type=RevealerTransitionType.CROSSFADE, transition_duration=200 };
-        public HeaderBar header_bar = new HeaderBar() { valign=Align.START, halign=Align.END, show_close_button=true, visible=true, opacity=0.0 };
+        public HeaderBar header_bar = new HeaderBar() { valign=Align.START, halign=Align.END, show_title_buttons=true, opacity=0.0 };
-        public Revealer header_bar_revealer = new Revealer() { halign=Align.END, valign=Align.START, transition_type=RevealerTransitionType.SLIDE_LEFT, transition_duration=200, visible=true, reveal_child=false };
+        public Revealer header_bar_revealer = new Revealer() { halign=Align.END, valign=Align.START, transition_type=RevealerTransitionType.SLIDE_LEFT, transition_duration=200, reveal_child=false };
-        public Box own_video_box = new Box(Orientation.HORIZONTAL, 0) { halign=Align.END, valign=Align.END, visible=true };
+        public Box own_video_box = new Box(Orientation.HORIZONTAL, 0) { halign=Align.END, valign=Align.END };
         private Widget? own_video = null;
         private HashMap<string, ParticipantWidget> participant_widgets = new HashMap<string, ParticipantWidget>();
         private ArrayList<string> participants = new ArrayList<string>();
 
+        private EventControllerMotion this_motion_events = new EventControllerMotion();
+
         private int own_video_width = 150;
         private int own_video_height = 100;
 
@@ -30,35 +32,39 @@ namespace Dino.Ui {
         public bool controls_active { get; set; default=true; }
 
         construct {
-            header_bar.get_style_context().add_class("call-header-bar");
+            header_bar.add_css_class("call-header-bar");
-            header_bar.custom_title = new Box(Orientation.VERTICAL, 0);
+            header_bar.title_widget = new Box(Orientation.VERTICAL, 0);
-            header_bar.spacing = 0;
+//            header_bar.spacing = 0;
-            header_bar_revealer.add(header_bar);
+            header_bar_revealer.set_child(header_bar);
-            bottom_bar_revealer.add(bottom_bar);
+            bottom_bar_revealer.set_child(bottom_bar);
-            own_video_box.get_style_context().add_class("own-video");
+            own_video_box.add_css_class("own-video");
 
-            this.get_style_context().add_class("dino-call-window");
+            this.add_css_class("dino-call-window");
 
-            overlay.add(grid);
+            overlay.set_child(grid);
             overlay.add_overlay(own_video_box);
             overlay.add_overlay(bottom_bar_revealer);
             overlay.add_overlay(header_bar_revealer);
             overlay.get_child_position.connect(on_get_child_position);
 
-            add(overlay);
+            set_child(overlay);
         }
 
         public CallWindow() {
             this.bind_property("controls-active", bottom_bar_revealer, "reveal-child", BindingFlags.SYNC_CREATE);
 
-            this.motion_notify_event.connect(reveal_control_elements);
+            ((Widget) this).add_controller(this_motion_events);
-            this.enter_notify_event.connect(reveal_control_elements);
+            this_motion_events.motion.connect(reveal_control_elements);
-            this.leave_notify_event.connect(reveal_control_elements);
+            this_motion_events.enter.connect(reveal_control_elements);
-            this.configure_event.connect(reveal_control_elements); // upon resizing
+            this_motion_events.leave.connect(reveal_control_elements);
 
-            this.configure_event.connect(reposition_participant_widgets);
+            this.notify["default-width"].connect(reveal_control_elements);
+            this.notify["default-height"].connect(reveal_control_elements);
 
-            this.set_titlebar(new OutsideHeaderBar(this.header_bar) { visible=true });
+            this.notify["default-width"].connect(reposition_participant_widgets);
+            this.notify["default-height"].connect(reposition_participant_widgets);
+
+            this.set_titlebar(new OutsideHeaderBar(this.header_bar));
 
             reveal_control_elements();
         }
@@ -66,7 +72,7 @@ namespace Dino.Ui {
         public void add_participant(string participant, ParticipantWidget participant_widget) {
             participant_widget.visible = true;
             this.bind_property("controls-active", participant_widget, "controls-active", BindingFlags.SYNC_CREATE);
-            this.bind_property("controls-active", participant_widget.encryption_button, "controls-active", BindingFlags.SYNC_CREATE);
+            this.bind_property("controls-active", participant_widget.encryption_button_controller, "controls-active", BindingFlags.SYNC_CREATE);
 
             participants.add(participant);
             participant_widgets[participant] = participant_widget;
@@ -103,11 +109,10 @@ namespace Dino.Ui {
             }
         }
 
-        private bool reposition_participant_widgets() {
+        private void reposition_participant_widgets() {
-            int width, height;
+            int width = get_size(Orientation.HORIZONTAL);
-            this.get_size(out width,out height);
+            int height = get_size(Orientation.VERTICAL);
             reposition_participant_widgets_rec(participants, width, height, 0, 0, 0, 0);
-            return false;
         }
 
         private void reposition_participant_widgets_rec(ArrayList<string> participants, int width, int height, int margin_top, int margin_right, int margin_bottom, int margin_left) {
@@ -144,14 +149,15 @@ namespace Dino.Ui {
         }
 
         public void set_own_video(Widget? widget_) {
-            own_video_box.foreach((widget) => { own_video_box.remove(widget); });
+            unset_own_video();
 
             own_video = widget_;
             if (own_video == null) {
-                own_video = new Box(Orientation.HORIZONTAL, 0) { expand=true };
+                own_video = new Box(Orientation.HORIZONTAL, 0);
             }
+            own_video.hexpand = own_video.vexpand = true;
             own_video.visible = true;
-            own_video_box.add(own_video);
+            own_video_box.append(own_video);
         }
 
         public void set_own_video_ratio(int width, int height) {
@@ -165,7 +171,11 @@ namespace Dino.Ui {
         }
 
         public void unset_own_video() {
-            own_video_box.foreach((widget) => { own_video_box.remove(widget); });
+            Widget to_remove = own_video_box.get_first_child();
+            while (to_remove != null) {
+                own_video_box.remove(to_remove);
+                to_remove = own_video_box.get_first_child();
+            }
         }
 
         public void set_status(string participant_id, string state) {
@@ -192,13 +202,12 @@ namespace Dino.Ui {
             bottom_bar.show_counterpart_ended(text);
         }
 
-        private bool reveal_control_elements() {
+        private void reveal_control_elements() {
             if (!bottom_bar_revealer.child_revealed) {
                 controls_active = true;
             }
 
             timeout_hide_control_elements();
-            return false;
         }
 
         private void timeout_hide_control_elements() {
@@ -229,8 +238,8 @@ namespace Dino.Ui {
 
         private bool on_get_child_position(Widget widget, out Gdk.Rectangle allocation) {
             if (widget == own_video_box) {
-                int width, height;
+                int width = get_size(Orientation.HORIZONTAL);
-                this.get_size(out width,out height);
+                int height = get_size(Orientation.VERTICAL);
 
                 allocation = Gdk.Rectangle();
                 allocation.width = own_video_width;
@@ -252,8 +261,8 @@ namespace Dino.Ui {
         public OutsideHeaderBar(HeaderBar header_bar) {
             this.header_bar = header_bar;
 
-            size_allocate.connect_after(on_header_bar_size_allocate);
+//            size_allocate.connect_after(on_header_bar_size_allocate);
-            header_bar.size_allocate.connect(on_header_bar_size_allocate);
+//            header_bar.size_allocate.connect(on_header_bar_size_allocate);
         }
 
         public void on_header_bar_size_allocate() {
@@ -263,7 +272,7 @@ namespace Dino.Ui {
             Allocation alloc;
             get_allocation(out alloc);
             alloc.height = header_bar_alloc.height;
-            set_allocation(alloc);
+//            set_allocation(alloc);
         }
     }
 }

main/src/ui/call_window/call_window_controller.vala

@@ -31,7 +31,7 @@ public class Dino.Ui.CallWindowController : Object {
         this.stream_interactor = stream_interactor;
 
         this.calls = stream_interactor.get_module(Calls.IDENTITY);
-        this.own_video = call_plugin.create_widget(Plugins.WidgetType.GTK);
+        this.own_video = call_plugin.create_widget(Plugins.WidgetType.GTK4);
 
         call_window.set_default_size(704, 528); // 640x480 * 1.1
 
@@ -70,9 +70,10 @@ public class Dino.Ui.CallWindowController : Object {
             call_window.destroy();
             this.dispose();
         });
-        call_window_handler_ids += call_window.destroy.connect(() => {
+        call_window_handler_ids += call_window.close_request.connect(() => {
             call_state.end();
             this.dispose();
+            return false;
         });
         bottom_bar_handler_ids += call_window.bottom_bar.notify["audio-enabled"].connect(() => {
             call_state.mute_own_audio(!call_window.bottom_bar.audio_enabled);
@@ -81,17 +82,23 @@ public class Dino.Ui.CallWindowController : Object {
             call_state.mute_own_video(!call_window.bottom_bar.video_enabled);
             update_own_video();
         });
-        call_window_handler_ids += call_window.configure_event.connect((event) => {
+        call_window_handler_ids += call_window.notify["default-width"].connect((event) => {
-            if (window_width == -1 || window_height == -1) return false;
+            if (call_window.default_width == -1) return;
-            int current_height = this.call_window.get_allocated_height();
             int current_width = this.call_window.get_allocated_width();
-            if (window_width != current_width || window_height != current_height) {
+            if (window_width != current_width) {
-                debug("Call window size changed by user. Disabling auto window-to-video size adaptation. %i->%i x %i->%i", window_width, current_width, window_height, current_height);
+                debug("Call window size changed by user. Disabling auto window-to-video size adaptation. Width %i->%i", window_width, current_width);
                 window_size_changed = true;
             }
-            return false;
         });
-        call_window_handler_ids += call_window.realize.connect(() => {
+        call_window_handler_ids += call_window.notify["default-height"].connect((event) => {
+            if (call_window.default_height == -1) return;
+            int current_height = this.call_window.get_allocated_height();
+            if (window_height != current_height) {
+                debug("Call window size changed by user. Disabling auto window-to-video size adaptation. Height %i->%i", window_height, current_height);
+                window_size_changed = true;
+            }
+        });
+        call_window_handler_ids += ((Widget)call_window).realize.connect(() => {
             capture_window_size();
         });
 
@@ -127,10 +134,11 @@ public class Dino.Ui.CallWindowController : Object {
             warning("suspend inhibit request failed or unsupported");
         }
 
-        call_window.destroy.connect(() => {
+        call_window.close_request.connect(() => {
             if (inhibit_cookie != 0) {
                 app.uninhibit(inhibit_cookie);
             }
+            return false;
         });
     }
 
@@ -138,7 +146,7 @@ public class Dino.Ui.CallWindowController : Object {
         Gee.List<Account> acc_list = new ArrayList<Account>(Account.equals_func);
         acc_list.add(call.account);
         SelectContactDialog add_chat_dialog = new SelectContactDialog(stream_interactor, acc_list);
-        add_chat_dialog.set_transient_for((Window) call_window.get_toplevel());
+        add_chat_dialog.set_transient_for((Window) call_window.get_root());
         add_chat_dialog.title = _("Invite to Call");
         add_chat_dialog.ok_button.label = _("Invite");
         add_chat_dialog.selected.connect((account, jid) => {
@@ -192,11 +200,11 @@ public class Dino.Ui.CallWindowController : Object {
             }
         });
         peer_state.encryption_updated.connect((audio_encryption, video_encryption, same) => {
-            update_encryption_indicator(participant_widgets[peer_id].encryption_button, audio_encryption, video_encryption, same);
+            update_encryption_indicator(participant_widgets[peer_id].encryption_button_controller, audio_encryption, video_encryption, same);
         });
     }
 
-    private void update_encryption_indicator(CallEncryptionButton encryption_button, Xep.Jingle.ContentEncryption? audio_encryption, Xep.Jingle.ContentEncryption? video_encryption, bool same) {
+    private void update_encryption_indicator(CallEncryptionButtonController encryption_button, Xep.Jingle.ContentEncryption? audio_encryption, Xep.Jingle.ContentEncryption? video_encryption, bool same) {
         string? title = null;
         string? icon_name = null;
         bool show_keys = true;
@@ -228,31 +236,33 @@ public class Dino.Ui.CallWindowController : Object {
         ParticipantWidget participant_widget = new ParticipantWidget(participant_name);
         participant_widget.may_show_invite_button = !participant_widgets.is_empty;
         participant_widget.debug_information_clicked.connect(() => {
-            var conn_details_window = new CallConnectionDetailsWindow() { title=participant_name, visible=true };
+            var conn_details_window = new CallConnectionDetailsWindow() { title=participant_name };
             conn_details_window.update_content(peer_states[participant_id].get_info());
             uint timeout_handle_id = Timeout.add_seconds(1, () => {
                 conn_details_window.update_content(peer_states[participant_id].get_info());
                 return true;
             });
             conn_details_window.set_transient_for(call_window);
-            conn_details_window.destroy.connect(() => Source.remove(timeout_handle_id));
+            conn_details_window.close_request.connect(() => { Source.remove(timeout_handle_id); return false; });
             conn_details_window.present();
-            this.call_window.destroy.connect(() => conn_details_window.close() );
+            this.call_window.close_request.connect(() => { conn_details_window.close(); return false; });
         });
         invite_handler_ids[participant_id] += participant_widget.invite_button_clicked.connect(() => invite_button_clicked());
         participant_widgets[participant_id] = participant_widget;
 
         call_window.add_participant(participant_id, participant_widget);
 
-        participant_videos[participant_id] = call_plugin.create_widget(Plugins.WidgetType.GTK);
+        participant_videos[participant_id] = call_plugin.create_widget(Plugins.WidgetType.GTK4);
 
         participant_videos[participant_id].resolution_changed.connect((width, height) => {
             if (window_size_changed || participant_widgets.size > 1) return;
             if (width == 0 || height == 0) return;
             if (width > height) {
-                call_window.resize(704, (int) (height * 704 / width));
+                call_window.default_width = 704;
+                call_window.default_height = (int) (height * 704 / width);
             } else {
-                call_window.resize((int) (width * 704 / height), 704);
+                call_window.default_width = (int) (width * 704 / height);
+                call_window.default_height = 704;
             }
             capture_window_size();
         });
@@ -352,10 +362,15 @@ public class Dino.Ui.CallWindowController : Object {
     public override void dispose() {
         foreach (ulong handler_id in call_window_handler_ids) call_window.disconnect(handler_id);
         foreach (ulong handler_id in bottom_bar_handler_ids) call_window.bottom_bar.disconnect(handler_id);
-        participant_widgets.keys.@foreach((peer_id) => { remove_participant(peer_id); return true; });
+
+        var participant_ids = new ArrayList<string>();
+        participant_ids.add_all(participant_widgets.keys);
+        foreach (string participant_id in participant_ids) {
+            remove_participant(participant_id);
+        }
 
         call_window_handler_ids = bottom_bar_handler_ids = new ulong[0];
-
+        own_video.detach();
         base.dispose();
     }
 }