feat: add notification layout setting

src/stores/settings/notifications.js

@@ -119,6 +119,7 @@ export const useNotificationsSettingsStore = defineStore(
         const notificationTTSTest = ref('');
         const notificationPosition = ref('topCenter');
         const notificationTimeout = ref(3000);
+        const notificationLayout = ref('notification-center');
 
         async function initNotificationsSettings() {
             const [
@@ -136,7 +137,8 @@ export const useNotificationsSettingsStore = defineStore(
                 sharedFeedFiltersConfig,
                 notificationTTSVoiceConfig,
                 notificationPositionConfig,
-                notificationTimeoutConfig
+                notificationTimeoutConfig,
+                notificationLayoutConfig
             ] = await Promise.all([
                 configRepository.getString('VRCX_overlayToast', 'Game Running'),
                 configRepository.getBool('VRCX_overlayNotifications', true),
@@ -158,7 +160,11 @@ export const useNotificationsSettingsStore = defineStore(
                     'VRCX_notificationPosition',
                     'topCenter'
                 ),
-                configRepository.getString('VRCX_notificationTimeout', '3000')
+                configRepository.getString('VRCX_notificationTimeout', '3000'),
+                configRepository.getString(
+                    'VRCX_notificationLayout',
+                    'notification-center'
+                )
             ]);
 
             overlayToast.value = overlayToastConfig;
@@ -177,6 +183,7 @@ export const useNotificationsSettingsStore = defineStore(
             TTSvoices.value = speechSynthesis.getVoices();
             notificationPosition.value = notificationPositionConfig;
             notificationTimeout.value = Number(notificationTimeoutConfig);
+            notificationLayout.value = notificationLayoutConfig;
 
             initSharedFeedFilters();
 
@@ -424,6 +431,14 @@ export const useNotificationsSettingsStore = defineStore(
             vrStore.updateVRConfigVars();
         }
 
+        /**
+         * @param {string} value
+         */
+        function setNotificationLayout(value) {
+            notificationLayout.value = value;
+            configRepository.setString('VRCX_notificationLayout', value);
+        }
+
         function promptNotificationTimeout() {
             modalStore
                 .prompt({
@@ -470,6 +485,7 @@ export const useNotificationsSettingsStore = defineStore(
             notificationTTSTest,
             notificationPosition,
             notificationTimeout,
+            notificationLayout,
 
             setOverlayToast,
             setOpenVR,
@@ -488,6 +504,7 @@ export const useNotificationsSettingsStore = defineStore(
             testNotificationTTS,
             speak,
             changeNotificationPosition,
+            setNotificationLayout,
             setNotificationTimeout,
             promptNotificationTimeout
         };

src/stores/ui.js

@@ -16,6 +16,7 @@ import { showAvatarDialog } from '../coordinators/avatarCoordinator';
 import { showUserDialog } from '../coordinators/userCoordinator';
 import { useInstanceStore } from './instance';
 import { useNotificationStore } from './notification';
+import { useNotificationsSettingsStore } from './settings/notifications';
 import { useSearchStore } from './search';
 import { useUserStore } from './user';
 import { useWorldStore } from './world';
@@ -286,6 +287,11 @@ export const useUiStore = defineStore('Ui', () => {
                 const name = String(routeName);
                 removeNotify(name);
                 if (name === 'notification') {
+                    const notificationsSettingsStore = useNotificationsSettingsStore();
+                    if (notificationsSettingsStore.notificationLayout === 'notification-center') {
+                        router.replace({ name: 'feed' });
+                        return;
+                    }
                     notificationStore.clearUnseenNotifications();
                 }
             }
@@ -314,10 +320,19 @@ export const useUiStore = defineStore('Ui', () => {
     }
 
     function updateTrayIconNotify(force = false) {
-        const newState =
-            appearanceSettings.notificationIconDot &&
-            (notifiedMenus.value.includes('notification') ||
-                notifiedMenus.value.includes('friend-log'));
+        const notificationsSettingsStore = useNotificationsSettingsStore();
+        let newState;
+        if (notificationsSettingsStore.notificationLayout === 'notification-center') {
+            newState =
+                appearanceSettings.notificationIconDot &&
+                (notificationStore.hasUnseenNotifications ||
+                    notifiedMenus.value.includes('friend-log'));
+        } else {
+            newState =
+                appearanceSettings.notificationIconDot &&
+                (notifiedMenus.value.includes('notification') ||
+                    notifiedMenus.value.includes('friend-log'));
+        }
 
         if (trayIconNotify.value !== newState || force) {
             trayIconNotify.value = newState;