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 {