feat(notifications): add Shoutrrr support (#1326)

web/src/domain/constants.ts

@@ -390,30 +390,34 @@ export const NotificationTypeOptions: OptionBasicTyped<NotificationType>[] = [
     label: "Discord",
     value: "DISCORD"
   },
-  {
-    label: "Notifiarr",
-    value: "NOTIFIARR"
-  },
-  {
-    label: "Telegram",
-    value: "TELEGRAM"
-  },
-  {
-    label: "Pushover",
-    value: "PUSHOVER"
-  },
   {
     label: "Gotify",
     value: "GOTIFY"
   },
+  {
+    label: "LunaSea",
+    value: "LUNASEA"
+  },
+  {
+    label: "Notifiarr",
+    value: "NOTIFIARR"
+  },
   {
     label: "Ntfy",
     value: "NTFY"
   },
   {
-    label: "LunaSea",
-    value: "LUNASEA"
-  }
+    label: "Pushover",
+    value: "PUSHOVER"
+  },
+  {
+    label: "Shoutrrr",
+    value: "SHOUTRRR"
+  },
+  {
+    label: "Telegram",
+    value: "TELEGRAM"
+  },
 ];
 
 export const IrcAuthMechanismTypeOptions: OptionBasicTyped<IrcAuthMechanism>[] = [

web/src/forms/settings/NotificationForms.tsx

@@ -239,6 +239,34 @@ function FormFieldsNtfy() {
   );
 }
 
+function FormFieldsShoutrrr() {
+  return (
+    <div className="border-t border-gray-200 dark:border-gray-700 py-4">
+      <div className="px-4 space-y-1">
+        <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title>
+      </div>
+
+      <TextFieldWide
+        name="host"
+        label="URL"
+        help="URL"
+        tooltip={
+          <div><p>See full documentation </p>
+            <ExternalLink
+              href="https://containrrr.dev/shoutrrr/services/overview/"
+              className="font-medium text-blue-500 underline underline-offset-1 hover:text-blue-400"
+            >
+              Services
+            </ExternalLink>
+          </div>
+        }
+        placeholder="smtp://username:password@host:port/?from=fromAddress&to=recipient1"
+        required={true}
+      />
+    </div>
+  );
+}
+
 const componentMap: componentMapType = {
   DISCORD: <FormFieldsDiscord />,
   NOTIFIARR: <FormFieldsNotifiarr />,
@@ -246,6 +274,7 @@ const componentMap: componentMapType = {
   PUSHOVER: <FormFieldsPushover />,
   GOTIFY: <FormFieldsGotify />,
   NTFY: <FormFieldsNtfy />,
+  SHOUTRRR: <FormFieldsShoutrrr />,
   LUNASEA: <FormFieldsLunaSea />
 };
 

web/src/screens/settings/Notifications.tsx

@@ -77,6 +77,7 @@ const iconComponentMap: componentMapType = {
   PUSHOVER: <span className={iconStyle}><PushoverIcon /> Pushover</span>,
   GOTIFY: <span className={iconStyle}><GotifyIcon /> Gotify</span>,
   NTFY: <span className={iconStyle}><NtfyIcon /> ntfy</span>,
+  SHOUTRRR: <span className={iconStyle}><NtfyIcon /> Shoutrrr</span>,
   LUNASEA: <span className={iconStyle}><LunaSeaIcon /> LunaSea</span>
 };
 

web/src/types/Notification.d.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-type NotificationType = "DISCORD" | "NOTIFIARR" | "TELEGRAM" | "PUSHOVER" | "GOTIFY" | "NTFY" | "LUNASEA";
+type NotificationType = "DISCORD" | "NOTIFIARR" | "TELEGRAM" | "PUSHOVER" | "GOTIFY" | "NTFY" | "LUNASEA" | "SHOUTRRR";
 type NotificationEvent =
   "PUSH_APPROVED"
   | "PUSH_REJECTED"