css polish and modal close fix
When you close a modal, the DOM element is physically removed from the document tree, which is what triggers x-destroy. Using Alpine's $dispatch('event'), the event fires from the detached element and cannot bubble up to the window where our x-on:plugin-modal-closed.window listener is waiting to refresh the list of plugins. To fix this so it works 100% of the time, I've bypassed the bubbling entirely by explicitly dispatching the event directly on the window object using native JS inside the x-destroy directive. Now, the moment the modal closes the listener catches it, and the list refreshes automatically, showing the "Advanced" button right away, so you can go back to the Advanced toggling modal to do edits without having to refresh.
Alessandro committed
Feb 25, 2026 at 20:24 UTC
92168a1b048db9305e957f0c05040e0fc317850b
5 files changed
+11
-6
webui/components/plugins/list/plugin-list.html
+3
-3
@@ -169,7 +169,7 @@
169
color: var(--color-text-primary);
170
border-color: var(--color-border);
171
border-bottom-color: transparent;
172
- background: var(--color-bg-primary);
172
+ background: var(--color-background);
173
}
174
175
.plugins-toolbar {
@@ -195,7 +195,7 @@
195
border-radius: 4px;
196
padding: 0.75rem;
197
margin-top: 0.75rem;
198
- background: var(--color-bg-primary);
198
+ background: var(--color-background);
199
}
200
201
.plugin-header {
@@ -274,7 +274,7 @@
274
font-size: 0.9rem;
275
border: 1px solid var(--color-border);
276
border-radius: 4px;
277
- background: var(--color-bg-primary);
277
+ background: var(--color-background);
278
color: var(--color-text-primary);
279
cursor: pointer;
280
height: 2.2rem;
webui/components/plugins/plugin-settings.html
+1
-1
@@ -9,7 +9,7 @@
9
<div x-data>
10
<template x-if="$store.pluginSettings">
11
<div x-create="$store.pluginSettings.onModalOpen()"
12
- x-destroy="$store.pluginSettings.cleanup(); $dispatch('plugin-modal-closed')">
12
+ x-destroy="$store.pluginSettings.cleanup(); window.dispatchEvent(new Event('plugin-modal-closed'))">
13
14
<!-- Context toolbar: Project + Agent profile (only when at least one scope is configurable) -->
15
<div class="plugin-settings-scope-section"
webui/components/plugins/toggle/plugin-toggle-advanced.html
+1
-1
@@ -9,7 +9,7 @@
9
<div x-data>
10
<template x-if="$store.pluginToggle">
11
<div x-create="$store.pluginToggle.open($store.pluginListStore?.selectedPlugin || '')"
12
- x-destroy="$store.pluginToggle.cleanup(); $dispatch('plugin-modal-closed')">
12
+ x-destroy="$store.pluginToggle.cleanup(); window.dispatchEvent(new Event('plugin-modal-closed'))">
13
14
<!-- Error -->
15
<div x-show="$store.pluginToggle.error" class="plugin-settings-error">
webui/components/settings/plugins/plugins-subsection.html
+1
-1
@@ -100,7 +100,7 @@
100
border-radius: 4px;
101
padding: 0.75rem;
102
margin-top: 0.75rem;
103
- background: var(--color-bg-primary);
103
+ background: var(--color-background);
104
}
105
106
.plugin-header {
webui/css/settings.css
+5
@@ -136,6 +136,11 @@ input:checked + .toggler:before {
136
/* Select Styles */
137
select {
138
cursor: pointer;
139
+ color-scheme: dark;
140
+}
141
+
142
+.light-mode select {
143
+ color-scheme: light;
144
}
145
146
select:disabled {