From 1de16dc699fb4b15558f30d99e3bb55f9cb3e99c Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 18 Jan 2026 17:06:16 +0900
Subject: [PATCH] fix styles

---
 src/app.css                                   |   6 +-
 src/components/AvatarInfo.vue                 |   8 +-
 src/components/DisplayName.vue                |   2 +-
 src/components/Location.vue                   | 124 ++++++------
 src/components/LocationWorld.vue              |   4 +-
 .../dialogs/AvatarDialog/AvatarDialog.vue     |   6 +-
 src/components/dialogs/CustomNavDialog.vue    |   2 +-
 .../dialogs/GroupDialog/GroupDialog.vue       |  12 +-
 .../dialogs/InviteDialog/InviteDialog.vue     |   2 +-
 src/components/dialogs/LaunchDialog.vue       |   4 +-
 .../previousInstancesInfoColumns.jsx          |   2 +-
 .../dialogs/UserDialog/UserActionDropdown.vue |   4 -
 .../dialogs/UserDialog/UserDialog.vue         |   5 +-
 .../dialogs/UserDialog/UserSummaryHeader.vue  |  10 +-
 .../dialogs/WorldDialog/WorldDialog.vue       |   6 +-
 src/localization/en.json                      |   3 +-
 src/views/Charts/components/MutualFriends.vue |  16 +-
 src/views/Favorites/FavoritesAvatar.vue       | 177 ++++--------------
 src/views/Favorites/FavoritesFriend.vue       | 148 +++------------
 src/views/Favorites/FavoritesWorld.vue        | 161 ++++------------
 .../Favorites/dialogs/avatarImportColumns.jsx |   4 +-
 .../Favorites/dialogs/friendImportColumns.jsx |   2 +-
 .../Favorites/dialogs/worldImportColumns.jsx  |   4 +-
 src/views/Feed/columns.jsx                    |   6 +-
 src/views/FriendLog/columns.jsx               |   4 +-
 .../FriendsLocations/FriendsLocations.vue     | 105 ++++++-----
 src/views/GameLog/columns.jsx                 |  16 +-
 src/views/Layout/AuthenticatedLayout.vue      |  11 +-
 src/views/Login/Login.vue                     |   9 +-
 src/views/Moderation/columns.jsx              |   4 +-
 src/views/Notifications/columns.jsx           |  20 +-
 src/views/PlayerList/PlayerList.vue           |   7 +-
 .../components/photonEventColumns.jsx         |  25 ++-
 .../Settings/components/Tabs/GeneralTab.vue   |   4 +-
 .../Settings/dialogs/ChangelogDialog.vue      |   5 +-
 src/views/Sidebar/Sidebar.vue                 |   1 +
 .../Sidebar/components/FriendsSidebar.vue     |  15 +-
 .../Sidebar/components/GroupsSidebar.vue      |   8 +-
 src/views/Tools/ScreenshotMetadata.vue        |  17 +-
 src/views/Tools/dialogs/noteExportColumns.jsx |   2 +-
 40 files changed, 370 insertions(+), 601 deletions(-)

diff --git a/src/app.css b/src/app.css
index e70c1315..3067eb63 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,11 +21,15 @@ html {
     box-sizing: border-box;
     background: var(--background);
     height: calc(100vh - 20px);
-    margin: 10px 10px 10px 0;
+    margin: 10px 0 10px 0;
     border-radius: var(--radius);
     border: 1px solid var(--border);
 }
 
+.aside-collapsed .x-container {
+    margin-right: 10px;
+}
+
 html.dark .x-container {
     background: var(--sidebar);
 }
diff --git a/src/components/AvatarInfo.vue b/src/components/AvatarInfo.vue
index 777d2a5a..77c54509 100644
--- a/src/components/AvatarInfo.vue
+++ b/src/components/AvatarInfo.vue
@@ -3,7 +3,12 @@
         <span class="flex items-center"
             >{{ avatarName }} <Lock v-if="avatarType && avatarType === '(own)'" class="h-4 w-4 mx-1"
         /></span>
-        <span v-if="avatarTags" style="font-size: 12px">{{ avatarTags }}</span>
+        <TooltipWrapper v-if="avatarTags">
+            <template #content>
+                <span>{{ avatarTags }}</span>
+            </template>
+            <span v-if="avatarTags" style="font-size: 12px" class="truncate">{{ avatarTags }}</span>
+        </TooltipWrapper>
     </div>
 </template>
 
@@ -11,6 +16,7 @@
     import { ref, watch } from 'vue';
     import { Lock } from 'lucide-vue-next';
 
+    import { TooltipWrapper } from './ui/tooltip';
     import { useAvatarStore } from '../stores';
 
     const avatarStore = useAvatarStore();
diff --git a/src/components/DisplayName.vue b/src/components/DisplayName.vue
index 7ec035b1..cd98b84c 100644
--- a/src/components/DisplayName.vue
+++ b/src/components/DisplayName.vue
@@ -1,5 +1,5 @@
 <template>
-    <span @click="showUserDialog" class="x-link">{{ username }}</span>
+    <span @click="showUserDialog" class="cursor-pointer">{{ username }}</span>
 </template>
 
 <script setup>
diff --git a/src/components/Location.vue b/src/components/Location.vue
index c1755f40..6e1ce973 100644
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -3,9 +3,9 @@
         <div v-if="!text" class="transparent">-</div>
         <div v-show="text" class="flex items-center">
             <div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
-            <template v-if="disableTooltip">
+            <TooltipWrapper :content="tooltipContent" :disabled="tooltipDisabled" :delay-duration="300" side="top">
                 <div
-                    :class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
+                    :class="locationClasses"
                     class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
                     @click="handleShowWorldDialog">
                     <Spinner v-if="isTraveling" class="mr-1" />
@@ -13,48 +13,25 @@
                     <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">
+                    <span
+                        v-if="groupName"
+                        class="ml-0.5 whitespace-nowrap cursor-pointer"
+                        @click.stop="handleShowGroupDialog">
                         ({{ groupName }})
                     </span>
                 </div>
+            </TooltipWrapper>
 
-                <AlertTriangle v-if="isClosed" :class="['inline-block', 'ml-5']" style="color: lightcoral" />
-            </template>
-
-            <template v-else>
-                <TooltipWrapper
-                    :content="`${t('dialog.new_instance.instance_id')}: #${instanceName}`"
-                    :disabled="!instanceName || showInstanceIdInLocation"
-                    :delay-duration="300"
-                    side="top">
-                    <div
-                        :class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
-                        class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
-                        @click="handleShowWorldDialog">
-                        <Spinner v-if="isTraveling" class="mr-1" />
-                        <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>
-                    </div>
-                </TooltipWrapper>
-                <TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
-                    <AlertTriangle :class="['inline-block', 'ml-5']" style="color: lightcoral" />
-                </TooltipWrapper>
-            </template>
-            <Lock v-if="strict" :class="['inline-block', 'ml-5']" />
+            <TooltipWrapper v-if="isClosed" :content="closedTooltip" :disabled="disableTooltip">
+                <AlertTriangle class="inline-block ml-2 text-muted-foreground" />
+            </TooltipWrapper>
+            <Lock v-if="strict" class="inline-block ml-2 text-muted-foreground" />
         </div>
     </div>
 </template>
 
 <script setup>
-    import { onBeforeUnmount, ref, watch } from 'vue';
+    import { computed, onBeforeUnmount, ref, watch } from 'vue';
     import { AlertTriangle, Lock } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -113,6 +90,19 @@
     const isClosed = ref(false);
     const instanceName = ref('');
 
+    const isLocationLink = computed(() => props.link && props.location !== 'private' && props.location !== 'offline');
+    const locationClasses = computed(() => [
+        'x-location',
+        {
+            'cursor-pointer': isLocationLink.value
+        }
+    ]);
+    const tooltipContent = computed(() => `${t('dialog.new_instance.instance_id')}: #${instanceName.value}`);
+    const tooltipDisabled = computed(
+        () => props.disableTooltip || !instanceName.value || showInstanceIdInLocation.value
+    );
+    const closedTooltip = computed(() => t('dialog.user.info.instance_closed'));
+
     let isDisposed = false;
     onBeforeUnmount(() => {
         isDisposed = true;
@@ -136,16 +126,21 @@
         return props.location;
     }
 
-    function parse() {
-        if (isDisposed) {
-            return;
-        }
+    function resetState() {
         text.value = '';
         region.value = '';
         strict.value = false;
         isTraveling.value = false;
         groupName.value = '';
         isClosed.value = false;
+        instanceName.value = '';
+    }
+
+    function parse() {
+        if (isDisposed) {
+            return;
+        }
+        resetState();
 
         let instanceId = props.location;
         if (typeof props.traveling !== 'undefined' && props.location === 'traveling') {
@@ -159,27 +154,43 @@
             return;
         }
 
-        const instanceRef = cachedInstances.get(L.tag);
-        if (typeof instanceRef !== 'undefined') {
-            if (instanceRef.displayName) {
-                setText(L);
-                instanceName.value = instanceRef.displayName;
-            }
-            if (instanceRef.closedAt) {
-                isClosed.value = true;
-            }
-        }
+        applyInstanceRef(L);
+        updateGroupName(L, instanceId);
+        updateRegion(L);
+        strict.value = L.strict;
+    }
 
+    function applyInstanceRef(L) {
+        const instanceRef = cachedInstances.get(L.tag);
+        if (typeof instanceRef === 'undefined') {
+            return;
+        }
+        if (instanceRef.displayName) {
+            setText(L);
+            instanceName.value = instanceRef.displayName;
+        }
+        if (instanceRef.closedAt) {
+            isClosed.value = true;
+        }
+    }
+
+    function updateGroupName(L, instanceId) {
         if (props.grouphint) {
             groupName.value = props.grouphint;
-        } else if (L.groupId) {
-            groupName.value = L.groupId;
-            getGroupName(instanceId).then((name) => {
-                if (!isDisposed && name && currentInstanceId() === L.tag) {
-                    groupName.value = name;
-                }
-            });
+            return;
         }
+        if (!L.groupId) {
+            return;
+        }
+        groupName.value = L.groupId;
+        getGroupName(instanceId).then((name) => {
+            if (!isDisposed && name && currentInstanceId() === L.tag) {
+                groupName.value = name;
+            }
+        });
+    }
+
+    function updateRegion(L) {
         region.value = '';
         if (!L.isOffline && !L.isPrivate && !L.isTraveling) {
             region.value = L.region;
@@ -187,7 +198,6 @@
                 region.value = 'us';
             }
         }
-        strict.value = L.strict;
     }
 
     function setText(L) {
diff --git a/src/components/LocationWorld.vue b/src/components/LocationWorld.vue
index 13bf243f..61562d20 100644
--- a/src/components/LocationWorld.vue
+++ b/src/components/LocationWorld.vue
@@ -1,11 +1,11 @@
 <template>
     <span class="x-location-world">
         <span v-if="region" :class="['flags', 'inline-block', 'mr-1.25', region]"></span>
-        <span @click="showLaunchDialog" class="x-link">
+        <span @click="showLaunchDialog" class="cursor-pointer">
             <Unlock v-if="isUnlocked" :class="['inline-block', 'mr-1.25']" />
             <span> {{ accessTypeName }} #{{ instanceName }}</span>
         </span>
-        <span v-if="groupName" @click="showGroupDialog" class="x-link">({{ groupName }})</span>
+        <span v-if="groupName" @click="showGroupDialog" class="cursor-pointer">({{ groupName }})</span>
         <TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
             <AlertTriangle :class="['inline-block', 'ml-5']" style="color: lightcoral" />
         </TooltipWrapper>
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 3030eec4..886bfb3d 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -8,7 +8,7 @@
                 <div style="display: flex">
                     <img
                         :src="avatarDialog.ref.thumbnailImageUrl"
-                        class="x-link"
+                        class="cursor-pointer"
                         @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
                         style="flex: none; width: 160px; height: 120px; border-radius: 12px"
                         loading="lazy" />
@@ -23,7 +23,7 @@
                             </div>
                             <div style="margin-top: 5px">
                                 <span
-                                    class="x-link x-grey"
+                                    class="cursor-pointer x-grey"
                                     style="font-family: monospace"
                                     @click="showUserDialog(avatarDialog.ref.authorId)"
                                     v-text="avatarDialog.ref.authorName"></span>
@@ -105,7 +105,7 @@
                                 <Badge
                                     v-if="avatarDialog.inCache"
                                     variant="outline"
-                                    class="x-link"
+                                    class="cursor-pointer"
                                     style="margin-right: 5px; margin-top: 5px"
                                     @click="openFolderGeneric(avatarDialog.cachePath)">
                                     <span v-text="avatarDialog.cacheSize"></span>
diff --git a/src/components/dialogs/CustomNavDialog.vue b/src/components/dialogs/CustomNavDialog.vue
index 24afa52a..0cf9e9ae 100644
--- a/src/components/dialogs/CustomNavDialog.vue
+++ b/src/components/dialogs/CustomNavDialog.vue
@@ -154,7 +154,7 @@
                                         </div>
                                         <div class="mt-2">
                                             <a
-                                                class="x-link"
+                                                class="cursor-pointer"
                                                 @click.prevent="openExternalLink('https://remixicon.com/')">
                                                 https://remixicon.com/
                                             </a>
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index a26a2838..413112d9 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -15,7 +15,7 @@
                     <img
                         :src="groupDialog.ref.iconUrl"
                         style="flex: none; width: 120px; height: 120px; border-radius: 12px"
-                        class="x-link"
+                        class="cursor-pointer"
                         @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
                         loading="lazy" />
                     <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
@@ -42,7 +42,7 @@
                             </TooltipWrapper>
                             <div style="margin-top: 5px">
                                 <span
-                                    class="x-link x-grey"
+                                    class="cursor-pointer x-grey"
                                     style="font-family: monospace"
                                     @click="showUserDialog(groupDialog.ref.ownerId)"
                                     v-text="groupDialog.ownerDisplayName"></span>
@@ -357,7 +357,7 @@
                         <div class="group-banner-image-info">
                             <img
                                 :src="groupDialog.ref.bannerUrl"
-                                class="x-link"
+                                class="cursor-pointer"
                                 style="
                                     flex: none;
                                     width: 100%;
@@ -424,7 +424,7 @@
                                         style="display: inline-block; margin-right: 5px">
                                         <img
                                             :src="groupDialog.announcement.imageUrl"
-                                            class="x-link"
+                                            class="cursor-pointer"
                                             style="
                                                 flex: none;
                                                 width: 60px;
@@ -760,7 +760,7 @@
                                         <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
                                             <img
                                                 :src="post.imageUrl"
-                                                class="x-link"
+                                                class="cursor-pointer"
                                                 style="
                                                     flex: none;
                                                     width: 60px;
@@ -1123,7 +1123,7 @@
                                         class="p-0 overflow-hidden transition-shadow hover:shadow-md">
                                         <img
                                             :src="image.imageUrl"
-                                            :class="['x-link', 'max-w-full', 'max-h-full']"
+                                            :class="[' cursor-pointer', 'max-w-full', 'max-h-full']"
                                             @click="showFullscreenImageDialog(image.imageUrl)"
                                             loading="lazy" />
                                     </Card>
diff --git a/src/components/dialogs/InviteDialog/InviteDialog.vue b/src/components/dialogs/InviteDialog/InviteDialog.vue
index 21794a13..8940dcec 100644
--- a/src/components/dialogs/InviteDialog/InviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/InviteDialog.vue
@@ -12,7 +12,7 @@
             </DialogHeader>
 
             <div v-if="inviteDialog.visible">
-                <Location :location="inviteDialog.worldId" :link="false" />
+                <Location :location="inviteDialog.worldId" :link="false" class="cursor-default" />
                 <br />
                 <Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
                     t('dialog.invite.add_self')
diff --git a/src/components/dialogs/LaunchDialog.vue b/src/components/dialogs/LaunchDialog.vue
index e5ac4bc9..2741208b 100644
--- a/src/components/dialogs/LaunchDialog.vue
+++ b/src/components/dialogs/LaunchDialog.vue
@@ -29,7 +29,7 @@
                         <span class="flex items-center gap-1">
                             <span>{{ t('dialog.launch.short_url') }}</span>
                             <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
-                                <AlertTriangle />
+                                <Info class="text-muted-foreground" />
                             </TooltipWrapper>
                         </span>
                     </FieldLabel>
@@ -145,7 +145,7 @@
     } from '@/components/ui/dropdown-menu';
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { computed, onBeforeUnmount, ref, watch } from 'vue';
-    import { AlertTriangle, Copy, MoreHorizontal } from 'lucide-vue-next';
+    import { Copy, Info, MoreHorizontal } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { InputGroupField } from '@/components/ui/input-group';
diff --git a/src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx b/src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx
index 043d296c..d8d1be84 100644
--- a/src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx
+++ b/src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx
@@ -76,7 +76,7 @@ export const createColumns = ({ onLookupUser }) => [
             const original = row.original;
             return (
                 <span
-                    class="x-link"
+                    class=" cursor-pointer"
                     onClick={(event) => {
                         event.stopPropagation();
                         onLookupUser?.(original);
diff --git a/src/components/dialogs/UserDialog/UserActionDropdown.vue b/src/components/dialogs/UserDialog/UserActionDropdown.vue
index b9b4e9cc..a3586d43 100644
--- a/src/components/dialogs/UserDialog/UserActionDropdown.vue
+++ b/src/components/dialogs/UserDialog/UserActionDropdown.vue
@@ -66,10 +66,6 @@
                         {{ t('dialog.user.actions.edit_pronouns') }}
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />
-                    <DropdownMenuItem @click="onCommand('Logout')">
-                        <Power class="size-4" />
-                        {{ t('dialog.user.actions.logout') }}
-                    </DropdownMenuItem>
                 </template>
                 <template v-else>
                     <template v-if="userDialog.isFriend">
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index c7999a6e..e000486d 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -178,7 +178,7 @@
                                         class="extra">
                                         <div style="display: inline-block; flex: none; margin-right: 5px">
                                             <Avatar
-                                                class="x-link size-15! rounded-lg!"
+                                                class="cursor-pointer size-15! rounded-lg!"
                                                 :style="{
                                                     background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
                                                 }"
@@ -1442,7 +1442,6 @@
     const { getFriendRequest, handleFriendDelete } = useFriendStore();
     const { clearInviteImageUpload, showFullscreenImageDialog, showGalleryPage } = useGalleryStore();
 
-    const { logout } = useAuthStore();
     const { cachedConfig } = storeToRefs(useAuthStore());
     const { applyPlayerModeration, handlePlayerModerationDelete } = useModerationStore();
     const { shiftHeld } = storeToRefs(useUiStore());
@@ -1802,8 +1801,6 @@
             showBioDialog();
         } else if (command === 'Pencil Pronouns') {
             showPronounsDialog();
-        } else if (command === 'Logout') {
-            logout();
         } else if (command === 'Request Invite') {
             notificationRequest
                 .sendRequestInvite(
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 308fdd4f..31d60c44 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -4,14 +4,14 @@
             v-if="
                 !userDialog.loading && (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
             "
-            class="x-link"
+            class="cursor-pointer"
             :src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
             style="flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
             @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
             loading="lazy" />
         <img
             v-else-if="!userDialog.loading"
-            class="x-link"
+            class="cursor-pointer"
             :src="userDialog.ref.currentAvatarThumbnailImageUrl"
             style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
             @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
@@ -191,7 +191,7 @@
                             <Popover>
                                 <PopoverTrigger asChild>
                                     <img
-                                        class="x-link hover:grayscale-0"
+                                        class="cursor-pointer hover:grayscale-0"
                                         :src="badge.badgeImageUrl"
                                         style="
                                             flex: none;
@@ -208,7 +208,7 @@
                                 <PopoverContent side="bottom" class="w-75">
                                     <img
                                         :src="badge.badgeImageUrl"
-                                        :class="['x-link', 'max-w-full', 'max-h-full']"
+                                        :class="['cursor-pointer', 'max-w-full', 'max-h-full']"
                                         @click="showFullscreenImageDialog(badge.badgeImageUrl)"
                                         loading="lazy" />
                                     <br />
@@ -253,7 +253,7 @@
 
             <div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 10px">
                 <img
-                    class="x-link"
+                    class="cursor-pointer"
                     :src="userImage(userDialog.ref, true, '256', true)"
                     style="flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover"
                     @click="showFullscreenImageDialog(userDialog.ref.userIcon)"
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 4e3435b8..de6ebcb4 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -14,7 +14,7 @@
                 <div style="display: flex">
                     <img
                         :src="worldDialog.ref.thumbnailImageUrl"
-                        class="x-link"
+                        class="cursor-pointer"
                         style="flex: none; width: 160px; height: 120px; border-radius: 12px"
                         @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
                         loading="lazy" />
@@ -36,7 +36,7 @@
                             </div>
                             <div style="margin-top: 5px">
                                 <span
-                                    class="x-link x-grey"
+                                    class="cursor-pointer x-grey"
                                     style="font-family: monospace"
                                     @click="showUserDialog(worldDialog.ref.authorId)"
                                     v-text="worldDialog.ref.authorName" />
@@ -125,7 +125,7 @@
                                 <Badge
                                     v-if="worldDialog.inCache"
                                     variant="outline"
-                                    class="x-link"
+                                    class="cursor-pointer"
                                     style="margin-right: 5px; margin-top: 5px"
                                     @click="openFolderGeneric(worldDialog.cachePath)">
                                     <span v-text="worldDialog.cacheSize" />
diff --git a/src/localization/en.json b/src/localization/en.json
index 6b0bf50b..3fa015c1 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -348,7 +348,8 @@
                     "stop_fetching": "Stop fetching"
                 },
                 "status": {
-                    "no_friends_to_process": "You have no friends to process"
+                    "no_friends_to_process": "You have no friends to process",
+                    "loading_cache": "Loading cached mutual friends from database"
                 },
                 "progress": {
                     "friends_processed": "Friends processed",
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index cb2d52c6..f8245ba5 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -215,7 +215,11 @@
     const isOptOut = computed(() => Boolean(currentUser.value?.hasSharedConnectionsOptOut));
     // @ts-ignore
     const graphReady = computed(() => Array.isArray(graphPayload.value?.nodes) && graphPayload.value.nodes.length > 0);
-    const fetchButtonDisabled = computed(() => isFetching.value || isOptOut.value || totalFriends.value === 0);
+    const isLoadingSnapshot = ref(false);
+    const loadingToastId = ref(null);
+    const fetchButtonDisabled = computed(
+        () => isFetching.value || isOptOut.value || totalFriends.value === 0 || isLoadingSnapshot.value
+    );
     const fetchButtonLabel = computed(() =>
         hasFetched.value
             ? t('view.charts.mutual_friend.actions.fetch_again')
@@ -361,9 +365,11 @@
     }
 
     async function loadGraphFromDatabase() {
-        if (hasFetched.value || isFetching.value) {
+        if (hasFetched.value || isFetching.value || isLoadingSnapshot.value) {
             return;
         }
+        isLoadingSnapshot.value = true;
+        loadingToastId.value = toast.loading(t('view.charts.mutual_friend.status.loading_cache'));
         try {
             const snapshot = await database.getMutualGraphSnapshot();
             if (!snapshot || snapshot.size === 0) {
@@ -399,6 +405,12 @@
             status.needsRefetch = false;
         } catch (err) {
             console.error('[MutualNetworkGraph] Failed to load cached mutual graph', err);
+        } finally {
+            isLoadingSnapshot.value = false;
+            if (loadingToastId.value !== null && loadingToastId.value !== undefined) {
+                toast.dismiss(loadingToastId.value);
+                loadingToastId.value = null;
+            }
         }
     }
 
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 6d4b07e7..3bca3a83 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -129,57 +129,30 @@
                                                     <MoreHorizontal />
                                                 </Button>
                                             </DropdownMenuTrigger>
-                                            <DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
-                                                <div class="favorites-group-menu">
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item"
-                                                        @click="handleRemoteRename(group)">
-                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                    </button>
-                                                    <DropdownMenuSub>
-                                                        <DropdownMenuSubTrigger
-                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
-                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
-                                                        </DropdownMenuSubTrigger>
-                                                        <DropdownMenuPortal>
-                                                            <DropdownMenuSubContent
-                                                                side="right"
-                                                                align="start"
-                                                                class="w-45 p-1 rounded-lg">
-                                                                <div class="group-visibility-menu">
-                                                                    <button
-                                                                        v-for="visibility in avatarGroupVisibilityOptions"
-                                                                        :key="visibility"
-                                                                        type="button"
-                                                                        :class="[
-                                                                            'group-visibility-menu__item',
-                                                                            {
-                                                                                'is-active':
-                                                                                    group.visibility === visibility
-                                                                            }
-                                                                        ]"
-                                                                        @click="
-                                                                            handleVisibilitySelection(group, visibility)
-                                                                        ">
-                                                                        <span>{{ formatVisibility(visibility) }}</span>
-                                                                        <span
-                                                                            v-if="group.visibility === visibility"
-                                                                            class="group-visibility-menu__check">
-                                                                            <Check class="h-3 w-3" />
-                                                                        </span>
-                                                                    </button>
-                                                                </div>
-                                                            </DropdownMenuSubContent>
-                                                        </DropdownMenuPortal>
-                                                    </DropdownMenuSub>
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                        @click="handleRemoteClear(group)">
-                                                        <span>{{ t('view.favorite.clear') }}</span>
-                                                    </button>
-                                                </div>
+                                            <DropdownMenuContent side="right" class="w-55">
+                                                <DropdownMenuItem @click="handleRemoteRename(group)">
+                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                </DropdownMenuItem>
+                                                <DropdownMenuSub>
+                                                    <DropdownMenuSubTrigger>
+                                                        <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                    </DropdownMenuSubTrigger>
+                                                    <DropdownMenuPortal>
+                                                        <DropdownMenuSubContent side="right" align="start" class="w-45">
+                                                            <DropdownMenuCheckboxItem
+                                                                v-for="visibility in avatarGroupVisibilityOptions"
+                                                                :key="visibility"
+                                                                :model-value="group.visibility === visibility"
+                                                                indicator-position="right"
+                                                                @select="handleVisibilitySelection(group, visibility)">
+                                                                <span>{{ formatVisibility(visibility) }}</span>
+                                                            </DropdownMenuCheckboxItem>
+                                                        </DropdownMenuSubContent>
+                                                    </DropdownMenuPortal>
+                                                </DropdownMenuSub>
+                                                <DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
+                                                    <span>{{ t('view.favorite.clear') }}</span>
+                                                </DropdownMenuItem>
                                             </DropdownMenuContent>
                                         </DropdownMenu>
                                     </div>
@@ -251,27 +224,16 @@
                                                         ><Ellipsis
                                                     /></Button>
                                                 </DropdownMenuTrigger>
-                                                <DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
-                                                    <div class="favorites-group-menu">
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item"
-                                                            @click="handleLocalRename(group)">
-                                                            <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                        </button>
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item"
-                                                            @click="handleCheckInvalidAvatars(group)">
-                                                            <span>{{ t('view.favorite.avatars.check_invalid') }}</span>
-                                                        </button>
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                            @click="handleLocalDelete(group)">
-                                                            <span>{{ t('view.favorite.delete_tooltip') }}</span>
-                                                        </button>
-                                                    </div>
+                                                <DropdownMenuContent side="right" class="w-50">
+                                                    <DropdownMenuItem @click="handleLocalRename(group)">
+                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                    </DropdownMenuItem>
+                                                    <DropdownMenuItem @click="handleCheckInvalidAvatars(group)">
+                                                        <span>{{ t('view.favorite.avatars.check_invalid') }}</span>
+                                                    </DropdownMenuItem>
+                                                    <DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
+                                                        <span>{{ t('view.favorite.delete_tooltip') }}</span>
+                                                    </DropdownMenuItem>
                                                 </DropdownMenuContent>
                                             </DropdownMenu>
                                         </div>
@@ -317,15 +279,10 @@
                                         ><Ellipsis
                                     /></Button>
                                 </DropdownMenuTrigger>
-                                <DropdownMenuContent side="right" class="w-45 p-1 rounded-lg">
-                                    <div class="favorites-group-menu">
-                                        <button
-                                            type="button"
-                                            class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                            @click="handleHistoryClear">
-                                            <span>{{ t('view.favorite.clear_tooltip') }}</span>
-                                        </button>
-                                    </div>
+                                <DropdownMenuContent side="right" class="w-45">
+                                    <DropdownMenuItem variant="destructive" @click="handleHistoryClear">
+                                        <span>{{ t('view.favorite.clear_tooltip') }}</span>
+                                    </DropdownMenuItem>
                                 </DropdownMenuContent>
                             </DropdownMenu>
                         </div>
@@ -537,6 +494,7 @@
 
     import {
         DropdownMenu,
+        DropdownMenuCheckboxItem,
         DropdownMenuContent,
         DropdownMenuItem,
         DropdownMenuPortal,
@@ -1736,63 +1694,6 @@
         padding: 12px 0;
     }
 
-    .favorites-group-menu {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .favorites-group-menu__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: none;
-        background: transparent;
-        border-radius: 8px;
-        padding: 6px 12px;
-        font-size: 13px;
-        cursor: pointer;
-        color: inherit;
-        transition: background-color 0.15s ease;
-        min-height: 32px;
-        align-self: stretch;
-    }
-
-    .favorites-group-menu__item--submenu {
-        padding-right: 8px;
-    }
-
-    .favorites-group-menu__arrow {
-        margin-left: auto;
-        font-size: 12px;
-    }
-
-    .group-visibility-menu {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .group-visibility-menu__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: none;
-        background: transparent;
-        padding: 6px 10px;
-        border-radius: 8px;
-        cursor: pointer;
-        color: inherit;
-        font-size: 13px;
-        transition: background-color 0.15s ease;
-        min-height: 32px;
-        align-self: stretch;
-    }
-
-    .group-visibility-menu__check {
-        font-size: 12px;
-    }
-
     .favorites-content {
         display: flex;
         flex-direction: column;
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index b1152757..6baee1bc 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -129,57 +129,35 @@
                                                     <MoreHorizontal />
                                                 </Button>
                                             </DropdownMenuTrigger>
-                                            <DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
-                                                <div class="favorites-group-menu">
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item"
-                                                        @click="handleRemoteRename(group)">
-                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                    </button>
-                                                    <DropdownMenuSub>
-                                                        <DropdownMenuSubTrigger
-                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
-                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
-                                                        </DropdownMenuSubTrigger>
-                                                        <DropdownMenuPortal>
-                                                            <DropdownMenuSubContent
-                                                                side="right"
-                                                                align="start"
-                                                                class="w-[180px] p-1 rounded-lg">
-                                                                <div class="group-visibility-menu">
-                                                                    <button
-                                                                        v-for="visibility in friendGroupVisibilityOptions"
-                                                                        :key="visibility"
-                                                                        type="button"
-                                                                        :class="[
-                                                                            'group-visibility-menu__item',
-                                                                            {
-                                                                                'is-active':
-                                                                                    group.visibility === visibility
-                                                                            }
-                                                                        ]"
-                                                                        @click="
-                                                                            handleVisibilitySelection(group, visibility)
-                                                                        ">
-                                                                        <span>{{ formatVisibility(visibility) }}</span>
-                                                                        <span
-                                                                            v-if="group.visibility === visibility"
-                                                                            class="group-visibility-menu__check">
-                                                                            <Check class="h-3 w-3" />
-                                                                        </span>
-                                                                    </button>
-                                                                </div>
-                                                            </DropdownMenuSubContent>
-                                                        </DropdownMenuPortal>
-                                                    </DropdownMenuSub>
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                        @click="handleRemoteClear(group)">
-                                                        <span>{{ t('view.favorite.clear') }}</span>
-                                                    </button>
-                                                </div>
+                                            <DropdownMenuContent side="right" class="w-55">
+                                                <DropdownMenuItem @click="handleRemoteRename(group)">
+                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                </DropdownMenuItem>
+                                                <DropdownMenuSub>
+                                                    <DropdownMenuSubTrigger>
+                                                        <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                    </DropdownMenuSubTrigger>
+                                                    <DropdownMenuPortal>
+                                                        <DropdownMenuSubContent
+                                                            side="right"
+                                                            align="start"
+                                                            class="w-[180px]">
+                                                            <DropdownMenuCheckboxItem
+                                                                v-for="visibility in friendGroupVisibilityOptions"
+                                                                :key="visibility"
+                                                                :model-value="group.visibility === visibility"
+                                                                indicator-position="right"
+                                                                @select="handleVisibilitySelection(group, visibility)">
+                                                                <span>{{ formatVisibility(visibility) }}</span>
+                                                            </DropdownMenuCheckboxItem>
+                                                        </DropdownMenuSubContent>
+                                                    </DropdownMenuPortal>
+                                                </DropdownMenuSub>
+                                                <DropdownMenuItem
+                                                    variant="destructive"
+                                                    @click="handleRemoteClear(group)">
+                                                    <span>{{ t('view.favorite.clear') }}</span>
+                                                </DropdownMenuItem>
                                             </DropdownMenuContent>
                                         </DropdownMenu>
                                     </div>
@@ -320,6 +298,7 @@
 
     import {
         DropdownMenu,
+        DropdownMenuCheckboxItem,
         DropdownMenuContent,
         DropdownMenuItem,
         DropdownMenuPortal,
@@ -993,73 +972,6 @@
         padding: 12px 0;
     }
 
-    .favorites-group-menu {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .favorites-group-menu__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: none;
-        background: transparent;
-        border-radius: 8px;
-        padding: 6px 12px;
-        font-size: 13px;
-        cursor: pointer;
-        color: inherit;
-        transition: background-color 0.15s ease;
-        min-height: 32px;
-        align-self: stretch;
-    }
-
-    .favorites-group-menu__item:hover {
-    }
-
-    .favorites-group-menu__item--danger {
-    }
-
-    .favorites-group-menu__item--submenu {
-        padding-right: 8px;
-    }
-
-    .favorites-group-menu__arrow {
-        margin-left: auto;
-        font-size: 12px;
-    }
-
-    .group-visibility-menu {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .group-visibility-menu__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: none;
-        background: transparent;
-        padding: 6px 10px;
-        border-radius: 8px;
-        cursor: pointer;
-        color: inherit;
-        font-size: 13px;
-        transition: background-color 0.15s ease;
-        min-height: 32px;
-        align-self: stretch;
-    }
-
-    .group-visibility-menu__item:hover,
-    .group-visibility-menu__item.is-active {
-    }
-
-    .group-visibility-menu__check {
-        font-size: 12px;
-    }
-
     .favorites-content {
         display: flex;
         flex-direction: column;
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index b3b17f9a..40d8b3f0 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -129,54 +129,30 @@
                                                     <MoreHorizontal />
                                                 </Button>
                                             </DropdownMenuTrigger>
-                                            <DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
-                                                <div class="favorites-group-menu">
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item"
-                                                        @click="handleRemoteRename(group)">
-                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                    </button>
-                                                    <DropdownMenuSub>
-                                                        <DropdownMenuSubTrigger
-                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
-                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
-                                                        </DropdownMenuSubTrigger>
-                                                        <DropdownMenuPortal>
-                                                            <DropdownMenuSubContent
-                                                                side="right"
-                                                                align="start"
-                                                                class="w-[200px] p-1 rounded-lg">
-                                                                <div class="group-visibility-menu">
-                                                                    <button
-                                                                        v-for="visibility in worldGroupVisibilityOptions"
-                                                                        :key="visibility"
-                                                                        type="button"
-                                                                        class="group-visibility-menu__item"
-                                                                        :class="{
-                                                                            'is-active': group.visibility === visibility
-                                                                        }"
-                                                                        @click="
-                                                                            handleVisibilitySelection(group, visibility)
-                                                                        ">
-                                                                        <span>{{ formatVisibility(visibility) }}</span>
-                                                                        <span
-                                                                            v-if="group.visibility === visibility"
-                                                                            class="group-visibility-menu__check"
-                                                                            >✔</span
-                                                                        >
-                                                                    </button>
-                                                                </div>
-                                                            </DropdownMenuSubContent>
-                                                        </DropdownMenuPortal>
-                                                    </DropdownMenuSub>
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                        @click="handleRemoteClear(group)">
-                                                        <span>{{ t('view.favorite.clear') }}</span>
-                                                    </button>
-                                                </div>
+                                            <DropdownMenuContent side="right" class="w-50">
+                                                <DropdownMenuItem @click="handleRemoteRename(group)">
+                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                </DropdownMenuItem>
+                                                <DropdownMenuSub>
+                                                    <DropdownMenuSubTrigger>
+                                                        <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                    </DropdownMenuSubTrigger>
+                                                    <DropdownMenuPortal>
+                                                        <DropdownMenuSubContent side="right" align="start" class="w-[200px]">
+                                                            <DropdownMenuCheckboxItem
+                                                                v-for="visibility in worldGroupVisibilityOptions"
+                                                                :key="visibility"
+                                                                :model-value="group.visibility === visibility"
+                                                                indicator-position="right"
+                                                                @select="handleVisibilitySelection(group, visibility)">
+                                                                <span>{{ formatVisibility(visibility) }}</span>
+                                                            </DropdownMenuCheckboxItem>
+                                                        </DropdownMenuSubContent>
+                                                    </DropdownMenuPortal>
+                                                </DropdownMenuSub>
+                                                <DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
+                                                    <span>{{ t('view.favorite.clear') }}</span>
+                                                </DropdownMenuItem>
                                             </DropdownMenuContent>
                                         </DropdownMenu>
                                     </div>
@@ -247,21 +223,13 @@
                                                             ><Ellipsis
                                                         /></Button>
                                                     </DropdownMenuTrigger>
-                                                    <DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
-                                                        <div class="favorites-group-menu">
-                                                            <button
-                                                                type="button"
-                                                                class="favorites-group-menu__item"
-                                                                @click="handleLocalRename(group)">
-                                                                <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                            </button>
-                                                            <button
-                                                                type="button"
-                                                                class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                                @click="handleLocalDelete(group)">
-                                                                <span>{{ t('view.favorite.delete_tooltip') }}</span>
-                                                            </button>
-                                                        </div>
+                                                    <DropdownMenuContent side="right" class="w-50">
+                                                        <DropdownMenuItem @click="handleLocalRename(group)">
+                                                            <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
+                                                            <span>{{ t('view.favorite.delete_tooltip') }}</span>
+                                                        </DropdownMenuItem>
                                                     </DropdownMenuContent>
                                                 </DropdownMenu>
                                             </div>
@@ -448,6 +416,7 @@
 
     import {
         DropdownMenu,
+        DropdownMenuCheckboxItem,
         DropdownMenuContent,
         DropdownMenuItem,
         DropdownMenuPortal,
@@ -1496,72 +1465,6 @@
         padding: 12px 0;
     }
 
-    .favorites-group-menu {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .favorites-group-menu__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: none;
-        background: transparent;
-        border-radius: 8px;
-        padding: 6px 12px;
-        font-size: 13px;
-        cursor: pointer;
-        color: inherit;
-        transition: background-color 0.15s ease;
-        min-height: 32px;
-        align-self: stretch;
-    }
-    .favorites-group-menu__item:hover {
-    }
-
-    .favorites-group-menu__item--danger {
-    }
-
-    .favorites-group-menu__item--submenu {
-        padding-right: 8px;
-    }
-
-    .favorites-group-menu__arrow {
-        margin-left: auto;
-        font-size: 12px;
-    }
-
-    .group-visibility-menu {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .group-visibility-menu__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: none;
-        background: transparent;
-        padding: 6px 10px;
-        border-radius: 8px;
-        cursor: pointer;
-        color: inherit;
-        font-size: 13px;
-        transition: background-color 0.15s ease;
-        min-height: 32px;
-        align-self: stretch;
-    }
-
-    .group-visibility-menu__item:hover,
-    .group-visibility-menu__item.is-active {
-    }
-
-    .group-visibility-menu__check {
-        font-size: 12px;
-    }
-
     .favorites-content {
         display: flex;
         flex-direction: column;
diff --git a/src/views/Favorites/dialogs/avatarImportColumns.jsx b/src/views/Favorites/dialogs/avatarImportColumns.jsx
index d1bb3360..d3f2834e 100644
--- a/src/views/Favorites/dialogs/avatarImportColumns.jsx
+++ b/src/views/Favorites/dialogs/avatarImportColumns.jsx
@@ -42,7 +42,7 @@ export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullsc
             const original = row.original;
             return (
                 <span
-                    class="x-link"
+                    class=" cursor-pointer"
                     title={original?.name}
                     onClick={(e) => {
                         e.stopPropagation();
@@ -63,7 +63,7 @@ export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullsc
             const original = row.original;
             return (
                 <span
-                    class="x-link"
+                    class=" cursor-pointer"
                     title={original?.authorName}
                     onClick={(e) => {
                         e.stopPropagation();
diff --git a/src/views/Favorites/dialogs/friendImportColumns.jsx b/src/views/Favorites/dialogs/friendImportColumns.jsx
index 189a5ed8..269777ab 100644
--- a/src/views/Favorites/dialogs/friendImportColumns.jsx
+++ b/src/views/Favorites/dialogs/friendImportColumns.jsx
@@ -42,7 +42,7 @@ export const createColumns = ({ userImage, userImageFull, onShowFullscreenImage,
             const original = row.original;
             return (
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     title={original?.displayName}
                     onClick={(e) => {
                         e.stopPropagation();
diff --git a/src/views/Favorites/dialogs/worldImportColumns.jsx b/src/views/Favorites/dialogs/worldImportColumns.jsx
index 23fcfd12..183f1485 100644
--- a/src/views/Favorites/dialogs/worldImportColumns.jsx
+++ b/src/views/Favorites/dialogs/worldImportColumns.jsx
@@ -42,7 +42,7 @@ export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscr
             const original = row.original;
             return (
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     title={original?.name}
                     onClick={(e) => {
                         e.stopPropagation();
@@ -63,7 +63,7 @@ export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscr
             const original = row.original;
             return (
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     title={original?.authorName}
                     onClick={(e) => {
                         e.stopPropagation();
diff --git a/src/views/Feed/columns.jsx b/src/views/Feed/columns.jsx
index d91d2ec1..2d7fa73e 100644
--- a/src/views/Feed/columns.jsx
+++ b/src/views/Feed/columns.jsx
@@ -92,7 +92,7 @@ const expandedRow = ({ row }) => {
                                     src={
                                         original.previousCurrentAvatarThumbnailImageUrl
                                     }
-                                    class="x-link h-30 w-40 rounded pointer"
+                                    class="cursor-pointer h-30 w-40 rounded pointer"
                                     loading="lazy"
                                     onClick={() =>
                                         showFullscreenImageDialog(
@@ -125,7 +125,7 @@ const expandedRow = ({ row }) => {
                                     src={
                                         original.currentAvatarThumbnailImageUrl
                                     }
-                                    class="x-link h-30 w-40 rounded pointer"
+                                    class="cursor-pointer h-30 w-40 rounded pointer"
                                     loading="lazy"
                                     onClick={() =>
                                         showFullscreenImageDialog(
@@ -280,7 +280,7 @@ export const columns = [
             const original = row.original;
             return (
                 <span
-                    class="x-link pr-2.5 cursor-pointer"
+                    class="cursor-pointer pr-2.5 cursor-pointer"
                     onClick={() => showUserDialog(original.userId)}
                 >
                     {original.displayName}
diff --git a/src/views/FriendLog/columns.jsx b/src/views/FriendLog/columns.jsx
index 07e5abdf..0f7423f1 100644
--- a/src/views/FriendLog/columns.jsx
+++ b/src/views/FriendLog/columns.jsx
@@ -89,7 +89,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
                 const displayName =
                     original.displayName || original.userId || '';
                 return (
-                    <span class="block w-full whitespace-normal break-words">
+                    <span class="block w-full whitespace-normal wrap-break-word cursor-pointer">
                         {original.type === 'DisplayName' ? (
                             <span class="mr-1">
                                 {original.previousDisplayName}
@@ -97,7 +97,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
                             </span>
                         ) : null}
                         <span
-                            class="x-link pr-2.5"
+                            class="cursor-pointer pr-2.5"
                             onClick={() => showUserDialog(original.userId)}
                         >
                             {displayName}
diff --git a/src/views/FriendsLocations/FriendsLocations.vue b/src/views/FriendsLocations/FriendsLocations.vue
index a18153d4..84e68712 100644
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -10,49 +10,65 @@
             </Tabs>
             <div class="friend-view__actions">
                 <InputGroupSearch v-model="searchTerm" class="friend-view__search" placeholder="Search Friend" />
-                <Popover>
-                    <PopoverTrigger asChild>
-                        <div>
-                            <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
+                <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
+                    <div>
+                        <Popover>
+                            <PopoverTrigger asChild>
                                 <Button class="rounded-full mr-2" size="icon" variant="outline">
                                     <Settings />
                                 </Button>
-                            </TooltipWrapper>
-                        </div>
-                    </PopoverTrigger>
-                    <PopoverContent side="bottom" class="w-87.5">
-                        <div style="display: flex; justify-content: space-between; align-items: center">
-                            <span class="friend-view__settings-label">{{
-                                t('view.friends_locations.separate_same_instance_friends')
-                            }}</span>
-                            <Switch v-model="showSameInstance" />
-                        </div>
-                        <div class="friend-view__settings-row">
-                            <span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
-                            <div class="friend-view__scale-control">
-                                <span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
-                                <Slider
-                                    v-model="cardScaleValue"
-                                    class="friend-view__slider"
-                                    :min="0.5"
-                                    :max="1.0"
-                                    :step="0.01" />
-                            </div>
-                        </div>
-                        <div class="friend-view__settings-row">
-                            <span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
-                            <div class="friend-view__scale-control">
-                                <span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
-                                <Slider
-                                    v-model="cardSpacingValue"
-                                    class="friend-view__slider"
-                                    :min="0.25"
-                                    :max="1.0"
-                                    :step="0.05" />
-                            </div>
-                        </div>
-                    </PopoverContent>
-                </Popover>
+                            </PopoverTrigger>
+                            <PopoverContent side="bottom" class="w-87.5">
+                                <div class="friend-view__settings">
+                                    <Field orientation="horizontal" class="friend-view__settings-row">
+                                        <FieldLabel class="friend-view__settings-label">{{
+                                            t('view.friends_locations.separate_same_instance_friends')
+                                        }}</FieldLabel>
+                                        <FieldContent>
+                                            <Switch v-model="showSameInstance" />
+                                        </FieldContent>
+                                    </Field>
+                                    <Field orientation="horizontal" class="friend-view__settings-row">
+                                        <FieldLabel class="friend-view__settings-label">
+                                            {{ t('view.friends_locations.scale') }}
+                                        </FieldLabel>
+                                        <FieldContent>
+                                            <div class="friend-view__scale-control">
+                                                <span class="friend-view__scale-value"
+                                                    >{{ cardScalePercentLabel }}&nbsp;</span
+                                                >
+                                                <Slider
+                                                    v-model="cardScaleValue"
+                                                    class="friend-view__slider"
+                                                    :min="0.5"
+                                                    :max="1.0"
+                                                    :step="0.01" />
+                                            </div>
+                                        </FieldContent>
+                                    </Field>
+                                    <Field orientation="horizontal" class="friend-view__settings-row">
+                                        <FieldLabel class="friend-view__settings-label">
+                                            {{ t('view.friends_locations.spacing') }}
+                                        </FieldLabel>
+                                        <FieldContent>
+                                            <div class="friend-view__scale-control">
+                                                <span class="friend-view__scale-value"
+                                                    >{{ cardSpacingPercentLabel }}&nbsp;</span
+                                                >
+                                                <Slider
+                                                    v-model="cardSpacingValue"
+                                                    class="friend-view__slider"
+                                                    :min="0.25"
+                                                    :max="1.0"
+                                                    :step="0.05" />
+                                            </div>
+                                        </FieldContent>
+                                    </Field>
+                                </div>
+                            </PopoverContent>
+                        </Popover>
+                    </div>
+                </TooltipWrapper>
             </div>
         </div>
         <div v-else class="friend-view__toolbar friend-view__toolbar--loading">
@@ -64,7 +80,7 @@
                     <template v-if="row.type === 'header'">
                         <header class="friend-view__instance-header">
                             <Location class="text-xs" :location="row.instanceId" style="display: inline" />
-                            <span class="friend-view__instance-count">{{ row.count }}</span>
+                            <span class="friend-view__instance-count">({{ row.count }})</span>
                         </header>
                     </template>
 
@@ -95,6 +111,7 @@
 
 <script setup>
     import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+    import { Field, FieldContent, FieldLabel } from '@/components/ui/field';
     import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
     import { Loader2, Settings } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
@@ -714,6 +731,11 @@
         font-weight: 500;
     }
 
+    .friend-view__settings {
+        display: grid;
+        gap: 12px;
+    }
+
     .friend-view__loading-text {
         padding-right: 12px;
     }
@@ -828,7 +850,6 @@
     .friend-view__instance-header {
         display: flex;
         align-items: center;
-        justify-content: space-between;
         padding: 4px 2px;
         margin: 5px 10px;
         font-weight: 600;
diff --git a/src/views/GameLog/columns.jsx b/src/views/GameLog/columns.jsx
index 3a192301..b0ed3241 100644
--- a/src/views/GameLog/columns.jsx
+++ b/src/views/GameLog/columns.jsx
@@ -91,7 +91,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                 return (
                     <Badge variant="outline" class="text-muted-foreground">
                         <span
-                            class={isLink ? 'x-link' : undefined}
+                            class={isLink ? 'cursor-pointer' : undefined}
                             onClick={() =>
                                 isLink && showWorldDialog(original.location)
                             }
@@ -111,10 +111,10 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                 const isFriend = original.isFriend;
                 const isFavorite = original.isFavorite;
                 return (
-                    <span>
+                    <span class="cursor-pointer">
                         {original.displayName ? (
                             <span
-                                class="x-link table-user mr-1"
+                                class="cursor-pointer table-user mr-1"
                                 onClick={() => lookupUser(original)}
                             >
                                 {original.displayName}
@@ -183,13 +183,13 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                         original.videoId !== 'PopcornPalace';
                     const label = original.videoName || original.videoUrl;
                     return (
-                        <span class="block w-full min-w-0 truncate">
+                        <span class="block w-full min-w-0 truncate cursor-pointer">
                             {original.videoId ? (
                                 <span class="mr-1.5">{original.videoId}:</span>
                             ) : null}
                             {showLink ? (
                                 <span
-                                    class="x-link"
+                                    class="cursor-pointer"
                                     onClick={() =>
                                         openExternalLink(original.videoUrl)
                                     }
@@ -208,9 +208,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                     original.type === 'StringLoad'
                 ) {
                     return (
-                        <span class="block w-full min-w-0 truncate">
+                        <span class="block w-full min-w-0 truncate cursor-pointer">
                             <span
-                                class="x-link"
+                                class="cursor-pointer"
                                 onClick={() =>
                                     openExternalLink(original.resourceUrl)
                                 }
@@ -230,7 +230,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                 }
 
                 return (
-                    <span class="x-link block w-full min-w-0 truncate">
+                    <span class="block w-full min-w-0 truncate">
                         {original.data}
                     </span>
                 );
diff --git a/src/views/Layout/AuthenticatedLayout.vue b/src/views/Layout/AuthenticatedLayout.vue
index 06eceff8..75affbe9 100644
--- a/src/views/Layout/AuthenticatedLayout.vue
+++ b/src/views/Layout/AuthenticatedLayout.vue
@@ -18,7 +18,10 @@
                 <ResizablePanelGroup
                     ref="panelGroupRef"
                     direction="horizontal"
-                    class="group/main-layout flex-1 h-full min-w-0"
+                    :class="[
+                        'group/main-layout flex-1 h-full min-w-0',
+                        { 'aside-collapsed': isAsideCollapsedStatic }
+                    ]"
                     @layout="handleLayout">
                     <template #default="{ layout }">
                         <ResizablePanel :default-size="mainDefaultSize" :order="1">
@@ -126,7 +129,7 @@
     const router = useRouter();
 
     const appearanceSettingsStore = useAppearanceSettingsStore();
-    const { navWidth, isNavCollapsed } = storeToRefs(appearanceSettingsStore);
+    const { navWidth, isNavCollapsed, asideWidth } = storeToRefs(appearanceSettingsStore);
 
     const sidebarOpen = computed(() => !isNavCollapsed.value);
 
@@ -184,6 +187,10 @@
         isSideBarTabShow
     } = useAuthenticatedLayoutResizable();
 
+    const isAsideCollapsedStatic = computed(
+        () => !isSideBarTabShow.value || asideWidth.value === 0
+    );
+
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index aca77515..1a455bda 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -158,14 +158,17 @@
             <div class="x-legal-notice-container">
                 <div style="text-align: center; font-size: 12px">
                     <p>
-                        <a class="x-link" @click="openExternalLink('https://vrchat.com/home/password')">{{
+                        <a class="cursor-pointer" @click="openExternalLink('https://vrchat.com/home/password')">{{
                             t('view.login.forgotPassword')
                         }}</a>
                     </p>
                     <p>
                         &copy; 2019-2026
-                        <a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
-                        <a class="x-link" @click="openExternalLink('https://github.com/Natsumi-sama')">Natsumi</a>
+                        <a class="cursor-pointer" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a>
+                        &amp;
+                        <a class="cursor-pointer" @click="openExternalLink('https://github.com/Natsumi-sama')"
+                            >Natsumi</a
+                        >
                     </p>
                     <p>{{ t('view.settings.general.legal_notice.info') }}</p>
                     <p>{{ t('view.settings.general.legal_notice.disclaimer1') }}</p>
diff --git a/src/views/Moderation/columns.jsx b/src/views/Moderation/columns.jsx
index 554e21d9..8e6431e3 100644
--- a/src/views/Moderation/columns.jsx
+++ b/src/views/Moderation/columns.jsx
@@ -87,7 +87,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
                 const original = row.original;
                 return (
                     <span
-                        class="x-link block w-full min-w-0 truncate pr-2.5"
+                        class="cursor-pointer block w-full min-w-0 truncate pr-2.5 cursor-pointer"
                         onClick={() => showUserDialog(original.sourceUserId)}
                     >
                         {original.sourceDisplayName}
@@ -107,7 +107,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
                 const original = row.original;
                 return (
                     <span
-                        class="x-link block w-full whitespace-normal break-words pr-2.5"
+                        class="cursor-pointer block w-full whitespace-normal wrap-break-word pr-2.5 cursor-pointer"
                         onClick={() => showUserDialog(original.targetUserId)}
                     >
                         {original.targetDisplayName}
diff --git a/src/views/Notifications/columns.jsx b/src/views/Notifications/columns.jsx
index 56ef985c..410b6f47 100644
--- a/src/views/Notifications/columns.jsx
+++ b/src/views/Notifications/columns.jsx
@@ -167,7 +167,7 @@ export const createColumns = ({
                                 <Tooltip>
                                     <TooltipTrigger asChild>
                                         <span
-                                            class="x-link"
+                                            class="cursor-pointer"
                                             onClick={() =>
                                                 showWorldDialog(
                                                     original.location
@@ -200,7 +200,7 @@ export const createColumns = ({
                                 <Tooltip>
                                     <TooltipTrigger asChild>
                                         <span
-                                            class="x-link"
+                                            class="cursor-pointer"
                                             onClick={() =>
                                                 openNotificationLink(
                                                     original.link
@@ -242,7 +242,7 @@ export const createColumns = ({
                     return (
                         <span class="table-user-text block w-full min-w-0 truncate">
                             <span
-                                class="x-link block w-full min-w-0 truncate"
+                                class="cursor-pointer block w-full min-w-0 truncate"
                                 onClick={() =>
                                     showUserDialog(original.senderUserId)
                                 }
@@ -257,7 +257,7 @@ export const createColumns = ({
                     return (
                         <span class="table-user-text block w-full min-w-0 truncate">
                             <span
-                                class="x-link block w-full min-w-0 truncate"
+                                class="cursor-pointer block w-full min-w-0 truncate"
                                 onClick={() =>
                                     openNotificationLink(original.link)
                                 }
@@ -306,7 +306,7 @@ export const createColumns = ({
                     return (
                         <span class="table-user-text block w-full min-w-0 truncate">
                             <span
-                                class="x-link block w-full min-w-0 truncate"
+                                class="cursor-pointer block w-full min-w-0 truncate"
                                 onClick={() =>
                                     showGroupDialog(original.senderUserId)
                                 }
@@ -332,7 +332,7 @@ export const createColumns = ({
                     return (
                         <span class="table-user-text block w-full min-w-0 truncate">
                             <span
-                                class="x-link block w-full min-w-0 truncate"
+                                class="cursor-pointer block w-full min-w-0 truncate"
                                 onClick={() =>
                                     openNotificationLink(original.link)
                                 }
@@ -347,7 +347,7 @@ export const createColumns = ({
                     return (
                         <span class="table-user-text block w-full min-w-0 truncate">
                             <span
-                                class="x-link block w-full min-w-0 truncate"
+                                class="cursor-pointer block w-full min-w-0 truncate"
                                 onClick={() =>
                                     openNotificationLink(original.link)
                                 }
@@ -400,7 +400,7 @@ export const createColumns = ({
                     }
                     return (
                         <Emoji
-                            class="x-link h-7.5 w-7.5 rounded object-cover"
+                            class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
                             onClick={() => showFullscreenImageDialog(imageUrl)}
                             imageUrl={imageUrl}
                             size={30}
@@ -411,7 +411,7 @@ export const createColumns = ({
                 if (original.details?.imageUrl) {
                     return (
                         <img
-                            class="x-link h-7.5 w-7.5 rounded object-cover"
+                            class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
                             src={getSmallThumbnailUrl(
                                 original.details.imageUrl
                             )}
@@ -428,7 +428,7 @@ export const createColumns = ({
                 if (original.imageUrl) {
                     return (
                         <img
-                            class="x-link h-7.5 w-7.5 rounded object-cover"
+                            class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
                             src={getSmallThumbnailUrl(original.imageUrl)}
                             onClick={() =>
                                 showFullscreenImageDialog(original.imageUrl)
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index c50fb9a2..cf6b3b42 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -8,14 +8,14 @@
                 class="mb-7">
                 <img
                     :src="currentInstanceWorld.ref.thumbnailImageUrl"
-                    class="x-link"
+                    class="cursor-pointer"
                     style="flex: none; width: 160px; height: 120px; border-radius: 4px"
                     @click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)"
                     loading="lazy" />
                 <div style="margin-left: 10px; display: flex; flex-direction: column; min-width: 320px; width: 100%">
                     <div>
                         <span
-                            class="x-link"
+                            class="cursor-pointer"
                             style="
                                 font-weight: bold;
                                 overflow: hidden;
@@ -36,7 +36,7 @@
                     </div>
                     <div>
                         <span
-                            class="x-link x-grey"
+                            class="cursor-pointer x-grey"
                             style="font-family: monospace"
                             @click="showUserDialog(currentInstanceWorld.ref.authorId)"
                             v-text="currentInstanceWorld.ref.authorName"></span>
@@ -268,6 +268,7 @@
         persistKey: 'playerList',
         data: currentInstanceUsersData,
         columns: playerListColumns,
+        enablePagination: false,
         getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`
     });
 
diff --git a/src/views/PlayerList/components/photonEventColumns.jsx b/src/views/PlayerList/components/photonEventColumns.jsx
index 6e4d8fd9..ecba206f 100644
--- a/src/views/PlayerList/components/photonEventColumns.jsx
+++ b/src/views/PlayerList/components/photonEventColumns.jsx
@@ -35,7 +35,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
         return (
             <>
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     onClick={(e) => {
                         e.stopPropagation();
                         onShowAvatar?.(r.avatar?.id);
@@ -116,7 +116,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
         return (
             <>
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     style="margin-right: 5px"
                     onClick={(e) => {
                         e.stopPropagation();
@@ -129,7 +129,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
                     <ArrowRight />
                 </span>
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     style="margin-left: 5px"
                     onClick={(e) => {
                         e.stopPropagation();
@@ -145,7 +145,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
     if (r.type === 'PortalSpawn') {
         return (
             <span
-                class="x-link"
+                class="cursor-pointer"
                 onClick={(e) => {
                     e.stopPropagation();
                     onShowWorld?.(r.location, r.shortName);
@@ -176,7 +176,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
                     <span>Android&nbsp;</span>
                 ) : null}
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     onClick={(e) => {
                         e.stopPropagation();
                         onShowAvatar?.(r.avatar?.id);
@@ -233,7 +233,14 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
     return <span>{r.text}</span>;
 }
 
-export const createColumns = ({ isPrevious, onShowUser, onShowAvatar, onShowGroup, onShowWorld, onShowImage }) => [
+export const createColumns = ({
+    isPrevious,
+    onShowUser,
+    onShowAvatar,
+    onShowGroup,
+    onShowWorld,
+    onShowImage
+}) => [
     {
         id: 'created_at',
         accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
@@ -250,7 +257,9 @@ export const createColumns = ({ isPrevious, onShowUser, onShowAvatar, onShowGrou
                     )
                 }}
             >
-                <span>{formatDateFilter(row.original?.created_at, 'short')}</span>
+                <span>
+                    {formatDateFilter(row.original?.created_at, 'short')}
+                </span>
             </TooltipWrapper>
         )
     },
@@ -261,7 +270,7 @@ export const createColumns = ({ isPrevious, onShowUser, onShowAvatar, onShowGrou
         enableSorting: false,
         cell: ({ row }) => (
             <span
-                class="x-link"
+                class="cursor-pointer"
                 style="padding-right: 10px"
                 onClick={(e) => {
                     e.stopPropagation();
diff --git a/src/views/Settings/components/Tabs/GeneralTab.vue b/src/views/Settings/components/Tabs/GeneralTab.vue
index 2f13976d..c2bdef3c 100644
--- a/src/views/Settings/components/Tabs/GeneralTab.vue
+++ b/src/views/Settings/components/Tabs/GeneralTab.vue
@@ -283,8 +283,8 @@
             <div class="options-container-item" style="display: block">
                 <p>
                     &copy; 2019-2026
-                    <a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
-                    <a class="x-link" @click="openExternalLink('https://github.com/Natsumi-sama')">Natsumi</a>
+                    <a class="cursor-pointer" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
+                    <a class="cursor-pointer" @click="openExternalLink('https://github.com/Natsumi-sama')">Natsumi</a>
                 </p>
                 <p>{{ t('view.settings.general.legal_notice.info') }}</p>
                 <p>{{ t('view.settings.general.legal_notice.disclaimer1') }}</p>
diff --git a/src/views/Settings/dialogs/ChangelogDialog.vue b/src/views/Settings/dialogs/ChangelogDialog.vue
index 86978499..deaedbd0 100644
--- a/src/views/Settings/dialogs/ChangelogDialog.vue
+++ b/src/views/Settings/dialogs/ChangelogDialog.vue
@@ -8,8 +8,9 @@
                 <h2 v-text="changeLogDialog.buildName"></h2>
                 <span v-show="changeLogDialog.buildName">
                     {{ t('dialog.change_log.description') }}
-                    <a class="x-link" @click="openExternalLink('https://www.patreon.com/Natsumi_VRCX')">Patreon</a>,
-                    <a class="x-link" @click="openExternalLink('https://ko-fi.com/natsumi_sama')">Ko-fi</a>.
+                    <a class="cursor-pointer" @click="openExternalLink('https://www.patreon.com/Natsumi_VRCX')"
+                        >Patreon</a
+                    >, <a class="cursor-pointer" @click="openExternalLink('https://ko-fi.com/natsumi_sama')">Ko-fi</a>.
                 </span>
                 <VueShowdown
                     :markdown="changeLogDialog.changeLog"
diff --git a/src/views/Sidebar/Sidebar.vue b/src/views/Sidebar/Sidebar.vue
index 60034261..385621b4 100644
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -190,6 +190,7 @@
         order: 99;
         height: 100%;
         box-sizing: border-box;
+        padding-left: 10px;
     }
 
     .sidebar-tab-count {
diff --git a/src/views/Sidebar/components/FriendsSidebar.vue b/src/views/Sidebar/components/FriendsSidebar.vue
index 909b326f..1be0bb4f 100644
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="x-friend-list" style="padding: 10px 5px">
         <div
-            class="x-friend-group x-link flex items-center"
+            class="x-friend-group cursor-pointer flex items-center"
             style="padding: 0 0 5px"
             @click="
                 isFriendsGroupMe = !isFriendsGroupMe;
@@ -38,7 +38,7 @@
         </div>
         <div
             v-show="vipFriendsDisplayNumber"
-            class="x-friend-group x-link flex items-center"
+            class="x-friend-group cursor-pointer flex items-center"
             @click="
                 isVIPFriends = !isVIPFriends;
                 saveFriendsGroupStates();
@@ -78,7 +78,7 @@
         </div>
 
         <template v-if="isSidebarGroupByInstance && friendsInSameInstance.length">
-            <div class="x-friend-group x-link flex items-center" @click="toggleSwitchGroupByInstanceCollapsed">
+            <div class="x-friend-group cursor-pointer flex items-center" @click="toggleSwitchGroupByInstanceCollapsed">
                 <ChevronDown class="rotation-transition" :class="{ 'is-rotated': isSidebarGroupByInstanceCollapsed }" />
                 <span style="margin-left: 5px"
                     >{{ t('side_panel.same_instance') }} &horbar; {{ friendsInSameInstance.length }}</span
@@ -109,7 +109,7 @@
         </template>
         <div
             v-show="onlineFriendsByGroupStatus.length"
-            class="x-friend-group x-link flex items-center"
+            class="x-friend-group cursor-pointer flex items-center"
             @click="
                 isOnlineFriends = !isOnlineFriends;
                 saveFriendsGroupStates();
@@ -128,7 +128,7 @@
         </div>
         <div
             v-show="activeFriends.length"
-            class="x-friend-group x-link flex items-center"
+            class="x-friend-group cursor-pointer flex items-center"
             @click="
                 isActiveFriends = !isActiveFriends;
                 saveFriendsGroupStates();
@@ -145,7 +145,7 @@
         </div>
         <div
             v-show="offlineFriends.length"
-            class="x-friend-group x-link flex items-center"
+            class="x-friend-group cursor-pointer flex items-center"
             @click="
                 isOfflineFriends = !isOfflineFriends;
                 saveFriendsGroupStates();
@@ -310,9 +310,6 @@
 </script>
 
 <style scoped>
-    .x-link:hover {
-        text-decoration: none;
-    }
     .is-rotated {
         transform: rotate(-90deg);
     }
diff --git a/src/views/Sidebar/components/GroupsSidebar.vue b/src/views/Sidebar/components/GroupsSidebar.vue
index 192204e4..c10626f0 100644
--- a/src/views/Sidebar/components/GroupsSidebar.vue
+++ b/src/views/Sidebar/components/GroupsSidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="x-friend-list" style="padding: 10px 5px">
         <template v-for="(group, index) in groupedGroupInstances" :key="getGroupId(group)">
-            <div class="x-friend-group x-link" :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
+            <div class="x-friend-group cursor-pointer" :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
                 <div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
                     <ChevronDown
                         class="rotation-transition"
@@ -93,12 +93,6 @@
 </script>
 
 <style scoped>
-    .x-link:hover {
-        text-decoration: none;
-    }
-    .x-link:hover span {
-        text-decoration: underline;
-    }
     .is-rotated {
         transform: rotate(-90deg);
     }
diff --git a/src/views/Tools/ScreenshotMetadata.vue b/src/views/Tools/ScreenshotMetadata.vue
index bb009605..ece379ae 100644
--- a/src/views/Tools/ScreenshotMetadata.vue
+++ b/src/views/Tools/ScreenshotMetadata.vue
@@ -7,9 +7,7 @@
             <span class="header">{{ t('dialog.screenshot_metadata.header') }}</span>
         </div>
         <div @dragover.prevent @dragenter.prevent @drop="handleDrop">
-            <span>{{
-                t('dialog.screenshot_metadata.drag')
-            }}</span>
+            <span>{{ t('dialog.screenshot_metadata.drag') }}</span>
             <br />
             <br />
             <Button size="sm" variant="outline" class="mr-2" @click="getAndDisplayScreenshotFromFile">{{
@@ -100,8 +98,7 @@
             <DisplayName
                 v-if="screenshotMetadataDialog.metadata.author"
                 :userid="screenshotMetadataDialog.metadata.author.id"
-                :hint="screenshotMetadataDialog.metadata.author.displayName"
-            />
+                :hint="screenshotMetadataDialog.metadata.author.displayName" />
             <br />
             <div class="my-2 w-[90%] ml-17">
                 <Carousel :opts="{ loop: false }" @init-api="handleScreenshotMetadataCarouselInit">
@@ -109,7 +106,6 @@
                         <CarouselItem>
                             <div class="h-150 w-full">
                                 <img
-                                    class="x-link"
                                     :src="screenshotMetadataDialog.metadata.previousFilePath"
                                     style="width: 100%; height: 100%; object-fit: contain" />
                             </div>
@@ -117,7 +113,7 @@
                         <CarouselItem>
                             <div class="h-150 w-full">
                                 <img
-                                    class="x-link"
+                                    class="cursor-pointer"
                                     :src="screenshotMetadataDialog.metadata.filePath"
                                     style="width: 100%; height: 100%; object-fit: contain"
                                     @click="showFullscreenImageDialog(screenshotMetadataDialog.metadata.filePath)" />
@@ -126,7 +122,6 @@
                         <CarouselItem>
                             <div class="h-150 w-full">
                                 <img
-                                    class="x-link"
                                     :src="screenshotMetadataDialog.metadata.nextFilePath"
                                     style="width: 100%; height: 100%; object-fit: contain" />
                             </div>
@@ -143,10 +138,8 @@
                 <br />
             </template>
             <span v-for="user in screenshotMetadataDialog.metadata.players" :key="user.id" style="margin-top: 5px">
-                <span class="x-link" @click="lookupUser(user)" v-text="user.displayName"></span>
-                <span
-                    v-if="user.pos"
-                    v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
+                <span class="cursor-pointer" @click="lookupUser(user)" v-text="user.displayName"></span>
+                <span v-if="user.pos" v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
                 <br />
             </span>
         </div>
diff --git a/src/views/Tools/dialogs/noteExportColumns.jsx b/src/views/Tools/dialogs/noteExportColumns.jsx
index d1b51b25..efded37b 100644
--- a/src/views/Tools/dialogs/noteExportColumns.jsx
+++ b/src/views/Tools/dialogs/noteExportColumns.jsx
@@ -41,7 +41,7 @@ export const createColumns = ({ userImage, userImageFull, onShowFullscreenImage,
             const original = row.original;
             return (
                 <span
-                    class="x-link"
+                    class="cursor-pointer"
                     onClick={(e) => {
                         e.stopPropagation();
                         onShowUser?.(original?.id);