Clean up keyboard bindings and reload locale

Co-Authored-By: kubectl <me@kube.moe>

src/plugin/i18n.js

@@ -20,4 +20,11 @@ const i18n = createI18n({
     fallbackWarn: false
 });
 
-export { i18n };
+async function updateLocalizedStrings() {
+    const newStrings = await getLocalizationStrings();
+    Object.entries(newStrings).forEach(([key, value]) => {
+        i18n.global.setLocaleMessage(key.replaceAll('_', '-'), value);
+    });
+}
+
+export { i18n, updateLocalizedStrings };

src/stores/ui.js

@@ -1,44 +1,88 @@
 import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { useMagicKeys } from '@vueuse/core';
 import { useRouter } from 'vue-router';
 
+import { AppDebug } from '../service/appConfig';
+import { refreshCustomCss } from '../shared/utils/base/ui';
+import { updateLocalizedStrings } from '../plugin/i18n';
 import { useNotificationStore } from './notification';
 import { useSearchStore } from './search';
 
 export const useUiStore = defineStore('Ui', () => {
     const notificationStore = useNotificationStore();
     const router = useRouter();
-    const search = useSearchStore();
+    const keys = useMagicKeys();
+    const { directAccessPaste } = useSearchStore();
 
-    document.addEventListener('keydown', function (e) {
-        if (e.shiftKey) {
-            shiftHeld.value = true;
-        }
-        if (e.ctrlKey && e.key === 'd') {
-            e.preventDefault();
-            search.directAccessPaste();
-        }
-    });
-
-    document.addEventListener('keyup', function (e) {
-        if (!e.shiftKey) {
-            shiftHeld.value = false;
-        }
-    });
+    const ctrlR = keys['Ctrl+R'];
+    const ctrlD = keys['Ctrl+D'];
+    const shift = keys['Shift'];
+    const ctrlShiftI = keys['Ctrl+Shift+I'];
+    const altShiftR = keys['Alt+Shift+R'];
 
     const notifiedMenus = ref([]);
     const shiftHeld = ref(false);
     const trayIconNotify = ref(false);
 
-    function notifyMenu(index) {
-        const currentRouteName = router.currentRoute.value?.name;
-        if (
-            index !== currentRouteName &&
-            !notifiedMenus.value.includes(index)
-        ) {
-            notifiedMenus.value.push(index);
-            updateTrayIconNotify();
+    watch(ctrlR, (isPressed) => {
+        if (isPressed) {
+            location.reload();
         }
+    });
+
+    watch(ctrlD, (isPressed) => {
+        if (isPressed) {
+            directAccessPaste();
+        }
+    });
+
+    watch(shift, (isHeld) => {
+        shiftHeld.value = isHeld;
+    });
+
+    watch(ctrlShiftI, (isPressed) => {
+        if (isPressed) {
+            showConsole();
+        }
+    });
+
+    watch(altShiftR, (isPressed) => {
+        if (isPressed) {
+            refreshCustomCss();
+            updateLocalizedStrings();
+            ElMessage({
+                message: 'Custom CSS and localization strings refreshed',
+                type: 'success'
+            });
+        }
+    });
+
+    // Make sure file drops outside of the screenshot manager don't navigate to the file path dropped.
+    // This issue persists on prompts created with prompt(), unfortunately. Not sure how to fix that.
+    document.body.addEventListener('drop', function (e) {
+        e.preventDefault();
+    });
+
+    function showConsole() {
+        AppApi.ShowDevTools();
+        if (
+            AppDebug.debug ||
+            AppDebug.debugWebRequests ||
+            AppDebug.debugWebSocket ||
+            AppDebug.debugUserDiff
+        ) {
+            return;
+        }
+        console.log(
+            '%cCareful! This might not do what you think.',
+            'background-color: red; color: yellow; font-size: 32px; font-weight: bold'
+        );
+        console.log(
+            '%cIf someone told you to copy-paste something here, it can give them access to your account.',
+            'font-size: 20px;'
+        );
     }
 
     watch(
@@ -54,6 +98,17 @@ export const useUiStore = defineStore('Ui', () => {
         }
     );
 
+    function notifyMenu(index) {
+        const currentRouteName = router.currentRoute.value?.name;
+        if (
+            index !== currentRouteName &&
+            !notifiedMenus.value.includes(index)
+        ) {
+            notifiedMenus.value.push(index);
+            updateTrayIconNotify();
+        }
+    }
+
     function removeNotify(index) {
         notifiedMenus.value = notifiedMenus.value.filter((i) => i !== index);
         updateTrayIconNotify();
@@ -80,6 +135,7 @@ export const useUiStore = defineStore('Ui', () => {
         shiftHeld,
 
         notifyMenu,
-        removeNotify
+        removeNotify,
+        showConsole
     };
 });

src/stores/vrcx.js

@@ -9,7 +9,6 @@ import { debounce, parseLocation } from '../shared/utils';
 import { AppDebug } from '../service/appConfig';
 import { database } from '../service/database';
 import { failedGetRequests } from '../service/request';
-import { refreshCustomCss } from '../shared/utils/base/ui';
 import { useAdvancedSettingsStore } from './settings/advanced';
 import { useAvatarProviderStore } from './avatarProvider';
 import { useAvatarStore } from './avatar';
@@ -150,48 +149,6 @@ export const useVrcxStore = defineStore('Vrcx', () => {
 
     init();
 
-    // Make sure file drops outside of the screenshot manager don't navigate to the file path dropped.
-    // This issue persists on prompts created with prompt(), unfortunately. Not sure how to fix that.
-    document.body.addEventListener('drop', function (e) {
-        e.preventDefault();
-    });
-
-    document.addEventListener('keyup', function (e) {
-        if (e.ctrlKey) {
-            if (e.key === 'I') {
-                showConsole();
-            } else if (e.key === 'r') {
-                location.reload();
-            }
-        } else if (e.altKey && e.key === 'R') {
-            refreshCustomCss();
-            ElMessage({
-                message: 'Custom CSS refreshed',
-                type: 'success'
-            });
-        }
-    });
-
-    function showConsole() {
-        AppApi.ShowDevTools();
-        if (
-            AppDebug.debug ||
-            AppDebug.debugWebRequests ||
-            AppDebug.debugWebSocket ||
-            AppDebug.debugUserDiff
-        ) {
-            return;
-        }
-        console.log(
-            '%cCareful! This might not do what you think.',
-            'background-color: red; color: yellow; font-size: 32px; font-weight: bold'
-        );
-        console.log(
-            '%cIf someone told you to copy-paste something here, it can give them access to your account.',
-            'font-size: 20px;'
-        );
-    }
-
     async function updateDatabaseVersion() {
         // requires dbVars.userPrefix to be already set
         const databaseVersion = 13;
@@ -775,7 +732,6 @@ export const useVrcxStore = defineStore('Vrcx', () => {
         ipcEnabled,
         clearVRCXCacheFrequency,
         maxTableSize,
-        showConsole,
         clearVRCXCache,
         eventVrcxMessage,
         eventLaunchCommand,

src/views/Settings/components/Tabs/AdvancedTab.vue

@@ -405,6 +405,7 @@
         useLaunchStore,
         useNotificationsSettingsStore,
         usePhotonStore,
+        useUiStore,
         useUserStore,
         useVRCXUpdaterStore,
         useVrStore,
@@ -430,7 +431,8 @@
     const { showLaunchOptions } = useLaunchStore();
     const { enablePrimaryPasswordChange } = useAuthStore();
     const { cachedConfig } = storeToRefs(useAuthStore());
-    const { showConsole, clearVRCXCache, showRegistryBackupDialog } = useVrcxStore();
+    const { clearVRCXCache, showRegistryBackupDialog } = useVrcxStore();
+    const { showConsole } = useUiStore();
     const { disableGameLogDialog } = useGameLogStore();
 
     const { cachedUsers } = useUserStore();

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -361,7 +361,7 @@
 
 <script setup>
     import { ArrowDown, ArrowRight, DocumentCopy, Notebook } from '@element-plus/icons-vue';
-    import { computed, ref } from 'vue';
+    import { computed, onBeforeUnmount, ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -425,15 +425,26 @@
 
     const zoomLevel = ref(100);
     const isLinux = computed(() => LINUX);
+    let cleanupWheel = null;
+
+    onBeforeUnmount(() => {
+        if (cleanupWheel) {
+            cleanupWheel();
+        }
+    });
 
     initGetZoomLevel();
 
     async function initGetZoomLevel() {
-        addEventListener('wheel', (event) => {
+        const handleWheel = (event) => {
             if (event.ctrlKey) {
                 getZoomLevel();
             }
-        });
+        };
+        window.addEventListener('wheel', handleWheel);
+        cleanupWheel = () => {
+            window.removeEventListener('wheel', handleWheel);
+        };
         getZoomLevel();
     }