From 47807db8cb93044ee110b3b55d730c547307992e Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 8 Mar 2026 21:54:29 +0900
Subject: [PATCH] refactor css

---
 src/App.vue                                   |  12 +-
 src/app.css                                   |  33 ------
 src/components/InstanceActionBar.vue          |   9 --
 src/components/Location.vue                   |   8 +-
 src/components/LocationWorld.vue              |   6 -
 src/components/__tests__/Location.test.js     |   2 +-
 .../AvatarDialog/SetAvatarStylesDialog.vue    | 108 +++++++++---------
 .../AvatarDialog/SetAvatarTagsDialog.vue      |   8 +-
 .../dialogs/GroupDialog/GroupDialog.vue       |  20 +---
 .../components/InstanceActivityDetail.vue     |  10 +-
 src/views/FriendList/FriendList.vue           |   8 --
 src/views/Layout/MainLayout.vue               |   2 +-
 src/views/Moderation/Moderation.vue           |   9 +-
 src/views/Notifications/Notification.vue      |  14 ---
 src/views/Tools/Gallery.vue                   |  38 ++----
 .../dialogs/ExportDiscordNamesDialog.vue      |   2 -
 .../Tools/dialogs/RegistryBackupDialog.vue    |   6 -
 src/vr/Vr.vue                                 |  76 +++++++++++-
 18 files changed, 150 insertions(+), 221 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e4f50f80..b63883ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,10 @@
     <TooltipProvider>
         <MacOSTitleBar></MacOSTitleBar>
 
-        <div id="x-app" class="x-app" :class="{ 'with-macos-titlebar': isMacOS }">
+        <div
+            id="x-app"
+            class="flex w-screen h-screen overflow-hidden cursor-default [&>.x-container]:pt-[15px]"
+            :class="{ 'pt-7': isMacOS }">
             <RouterView></RouterView>
             <Toaster position="top-center" :theme="theme"></Toaster>
 
@@ -61,10 +64,3 @@
         store.game.checkVRChatDebugLogging();
     });
 </script>
-
-<style scoped>
-    /* Add title bar spacing for macOS */
-    .x-app.with-macos-titlebar {
-        padding-top: 28px;
-    }
-</style>
diff --git a/src/app.css b/src/app.css
index 87df58fa..71c7d4d1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,14 +6,6 @@ html {
     animation: rotating 2s linear infinite;
 }
 
-.x-app {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    cursor: default;
-}
-
 .x-container {
     position: relative;
     padding: 10px;
@@ -35,31 +27,6 @@ html.dark .x-container {
     background: var(--sidebar);
 }
 
-.x-app > .x-container {
-    padding-top: 15px;
-}
-
-/*FIXME: this is a nasty temporary hack*/
-.force-pointer-on-hover a,
-.force-pointer-on-hover button,
-.force-pointer-on-hover [role='button'],
-.force-pointer-on-hover label,
-.force-pointer-on-hover summary,
-.force-pointer-on-hover .x-link,
-.force-pointer-on-hover input[type='submit'] {
-    cursor: pointer !important;
-}
-
 [data-sonner-toast] [data-content] [data-description] {
     white-space: pre-line;
 }
-
-.main-layout-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-    min-height: 0;
-    min-width: 0;
-    overflow: hidden;
-}
diff --git a/src/components/InstanceActionBar.vue b/src/components/InstanceActionBar.vue
index 455410e8..9080f728 100644
--- a/src/components/InstanceActionBar.vue
+++ b/src/components/InstanceActionBar.vue
@@ -380,12 +380,3 @@
         immediate: true
     });
 </script>
-
-<style scoped>
-    .inline-block {
-        display: inline-block;
-    }
-    .ml-5 {
-        margin-left: 5px;
-    }
-</style>
diff --git a/src/components/Location.vue b/src/components/Location.vue
index 999615d2..6c9363ae 100644
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="cursor-pointer">
-        <div v-if="!text" class="transparent">-</div>
+        <div v-if="!text" class="text-transparent">-</div>
         <div v-show="text" class="flex items-center">
             <div v-if="region" :class="['flags', 'mr-1.5', 'shrink-0', region]"></div>
             <TooltipWrapper :content="tooltipContent" :disabled="tooltipDisabled" :delay-duration="300" side="top">
@@ -293,9 +293,3 @@
         showGroupDialog(L.groupId);
     }
 </script>
-
-<style scoped>
-    .transparent {
-        color: transparent;
-    }
-</style>
diff --git a/src/components/LocationWorld.vue b/src/components/LocationWorld.vue
index 515b4491..713787d9 100644
--- a/src/components/LocationWorld.vue
+++ b/src/components/LocationWorld.vue
@@ -129,9 +129,3 @@
         groupStore.showGroupDialog(L.groupId);
     }
 </script>
-
-<style scoped>
-    .inline-block {
-        display: inline-block;
-    }
-</style>
diff --git a/src/components/__tests__/Location.test.js b/src/components/__tests__/Location.test.js
index d06c7c96..b102a044 100644
--- a/src/components/__tests__/Location.test.js
+++ b/src/components/__tests__/Location.test.js
@@ -177,7 +177,7 @@ describe('Location.vue', () => {
 
         test('shows dash placeholder when location is empty', () => {
             const wrapper = mountLocation({ location: '' });
-            const placeholder = wrapper.find('.transparent');
+            const placeholder = wrapper.find('.text-transparent');
             expect(placeholder.exists()).toBe(true);
         });
     });
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
index 1b09f118..2497ea9a 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
@@ -1,9 +1,11 @@
 <template>
     <Dialog
         :open="setAvatarStylesDialog.visible"
-        @update:open="(open) => {
-            if (!open) closeSetAvatarStylesDialog();
-        }">
+        @update:open="
+            (open) => {
+                if (!open) closeSetAvatarStylesDialog();
+            }
+        ">
         <DialogContent class="x-dialog sm:max-w-100">
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.set_avatar_styles.header') }}</DialogTitle>
@@ -11,61 +13,61 @@
 
             <template v-if="setAvatarStylesDialog.visible">
                 <div>
-                <span>{{ t('dialog.set_avatar_styles.primary_style') }}</span>
+                    <span>{{ t('dialog.set_avatar_styles.primary_style') }}</span>
+                    <br />
+                    <Select
+                        :model-value="setAvatarStylesDialog.primaryStyle"
+                        @update:modelValue="(v) => updateDialog({ primaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
+                        <SelectTrigger size="sm" style="display: inline-flex">
+                            <SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
+                            <SelectItem
+                                v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
+                                :key="index"
+                                :value="style">
+                                {{ style }}
+                            </SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+
                 <br />
-                <Select
-                    :model-value="setAvatarStylesDialog.primaryStyle"
-                    @update:modelValue="(v) => updateDialog({ primaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
-                    <SelectTrigger size="sm" style="display: inline-flex">
-                        <SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
-                        <SelectItem
-                            v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
-                            :key="index"
-                            :value="style">
-                            {{ style }}
-                        </SelectItem>
-                    </SelectContent>
-                </Select>
-            </div>
 
-            <br />
+                <div>
+                    <span>{{ t('dialog.set_avatar_styles.secondary_style') }}</span>
+                    <br />
+                    <Select
+                        :model-value="setAvatarStylesDialog.secondaryStyle"
+                        @update:modelValue="(v) => updateDialog({ secondaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
+                        <SelectTrigger size="sm" style="display: inline-flex">
+                            <SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
+                            <SelectItem
+                                v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
+                                :key="index"
+                                :value="style">
+                                {{ style }}
+                            </SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
 
-            <div>
-                <span>{{ t('dialog.set_avatar_styles.secondary_style') }}</span>
                 <br />
-                <Select
-                    :model-value="setAvatarStylesDialog.secondaryStyle"
-                    @update:modelValue="(v) => updateDialog({ secondaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
-                    <SelectTrigger size="sm" style="display: inline-flex">
-                        <SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
-                        <SelectItem
-                            v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
-                            :key="index"
-                            :value="style">
-                            {{ style }}
-                        </SelectItem>
-                    </SelectContent>
-                </Select>
-            </div>
 
-            <br />
+                <div style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}</div>
 
-            <div style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}</div>
-
-            <InputGroupTextareaField
-                :model-value="setAvatarStylesDialog.authorTags"
-                :autosize="{ minRows: 2, maxRows: 5 }"
-                :rows="2"
-                placeholder=""
-                style="margin-top: 10px"
-                input-class="resize-none"
-                @update:modelValue="(v) => updateDialog({ authorTags: v })" />
+                <InputGroupTextareaField
+                    :model-value="setAvatarStylesDialog.authorTags"
+                    :autosize="{ minRows: 2, maxRows: 5 }"
+                    :rows="2"
+                    placeholder=""
+                    style="margin-top: 10px"
+                    input-class="resize-none"
+                    @update:modelValue="(v) => updateDialog({ authorTags: v })" />
             </template>
 
             <DialogFooter>
@@ -199,5 +201,3 @@
             });
     }
 </script>
-
-<style scoped></style>
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
index 844c9ffd..fedab66c 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
@@ -72,7 +72,7 @@
                         v-for="avatar in setAvatarTagsDialog.ownAvatars"
                         :key="avatar.id"
                         :class="[
-                            'item-width',
+                            'w-[335px]',
                             'box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:rounded-[25px_5px_5px_25px]'
                         ]"
                         @click="showAvatarDialog(avatar.id)">
@@ -343,9 +343,3 @@
         }
     }
 </script>
-
-<style scoped>
-    .item-width {
-        width: 335px;
-    }
-</style>
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 994480a5..19cf59b2 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -536,7 +536,7 @@
                                 }}</span>
                                 <template v-if="upcomingCalenderEvents.length > 0">
                                     <br />
-                                    <div class="grid-view events-row">
+                                    <div class="grid-view flex flex-wrap gap-4 overflow-y-auto max-h-[360px] py-2.5">
                                         <GroupCalendarEventCard
                                             v-for="value in upcomingCalenderEvents"
                                             :key="value.id"
@@ -557,7 +557,7 @@
                                 }}</span>
                                 <template v-if="pastCalenderEvents.length > 0">
                                     <br />
-                                    <div class="grid-view events-row">
+                                    <div class="grid-view flex flex-wrap gap-4 overflow-y-auto max-h-[360px] py-2.5">
                                         <GroupCalendarEventCard
                                             v-for="value in pastCalenderEvents"
                                             :key="value.id"
@@ -2035,19 +2035,3 @@
         }
     }
 </script>
-<style scoped>
-    .time-group-container {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        overflow: visible;
-    }
-    .events-row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
-        overflow-y: auto;
-        max-height: 360px;
-        padding: 9px 0;
-    }
-</style>
diff --git a/src/views/Charts/components/InstanceActivityDetail.vue b/src/views/Charts/components/InstanceActivityDetail.vue
index 90787fbd..9b5b0a90 100644
--- a/src/views/Charts/components/InstanceActivityDetail.vue
+++ b/src/views/Charts/components/InstanceActivityDetail.vue
@@ -4,7 +4,7 @@
             <transition name="el-fade-in-linear">
                 <Location
                     v-show="!isLoading"
-                    class="location"
+                    class="flex items-center justify-center"
                     :location="activityDetailData[0]?.location"
                     is-open-previous-instance-info-dialog />
             </transition>
@@ -407,11 +407,3 @@
         initEcharts
     });
 </script>
-
-<style scoped>
-    .location {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index 6124a3f4..b88b74f3 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -463,11 +463,3 @@
         friendsListSearchChange();
     }
 </script>
-
-<style scoped>
-    .friends-list-avatar {
-        object-fit: cover;
-        height: 22px;
-        width: 22px;
-    }
-</style>
diff --git a/src/views/Layout/MainLayout.vue b/src/views/Layout/MainLayout.vue
index 884fad72..952596f7 100644
--- a/src/views/Layout/MainLayout.vue
+++ b/src/views/Layout/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
     <template v-if="watchState.isLoggedIn">
-        <div class="main-layout-wrapper">
+        <div class="flex flex-col flex-1 h-full min-h-0 min-w-0 overflow-hidden">
             <SidebarProvider
                 :open="sidebarOpen"
                 :width="navWidth"
diff --git a/src/views/Moderation/Moderation.vue b/src/views/Moderation/Moderation.vue
index 347c0810..a7951790 100644
--- a/src/views/Moderation/Moderation.vue
+++ b/src/views/Moderation/Moderation.vue
@@ -23,7 +23,7 @@
             <InputGroupField
                 v-model="playerModerationTable.filters[1].value"
                 :placeholder="t('view.moderation.search_placeholder')"
-                class="filter-input flex-[0.4]" />
+                class="w-[150px] mx-2.5 flex-[0.4]" />
             <TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
                 <Button
                     class="rounded-full"
@@ -179,10 +179,3 @@
         };
     };
 </script>
-
-<style scoped>
-    .filter-input {
-        width: 150px;
-        margin: 0 10px;
-    }
-</style>
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index f74dedbe..584a48b3 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -295,17 +295,3 @@
         sendInviteRequestResponseDialogVisible.value = true;
     }
 </script>
-
-<style scoped>
-    .button-pd-0 {
-        padding: 0;
-    }
-
-    .notification-image {
-        flex: none;
-        height: 30px;
-        width: 30px;
-        border-radius: 4px;
-        object-fit: cover;
-    }
-</style>
diff --git a/src/views/Tools/Gallery.vue b/src/views/Tools/Gallery.vue
index 14eace60..a9aff75d 100644
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -11,27 +11,25 @@
             <template #label-gallery>
                 <span>
                     {{ t('dialog.gallery_icons.gallery') }}
-                    <span class="gallery-tab-count"> {{ galleryTable.length }}/64 </span>
+                    <span class="text-xs ml-[5px]"> {{ galleryTable.length }}/64 </span>
                 </span>
             </template>
             <template #label-icons>
                 <span>
                     {{ t('dialog.gallery_icons.icons') }}
-                    <span class="gallery-tab-count"> {{ VRCPlusIconsTable.length }}/64 </span>
+                    <span class="text-xs ml-[5px]"> {{ VRCPlusIconsTable.length }}/64 </span>
                 </span>
             </template>
             <template #label-emojis>
                 <span>
                     {{ t('dialog.gallery_icons.emojis') }}
-                    <span class="gallery-tab-count">
-                        {{ emojiTable.length }}/{{ cachedConfigTyped.maxUserEmoji }}
-                    </span>
+                    <span class="text-xs ml-[5px]"> {{ emojiTable.length }}/{{ cachedConfigTyped.maxUserEmoji }} </span>
                 </span>
             </template>
             <template #label-stickers>
                 <span>
                     {{ t('dialog.gallery_icons.stickers') }}
-                    <span class="gallery-tab-count">
+                    <span class="text-xs ml-[5px]">
                         {{ stickerTable.length }}/{{ cachedConfigTyped.maxUserStickers }}
                     </span>
                 </span>
@@ -39,13 +37,13 @@
             <template #label-prints>
                 <span>
                     {{ t('dialog.gallery_icons.prints') }}
-                    <span class="gallery-tab-count"> {{ printTable.length }}/64 </span>
+                    <span class="text-xs ml-[5px]"> {{ printTable.length }}/64 </span>
                 </span>
             </template>
             <template #label-inventory>
                 <span>
                     {{ t('dialog.gallery_icons.inventory') }}
-                    <span class="gallery-tab-count">
+                    <span class="text-xs ml-[5px]">
                         {{ inventoryTable.length }}
                     </span>
                 </span>
@@ -464,12 +462,12 @@
                                 :hint="image.worldName" />
                             <span v-else class="block">&nbsp;</span>
                             <DisplayName
-                                class="block truncate gallery-meta"
+                                class="block truncate font-mono"
                                 v-if="image.authorId"
                                 :userid="image.authorId"
                                 :hint="image.authorName" />
-                            <span v-else class="gallery-meta">&nbsp;</span>
-                            <span v-if="image.createdAt" class="block truncate gallery-meta gallery-meta--small">
+                            <span v-else class="font-mono block">&nbsp;</span>
+                            <span v-if="image.createdAt" class="block truncate font-mono text-[11px]">
                                 {{ formatDateFilter(image.createdAt, 'long') }}
                             </span>
                             <span v-else class="block">&nbsp;</span>
@@ -525,7 +523,7 @@
                             <span class="block truncate" v-text="item.name"></span>
                             <span v-if="item.description" class="block truncate" v-text="item.description"></span>
                             <span v-else class="block">&nbsp;</span>
-                            <span class="block truncate gallery-meta gallery-meta--small">
+                            <span class="block truncate font-mono text-[11px]">
                                 {{ formatDateFilter(item.created_at, 'long') }}
                             </span>
                             <span v-if="item.itemType === 'prop'">{{ t('dialog.gallery_icons.item') }}</span>
@@ -1222,19 +1220,3 @@
             .catch(() => {});
     }
 </script>
-
-<style scoped>
-    .gallery-tab-count {
-        font-size: 12px;
-        margin-left: 5px;
-    }
-
-    .gallery-meta {
-        font-family: monospace;
-        display: block;
-    }
-
-    .gallery-meta--small {
-        font-size: 11px;
-    }
-</style>
diff --git a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
index ec08b7b6..da5d5879 100644
--- a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
+++ b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
@@ -98,5 +98,3 @@
         emit('update:discordNamesDialogVisible', false);
     }
 </script>
-
-<style scoped></style>
diff --git a/src/views/Tools/dialogs/RegistryBackupDialog.vue b/src/views/Tools/dialogs/RegistryBackupDialog.vue
index 11720822..4057ba6c 100644
--- a/src/views/Tools/dialogs/RegistryBackupDialog.vue
+++ b/src/views/Tools/dialogs/RegistryBackupDialog.vue
@@ -271,9 +271,3 @@
         isRegistryBackupDialogVisible.value = false;
     }
 </script>
-
-<style scoped>
-    .button-pd-0 {
-        padding: 0;
-    }
-</style>
diff --git a/src/vr/Vr.vue b/src/vr/Vr.vue
index e4daafdf..3774ab48 100644
--- a/src/vr/Vr.vue
+++ b/src/vr/Vr.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="x-app" class="x-app x-app-type">
+    <div id="x-app" class="flex w-screen h-screen overflow-hidden cursor-default x-app-type">
         <div class="wrist" :class="{ background: config && config.backgroundEnabled }">
             <div class="x-container" style="flex: 1">
                 <div class="x-friend-list" ref="list" style="color: #aaa">
@@ -1589,7 +1589,7 @@
 
     /**
      * VR overlay config payload (passed as JSON string).
-     * @typedef {Object} VrConfigVarsPayload
+     * @typedef {object} VrConfigVarsPayload
      * @property {boolean} overlayNotifications
      * @property {boolean} hideDevicesFromFeed
      * @property {boolean} vrOverlayCpuUsage
@@ -1637,10 +1637,18 @@
         }
     }
 
+    /**
+     *
+     * @param count
+     */
     function updateOnlineFriendCount(count) {
         vrState.onlineFriendCount = parseInt(count, 10);
     }
 
+    /**
+     *
+     * @param json
+     */
     function nowPlayingUpdate(json) {
         vrState.nowPlaying = JSON.parse(json);
         const circle = /** @type {SVGCircleElement} */ (document.querySelector('.np-progress-circle-stroke'));
@@ -1658,15 +1666,26 @@
         updateFeedLength();
     }
 
+    /**
+     *
+     * @param json
+     */
     function lastLocationUpdate(json) {
         vrState.lastLocation = JSON.parse(json);
     }
 
+    /**
+     *
+     * @param json
+     */
     function wristFeedUpdate(json) {
         vrState.wristFeed = JSON.parse(json);
         updateFeedLength();
     }
 
+    /**
+     *
+     */
     function updateFeedLength() {
         if (vrState.wristFeed.length === 0) {
             return;
@@ -1686,6 +1705,9 @@
         }
     }
 
+    /**
+     *
+     */
     async function refreshCustomScript() {
         if (document.contains(document.getElementById('vr-custom-script'))) {
             document.getElementById('vr-custom-script').remove();
@@ -1701,6 +1723,10 @@
         }
     }
 
+    /**
+     *
+     * @param value
+     */
     function setNotyOpacity(value) {
         const opacity = (value / 100).toFixed(2);
         let element = document.getElementById('noty-opacity');
@@ -1714,6 +1740,9 @@
         element.innerHTML = `.noty_layout { opacity: ${opacity}; }`;
     }
 
+    /**
+     *
+     */
     async function updateStatsLoop() {
         try {
             vrState.currentTime = new Date()
@@ -1806,6 +1835,9 @@
         updateStatsLoopTimeoutId = workerTimers.setTimeout(() => updateStatsLoop(), 500);
     }
 
+    /**
+     *
+     */
     async function updateVrElectronLoop() {
         try {
             const overlayQueue = await AppApiVr.GetExecuteVrOverlayFunctionQueue();
@@ -1831,6 +1863,10 @@
         updateVrElectronLoopTimeoutId = workerTimers.setTimeout(() => updateVrElectronLoop(), 500);
     }
 
+    /**
+     *
+     * @param json
+     */
     function playNoty(json) {
         let { noty, message, image } = JSON.parse(json);
         if (typeof noty === 'undefined') {
@@ -1996,6 +2032,10 @@
         }
     }
 
+    /**
+     *
+     * @param status
+     */
     function statusClass(status) {
         let style = {};
         if (typeof status === 'undefined') {
@@ -2017,10 +2057,16 @@
         return style;
     }
 
+    /**
+     *
+     */
     function notyClear() {
         Noty.closeAll();
     }
 
+    /**
+     *
+     */
     function cleanHudFeedLoop() {
         if (!vrState.cleanHudFeedLoopStatus) {
             return;
@@ -2036,6 +2082,9 @@
         cleanHudFeedLoopTimeoutId = workerTimers.setTimeout(() => cleanHudFeedLoop(), 500);
     }
 
+    /**
+     *
+     */
     function cleanHudFeed() {
         const dt = Date.now();
         vrState.hudFeed.forEach((item) => {
@@ -2052,6 +2101,10 @@
         }
     }
 
+    /**
+     *
+     * @param json
+     */
     function addEntryHudFeed(json) {
         const data = JSON.parse(json);
         let combo = 1;
@@ -2069,6 +2122,10 @@
         cleanHudFeed();
     }
 
+    /**
+     *
+     * @param json
+     */
     function updateHudFeedTag(json) {
         const ref = JSON.parse(json);
         vrState.hudFeed.forEach((item) => {
@@ -2078,10 +2135,17 @@
         });
     }
 
+    /**
+     *
+     * @param json
+     */
     function updateHudTimeout(json) {
         vrState.hudTimeout = JSON.parse(json);
     }
 
+    /**
+     *
+     */
     async function setDatetimeFormat() {
         vrState.currentCulture = await AppApiVr.CurrentCulture();
     }
@@ -2101,6 +2165,10 @@
             .replace(' pm', '');
     };
 
+    /**
+     *
+     * @param appLanguage
+     */
     async function setAppLanguage(appLanguage) {
         if (!appLanguage) {
             return;
@@ -2112,6 +2180,10 @@
         locale.value = vrState.appLanguage;
     }
 
+    /**
+     *
+     * @param deviceStatus
+     */
     function trackingResultToClass(deviceStatus) {
         switch (deviceStatus) {
             case 'Uninitialized':