From 990a3527e4401ff160941b06e0acba21a967cc8d Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Tue, 3 Feb 2026 20:05:39 +0800
Subject: [PATCH] feat(ui): improve filter preset delete button visibility and
 layout

- Hide delete button by default and show on hover for inactive presets
- Show delete button on active presets only when hovering over the preset
- Add ellipsis truncation for long preset names to prevent layout breakage
- Remove checkmark icon from active preset names for cleaner visual design
---
 static/css/components/search-filter.css   | 13 ++++++++++++-
 static/js/managers/FilterPresetManager.js |  7 +------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/static/css/components/search-filter.css b/static/css/components/search-filter.css
index a8c5a8ed..d1671283 100644
--- a/static/css/components/search-filter.css
+++ b/static/css/components/search-filter.css
@@ -512,6 +512,10 @@
 
 .filter-preset.active .preset-delete-btn {
     color: white;
+    opacity: 0;
+}
+
+.filter-preset:hover.active .preset-delete-btn {
     opacity: 0.8;
 }
 
@@ -529,13 +533,16 @@
     align-items: center;
     gap: 6px;
     white-space: nowrap;
+    max-width: 120px; /* Prevent long names from breaking layout */
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .preset-delete-btn {
     background: none;
     border: none;
     color: var(--text-color);
-    opacity: 0.5;
+    opacity: 0; /* Hidden by default */
     cursor: pointer;
     padding: 4px;
     display: flex;
@@ -546,6 +553,10 @@
     margin-left: auto;
 }
 
+.filter-preset:hover .preset-delete-btn {
+    opacity: 0.5; /* Show on hover */
+}
+
 .preset-delete-btn:hover {
     opacity: 1;
     color: var(--lora-error, #e74c3c);
diff --git a/static/js/managers/FilterPresetManager.js b/static/js/managers/FilterPresetManager.js
index 012c8480..7f922ab8 100644
--- a/static/js/managers/FilterPresetManager.js
+++ b/static/js/managers/FilterPresetManager.js
@@ -751,12 +751,7 @@ export class FilterPresetManager {
 
             const presetName = document.createElement('span');
             presetName.className = 'preset-name';
-
-            if (isActive) {
-                presetName.innerHTML = `<i class="fas fa-check"></i> ${preset.name}`;
-            } else {
-                presetName.textContent = preset.name;
-            }
+            presetName.textContent = preset.name;
             presetName.title = translate('header.filter.presetClickTooltip', { name: preset.name }, `Click to apply preset "${preset.name}"`);
 
             const deleteBtn = document.createElement('button');