improve: email config UI use project dropdown, toggle, trash icon with confirm, standard button styles
linuztx committed
Mar 17, 2026 at 22:40 UTC
d91fb6c666ac532f5b88ba5a48512169150fb045
1 file changed
+34
-12
plugins/_email_integration/webui/config.html
+34
-12
@@ -9,6 +9,14 @@
9
editing: null,
10
testing: null,
11
test_results: null,
12
+ projects: [],
13
+ async init() {
14
+ try {
15
+ const { callJsonApi } = await import('/js/api.js');
16
+ const res = await callJsonApi('projects', { action: 'list' });
17
+ this.projects = res.data || [];
18
+ } catch (e) { this.projects = []; }
19
+ },
20
add_handler() {
21
if (!config.handlers) config.handlers = [];
22
config.handlers.push({
@@ -77,18 +85,28 @@
85
<span style="font-weight: bold;" x-text="handler.name"></span>
86
<span style="opacity: 0.6; margin-left: 8px;" x-text="handler.enabled ? 'Enabled' : 'Disabled'"></span>
87
</div>
80
- <div style="display: flex; gap: 8px; align-items: center;">
81
- <label @click.stop style="display: flex; align-items: center; gap: 4px;">
82
- <input type="checkbox" x-model="handler.enabled" />
83
- </label>
84
- <button class="btn-cancel" @click.stop="remove_handler(idx)" style="padding: 2px 10px; font-size: 0.8rem;">Remove</button>
85
- </div>
88
+ <button class="btn btn-action delete" @click.stop="$confirmClick($event, () => remove_handler(idx))" title="Remove handler">
89
+ <span class="material-symbols-outlined">delete</span>
90
+ </button>
91
</div>
92
93
<!-- Expanded editor -->
94
<template x-if="editing === idx">
95
<div style="margin-top: 16px;">
96
97
+ <div class="field">
98
+ <div class="field-label">
99
+ <div class="field-title">Enabled</div>
100
+ <div class="field-description">Enable or disable inbox polling for this handler</div>
101
+ </div>
102
+ <div class="field-control">
103
+ <label class="toggle">
104
+ <input type="checkbox" x-model="handler.enabled" />
105
+ <span class="toggler"></span>
106
+ </label>
107
+ </div>
108
+ </div>
109
+
110
<div class="field">
111
<div class="field-label">
112
<div class="field-title">Handler Name</div>
@@ -228,10 +246,15 @@
246
<div class="field">
247
<div class="field-label">
248
<div class="field-title">Project</div>
231
- <div class="field-description">Project to activate for email chats (optional)</div>
249
+ <div class="field-description">Project to activate for email chats</div>
250
</div>
251
<div class="field-control">
234
- <input type="text" x-model="handler.project" placeholder="my-project" />
252
+ <select x-model="handler.project">
253
+ <option value="">No project</option>
254
+ <template x-for="proj in projects" :key="proj.name">
255
+ <option :value="proj.name" x-text="proj.title || proj.name"></option>
256
+ </template>
257
+ </select>
258
</div>
259
</div>
260
@@ -270,9 +293,8 @@
293
294
<!-- Test connection -->
295
<div style="margin-top: 12px; display: flex; align-items: center; gap: 12px;">
273
- <button class="btn-cancel" @click.stop="test_connection(idx)"
274
- :disabled="testing === idx"
275
- style="padding: 4px 16px; font-size: 0.85rem;">
296
+ <button class="btn btn-field" @click.stop="test_connection(idx)"
297
+ :disabled="testing === idx">
298
<span x-show="testing !== idx">Test Connection</span>
299
<span x-show="testing === idx">Testing...</span>
300
</button>
@@ -298,7 +320,7 @@
320
</div>
321
</template>
322
301
- <button class="btn-cancel" @click="add_handler()" style="margin-top: 8px; padding: 4px 16px; font-size: 0.85rem;">
323
+ <button class="btn btn-field" @click="add_handler()" style="margin-top: 8px;">
324
Add Handler
325
</button>
326
</div>