plugins search bar
Alessandro committed
Mar 3, 2026 at 19:11 UTC
c9d45dc9a483184c19747a3b06f495f5548b9243
1 file changed
+34
-1
webui/components/plugins/list/plugin-list.html
+34
-1
@@ -39,6 +39,12 @@
39
</ul>
40
41
<div class="plugins-toolbar">
42
+ <div class="plugins-toolbar-search">
43
+ <input type="text"
44
+ class="plugins-search-input"
45
+ placeholder="Search plugins by name or description..."
46
+ x-model="$store.pluginListStore.searchQuery">
47
+ </div>
48
<div class="plugins-toolbar-actions">
49
<button type="button"
50
class="button confirm"
@@ -57,7 +63,13 @@
63
</div>
64
65
<div class="plugins-list">
60
- <template x-for="plugin in ($store.pluginListStore.plugins || [])" :key="plugin.path || plugin.name">
66
+ <template x-for="plugin in (($store.pluginListStore.plugins || []).filter((plugin) => {
67
+ const q = (($store.pluginListStore.searchQuery || '').trim().toLowerCase());
68
+ if (!q) return true;
69
+ const name = (plugin.display_name || plugin.name || '').toLowerCase();
70
+ const description = (plugin.description || '').toLowerCase();
71
+ return name.includes(q) || description.includes(q);
72
+ }))" :key="plugin.path || plugin.name">
73
<div class="plugin-card">
74
<div class="plugin-header">
75
<div class="plugin-heading">
@@ -189,6 +201,27 @@
201
margin-bottom: 0.75rem;
202
}
203
204
+ .plugins-toolbar-search {
205
+ flex: 1 1 22rem;
206
+ min-width: 14rem;
207
+ }
208
+
209
+ .plugins-search-input {
210
+ width: 100%;
211
+ padding: 0.4rem 0.7rem;
212
+ border: 1px solid var(--color-border);
213
+ border-radius: 4px;
214
+ background: var(--color-background);
215
+ color: var(--color-text-primary);
216
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
217
+ font-size: 0.95rem;
218
+ }
219
+
220
+ .plugins-search-input:focus {
221
+ outline: none;
222
+ border-color: var(--color-primary);
223
+ }
224
+
225
.plugins-toolbar-actions {
226
margin-left: auto;
227
flex: 0 0 auto;