feat showInstanceIdInLocation option

src/components/Location.vue

@@ -5,7 +5,7 @@
             <div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
             <el-tooltip
                 :content="`${t('dialog.new_instance.instance_id')}: #${instanceName}`"
-                :disabled="!instanceName"
+                :disabled="!instanceName || showInstanceIdInLocation"
                 :show-after="300"
                 placement="top">
                 <div
@@ -14,6 +14,9 @@
                     @click="handleShowWorldDialog">
                     <el-icon :class="['is-loading']" class="mr-1" v-if="isTraveling"><Loading /></el-icon>
                     <span class="min-w-0 truncate">{{ text }}</span>
+                    <span v-if="showInstanceIdInLocation && instanceName" class="ml-1 whitespace-nowrap">{{
+                        ` · #${instanceName}`
+                    }}</span>
                     <span v-if="groupName" class="ml-0.5 whitespace-nowrap x-link" @click.stop="handleShowGroupDialog">
                         ({{ groupName }})
                     </span>
@@ -33,7 +36,13 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useGroupStore, useInstanceStore, useSearchStore, useWorldStore } from '../stores';
+    import {
+        useAppearanceSettingsStore,
+        useGroupStore,
+        useInstanceStore,
+        useSearchStore,
+        useWorldStore
+    } from '../stores';
     import { getGroupName, getWorldName, parseLocation } from '../shared/utils';
     import { accessTypeLocaleKeyMap } from '../shared/constants';
 
@@ -45,6 +54,7 @@
     const { verifyShortName } = useSearchStore();
     const { cachedInstances } = useInstanceStore();
     const { lastInstanceApplied } = storeToRefs(useInstanceStore());
+    const { showInstanceIdInLocation } = storeToRefs(useAppearanceSettingsStore());
 
     const props = defineProps({
         location: String,

src/localization/en.json

@@ -561,6 +561,7 @@
                     "zoom": "Zoom",
                     "vrcplus_profile_icons": "VRCPlus Profile Icons",
                     "tooltips": "Tooltips",
+                    "show_instance_id": "Show Instance ID",
                     "age_gated_instances": "Age Gated Instances",
                     "nicknames": "Memo Nicknames",
                     "sort_favorite_by": "Sort Favorites by",

src/stores/settings/appearance.js

@@ -51,6 +51,7 @@ export const useAppearanceSettingsStore = defineStore(
         const isDarkMode = ref(false);
         const displayVRCPlusIconsAsAvatar = ref(false);
         const hideNicknames = ref(false);
+        const showInstanceIdInLocation = ref(false);
         const isAgeGatedInstancesVisible = ref(false);
         const sortFavorites = ref(true);
         const instanceUsersSortAlphabetical = ref(false);
@@ -108,6 +109,7 @@ export const useAppearanceSettingsStore = defineStore(
                 themeModeConfig,
                 displayVRCPlusIconsAsAvatarConfig,
                 hideNicknamesConfig,
+                showInstanceIdInLocationConfig,
                 isAgeGatedInstancesVisibleConfig,
                 sortFavoritesConfig,
                 instanceUsersSortAlphabeticalConfig,
@@ -133,6 +135,10 @@ export const useAppearanceSettingsStore = defineStore(
                 configRepository.getString('VRCX_ThemeMode', 'system'),
                 configRepository.getBool('displayVRCPlusIconsAsAvatar', true),
                 configRepository.getBool('VRCX_hideNicknames', false),
+                configRepository.getBool(
+                    'VRCX_showInstanceIdInLocation',
+                    false
+                ),
                 configRepository.getBool(
                     'VRCX_isAgeGatedInstancesVisible',
                     true
@@ -211,6 +217,7 @@ export const useAppearanceSettingsStore = defineStore(
             displayVRCPlusIconsAsAvatar.value =
                 displayVRCPlusIconsAsAvatarConfig;
             hideNicknames.value = hideNicknamesConfig;
+            showInstanceIdInLocation.value = showInstanceIdInLocationConfig;
             isAgeGatedInstancesVisible.value = isAgeGatedInstancesVisibleConfig;
             sortFavorites.value = sortFavoritesConfig;
             instanceUsersSortAlphabetical.value =
@@ -491,6 +498,13 @@ export const useAppearanceSettingsStore = defineStore(
             hideNicknames.value = !hideNicknames.value;
             configRepository.setBool('VRCX_hideNicknames', hideNicknames.value);
         }
+        function setShowInstanceIdInLocation() {
+            showInstanceIdInLocation.value = !showInstanceIdInLocation.value;
+            configRepository.setBool(
+                'VRCX_showInstanceIdInLocation',
+                showInstanceIdInLocation.value
+            );
+        }
         function setIsAgeGatedInstancesVisible() {
             isAgeGatedInstancesVisible.value =
                 !isAgeGatedInstancesVisible.value;
@@ -801,6 +815,7 @@ export const useAppearanceSettingsStore = defineStore(
             isDarkMode,
             displayVRCPlusIconsAsAvatar,
             hideNicknames,
+            showInstanceIdInLocation,
             isAgeGatedInstancesVisible,
             sortFavorites,
             instanceUsersSortAlphabetical,
@@ -830,6 +845,7 @@ export const useAppearanceSettingsStore = defineStore(
             setAppLanguage,
             setDisplayVRCPlusIconsAsAvatar,
             setHideNicknames,
+            setShowInstanceIdInLocation,
             setIsAgeGatedInstancesVisible,
             setSortFavorites,
             setInstanceUsersSortAlphabetical,

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

@@ -67,6 +67,10 @@
                     setDisplayVRCPlusIconsAsAvatar();
                     saveOpenVROption();
                 " />
+            <simple-switch
+                :label="t('view.settings.appearance.appearance.show_instance_id')"
+                :value="showInstanceIdInLocation"
+                @change="setShowInstanceIdInLocation" />
             <simple-switch
                 :label="t('view.settings.appearance.appearance.nicknames')"
                 :value="!hideNicknames"
@@ -387,8 +391,8 @@
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useFavoriteStore, useVrStore } from '../../../../stores';
-    import { THEME_CONFIG } from '../../../../shared/constants';
     import { getLanguageName, languageCodes } from '../../../../localization';
+    import { THEME_CONFIG } from '../../../../shared/constants';
 
     import SimpleSwitch from '../SimpleSwitch.vue';
 
@@ -402,6 +406,7 @@
         themeMode,
         displayVRCPlusIconsAsAvatar,
         hideNicknames,
+        showInstanceIdInLocation,
         isAgeGatedInstancesVisible,
         sortFavorites,
         instanceUsersSortAlphabetical,
@@ -428,6 +433,7 @@
     const {
         setDisplayVRCPlusIconsAsAvatar,
         setHideNicknames,
+        setShowInstanceIdInLocation,
         setIsAgeGatedInstancesVisible,
         setInstanceUsersSortAlphabetical,
         setDtHour12,