From 67f29fd9f45b22d0abefe3a8cd56c45278b47238 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 15 Dec 2024 12:24:21 -0600
Subject: [PATCH] frontend

---
 web/src/api/ws.tsx                                  | 11 +++++++++++
 .../views/settings/NotificationsSettingsView.tsx    | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index 9b8924d1b..0c47d49f0 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -413,3 +413,14 @@ export function useTrackedObjectUpdate(): { payload: string } {
   } = useWs("tracked_object_update", "");
   return useDeepMemo(JSON.parse(payload as string));
 }
+
+export function useNotificationTest(): {
+  payload: string;
+  send: (payload: string, retain?: boolean) => void;
+} {
+  const {
+    value: { payload },
+    send,
+  } = useWs("notification_test", "notification_test");
+  return { payload: payload as string, send };
+}
diff --git a/web/src/views/settings/NotificationsSettingsView.tsx b/web/src/views/settings/NotificationsSettingsView.tsx
index 751817245..51206ed68 100644
--- a/web/src/views/settings/NotificationsSettingsView.tsx
+++ b/web/src/views/settings/NotificationsSettingsView.tsx
@@ -1,3 +1,4 @@
+import { useNotificationTest } from "@/api/ws";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import {
@@ -47,6 +48,8 @@ export default function NotificationView({
     },
   );
 
+  const { send: sendTestNotification } = useNotificationTest();
+
   // status bar
 
   const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
@@ -296,7 +299,7 @@ export default function NotificationView({
             </form>
           </Form>
 
-          <div className="mt-4 space-y-6">
+          <div className="mt-4 gap-2 space-y-6">
             <div className="space-y-3">
               <Separator className="my-2 flex bg-secondary" />
               <Button
@@ -338,6 +341,14 @@ export default function NotificationView({
               >
                 {`${registration != null ? "Unregister" : "Register"} for notifications on this device`}
               </Button>
+              {registration != null && (
+                <Button
+                  aria-label="Send a test notification"
+                  onClick={() => sendTestNotification("notification_test")}
+                >
+                  Send a test notification
+                </Button>
+              )}
             </div>
           </div>
         </div>