Add Empty state for a language popover

data/style.css

@@ -20,10 +20,14 @@
 /*     border-bottom-width: 0; */
 /* } */
 
+.language_popover_row {
+ margin-left: 0;
+ margin-right: 0;
+}
 /* Lang Selector */
 .search_box {
   background: @popover_bg_color;
-  border-bottom: 1px solid @borders;
+  /* border-bottom: 1px solid @borders; */
   padding: 6px;
 }
 

data/ui/language_popover.blp

@@ -10,27 +10,76 @@ template $LanguagePopover : Popover {
 
   Box {
     orientation: vertical;
-    height-request: 256;
 
 
     Box search_box {
       orientation: vertical;
       styles ["search_box"]
 
       SearchEntry entry {
+
         placeholder-text: _("Search Languages…");
         activate => $_on_search_activate();
         search-changed => $_on_search_changed();
         stop-search => $_on_stop_search();
       }
     }
 
-    ScrolledWindow {
-      vexpand: true;
+    // Separator {}
+
+    Stack views {
+      vexpand: false;
+      transition-type: crossfade;
+      visible-child-name: "languages_page";
+
+      StackPage {
+        name: 'languages_page';
+
+        child: ScrolledWindow {
+          vexpand: true;
+
+          ListBox list_view {
+            selection-mode: single;
+            row-activated => $_on_language_activate();
+          }
+        };
+      }
+
+      StackPage {
+        name: 'empty_page';
+
+        child: ScrolledWindow {
+          height-request: 166;
+
+          Box {
+            orientation: vertical;
+            margin-end: 6;
+            margin-start: 6;
+            margin-top: 6;
+            margin-bottom: 6;
+            spacing: 8;
+            vexpand: true;
+
+            Image {
+              icon-name: "system-search-symbolic";
+              pixel-size: 48;
+              margin-top: 8;
+              vexpand: true;
+            }
+
+            Label {
+              label: _('No Results Found');
+              styles ["heading"]
+            }
 
-      ListBox list_view {
-        selection-mode: single;
-        row-activated => $_on_language_activate();
+            Button {
+              margin-top: 8;
+              hexpand: true;
+              label: _('Add Language');
+              clicked => $_on_add_clicked();
+            }
+          }
+        };
       }
     }
   }

data/ui/language_popover_row.blp

@@ -1,16 +1,19 @@
 using Gtk 4.0;
 
 template $LanguagePopoverRow : Gtk.ListBoxRow {
-    child: Box {
-    spacing: 6;
+    styles ["language_popover_row"]
 
-    Label title {
-      xalign: 0;
-    }
+    Box {
+      spacing: 6;
 
-    Image selection {
-      icon-name: "object-select-symbolic";
-      visible: false;
-    }
-  };
+      Label title {
+        xalign: 0;
+        hexpand: true;
+      }
+
+      Image selection {
+        icon-name: "object-select-symbolic";
+        visible: false;
+      }
+  }
 }

frog/widgets/language_popover.py

@@ -43,6 +43,8 @@ class LanguagePopover(Gtk.Popover):
         'language-changed': (GObject.SIGNAL_RUN_LAST, None, (LanguageItem,)),
     }
 
+    views: Gtk.Stack = Gtk.Template.Child()
+    search_box: Gtk.Box = Gtk.Template.Child()
     entry: Gtk.SearchEntry = Gtk.Template.Child()
     list_view: Gtk.ListBox = Gtk.Template.Child()
     lang_list: Gio.ListStore = Gio.ListStore(item_type=LanguageItem)
@@ -69,7 +71,7 @@ def __init__(self):
 
     def bind_model(self):
         self.filter = Gtk.CustomFilter()
-        self.filter.set_filter_func(self.on_language_filter)
+        self.filter.set_filter_func(self._on_language_filter)
         self.filter_list = Gtk.FilterListModel.new(self.lang_list, self.filter)
         self.list_view.bind_model(self.filter_list, LanguagePopoverRow)
 
@@ -81,7 +83,7 @@ def active_lang(self):
     def active_lang(self, lang_code: str):
         self._active_language = lang_code
 
-    def on_language_filter(self, proposal: LanguageItem, text: str = None) -> bool:
+    def _on_language_filter(self, proposal: LanguageItem, text: str = None) -> bool:
         return not text or text.lower() in proposal.title.lower()
 
     def _on_language_downloaded(self, _sender, _lang_code: str):
@@ -105,8 +107,9 @@ def _on_language_activate(self, _: Gtk.ListBox, row: LanguagePopoverRow):
     @Gtk.Template.Callback()
     def _on_search_changed(self, entry: Gtk.SearchEntry):
         query = entry.get_text().strip()
-        _filter: Gtk.CustomFilter = Gtk.CustomFilter.new(self.on_language_filter, query)
+        _filter: Gtk.CustomFilter = Gtk.CustomFilter.new(self._on_language_filter, query)
         self.filter_list.set_filter(_filter)
+        self.toggle_empty_state(not self.filter_list.get_n_items())
 
     @Gtk.Template.Callback()
     def _on_stop_search(self, _entry: Gtk.SearchEntry):
@@ -120,6 +123,11 @@ def _on_popover_show(self, _):
     def _on_popover_closed(self, *_):
         self.entry.set_text('')
 
+    @Gtk.Template.Callback()
+    def _on_add_clicked(self, _: Gtk.Widget):
+        self.activate_action('app.preferences')
+        self.popdown()
+
     def populate_model(self):
         self.lang_list.remove_all()
 
@@ -132,3 +140,9 @@ def populate_model(self):
             self.emit('language-changed', language_manager.get_language_item(self.active_language))
         else:
             self.emit('language-changed', language_manager.get_language_item('eng'))
+
+    def toggle_empty_state(self, is_empty: bool = False) -> None:
+        if is_empty:
+            self.views.set_visible_child_name('empty_page')
+        else:
+            self.views.set_visible_child_name('languages_page')