Per-type board rows with shared categories, a network device IP field, and two dark-mode dialogs

plugins/notifications/frontend/views/NotificationTypesList.vue

@@ -32,7 +32,10 @@
                 <span class="swatch" :style="{ backgroundColor: swatchColor(t.typecolor) }"></span>
                 <span class="mono">{{ t.typecolor }}</span>
               </td>
-              <td><span class="badge">{{ t.displaystyle || 'standard' }}</span></td>
+              <td>
+                <span class="badge">{{ t.displaystyle || 'standard' }}</span>
+                <span v-if="t.boardcategory" class="badge badge-secondary">{{ t.boardcategory }}</span>
+              </td>
               <td>
                 <span v-if="t.splitperemployee" class="badge badge-success">split</span>
                 <span v-if="t.showemployeephoto" class="badge badge-success">photo</span>
@@ -87,6 +90,17 @@
             </select>
           </label>
 
+          <label class="field">
+            <span>Board category (optional)</span>
+            <input v-model="form.boardcategory" type="text" maxlength="50"
+                   placeholder="its own row" />
+            <small class="muted">
+              Types sharing a category share one row on the shopfloor board,
+              under the category name. Blank gives this type a row of its own.
+              Only types with the same display style can share a row.
+            </small>
+          </label>
+
           <label class="field">
             <span>Keep showing after end (minutes)</span>
             <input v-model.number="form.gracewindowminutes" type="number"
@@ -215,6 +229,7 @@ function openNew() {
     expirydays: null,
     expiryhour: null,
     gracewindowminutes: 0,
+    boardcategory: '',
     isactive: true
   }
   editing.value = true
@@ -234,6 +249,7 @@ function openEdit(t) {
     expirydays: t.expirydays ?? null,
     expiryhour: t.expiryhour ?? null,
     gracewindowminutes: t.gracewindowminutes ?? 0,
+    boardcategory: t.boardcategory || '',
     isactive: t.isactive !== false
   }
   editing.value = true
@@ -300,7 +316,10 @@ onMounted(load)
   z-index: 1000;
 }
 .modal-panel {
-  background: var(--bg-card);
+  /* Solid, not var(--bg-card): the card variable is translucent in dark mode
+     (rgba(0,0,61,0.4)) so cards glass over the page, which left this dialog
+     see-through with the table legible behind it. */
+  background: var(--bg-card-solid);
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;