Implement initial highlighting

data/inscriptions.gresource.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
-  <gresource prefix="/io.github.elly_code.inscriptions/">
+  <gresource prefix="/io/github/elly_code/inscriptions/">
     <file alias="Application.css">Application.css</file>
   </gresource>
 </gresources>

data/inscriptions.gschema.xml

@@ -8,7 +8,7 @@
     <value value='4' nick="less"/>
   </enum>
 
-  <schema path="/io.github.elly_code.inscriptions/" id="io.github.elly_code.inscriptions">
+  <schema path="/io/github/elly_code/inscriptions/" id="io.github.elly_code.inscriptions">
     <key name="window-height" type="i">
       <default>320</default>
       <summary>Most recent window height</summary>
@@ -64,5 +64,10 @@
       <summary>Max API usage</summary>
       <description>How many characters can be translated</description>
     </key>
+    <key name="highlight" type="b">
+      <default>false</default>
+      <summary>Whether to highlight both source and target</summary>
+      <description>Highlights alternating colours on both source and target in the TextView</description>
+    </key>
   </schema>
 </schemalist>

data/inscriptions.metainfo.xml.in

@@ -16,22 +16,22 @@
     <p>Some points of note:</p>
       <ul>
             <li>Nimble: Paste your DeepL api key (Whichever the plan), and here you go!</li>
-            <li>Out of your way: Remembers context, formality, languages, auto or manual, ...</li>
-            <li>Handy: No ten thousands menus or awkward dialogs. Everything is a click away</li>
-            <li>Comprehensive: No scary angry dialogs - If something goes wrong, explain nicely, </li>
+            <li>Thoughtful: Just what you need, out of your way and a click away</li>
+            <li>Comprehensive: No scary angry dialogs - If something goes wrong, explain nicely</li>
+            <li>Lean: Limiting resource usage and internet communications to the minimum</li>
             <li>Supported languages: All those available via DeepL API!</li>
       </ul>
     <p>If you like this app please do not hesitate to donate to encourage its development!</p>
   </description>
 
   <screenshots>
     <screenshot type="default" environment="pantheon">
-      <caption>Main window</caption>
-      <image>https://raw.githubusercontent.com/elly_code/inscriptions/@version@/data/screenshots/window-light.png</image>
+      <caption>Main window, showcasing a translation with the highlighting feature</caption>
+      <image>https://raw.githubusercontent.com/elly_code/inscriptions/1.0.0/data/screenshots/window-light.png</image>
     </screenshot>
     <screenshot environment="pantheon:dark">
-      <caption>Main window with dark theme</caption>
-      <image>https://raw.githubusercontent.com/elly_code/inscriptions/@version@/data/screenshots/window-dark.png</image>
+      <caption>Main window with dark theme, showcasing a translation with the highlighting feature</caption>
+      <image>https://raw.githubusercontent.com/elly_code/inscriptions/1.0.0/data/screenshots/window-dark.png</image>
     </screenshot>
   </screenshots>
 

meson.build

@@ -49,6 +49,7 @@ executable(
   'src' / 'Constants.vala',
   'src' / 'Enums' / 'Formality.vala',
   'src' / 'Enums' / 'StatusCode.vala',
+  'src' / 'Enums' / 'HighlightColor.vala',
   'src' / 'Objects' / 'Lang.vala',
   'src' / 'Objects' / 'DDModel.vala',
 
@@ -66,6 +67,7 @@ executable(
   'src' / 'Widgets' / 'RetryButton.vala',
   'src' / 'Widgets' / 'SendCodeButton.vala',
   'src' / 'Widgets' / 'ErrorBonusBox.vala',
+  'src' / 'Widgets' / 'TextView.vala',
 
   'src' / 'Views' / 'TranslationView.vala',
   'src' / 'Views' / 'ErrorView.vala',

po/POTFILES

@@ -13,6 +13,7 @@ src/Widgets/SourcePane.vala
 src/Widgets/TargetPane.vala
 src/Widgets/RetryButton.vala
 src/Widgets/SendCodeButton.vala
+src/Widgets/TextView.vala
 src/Backend/DeepL.vala
 src/Constants.vala
 src/Application.vala

src/Application.vala

@@ -51,11 +51,12 @@ public class Inscriptions.Application : Gtk.Application {
 
         // Window
         set_accels_for_action ("window.menu", {"<Control>m"});
-        set_accels_for_action ("window.switch_languages", {"<Control>i"});
-        set_accels_for_action ("window.toggle_messages", {"<Control><Shift>m"});
+        set_accels_for_action ("window.switch-languages", {"<Control>i"});
+        set_accels_for_action ("window.toggle-messages", {"<Control><Shift>m"});
 
         // Translation view
-        set_accels_for_action ("window.toggle_orientation", {"<Control><Shift>o"});
+        set_accels_for_action ("window.toggle-orientation", {"<Control><Shift>o"});
+        set_accels_for_action ("window.toggle-highlight", {"<Control>h"});
         set_accels_for_action ("window.translate", {"<Control>t"});
         set_accels_for_action ("window.clear_text", {"<Control>l"});
 
@@ -78,7 +79,7 @@ public class Inscriptions.Application : Gtk.Application {
         });
 
         var provider = new Gtk.CssProvider ();
-        provider.load_from_resource ("/io.github.elly_code.inscriptions/Application.css");
+        provider.load_from_resource ("/io/github/elly_code/inscriptions/Application.css");
 
         Gtk.StyleContext.add_provider_for_display (
             Gdk.Display.get_default (),

src/Constants.vala

@@ -6,6 +6,14 @@
 
 namespace Inscriptions {
 
+	public const int SPACING_TOOLBAR_HEADER = 5;
+	public const int SPACING_TOOLBAR_MINI = 3;
+
+	public const int MARGIN_MENU_HALF = 3;
+	public const int MARGIN_MENU_STANDARD = 6;
+	public const int MARGIN_MENU_BIG = 12;
+	public const int MARGIN_MENU_BIGGER = 24;
+
 	// https://developers.deepl.com/docs/getting-started/supported-languages
 	// TODO: In the far future people might declare their own in a backend file
 	public Lang[] SourceLang () {

src/Enums/HighlightColor.vala

@@ -0,0 +1,114 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText:  2025 Stella & Charlie (teamcons.carrd.co)
+ */
+
+/**
+ * 
+ */
+public enum Inscriptions.HighlightColor {
+    BLUEBERRY,
+    MINT,
+    LIME,
+    BANANA,
+    ORANGE,
+    STRAWBERRY,
+    BUBBLEGUM,
+    GRAPE,
+    COCOA,
+    SLATE,
+    LATTE;
+
+    /*************************************************/
+    /**
+    * for use in CSS. Ex: @BLUEBERRY_500
+    */
+    public string to_string () {
+        switch (this) {
+            case BLUEBERRY:     return "blueberry";
+            case MINT:          return "mint";
+            case LIME:          return "lime";
+            case BANANA:        return "banana";
+            case ORANGE:        return "orange";
+            case STRAWBERRY:    return "strawberry";
+            case BUBBLEGUM:     return "bubblegum";
+            case GRAPE:         return "grape";
+            case COCOA:         return "cocoa";
+            case SLATE:         return "slate";
+            case LATTE:         return "latte";
+            default: return "BLUEBERRY";
+        }
+    }
+
+
+    /*************************************************/
+    /**
+    * for use in CSS. Ex: @BLUEBERRY_500
+    */
+    public string to_hex_dark () {
+        switch (this) {
+            case BLUEBERRY:     return "#002e99";
+            case MINT:          return "#007367";
+            case LIME:          return "#206b00";
+            case BANANA:        return "#ad5f00";
+            case ORANGE:        return "#a62100";
+            case STRAWBERRY:    return "#7a0000";
+            case BUBBLEGUM:     return "#910e38";
+            case GRAPE:         return "#452981";
+            case COCOA:         return "#3d211b";
+            case SLATE:         return "#0e141f";
+            case LATTE:         return "#804b00";
+            default: return "#002e99";
+        }
+    }
+
+
+    /*************************************************/
+    /**
+    * for use in CSS. Ex: @BLUEBERRY_500
+    */
+    public string to_hex_light () {
+        switch (this) {
+            case BLUEBERRY:     return "#8cd5ff";
+            case MINT:          return "#89ffdd";
+            case LIME:          return "#d1ff82";
+            case BANANA:        return "#fff394";
+            case ORANGE:        return "#ffc27d";
+            case STRAWBERRY:    return "#ff8c82";
+            case BUBBLEGUM:     return "#fe9ab8";
+            case GRAPE:         return "#e4c6fa";
+            case COCOA:         return "#a3907c";
+            case SLATE:         return "#95a3ab";
+            case LATTE:         return "#efdfc4";
+            default: return "#8cd5ff";
+        }
+    }
+
+    /*************************************************/
+    /**
+    * for use in CSS. Ex: @BLUEBERRY_500
+    */
+    public Gtk.TextTag to_tag_dark () {
+        var tag = new Gtk.TextTag (this.to_string () + "-dark");
+        Gdk.RGBA rgba_color = Gdk.RGBA ();
+        rgba_color.parse (this.to_hex_dark ());
+        tag.background_rgba = rgba_color;
+        return tag;
+    }
+
+    public Gtk.TextTag to_tag_light () {
+        var tag = new Gtk.TextTag (this.to_string () + "-light");
+        Gdk.RGBA rgba_color = Gdk.RGBA ();
+        rgba_color.parse (this.to_hex_light ());
+        tag.background_rgba = rgba_color;
+        return tag;
+    }
+
+    /*************************************************/
+    /**
+    * convenient list of all supported themes
+    */
+    public static HighlightColor[] all () {
+        return {BLUEBERRY, MINT, LIME, BANANA, ORANGE, STRAWBERRY, BUBBLEGUM, GRAPE, COCOA, SLATE, LATTE};
+    }
+}

src/Views/TranslationView.vala

@@ -18,13 +18,15 @@ public class Inscriptions.TranslationView : Gtk.Box {
 
     public SimpleActionGroup actions { get; construct; }
     public const string ACTION_PREFIX = "translation-view.";
-    public const string ACTION_TOGGLE_ORIENTATION = "toggle_orientation";
+    public const string ACTION_TOGGLE_ORIENTATION = "toggle-orientation";
+    public const string ACTION_TOGGLE_HIGHLIGHT = "toggle-highlight";
     public const string ACTION_TRANSLATE = "translate";
     public const string ACTION_CLEAR_TEXT = "clear_text";
 
     public static Gee.MultiMap<string, string> action_accelerators = new Gee.HashMultiMap<string, string> ();
     private const GLib.ActionEntry[] ACTION_ENTRIES = {
         { ACTION_TOGGLE_ORIENTATION, toggle_orientation},
+        { ACTION_TOGGLE_HIGHLIGHT, toggle_highlight},
         { ACTION_TRANSLATE, translate_now},
         { ACTION_CLEAR_TEXT, action_clear_text}
     };
@@ -180,6 +182,13 @@ public class Inscriptions.TranslationView : Gtk.Box {
         }
     }
 
+    public void toggle_highlight () {
+        Application.settings.set_boolean (
+            "highlight",
+            ! Application.settings.get_boolean ("highlight")
+        );
+    }
+
     public void action_clear_text () {
         source_pane.clear ();
         target_pane.clear ();

src/Widgets/Pane.vala

@@ -14,7 +14,7 @@ public class Inscriptions.Pane : Gtk.Box {
     public Gtk.Revealer dropdown_revealer;
     public Gtk.DropDown dropdown;
     public Inscriptions.Lang selected;
-    public Gtk.TextView textview;
+    public Inscriptions.TextView textview;
     public Gtk.ScrolledWindow scrolledwindow;
     public Gtk.ActionBar actionbar;
 
@@ -58,23 +58,9 @@ public class Inscriptions.Pane : Gtk.Box {
         };
 		dropdown.notify["selected-item"].connect(on_selected_language);
 
-        dropdown_revealer = new Gtk.Revealer () {
-            child = dropdown,
-            reveal_child = true,
-            transition_type = Gtk.RevealerTransitionType.SLIDE_DOWN
-        };
 
         /* ---------------- VIEW ---------------- */
-        textview = new Gtk.TextView () {
-            hexpand = true,
-            vexpand = true,
-            valign = Gtk.Align.FILL,
-            halign = Gtk.Align.FILL,
-            left_margin = 12,
-            right_margin = 12,
-            top_margin = 6,
-            bottom_margin = 6
-        };
+        textview = new Inscriptions.TextView ();
         textview.set_wrap_mode (Gtk.WrapMode.WORD_CHAR);
 
         scrolledwindow = new Gtk.ScrolledWindow () {
@@ -124,7 +110,7 @@ public class Inscriptions.Pane : Gtk.Box {
         };
         stack.add_child (main_view);
 
-        append (dropdown_revealer);
+        append (dropdown);
         append (stack);
     }