notifications: add typed categories and align type selector in admin toolbar

Author: TheQuantifier

api/src/controllers/notifications.controller.js

@@ -25,6 +25,14 @@ function stripHtmlToText(html) {
     .trim();
 }
 
+function normalizeNotificationType(rawType) {
+  const value = String(rawType || "general").trim().toLowerCase();
+  if (value === "security" || value === "general" || value === "updates") {
+    return value;
+  }
+  return "";
+}
+
 export const getMine = asyncHandler(async (req, res) => {
   const notifications = await listActiveNotificationsForUser(req.user.id, 20);
   res.json({ notifications });
@@ -46,15 +54,22 @@ export const listAdmin = asyncHandler(async (_req, res) => {
 
 export const createAdmin = asyncHandler(async (req, res) => {
   const rawHtml = String(req.body?.messageHtml || "").trim();
+  const notificationType = normalizeNotificationType(req.body?.notificationType);
   const html = sanitizeNotificationHtml(rawHtml);
   const text = stripHtmlToText(html);
   if (!html || !text) {
     return res.status(400).json({ message: "Notification text is required" });
   }
+  if (!notificationType) {
+    return res
+      .status(400)
+      .json({ message: "notificationType must be one of: security, general, updates" });
+  }
 
   const notification = await createNotification({
     messageHtml: html,
     messageText: text,
+    notificationType,
     createdBy: req.user.id,
   });
   res.status(201).json({

api/src/db/migrations/029_add_notification_type.sql

@@ -0,0 +1,17 @@
+-- src/db/migrations/029_add_notification_type.sql
+-- Adds explicit type for notifications.
+
+alter table notifications
+  add column if not exists notification_type text not null default 'general';
+
+update notifications
+set notification_type = 'general'
+where notification_type is null
+   or trim(notification_type) = '';
+
+alter table notifications
+  drop constraint if exists notifications_notification_type_check;
+
+alter table notifications
+  add constraint notifications_notification_type_check
+  check (notification_type in ('security', 'general', 'updates'));

api/src/models/notification.model.js

@@ -1,17 +1,30 @@
 import { query } from "../config/db.js";
 
-export async function createNotification({ messageHtml, messageText, createdBy }) {
+export async function createNotification({
+  messageHtml,
+  messageText,
+  notificationType = "general",
+  createdBy,
+}) {
   const { rows } = await query(
     `
     INSERT INTO notifications (
       message_html,
       message_text,
+      notification_type,
       created_by
     )
-    VALUES ($1, $2, $3)
-    RETURNING id, message_html, message_text, is_active, created_by, created_at
+    VALUES ($1, $2, $3, $4)
+    RETURNING
+      id,
+      message_html,
+      message_text,
+      notification_type,
+      is_active,
+      created_by,
+      created_at
     `,
-    [messageHtml, messageText, createdBy || null]
+    [messageHtml, messageText, notificationType, createdBy || null]
   );
   return rows[0] || null;
 }
@@ -24,6 +37,7 @@ export async function listNotificationHistory(limit = 100) {
       n.id,
       n.message_html,
       n.message_text,
+      n.notification_type,
       n.is_active,
       n.created_by,
       n.created_at,
@@ -46,6 +60,7 @@ export async function listActiveNotificationsForUser(userId, limit = 20) {
       n.id,
       n.message_html,
       n.message_text,
+      n.notification_type,
       n.created_at
     FROM notifications n
     LEFT JOIN user_notification_dismissals d
@@ -83,6 +98,7 @@ export async function listPendingWeeklyNotificationsForUser(userId, limit = 100)
       n.id,
       n.message_html,
       n.message_text,
+      n.notification_type,
       n.created_at
     FROM notifications n
     LEFT JOIN user_notification_dismissals d

web/admin.html

@@ -399,6 +399,14 @@ <h2>Notifications</h2>
               <button class="btn btn--link" type="button" data-notification-cmd="insertOrderedList">1. List</button>
               <button class="btn btn--link" type="button" data-notification-cmd="createLink">Link</button>
               <button class="btn btn--link" type="button" data-notification-cmd="removeFormat">Clear</button>
+              <label class="admin-notification-toolbar-type">
+                <span>Type</span>
+                <select id="notificationTypeInput">
+                  <option value="general">general</option>
+                  <option value="updates">updates</option>
+                  <option value="security">security</option>
+                </select>
+              </label>
             </div>
             <div
               id="notificationEditor"

web/scripts/admin.js

@@ -59,6 +59,7 @@ const els = {
   adminAchievementsList: document.getElementById("adminAchievementsList"),
   achievementStatus: document.getElementById("achievementStatus"),
   notificationEditor: document.getElementById("notificationEditor"),
+  notificationTypeInput: document.getElementById("notificationTypeInput"),
   publishNotificationBtn: document.getElementById("publishNotificationBtn"),
   notificationHistoryList: document.getElementById("notificationHistoryList"),
   notificationAdminStatus: document.getElementById("notificationAdminStatus"),
@@ -659,9 +660,10 @@ function renderNotificationHistory() {
       const content = html || fallback;
       const creator = escapeHtml(String(item.created_by_username || "admin"));
       const createdAt = escapeHtml(formatDateTime(item.created_at));
+      const type = escapeHtml(String(item.notification_type || "general"));
       return `
         <article class="admin-notification-item">
-          <div class="admin-notification-meta">${createdAt} • by ${creator}</div>
+          <div class="admin-notification-meta">${createdAt} • ${type} • by ${creator}</div>
           <p>${content}</p>
         </article>
       `;
@@ -684,20 +686,28 @@ async function loadNotificationHistory() {
 async function publishNotificationFromEditor() {
   const html = String(els.notificationEditor?.innerHTML || "").trim();
   const text = extractNotificationTextFromHtml(html);
+  const notificationType = String(els.notificationTypeInput?.value || "general").trim().toLowerCase();
   if (!text) {
     setStatus(els.notificationAdminStatus, "Notification text is required.", "error");
     return;
   }
+  if (!["security", "general", "updates"].includes(notificationType)) {
+    setStatus(els.notificationAdminStatus, "Notification type is invalid.", "error");
+    return;
+  }
 
   if (els.publishNotificationBtn) {
     els.publishNotificationBtn.disabled = true;
   }
   setStatus(els.notificationAdminStatus, "Publishing notification...");
   try {
-    await api.admin.createNotification({ messageHtml: html });
+    await api.admin.createNotification({ messageHtml: html, notificationType });
     if (els.notificationEditor) {
       els.notificationEditor.innerHTML = "";
     }
+    if (els.notificationTypeInput) {
+      els.notificationTypeInput.value = "general";
+    }
     await loadNotificationHistory();
     setStatus(els.notificationAdminStatus, "Notification published.", "ok");
   } catch (err) {

web/scripts/default.js

@@ -538,10 +538,13 @@ function showNextNotificationToast() {
   }
   notificationToastShowing = true;
   notificationToastCurrentId = String(next.id || "");
+  const notificationType = String(
+    next?.notification_type || next?.type || next?.kind || next?.category || "general"
+  )
+    .toLowerCase()
+    .trim();
   const isSecurity =
-    String(next?.type || "").toLowerCase() === "security" ||
-    String(next?.kind || "").toLowerCase() === "security" ||
-    String(next?.category || "").toLowerCase() === "security";
+    notificationType === "security";
 
   const host = ensureNotificationUiHost();
   const toast = document.createElement("article");
@@ -560,7 +563,11 @@ function showNextNotificationToast() {
   body.className = "notification-toast-body";
   const title = document.createElement("p");
   title.className = "notification-toast-title";
-  title.textContent = isSecurity ? "Security Alert" : "Notification";
+  if (notificationType === "updates") {
+    title.textContent = "Update";
+  } else {
+    title.textContent = isSecurity ? "Security Alert" : "Notification";
+  }
   const textWrap = document.createElement("div");
   textWrap.className = "notification-toast-text";
   textWrap.innerHTML = String(next.message_html || next.message_text || "");

web/styles/admin.css

@@ -368,6 +368,22 @@
   min-width: auto;
 }
 
+.admin-notification-toolbar-type {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.admin-notification-toolbar-type span {
+  font-size: 0.86rem;
+  color: var(--muted);
+}
+
+.admin-notification-toolbar-type select {
+  min-width: 130px;
+}
+
 .admin-notification-input {
   min-height: 150px;
   border: 1px solid var(--border);