some fix

src/app.css

@@ -16,12 +16,18 @@ html {
 
 .x-container {
     position: relative;
-    flex: 1;
     padding: 10px;
     overflow: hidden auto;
     box-sizing: border-box;
+    background: var(--background);
+    height: calc(100vh - 20px);
+    margin: 10px 10px 10px 0;
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+}
+
+html.dark .x-container {
     background: var(--sidebar);
-    height: 100%;
 }
 
 

src/components/Location.vue

@@ -8,7 +8,7 @@
                     :class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
                     class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
                     @click="handleShowWorldDialog">
-                    <Loader2 :class="['is-loading']" class="mr-1" v-if="isTraveling" />
+                    <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}`
@@ -31,7 +31,7 @@
                         :class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
                         class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
                         @click="handleShowWorldDialog">
-                        <Loader2 :class="['is-loading']" class="mr-1" v-if="isTraveling" />
+                        <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}`
@@ -54,8 +54,8 @@
 </template>
 
 <script setup>
-    import { AlertTriangle, Loader2, Lock } from 'lucide-vue-next';
     import { onBeforeUnmount, ref, watch } from 'vue';
+    import { AlertTriangle, Lock } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -67,6 +67,7 @@
         useWorldStore
     } from '../stores';
     import { getGroupName, getWorldName, parseLocation } from '../shared/utils';
+    import { Spinner } from './ui/spinner';
     import { accessTypeLocaleKeyMap } from '../shared/constants';
 
     const { t } = useI18n();

src/components/NavMenu.vue

@@ -1,6 +1,6 @@
 <template>
     <Sidebar side="left" variant="sidebar" collapsible="icon">
-        <SidebarContent class="pt-4">
+        <SidebarContent class="pt-2">
             <div v-if="navLayoutReady" class="px-2">
                 <SidebarMenu>
                     <SidebarMenuItem v-if="pendingVRCXUpdate || pendingVRCXInstall">
@@ -40,7 +40,39 @@
                             </SidebarMenuItem>
 
                             <SidebarMenuItem v-else>
+                                <DropdownMenu
+                                    v-if="isCollapsed"
+                                    :open="collapsedDropdownOpenId === item.index"
+                                    @update:open="(value) => handleCollapsedDropdownOpenChange(item.index, value)">
+                                    <DropdownMenuTrigger as-child>
+                                        <SidebarMenuButton
+                                            :is-active="item.children?.some((e) => e.index === activeMenuIndex)"
+                                            :tooltip="item.titleIsCustom ? item.title : t(item.title || '')"
+                                            :class="isNavItemNotified(item) ? 'notify' : undefined">
+                                            <i
+                                                :class="item.icon"
+                                                class="inline-flex size-6 items-center justify-center text-lg" />
+                                            <span v-show="!isCollapsed">{{
+                                                item.titleIsCustom ? item.title : t(item.title || '')
+                                            }}</span>
+                                        </SidebarMenuButton>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent side="right" align="start" class="w-56">
+                                        <DropdownMenuItem
+                                            v-for="entry in item.children"
+                                            :key="entry.index"
+                                            @select="(event) => handleCollapsedSubmenuSelect(event, entry, item.index)">
+                                            <i
+                                                v-if="entry.icon"
+                                                :class="entry.icon"
+                                                class="inline-flex size-4 items-center justify-center text-base" />
+                                            <span>{{ t(entry.label) }}</span>
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+
                                 <Collapsible
+                                    v-else
                                     class="group/collapsible"
                                     :default-open="
                                         activeMenuIndex && item.children?.some((e) => e.index === activeMenuIndex)
@@ -87,7 +119,7 @@
             </SidebarGroup>
         </SidebarContent>
 
-        <SidebarFooter class="p-2">
+        <SidebarFooter class="px-2 py-3">
             <SidebarMenu>
                 <SidebarMenuItem>
                     <DropdownMenu>
@@ -249,8 +281,6 @@
                 </SidebarMenuItem>
             </SidebarMenu>
         </SidebarFooter>
-
-        <SidebarRail />
     </Sidebar>
 
     <CustomNavDialog
@@ -272,8 +302,7 @@
         SidebarMenuItem,
         SidebarMenuSub,
         SidebarMenuSubButton,
-        SidebarMenuSubItem,
+        SidebarMenuSubItem
-        SidebarRail
     } from '@/components/ui/sidebar';
     import {
         DropdownMenu,
@@ -358,6 +387,7 @@
     const { themeMode, tableDensity, isDarkMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
     const navLayout = ref([]);
     const navLayoutReady = ref(false);
+    const collapsedDropdownOpenId = ref(null);
 
     const menuItems = computed(() => {
         const items = [];
@@ -454,6 +484,15 @@
         }
     );
 
+    watch(
+        () => isCollapsed.value,
+        (value) => {
+            if (!value) {
+                collapsedDropdownOpenId.value = null;
+            }
+        }
+    );
+
     const generateFolderId = () => `nav-folder-${dayjs().toISOString()}-${Math.random().toString().slice(2, 4)}`;
 
     const sanitizeLayout = (layout) => {
@@ -721,6 +760,17 @@
         triggerNavAction(entry, navIndex);
     };
 
+    const handleCollapsedDropdownOpenChange = (index, value) => {
+        collapsedDropdownOpenId.value = value ? index : null;
+    };
+
+    const handleCollapsedSubmenuSelect = (event, entry, index) => {
+        if (event?.preventDefault) {
+            event.preventDefault();
+        }
+        handleSubmenuClick(entry, index);
+    };
+
     const handleMenuItemClick = (item) => {
         triggerNavAction(item, item?.index);
     };

src/components/ui/data-table/DataTableLayout.vue

@@ -124,8 +124,8 @@
         PaginationPrevious
     } from '../pagination';
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
-    import { ScrollArea } from '../scroll-area';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+    import { ScrollArea } from '../scroll-area';
 
     const props = defineProps({
         table: {

src/components/ui/sidebar/Sidebar.vue

@@ -75,7 +75,7 @@
         <div
             :class="
                 cn(
-                    'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+                    'relative w-(--sidebar-width) bg-transparent',
                     'group-data-[collapsible=offcanvas]:w-0',
                     'group-data-[side=right]:rotate-180',
                     variant === 'floating' || variant === 'inset'
@@ -86,14 +86,14 @@
         <div
             :class="
                 cn(
-                    'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+                    'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) md:flex',
                     side === 'left'
                         ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                         : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
                     // Adjust the padding for floating and inset variants.
                     variant === 'floating' || variant === 'inset'
                         ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
                     props.class
                 )
             "

src/localization/en.json

@@ -553,8 +553,11 @@
                     "bio_language": "Target Language",
                     "theme_mode": "Theme",
                     "font_family": "Font",
+                    "font_family_tooltip": "Does not change CJK fonts",
                     "font_family_inter": "Inter",
                     "font_family_noto_sans": "Noto Sans",
+                    "font_family_source_sans_3": "Source Sans 3",
+                    "font_family_ibm_plex_sans": "IBM Plex Sans",
                     "font_family_harmonyos_sans": "HarmonyOS Sans",
                     "theme_mode_system": "System",
                     "theme_mode_light": "Light",

src/shared/constants/fonts.js

@@ -1,4 +1,4 @@
-const APP_FONT_DEFAULT_KEY = 'noto_sans';
+const APP_FONT_DEFAULT_KEY = 'inter';
 
 const APP_FONT_CONFIG = Object.freeze({
     inter: {
@@ -9,6 +9,16 @@ const APP_FONT_CONFIG = Object.freeze({
         cssName: "'Noto Sans Variable'",
         link: null
     },
+    source_sans_3: {
+        cssName: "'Source Sans 3'",
+        cssImport:
+            "@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');"
+    },
+    ibm_plex_sans: {
+        cssName: "'IBM Plex Sans'",
+        cssImport:
+            "@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');"
+    },
     harmonyos_sans: {
         cssName: "'HarmonyOS Sans'",
         cssImport:

src/shared/utils/base/ui.js

@@ -152,26 +152,36 @@ function resolveAppFontFamily(fontKey) {
     };
 }
 
-function ensureAppFontLinks() {
+function ensureAppFontLinks(fontKey) {
     const head = document.head;
     if (!head) {
         return;
     }
-    Object.entries(APP_FONT_CONFIG).forEach(([key, config]) => {
+
-        if (!config?.cssImport) {
+    document
-            return;
+        .querySelectorAll(`style[${APP_FONT_LINK_ATTR}]`)
-        }
+        .forEach((styleEl) => {
-        const existing = document.querySelector(
+            if (styleEl.getAttribute(APP_FONT_LINK_ATTR) !== fontKey) {
-            `style[${APP_FONT_LINK_ATTR}="${key}"]`
+                styleEl.remove();
-        );
+            }
-        if (existing) {
+        });
-            return;
+
-        }
+    const config = APP_FONT_CONFIG[fontKey];
-        const styleEl = document.createElement('style');
+    if (!config?.cssImport) {
-        styleEl.setAttribute(APP_FONT_LINK_ATTR, key);
+        return;
-        styleEl.textContent = config.cssImport;
+    }
-        head.appendChild(styleEl);
+
-    });
+    const existing = document.querySelector(
+        `style[${APP_FONT_LINK_ATTR}="${fontKey}"]`
+    );
+    if (existing) {
+        return;
+    }
+
+    const styleEl = document.createElement('style');
+    styleEl.setAttribute(APP_FONT_LINK_ATTR, fontKey);
+    styleEl.textContent = config.cssImport;
+    head.appendChild(styleEl);
 }
 
 function applyAppFontFamily(fontKey) {
@@ -179,7 +189,7 @@ function applyAppFontFamily(fontKey) {
     const root = document.documentElement;
     root.style.setProperty('--font-western-primary', resolved.cssName);
 
-    ensureAppFontLinks();
+    ensureAppFontLinks(resolved.key);
 
     return resolved;
 }

src/stores/vrcx.js

@@ -533,13 +533,15 @@ export const useVrcxStore = defineStore('Vrcx', () => {
             if (advancedSettingsStore.sentryErrorReporting) {
                 try {
                     import('@sentry/vue').then((Sentry) => {
-                        const trail = getPiniaActionTrail().filter((entry) => {
+                        const trail = getPiniaActionTrail()
-                            if (!entry) return false;
+                            .filter((entry) => {
-                            return (
+                                if (!entry) return false;
-                                typeof entry.t === 'string' &&
+                                return (
-                                typeof entry.a === 'string'
+                                    typeof entry.t === 'string' &&
-                            );
+                                    typeof entry.a === 'string'
-                        });
+                                );
+                            })
+                            .reverse();
                         const trailText = JSON.stringify(trail);
                         Sentry.withScope((scope) => {
                             scope.setLevel('fatal');

src/styles/globals.css

@@ -162,6 +162,8 @@
 @layer base {
     * {
         @apply border-border outline-ring/50;
+        scrollbar-width: thin;
+        scrollbar-color: var(--border) transparent;
     }
     body {
         @apply bg-background text-foreground;
@@ -172,6 +174,22 @@
     }
 }
 
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+}
+
 @layer utilities {
     .scrollbar-hidden {
         scrollbar-width: none;

src/views/Favorites/FavoritesAvatar.vue

@@ -1892,12 +1892,14 @@
         display: flex;
         align-items: center;
         box-sizing: border-box;
+        border: 1px solid var(--border);
         border-radius: calc(8px * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         transition:
             border-color 0.2s ease,
-            box-shadow 0.2s ease;
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
         box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
         width: 100%;
         min-width: var(--favorites-card-min-width, 240px);
@@ -1906,7 +1908,7 @@
 
     :deep(.favorites-search-card:hover) {
         box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
-        transform: translateY(-2px);
+        transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
     }
 
     :deep(.favorites-search-card__content) {

src/views/Favorites/FavoritesFriend.vue

@@ -1159,12 +1159,14 @@
         display: flex;
         align-items: center;
         box-sizing: border-box;
+        border: 1px solid var(--border);
         border-radius: calc(8px * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         transition:
             border-color 0.2s ease,
-            box-shadow 0.2s ease;
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
         box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
         width: 100%;
         min-width: var(--favorites-card-min-width, 240px);
@@ -1173,7 +1175,7 @@
 
     :deep(.favorites-search-card:hover) {
         box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
-        transform: translateY(-2px);
+        transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
     }
 
     :deep(.favorites-search-card.is-selected) {

src/views/Favorites/FavoritesWorld.vue

@@ -1661,12 +1661,14 @@
         display: flex;
         align-items: center;
         box-sizing: border-box;
+        border: 1px solid var(--border);
         border-radius: calc(8px * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         transition:
             border-color 0.2s ease,
-            box-shadow 0.2s ease;
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
         box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
         width: 100%;
         min-width: var(--favorites-card-min-width, 240px);
@@ -1675,7 +1677,7 @@
 
     :deep(.favorites-search-card:hover) {
         box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
-        transform: translateY(-2px);
+        transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
     }
 
     :deep(.favorites-search-card.is-selected) {

src/views/Layout/AuthenticatedLayout.vue

@@ -3,7 +3,7 @@
         <SidebarProvider
             :open="sidebarOpen"
             :width="navWidth"
-            :width-icon="64"
+            :width-icon="48"
             class="relative flex-1 h-full min-w-0"
             @update:open="handleSidebarOpenChange">
             <NavMenu />
@@ -14,7 +14,7 @@
                 :style="{ left: 'var(--sidebar-width)' }"
                 @pointerdown.prevent="startNavResize" />
 
-            <SidebarInset class="min-w-0">
+            <SidebarInset class="min-w-0 bg-sidebar">
                 <ResizablePanelGroup
                     ref="panelGroupRef"
                     direction="horizontal"

src/views/PlayerList/PlayerList.vue

@@ -128,7 +128,9 @@
                     <div class="x-friend-item" style="cursor: default">
                         <div class="detail">
                             <span class="name">{{ t('dialog.world.info.last_updated') }}</span>
-                            <span class="block truncate text-xs">{{ formatDateFilter(currentInstanceWorld.lastUpdated, 'long') }}</span>
+                            <span class="block truncate text-xs">{{
+                                formatDateFilter(currentInstanceWorld.lastUpdated, 'long')
+                            }}</span>
                         </div>
                     </div>
                     <div class="x-friend-item" style="cursor: default">
@@ -148,13 +150,10 @@
 
             <div class="current-instance-table flex min-h-0 min-w-0 flex-1">
                 <DataTableLayout
-                    class="min-w-0 w-full [&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
+                    class="[&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
                     :table="playerListTable"
-                    table-class="min-w-max w-max"
-                    :use-table-min-width="true"
                     :table-style="playerListTableStyle"
                     :loading="false"
-                    :total-items="playerListTotalItems"
                     :show-pagination="false"
                     :on-row-click="handlePlayerListRowClick" />
             </div>
@@ -255,15 +254,9 @@
         return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
     }
 
-    const initialColumnPinning = {
-        left: ['avatar', 'timer', 'displayName'],
-        right: []
-    };
-
     const playerListColumns = computed(() =>
         createColumns({
             randomUserColours,
-            photonLoggingEnabled,
             chatboxUserBlacklist,
             onBlockChatbox: addChatboxUserBlacklist,
             onUnblockChatbox: deleteChatboxUserBlacklist,
@@ -274,14 +267,8 @@
     const { table: playerListTable } = useVrcxVueTable({
         persistKey: 'playerList',
         data: currentInstanceUsersData,
-        columns: playerListColumns.value,
+        columns: playerListColumns,
-        getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`,
+        getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`
-        enablePinning: true,
-        initialColumnPinning,
-        initialPagination: {
-            pageIndex: 0,
-            pageSize: 500
-        }
     });
 
     watch(
@@ -295,6 +282,18 @@
         { immediate: true }
     );
 
+    watch(
+        photonLoggingEnabled,
+        (enabled) => {
+            const column = playerListTable?.getColumn?.('photonId');
+            if (!column) {
+                return;
+            }
+            column.toggleVisibility(Boolean(enabled));
+        },
+        { immediate: true }
+    );
+
     const playerListTotalItems = computed(() => playerListTable.getRowModel().rows.length);
 
     const handlePlayerListRowClick = (row) => {

src/views/PlayerList/columns.jsx

@@ -58,13 +58,11 @@ const sortInstanceIcon = (a, b) =>
 
 export const createColumns = ({
     randomUserColours,
-    photonLoggingEnabled,
     chatboxUserBlacklist,
     onBlockChatbox,
     onUnblockChatbox,
     sortAlphabetically
 }) => {
-    /** @type {import('@tanstack/vue-table').ColumnDef<any, any>[]} */
     const cols = [
         {
             id: 'avatar',
@@ -72,7 +70,6 @@ export const createColumns = ({
             header: () => t('table.playerList.avatar'),
             size: 70,
             enableSorting: false,
-            enableResizing: false,
             cell: ({ row }) => {
                 const userRef = row.original?.ref;
                 const src = userImage(userRef);
@@ -94,7 +91,6 @@ export const createColumns = ({
             header: ({ column }) =>
                 sortButton({ column, label: t('table.playerList.timer') }),
             size: 90,
-            enableResizing: false,
             sortingFn: (rowA, rowB) =>
                 (rowA.original?.timer ?? 0) - (rowB.original?.timer ?? 0),
             cell: ({ row }) => <Timer epoch={row.original?.timer} />
@@ -144,7 +140,11 @@ export const createColumns = ({
             id: 'status',
             accessorFn: (row) => row?.ref?.statusDescription,
             header: () => t('table.playerList.status'),
-            minSize: 200,
+            size:200,
+            minSize: 100,
+            meta: {
+                stretch: true
+            },
             enableSorting: false,
             cell: ({ row }) => {
                 const userRef = row.original?.ref;
@@ -165,16 +165,14 @@ export const createColumns = ({
                     </span>
                 );
             }
-        }
+        },
-    ];
+        {
-
-    if (photonLoggingEnabled?.value) {
-        cols.push({
             id: 'photonId',
             accessorFn: (row) => row?.photonId,
             header: ({ column }) =>
                 sortButton({ column, label: t('table.playerList.photonId') }),
             size: 110,
+            enableHiding: true,
             sortingFn: (rowA, rowB) =>
                 (rowA.original?.photonId ?? 0) - (rowB.original?.photonId ?? 0),
             cell: ({ row }) => {
@@ -208,10 +206,7 @@ export const createColumns = ({
                     </div>
                 );
             }
-        });
+        },
-    }
-
-    cols.push(
         {
             id: 'icon',
             header: ({ column }) =>
@@ -295,6 +290,10 @@ export const createColumns = ({
             id: 'platform',
             header: () => t('table.playerList.platform'),
             size: 90,
+            meta: {
+                stretch: true
+            },
+            minSize: 20,
             enableSorting: false,
             cell: ({ row }) => {
                 const userRef = row.original?.ref;
@@ -405,7 +404,7 @@ export const createColumns = ({
             accessorFn: (row) => row?.ref?.note,
             header: () => t('table.playerList.note'),
             size: 150,
-            minSize: 40,
+            minSize: 20,
             meta: {
                 stretch: true
             },
@@ -419,7 +418,7 @@ export const createColumns = ({
                 return <span>{text}</span>;
             }
         }
-    );
+    ];
 
     return cols;
 };

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

@@ -33,7 +33,16 @@
                 </Select>
             </div>
             <div class="options-container-item">
-                <span class="name">{{ t('view.settings.appearance.appearance.font_family') }}</span>
+                <span class="name flex! items-center!">
+                    {{ t('view.settings.appearance.appearance.font_family') }}
+
+                    <TooltipWrapper
+                        side="top"
+                        style="margin-left: 5px"
+                        :content="t('view.settings.appearance.appearance.font_family_tooltip')">
+                        <Info />
+                    </TooltipWrapper>
+                </span>
                 <Select :model-value="appFontFamily" @update:modelValue="setAppFontFamily">
                     <SelectTrigger size="sm">
                         <SelectValue
@@ -41,10 +50,7 @@
                     </SelectTrigger>
                     <SelectContent>
                         <SelectGroup>
-                            <SelectItem
+                            <SelectItem v-for="fontKey in appFontFamilyOptions" :key="fontKey" :value="fontKey">
-                                v-for="fontKey in appFontFamilyOptions"
-                                :key="fontKey"
-                                :value="fontKey">
                                 {{ t(`view.settings.appearance.appearance.font_family_${fontKey}`) }}
                             </SelectItem>
                         </SelectGroup>
@@ -437,9 +443,9 @@
         TagsInputItemDelete,
         TagsInputItemText
     } from '@/components/ui/tags-input';
+    import { ArrowRight, CheckIcon, ChevronDown, Info } from 'lucide-vue-next';
     import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
     import { computed, onBeforeUnmount, ref, watch } from 'vue';
-    import { ArrowRight, CheckIcon, ChevronDown } from 'lucide-vue-next';
     import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
     import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
@@ -449,8 +455,8 @@
     import PresetColorPicker from '@/components/PresetColorPicker.vue';
 
     import { useAppearanceSettingsStore, useFavoriteStore, useVrStore } from '../../../../stores';
-    import { getLanguageName, languageCodes } from '../../../../localization';
     import { APP_FONT_FAMILIES, THEME_CONFIG } from '../../../../shared/constants';
+    import { getLanguageName, languageCodes } from '../../../../localization';
 
     import SimpleSwitch from '../SimpleSwitch.vue';
 

src/views/Sidebar/Sidebar.vue

@@ -27,12 +27,16 @@
                                                 item.ref.displayName
                                             }}</span>
                                             <span v-if="!item.ref.isFriend" class="block truncate text-xs"></span>
-                                            <span v-else-if="item.ref.state === 'offline'" class="block truncate text-xs">{{
+                                            <span
-                                                t('side_panel.search_result_active')
+                                                v-else-if="item.ref.state === 'offline'"
-                                            }}</span>
+                                                class="block truncate text-xs"
-                                            <span v-else-if="item.ref.state === 'active'" class="block truncate text-xs">{{
+                                                >{{ t('side_panel.search_result_active') }}</span
-                                                t('side_panel.search_result_offline')
+                                            >
-                                            }}</span>
+                                            <span
+                                                v-else-if="item.ref.state === 'active'"
+                                                class="block truncate text-xs"
+                                                >{{ t('side_panel.search_result_offline') }}</span
+                                            >
                                             <Location
                                                 v-else
                                                 class="text-xs"
@@ -182,7 +186,7 @@
         display: flex;
         flex: none;
         flex-direction: column;
-        padding: 13px 5px 5px 5px;
+        padding: 10px 5px 5px 5px;
         order: 99;
         height: 100%;
         box-sizing: border-box;