library: Add search bar inside library view

src/Library/Library.blp

@@ -18,9 +18,14 @@ Adw.Window window {
 
     content: Adw.PreferencesPage {
       Adw.PreferencesGroup {
-        Picture picture_illustration {
-          can-shrink: false;
-          margin-bottom: 32;
+        Box {
+          halign: center;
+          vexpand: false;
+
+          Picture picture_illustration {
+            can-shrink: false;
+            margin-bottom: 32;
+          }
         }
 
         Label {
@@ -30,6 +35,14 @@ Adw.Window window {
             "title-1"
           ]
         }
+
+        SearchEntry search_entry {
+          search-delay: 100;
+          placeholder-text: _("Search demos");
+          activates-default: true;
+          width-request: 400;
+          margin-top: 32;
+        }
       }
 
       Adw.PreferencesGroup library_uncategorized {}

src/Library/Library.js

@@ -19,7 +19,7 @@ import { build } from "../../troll/src/builder.js";
 
 export default function Library({ application }) {
   const objects = build(resource);
-  const { window, picture_illustration } = objects;
+  const { window, picture_illustration, search_entry } = objects;
   window.application = application;
   picture_illustration.set_resource(illustration);
 
@@ -32,6 +32,8 @@ export default function Library({ application }) {
   window.connect("close-request", quitOnLastWindowClose);
 
   const demos = getDemos();
+  const widgets_map = new Map();
+  const category_map = new Map();
   demos.forEach((demo) => {
     const widget = new EntryRow({ demo: demo });
     if (demo.name === "Welcome") last_selected = widget;
@@ -45,10 +47,27 @@ export default function Library({ application }) {
         language,
       }).catch(console.error);
     });
-
+    if (!category_map.has(demo.category)) {
+      category_map.set(demo.category, objects[`library_${demo.category}`]);
+    }
     objects[`library_${demo.category}`].add(widget);
+    widgets_map.set(demo.name, { widget, category: demo.category });
   });
 
+  search_entry.connect("search-changed", () => {
+    const search_term = search_entry.get_text().toLowerCase();
+    const visible_categories = new Set();
+
+    widgets_map.forEach(({ widget, category }, demo_name) => {
+      const is_match = demo_name.toLowerCase().includes(search_term);
+      widget.visible = is_match;
+      if (is_match) visible_categories.add(category);
+    });
+
+    category_map.forEach((category_widget, category_name) => {
+      category_widget.visible = visible_categories.has(category_name);
+    });
+  });
   const action_library = new Gio.SimpleAction({
     name: "library",
     parameter_type: null,
@@ -86,9 +105,9 @@ async function openDemo({ application, demo_name, language }) {
     session.settings.set_int("code-language", language.index);
     global_settings.set_int("recent-code-language", language.index);
 
-    // If the user explictely requested to open the demo
+    // If the user explicitly requested to open the demo
     // in a specific language then that's probably what they are interested in
-    // therefor override the demo default and force show the code panel
+    // therefore override the demo default and force show the code panel
     session.settings.set_boolean("show-code", true);
   }