Add custom search bar with tags

data/res/style.css

@@ -1,3 +1,10 @@
-.searchbar {
-    padding: 6px 6px 7px 6px;
+.searchbar .searchtag {
+  background-color: alpha(currentColor, 0.1);
+  border-radius: 100px;
+}
+
+.searchbar .searchtag > button {
+  min-width: 24px;
+  min-height: 24px;
+  margin: 0px;
 }

data/ui/home_page.blp

@@ -21,13 +21,8 @@ template $MusicusHomePage : Adw.NavigationPage {
         maximum-size: 1000;
         tightening-threshold: 600;
 
-        Adw.Bin {
-          styles ["searchbar"]
-
-          Gtk.SearchEntry search_entry {
-            placeholder-text: _("Enter composers, performers, works…");
-            search-changed => $search() swapped;
-          }
+        $MusicusSearchEntry search_entry {
+          activate => $select() swapped;
         }
       }
 

data/ui/search_entry.blp

@@ -0,0 +1,31 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $MusicusSearchEntry : Gtk.Box {
+  styles ["searchbar"]
+
+  margin-start: 12;
+  margin-end: 12;
+  margin-top: 6;
+  margin-bottom: 6;
+
+  Gtk.Image {
+      icon-name: "system-search-symbolic";
+  }
+
+  Gtk.Box tags_box {
+    valign: center;
+  }
+
+  Gtk.Text text {
+      placeholder-text: _("Enter composers, performers, works…");
+      hexpand: true;
+      activate => $activate() swapped;
+      backspace => $backspace() swapped;
+  }
+
+  Gtk.Image clear_icon {
+      icon-name: "edit-clear-symbolic";
+      tooltip-text: _("Clear entry");
+  }
+}

data/ui/search_tag.blp

@@ -0,0 +1,21 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $MusicusSearchTag : Gtk.Box {
+  styles ["searchtag"]
+
+  margin-start: 6;
+  margin-end: 6;
+
+  Gtk.Label label {
+    styles ["caption-heading"]
+    margin-start: 12;
+    margin-end: 6;
+  }
+
+  Gtk.Button button {
+    styles ["flat", "circular"]
+    icon-name: "window-close-symbolic";
+    clicked => $remove() swapped;
+  }
+}