arugh

packages/backend/src/notifications/notification-targets.controller.ts

@@ -0,0 +1,33 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Inject,
+  Param,
+  Post,
+} from "@nestjs/common"
+import { NotificationsService } from "./notifications.service"
+
+@Controller("notification-targets")
+export class NotificationTargetsController {
+  constructor(
+    @Inject(NotificationsService)
+    private readonly notificationsService: NotificationsService,
+  ) {}
+
+  @Get()
+  list() {
+    return this.notificationsService.listTargets()
+  }
+
+  @Post()
+  create(@Body("appriseUrl") appriseUrl: string) {
+    return this.notificationsService.createTarget(appriseUrl)
+  }
+
+  @Delete(":id")
+  delete(@Param("id") id: number) {
+    return this.notificationsService.deleteTarget(id)
+  }
+}

packages/backend/src/notifications/notifications.module.ts

@@ -3,10 +3,11 @@ import { NotificationsService } from "./notifications.service"
 import { TypeOrmModule } from "@nestjs/typeorm"
 import { NotificationTarget } from "./notification-target.entity"
 import { NotificationsController } from "./notifications.controller"
+import { NotificationTargetsController } from "./notification-targets.controller"
 
 @Module({
   imports: [TypeOrmModule.forFeature([NotificationTarget])],
-  controllers: [NotificationsController],
+  controllers: [NotificationsController, NotificationTargetsController],
   providers: [NotificationsService],
   exports: [NotificationsService],
 })

packages/backend/src/notifications/notifications.service.ts

@@ -21,10 +21,18 @@ export class NotificationsService {
     private readonly eventEmitter: EventEmitter2,
   ) {}
 
+  listTargets() {
+    return this.notificationTargetRepository.find()
+  }
+
   createTarget(appriseUrl: string) {
     return this.notificationTargetRepository.save({ appriseUrl })
   }
 
+  deleteTarget(id: number) {
+    return this.notificationTargetRepository.delete(id)
+  }
+
   async sendNotification(
     title: string,
     message: string,

packages/frontend/src/app.css

@@ -89,6 +89,10 @@ p {
   @apply leading-7 [&:not(:first-child)]:mt-6;
 }
 
+p a {
+  @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
+}
+
 body,
 html {
   margin: 0;

packages/frontend/src/lib/components/NotificationTargetConfig/NotificationTargetConfig.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import * as Table from "$lib/components/ui/table"
+  import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"
+  import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome"
+  import { onMount } from "svelte"
+  import { Button } from "../ui/button"
+  import { Input } from "../ui/input"
+
+  interface NotificationTarget {
+    id: number
+    appriseUrl: string
+  }
+
+  let targets: NotificationTarget[] = []
+  let newTargetUrl: string = ""
+
+  async function loadTargets() {
+    targets = await getTargets()
+  }
+
+  async function createTarget() {
+    await fetch("/api/notification-targets", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ appriseUrl: newTargetUrl }),
+    })
+    newTargetUrl = ""
+    loadTargets()
+  }
+
+  async function getTargets() {
+    const response = await fetch("/api/notification-targets")
+    return await response.json()
+  }
+
+  async function deleteTarget(id: number) {
+    await fetch(`/api/notification-targets/${id}`, { method: "DELETE" })
+    loadTargets()
+  }
+
+  onMount(() => {
+    loadTargets()
+  })
+</script>
+
+<Table.Root>
+  <Table.Header>
+    <Table.Row>
+      <Table.Head class="w-full">Apprise URL</Table.Head>
+      <Table.Head class="text-right"></Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {#each targets as target}
+      <Table.Row>
+        <Table.Cell class="font-mono">{target.appriseUrl}</Table.Cell>
+        <Table.Cell class="text-right">
+          <Button on:click={() => deleteTarget(target.id)} variant="destructive" size="sm" title="Delete">
+            <FontAwesomeIcon icon={faTrash} />
+          </Button>
+        </Table.Cell>
+      </Table.Row>
+    {/each}
+    <Table.Row class="hover:bg-inherit">
+      <Table.Cell>
+        <Input
+          class="font-mono"
+          bind:value={newTargetUrl}
+          placeholder="tgram://bottoken/ChatID"
+        />
+      </Table.Cell>
+      <Table.Cell class="text-right">
+        <Button on:click={() => createTarget()} size="sm" title="Add">
+          <FontAwesomeIcon icon={faPlus} />
+        </Button>
+      </Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>

packages/frontend/src/routes/config/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ImportDirectoryConfig from "$lib/components/ImportDirectoryConfig/ImportDirectoryConfig.svelte"
+  import NotificationTargetConfig from "$lib/components/NotificationTargetConfig/NotificationTargetConfig.svelte"
   import * as Card from "$lib/components/ui/card"
 </script>
 
@@ -19,9 +20,17 @@
   <Card.Root>
     <Card.Header>
       <Card.Title>Notifications</Card.Title>
-      <Card.Description>Get notified of import events on your preferred platform.</Card.Description>
+      <Card.Description>
+        Get notified of import events on your preferred platform.
+        Learn about supported platforms in the
+        <a
+          href="https://github.com/caronc/apprise#supported-notifications"
+          target="_blank"
+        >Apprise documentation</a>.
+      </Card.Description>
     </Card.Header>
     <Card.Content>
+      <NotificationTargetConfig />
     </Card.Content>
   </Card.Root>
 </div>