[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+const inputGroupAddonVariants = cva(
+ "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ align: {
+ "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+ "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+ "block-start":
+ "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+ "block-end":
+ "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+ },
+ },
+ defaultVariants: {
+ align: "inline-start",
+ },
+ },
+);
+
+function InputGroupAddon({
+ className,
+ align = "inline-start",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps
) {
+ return (
+ {
+ if ((e.target as HTMLElement).closest("button")) {
+ return;
+ }
+ e.currentTarget.parentElement?.querySelector("input")?.focus();
+ }}
+ {...props}
+ />
+ );
+}
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+ variants: {
+ size: {
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+ sm: "",
+ "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+ },
+ },
+ defaultVariants: {
+ size: "xs",
+ },
+});
+
+function InputGroupButton({
+ className,
+ type = "button",
+ variant = "ghost",
+ size = "xs",
+ ...props
+}: Omit
, "size"> &
+ VariantProps) {
+ return (
+
+ );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ );
+}
+
+export {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupText,
+ InputGroupInput,
+ InputGroupTextarea,
+};
diff --git a/frontend/src/components/ui/item.tsx b/frontend/src/components/ui/item.tsx
new file mode 100644
index 0000000..c33dfc7
--- /dev/null
+++ b/frontend/src/components/ui/item.tsx
@@ -0,0 +1,182 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
+
+const itemVariants = cva(
+ "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+ {
+ variants: {
+ variant: {
+ default: "border-transparent",
+ outline: "border-border",
+ muted: "border-transparent bg-muted/50",
+ },
+ size: {
+ default: "gap-2.5 px-3 py-2.5",
+ sm: "gap-2.5 px-3 py-2.5",
+ xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+function Item({
+ className,
+ variant = "default",
+ size = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot.Root : "div";
+ return (
+
+ );
+}
+
+const itemMediaVariants = cva(
+ "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ icon: "[&_svg:not([class*='size-'])]:size-4",
+ image:
+ "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+function ItemMedia({
+ className,
+ variant = "default",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+ return (
+ a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export {
+ Item,
+ ItemMedia,
+ ItemContent,
+ ItemActions,
+ ItemGroup,
+ ItemSeparator,
+ ItemTitle,
+ ItemDescription,
+ ItemHeader,
+ ItemFooter,
+};
diff --git a/frontend/src/lib/notifications.ts b/frontend/src/lib/notifications.ts
new file mode 100644
index 0000000..c91acd5
--- /dev/null
+++ b/frontend/src/lib/notifications.ts
@@ -0,0 +1,66 @@
+import { fetcher } from "./api";
+
+export type NotificationStatus = "unknown" | "success" | "error" | "healthy" | "unhealthy";
+export const notificationTypes = ["discord"] as const;
+export type NotificationType = (typeof notificationTypes)[number];
+
+export interface Notification {
+ id: string;
+ name: string;
+ enabled: boolean;
+ enableByDefault: boolean;
+ status: NotificationStatus;
+ type: NotificationType;
+ config?: string;
+ applicationIds: string[];
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface UpsertNotificationRequest {
+ name: string;
+ enabled?: boolean;
+ enableByDefault?: boolean;
+ type: NotificationType;
+ config: string;
+ applicationIds?: string[];
+}
+
+export function isHttpUrl(rawUrl: string): boolean {
+ try {
+ const parsedUrl = new URL(rawUrl);
+ return parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:";
+ } catch {
+ return false;
+ }
+}
+
+export function normalizeNotificationApplicationIds(ids: string[]): string[] {
+ return Array.from(new Set(ids));
+}
+
+export function createNotification(data: UpsertNotificationRequest): Promise {
+ return fetcher("/notifications", "POST", data);
+}
+
+export function updateNotification(
+ id: string,
+ data: UpsertNotificationRequest,
+): Promise {
+ return fetcher(`/notifications/${id}`, "PUT", data);
+}
+
+export function deleteNotification(id: string): Promise {
+ return fetcher(`/notifications/${id}`, "DELETE");
+}
+
+export function testNotification(id: string, message?: string): Promise<{ message: string }> {
+ const trimmedMessage = message?.trim();
+ if (trimmedMessage) {
+ return fetcher<{ message: string }>(`/notifications/${id}/test`, "POST", {
+ message: trimmedMessage,
+ });
+ }
+
+ return fetcher<{ message: string }>(`/notifications/${id}/test`, "POST");
+}
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index 16faa6c..6817ba7 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -16,6 +16,7 @@ import { Route as AuthenticatedSettingsRouteImport } from './routes/_authenticat
import { Route as AuthenticatedAdminRouteImport } from './routes/_authenticated/admin'
import { Route as AuthenticatedSettingsIndexRouteImport } from './routes/_authenticated/settings/index'
import { Route as AuthenticatedRepositoriesIndexRouteImport } from './routes/_authenticated/repositories/index'
+import { Route as AuthenticatedNotificationsIndexRouteImport } from './routes/_authenticated/notifications/index'
import { Route as AuthenticatedApplicationsIndexRouteImport } from './routes/_authenticated/applications/index'
import { Route as AuthenticatedAgentsIndexRouteImport } from './routes/_authenticated/agents/index'
import { Route as AuthenticatedAdminIndexRouteImport } from './routes/_authenticated/admin/index'
@@ -62,6 +63,12 @@ const AuthenticatedRepositoriesIndexRoute =
path: '/repositories/',
getParentRoute: () => AuthenticatedRoute,
} as any)
+const AuthenticatedNotificationsIndexRoute =
+ AuthenticatedNotificationsIndexRouteImport.update({
+ id: '/notifications/',
+ path: '/notifications/',
+ getParentRoute: () => AuthenticatedRoute,
+ } as any)
const AuthenticatedApplicationsIndexRoute =
AuthenticatedApplicationsIndexRouteImport.update({
id: '/applications/',
@@ -128,6 +135,7 @@ export interface FileRoutesByFullPath {
'/admin/': typeof AuthenticatedAdminIndexRoute
'/agents/': typeof AuthenticatedAgentsIndexRoute
'/applications/': typeof AuthenticatedApplicationsIndexRoute
+ '/notifications/': typeof AuthenticatedNotificationsIndexRoute
'/repositories/': typeof AuthenticatedRepositoriesIndexRoute
'/settings/': typeof AuthenticatedSettingsIndexRoute
'/applications/$id/': typeof AuthenticatedApplicationsIdIndexRoute
@@ -143,6 +151,7 @@ export interface FileRoutesByTo {
'/admin': typeof AuthenticatedAdminIndexRoute
'/agents': typeof AuthenticatedAgentsIndexRoute
'/applications': typeof AuthenticatedApplicationsIndexRoute
+ '/notifications': typeof AuthenticatedNotificationsIndexRoute
'/repositories': typeof AuthenticatedRepositoriesIndexRoute
'/settings': typeof AuthenticatedSettingsIndexRoute
'/applications/$id': typeof AuthenticatedApplicationsIdIndexRoute
@@ -162,6 +171,7 @@ export interface FileRoutesById {
'/_authenticated/admin/': typeof AuthenticatedAdminIndexRoute
'/_authenticated/agents/': typeof AuthenticatedAgentsIndexRoute
'/_authenticated/applications/': typeof AuthenticatedApplicationsIndexRoute
+ '/_authenticated/notifications/': typeof AuthenticatedNotificationsIndexRoute
'/_authenticated/repositories/': typeof AuthenticatedRepositoriesIndexRoute
'/_authenticated/settings/': typeof AuthenticatedSettingsIndexRoute
'/_authenticated/applications/$id/': typeof AuthenticatedApplicationsIdIndexRoute
@@ -181,6 +191,7 @@ export interface FileRouteTypes {
| '/admin/'
| '/agents/'
| '/applications/'
+ | '/notifications/'
| '/repositories/'
| '/settings/'
| '/applications/$id/'
@@ -196,6 +207,7 @@ export interface FileRouteTypes {
| '/admin'
| '/agents'
| '/applications'
+ | '/notifications'
| '/repositories'
| '/settings'
| '/applications/$id'
@@ -214,6 +226,7 @@ export interface FileRouteTypes {
| '/_authenticated/admin/'
| '/_authenticated/agents/'
| '/_authenticated/applications/'
+ | '/_authenticated/notifications/'
| '/_authenticated/repositories/'
| '/_authenticated/settings/'
| '/_authenticated/applications/$id/'
@@ -275,6 +288,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof AuthenticatedRepositoriesIndexRouteImport
parentRoute: typeof AuthenticatedRoute
}
+ '/_authenticated/notifications/': {
+ id: '/_authenticated/notifications/'
+ path: '/notifications'
+ fullPath: '/notifications/'
+ preLoaderRoute: typeof AuthenticatedNotificationsIndexRouteImport
+ parentRoute: typeof AuthenticatedRoute
+ }
'/_authenticated/applications/': {
id: '/_authenticated/applications/'
path: '/applications'
@@ -381,6 +401,7 @@ interface AuthenticatedRouteChildren {
AuthenticatedIndexRoute: typeof AuthenticatedIndexRoute
AuthenticatedAgentsIndexRoute: typeof AuthenticatedAgentsIndexRoute
AuthenticatedApplicationsIndexRoute: typeof AuthenticatedApplicationsIndexRoute
+ AuthenticatedNotificationsIndexRoute: typeof AuthenticatedNotificationsIndexRoute
AuthenticatedRepositoriesIndexRoute: typeof AuthenticatedRepositoriesIndexRoute
AuthenticatedApplicationsIdIndexRoute: typeof AuthenticatedApplicationsIdIndexRoute
}
@@ -391,6 +412,7 @@ const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
AuthenticatedIndexRoute: AuthenticatedIndexRoute,
AuthenticatedAgentsIndexRoute: AuthenticatedAgentsIndexRoute,
AuthenticatedApplicationsIndexRoute: AuthenticatedApplicationsIndexRoute,
+ AuthenticatedNotificationsIndexRoute: AuthenticatedNotificationsIndexRoute,
AuthenticatedRepositoriesIndexRoute: AuthenticatedRepositoriesIndexRoute,
AuthenticatedApplicationsIdIndexRoute: AuthenticatedApplicationsIdIndexRoute,
}
diff --git a/frontend/src/routes/_authenticated/notifications/index.tsx b/frontend/src/routes/_authenticated/notifications/index.tsx
new file mode 100644
index 0000000..b500787
--- /dev/null
+++ b/frontend/src/routes/_authenticated/notifications/index.tsx
@@ -0,0 +1,205 @@
+import { useMemo, useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { Bell, EllipsisVertical, Search, Send, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { NotificationStatusBadge } from "@/components/badges/notification-status-badge";
+import ConfirmationDialog from "@/components/dialogs/confirm-dialog";
+import UpsertNotificationDialog from "@/components/dialogs/upsert-notification";
+import { LayoutToggleGroup } from "@/components/layout-toggle-group";
+import { columns } from "@/components/tables/notifications/columns";
+import { NotificationsDataTable } from "@/components/tables/notifications/data-table";
+import { Button } from "@/components/ui/button";
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { useFetch } from "@/lib/api";
+import { usePreferredLayout } from "@/lib/layout-preference";
+import { deleteNotification, type Notification, testNotification } from "@/lib/notifications";
+import { m } from "@/lib/paraglide/messages";
+import { toSearchableText } from "@/lib/utils";
+
+export const Route = createFileRoute("/_authenticated/notifications/")({
+ component: NotificationsPage,
+ head: () => ({
+ meta: [{ title: m.pageNotifications() }],
+ }),
+});
+
+function NotificationsPage() {
+ const { data, isLoading } = useFetch("/notifications?includeConfig=true");
+ const [searchQuery, setSearchQuery] = useState("");
+ const { preferredLayout: viewMode, setPreferredLayout: setViewMode } = usePreferredLayout();
+
+ async function handleDelete(item: Notification) {
+ try {
+ await deleteNotification(item.id);
+ const identifier = item.name.trim() || item.id;
+ toast.success(m.notificationDeleted({ name: identifier }));
+ } catch (err) {
+ toast.error(err instanceof Error ? err.message : m.failedDeleteNotification());
+ }
+ }
+
+ async function handleTest(item: Notification) {
+ try {
+ await testNotification(item.id);
+ toast.success(m.testNotificationSent());
+ } catch (err) {
+ toast.error(err instanceof Error ? err.message : m.failedSendTestNotification());
+ }
+ }
+
+ const filteredNotifications = useMemo(() => {
+ const query = searchQuery.trim().toLowerCase();
+ if (!query) {
+ return data ?? [];
+ }
+
+ return (
+ data?.filter((notification) => {
+ return toSearchableText(notification).includes(query);
+ }) ?? []
+ );
+ }, [data, searchQuery]);
+
+ return (
+
+
+
+
{m.pageNotifications()}
+
{m.notificationsPageDescription()}
+
+
+
+
+ {isLoading &&
{m.loadingNotifications()}
}
+
+
+
+
+
+ setSearchQuery(event.target.value)}
+ placeholder={m.searchNotifications()}
+ className="border-border bg-muted pl-9"
+ />
+
+
+
+
+
+
+
+ {viewMode === "grid" ? (
+ <>
+ {filteredNotifications.length === 0 && !isLoading ? (
+
+
{m.noNotificationsFound()}
+
+ {m.noNotificationsFoundDescription()}
+
+
+ ) : null}
+
+
+ {filteredNotifications.map((notification) => (
+
+
+
+
+
+
+
+
+ {m.actions()}
+ {
+ void handleTest(notification);
+ }}
+ >
+
+ {m.sendTest()}
+
+
+ {
+ void handleDelete(notification);
+ }}
+ title={m.deleteNotificationTitle()}
+ description={m.deleteNotificationDescription({
+ name: notification.name,
+ })}
+ triggerText={
+ <>
+
+ {m.delete()}
+
+ }
+ asDropdownItem
+ />
+
+
+
+
+
+
+
+
+
+
+ {notification.name}
+
+
+
+
+
+
+
+
+
+
{m.columnType()}
+
{notification.type}
+
+
+
{m.appsCount()}
+
{notification.applicationIds.length}
+
+
+
+ {notification.enabled ? m.enabled() : m.disabled()}
+
+
+ {new Date(notification.updatedAt).toLocaleString()}
+
+
+
+
+ ))}
+
+
+ ) : (
+
+ )}
+
+