Update status checks and add optgroup support to form modals

- modal.js: add optgroup support for select options in formModal
- dhcp.js: use zone-based interface selector for DHCP ranges
- dashboard.js, wireguard.js: use status.up for state checks
- proxy.js: use inner.querySelector for modal field lookup

webui/static/hoover/components/modal.js

@@ -95,6 +95,8 @@ export function refreshModals() {
  *
  * Field shape:
  *   { label, id, [tag: 'input'|'select'|'textarea'], [type], [value], [placeholder], [options] }
+ *   - options can be string[], [value, selected][] tuples, or objects with { group, options }
+ *     for <optgroup> grouping. Nested options follow the same string/tuple format.
  *
  * Action shape:
  *   { label, cls, action, handler }
@@ -105,11 +107,28 @@ export function formModal(inner, title, fields, actions) {
             if (f.tag === 'select')
                 return '<div class="form-group"><label>' + esc(f.label) + '</label><select id="' + att_esc(f.id) + '"'
                     + (f.multiple ? ' multiple' : '') + '>'
-                    + (f.options || []).map(o =>
+                    + (f.options || []).map(function(o) {
-                        typeof o === 'string'
+                        if (o === null || o === undefined) return '';
-                            ? '<option value="' + att_esc(o) + '">' + esc(o) + '</option>'
+                        if (typeof o === 'string')
-                            : '<option value="' + att_esc(o[0]) + '"' + (o[1] ? ' selected' : '') + '>' + esc(o[1]) + '</option>',
+                            return '<option value="' + att_esc(o) + '">' + esc(o) + '</option>';
-                    ).join('') + '</select></div>';
+                        if (Array.isArray(o)) {
+                            // Support [value, label] and [value, selectedBoolean]
+                            if (o.length < 2)
+                                return '<option value="' + att_esc(o[0]) + '">' + att_esc(o[0]) + '</option>';
+                            if (typeof o[1] === 'boolean')
+                                return '<option value="' + att_esc(o[0]) + '"' + (o[1] ? ' selected' : '') + '>' + att_esc(o[0]) + '</option>';
+                            return '<option value="' + att_esc(o[0]) + '">' + esc(o[1]) + '</option>';
+                        }
+                        if ('group' in o) {
+                            return '<optgroup label="' + att_esc(o.group) + '">'
+                                + o.options.map(function(item) {
+                                    return typeof item === 'string'
+                                        ? '<option value="' + att_esc(item) + '">' + esc(item) + '</option>'
+                                        : '<option value="' + att_esc(item[0]) + '">' + esc(item[1]) + '</option>';
+                                }).join('') + '</optgroup>';
+                        }
+                        return '';
+                    }).join('') + '</select></div>';
 
             const tag = f.tag || 'input';
             return '<div class="form-group"><label>' + esc(f.label) + '</label><' + tag + ' id="' + att_esc(f.id) + '"'

webui/static/pages/dashboard.js

@@ -26,7 +26,7 @@ export default definePage({
                 meta=${Object.keys(fwZones).join(', ') || 'None'} />
             <${StatCard} label="Interfaces Up" value=${upC + '/' + nCount}
                 meta=${upI.map(i => i.name).join(', ') || 'None up'} />
-            <${StatCard} label="WireGuard" value=${String(d.wg?.state || 'unknown')}
+            <${StatCard} label="WireGuard" value=${String((d.wg?.status?.up) ? 'up' : 'down')}
                 meta=${wP.length + ' peers'} />
             <${StatCard} label="Certificates" value=${certs.length}
                 meta=${certW.length + ' expiring/expired'} />
@@ -37,8 +37,8 @@ export default definePage({
                 <div class="card-header">Services</div>
                 <div class="card-body">
                     <ul class="service-list">
-                        <li><${ServiceStatus} state=${dmsk.state || 'down'} label="Dnsmasq" /></li>
+                        <li><${ServiceStatus} state=${dmsk.service_active ? 'up' : 'down'} label="Dnsmasq" /></li>
-                        <li><${ServiceStatus} state=${d.wg?.state || 'down'} label="WireGuard" /></li>
+                        <li><${ServiceStatus} state=${(d.wg?.status?.up) ? 'up' : 'down'} label="WireGuard" /></li>
                     </ul>
                 </div>
             </div>

webui/static/pages/dhcp.js

@@ -1,9 +1,22 @@
-import { html, PageHeader, Badge, ConfirmDelete, Tabs, Table, ServiceStatus, renderGuard, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';
+import { html, PageHeader, ConfirmDelete, Tabs, Table, ServiceStatus, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, ActionButton, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';
 
-const addRange = QuickModal({
+function makeAddRange(activeZones) {
+    const opts = [
+        ['', '(global)'],
+        ...Object.entries(activeZones || {})
+            .filter(([, ifaces]) => Array.isArray(ifaces) && ifaces.length > 0)
+            .flatMap(([zone, ifaces]) => {
+                const label = zone + ' \u2192 ';
+                if (ifaces.length === 1)
+                    return [[ifaces[0], label + ifaces[0]]];
+                return [{ group: zone, options: ifaces.map(i => [i, label + i]) }];
+            }),
+    ];
+
+    return QuickModal({
         title: 'Add DHCP Range',
         fields: [
-        { label: 'Interface (optional)', id: 'r-iface', placeholder: 'Leave empty for global' },
+            { label: 'Interface (optional)', id: 'r-iface', tag: 'select', options: opts },
             { label: 'Start IP', id: 'r-start', placeholder: '192.168.1.100' },
             { label: 'End IP', id: 'r-end', placeholder: '192.168.1.200' },
             { label: 'Lease Time', id: 'r-lease', placeholder: '12h' },
@@ -21,6 +34,7 @@ const addRange = QuickModal({
         },
         refresh: 'dnsmasq',
     });
+}
 
 const addLease = QuickModal({
     title: 'Add Static Lease',
@@ -61,11 +75,12 @@ export default definePage({
     init() {
         return {
             dnsmasq: getModel('dnsmasq'),
+            firewall: getModel('firewall'),
             activeTab: 'ranges',
         };
     },
     render(state) {
-        const guard = renderGuard(state.dnsmasq, 'DHCP & DNS', 'Dnsmasq management', state.dnsmasq.data);
+        const guard = renderGuardMulti('DHCP & DNS', 'Dnsmasq management', state.dnsmasq, state.firewall);
         if (guard) return guard;
 
         const cfg = state.dnsmasq.data?.config || {};
@@ -116,7 +131,7 @@ export default definePage({
 
         const tabNames = ['ranges', 'leases', 'dns', 'active'];
         const actions = ActionGroup(
-            html`<button class="btn btn-primary" onClick=${() => addRange(state)}>Add Range</button>`,
+            html`<button class="btn btn-primary" onClick=${() => makeAddRange(state.firewall.data?.zones?.active)(state)}>Add Range</button>`,
             html`<button class="btn btn-outline" onClick=${() => addLease(state)}>Static Lease</button>`,
             html`<button class="btn btn-outline" onClick=${() => addDns(state)}>DNS Record</button>`,
             ActionButton({
@@ -141,7 +156,7 @@ export default definePage({
 
         return [
             PageHeader({ title: 'DHCP & DNS', subtitle: 'Dnsmasq management', actions }),
-            ServiceStatus({ state: status.state || 'down', label: 'Dnsmasq' }),
+            ServiceStatus({ state: status.service_active ? 'up' : 'down', label: 'Dnsmasq' }),
             Tabs({ state, tabs: tabNames }),
             state.activeTab === 'ranges'
                 ? Table({ columns: ['Interface', 'Start', 'End', 'Lease', 'Action'], rows: rangesRows, emptyText: 'No DHCP ranges' }) : null,

webui/static/pages/proxy.js

@@ -98,8 +98,8 @@ function addDomain(state) {
             },
         ]);
 
-        const certSelect = document.getElementById('p-cert');
+        const certSelect = inner.querySelector('#p-cert');
-        const domainInput = document.getElementById('p-domain');
+        const domainInput = inner.querySelector('#p-domain');
         if (certSelect && domainInput) {
             certSelect.addEventListener('change', () => {
                 const val = certSelect.value;

webui/static/pages/wireguard.js

@@ -61,7 +61,7 @@ export default definePage({
         if (guard) return guard;
 
         const st = state.wireguard.data?.status || {};
-        const isUp = st.state === 'up';
+        const isUp = st.up || false;
         const listenPort = (state.wireguard.data?.config?.interface || {}).listen_port || '-';
 
         const peerRows = (state.wireguard.data?.peers || []).map(p => {
@@ -107,10 +107,10 @@ export default definePage({
         return [
             PageHeader({
                 title: 'WireGuard',
-                subtitle: 'Tunnel: ' + (st.state || 'unknown') + ', Listen: ' + listenPort,
+                subtitle: 'Tunnel: ' + (st.up ? 'up' : 'down') + ', Listen: ' + listenPort,
                 actions,
             }),
-            ServiceStatus({ state: st.state || 'down' }),
+            ServiceStatus({ state: st.up ? 'up' : 'down' }),
             peerRows.length
                 ? Table({
                     columns: ['Peer', 'Public Key', 'Allowed IPs', 'Endpoint', 'Handshake', 'Transfer', 'Actions'],