From 16795042756e076c384ea71a109456bbf9f805bb Mon Sep 17 00:00:00 2001
From: Joaquin Pereyra <joaquinpereyra98@users.noreply.github.com>
Date: Wed, 2 Jul 2025 17:06:53 -0300
Subject: [PATCH] FEAT: filter menu style

---
 module/applications/ux/property-filter.mjs |  4 +-
 styles/daggerheart.css                     | 38 +++++++++++++++++++
 styles/daggerheart.less                    |  2 +
 styles/less/actors/character/loadout.less  |  5 +++
 styles/less/global/filter-menu.less        | 43 ++++++++++++++++++++++
 5 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 styles/less/global/filter-menu.less

diff --git a/module/applications/ux/property-filter.mjs b/module/applications/ux/property-filter.mjs
index b5ce5bfe..ba7f3e1e 100644
--- a/module/applications/ux/property-filter.mjs
+++ b/module/applications/ux/property-filter.mjs
@@ -96,10 +96,10 @@ export default class FilterMenu extends foundry.applications.ux.ContextMenu {
    * @returns {HTMLDivElement} The section DOM element containing the label and buttons.
    */
   #createSection(groupName, items) {
-    const section = document.createElement("div");
+    const section = document.createElement("fieldset");
     section.className = "filter-section";
 
-    const header = document.createElement("label");
+    const header = document.createElement("legend");
     header.textContent = groupName;
     section.appendChild(header);
 
diff --git a/styles/daggerheart.css b/styles/daggerheart.css
index d620cb5b..f81a334c 100755
--- a/styles/daggerheart.css
+++ b/styles/daggerheart.css
@@ -4136,6 +4136,10 @@ div.daggerheart.views.multiclass {
 .application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input:placeholder {
   color: light-dark(#18162e50, #efe6d850);
 }
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: none;
+}
 .application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar .icon {
   align-content: center;
   height: 32px;
@@ -5190,6 +5194,40 @@ div.daggerheart.views.multiclass {
   gap: 10px;
   align-items: center;
 }
+.filter-menu {
+  width: auto;
+}
+.filter-menu fieldset.filter-section {
+  align-items: center;
+  margin: 5px;
+  border-radius: 6px;
+  border-color: light-dark(#18162e, #f3c267);
+  padding: 5px;
+}
+.filter-menu fieldset.filter-section legend {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: bold;
+  color: light-dark(#18162e, #f3c267);
+}
+.filter-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.filter-buttons button {
+  background: light-dark(rgba(0, 0, 0, 0.3), #18162e);
+  color: light-dark(#18162e, #f3c267);
+  outline: none;
+  box-shadow: none;
+  border: 1px solid light-dark(#18162e, #18162e);
+}
+.filter-buttons button:hover {
+  background: light-dark(transparent, #f3c267);
+  color: light-dark(#18162e, #18162e);
+}
+.filter-buttons button.active {
+  animation: glow 0.75s infinite alternate;
+}
 .daggerheart {
   /* Flex */
   /****/
diff --git a/styles/daggerheart.less b/styles/daggerheart.less
index 4a4cf3d2..891dc5e1 100755
--- a/styles/daggerheart.less
+++ b/styles/daggerheart.less
@@ -45,6 +45,8 @@
 @import './less/global/feature-section.less';
 @import './less/global/inventory-item.less';
 @import './less/global/inventory-fieldset-items.less';
+@import "./less/global/filter-menu.less";
+
 @import '../node_modules/@yaireo/tagify/dist/tagify.css';
 
 .daggerheart {
diff --git a/styles/less/actors/character/loadout.less b/styles/less/actors/character/loadout.less
index bf1474a2..72393597 100644
--- a/styles/less/actors/character/loadout.less
+++ b/styles/less/actors/character/loadout.less
@@ -30,6 +30,11 @@
                     &:placeholder {
                         color: light-dark(@dark-blue-50, @beige-50);
                     }
+
+                    &::-webkit-search-cancel-button {
+                        -webkit-appearance: none;
+                        display: none;
+                    }
                 }
 
                 .icon {
diff --git a/styles/less/global/filter-menu.less b/styles/less/global/filter-menu.less
new file mode 100644
index 00000000..0680bd21
--- /dev/null
+++ b/styles/less/global/filter-menu.less
@@ -0,0 +1,43 @@
+@import '../utils/colors.less';
+@import '../utils/fonts.less';
+
+.filter-menu {
+    width: auto;
+
+    fieldset.filter-section {
+        align-items: center;
+        margin: 5px;
+        border-radius: 6px;
+        border-color: light-dark(@dark-blue, @golden);
+        padding: 5px;
+
+        legend {
+            font-family: @font-body;
+            font-weight: bold;
+            color: light-dark(@dark-blue, @golden);
+        }
+    }
+}
+
+.filter-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+
+    button {
+        background: light-dark(@light-black, @dark-blue);
+        color: light-dark(@dark-blue, @golden);
+        outline: none;
+        box-shadow: none;
+        border: 1px solid light-dark(@dark-blue, @dark-blue);
+
+        &:hover {
+            background: light-dark(transparent, @golden);
+            color: light-dark(@dark-blue, @dark-blue);
+        }
+
+        &.active {
+            animation: glow 0.75s infinite alternate;
+        }
+    }
+}