feat: add custom css field to preferences

5 files changed, 69 insertions, 5 deletions

diff --git a/libdino/src/entity/settings.vala b/libdino/src/entity/settings.vala
index 1e78c2ba..d03bb39f 100644
--- a/libdino/src/entity/settings.vala
+++ b/libdino/src/entity/settings.vala
@@ -23,6 +23,7 @@ public class Settings : Object {
         convert_utf8_smileys_ = col_to_bool_or_default("convert_utf8_smileys", true);
         check_spelling = col_to_bool_or_default("check_spelling", true);
         avatar_roundness_ = col_to_int_or_default("avatar_roundness", 20).clamp(0, 100);
+        custom_css_ = db.settings.select({db.settings.value}).with(db.settings.key, "=", "custom_css")[db.settings.value] ?? "";
     }
 
     private bool col_to_bool_or_default(string key, bool def) {
@@ -206,6 +207,18 @@ public class Settings : Object {
         }
     }
 
+    private string custom_css_;
+    public string custom_css {
+        get { return custom_css_; }
+        set {
+            db.settings.upsert()
+                    .value(db.settings.key, "custom_css", true)
+                    .value(db.settings.value, value)
+                    .perform();
+            custom_css_ = value;
+        }
+    }
+
     public Encryption get_default_encryption(Account account) {
         string? setting = db.account_settings.get_value(account.id, "default-encryption");
         if (setting != null) {
diff --git a/main/data/preferences_window/tweaks_preferences_page.ui b/main/data/preferences_window/tweaks_preferences_page.ui
index ae9b26e8..6d011b46 100644
--- a/main/data/preferences_window/tweaks_preferences_page.ui
+++ b/main/data/preferences_window/tweaks_preferences_page.ui
@@ -7,6 +7,7 @@
     <property name="step-increment">1</property>
     <property name="page-increment">10</property>
   </object>
+  <object class="GtkTextBuffer" id="custom_css_buffer"/>
   <template class="DinoUiTweaksPreferencesPage" parent="AdwPreferencesPage">
     <child>
       <object class="AdwPreferencesGroup">
@@ -23,5 +24,32 @@
         </child>
       </object>
     </child>
+    <child>
+      <object class="AdwPreferencesGroup">
+        <property name="title" translatable="yes">Custom CSS</property>
+        <property name="description" translatable="yes">Apply custom styles to the application</property>
+        <child>
+          <object class="GtkScrolledWindow">
+            <property name="height-request">180</property>
+            <property name="has-frame">True</property>
+            <property name="child">
+              <object class="GtkTextView">
+                <property name="buffer">custom_css_buffer</property>
+                <property name="monospace">True</property>
+                <property name="wrap-mode">word-char</property>
+                <property name="top-margin">12</property>
+                <property name="bottom-margin">12</property>
+                <property name="left-margin">12</property>
+                <property name="right-margin">12</property>
+                <property name="accepts-tab">True</property>
+                <accessibility>
+                  <property name="label" translatable="yes">Custom CSS</property>
+                </accessibility>
+              </object>
+            </property>
+          </object>
+        </child>
+      </object>
+    </child>
   </template>
 </interface>
diff --git a/main/src/ui/application.vala b/main/src/ui/application.vala
index ea4f578c..03128964 100644
--- a/main/src/ui/application.vala
+++ b/main/src/ui/application.vala
@@ -16,6 +16,7 @@ public class Dino.Ui.Application : Adw.Application, Dino.Application {
     public MainWindowController controller;
     private LauncherBadge? launcher_badge;
     private StatusNotifierItem? status_notifier_item;
+    private CssProvider custom_css_provider;
 
     public Database db { get; set; }
     public Dino.Entities.Settings settings { get; set; }
@@ -33,6 +34,13 @@ public class Dino.Ui.Application : Adw.Application, Dino.Application {
     public Application() throws Error {
         Object(application_id: "im.dino.Dino", flags: ApplicationFlags.HANDLES_OPEN);
         init();
+        custom_css_provider = new CssProvider();
+        settings.notify["custom-css"].connect(update_custom_css);
+        update_custom_css();
+        Gdk.Display? display = Gdk.Display.get_default();
+        if (display != null) {
+            StyleContext.add_provider_for_display(display, custom_css_provider, STYLE_PROVIDER_PRIORITY_USER);
+        }
         Environment.set_application_name("Dino");
         Window.set_default_icon_name("im.dino.Dino");
 
@@ -105,6 +113,14 @@ public class Dino.Ui.Application : Adw.Application, Dino.Application {
         });
     }
 
+    private void update_custom_css() {
+#if GTK_4_12
+        custom_css_provider.load_from_string(settings.custom_css);
+#else
+        custom_css_provider.load_from_data(settings.custom_css.data);
+#endif
+    }
+
     public void handle_uri(string jid, string query, Gee.Map<string, string> options) {
         switch (query) {
             case "join":
diff --git a/main/src/view_model/preferences_dialog.vala b/main/src/view_model/preferences_dialog.vala
index 09e22187..6bc8d56f 100644
--- a/main/src/view_model/preferences_dialog.vala
+++ b/main/src/view_model/preferences_dialog.vala
@@ -126,6 +126,7 @@ public class Dino.Ui.ViewModel.PreferencesDialog : Object {
     private void bind_tweaks_page() {
         var settings = Dino.Application.get_default().settings;
         settings.bind_property("avatar-roundness", tweaks_page, "avatar-roundness", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL);
+        settings.bind_property("custom-css", tweaks_page, "custom-css", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL);
     }
 }
 
diff --git a/main/src/windows/preferences_window/tweaks_preferences_page.vala b/main/src/windows/preferences_window/tweaks_preferences_page.vala
index 6da43348..906ca1ae 100644
--- a/main/src/windows/preferences_window/tweaks_preferences_page.vala
+++ b/main/src/windows/preferences_window/tweaks_preferences_page.vala
@@ -2,26 +2,32 @@ using Gtk;
 
 public class Dino.Ui.ViewModel.TweaksPreferencesPage : Object {
     public int avatar_roundness { get; set; }
+    public string custom_css { get; set; default = ""; }
 }
 
 [GtkTemplate (ui = "/im/dino/Dino/preferences_window/tweaks_preferences_page.ui")]
 public class Dino.Ui.TweaksPreferencesPage : Adw.PreferencesPage {
     [GtkChild] private unowned Adw.SpinRow avatar_roundness_row;
+    [GtkChild] private unowned Gtk.TextBuffer custom_css_buffer;
 
     public ViewModel.TweaksPreferencesPage model { get; set; default = new ViewModel.TweaksPreferencesPage(); }
-    private Binding? avatar_roundness_binding;
+    private Binding[] model_bindings = new Binding[0];
 
     construct {
         this.notify["model"].connect(on_model_changed);
     }
 
     private void on_model_changed() {
-        if (avatar_roundness_binding != null) {
-            avatar_roundness_binding.unbind();
-            avatar_roundness_binding = null;
+        foreach (Binding binding in model_bindings) {
+            binding.unbind();
         }
         if (model != null) {
-            avatar_roundness_binding = model.bind_property("avatar-roundness", avatar_roundness_row, "value", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL);
+            model_bindings = new Binding[] {
+                model.bind_property("avatar-roundness", avatar_roundness_row, "value", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL),
+                model.bind_property("custom-css", custom_css_buffer, "text", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL)
+            };
+        } else {
+            model_bindings = new Binding[0];
         }
     }
 }