Refine skills modal toggle styling
- make the active Visible/Pinned state read as active instead of grey - replace the bordered toggle wrapper with a simpler slash-separated control - remove the visible/hidden count label and its unused store helpers
Alessandro committed
May 26, 2026 at 15:58 UTC
ecb80d3876334a98edb5842a153ab413d5c26a65
2 files changed
+31
-37
plugins/_skills/webui/config-store.js
-20
@@ -110,26 +110,6 @@ window.createSkillsConfigModel = (context, config) => ({
110
return this.selectedSkills.length;
111
},
112
113
- get selectedCountLabel() {
114
- return `${this.selectedCount} / ${this.maxActiveSkills}`;
115
- },
116
-
117
- get hiddenCount() {
118
- return this.catalog.filter((skill) => this.isHidden(skill)).length;
119
- },
120
-
121
- get visibleCount() {
122
- return Math.max(0, this.catalog.length - this.hiddenCount);
123
- },
124
-
125
- get visibilityCountLabel() {
126
- return `${this.visibleCount} visible / ${this.hiddenCount} hidden`;
127
- },
128
-
129
- get currentCountLabel() {
130
- return this.mode === "visible" ? this.visibilityCountLabel : this.selectedCountLabel;
131
- },
132
-
113
get catalogMap() {
114
const byKey = new Map();
115
for (const skill of this.catalog) {
plugins/_skills/webui/config.html
+31
-17
@@ -28,16 +28,17 @@
28
<div class="skills-mode-toggle" role="tablist" aria-label="Skills mode">
29
<button
30
type="button"
31
- class="button"
31
+ class="skills-mode-button"
32
:class="{ 'is-active': mode === 'visible' }"
33
@click="setMode('visible')"
34
>
35
<span class="icon material-symbols-outlined">visibility</span>
36
Visible
37
</button>
38
+ <span class="skills-mode-separator" aria-hidden="true">/</span>
39
<button
40
type="button"
40
- class="button"
41
+ class="skills-mode-button"
42
:class="{ 'is-active': mode === 'pinned' }"
43
@click="setMode('pinned')"
44
>
@@ -47,7 +48,6 @@
48
</div>
49
50
<div class="skills-actions">
50
- <span class="skills-count" x-text="currentCountLabel"></span>
51
<button type="button" class="button" @click="loadCatalog()" :disabled="loadingCatalog || mutatingChat">
52
<span class="icon material-symbols-outlined">refresh</span>
53
Refresh
@@ -188,30 +188,44 @@
188
.skills-mode-toggle {
189
display: flex;
190
align-items: center;
191
- gap: 0.35rem;
191
+ gap: 0.45rem;
192
flex: 0 0 auto;
193
- border: 1px solid var(--color-border);
194
- border-radius: 0.5rem;
195
- background: var(--color-bg-primary);
196
- padding: 0.2rem;
193
}
194
199
- .skills-mode-toggle .button {
195
+ .skills-mode-button {
196
+ display: inline-flex;
197
+ align-items: center;
198
+ gap: 0.35rem;
199
+ padding: 0;
200
border: none;
201
background: transparent;
202
- min-height: 2rem;
202
+ min-height: 0;
203
+ color: var(--color-text-secondary);
204
+ font: inherit;
205
+ font-weight: 650;
206
+ cursor: pointer;
207
+ transition: color 0.15s ease, opacity 0.15s ease;
208
}
209
205
- .skills-mode-toggle .button.is-active {
206
- background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-primary));
207
- color: var(--color-primary);
210
+ .skills-mode-button:hover {
211
+ color: var(--color-text);
212
+ filter: none;
213
+ box-shadow: none;
214
}
215
210
- .skills-count {
216
+ .skills-mode-button.is-active {
217
+ color: var(--color-text);
218
+ }
219
+
220
+ .skills-mode-button:focus-visible {
221
+ outline: none;
222
+ color: var(--color-text);
223
+ }
224
+
225
+ .skills-mode-separator {
226
color: var(--color-text-secondary);
212
- font-size: var(--font-size-small);
213
- font-weight: 600;
214
- white-space: nowrap;
227
+ font-weight: 500;
228
+ user-select: none;
229
}
230
231
.skills-help,