refactor: split wristorverlay settings into separate component

src/views/Charts/components/InstanceActivity.vue

@@ -619,7 +619,7 @@
     .status-online {
         display: flex;
         justify-content: center;
-        ::v-deep .el-statistic__head {
+        :deep(.el-statistic__head) {
             display: flex;
             justify-content: center;
         }

src/views/Settings/Settings.vue

@@ -1020,154 +1020,7 @@
 
             <!--//- Wrist Overlay Tab-->
             <el-tab-pane lazy :label="t('view.settings.category.wrist_overlay')">
-                <!--//- Wrist Overlay | SteamVR Wrist Overlay-->
-                <div class="options-container" style="margin-top: 0">
-                    <span class="header">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.header') }}</span>
-                    <div class="options-container-item">
-                        <el-button
-                            size="small"
-                            :icon="Files"
-                            :disabled="!openVR || !overlayWrist"
-                            @click="showWristFeedFiltersDialog"
-                            >{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_filters') }}</el-button
-                        >
-                    </div>
-                    <div class="options-container-item">
-                        <span>{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.description') }}</span>
-                        <br />
-                        <br />
-                        <span>{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.grip') }}</span>
-                        <br />
-                        <span>{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.menu') }}</span>
-                        <br />
-                    </div>
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.steamvr_overlay')"
-                        :value="openVR"
-                        @change="
-                            setOpenVR();
-                            saveOpenVROption();
-                        " />
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_overlay')"
-                        :value="overlayWrist"
-                        :disabled="!openVR"
-                        @change="
-                            setOverlayWrist();
-                            saveOpenVROption();
-                        "></simple-switch>
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.hide_private_worlds')"
-                        :value="hidePrivateFromFeed"
-                        @change="
-                            setHidePrivateFromFeed();
-                            saveOpenVROption();
-                        " />
-                    <div class="options-container-item" style="min-width: 118px">
-                        <span class="name">{{
-                            t('view.settings.wrist_overlay.steamvr_wrist_overlay.start_overlay_with')
-                        }}</span>
-                        <el-radio-group
-                            :model-value="openVRAlways"
-                            :disabled="!openVR"
-                            @change="
-                                setOpenVRAlways();
-                                saveOpenVROption();
-                            ">
-                            <el-radio :label="false">{{ 'VRChat' }}</el-radio>
-                            <el-radio :label="true">{{ 'SteamVR' }}</el-radio>
-                        </el-radio-group>
-                    </div>
-                    <div class="options-container-item">
-                        <span class="name">{{
-                            t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button')
-                        }}</span>
-                        <el-radio-group
-                            :model-value="overlaybutton"
-                            :disabled="!openVR || !overlayWrist"
-                            @change="
-                                setOverlaybutton();
-                                saveOpenVROption();
-                            ">
-                            <el-radio :label="false">{{
-                                t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip')
-                            }}</el-radio>
-                            <el-radio :label="true">{{
-                                t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu')
-                            }}</el-radio>
-                        </el-radio-group>
-                    </div>
-                    <div class="options-container-item">
-                        <span class="name">{{
-                            t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on')
-                        }}</span>
-                        <el-radio-group
-                            :model-value="overlayHand"
-                            size="small"
-                            @change="
-                                setOverlayHand($event);
-                                saveOpenVROption();
-                            ">
-                            <el-radio-button label="1">{{
-                                t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
-                            }}</el-radio-button>
-                            <el-radio-button label="2">{{
-                                t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
-                            }}</el-radio-button>
-                            <el-radio-button label="0">{{
-                                t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
-                            }}</el-radio-button>
-                        </el-radio-group>
-                    </div>
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')"
-                        :value="vrBackgroundEnabled"
-                        :disabled="!openVR || !overlayWrist"
-                        @change="
-                            setVrBackgroundEnabled();
-                            saveOpenVROption();
-                        " />
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.minimal_feed_icons')"
-                        :value="minimalFeed"
-                        :disabled="!openVR || !overlayWrist"
-                        @change="
-                            setMinimalFeed();
-                            saveOpenVROption();
-                        " />
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_vr_devices')"
-                        :value="!hideDevicesFromFeed"
-                        :disabled="!openVR || !overlayWrist"
-                        @change="
-                            setHideDevicesFromFeed();
-                            saveOpenVROption();
-                        " />
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_cpu_usage')"
-                        :value="vrOverlayCpuUsage"
-                        :disabled="!openVR || !overlayWrist"
-                        @change="
-                            setVrOverlayCpuUsage();
-                            saveOpenVROption();
-                        " />
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_game_uptime')"
-                        :value="!hideUptimeFromFeed"
-                        :disabled="!openVR || !overlayWrist"
-                        @change="
-                            setHideUptimeFromFeed();
-                            saveOpenVROption();
-                        " />
-                    <simple-switch
-                        :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_pc_uptime')"
-                        :value="pcUptimeOnFeed"
-                        :disabled="!openVR || !overlayWrist"
-                        @change="
-                            setPcUptimeOnFeed();
-                            saveOpenVROption();
-                        "></simple-switch>
-                </div>
+                <WristOverlaySettings @open-feed-filters="showWristFeedFiltersDialog" />
             </el-tab-pane>
 
             <!--//- Discord Presence Tab-->
@@ -1545,9 +1398,8 @@
         <FeedFiltersDialog v-model:feedFiltersDialogMode="feedFiltersDialogMode" />
         <ChangelogDialog />
         <AvatarProviderDialog v-model:isAvatarProviderDialogVisible="isAvatarProviderDialogVisible" />
-        <template v-if="photonLoggingEnabled">
-            <PhotonSettings />
-        </template>
+
+        <PhotonSettings v-if="photonLoggingEnabled" />
     </div>
 </template>
 
@@ -1574,7 +1426,6 @@
         DocumentCopy,
         Rank,
         VideoPlay,
-        Files,
         Paperclip,
         ArrowDown
     } from '@element-plus/icons-vue';
@@ -1588,7 +1439,6 @@
         useGeneralSettingsStore,
         useVRCXUpdaterStore,
         useNotificationsSettingsStore,
-        useWristOverlaySettingsStore,
         useAdvancedSettingsStore,
         useFriendStore,
         useAvatarProviderStore,
@@ -1616,20 +1466,20 @@
     import { THEME_CONFIG } from '../../shared/constants';
 
     import SimpleSwitch from './components/SimpleSwitch.vue';
-    import DiscordSettings from './components/DiscordSettings.vue';
-    import PictureSettings from './components/PictureSettings.vue';
 
     const OpenSourceSoftwareNoticeDialog = defineAsyncComponent(
         () => import('./dialogs/OpenSourceSoftwareNoticeDialog.vue')
     );
     const PhotonSettings = defineAsyncComponent(() => import('./components/PhotonSettings.vue'));
+    const DiscordSettings = defineAsyncComponent(() => import('./components/DiscordSettings.vue'));
+    const PictureSettings = defineAsyncComponent(() => import('./components/PictureSettings.vue'));
+    const WristOverlaySettings = defineAsyncComponent(() => import('./components/WristOverlaySettings.vue'));
 
     const { messages, t } = useI18n();
     const { cachedUsers } = useUserStore();
     const generalSettingsStore = useGeneralSettingsStore();
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const notificationsSettingsStore = useNotificationsSettingsStore();
-    const wristOverlaySettingsStore = useWristOverlaySettingsStore();
     const advancedSettingsStore = useAdvancedSettingsStore();
 
     const { isAvatarProviderDialogVisible } = storeToRefs(useAvatarProviderStore());
@@ -1770,34 +1620,6 @@
         promptNotificationTimeout
     } = notificationsSettingsStore;
 
-    const {
-        overlayWrist,
-        hidePrivateFromFeed,
-        openVRAlways,
-        overlaybutton,
-        overlayHand,
-        vrBackgroundEnabled,
-        minimalFeed,
-        hideDevicesFromFeed,
-        vrOverlayCpuUsage,
-        hideUptimeFromFeed,
-        pcUptimeOnFeed
-    } = storeToRefs(wristOverlaySettingsStore);
-
-    const {
-        setOverlayWrist,
-        setHidePrivateFromFeed,
-        setOpenVRAlways,
-        setOverlaybutton,
-        setOverlayHand,
-        setVrBackgroundEnabled,
-        setMinimalFeed,
-        setHideDevicesFromFeed,
-        setVrOverlayCpuUsage,
-        setHideUptimeFromFeed,
-        setPcUptimeOnFeed
-    } = wristOverlaySettingsStore;
-
     const {
         enablePrimaryPassword,
         relaunchVRChatAfterCrash,

src/views/Settings/components/WristOverlaySettings.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="options-container" style="margin-top: 0">
+        <span class="header">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.header') }}</span>
+        <div class="options-container-item">
+            <el-button
+                size="small"
+                :icon="Files"
+                :disabled="!openVR || !overlayWrist"
+                @click="emit('open-feed-filters')"
+                >{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_filters') }}</el-button
+            >
+        </div>
+        <div class="options-container-item">
+            <span>{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.description') }}</span>
+            <br />
+            <br />
+            <span>{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.grip') }}</span>
+            <br />
+            <span>{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.menu') }}</span>
+            <br />
+        </div>
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.steamvr_overlay')"
+            :value="openVR"
+            @change="
+                setOpenVR();
+                saveOpenVROption();
+            " />
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_overlay')"
+            :value="overlayWrist"
+            :disabled="!openVR"
+            @change="
+                setOverlayWrist();
+                saveOpenVROption();
+            "></simple-switch>
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.hide_private_worlds')"
+            :value="hidePrivateFromFeed"
+            @change="
+                setHidePrivateFromFeed();
+                saveOpenVROption();
+            " />
+        <div class="options-container-item" style="min-width: 118px">
+            <span class="name">{{
+                t('view.settings.wrist_overlay.steamvr_wrist_overlay.start_overlay_with')
+            }}</span>
+            <el-radio-group
+                :model-value="openVRAlways"
+                :disabled="!openVR"
+                @change="
+                    setOpenVRAlways();
+                    saveOpenVROption();
+                ">
+                <el-radio :label="false">{{ 'VRChat' }}</el-radio>
+                <el-radio :label="true">{{ 'SteamVR' }}</el-radio>
+            </el-radio-group>
+        </div>
+        <div class="options-container-item">
+            <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button') }}</span>
+            <el-radio-group
+                :model-value="overlaybutton"
+                :disabled="!openVR || !overlayWrist"
+                @change="
+                    setOverlaybutton();
+                    saveOpenVROption();
+                ">
+                <el-radio :label="false">{{
+                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip')
+                }}</el-radio>
+                <el-radio :label="true">{{
+                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu')
+                }}</el-radio>
+            </el-radio-group>
+        </div>
+        <div class="options-container-item">
+            <span class="name">{{
+                t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on')
+            }}</span>
+            <el-radio-group
+                :model-value="overlayHand"
+                size="small"
+                @change="
+                    setOverlayHand($event);
+                    saveOpenVROption();
+                ">
+                <el-radio-button label="1">{{
+                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
+                }}</el-radio-button>
+                <el-radio-button label="2">{{
+                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
+                }}</el-radio-button>
+                <el-radio-button label="0">{{
+                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
+                }}</el-radio-button>
+            </el-radio-group>
+        </div>
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')"
+            :value="vrBackgroundEnabled"
+            :disabled="!openVR || !overlayWrist"
+            @change="
+                setVrBackgroundEnabled();
+                saveOpenVROption();
+            " />
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.minimal_feed_icons')"
+            :value="minimalFeed"
+            :disabled="!openVR || !overlayWrist"
+            @change="
+                setMinimalFeed();
+                saveOpenVROption();
+            " />
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_vr_devices')"
+            :value="!hideDevicesFromFeed"
+            :disabled="!openVR || !overlayWrist"
+            @change="
+                setHideDevicesFromFeed();
+                saveOpenVROption();
+            " />
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_cpu_usage')"
+            :value="vrOverlayCpuUsage"
+            :disabled="!openVR || !overlayWrist"
+            @change="
+                setVrOverlayCpuUsage();
+                saveOpenVROption();
+            " />
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_game_uptime')"
+            :value="!hideUptimeFromFeed"
+            :disabled="!openVR || !overlayWrist"
+            @change="
+                setHideUptimeFromFeed();
+                saveOpenVROption();
+            " />
+        <simple-switch
+            :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.show_pc_uptime')"
+            :value="pcUptimeOnFeed"
+            :disabled="!openVR || !overlayWrist"
+            @change="
+                setPcUptimeOnFeed();
+                saveOpenVROption();
+            "></simple-switch>
+    </div>
+</template>
+
+<script setup>
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+    import { Files } from '@element-plus/icons-vue';
+    import {
+        useNotificationsSettingsStore,
+        useWristOverlaySettingsStore,
+        useVrStore
+    } from '../../../stores';
+    import SimpleSwitch from './SimpleSwitch.vue';
+
+    const emit = defineEmits(['open-feed-filters']);
+    const { t } = useI18n();
+
+    const notificationsSettingsStore = useNotificationsSettingsStore();
+    const wristOverlaySettingsStore = useWristOverlaySettingsStore();
+
+    const { openVR } = storeToRefs(notificationsSettingsStore);
+
+    const {
+        overlayWrist,
+        hidePrivateFromFeed,
+        openVRAlways,
+        overlaybutton,
+        overlayHand,
+        vrBackgroundEnabled,
+        minimalFeed,
+        hideDevicesFromFeed,
+        vrOverlayCpuUsage,
+        hideUptimeFromFeed,
+        pcUptimeOnFeed
+    } = storeToRefs(wristOverlaySettingsStore);
+
+    const {
+        setOpenVR
+    } = notificationsSettingsStore;
+
+    const {
+        setOverlayWrist,
+        setHidePrivateFromFeed,
+        setOpenVRAlways,
+        setOverlaybutton,
+        setOverlayHand,
+        setVrBackgroundEnabled,
+        setMinimalFeed,
+        setHideDevicesFromFeed,
+        setVrOverlayCpuUsage,
+        setHideUptimeFromFeed,
+        setPcUptimeOnFeed
+    } = wristOverlaySettingsStore;
+
+    const { saveOpenVROption } = useVrStore();
+</script>