feat(notifications): add ntfy support (#1323)

* feat(notifications): add ntfy support

* fix(test): update

* fix: added missing semicolon

web/src/domain/constants.ts

@@ -406,6 +406,10 @@ export const NotificationTypeOptions: OptionBasicTyped<NotificationType>[] = [
     label: "Gotify",
     value: "GOTIFY"
   },
+  {
+    label: "Ntfy",
+    value: "NTFY"
+  },
   {
     label: "LunaSea",
     value: "LUNASEA"

web/src/forms/settings/NotificationForms.tsx

@@ -197,12 +197,55 @@ function FormFieldsGotify() {
   );
 }
 
+function FormFieldsNtfy() {
+  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="NTFY URL"
+        help="NTFY URL"
+        placeholder="https://ntfy.sh/mytopic"
+        required={true}
+      />
+
+      <TextFieldWide
+        name="username"
+        label="Username"
+        help="Username"
+      />
+
+      <PasswordFieldWide
+        name="password"
+        label="Password"
+        help="Password"
+      />
+
+      <PasswordFieldWide
+        name="token"
+        label="Access token"
+        help="Access token. Use this or Usernmae+password"
+      />
+
+      <NumberFieldWide
+        name="priority"
+        label="Priority"
+        help="Max 5, 4, 3 (default), 2, 1 Min"
+      />
+    </div>
+  );
+}
+
 const componentMap: componentMapType = {
   DISCORD: <FormFieldsDiscord />,
   NOTIFIARR: <FormFieldsNotifiarr />,
   TELEGRAM: <FormFieldsTelegram />,
   PUSHOVER: <FormFieldsPushover />,
   GOTIFY: <FormFieldsGotify />,
+  NTFY: <FormFieldsNtfy />,
   LUNASEA: <FormFieldsLunaSea />
 };
 

web/src/screens/settings/Notifications.tsx

@@ -15,7 +15,7 @@ import toast from "react-hot-toast";
 import { Section } from "./_components";
 import { PlusIcon } from "@heroicons/react/24/solid";
 import { Checkbox } from "@components/Checkbox";
-import { DiscordIcon, GotifyIcon, LunaSeaIcon, NotifiarrIcon, PushoverIcon, TelegramIcon } from "./_components";
+import { DiscordIcon, GotifyIcon, LunaSeaIcon, NotifiarrIcon, NtfyIcon, PushoverIcon, TelegramIcon } from "./_components";
 
 export const notificationKeys = {
   all: ["notifications"] as const,
@@ -76,6 +76,7 @@ const iconComponentMap: componentMapType = {
   TELEGRAM: <span className={iconStyle}><TelegramIcon /> Telegram</span>,
   PUSHOVER: <span className={iconStyle}><PushoverIcon /> Pushover</span>,
   GOTIFY: <span className={iconStyle}><GotifyIcon /> Gotify</span>,
+  NTFY: <span className={iconStyle}><NtfyIcon /> ntfy</span>,
   LUNASEA: <span className={iconStyle}><LunaSeaIcon /> LunaSea</span>
 };
 

web/src/screens/settings/_components.tsx

@@ -127,6 +127,14 @@ export const GotifyIcon = () => (
   </svg>
 );
 
+export const NtfyIcon = () => (
+  <svg  {...commonSVGProps}  viewBox="0 0 50.8 50.8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M44.98 39.952V10.848H7.407v27.814l-1.587 4.2 8.393-2.91Z" />
+    <path d="M27.781 31.485h8.202" />
+    <path d="m65.979 100.011 9.511 5.492-9.511 5.491"  transform="translate(-51.81 -80.758)"/>
+  </svg>
+);
+
 export const LunaSeaIcon = () => (
   <svg {...commonSVGProps} viewBox="0 0 750 750">
     <path d="m554.69 180.46c-333.63 0-452.75 389.23-556.05 389.23 185.37 0 237.85-247.18 419.12-247.18l47.24-102.05z"/>

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" | "LUNASEA";
+type NotificationType = "DISCORD" | "NOTIFIARR" | "TELEGRAM" | "PUSHOVER" | "GOTIFY" | "NTFY" | "LUNASEA";
 type NotificationEvent =
   "PUSH_APPROVED"
   | "PUSH_REJECTED"