From f20754f041f15e37d29053511150dab73e4f6c74 Mon Sep 17 00:00:00 2001
From: Hugo Olabera <hugolabe@gmail.com>
Date: Wed, 13 Dec 2023 09:25:24 +0100
Subject: [PATCH] Languages window UI tweaks

---
 data/ui/languages-row.ui |   8 +--
 data/ui/languages.ui     | 108 +++++++++++++++++++++------------------
 src/languages.py         |   2 +
 3 files changed, 65 insertions(+), 53 deletions(-)

diff --git a/data/ui/languages-row.ui b/data/ui/languages-row.ui
index fb0e893..4696562 100644
--- a/data/ui/languages-row.ui
+++ b/data/ui/languages-row.ui
@@ -12,13 +12,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
     <!-- Language row box -->
     <child>
       <object class="GtkBox">
-        <property name="margin_top">2</property>
-        <property name="margin_bottom">2</property>
+        <property name="margin_top">3</property>
+        <property name="margin_bottom">3</property>
 
         <!-- Language name label -->
         <child>
           <object class="GtkLabel" id="name_label">
-            <property name="margin-start">12</property>
+            <property name="margin-start">6</property>
             <property name="margin-end">6</property>
             <property name="halign">start</property>
             <property name="valign">center</property>
@@ -40,7 +40,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
         <child>
           <object class="GtkCheckButton" id="lang_check">
             <property name="margin-start">12</property>
-            <property name="margin-end">18</property>
+            <property name="margin-end">6</property>
             <property name="halign">end</property>
             <property name="valign">center</property>
           </object>
diff --git a/data/ui/languages.ui b/data/ui/languages.ui
index 2b5996a..69e4738 100644
--- a/data/ui/languages.ui
+++ b/data/ui/languages.ui
@@ -9,79 +9,89 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <interface>
   <template class="LanguagesWindow" parent="AdwWindow">
     <property name="title" translatable="yes">Pick your Languages</property>
-    <property name="default-height">560</property>
+    <property name="default-height">475</property>
     <property name="default-width">420</property>
     <property name="modal">true</property>
 
     <!-- Window content -->
     <property name="content">
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
-
-        <!-- Header -->
-        <child>
-          <object class="GtkHeaderBar">
-            <style>
-              <class name="flat"/>
-            </style>
+      <object class="AdwToolbarView">
+
+        <!-- Headerbar -->
+        <child type="top">
+          <object class="AdwHeaderBar">
+
+            <!-- Search languages button -->
+            <child type="start">
+              <object class="GtkToggleButton" id="search_button">
+                <property name="icon-name">system-search-symbolic</property>
+                <property name="tooltip-text" translatable="yes">Filter Languages</property>
+                <property name="active" bind-source="search_bar" bind-property="search-mode-enabled" bind-flags="sync-create"/>
+              </object>
+            </child>
+
           </object>
         </child>
 
-        <!-- Content box -->
-        <child>
-          <object class="GtkBox">
-            <property name="orientation">vertical</property>
-            <property name="margin-start">12</property>
-            <property name="margin-end">12</property>
-            <property name="margin-bottom">12</property>
-            <property name="spacing">12</property>
+        <!-- Filter entry -->
+        <child type="top">
+          <object class="GtkSearchBar" id="search_bar">
+            <property name="search-mode-enabled" bind-source="search_button" bind-property="active" bind-flags="sync-create"/>
 
-            <!-- Filter entry -->
             <child>
               <object class="GtkSearchEntry" id="languages_entry">
                 <property name="placeholder_text" translatable="yes">Filter languages</property>
+                <property name="max-width-chars">25</property>
               </object>
             </child>
 
-            <!-- Languages scroller -->
-            <child>
-              <object class="GtkScrolledWindow">
-                <property name="vexpand">true</property>
-                <property name="has-frame">true</property>
-                <child>
-                  <object class="GtkViewport">
+          </object>
+        </child>
 
-                    <!-- Languages list -->
-                    <child>
-                      <object class="GtkListBox" id="languages_list">
-                      </object>
-                    </child>
+        <!-- Languages scroller -->
+        <property name="content">
+          <object class="GtkScrolledWindow">
+            <child>
+              <object class="GtkViewport">
+                <property name="margin-start">6</property>
+                <property name="margin-end">6</property>
 
+                <!-- Languages list -->
+                <child>
+                  <object class="GtkListBox" id="languages_list">
+                    <property name="selection-mode">none</property>
+                    <style>
+                      <class name="navigation-sidebar"/>
+                    </style>
                   </object>
                 </child>
+
               </object>
             </child>
+          </object>
+        </property>
 
-            <!-- Buttons box -->
-            <child>
-              <object class="GtkBox">
-                <property name="spacing">12</property>
-                <property name="homogeneous">true</property>
-
-                <!-- Select all languages button -->
-                <child>
-                  <object class="GtkButton" id="select_all_button">
-                    <property name="label" translatable="yes">Select All</property>
-                  </object>
-                </child>
+        <!-- Buttons box -->
+        <child type="bottom">
+          <object class="GtkBox">
+            <property name="margin-start">6</property>
+            <property name="margin-end">6</property>
+            <property name="margin-top">6</property>
+            <property name="margin-bottom">6</property>
+            <property name="spacing">6</property>
+            <property name="homogeneous">true</property>
 
-                <!-- Select none languages button -->
-                <child>
-                  <object class="GtkButton" id="select_none_button">
-                    <property name="label" translatable="yes">Select None</property>
-                  </object>
-                </child>
+            <!-- Select all languages button -->
+            <child>
+              <object class="GtkButton" id="select_all_button">
+                <property name="label" translatable="yes">Select All</property>
+              </object>
+            </child>
 
+            <!-- Select none languages button -->
+            <child>
+              <object class="GtkButton" id="select_none_button">
+                <property name="label" translatable="yes">Select None</property>
               </object>
             </child>
 
diff --git a/src/languages.py b/src/languages.py
index 3013d9a..ea8604c 100644
--- a/src/languages.py
+++ b/src/languages.py
@@ -15,6 +15,7 @@ class LanguagesWindow(Adw.Window):
 
   __gtype_name__ = 'LanguagesWindow'
 
+  search_bar = Gtk.Template.Child()
   languages_entry = Gtk.Template.Child()
   languages_list = Gtk.Template.Child()
   select_all_button = Gtk.Template.Child()
@@ -27,6 +28,7 @@ def __init__(self):
 
     self._languages_changed = False
     
+    self.search_bar.set_key_capture_widget(self)
     self.languages_list.set_filter_func(self._filter_list)
     self._populate()