plugins ui polish
Alessandro committed
Feb 20, 2026 at 11:38 UTC
75bd441d51fc8dfbcf9306dcfdeb4eb436c76a59
3 files changed
+59
-10
webui/components/plugins/list/plugin-list.html
+19
-9
@@ -9,7 +9,7 @@
9
<body>
10
<div x-data>
11
<template x-if="$store.pluginListStore">
12
- <div x-init="$store.pluginListStore.setTab && $store.pluginListStore.setTab('custom')">
12
+ <div x-init="$store.pluginListStore.init && $store.pluginListStore.init()">
13
14
<ul class="nav nav-tabs" id="plugin-list-tabs" role="tablist">
15
<li class="nav-item" role="presentation">
@@ -68,7 +68,7 @@
68
class="button"
69
title="Open"
70
@click="$store.pluginListStore.openPlugin(plugin)">
71
- <span class="icon material-symbols-outlined">folder_open</span> Open
71
+ <span class="icon material-symbols-outlined">dashboard</span> Open
72
</button>
73
</template>
74
<template x-if="plugin.has_config_screen">
@@ -85,13 +85,14 @@
85
@click="$store.pluginListStore.openPluginInfo(plugin)">
86
<span class="icon material-symbols-outlined">info</span> Info
87
</button>
88
- <button type="button"
89
- class="button cancel icon-button"
90
- :title="plugin.is_custom ? 'Delete' : 'Builtin plugins cannot be deleted'"
91
- :disabled="!plugin.is_custom"
92
- @click="$confirmClick($event, () => $store.pluginListStore.deletePlugin(plugin))">
93
- <span class="icon material-symbols-outlined">delete</span>
94
- </button>
88
+ <template x-if="plugin.is_custom">
89
+ <button type="button"
90
+ class="button cancel icon-button"
91
+ title="Delete"
92
+ @click="$confirmClick($event, () => $store.pluginListStore.deletePlugin(plugin))">
93
+ <span class="icon material-symbols-outlined">delete</span>
94
+ </button>
95
+ </template>
96
</div>
97
</div>
98
<div class="plugin-description" x-text="plugin.description || 'No description provided.'"></div>
@@ -191,6 +192,15 @@
192
justify-content: flex-end;
193
}
194
195
+ .plugin-actions .button {
196
+ padding: 0.3rem 0.6rem;
197
+ font-size: 0.9rem;
198
+ }
199
+
200
+ .plugin-actions .button .icon {
201
+ font-size: 1.1rem;
202
+ }
203
+
204
.plugin-description {
205
margin-top: 0.35rem;
206
color: var(--color-text-secondary);
webui/components/plugins/list/pluginListStore.js
+7
@@ -13,6 +13,13 @@ const model = {
13
selectedPlugin: null,
14
activeTab: "custom",
15
16
+ async init() {
17
+ await this.setTab('custom');
18
+ if (this.plugins.length === 0) {
19
+ await this.setTab('builtin');
20
+ }
21
+ },
22
+
23
async loadPluginList(filter) {
24
this.loading = true;
25
this.selectedPlugin = null;
webui/components/plugins/plugin-settings.html
+33
-1
@@ -12,7 +12,12 @@
12
x-destroy="$store.pluginSettings.cleanup()">
13
14
<!-- Context toolbar: Project + Agent profile (mirrors skills list) -->
15
- <div class="plugin-settings-toolbar">
15
+ <div class="plugin-settings-scope-section">
16
+ <div class="plugin-settings-scope-header">
17
+ <div class="plugin-settings-scope-title">Settings scope</div>
18
+ <div class="plugin-settings-scope-desc">This plugin supports settings per project or agent profile.</div>
19
+ </div>
20
+ <div class="plugin-settings-toolbar">
21
<div class="plugin-settings-toolbar-row">
22
23
<label class="plugin-settings-toolbar-item">
@@ -39,6 +44,7 @@
44
45
</div>
46
</div>
47
+ </div>
48
49
<!-- Error -->
50
<div x-show="$store.pluginSettings.error" class="plugin-settings-error">
@@ -147,6 +153,32 @@
153
from { transform: rotate(0deg); }
154
to { transform: rotate(360deg); }
155
}
156
+
157
+ .plugin-settings-scope-section {
158
+ border: 1px solid var(--color-border);
159
+ border-radius: 4px;
160
+ margin: 1rem;
161
+ padding: 0;
162
+ overflow: hidden;
163
+ }
164
+
165
+ .plugin-settings-scope-header {
166
+ padding: 0.75rem 1rem;
167
+ border-bottom: 1px solid var(--color-border);
168
+ background: var(--color-bg-secondary);
169
+ }
170
+
171
+ .plugin-settings-scope-title {
172
+ font-weight: 600;
173
+ font-size: var(--font-size-normal);
174
+ color: var(--color-text-primary);
175
+ }
176
+
177
+ .plugin-settings-scope-desc {
178
+ font-size: var(--font-size-small);
179
+ color: var(--color-text-secondary);
180
+ margin-top: 0.25rem;
181
+ }
182
</style>
183
</body>
184
</html>