From 3ef90a70f2e81a6edf98b75401ef429a3aca9693 Mon Sep 17 00:00:00 2001
From: tsukinaha <sakuovds@gmail.com>
Date: Fri, 20 Dec 2024 21:44:34 +0800
Subject: [PATCH] feat: complete filter panel widget

Signed-off-by: tsukinaha <sakuovds@gmail.com>
---
 .../actions/minus-circle-outline-symbolic.svg |  2 ++
 .../icons/scalable/actions/month-symbolic.svg |  2 ++
 .../icons/scalable/actions/sound-symbolic.svg |  2 ++
 .../scalable/actions/tag-outline-symbolic.svg |  2 ++
 resources/resources.gresource.xml             |  4 +++
 resources/style.css                           | 34 +++++++++++++++++--
 resources/ui/filter.ui                        | 17 ++++++++++
 resources/ui/filter_label.ui                  | 11 +++---
 resources/ui/filter_row.ui                    |  3 ++
 src/ui/widgets/filter_panel/dialog.rs         |  6 ++++
 src/ui/widgets/filter_panel/filter_label.rs   | 22 ++++++------
 src/ui/widgets/filter_panel/filter_row.rs     |  6 +++-
 src/ui/widgets/search.rs                      |  3 +-
 13 files changed, 95 insertions(+), 19 deletions(-)
 create mode 100644 resources/icons/scalable/actions/minus-circle-outline-symbolic.svg
 create mode 100644 resources/icons/scalable/actions/month-symbolic.svg
 create mode 100644 resources/icons/scalable/actions/sound-symbolic.svg
 create mode 100644 resources/icons/scalable/actions/tag-outline-symbolic.svg

diff --git a/resources/icons/scalable/actions/minus-circle-outline-symbolic.svg b/resources/icons/scalable/actions/minus-circle-outline-symbolic.svg
new file mode 100644
index 00000000..8382c96e
--- /dev/null
+++ b/resources/icons/scalable/actions/minus-circle-outline-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 8 0 c -4.402344 0 -8 3.597656 -8 8 s 3.597656 8 8 8 s 8 -3.597656 8 -8 s -3.597656 -8 -8 -8 z m 0 1.980469 c 3.339844 0 6.015625 2.679687 6.015625 6.019531 s -2.675781 6.019531 -6.015625 6.019531 s -6.019531 -2.679687 -6.019531 -6.019531 s 2.679687 -6.019531 6.019531 -6.019531 z m -4 5.050781 v 2 h 8 v -2 z m 0 0" fill="#222222"/></svg>
diff --git a/resources/icons/scalable/actions/month-symbolic.svg b/resources/icons/scalable/actions/month-symbolic.svg
new file mode 100644
index 00000000..5632b48b
--- /dev/null
+++ b/resources/icons/scalable/actions/month-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 4 0 v 1 c -1.644531 0 -3 1.355469 -3 3 v 8 c 0 1.644531 1.355469 3 3 3 h 8 c 1.644531 0 3 -1.355469 3 -3 v -8 c 0 -1.644531 -1.355469 -3 -3 -3 v -1 h -1 v 1 h -6 v -1 z m -1 6 h 10 v 6 c 0 0.570312 -0.429688 1 -1 1 h -8 c -0.570312 0 -1 -0.429688 -1 -1 z m 1 1 v 2 h 2 v -2 z m 3 0 v 2 h 2 v -2 z m 3 0 v 2 h 2 v -2 z m -6 3 v 2 h 2 v -2 z m 3 0 v 2 h 2 v -2 z m 0 0" fill="#222222"/></svg>
diff --git a/resources/icons/scalable/actions/sound-symbolic.svg b/resources/icons/scalable/actions/sound-symbolic.svg
new file mode 100644
index 00000000..6b4d4bd0
--- /dev/null
+++ b/resources/icons/scalable/actions/sound-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><g fill="#303030"><path d="m 2.996094 8 c 0 0.550781 -0.449219 1 -1 1 c -0.550782 0 -1 -0.449219 -1 -1 s 0.449218 -1 1 -1 c 0.550781 0 1 0.449219 1 1 z m 0 0"/><path d="m 4.996094 5 c 0.550781 0 1 0.449219 1 1 v 4 c 0 0.550781 -0.449219 1 -1 1 c -0.550782 0 -1 -0.449219 -1 -1 v -4 c 0 -0.550781 0.449218 -1 1 -1 z m 0 0"/><path d="m 7.996094 1 c 0.550781 0 1 0.480469 1 1.070312 v 11.859376 c 0 0.589843 -0.449219 1.070312 -1 1.070312 c -0.550782 0 -1 -0.480469 -1 -1.070312 v -11.859376 c 0 -0.589843 0.449218 -1.070312 1 -1.070312 z m 0 0"/><path d="m 10.90625 3 h 0.179688 c 0.503906 0 0.910156 0.476562 0.910156 1.066406 v 7.867188 c 0 0.589844 -0.40625 1.066406 -0.910156 1.066406 h -0.179688 c -0.503906 0 -0.910156 -0.476562 -0.910156 -1.066406 v -7.867188 c 0 -0.589844 0.40625 -1.066406 0.910156 -1.066406 z m 0 0"/><path d="m 13.996094 7 c 0.550781 0 1 0.449219 1 1 s -0.449219 1 -1 1 c -0.550782 0 -1 -0.449219 -1 -1 s 0.449218 -1 1 -1 z m 0 0"/></g></svg>
diff --git a/resources/icons/scalable/actions/tag-outline-symbolic.svg b/resources/icons/scalable/actions/tag-outline-symbolic.svg
new file mode 100644
index 00000000..140e60f9
--- /dev/null
+++ b/resources/icons/scalable/actions/tag-outline-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><g fill="#222222"><path d="m 6 4.5 c 0 0.828125 -0.671875 1.5 -1.5 1.5 s -1.5 -0.671875 -1.5 -1.5 s 0.671875 -1.5 1.5 -1.5 s 1.5 0.671875 1.5 1.5 z m 0 0"/><path d="m 0 7.089844 c 0 0.847656 0.335938 1.660156 0.9375 2.261718 l 5.382812 5.382813 c 0.925782 0.925781 2.433594 0.925781 3.359376 0 l 4.964843 -4.964844 c 0.976563 -0.976562 0.976563 -2.5625 0 -3.539062 l -5.417969 -5.417969 c -0.519531 -0.519531 -1.226562 -0.8125 -1.960937 -0.8125 h -3.265625 c -2.207031 0 -4 1.792969 -4 4 z m 4 -5.089844 h 3.265625 c 0.207031 0 0.402344 0.082031 0.546875 0.226562 l 5.417969 5.417969 c 0.207031 0.207031 0.207031 0.503907 0 0.710938 l -4.964844 4.964843 c -0.15625 0.15625 -0.375 0.15625 -0.53125 0 l -5.382813 -5.382812 c -0.226562 -0.226562 -0.351562 -0.53125 -0.351562 -0.847656 v -3.089844 c 0 -1.117188 0.882812 -2 2 -2 z m 0 0"/></g></svg>
diff --git a/resources/resources.gresource.xml b/resources/resources.gresource.xml
index 65058d12..23f78037 100644
--- a/resources/resources.gresource.xml
+++ b/resources/resources.gresource.xml
@@ -24,6 +24,10 @@
     <file preprocess="xml-stripblanks" alias="chain-link-loose-symbolic.svg">icons/scalable/actions/chain-link-loose-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="funnel-outline-symbolic.svg">icons/scalable/actions/funnel-outline-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="cross-small-symbolic.svg">icons/scalable/actions/cross-small-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="sound-symbolic.svg">icons/scalable/actions/sound-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="tag-outline-symbolic.svg">icons/scalable/actions/tag-outline-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="month-symbolic.svg">icons/scalable/actions/month-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="minus-circle-outline-symbolic.svg">icons/scalable/actions/minus-circle-outline-symbolic.svg</file>
   </gresource>
   <gresource prefix="/moe/tsuna/tsukimi/">
     <file compressed="true">style.css</file>
diff --git a/resources/style.css b/resources/style.css
index ca3b3a99..eb558508 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -16,6 +16,18 @@ button.pill.small {
   padding: 1px 12px;
 }
 
+button.pill.no-padding-small {
+  font-size: 0.83333em;
+  border-radius: 99px;
+  margin: 0;
+  padding: 0px;
+}
+
+.circular.smaller {
+  min-height:28px;
+  min-width:28px;
+}
+
 .mediainfo {
   padding: 9px;
   border-radius: 15px;
@@ -283,6 +295,24 @@ checkbutton.theme-selector radio:checked {
   color: @theme_selected_fg_color;
 }
 
-.no-padding {
-	padding: 0px;
+.filter-label {
+	outline-style: solid;
+	outline-width: 2px;
+	border-radius: 99px;
+}
+
+.filter-label.color1 {
+  color: rgb(162, 184, 241);
+}
+
+.filter-label.color2 {
+  color: rgb(153, 199, 255);
+}
+
+.filter-label.color3 {
+  color: rgb(112, 177, 230);
+}
+
+.filter-label.color4 {
+  color: rgb(125, 210, 227);
 }
\ No newline at end of file
diff --git a/resources/ui/filter.ui b/resources/ui/filter.ui
index 1e92bb4c..c56c3c53 100644
--- a/resources/ui/filter.ui
+++ b/resources/ui/filter.ui
@@ -75,21 +75,38 @@
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Genres</property>
+                                                <property name="icon-name">sound-symbolic</property>
                                               </object>
                                             </child>
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Tags</property>
+                                                <property name="icon-name">tag-outline-symbolic</property>
                                               </object>
                                             </child>
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Years</property>
+                                                <property name="icon-name">month-symbolic</property>
                                               </object>
                                             </child>
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Official Rating</property>
+                                                <property name="icon-name">minus-circle-outline-symbolic</property>
+                                              </object>
+                                            </child>
+                                          </object>
+                                        </child>
+                                        <child>
+                                          <object class="AdwPreferencesGroup">
+                                            <child>
+                                              <object class="AdwButtonRow" id="apply_button_row">
+                                                <property name="title" translatable="yes">Apply</property>
+                                                <property name="start-icon-name">emblem-ok-symbolic</property>
+                                                <style>
+                                                  <class name="suggested-action" />
+                                                </style>
                                               </object>
                                             </child>
                                           </object>
diff --git a/resources/ui/filter_label.ui b/resources/ui/filter_label.ui
index a77a0808..23ca7c2a 100644
--- a/resources/ui/filter_label.ui
+++ b/resources/ui/filter_label.ui
@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="FilterLabel" parent="GtkButton">
+  <template class="FilterLabel" parent="AdwBin">
     <child>
       <object class="GtkBox">
         <property name="orientation">horizontal</property>
         <property name="spacing">5</property>
         <child>
-          <object class="GtkImage" id="image"/>
+          <object class="GtkImage" id="image">
+            <property name="margin-start">10</property>
+            <property name="icon-name" bind-source="FilterLabel" bind-property="icon-name" bind-flags="sync-create"/>
+          </object>
         </child>
         <child>
           <object class="GtkLabel">
@@ -27,8 +30,8 @@
       </object>
     </child>
     <style>
-      <class name="pill"/>
-      <class name="small"/>
+      <class name="filter-label"/>
+      <class name="no-padding-small"/>
     </style>
   </template>
 </interface>
\ No newline at end of file
diff --git a/resources/ui/filter_row.ui b/resources/ui/filter_row.ui
index e73a37a3..13d13769 100644
--- a/resources/ui/filter_row.ui
+++ b/resources/ui/filter_row.ui
@@ -45,6 +45,7 @@
                 <property name="valign">center</property>
                 <style>
                   <class name="circular"/>
+                  <class name="smaller"/>
                 </style>
               </object>
             </child>
@@ -60,6 +61,8 @@
                 <property name="hexpand">True</property>
                 <property name="margin-bottom">5</property>
                 <property name="selection-mode">none</property>
+                <property name="column-spacing">5</property>
+                <property name="row-spacing">5</property>
               </object>
             </child>
           </object>
diff --git a/src/ui/widgets/filter_panel/dialog.rs b/src/ui/widgets/filter_panel/dialog.rs
index d662becd..28616bcb 100644
--- a/src/ui/widgets/filter_panel/dialog.rs
+++ b/src/ui/widgets/filter_panel/dialog.rs
@@ -23,6 +23,8 @@ mod imp {
         pub stack: TemplateChild<gtk::Stack>,
         #[template_child]
         pub toast_overlay: TemplateChild<adw::ToastOverlay>,
+        #[template_child]
+        pub apply_button_row: TemplateChild<adw::ButtonRow>,
     }
 
     #[glib::object_subclass]
@@ -78,4 +80,8 @@ impl FilterPanelDialog {
     pub fn add_toast(&self, toast: adw::Toast) {
         self.imp().toast_overlay.add_toast(toast);
     }
+
+    pub fn connect_applied<F: Fn(&adw::ButtonRow) + 'static>(&self, f: F) -> glib::SignalHandlerId {
+        self.imp().apply_button_row.connect_activated(f)
+    }
 }
diff --git a/src/ui/widgets/filter_panel/filter_label.rs b/src/ui/widgets/filter_panel/filter_label.rs
index 700d0eb2..b6fa4720 100644
--- a/src/ui/widgets/filter_panel/filter_label.rs
+++ b/src/ui/widgets/filter_panel/filter_label.rs
@@ -1,11 +1,7 @@
 use adw::subclass::prelude::*;
-use gst::prelude::CastNone;
 use gtk::{
     glib,
-    prelude::{
-        WidgetExt,
-        *,
-    },
+    prelude::*,
     template_callbacks,
     CompositeTemplate,
 };
@@ -23,13 +19,15 @@ mod imp {
     pub struct FilterLabel {
         #[property(get, set, nullable)]
         pub label: RefCell<Option<String>>,
+        #[property(get, set, nullable)]
+        pub icon_name: RefCell<Option<String>>,
     }
 
     #[glib::object_subclass]
     impl ObjectSubclass for FilterLabel {
         const NAME: &'static str = "FilterLabel";
         type Type = super::FilterLabel;
-        type ParentType = gtk::Button;
+        type ParentType = adw::Bin;
 
         fn class_init(klass: &mut Self::Class) {
             Self::bind_template(klass);
@@ -45,18 +43,19 @@ mod imp {
     impl ObjectImpl for FilterLabel {
         fn constructed(&self) {
             self.parent_constructed();
-            self.obj().add_css_class("no-padding");
+
+            self.obj().add_css_class(&format!("color{}", rand::random::<u32>() % 4 + 1));
         }
     }
 
     impl WidgetImpl for FilterLabel {}
 
-    impl ButtonImpl for FilterLabel {}
+    impl BinImpl for FilterLabel {}
 }
 
 glib::wrapper! {
     pub struct FilterLabel(ObjectSubclass<imp::FilterLabel>)
-        @extends gtk::Widget, gtk::ListBoxRow, adw::ActionRow, adw::PreferencesRow, @implements gtk::Actionable, gtk::Accessible;
+        @extends gtk::Widget, gtk::Button, @implements gtk::Actionable, gtk::Accessible;
 }
 
 impl Default for FilterLabel {
@@ -72,9 +71,10 @@ impl FilterLabel {
     }
 
     #[template_callback]
-    async fn on_delete_button_clicked(&self) {
+    fn on_delete_button_clicked(&self) {
         let Some(flowbox) = self
-            .ancestor(gtk::FlowBox::static_type())
+            .parent()
+            .and_then(|p| p.parent())
             .and_downcast::<gtk::FlowBox>()
         else {
             return;
diff --git a/src/ui/widgets/filter_panel/filter_row.rs b/src/ui/widgets/filter_panel/filter_row.rs
index fe2b4baa..6a9263fc 100644
--- a/src/ui/widgets/filter_panel/filter_row.rs
+++ b/src/ui/widgets/filter_panel/filter_row.rs
@@ -19,6 +19,8 @@ mod imp {
     pub struct FilterRow {
         #[property(get, set, nullable)]
         pub title: RefCell<Option<String>>,
+        #[property(get, set, nullable)]
+        pub icon_name: RefCell<Option<String>>,
         #[template_child]
         pub flowbox: TemplateChild<gtk::FlowBox>,
     }
@@ -61,8 +63,10 @@ impl FilterRow {
     }
 
     #[template_callback]
-    async fn on_add_button_clicked(&self) {
+    fn on_add_button_clicked(&self) {
         let label = super::FilterLabel::new();
+        label.set_label(Some("Test"));
+        label.set_icon_name(self.icon_name());
         self.imp().flowbox.append(&label);
     }
 }
diff --git a/src/ui/widgets/search.rs b/src/ui/widgets/search.rs
index 92f0aa03..265856f9 100644
--- a/src/ui/widgets/search.rs
+++ b/src/ui/widgets/search.rs
@@ -28,13 +28,14 @@ mod imp {
     use std::sync::atomic::Ordering;
 
     use glib::subclass::InitializingObject;
-    use gst::prelude::StaticTypeExt;
     use gtk::{
         glib,
         subclass::prelude::*,
         CompositeTemplate,
     };
 
+    use gtk::prelude::*;
+
     use crate::{
         ui::widgets::tuview_scrolled::TuViewScrolled,
         utils::spawn,