NotificationAPI: Correctly request browser permissions

2 files changed, 16 insertions, 2 deletions

diff --git a/src/api/Notifications/Notifications.tsx b/src/api/Notifications/Notifications.tsx
index 9c599aa..46472ad 100644
--- a/src/api/Notifications/Notifications.tsx
+++ b/src/api/Notifications/Notifications.tsx
@@ -76,8 +76,15 @@ function shouldBeNative() {
     return false;
 }
 
-export function showNotification(data: NotificationData) {
-    if (shouldBeNative()) {
+export async function requestPermission() {
+    return (
+        Notification.permission === "granted" ||
+        (Notification.permission !== "denied" && (await Notification.requestPermission()) === "granted")
+    );
+}
+
+export async function showNotification(data: NotificationData) {
+    if (shouldBeNative() && await requestPermission()) {
         const { title, body, icon, image, onClick = null, onClose = null } = data;
         const n = new Notification(title, {
             body,
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
index 6ea1ca9..9880872 100644
--- a/src/components/VencordSettings/VencordTab.tsx
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -21,6 +21,7 @@ import { useSettings } from "@api/settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { ErrorCard } from "@components/ErrorCard";
 import IpcEvents from "@utils/IpcEvents";
 import { Margins } from "@utils/margins";
 import { identity, useAwaiter } from "@utils/misc";
@@ -141,6 +142,12 @@ function VencordSettings() {
 
 
             <Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
+            {notifSettings.useNative !== "never" && Notification.permission === "denied" && (
+                <ErrorCard style={{ padding: "1em" }} className={Margins.bottom8}>
+                    <Forms.FormTitle tag="h5">Desktop Notification Permission denied</Forms.FormTitle>
+                    <Forms.FormText>You have denied Notification Permissions. Thus, Desktop notifications will not work!</Forms.FormText>
+                </ErrorCard>
+            )}
             <Forms.FormText className={Margins.bottom8}>
                 Some plugins may show you notifications. These come in two styles:
                 <ul>