feat(ui): group notification services into categories in dropdown (#6616)

src/components/NotificationDialog.vue

@@ -13,9 +13,32 @@
                         <div class="mb-3">
                             <label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
                             <select id="notification-type" v-model="notification.type" class="form-select">
-                                <option v-for="(name, type) in notificationNameList.regularList" :key="type" :value="type">{{ name }}</option>
+                                <optgroup :label="$t('notificationUniversal')">
+                                    <option v-for="(name, type) in notificationNameList.universal" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
+                                <optgroup :label="$t('notificationChatPlatforms')">
+                                    <option v-for="(name, type) in notificationNameList.chatPlatforms" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
+                                <optgroup :label="$t('notificationPushServices')">
+                                    <option v-for="(name, type) in notificationNameList.pushServices" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
+                                <optgroup :label="$t('notificationSmsServices')">
+                                    <option v-for="(name, type) in notificationNameList.smsServices" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
+                                <optgroup :label="$t('notificationEmail')">
+                                    <option v-for="(name, type) in notificationNameList.email" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
+                                <optgroup :label="$t('notificationIncidentManagement')">
+                                    <option v-for="(name, type) in notificationNameList.incidentManagement" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
+                                <optgroup :label="$t('notificationHomeAutomation')">
+                                    <option v-for="(name, type) in notificationNameList.homeAutomation" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
+                                <optgroup :label="$t('notificationOther')">
+                                    <option v-for="(name, type) in notificationNameList.other" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
                                 <optgroup :label="$t('notificationRegional')">
-                                    <option v-for="(name, type) in notificationNameList.regionalList" :key="type" :value="type">{{ name }}</option>
+                                    <option v-for="(name, type) in notificationNameList.regional" :key="type" :value="type">{{ name }}</option>
                                 </optgroup>
                             </select>
                         </div>
@@ -109,76 +132,105 @@ export default {
         },
 
         notificationNameList() {
-            let regularList = {
+            // Universal - Adapters and multi-service wrapper libraries
-                "alerta": "Alerta",
+            let universal = {
-                "AlertNow": "AlertNow",
                 "apprise": this.$t("apprise"),
+                "webhook": "Webhook",
+            };
+
+            // Chat Platforms - Messaging apps and team communication tools
+            let chatPlatforms = {
                 "bale": "Bale",
-                "Bark": "Bark",
                 "Bitrix24": "Bitrix24",
-                "clicksendsms": "ClickSend SMS",
-                "CallMeBot": "CallMeBot (WhatsApp, Telegram Call, Facebook Messanger)",
                 "discord": "Discord",
-                "Elks": "46elks",
                 "GoogleChat": "Google Chat (Google Workspace)",
-                "gorush": "Gorush",
-                "gotify": "Gotify",
-                "GrafanaOncall": "Grafana Oncall",
-                "HeiiOnCall": "Heii On-Call",
-                "HomeAssistant": "Home Assistant",
-                "Keep": "Keep",
                 "Kook": "Kook",
                 "line": "LINE Messenger",
-                "lunasea": "LunaSea",
                 "matrix": "Matrix",
                 "mattermost": "Mattermost",
                 "nextcloudtalk": "Nextcloud Talk",
                 "nostr": "Nostr",
-                "ntfy": "Ntfy",
-                "octopush": "Octopush",
                 "OneChat": "OneChat",
                 "OneBot": "OneBot",
-                "Onesender": "Onesender",
-                "Opsgenie": "Opsgenie",
-                "PagerDuty": "PagerDuty",
-                "PagerTree": "PagerTree",
                 "pumble": "Pumble",
-                "pushbullet": "Pushbullet",
-                "PushByTechulus": "Push by Techulus",
-                "pushover": "Pushover",
-                "pushy": "Pushy",
                 "rocket.chat": "Rocket.Chat",
                 "signal": "Signal",
-                "SIGNL4": "SIGNL4",
                 "slack": "Slack",
-                "squadcast": "SquadCast",
-                "SMSEagle": "SMSEagle",
-                "SMSPartner": "SMS Partner",
-                "smtp": this.$t("smtp"),
                 "stackfield": "Stackfield",
                 "teams": "Microsoft Teams",
                 "telegram": "Telegram",
                 "threema": "Threema",
-                "twilio": "Twilio",
-                "Splunk": "Splunk",
-                "webhook": "Webhook",
-                "GoAlert": "GoAlert",
                 "ZohoCliq": "ZohoCliq",
-                "SevenIO": "SevenIO",
+                "CallMeBot": "CallMeBot (WhatsApp, Telegram Call, Facebook Messenger)",
                 "whapi": "WhatsApp (Whapi)",
                 "evolution": "WhatsApp (Evolution)",
                 "waha": "WhatsApp (WAHA)",
-                "gtxmessaging": "GtxMessaging",
+            };
-                "Cellsynt": "Cellsynt",
+
-                "SendGrid": "SendGrid",
+            // Push Services - Push notification services
-                "Brevo": "Brevo",
+            let pushServices = {
-                "Resend": "Resend",
+                "Bark": "Bark",
+                "gorush": "Gorush",
+                "gotify": "Gotify",
+                "lunasea": "LunaSea",
                 "notifery": "Notifery",
+                "ntfy": "Ntfy",
+                "pushbullet": "Pushbullet",
+                "PushByTechulus": "Push by Techulus",
+                "pushover": "Pushover",
+                "pushy": "Pushy",
                 "Webpush": "Webpush",
             };
 
-            // Put notifications here if it's not supported in most regions or its documentation is not in English
+            // SMS Services - SMS and voice call providers
-            let regionalList = {
+            let smsServices = {
+                "clicksendsms": "ClickSend SMS",
+                "Elks": "46elks",
+                "Cellsynt": "Cellsynt",
+                "gtxmessaging": "GtxMessaging",
+                "octopush": "Octopush",
+                "Onesender": "Onesender",
+                "SevenIO": "SevenIO",
+                "SMSEagle": "SMSEagle",
+                "SMSPartner": "SMS Partner",
+                "twilio": "Twilio",
+            };
+
+            // Email - Email services
+            let email = {
+                "Brevo": "Brevo",
+                "Resend": "Resend",
+                "SendGrid": "SendGrid",
+                "smtp": this.$t("smtp"),
+            };
+
+            // Incident Management - On-call and alerting platforms
+            let incidentManagement = {
+                "alerta": "Alerta",
+                "AlertNow": "AlertNow",
+                "GoAlert": "GoAlert",
+                "GrafanaOncall": "Grafana Oncall",
+                "HeiiOnCall": "Heii On-Call",
+                "Keep": "Keep",
+                "Opsgenie": "Opsgenie",
+                "PagerDuty": "PagerDuty",
+                "PagerTree": "PagerTree",
+                "SIGNL4": "SIGNL4",
+                "Splunk": "Splunk",
+                "squadcast": "SquadCast",
+            };
+
+            // Home Automation - Smart home and IoT platforms
+            let homeAutomation = {
+                "HomeAssistant": "Home Assistant",
+            };
+
+            // Other Integrations
+            let other = {
+            };
+
+            // Regional - Not supported in most regions or documentation is not in English
+            let regional = {
                 "AliyunSMS": "AliyunSMS (阿里云短信服务)",
                 "DingDing": "DingDing (钉钉自定义机器人)",
                 "Feishu": "Feishu (飞书)",
@@ -199,8 +251,7 @@ export default {
                 "SMSPlanet": "SMSPlanet.pl"
             };
 
-            // Sort by notification name
+            // Sort by notification name alphabetically
-            // No idea how, but it works
             // https://stackoverflow.com/questions/1069666/sorting-object-property-by-values
             let sort = (list2) => {
                 return Object.entries(list2)
@@ -212,18 +263,25 @@ export default {
             };
 
             return {
-                regularList: sort(regularList),
+                universal: sort(universal),
-                regionalList: sort(regionalList),
+                chatPlatforms: sort(chatPlatforms),
+                pushServices: sort(pushServices),
+                smsServices: sort(smsServices),
+                email: sort(email),
+                incidentManagement: sort(incidentManagement),
+                homeAutomation: sort(homeAutomation),
+                other: sort(other),
+                regional: sort(regional),
             };
         },
 
         notificationFullNameList() {
             let list = {};
-            for (let [ key, value ] of Object.entries(this.notificationNameList.regularList)) {
+            // Combine all categories into a single list
-                list[key] = value;
+            for (let category of Object.values(this.notificationNameList)) {
-            }
+                for (let [ key, value ] of Object.entries(category)) {
-            for (let [ key, value ] of Object.entries(this.notificationNameList.regionalList)) {
+                    list[key] = value;
-                list[key] = value;
+                }
             }
             return list;
         },

src/lang/en.json

@@ -547,6 +547,14 @@
     "uninstalling": "Uninstalling",
     "confirmUninstallPlugin": "Are you sure want to uninstall this plugin?",
     "notificationRegional": "Regional",
+    "notificationUniversal": "Universal",
+    "notificationChatPlatforms": "Chat Platforms",
+    "notificationPushServices": "Push Services",
+    "notificationSmsServices": "SMS Services",
+    "notificationEmail": "Email",
+    "notificationIncidentManagement": "Incident Management",
+    "notificationHomeAutomation": "Home Automation",
+    "notificationOther": "Other Integrations",
     "Clone Monitor": "Clone Monitor",
     "Clone": "Clone",
     "cloneOf": "Clone of {0}",