feat: send notification for new entries with Gotify, ntfy or Pushover, configurable per feed.

commafeed-client/src/components/content/add/Subscribe.tsx

@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/react/macro"
-import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
+import { Box, Button, Checkbox, Group, Stack, Stepper, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { useState } from "react"
 import { useAsyncCallback } from "react-async-hook"
@@ -28,6 +28,7 @@ export function Subscribe() {
             url: "",
             title: "",
             categoryId: Constants.categories.all.id,
+            notifyOnNewEntries: true,
         },
     })
 
@@ -103,6 +104,10 @@ export function Subscribe() {
                             <TextInput label={<Trans>Feed URL</Trans>} {...step1Form.getInputProps("url")} disabled />
                             <TextInput label={<Trans>Feed name</Trans>} {...step1Form.getInputProps("title")} required autoFocus />
                             <CategorySelect label={<Trans>Category</Trans>} {...step1Form.getInputProps("categoryId")} clearable />
+                            <Checkbox
+                                label={<Trans>Receive notifications</Trans>}
+                                {...step1Form.getInputProps("notifyOnNewEntries", { type: "checkbox" })}
+                            />
                         </Stack>
                     </Stepper.Step>
                 </Stepper>

commafeed-client/src/components/settings/NotificationSettings.tsx

@@ -0,0 +1,133 @@
+import { Trans } from "@lingui/react/macro"
+import { Divider, Select, Stack, TextInput } from "@mantine/core"
+import { useEffect, useState } from "react"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { NotificationService as NotificationServiceType, NotificationSettings as NotificationSettingsType } from "@/app/types"
+import { changeNotificationSettings } from "@/app/user/thunks"
+
+function useDebouncedSave(value: string, settingsKey: string, dispatch: ReturnType<typeof useAppDispatch>) {
+    const [localValue, setLocalValue] = useState(value)
+
+    useEffect(() => {
+        setLocalValue(value)
+    }, [value])
+
+    const onBlur = async () => {
+        if (localValue !== value) {
+            await dispatch(changeNotificationSettings({ [settingsKey]: localValue }))
+        }
+    }
+
+    return { localValue, setLocalValue, onBlur }
+}
+
+function toServiceValue(settings?: NotificationSettingsType): NotificationServiceType {
+    if (settings?.enabled && settings.type) {
+        return settings.type
+    }
+    return "disabled"
+}
+
+export function NotificationSettings() {
+    const notificationSettings = useAppSelector(state => state.user.settings?.notificationSettings)
+    const dispatch = useAppDispatch()
+
+    const serviceValue = toServiceValue(notificationSettings)
+
+    const serverUrl = useDebouncedSave(notificationSettings?.serverUrl ?? "", "serverUrl", dispatch)
+    const token = useDebouncedSave(notificationSettings?.token ?? "", "token", dispatch)
+    const userKey = useDebouncedSave(notificationSettings?.userKey ?? "", "userKey", dispatch)
+    const topic = useDebouncedSave(notificationSettings?.topic ?? "", "topic", dispatch)
+
+    const onServiceChange = async (value: string | null) => {
+        if (value === "disabled" || !value) {
+            await dispatch(changeNotificationSettings({ enabled: false, type: undefined }))
+        } else {
+            await dispatch(changeNotificationSettings({ enabled: true, type: value as Exclude<NotificationServiceType, "disabled"> }))
+        }
+    }
+
+    return (
+        <Stack>
+            <Divider
+                label={
+                    <Trans>
+                        <b>Notifications</b>
+                    </Trans>
+                }
+            />
+
+            <Select
+                label={<Trans>Notification service</Trans>}
+                data={[
+                    { value: "disabled", label: "Disabled" },
+                    { value: "ntfy", label: "ntfy" },
+                    { value: "gotify", label: "Gotify" },
+                    { value: "pushover", label: "Pushover" },
+                ]}
+                value={serviceValue}
+                onChange={onServiceChange}
+            />
+
+            {serviceValue === "ntfy" && (
+                <>
+                    <TextInput
+                        label={<Trans>Server URL</Trans>}
+                        placeholder="https://ntfy.sh"
+                        value={serverUrl.localValue}
+                        onChange={e => serverUrl.setLocalValue(e.currentTarget.value)}
+                        onBlur={serverUrl.onBlur}
+                    />
+                    <TextInput
+                        label={<Trans>Topic</Trans>}
+                        placeholder="commafeed"
+                        value={topic.localValue}
+                        onChange={e => topic.setLocalValue(e.currentTarget.value)}
+                        onBlur={topic.onBlur}
+                    />
+                    <TextInput
+                        label={<Trans>Access token (optional)</Trans>}
+                        value={token.localValue}
+                        onChange={e => token.setLocalValue(e.currentTarget.value)}
+                        onBlur={token.onBlur}
+                    />
+                </>
+            )}
+
+            {serviceValue === "gotify" && (
+                <>
+                    <TextInput
+                        label={<Trans>Server URL</Trans>}
+                        placeholder="https://gotify.example.com"
+                        value={serverUrl.localValue}
+                        onChange={e => serverUrl.setLocalValue(e.currentTarget.value)}
+                        onBlur={serverUrl.onBlur}
+                    />
+                    <TextInput
+                        label={<Trans>App token</Trans>}
+                        value={token.localValue}
+                        onChange={e => token.setLocalValue(e.currentTarget.value)}
+                        onBlur={token.onBlur}
+                    />
+                </>
+            )}
+
+            {serviceValue === "pushover" && (
+                <>
+                    <TextInput
+                        label={<Trans>API token</Trans>}
+                        value={token.localValue}
+                        onChange={e => token.setLocalValue(e.currentTarget.value)}
+                        onBlur={token.onBlur}
+                    />
+                    <TextInput
+                        label={<Trans>User key</Trans>}
+                        value={userKey.localValue}
+                        onChange={e => userKey.setLocalValue(e.currentTarget.value)}
+                        onBlur={userKey.onBlur}
+                    />
+                </>
+            )}
+        </Stack>
+    )
+}