Add notification settings, which allows muting decky/plugin toast notifications (#479)

* Add notification settings, which allows muting decky/plugin toast notifications

* Fix typos

3 files changed, 49 insertions, 0 deletions

diff --git a/frontend/src/components/DeckyState.tsx b/frontend/src/components/DeckyState.tsx
index 920985b3..d20c8d86 100644
--- a/frontend/src/components/DeckyState.tsx
+++ b/frontend/src/components/DeckyState.tsx
@@ -1,5 +1,6 @@
 import { FC, createContext, useContext, useEffect, useState } from 'react';
 
+import { DEFAULT_NOTIFICATION_SETTINGS, NotificationSettings } from '../notification-service';
 import { Plugin } from '../plugin';
 import { PluginUpdateMapping } from '../store';
 import { VerInfo } from '../updater';
@@ -13,6 +14,7 @@ interface PublicDeckyState {
   hasLoaderUpdate?: boolean;
   isLoaderUpdating: boolean;
   versionInfo: VerInfo | null;
+  notificationSettings: NotificationSettings;
   userInfo: UserInfo | null;
 }
 
@@ -30,6 +32,7 @@ export class DeckyState {
   private _hasLoaderUpdate: boolean = false;
   private _isLoaderUpdating: boolean = false;
   private _versionInfo: VerInfo | null = null;
+  private _notificationSettings = DEFAULT_NOTIFICATION_SETTINGS;
   private _userInfo: UserInfo | null = null;
 
   public eventBus = new EventTarget();
@@ -44,6 +47,7 @@ export class DeckyState {
       hasLoaderUpdate: this._hasLoaderUpdate,
       isLoaderUpdating: this._isLoaderUpdating,
       versionInfo: this._versionInfo,
+      notificationSettings: this._notificationSettings,
       userInfo: this._userInfo,
     };
   }
@@ -93,6 +97,11 @@ export class DeckyState {
     this.notifyUpdate();
   }
 
+  setNotificationSettings(notificationSettings: NotificationSettings) {
+    this._notificationSettings = notificationSettings;
+    this.notifyUpdate();
+  }
+
   setUserInfo(userInfo: UserInfo) {
     this._userInfo = userInfo;
     this.notifyUpdate();
diff --git a/frontend/src/components/settings/pages/general/NotificationSettings.tsx b/frontend/src/components/settings/pages/general/NotificationSettings.tsx
new file mode 100644
index 00000000..21c2fd82
--- /dev/null
+++ b/frontend/src/components/settings/pages/general/NotificationSettings.tsx
@@ -0,0 +1,35 @@
+import { Field, Toggle } from 'decky-frontend-lib';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDeckyState } from '../../../DeckyState';
+
+const NotificationSettings: FC = () => {
+  const { notificationSettings } = useDeckyState();
+  const notificationService = window.DeckyPluginLoader.notificationService;
+
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Field label={t('SettingsGeneralIndex.notifications.decky_updates_label')}>
+        <Toggle
+          value={notificationSettings.deckyUpdates}
+          onChange={(deckyUpdates) => {
+            notificationService.update({ ...notificationSettings, deckyUpdates });
+          }}
+        />
+      </Field>
+      <Field label={t('SettingsGeneralIndex.notifications.plugin_updates_label')}>
+        <Toggle
+          value={notificationSettings.pluginUpdates}
+          onChange={(pluginUpdates) => {
+            notificationService.update({ ...notificationSettings, pluginUpdates });
+          }}
+        />
+      </Field>
+    </>
+  );
+};
+
+export default NotificationSettings;
diff --git a/frontend/src/components/settings/pages/general/index.tsx b/frontend/src/components/settings/pages/general/index.tsx
index 96ae6782..6fc62a46 100644
--- a/frontend/src/components/settings/pages/general/index.tsx
+++ b/frontend/src/components/settings/pages/general/index.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useDeckyState } from '../../../DeckyState';
 import BranchSelect from './BranchSelect';
+import NotificationSettings from './NotificationSettings';
 import StoreSelect from './StoreSelect';
 import UpdaterSettings from './Updater';
 
@@ -28,6 +29,10 @@ export default function GeneralSettings({
         <StoreSelect />
       </DialogControlsSection>
       <DialogControlsSection>
+        <DialogControlsSectionHeader>{t('SettingsGeneralIndex.notifications.header')}</DialogControlsSectionHeader>
+        <NotificationSettings />
+      </DialogControlsSection>
+      <DialogControlsSection>
         <DialogControlsSectionHeader>{t('SettingsGeneralIndex.other.header')}</DialogControlsSectionHeader>
         <Field label={t('SettingsGeneralIndex.developer_mode.label')}>
           <Toggle