Redesign and rewrite accounts and settings dialog into a combined one

9 files changed, 277 insertions, 84 deletions

diff --git a/main/data/account_picker_row.ui b/main/data/account_picker_row.ui
new file mode 100644
index 00000000..a67f7b3b
--- /dev/null
+++ b/main/data/account_picker_row.ui
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="GtkListItem">
+    <property name="child">
+      <object class="GtkBox">
+        <property name="orientation">horizontal</property>
+        <property name="spacing">6</property>
+        <child>
+          <object class="DinoUiAvatarPicture">
+            <property name="height-request">25</property>
+            <property name="width-request">25</property>
+            <binding name="model">
+              <lookup name="avatar-model" type="DinoUiViewModelAccountDetails">
+                <lookup name="item">GtkListItem</lookup>
+              </lookup>
+            </binding>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="xalign">0</property>
+            <binding name="label">
+              <lookup name="bare_jid" type="DinoUiViewModelAccountDetails">
+                <lookup name="item">GtkListItem</lookup>
+              </lookup>
+            </binding>
+          </object>
+        </child>
+      </object>
+    </property>
+  </template>
+</interface>
\ No newline at end of file
diff --git a/main/data/gresource.xml b/main/data/gresource.xml
index 282838e0..f436ce68 100644
--- a/main/data/gresource.xml
+++ b/main/data/gresource.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/im/dino/Dino">
+    <file>account_picker_row.ui</file>
     <file>add_conversation/add_contact_dialog.ui</file>
     <file>add_conversation/add_groupchat_dialog.ui</file>
     <file>add_conversation/conference_details_fragment.ui</file>
@@ -66,6 +67,9 @@
     <file>occupant_list.ui</file>
     <file>occupant_list_item.ui</file>
     <file>quote.ui</file>
+    <file>preferences_window.ui</file>
+    <file>preferences_window_account.ui</file>
+    <file>preferences_window_general.ui</file>
     <file>search_autocomplete.ui</file>
     <file>settings_dialog.ui</file>
     <file>style-dark.css</file>
diff --git a/main/data/menu_app.ui b/main/data/menu_app.ui
index bb33ff65..9b85634d 100644
--- a/main/data/menu_app.ui
+++ b/main/data/menu_app.ui
@@ -3,13 +3,7 @@
     <menu id="menu_app">
         <section>
             <item>
-                <attribute name="action">app.accounts</attribute>
-                <attribute name="label" translatable="yes">Accounts</attribute>
-            </item>
-        </section>
-        <section>
-            <item>
-                <attribute name="action">app.settings</attribute>
+                <attribute name="action">app.preferences</attribute>
                 <attribute name="label" translatable="yes">Preferences</attribute>
             </item>
             <item>
diff --git a/main/data/preferences_window.ui b/main/data/preferences_window.ui
new file mode 100644
index 00000000..d262dd76
--- /dev/null
+++ b/main/data/preferences_window.ui
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <object class="DinoUiViewModelPreferencesWindow" id="model" />
+  <template class="DinoUiPreferencesWindow">
+    <property name="default-width">500</property>
+    <property name="default-height">600</property>
+    <property name="modal">True</property>
+    <child>
+      <object class="DinoUiPreferencesWindowAccounts" id="accounts_page">
+        <property name="title">Accounts</property>
+        <property name="name">accounts</property>
+        <property name="icon-name">system-users-symbolic</property>
+      </object>
+    </child>
+    <child>
+      <object class="DinoUiPreferencesWindowEncryption" id="encryption_page">
+        <property name="title">Encryption</property>
+        <property name="name">encryption</property>
+        <property name="icon-name">changes-prevent-symbolic</property>
+      </object>
+    </child>
+    <child>
+      <object class="DinoUiGeneralPreferencesPage" id="general_page">
+        <property name="title">General</property>
+        <property name="name">general</property>
+        <property name="icon-name">preferences-system-symbolic</property>
+        <property name="model" bind-source="model" bind-property="general-page" bind-flags="sync-create" />
+      </object>
+    </child>
+  </template>
+</interface>
\ No newline at end of file
diff --git a/main/data/preferences_window_account.ui b/main/data/preferences_window_account.ui
new file mode 100644
index 00000000..4280422d
--- /dev/null
+++ b/main/data/preferences_window_account.ui
@@ -0,0 +1,137 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="DinoUiAccountPreferencesSubpage">
+    <property name="orientation">vertical</property>
+    <child>
+      <object class="AdwHeaderBar">
+        <style>
+          <class name="flat"/>
+        </style>
+        <property name="show-title">False</property>
+        <child>
+          <object class="GtkButton" id="back_button">
+            <property name="icon-name">go-previous-symbolic</property>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkScrolledWindow">
+        <property name="vexpand">True</property>
+        <property name="hexpand">True</property>
+        <child>
+          <object class="AdwClamp">
+            <child>
+              <object class="GtkBox">
+                <property name="margin-top">24</property>
+                <property name="margin-bottom">24</property>
+                <property name="margin-start">12</property>
+                <property name="margin-end">12</property>
+                <property name="spacing">24</property>
+                <property name="orientation">vertical</property>
+                <child>
+                  <object class="GtkOverlay">
+                    <property name="halign">center</property>
+                    <property name="child">
+                      <object class="DinoUiAvatarPicture" id="avatar">
+                        <property name="height-request">144</property>
+                        <property name="width-request">144</property>
+                      </object>
+                    </property>
+                    <child type="overlay">
+                      <object class="GtkBox" id="avatar_menu_box">
+                        <property name="opacity">0.9</property>
+                        <property name="margin-end">6</property>
+                        <property name="margin-bottom">6</property>
+                        <property name="halign">end</property>
+                        <property name="valign">end</property>
+                        <style>
+                          <class name="card"/>
+                          <class name="toolbar"/>
+                          <class name="overlay-toolbar"/>
+                        </style>
+                        <child>
+                          <object class="GtkButton" id="edit_avatar_button">
+                            <property name="icon-name">document-edit-symbolic</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="remove_avatar_button">
+                            <property name="icon-name">user-trash-symbolic</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="AdwPreferencesGroup">
+                    <child>
+                      <object class="AdwActionRow" id="xmpp_address">
+                        <property name="title" translatable="yes">XMPP Address</property>
+                        <style>
+                          <class name="property"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="AdwActionRow" id="local_alias">
+                        <property name="title" translatable="yes">Local alias</property>
+                        <child type="suffix">
+                          <object class="GtkEntry" id="local_alias_entry">
+                            <property name="valign">center</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="AdwActionRow" id="connection_status">
+                        <property name="title" translatable="yes">Connection status</property>
+                        <style>
+                          <class name="property"/>
+                        </style>
+                        <child type="suffix">
+                          <object class="GtkButton" id="enter_password_button">
+                            <property name="label">Enter password</property>
+                            <property name="valign">center</property>
+                            <property name="visible">False</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkBox" id="button_container">
+                    <property name="halign">center</property>
+                    <property name="spacing">24</property>
+                    <child>
+                      <object class="GtkButton" id="disable_account_button">
+                        <property name="label" translatable="1">Disable account</property>
+                        <property name="halign">center</property>
+                        <style>
+                          <class name="pill"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="remove_account_button">
+                        <property name="label" translatable="1">Remove account</property>
+                        <property name="halign">center</property>
+                        <style>
+                          <class name="pill"/>
+                          <class name="destructive-action"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
\ No newline at end of file
diff --git a/main/data/preferences_window_general.ui b/main/data/preferences_window_general.ui
new file mode 100644
index 00000000..33d1a2c9
--- /dev/null
+++ b/main/data/preferences_window_general.ui
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="DinoUiGeneralPreferencesPage" parent="AdwPreferencesPage">
+    <child>
+      <object class="AdwPreferencesGroup">
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Send _Typing Notifications</property>
+            <property name="use-underline">True</property>
+            <property name="activatable-widget">typing_switch</property>
+            <child type="suffix">
+              <object class="GtkSwitch" id="typing_switch">
+<!--                <property name="active" bind-source="DinoUiGeneralPreferencesPage" bind-property="send-typing" bind-flags="sync-create|bidirectional" />-->
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Send _Read Receipts</property>
+            <property name="use-underline">True</property>
+            <property name="activatable-widget">marker_switch</property>
+            <child type="suffix">
+              <object class="GtkSwitch" id="marker_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="AdwPreferencesGroup">
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">_Notifications</property>
+            <property name="subtitle" translatable="yes">Notify when a new message arrives</property>
+            <property name="use-underline">True</property>
+            <property name="activatable-widget">notification_switch</property>
+            <child type="suffix">
+              <object class="GtkSwitch" id="notification_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="AdwPreferencesGroup">
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">_Convert Smileys to Emoji</property>
+            <property name="use-underline">True</property>
+            <property name="activatable-widget">emoji_switch</property>
+            <child type="suffix">
+              <object class="GtkSwitch" id="emoji_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/main/data/settings_dialog.ui b/main/data/settings_dialog.ui
deleted file mode 100644
index a8b24135..00000000
--- a/main/data/settings_dialog.ui
+++ /dev/null
@@ -1,74 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface>
-    <template class="DinoUiSettingsDialog" parent="AdwPreferencesWindow">
-        <property name="default-width">500</property>
-        <property name="default-height">360</property>
-        <property name="modal">True</property>
-        <property name="search-enabled">False</property>
-        <child>
-            <object class="AdwPreferencesPage">
-                <child>
-                    <object class="AdwPreferencesGroup">
-                        <child>
-                            <object class="AdwActionRow">
-                                <property name="title" translatable="yes">Send _Typing Notifications</property>
-                                <property name="use-underline">True</property>
-                                <property name="activatable-widget">typing_switch</property>
-                                <child type="suffix">
-                                    <object class="GtkSwitch" id="typing_switch">
-                                        <property name="valign">center</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                        <child>
-                            <object class="AdwActionRow">
-                                <property name="title" translatable="yes">Send _Read Receipts</property>
-                                <property name="use-underline">True</property>
-                                <property name="activatable-widget">marker_switch</property>
-                                <child type="suffix">
-                                    <object class="GtkSwitch" id="marker_switch">
-                                        <property name="valign">center</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="AdwPreferencesGroup">
-                        <child>
-                            <object class="AdwActionRow">
-                                <property name="title" translatable="yes">_Notifications</property>
-                                <property name="subtitle" translatable="yes">Notify when a new message arrives</property>
-                                <property name="use-underline">True</property>
-                                <property name="activatable-widget">notification_switch</property>
-                                <child type="suffix">
-                                    <object class="GtkSwitch" id="notification_switch">
-                                        <property name="valign">center</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="AdwPreferencesGroup">
-                        <child>
-                            <object class="AdwActionRow">
-                                <property name="title" translatable="yes">_Convert Smileys to Emoji</property>
-                                <property name="use-underline">True</property>
-                                <property name="activatable-widget">emoji_switch</property>
-                                <child type="suffix">
-                                    <object class="GtkSwitch" id="emoji_switch">
-                                        <property name="valign">center</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-            </object>
-        </child>
-    </template>
-</interface>
diff --git a/main/data/style-dark.css b/main/data/style-dark.css
index 3bd0add0..791ae9c8 100644
--- a/main/data/style-dark.css
+++ b/main/data/style-dark.css
@@ -1,3 +1,3 @@
-.dino-main .overlay-toolbar {
+.overlay-toolbar {
     background-color: shade(@view_bg_color, 1.5);
 }
\ No newline at end of file
diff --git a/main/data/style.css b/main/data/style.css
index a7a1d8df..5a70ba83 100644
--- a/main/data/style.css
+++ b/main/data/style.css
@@ -127,13 +127,13 @@ picture.avatar {
 
 /* Overlay Toolbar */
 
-.dino-main .overlay-toolbar {
+.overlay-toolbar {
     padding: 2px;
     border-radius: 6px;
     border-spacing: 0;
 }
 
-.dino-main .overlay-toolbar > * {
+.overlay-toolbar > * {
     margin-top: 0;
     margin-bottom: 0;
 }