Rewrite contact details dialog

8 files changed, 656 insertions, 111 deletions

diff --git a/main/data/contact_details_dialog.ui b/main/data/contact_details_dialog.ui
deleted file mode 100644
index 4802ae9a..00000000
--- a/main/data/contact_details_dialog.ui
+++ /dev/null
@@ -1,110 +0,0 @@
-<?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">
-            </object>
-        </child>
-        <child internal-child="content_area">
-            <object class="GtkBox">
-                <property name="hexpand">1</property>
-                <property name="vexpand">1</property>
-                <child>
-                    <object class="GtkScrolledWindow">
-                        <property name="propagate_natural_height">1</property>
-                        <property name="max_content_height">500</property>
-                        <property name="hscrollbar_policy">never</property>
-                        <property name="hexpand">1</property>
-                        <property name="vexpand">1</property>
-                        <property name="child">
-                            <object class="GtkBox">
-                                <property name="orientation">vertical</property>
-                                <child>
-                                    <object class="GtkGrid">
-                                        <property name="margin-top">20</property>
-                                        <property name="margin-bottom">12</property>
-                                        <property name="margin-end">100</property>
-                                        <property name="margin-start">100</property>
-                                        <property name="column-spacing">10</property>
-                                        <child>
-                                            <object class="DinoUiAvatarPicture" id="avatar">
-                                                <property name="height-request">50</property>
-                                                <property name="width-request">50</property>
-                                                <property name="valign">center</property>
-                                                <layout>
-                                                    <property name="column">0</property>
-                                                    <property name="row">0</property>
-                                                    <property name="row-span">2</property>
-                                                </layout>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="DinoUiUtilEntryLabelHybrid" id="name_hybrid">
-                                                <property name="xalign">0</property>
-                                                <property name="hexpand">True</property>
-                                                <layout>
-                                                    <property name="column">1</property>
-                                                    <property name="row">0</property>
-                                                </layout>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel" id="name_label">
-                                                <property name="xalign">0</property>
-                                                <property name="hexpand">1</property>
-                                                <attributes>
-                                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
-                                                </attributes>
-                                                <layout>
-                                                    <property name="column">1</property>
-                                                    <property name="row">0</property>
-                                                </layout>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel" id="jid_label">
-                                                <property name="xalign">0</property>
-                                                <property name="yalign">0</property>
-                                                <property name="selectable">1</property>
-                                                <property name="hexpand">1</property>
-                                                <layout>
-                                                    <property name="column">1</property>
-                                                    <property name="row">1</property>
-                                                </layout>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel" id="account_label">
-                                                <property name="xalign">1</property>
-                                                <property name="yalign">1</property>
-                                                <property name="margin-start">5</property>
-                                                <property name="margin-end">5</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>
-                                        </child>
-                                    </object>
-                                </child>
-                                <child>
-                                    <object class="GtkBox" id="main_box">
-                                        <property name="orientation">vertical</property>
-                                        <property name="margin-end">100</property>
-                                        <property name="margin-start">100</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </property>
-                    </object>
-                </child>
-            </object>
-        </child>
-    </template>
-</interface>
diff --git a/main/data/conversation_details.css b/main/data/conversation_details.css
new file mode 100644
index 00000000..0eaf60c0
--- /dev/null
+++ b/main/data/conversation_details.css
@@ -0,0 +1,7 @@
+.extended-headerbar {
+    background-color: @headerbar_bg_color;
+}
+.extended-headerbar-end {
+    padding-bottom: 24px;
+    border-bottom: 1px solid @borders;
+}
\ No newline at end of file
diff --git a/main/data/conversation_details.ui b/main/data/conversation_details.ui
new file mode 100644
index 00000000..1347ad2b
--- /dev/null
+++ b/main/data/conversation_details.ui
@@ -0,0 +1,207 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <object class="DinoUiViewModelConversationDetails" id="model"/>
+  <template class="DinoUiConversationDetailsDialog">
+    <property name="default-width">600</property>
+<!--    <property name="default-height">400</property>-->
+    <property name="modal">True</property>
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="AdwHeaderBar">
+            <style>
+              <class name="flat"/>
+              <class name="extended-headerbar"/>
+            </style>
+            <property name="title_widget">
+              <object class="GtkBox"/>
+            </property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="AdwClamp">
+                <style>
+                  <class name="extended-headerbar"/>
+                  <class name="extended-headerbar-end"/>
+                </style>
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">18</property>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">horizontal</property>
+                        <property name="spacing">18</property>
+                        <property name="margin-start">12</property>
+                        <property name="margin-end">12</property>
+                        <child>
+                          <object class="DinoUiAvatarPicture" id="picture">
+                            <property name="height-request">72</property>
+                            <property name="width-request">72</property>
+                            <property name="halign">center</property>
+                            <property name="model" bind-source="model" bind-property="avatar"/>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" bind-source="model" bind-property="name"/>
+                            <property name="ellipsize">end</property>
+                            <property name="hexpand">True</property>
+                            <property name="valign">center</property>
+                            <property name="xalign">0</property>
+                            <attributes>
+                              <attribute name="scale" value="1.4"/>
+                              <attribute name="weight" value="bold"/>
+                            </attributes>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">horizontal</property>
+                        <property name="spacing">12</property>
+                        <property name="margin-start">12</property>
+                        <property name="margin-end">12</property>
+                        <child>
+                          <object class="GtkButton" id="pin_button">
+                            <child>
+                              <object class="AdwButtonContent" id="pin_button_content">
+                                <property name="icon-name">view-pin-symbolic</property>
+                                <property name="label">Pin</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="notification_button_toggle">
+                            <child>
+                              <object class="AdwButtonContent" id="notification_button_toggle_content">
+                                <property name="icon-name">notification-symbolic</property>
+                                <property name="label">Mute</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkMenuButton" id="notification_button_menu">
+                            <property name="menu_model">notification_menu_button_menu_model</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="spacing">6</property>
+                                <property name="orientation">horizontal</property>
+                                <child>
+                                  <object class="AdwButtonContent" id="notification_button_menu_content">
+                                    <property name="icon-name">notification-symbolic</property>
+                                    <property name="label">Mute</property>
+                                    <property name="can-shrink">True</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">pan-down-symbolic</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="AdwSplitButton" id="notification_button_split">
+                            <property name="menu_model">notification_split_button_menu_model</property>
+                            <child>
+                              <object class="AdwButtonContent" id="notification_button_split_content">
+                                <property name="icon-name">notification-symbolic</property>
+                                <property name="label">Mute</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="block_button">
+                            <property name="visible" bind-source="model" bind-property="show-blocked" bind-flags="sync-create"/>
+                            <child>
+                              <object class="AdwButtonContent" id="block_button_content">
+                                <property name="icon-name">action-unavailable-symbolic</property>
+                                <property name="label">Block</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkScrolledWindow">
+                <property name="propagate-natural-height">True</property>
+                <child>
+                  <object class="AdwClamp">
+                    <child>
+                      <object class="GtkBox" id="about_box">
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">12</property>
+                        <property name="margin-end">12</property>
+                        <property name="margin-start">12</property>
+                        <property name="margin-top">12</property>
+                        <property name="margin-bottom">40</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+
+  <menu id="notification_split_button_menu_model">
+    <section>
+      <item>
+        <attribute name="label">Enable notifications</attribute>
+        <attribute name="action">notification.on</attribute>
+      </item>
+      <item>
+        <attribute name="label">Disable notifications</attribute>
+        <attribute name="action">notification.off</attribute>
+      </item>
+    </section>
+    <section>
+      <item>
+        <attribute name="label">Reset to default</attribute>
+        <attribute name="action">notification.default</attribute>
+      </item>
+    </section>
+  </menu>
+  <menu id="notification_menu_button_menu_model">
+    <section>
+      <item>
+        <attribute name="label">Notify for all messages</attribute>
+        <attribute name="action">notification.on</attribute>
+      </item>
+      <item>
+        <attribute name="label">Notify only for mentions</attribute>
+        <attribute name="action">notification.highlight</attribute>
+      </item>
+      <item>
+        <attribute name="label">Disable notifications</attribute>
+        <attribute name="action">notification.off</attribute>
+      </item>
+    </section>
+    <section>
+      <item>
+        <attribute name="label">Reset to default</attribute>
+        <attribute name="action">notification.default</attribute>
+      </item>
+    </section>
+  </menu>
+</interface>
\ No newline at end of file
diff --git a/main/data/gresource.xml b/main/data/gresource.xml
index 656defc4..503503c9 100644
--- a/main/data/gresource.xml
+++ b/main/data/gresource.xml
@@ -8,9 +8,9 @@
     <file>add_conversation/select_jid_fragment.ui</file>
     <file>call_widget.ui</file>
     <file>chat_input.ui</file>
-    <file>contact_details_dialog.ui</file>
     <file>conversation_content_view/item_metadata_header.ui</file>
     <file>conversation_content_view/view.ui</file>
+    <file>conversation_details.ui</file>
     <file>conversation_item_widget.ui</file>
     <file>conversation_list_titlebar.ui</file>
     <file>conversation_list_titlebar_csd.ui</file>
@@ -49,6 +49,9 @@
     <file>icons/scalable/status/dino-tick-symbolic.svg</file>
     <file>icons/scalable/status/dino-video-off-symbolic.svg</file>
     <file>icons/scalable/status/dino-video-symbolic.svg</file>
+    <file>join_room_dialog.ui</file>
+    <file>join_room_dialog1.ui</file>
+    <file>join_room_dialog2.ui</file>
     <file>manage_accounts/account_row.ui</file>
     <file>manage_accounts/add_account_dialog.ui</file>
     <file>manage_accounts/dialog.ui</file>
diff --git a/main/data/join_room_dialog.ui b/main/data/join_room_dialog.ui
new file mode 100644
index 00000000..725d30e9
--- /dev/null
+++ b/main/data/join_room_dialog.ui
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <object class="DinoUiViewModelJoinChannelDialog" id="model" />
+  <object class="AdwWindow" id="dialog">
+    <property name="default-width">500</property>
+    <property name="default-height">600</property>
+    <property name="modal">True</property>
+    <child>
+      <object class="GtkStack" id="left_stack">
+        <property name="visible-child-name" bind-source="model" bind-property="stack_page" />
+        <property name="hexpand">False</property>
+        <child>
+          <object class="GtkStackPage">
+            <property name="name">channel_selection</property>
+            <property name="child">
+              <object class="DinoUiJoinChannelChannelSelectionPage" id="channel_selection">
+                <binding name="model">
+                  <lookup name="channel_selection">
+                    model
+                  </lookup>
+                </binding>
+              </object>
+            </property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkStackPage">
+            <property name="name">confirmation</property>
+            <property name="child">
+              <object class="DinoUiJoinChannelConfirmationPage" id="confirmation">
+                <binding name="model">
+                  <lookup name="confirmation">
+                    model
+                  </lookup>
+                </binding>
+              </object>
+            </property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>
\ No newline at end of file
diff --git a/main/data/join_room_dialog1.ui b/main/data/join_room_dialog1.ui
new file mode 100644
index 00000000..91c024d3
--- /dev/null
+++ b/main/data/join_room_dialog1.ui
@@ -0,0 +1,160 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="DinoUiJoinChannelChannelSelectionPage">
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="AdwHeaderBar" id="header_bar">
+            <style>
+              <class name="flat"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">8</property>
+            <child>
+              <object class="GtkSearchEntry" id="search_entry">
+                <property name="placeholder-text" translatable="true">Search for channels or enter an XMPP address</property>
+                <property name="margin-start">16</property>
+                <property name="margin-end">16</property>
+<!--                <signal name="search-changed" object="list" handler="dino_ui_join_room_dialog_view_model_on_search_changed" />-->
+              </object>
+            </child>
+            <child>
+              <object class="GtkStack">
+                <binding name="visible-child-name">
+                  <lookup name="stack_page">
+                    <lookup name="model">DinoUiJoinChannelChannelSelectionPage</lookup>
+                  </lookup>
+                </binding>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">channels</property>
+                    <property name="child">
+                      <object class="GtkScrolledWindow">
+                        <property name="vexpand">True</property>
+                        <style>
+                          <class name="undershoot-top"/>
+                        </style>
+                        <child>
+<!--                  We put a box around this such that the card isn't rounded at the bottom but continues, because of interactions between ScrolledWindow and ListView-->
+<!--                          <object class="GtkBox">-->
+<!--                            <property name="orientation">vertical</property>-->
+<!--                            <child>-->
+                              <object class="GtkListView" id="bookmarks_list">
+                                <property name="margin-start">16</property>
+                                <property name="margin-end">16</property>
+                                <property name="margin-top">8</property>
+                                <property name="margin-bottom">16</property>
+                                <binding name="model">
+                                  <lookup name="bookmarks">
+                                    <lookup name="model">DinoUiJoinChannelChannelSelectionPage</lookup>
+                                  </lookup>
+                                </binding>
+                                <property name="single-click-activate">True</property>
+                                <property name="show-separators">True</property>
+                                <property name="valign">start</property>
+                                <style>
+                                  <class name="card"/>
+                                </style>
+                                <property name="factory">
+                                  <object class="GtkBuilderListItemFactory">
+                                    <property name="resource">/im/dino/Dino/room_list_row.ui</property>
+                                  </object>
+                                </property>
+                              </object>
+<!--                            </child>-->
+<!--                          </object>-->
+                        </child>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">direct-match</property>
+                    <property name="child">
+                      <object class="GtkListView" id="direct_match_list">
+                        <binding name="model">
+                          <lookup name="direct-match">
+                            <lookup name="model">DinoUiJoinChannelChannelSelectionPage</lookup>
+                          </lookup>
+                        </binding>
+                        <property name="single-click-activate">True</property>
+                        <property name="show-separators">True</property>
+                        <property name="valign">start</property>
+                        <property name="margin-start">16</property>
+                        <property name="margin-end">16</property>
+                        <property name="margin-top">8</property>
+                        <property name="margin-bottom">16</property>
+                        <style>
+                          <class name="card"/>
+                        </style>
+                        <property name="factory">
+                          <object class="GtkBuilderListItemFactory">
+                            <property name="resource">/im/dino/Dino/room_list_row.ui</property>
+                          </object>
+                        </property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">loading</property>
+                    <property name="child">
+                      <object class="GtkSpinner">
+                        <property name="spinning">True</property>
+                        <property name="valign">center</property>
+                        <property name="halign">center</property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">no-results</property>
+                    <property name="child">
+                      <object class="AdwStatusPage">
+                        <property name="icon-name">face-uncertain-symbolic</property>
+                        <property name="title" translatable="yes">No channels found</property>
+                        <property name="description" translatable="yes">None of your bookmarks matches your search and the XMPP address could not be resolved.</property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">no-channels</property>
+                    <property name="child">
+                      <object class="AdwStatusPage">
+                        <property name="icon-name">im.dino.Dino-symbolic</property>
+                        <property name="title" translatable="yes">No known channels</property>
+                        <property name="description" translatable="yes">Discover new channels or enter an XMPP address!</property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkStackPage">
+                    <property name="name">offline</property>
+                    <property name="child">
+                      <object class="AdwStatusPage">
+                        <property name="icon-name">im.dino.Dino-symbolic</property>
+                        <property name="title" translatable="yes">You are offline</property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
\ No newline at end of file
diff --git a/main/data/join_room_dialog2.ui b/main/data/join_room_dialog2.ui
new file mode 100644
index 00000000..1a30efc0
--- /dev/null
+++ b/main/data/join_room_dialog2.ui
@@ -0,0 +1,232 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="DinoUiJoinChannelConfirmationPage">
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="AdwHeaderBar" id="header_bar">
+            <child>
+              <object class="GtkButton" id="back_button">
+                <property name="icon-name">go-previous-symbolic</property>
+              </object>
+            </child>
+            <style>
+              <class name="flat"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="AdwToastOverlay" id="toast_overlay">
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">vertical</property>
+                <property name="valign">center</property>
+                <property name="vexpand">True</property>
+                <property name="spacing">6</property>
+                <property name="margin-top">20</property>
+                <property name="margin-start">20</property>
+                <property name="margin-end">20</property>
+                <property name="margin-bottom">20</property>
+                <child>
+                  <object class="DinoUiAvatarPicture" id="picture">
+                    <property name="height-request">100</property>
+                    <property name="width-request">100</property>
+                    <property name="margin-bottom">20</property>
+                    <property name="halign">center</property>
+                    <binding name="model">
+                      <lookup name="avatar">
+                        <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                      </lookup>
+                    </binding>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <binding name="label">
+                      <lookup name="name">
+                        <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                      </lookup>
+                    </binding>
+                    <attributes>
+                      <attribute name="scale" value="1.4"/>
+                    </attributes>
+                    <property name="ellipsize">end</property>
+                    <property name="hexpand">True</property>
+                    <property name="halign">center</property>
+                    <binding name="visible">
+                      <closure type="gboolean" function="dino_ui_view_model_join_channel_is_not_null">
+                        <lookup name="name">
+                          <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                        </lookup>
+                      </closure>
+                    </binding>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <binding name="label">
+                      <lookup name="jid">
+                        <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                      </lookup>
+                    </binding>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                    <property name="ellipsize">end</property>
+                    <property name="hexpand">True</property>
+                    <property name="halign">center</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <binding name="label">
+                      <lookup name="description">
+                        <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                      </lookup>
+                    </binding>
+                    <property name="wrap">True</property>
+                    <property name="halign">center</property>
+                    <binding name="visible">
+                      <closure type="gboolean" function="dino_ui_view_model_join_channel_is_not_null">
+                        <lookup name="description">
+                          <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                        </lookup>
+                      </closure>
+                    </binding>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">6</property>
+                    <property name="halign">center</property>
+                    <property name="orientation">horizontal</property>
+                    <binding name="visible">
+                      <closure type="gboolean" function="dino_ui_view_model_join_channel_is_not_null">
+                        <lookup name="members">
+                          <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                        </lookup>
+                      </closure>
+                    </binding>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="icon-name">system-users-symbolic</property>
+                        <property name="pixel-size">10</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <binding name="label">
+                          <lookup name="members">
+                            <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                          </lookup>
+                        </binding>
+                        <property name="ellipsize">end</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">2</property>
+                    <property name="margin-top">20</property>
+                    <property name="halign">center</property>
+                    <property name="orientation">horizontal</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label">Joining as</property>
+                        <property name="ellipsize">end</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton">
+                        <style>
+                          <class name="flat"/>
+                          <class name="dino-joining-as"/>
+                        </style>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">4</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <binding name="label">
+                                  <lookup name="nick">
+                                    <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                                  </lookup>
+                                </binding>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="icon-name">document-edit-symbolic</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="action-name">win.join</property>
+                    <!--                <binding name="sensitive">-->
+                    <!--                  <lookup name="spinner-active">-->
+                    <!--                    <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>-->
+                    <!--                  </lookup>-->
+                    <!--                </binding>-->
+                    <property name="margin-top">20</property>
+                    <property name="margin-bottom">26</property>
+                    <property name="halign">center</property>
+                    <style>
+                      <class name="pill"/>
+                      <class name="suggested-action"/>
+                    </style>
+                    <child>
+                      <object class="GtkBox">
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="1">Join</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkRevealer">
+                            <property name="transition-type">slide-left</property>
+                            <property name="transition-duration">200</property>
+                            <binding name="reveal-child">
+                              <lookup name="spinner-active">
+                                <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                              </lookup>
+                            </binding>
+                            <child>
+                              <object class="GtkSpinner">
+                                <binding name="visible">
+                                  <lookup name="spinner-active">
+                                    <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                                  </lookup>
+                                </binding>
+                                <binding name="spinning">
+                                  <lookup name="spinner-active">
+                                    <lookup name="model">DinoUiJoinChannelConfirmationPage</lookup>
+                                  </lookup>
+                                </binding>
+                                <property name="margin-start">10</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
\ No newline at end of file
diff --git a/main/data/style.css b/main/data/style.css
index af1c58fa..5fe3beae 100644
--- a/main/data/style.css
+++ b/main/data/style.css
@@ -3,6 +3,8 @@
  * It provides sane defaults for things that are very Dino-specific.
  */
 
+@import url("conversation_details.css");
+
 statuspage {
     opacity: 0.5;
 }