fix icon alignment

src/app.css

@@ -881,7 +881,6 @@ html.dark .x-friend-item > .detail > .extra,
 
 .x-login-container {
     position: absolute;
-    z-index: 1999;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -984,10 +983,6 @@ hr.x-vertical-divider {
     transition: transform 0.3s;
 }
 
-.x-friend-group > .rotation-transition.is-rotated {
-    transform: rotate(90deg);
-}
-
 .x-aside-container > .x-friend-list {
     flex: 1;
 }

src/components/InstanceInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="display: inline-block; margin-left: 5px">
+    <div class="flex items-center ml-2">
         <TooltipWrapper v-if="state.isValidInstance" side="bottom">
             <template #content>
                 <div>
@@ -40,7 +40,7 @@
                     </template>
                 </div>
             </template>
-            <ChevronDown />
+            <Info class="text-xs text-accent-foreground" />
         </TooltipWrapper>
         <span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
             >{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
@@ -66,7 +66,7 @@
 <script setup>
     import { reactive, watch } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { ChevronDown } from 'lucide-vue-next';
+    import { Info } from 'lucide-vue-next';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 

src/components/InviteYourself.vue

@@ -7,8 +7,8 @@
                 variant="outline"
                 v-show="isVisible"
                 @click="confirmInvite"
-                ><Mail class="h-4 w-4" /> ></Button
+                ><Mail class="h-4 w-4"
-            >
+            /></Button>
         </TooltipWrapper>
         <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
             <Button

src/components/Location.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-    import { Loader2, Lock, AlertTriangle } from 'lucide-vue-next';
+    import { AlertTriangle, Loader2, Lock } from 'lucide-vue-next';
     import { onBeforeUnmount, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/components/NavMenu.vue

@@ -766,7 +766,6 @@
         flex-direction: column;
         align-items: stretch;
         justify-content: flex-start;
-        z-index: 600;
         background-color: var(--el-bg-color-page);
         box-shadow: none;
         backdrop-filter: blur(14px) saturate(130%);

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -471,11 +471,7 @@
                             </div>
                             <div class="x-friend-item" style="cursor: default">
                                 <div class="detail">
-                                    <span class="name"
+                                    <span class="name">{{ t('dialog.avatar.info.time_spent') }}</span>
-                                        >{{ t('dialog.avatar.info.time_spent')
-                                        }}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" /> </TooltipWrapper
-                                    ></span>
 
                                     <span v-if="timeSpent === 0" class="extra">-</span>
                                     <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
@@ -499,7 +495,7 @@
                             size="icon-sm"
                             variant="outline"
                             @click="refreshAvatarDialogTreeData()">
-                            <RefreshCcw />
+                            <RefreshCw />
                         </Button>
                         <Button
                             class="rounded-full h-6 w-6"
@@ -532,7 +528,6 @@
 
 <script setup>
     import {
-        AlertTriangle,
         Apple,
         Check,
         CheckCircle,
@@ -542,7 +537,6 @@
         Image,
         Monitor,
         Pencil,
-        RefreshCcw,
         RefreshCw,
         Share2,
         Smartphone,
@@ -703,6 +697,9 @@
 
     function avatarDialogTabClick(tabName) {
         if (tabName === avatarDialogLastActiveTab.value) {
+            if (tabName === 'JSON') {
+                refreshAvatarDialogTreeData();
+            }
             return;
         }
         handleAvatarDialogTab(tabName);

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -4,6 +4,12 @@
             class="x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235"
             :show-close-button="false"
             style="top: 10vh">
+            <DialogHeader class="sr-only">
+                <DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
+                <DialogDescription>
+                    {{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
+                </DialogDescription>
+            </DialogHeader>
             <div v-loading="groupDialog.loading">
                 <div style="display: flex">
                     <img
@@ -605,9 +611,6 @@
                                     <div class="detail">
                                         <span class="name">
                                             {{ t('dialog.group.info.last_visited') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
                                         </span>
                                         <span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
                                     </div>
@@ -1144,7 +1147,7 @@
                             size="icon-sm"
                             variant="outline"
                             @click="refreshGroupDialogTreeData()">
-                            <RefreshCcw />
+                            <RefreshCw />
                         </Button>
                         <Button
                             class="rounded-full h-6 w-6"
@@ -1171,7 +1174,6 @@
 
 <script setup>
     import {
-        AlertTriangle,
         Bell,
         BellOff,
         Check,
@@ -1193,9 +1195,9 @@
         X,
         XCircle
     } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, nextTick, reactive, ref, watch } from 'vue';
-    import { Dialog, DialogContent } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { Card } from '@/components/ui/card';
     import { InputGroupField } from '@/components/ui/input-group';
@@ -1706,6 +1708,9 @@
 
     function groupDialogTabClick(tabName) {
         if (tabName === groupDialogTabCurrentName.value) {
+            if (tabName === 'JSON') {
+                refreshGroupDialogTreeData();
+            }
             return;
         }
         handleGroupDialogTab(tabName);

src/components/dialogs/LaunchDialog.vue

@@ -3,6 +3,7 @@
         <DialogContent>
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.launch.header') }}</DialogTitle>
+                <DialogDescription class="sr-only">{{ t('dialog.launch.header') }}</DialogDescription>
             </DialogHeader>
         <FieldGroup class="gap-4">
             <Field>
@@ -129,7 +130,7 @@
 
 <script setup>
     import { computed, onBeforeUnmount, ref, watch } from 'vue';
-    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import {
         DropdownMenu,
         DropdownMenuContent,

src/components/dialogs/NewInstanceDialog.vue

@@ -3,6 +3,7 @@
         <DialogContent>
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.new_instance.header') }}</DialogTitle>
+                <DialogDescription class="sr-only">{{ t('dialog.new_instance.header') }}</DialogDescription>
             </DialogHeader>
         <TabsUnderline
             v-model="newInstanceDialog.selectedTab"
@@ -514,7 +515,7 @@
 
 <script setup>
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
-    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';

src/components/dialogs/UserDialog/UserDialog.vue

@@ -178,7 +178,7 @@
                                             "
                                             side="top"
                                             :content="t('dialog.user.info.vrcplus_hides_avatar')">
-                                            <AlertTriangle />
+                                            <Info />
                                         </TooltipWrapper>
                                     </div>
                                 </div>
@@ -293,9 +293,6 @@
                                     <div class="detail">
                                         <span class="name">
                                             {{ t('dialog.user.info.last_seen') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
                                         </span>
                                         <span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
                                     </div>
@@ -308,11 +305,6 @@
                                             style="display: flex; justify-content: space-between; align-items: center">
                                             <div>
                                                 {{ t('dialog.user.info.join_count') }}
-                                                <TooltipWrapper
-                                                    side="top"
-                                                    :content="t('dialog.user.info.accuracy_notice')">
-                                                    <AlertTriangle style="margin-left: 3px" />
-                                                </TooltipWrapper>
                                             </div>
 
                                             <TooltipWrapper
@@ -330,9 +322,6 @@
                                     <div class="detail">
                                         <span class="name">
                                             {{ t('dialog.user.info.time_together') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
                                         </span>
                                         <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
                                         <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -348,11 +337,6 @@
                                         <div class="detail">
                                             <span class="name">
                                                 {{ t('dialog.user.info.play_time') }}
-                                                <TooltipWrapper
-                                                    side="top"
-                                                    :content="t('dialog.user.info.accuracy_notice')">
-                                                    <AlertTriangle style="margin-left: 3px" />
-                                                </TooltipWrapper>
                                             </span>
                                             <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
                                             <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -370,15 +354,9 @@
                                             v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
                                             class="name">
                                             {{ t('dialog.user.info.online_for') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
                                         </span>
                                         <span v-else class="name">
                                             {{ t('dialog.user.info.offline_for') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
                                         </span>
                                         <span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
                                     </div>
@@ -423,15 +401,9 @@
                                     <div class="detail">
                                         <span v-if="userDialog.unFriended" class="name">
                                             {{ t('dialog.user.info.unfriended') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
                                         </span>
                                         <span v-else class="name">
                                             {{ t('dialog.user.info.friended') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
                                         </span>
                                         <span class="extra">{{
                                             formatDateFilter(userDialog.dateFriended, 'long')
@@ -1320,7 +1292,7 @@
                             size="icon-sm"
                             variant="outline"
                             @click="refreshUserDialogTreeData()">
-                            <RefreshCcw />
+                            <RefreshCw />
                         </Button>
                         <Button
                             class="rounded-full h-6 w-6"
@@ -1367,12 +1339,12 @@
         Download,
         DownloadIcon,
         Eye,
+        Info,
         Languages,
         Loader2,
         LogOut,
         MoreHorizontal,
         Pencil,
-        RefreshCcw,
         RefreshCw,
         Tag,
         Trash2
@@ -1719,6 +1691,9 @@
 
     function userDialogTabClick(tabName) {
         if (tabName === userDialogLastActiveTab.value) {
+            if (tabName === 'JSON') {
+                refreshUserDialogTreeData();
+            }
             return;
         }
         handleUserDialogTab(tabName);

src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx

@@ -1,4 +1,4 @@
-import { ArrowUpDown, DoorOpen, Info, Trash2 } from 'lucide-vue-next';
+import { ArrowUpDown, Info, LogIn, Trash2 } from 'lucide-vue-next';
 
 import DisplayName from '../../DisplayName.vue';
 import Location from '../../Location.vue';
@@ -115,7 +115,7 @@ export const createColumns = ({
                             onLaunch?.(original?.location);
                         }}
                     >
-                        <DoorOpen class="h-4 w-4" />
+                        <LogIn class="h-4 w-4" />
                     </Button>
 
                     <Button

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -4,6 +4,12 @@
             class="x-dialog x-world-dialog translate-y-0 sm:max-w-235"
             :show-close-button="false"
             style="top: 10vh">
+            <DialogHeader class="sr-only">
+                <DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
+                <DialogDescription>
+                    {{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
+                </DialogDescription>
+            </DialogHeader>
             <div v-loading="worldDialog.loading">
                 <div style="display: flex">
                     <img
@@ -316,7 +322,7 @@
                     :unmount-on-hide="false"
                     @update:modelValue="worldDialogTabClick">
                     <template #Instances>
-                        <div>
+                        <div class="flex items-center">
                             <User />
                             {{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
                             <User style="margin-left: 10px" />
@@ -664,9 +670,6 @@
                                 <div class="detail">
                                     <span class="name">
                                         {{ t('dialog.world.info.last_visited') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
-                                            ><AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
                                     </span>
                                     <span class="extra">
                                         {{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
@@ -681,7 +684,7 @@
                             size="icon-sm"
                             variant="outline"
                             @click="refreshWorldDialogTreeData()">
-                            <RefreshCcw />
+                            <RefreshCw />
                         </Button>
                         <Button
                             class="rounded-full h-6 w-6"
@@ -723,7 +726,6 @@
 
 <script setup>
     import {
-        AlertTriangle,
         Apple,
         ArrowDown,
         Check,
@@ -740,7 +742,6 @@
         MessageSquare,
         Monitor,
         Pencil,
-        RefreshCcw,
         RefreshCw,
         Share2,
         Smartphone,
@@ -750,8 +751,8 @@
         User,
         Wand2
     } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
-    import { Dialog, DialogContent } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
@@ -944,6 +945,9 @@
 
     function worldDialogTabClick(tabName) {
         if (tabName === worldDialogLastActiveTab.value) {
+            if (tabName === 'JSON') {
+                refreshWorldDialogTreeData();
+            }
             return;
         }
         handleWorldDialogTab(tabName);

src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -32,13 +32,13 @@
     <AlertDialogPortal>
         <AlertDialogOverlay
             data-slot="alert-dialog-overlay"
-            class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80" />
+            class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80" />
         <AlertDialogContent
             data-slot="alert-dialog-content"
             v-bind="{ ...$attrs, ...forwarded }"
             :class="
                 cn(
-                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
                     props.class
                 )
             ">

src/components/ui/button/index.js

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
 export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     {
         variants: {
             variant: {

src/components/ui/dialog/DialogContent.vue

@@ -40,7 +40,7 @@
             v-bind="{ ...$attrs, ...forwarded }"
             :class="
                 cn(
-                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
                     props.class
                 )
             ">

src/components/ui/dialog/DialogOverlay.vue

@@ -19,7 +19,7 @@
         v-bind="delegatedProps"
         :class="
             cn(
-                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80',
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
                 props.class
             )
         ">

src/components/ui/dialog/DialogScrollContent.vue

@@ -32,11 +32,11 @@
 <template>
     <DialogPortal>
         <DialogOverlay
-            class="fixed inset-0 z-10000 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
             <DialogContent
                 :class="
                     cn(
-                        'relative z-10000 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+                        'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
                         props.class
                     )
                 "

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -51,7 +51,7 @@
             v-bind="{ ...$attrs, ...forwarded }"
             :class="
                 cn(
-                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
                     props.class
                 )
             ">

src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -46,7 +46,7 @@
         v-bind="forwarded"
         :class="
             cn(
-                'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+                'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
                 props.class
             )
         ">

src/components/ui/hover-card/HoverCardContent.vue

@@ -43,7 +43,7 @@
             v-bind="{ ...$attrs, ...forwardedProps }"
             :class="
                 cn(
-                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-64 rounded-md border p-4 shadow-md outline-hidden',
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
                     props.class
                 )
             ">

src/components/ui/popover/PopoverContent.vue

@@ -52,7 +52,7 @@
             v-bind="{ ...$attrs, ...forwarded }"
             :class="
                 cn(
-                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
                     props.class
                 )
             ">

src/components/ui/select/SelectContent.vue

@@ -49,7 +49,7 @@
             v-bind="{ ...$attrs, ...forwarded }"
             :class="
                 cn(
-                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-10000 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
                     position === 'popper' &&
                         'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
                     props.class

src/components/ui/tooltip/TooltipContent.vue

@@ -40,14 +40,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             v-bind="{ ...forwarded, ...$attrs }"
             :class="
                 cn(
-                    'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+                    'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
                     props.class
                 )
             ">
             <slot />
 
             <TooltipArrow
-                class="bg-foreground fill-foreground z-10000 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+                class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
         </TooltipContent>
     </TooltipPortal>
 </template>

src/views/Charts/components/InstanceActivity.vue

@@ -12,10 +12,6 @@
                             <div>{{ t('view.charts.instance_activity.tips.online_time') }}</div>
                             <div>{{ t('view.charts.instance_activity.tips.click_Y_axis') }}</div>
                             <div>{{ t('view.charts.instance_activity.tips.click_instance_name') }}</div>
-                            <div>
-                                <AlertTriangle />
-                                <i>{{ t('view.charts.instance_activity.tips.accuracy_notice') }}</i>
-                            </div>
                         </div>
                     </HoverCardContent>
                 </HoverCard>

src/views/FriendsLocations/components/FriendsLocationsCard.vue

@@ -11,7 +11,7 @@
         </div>
         <div class="friend-card__body">
             <div class="friend-card__signature" :title="friend.ref?.statusDescription">
-                <Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-0.5" style="opacity: 0.7" />
+                <Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-1" style="opacity: 0.7" />
                 {{ friend.ref?.statusDescription || '&nbsp;' }}
             </div>
             <div v-if="displayInstanceInfo" @click.stop class="friend-card__world" :title="friend.worldName">
@@ -184,6 +184,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        display: flex;
+        align-items: center;
     }
 
     .friend-card__world {

src/views/GameLog/columns.jsx

@@ -114,7 +114,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                     <span>
                         {original.displayName ? (
                             <span
-                                class="x-link table-user pr-2.5"
+                                class="x-link table-user mr-1"
                                 onClick={() => lookupUser(original)}
                             >
                                 {original.displayName}

src/views/Login/Login.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="float: left; margin: 5px; z-index: 3000">
+    <div style="float: left; margin: 5px">
         <TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
             <Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
                 ><CircleArrowDown

src/views/Sidebar/Sidebar.vue

@@ -163,15 +163,4 @@
         font-size: 12px;
         margin-left: 10px;
     }
-
-    .group-calendar-button {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        box-shadow: var(--el-box-shadow-lighter);
-        border: none;
-        z-index: 5;
-        width: 40px;
-        height: 40px;
-    }
 </style>

src/views/Sidebar/components/FriendsSidebar.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="x-friend-list" style="padding: 10px 5px">
         <div
-            class="x-friend-group x-link"
+            class="x-friend-group x-link flex items-center"
             style="padding: 0 0 5px"
             @click="
                 isFriendsGroupMe = !isFriendsGroupMe;
                 saveFriendsGroupStates();
             ">
-            <ArrowRight class="rotation-transition" :class="{ 'is-rotated': isFriendsGroupMe }" />
+            <ChevronDown class="rotation-transition" :class="{ 'is-rotated': isFriendsGroupMe }" />
             <span style="margin-left: 5px">{{ t('side_panel.me') }}</span>
         </div>
         <div v-show="isFriendsGroupMe">
@@ -38,12 +38,12 @@
         </div>
         <div
             v-show="vipFriendsDisplayNumber"
-            class="x-friend-group x-link"
+            class="x-friend-group x-link flex items-center"
             @click="
                 isVIPFriends = !isVIPFriends;
                 saveFriendsGroupStates();
             ">
-            <ArrowRight class="rotation-transition" :class="{ 'is-rotated': isVIPFriends }" />
+            <ChevronDown class="rotation-transition" :class="{ 'is-rotated': isVIPFriends }" />
             <span style="margin-left: 5px">
                 {{ t('side_panel.favorite') }} &horbar;
                 {{ vipFriendsDisplayNumber }}
@@ -78,8 +78,8 @@
         </div>
 
         <template v-if="isSidebarGroupByInstance && friendsInSameInstance.length">
-            <div class="x-friend-group x-link" @click="toggleSwitchGroupByInstanceCollapsed">
+            <div class="x-friend-group x-link flex items-center" @click="toggleSwitchGroupByInstanceCollapsed">
-                <ArrowRight
+                <ChevronDown
                     class="rotation-transition"
                     :class="{ 'is-rotated': !isSidebarGroupByInstanceCollapsed }" />
                 <span style="margin-left: 5px"
@@ -111,12 +111,12 @@
         </template>
         <div
             v-show="onlineFriendsByGroupStatus.length"
-            class="x-friend-group x-link"
+            class="x-friend-group x-link flex items-center"
             @click="
                 isOnlineFriends = !isOnlineFriends;
                 saveFriendsGroupStates();
             ">
-            <ArrowRight class="rotation-transition" :class="{ 'is-rotated': isOnlineFriends }" />
+            <ChevronDown class="rotation-transition" :class="{ 'is-rotated': isOnlineFriends }" />
             <span style="margin-left: 5px"
                 >{{ t('side_panel.online') }} &horbar; {{ onlineFriendsByGroupStatus.length }}</span
             >
@@ -130,12 +130,12 @@
         </div>
         <div
             v-show="activeFriends.length"
-            class="x-friend-group x-link"
+            class="x-friend-group x-link flex items-center"
             @click="
                 isActiveFriends = !isActiveFriends;
                 saveFriendsGroupStates();
             ">
-            <ArrowRight class="rotation-transition" :class="{ 'is-rotated': isActiveFriends }" />
+            <ChevronDown class="rotation-transition" :class="{ 'is-rotated': isActiveFriends }" />
             <span style="margin-left: 5px">{{ t('side_panel.active') }} &horbar; {{ activeFriends.length }}</span>
         </div>
         <div v-if="isActiveFriends">
@@ -147,12 +147,12 @@
         </div>
         <div
             v-show="offlineFriends.length"
-            class="x-friend-group x-link"
+            class="x-friend-group x-link flex items-center"
             @click="
                 isOfflineFriends = !isOfflineFriends;
                 saveFriendsGroupStates();
             ">
-            <ArrowRight class="rotation-transition" :class="{ 'is-rotated': isOfflineFriends }" />
+            <ChevronDown class="rotation-transition" :class="{ 'is-rotated': isOfflineFriends }" />
             <span style="margin-left: 5px">{{ t('side_panel.offline') }} &horbar; {{ offlineFriends.length }}</span>
         </div>
         <div v-if="isOfflineFriends">
@@ -167,7 +167,7 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
-    import { ArrowRight } from 'lucide-vue-next';
+    import { ChevronDown } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -319,7 +319,7 @@
         text-decoration: underline;
     } */
     .is-rotated {
-        transform: rotate(90deg);
+        transform: rotate(-90deg);
     }
     .rotation-transition {
         transition: transform 0.2s ease-in-out;

src/views/Sidebar/components/GroupsSidebar.vue

@@ -3,7 +3,7 @@
         <template v-for="(group, index) in groupedGroupInstances" :key="getGroupId(group)">
             <div class="x-friend-group x-link" :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
                 <div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
-                    <ArrowRight
+                    <ChevronDown
                         class="rotation-transition"
                         :class="{ 'is-rotated': !groupInstancesCfg[getGroupId(group)]?.isCollapsed }" />
                     <span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span>
@@ -38,7 +38,7 @@
 
 <script setup>
     import { computed, ref } from 'vue';
-    import { ArrowRight } from 'lucide-vue-next';
+    import { ChevronDown } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
 
     import { useAppearanceSettingsStore, useGroupStore } from '../../../stores';
@@ -100,7 +100,7 @@
         text-decoration: underline;
     }
     .is-rotated {
-        transform: rotate(90deg);
+        transform: rotate(-90deg);
     }
     .rotation-transition {
         transition: transform 0.2s ease-in-out;

src/views/Tools/Tools.vue

@@ -6,7 +6,7 @@
             <div class="tool-categories">
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('group')">
-                        <ArrowRight
+                        <ChevronDown
                             class="rotation-transition"
                             :class="{ 'is-rotated': !categoryCollapsed['group'] }" />
                         <span class="category-title">{{ t('view.tools.group.header') }}</span>
@@ -14,7 +14,7 @@
                     <div class="tools-grid" v-show="!categoryCollapsed['group']">
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showGroupCalendarDialog">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <CalendarDays />
                                 </div>
                                 <div class="tool-info">
@@ -27,15 +27,15 @@
                 </div>
 
                 <div class="tool-category">
-                    <div class="category-header" @click="toggleCategory('image')">
+                    <div class="category-header text-2xl" @click="toggleCategory('image')">
-                        <ArrowRight
+                        <ChevronDown
                             class="rotation-transition"
                             :class="{ 'is-rotated': !categoryCollapsed['image'] }" />
                         <span class="category-title">{{ t('view.tools.pictures.header') }}</span>
                     </div>
                     <div class="tools-grid" v-show="!categoryCollapsed['image']">
                         <Card class="tool-card p-0 gap-0">
-                            <div class="tool-content" @click="showScreenshotMetadataPage">
+                            <div class="tool-content text-2xl" @click="showScreenshotMetadataPage">
                                 <div class="tool-icon">
                                     <Camera />
                                 </div>
@@ -49,7 +49,7 @@
                         </Card>
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showGalleryPage">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <Images />
                                 </div>
                                 <div class="tool-info">
@@ -62,7 +62,7 @@
                         </Card>
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="openVrcPhotosFolder">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <FolderOpen />
                                 </div>
                                 <div class="tool-info">
@@ -75,7 +75,7 @@
                         </Card>
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="openVrcScreenshotsFolder">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <FolderOpen />
                                 </div>
                                 <div class="tool-info">
@@ -92,15 +92,17 @@
                 </div>
 
                 <div class="tool-category">
-                    <div class="category-header" @click="toggleCategory('user')">
+                    <div class="category-header text-2xl" @click="toggleCategory('user')">
-                        <ArrowRight class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['user'] }" />
+                        <ChevronDown
+                            class="rotation-transition"
+                            :class="{ 'is-rotated': !categoryCollapsed['user'] }" />
                         <span class="category-title">{{ t('view.tools.export.header') }}</span>
                     </div>
 
                     <div class="tools-grid" v-show="!categoryCollapsed['user']">
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showExportDiscordNamesDialog">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <MessageSquare />
                                 </div>
                                 <div class="tool-info">
@@ -113,7 +115,7 @@
                         </Card>
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showNoteExportDialog">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <UserCheck />
                                 </div>
                                 <div class="tool-info">
@@ -127,7 +129,7 @@
 
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showExportFriendsListDialog">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <UserCheck />
                                 </div>
                                 <div class="tool-info">
@@ -140,7 +142,7 @@
                         </Card>
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showExportAvatarsListDialog">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <UserCheck />
                                 </div>
                                 <div class="tool-info">
@@ -156,7 +158,7 @@
 
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('other')">
-                        <ArrowRight
+                        <ChevronDown
                             class="rotation-transition"
                             :class="{ 'is-rotated': !categoryCollapsed['other'] }" />
                         <span class="category-title">{{ t('view.tools.other.header') }}</span>
@@ -164,7 +166,7 @@
                     <div class="tools-grid" v-show="!categoryCollapsed['other']">
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showEditInviteMessageDialog">
-                                <div class="tool-icon">
+                                <div class="tool-icon text-2xl">
                                     <SquarePen />
                                 </div>
                                 <div class="tool-info">
@@ -202,9 +204,9 @@
 
 <script setup>
     import {
-        ArrowRight,
         CalendarDays,
         Camera,
+        ChevronDown,
         FolderOpen,
         Images,
         MessageSquare,
@@ -401,7 +403,7 @@
     }
 
     .is-rotated {
-        transform: rotate(90deg);
+        transform: rotate(-90deg);
     }
 
     .rotation-transition {