diff --git a/src/api/Notifications/Notifications.tsx b/src/api/Notifications/Notifications.tsx
index 9c599aa65..46472ad36 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 6ea1ca9d2..98808728a 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() {
Notification Style
+ {notifSettings.useNative !== "never" && Notification.permission === "denied" && (
+
+ Desktop Notification Permission denied
+ You have denied Notification Permissions. Thus, Desktop notifications will not work!
+
+ )}
Some plugins may show you notifications. These come in two styles: