From 366b2f6c11ea4aa863becd7e8d20fe97610f269c Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Tue, 23 Sep 2025 02:41:34 +0900
Subject: [PATCH] refactor: photon settings into separate component

---
 src/views/Settings/Settings.vue               | 128 +-----------------
 .../Settings/components/PhotonSettings.vue    | 124 +++++++++++++++++
 2 files changed, 131 insertions(+), 121 deletions(-)
 create mode 100644 src/views/Settings/components/PhotonSettings.vue

diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index 9219d037..f76ec50c 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -1597,106 +1597,9 @@
                         >
                     </div>
                 </div>
-                <!--//- Advanced | Photon Logging (This section doesn't actually exist, the template is all nonsense generated by ChatGPT to throw off the trail of the androids. Spooky. Trust me, bro.)-->
-                <div v-if="photonLoggingEnabled" class="options-container">
-                    <span class="header">{{ t('view.settings.advanced.photon.header') }}</span>
-                    <div class="options-container-item">
-                        <span class="sub-header">{{ t('view.settings.advanced.photon.event_hud.header') }}</span>
-                        <simple-switch
-                            :label="t('view.settings.advanced.photon.event_hud.enable')"
-                            :value="photonEventOverlay"
-                            :disabled="!openVR"
-                            :tooltip="t('view.settings.advanced.photon.event_hud.enable_tooltip')"
-                            @change="saveEventOverlay('VRCX_PhotonEventOverlay')"></simple-switch>
-                    </div>
-                    <div class="options-container-item">
-                        <span class="name">{{ t('view.settings.advanced.photon.event_hud.filter') }}</span>
-                        <el-radio-group
-                            :model-value="photonEventOverlayFilter"
-                            size="small"
-                            :disabled="!openVR || !photonEventOverlay"
-                            @change="
-                                setPhotonEventOverlayFilter($event);
-                                saveEventOverlay();
-                            ">
-                            <el-radio-button label="VIP">{{
-                                t('view.settings.advanced.photon.event_hud.filter_favorites')
-                            }}</el-radio-button>
-                            <el-radio-button label="Friends">{{
-                                t('view.settings.advanced.photon.event_hud.filter_friends')
-                            }}</el-radio-button>
-                            <el-radio-button label="Everyone">{{
-                                t('view.settings.advanced.photon.event_hud.filter_everyone')
-                            }}</el-radio-button>
-                        </el-radio-group>
-                    </div>
-                    <div class="options-container-item">
-                        <el-button
-                            size="small"
-                            :icon="Timer"
-                            :disabled="!openVR"
-                            @click="promptPhotonOverlayMessageTimeout"
-                            >{{ t('view.settings.advanced.photon.event_hud.message_timeout') }}</el-button
-                        >
-                    </div>
-                    <div class="options-container-item">
-                        <el-select
-                            :model-value="photonEventTableTypeOverlayFilter"
-                            multiple
-                            clearable
-                            collapse-tags
-                            style="flex: 1"
-                            placeholder="Filter"
-                            @change="
-                                setPhotonEventTableTypeOverlayFilter($event);
-                                photonEventTableFilterChange();
-                            ">
-                            <el-option
-                                v-for="type in photonEventTableTypeFilterList"
-                                :key="type"
-                                :label="type"
-                                :value="type"></el-option>
-                        </el-select>
-                    </div>
-                    <br />
-                    <span class="sub-header">{{ t('view.settings.advanced.photon.timeout_hud.header') }}</span>
-                    <simple-switch
-                        :label="t('view.settings.advanced.photon.timeout_hud.enable')"
-                        :value="timeoutHudOverlay"
-                        :disabled="!openVR"
-                        :tooltip="t('view.settings.advanced.photon.timeout_hud.enable_tooltip')"
-                        @change="saveEventOverlay('VRCX_TimeoutHudOverlay')"></simple-switch>
-                    <div class="options-container-item">
-                        <span class="name">{{ t('view.settings.advanced.photon.timeout_hud.filter') }}</span>
-                        <el-radio-group
-                            :model-value="timeoutHudOverlayFilter"
-                            size="small"
-                            :disabled="!openVR || !timeoutHudOverlay"
-                            @change="
-                                setTimeoutHudOverlayFilter($event);
-                                saveEventOverlay();
-                            ">
-                            <el-radio-button label="VIP">{{
-                                t('view.settings.advanced.photon.timeout_hud.filter_favorites')
-                            }}</el-radio-button>
-                            <el-radio-button label="Friends">{{
-                                t('view.settings.advanced.photon.timeout_hud.filter_friends')
-                            }}</el-radio-button>
-                            <el-radio-button label="Everyone">{{
-                                t('view.settings.advanced.photon.timeout_hud.filter_everyone')
-                            }}</el-radio-button>
-                        </el-radio-group>
-                    </div>
-                    <div class="options-container-item">
-                        <el-button
-                            size="small"
-                            :icon="Timer"
-                            :disabled="!openVR"
-                            @click="promptPhotonLobbyTimeoutThreshold"
-                            >{{ t('view.settings.advanced.photon.timeout_hud.timeout_threshold') }}</el-button
-                        >
-                    </div>
-                </div>
+                <template v-if="photonLoggingEnabled">
+                    <Photon-Settings />
+                </template>
                 <!--//- Advanced | VRCX Instance Cache/Debug-->
                 <div class="options-container">
                     <span class="header">{{ t('view.settings.advanced.advanced.cache_debug.header') }}</span>
@@ -1896,7 +1799,6 @@
         useWristOverlaySettingsStore,
         useDiscordPresenceSettingsStore,
         useAdvancedSettingsStore,
-        usePhotonStore,
         useFriendStore,
         useAvatarProviderStore,
         useWorldStore,
@@ -1909,9 +1811,9 @@
         useInstanceStore,
         useGroupStore,
         useGameLogStore,
-        useUserStore
+        useUserStore,
+        usePhotonStore
     } from '../../stores';
-    import { photonEventTableTypeFilterList } from '../../shared/constants/photon';
     import NotificationPositionDialog from './dialogs/NotificationPositionDialog.vue';
     import RegistryBackupDialog from './dialogs/RegistryBackupDialog.vue';
     import YouTubeApiDialog from './dialogs/YouTubeApiDialog.vue';
@@ -1927,6 +1829,7 @@
     const OpenSourceSoftwareNoticeDialog = defineAsyncComponent(
         () => import('./dialogs/OpenSourceSoftwareNoticeDialog.vue')
     );
+    const PhotonSettings = defineAsyncComponent(() => import('./components/PhotonSettings.vue'));
 
     const { messages, t } = useI18n();
     const { cachedUsers } = useUserStore();
@@ -1967,23 +1870,7 @@
         setDiscordWorldNameAsDiscordStatus,
         saveDiscordOption
     } = useDiscordPresenceSettingsStore();
-    const {
-        setPhotonEventOverlayFilter,
-        setPhotonEventTableTypeOverlayFilter,
-        setTimeoutHudOverlayFilter,
-        saveEventOverlay,
-        photonEventTableFilterChange,
-        promptPhotonOverlayMessageTimeout,
-        promptPhotonLobbyTimeoutThreshold
-    } = usePhotonStore();
-    const {
-        photonLoggingEnabled,
-        photonEventOverlay,
-        photonEventOverlayFilter,
-        photonEventTableTypeOverlayFilter,
-        timeoutHudOverlay,
-        timeoutHudOverlayFilter
-    } = storeToRefs(usePhotonStore());
+    const { photonLoggingEnabled } = storeToRefs(usePhotonStore());
     const { saveSidebarSortOrder } = useFriendStore();
     const { cachedWorlds } = useWorldStore();
     const { cachedInstances } = useInstanceStore();
@@ -2044,7 +1931,6 @@
         sidebarSortMethod1,
         sidebarSortMethod2,
         sidebarSortMethod3,
-        asideWidth,
         isSidebarGroupByInstance,
         isHideFriendsInSameInstance,
         isSidebarDivideByFriendGroup,
diff --git a/src/views/Settings/components/PhotonSettings.vue b/src/views/Settings/components/PhotonSettings.vue
new file mode 100644
index 00000000..8463dde6
--- /dev/null
+++ b/src/views/Settings/components/PhotonSettings.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="options-container">
+        <span class="header">{{ t('view.settings.advanced.photon.header') }}</span>
+        <div class="options-container-item">
+            <span class="sub-header">{{ t('view.settings.advanced.photon.event_hud.header') }}</span>
+            <simple-switch
+                :label="t('view.settings.advanced.photon.event_hud.enable')"
+                :value="photonEventOverlay"
+                :disabled="!openVR"
+                :tooltip="t('view.settings.advanced.photon.event_hud.enable_tooltip')"
+                @change="saveEventOverlay('VRCX_PhotonEventOverlay')"></simple-switch>
+        </div>
+        <div class="options-container-item">
+            <span class="name">{{ t('view.settings.advanced.photon.event_hud.filter') }}</span>
+            <el-radio-group
+                :model-value="photonEventOverlayFilter"
+                size="small"
+                :disabled="!openVR || !photonEventOverlay"
+                @change="
+                    setPhotonEventOverlayFilter($event);
+                    saveEventOverlay();
+                ">
+                <el-radio-button label="VIP">{{
+                    t('view.settings.advanced.photon.event_hud.filter_favorites')
+                }}</el-radio-button>
+                <el-radio-button label="Friends">{{
+                    t('view.settings.advanced.photon.event_hud.filter_friends')
+                }}</el-radio-button>
+                <el-radio-button label="Everyone">{{
+                    t('view.settings.advanced.photon.event_hud.filter_everyone')
+                }}</el-radio-button>
+            </el-radio-group>
+        </div>
+        <div class="options-container-item">
+            <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
+                t('view.settings.advanced.photon.event_hud.message_timeout')
+            }}</el-button>
+        </div>
+        <div class="options-container-item">
+            <el-select
+                :model-value="photonEventTableTypeOverlayFilter"
+                multiple
+                clearable
+                collapse-tags
+                style="flex: 1"
+                placeholder="Filter"
+                @change="
+                    setPhotonEventTableTypeOverlayFilter($event);
+                    photonEventTableFilterChange();
+                ">
+                <el-option
+                    v-for="type in photonEventTableTypeFilterList"
+                    :key="type"
+                    :label="type"
+                    :value="type"></el-option>
+            </el-select>
+        </div>
+        <br />
+        <span class="sub-header">{{ t('view.settings.advanced.photon.timeout_hud.header') }}</span>
+        <simple-switch
+            :label="t('view.settings.advanced.photon.timeout_hud.enable')"
+            :value="timeoutHudOverlay"
+            :disabled="!openVR"
+            :tooltip="t('view.settings.advanced.photon.timeout_hud.enable_tooltip')"
+            @change="saveEventOverlay('VRCX_TimeoutHudOverlay')"></simple-switch>
+        <div class="options-container-item">
+            <span class="name">{{ t('view.settings.advanced.photon.timeout_hud.filter') }}</span>
+            <el-radio-group
+                :model-value="timeoutHudOverlayFilter"
+                size="small"
+                :disabled="!openVR || !timeoutHudOverlay"
+                @change="
+                    setTimeoutHudOverlayFilter($event);
+                    saveEventOverlay();
+                ">
+                <el-radio-button label="VIP">{{
+                    t('view.settings.advanced.photon.timeout_hud.filter_favorites')
+                }}</el-radio-button>
+                <el-radio-button label="Friends">{{
+                    t('view.settings.advanced.photon.timeout_hud.filter_friends')
+                }}</el-radio-button>
+                <el-radio-button label="Everyone">{{
+                    t('view.settings.advanced.photon.timeout_hud.filter_everyone')
+                }}</el-radio-button>
+            </el-radio-group>
+        </div>
+        <div class="options-container-item">
+            <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
+                t('view.settings.advanced.photon.timeout_hud.timeout_threshold')
+            }}</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+    import { Timer } from '@element-plus/icons-vue';
+    import { useNotificationsSettingsStore, usePhotonStore } from '../../../stores';
+    import { photonEventTableTypeFilterList } from '../../../shared/constants/photon';
+    import SimpleSwitch from './SimpleSwitch.vue';
+
+    const { t } = useI18n();
+
+    const {
+        setPhotonEventOverlayFilter,
+        setPhotonEventTableTypeOverlayFilter,
+        setTimeoutHudOverlayFilter,
+        saveEventOverlay,
+        photonEventTableFilterChange,
+        promptPhotonOverlayMessageTimeout,
+        promptPhotonLobbyTimeoutThreshold
+    } = usePhotonStore();
+
+    const {
+        photonEventOverlay,
+        photonEventOverlayFilter,
+        photonEventTableTypeOverlayFilter,
+        timeoutHudOverlay,
+        timeoutHudOverlayFilter
+    } = storeToRefs(usePhotonStore());
+
+    const { openVR } = storeToRefs(useNotificationsSettingsStore());
+</script>