ui improve

2026-04-18 06:13:52 +02:00 · 2026-01-04 12:12:16 +09:00
parent 00745b54f1
commit 5de3f82673
23 changed files with 402 additions and 414 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -55,9 +55,9 @@
    --el-bg-color-page: var(--color-zinc-50);
    --el-bg-color-overlay: var(--color-white);

-    --el-text-color-secondary: var(--color-zinc-500);
-    --el-text-color-placeholder: var(--color-zinc-400);
-    --el-text-color-disabled: var(--color-zinc-300);
+    --el-text-color-secondary: var(--color-zinc-700);
+    --el-text-color-placeholder: var(--color-zinc-500);
+    --el-text-color-disabled: var(--color-zinc-400);

    --el-border-color: var(--color-zinc-200);
    --el-border-color-light: var(--color-zinc-200);
@@ -297,6 +297,10 @@ html.dark,
        color: var(--color-neutral-200);
    }

+    .el-table {
+        background-color: var(--el-bg-color-page);
+    }
+
    .el-table .el-table__empty-block {
        background-color: var(--el-bg-color-page);
    }
@@ -631,17 +635,30 @@ html.dark .x-friend-item > .detail > .extra,
    width: 2px;
    translate: 0 -50%;
    border-radius: 4px;
-    background: color-mix(in oklch, var(--el-color-primary) 32%, transparent);
+    background: var(--el-color-primary);
    transition:
        background-color 0.4s,
        left 0.2s;
 }

 .el-menu-item.is-active::before {
-    left: 2px;
+    left: 4px;
    transition: left 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.552);
 }

+.el-menu.el-menu--popup .el-menu-item::before {
+    opacity: 0;
+}
+
+.el-menu.el-menu--popup .el-menu-item.is-active::before {
+    opacity: 1;
+}
+
+.el-menu.el-menu--popup .el-menu-item > i {
+    margin-right: 0.75rem;
+    font-size: 18px;
+}
+
 .el-sub-menu .el-menu-item.notify::after {
    left: 18px;
 }
@@ -922,7 +939,7 @@ hr.x-vertical-divider {
    width: 4px;
    height: 4px;
    content: '';
-    background: var(--el-text-color-placeholder);
+    background: var(--el-text-color-secondary);
    border-radius: 50%;
 }

@@ -1273,8 +1290,8 @@ i.x-status-icon.red {
 }

 .x-tag-age-verification {
-    color: var(--el-color-primary-dark-2);
-    border-color: var(--el-color-primary-dark-2) !important;
+    color: #3b82f6;
+    border-color: #3b82f6 !important;
 }

 .x-tag-border-left {
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -188,7 +188,6 @@

 <style scoped>
    .data-table-wrapper {
-        margin: 0 3px;
        font-feature-settings:
            'tnum' 1,
            'lnum' 1;
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -14,11 +14,7 @@
                    @click="handleShowWorldDialog">
                    <el-icon :class="['is-loading']" class="mr-1" v-if="isTraveling"><Loading /></el-icon>
                    <span class="min-w-0 truncate">{{ text }}</span>
-                    <span
-                        v-if="groupName"
-                        class="ml-0.5 whitespace-nowrap"
-                        :class="{ 'x-link': link }"
-                        @click.stop="handleShowGroupDialog">
+                    <span v-if="groupName" class="ml-0.5 whitespace-nowrap x-link" @click.stop="handleShowGroupDialog">
                        ({{ groupName }})
                    </span>
                </div>
@@ -229,7 +225,7 @@

    function handleShowGroupDialog() {
        let location = currentInstanceId();
-        if (!location || !props.link) {
+        if (!location) {
            return;
        }
        const L = parseLocation(location);
@@ -244,10 +240,4 @@
    .transparent {
        color: transparent;
    }
-
-    :global(html.dark .x-location),
-    :global(:root.dark .x-location),
-    :global(:root[data-theme='dark'] .x-location) {
-        color: var(--color-zinc-300);
-    }
 </style>
--- a/src/components/LocationWorld.vue
+++ b/src/components/LocationWorld.vue
@@ -134,10 +134,4 @@
    .inline-block {
        display: inline-block;
    }
-
-    :global(html.dark .x-location-world),
-    :global(:root.dark .x-location-world),
-    :global(:root[data-theme='dark'] .x-location-world) {
-        color: var(--color-zinc-100);
-    }
 </style>
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -131,7 +131,7 @@
                    placement="right"
                    trigger="click"
                    popper-style="padding:4px;border-radius:8px;"
-                    :offset="-10"
+                    :offset="6"
                    :show-arrow="false"
                    :width="200"
                    :hide-after="0">
@@ -158,7 +158,9 @@
                            placement="right-start"
                            trigger="hover"
                            popper-style="padding:4px;border-radius:8px;"
-                            :width="200">
+                            :offset="8"
+                            :width="200"
+                            :hide-after="0">
                            <div class="nav-menu-theme">
                                <button
                                    v-for="theme in themes"
@@ -170,6 +172,62 @@
                                    <span class="nav-menu-theme__label">{{ themeDisplayName(theme) }}</span>
                                    <span v-if="themeMode === theme" class="nav-menu-theme__check">✓</span>
                                </button>
+
+                                <el-divider></el-divider>
+
+                                <el-popover
+                                    v-model:visible="themeColorMenuVisible"
+                                    placement="right-start"
+                                    trigger="hover"
+                                    popper-style="padding:4px;border-radius:8px;"
+                                    :offset="8"
+                                    :width="200"
+                                    :show-arrow="false"
+                                    :hide-after="0"
+                                    :teleported="false">
+                                    <div class="nav-menu-theme nav-menu-theme--colors">
+                                        <button
+                                            v-for="color in colorFamilies"
+                                            :key="color.name"
+                                            type="button"
+                                            class="nav-menu-theme__item"
+                                            :class="{ 'is-active': currentPrimary === color.base }"
+                                            :disabled="isApplyingPrimaryColor"
+                                            @click="handleThemeColorSelect(color)">
+                                            <span class="nav-menu-theme__label nav-menu-theme__label--swatch">
+                                                <span
+                                                    class="nav-menu-theme__swatch"
+                                                    :style="{ backgroundColor: color.base }"></span>
+                                                <span class="nav-menu-theme__label-text">{{ color.name }}</span>
+                                            </span>
+                                            <span v-if="currentPrimary === color.base" class="nav-menu-theme__check">
+                                                ✓
+                                            </span>
+                                        </button>
+
+                                        <el-divider></el-divider>
+
+                                        <div class="nav-menu-theme__custom">
+                                            <span class="nav-menu-theme__custom-label">{{
+                                                t('view.settings.appearance.theme_color.header')
+                                            }}</span>
+                                            <el-color-picker
+                                                :model-value="currentPrimary"
+                                                size="small"
+                                                :disabled="isApplyingPrimaryColor"
+                                                :teleported="false"
+                                                @change="handleCustomThemeColorChange" />
+                                        </div>
+                                    </div>
+                                    <template #reference>
+                                        <button type="button" class="nav-menu-theme__item" @click.prevent>
+                                            <span class="nav-menu-theme__label">{{
+                                                t('view.settings.appearance.theme_color.header')
+                                            }}</span>
+                                            <span class="nav-menu-settings__arrow">›</span>
+                                        </button>
+                                    </template>
+                                </el-popover>
                            </div>
                            <template #reference>
                                <button type="button" class="nav-menu-settings__item" @click.prevent>
@@ -230,12 +288,12 @@
        useAuthStore,
        useSearchStore,
        useUiStore,
-        useUserStore,
        useVRCXUpdaterStore
    } from '../stores';
    import { THEME_CONFIG, links, navDefinitions } from '../shared/constants';
    import { getSentry } from '../plugin';
    import { openExternalLink } from '../shared/utils';
+    import { useThemePrimaryColor } from '../composables/useElementTheme';

    import configRepository from '../service/config';

@@ -287,12 +345,9 @@
    const { logout } = useAuthStore();
    const appearanceSettingsStore = useAppearanceSettingsStore();
    const { themeMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
-    const userStore = useUserStore();
-    const { currentUser } = storeToRefs(userStore);
-    const { showUserDialog } = userStore;
-
    const settingsMenuVisible = ref(false);
    const themeMenuVisible = ref(false);
+    const themeColorMenuVisible = ref(false);
    const supportMenuVisible = ref(false);
    const navMenuRef = ref(null);
    const navLayout = ref([]);
@@ -374,6 +429,15 @@

    const themes = computed(() => Object.keys(THEME_CONFIG));

+    const {
+        currentPrimary,
+        isApplying: isApplyingPrimaryColor,
+        applyCustomPrimaryColor,
+        initPrimaryColor,
+        colorFamilies,
+        selectPaletteColor
+    } = useThemePrimaryColor();
+
    watch(
        () => activeMenuIndex.value,
        (value) => {
@@ -404,10 +468,6 @@

    const generateFolderId = () => `nav-folder-${dayjs().toISOString()}-${Math.random().toString().slice(2, 4)}`;

-    const showCurrentUserDialog = () => {
-        showUserDialog(currentUser.value?.id);
-    };
-
    const sanitizeLayout = (layout) => {
        const usedKeys = new Set();
        const normalized = [];
@@ -485,6 +545,27 @@
        appearanceSettingsStore.saveThemeMode(theme);
    };

+    const handleCustomThemeColorChange = async (color) => {
+        if (!color) {
+            await initPrimaryColor();
+            themeColorMenuVisible.value = false;
+            themeMenuVisible.value = false;
+            settingsMenuVisible.value = false;
+            return;
+        }
+        await applyCustomPrimaryColor(color);
+        themeColorMenuVisible.value = false;
+        themeMenuVisible.value = false;
+        settingsMenuVisible.value = false;
+    };
+
+    const handleThemeColorSelect = async (colorFamily) => {
+        await selectPaletteColor(colorFamily);
+        themeColorMenuVisible.value = false;
+        themeMenuVisible.value = false;
+        settingsMenuVisible.value = false;
+    };
+
    const openGithub = () => {
        openExternalLink('https://github.com/vrcx-team/VRCX');
    };
@@ -597,6 +678,7 @@
        settingsMenuVisible.value = false;
        supportMenuVisible.value = false;
        themeMenuVisible.value = false;
+        themeColorMenuVisible.value = false;
    };

    const triggerNavAction = (entry, navIndex = entry?.index) => {
@@ -643,6 +725,7 @@
            supportMenuVisible.value = false;
        } else {
            themeMenuVisible.value = false;
+            themeColorMenuVisible.value = false;
        }
    });

@@ -699,6 +782,7 @@
    };

    onMounted(async () => {
+        await initPrimaryColor();
        await loadNavMenuConfig();

        if (!NIGHTLY || !sentryErrorReporting.value) return;
@@ -981,5 +1065,50 @@
        .nav-menu-theme__item.is-active {
            background-color: var(--el-menu-hover-bg-color);
        }
+
+        .nav-menu-theme__label--swatch {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            min-width: 0;
+        }
+
+        .nav-menu-theme__label-text {
+            min-width: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-transform: capitalize;
+        }
+
+        .nav-menu-theme__swatch {
+            inline-size: 14px;
+            block-size: 14px;
+            border-radius: 4px;
+            border: 1px solid var(--el-border-color-lighter);
+            flex: none;
+        }
+
+        .nav-menu-theme__custom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 6px 10px;
+            border-radius: 6px;
+        }
+
+        .nav-menu-theme__custom-label {
+            font-size: 13px;
+            color: var(--el-text-color-regular);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding-right: 10px;
+        }
+    }
+
+    .nav-menu-theme--colors {
+        max-height: 360px;
+        overflow: hidden auto;
    }
 </style>
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -5,7 +5,7 @@
        v-model="avatarDialog.visible"
        :show-close="false"
        top="10vh"
-        width="930px">
+        width="940px">
        <div v-loading="avatarDialog.loading">
            <div style="display: flex">
                <img
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -4,7 +4,7 @@
        v-model="groupDialog.visible"
        :show-close="false"
        top="10vh"
-        width="930px"
+        width="940px"
        class="x-dialog x-group-dialog">
        <div v-loading="groupDialog.loading" class="group-body">
            <div style="display: flex">
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
@@ -16,7 +16,7 @@
                clearable></el-input>
        </div>
        <DataTable :loading="loading" v-bind="dataTable" style="margin-top: 10px">
-            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="110">
+            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="130">
                <template #default="scope">
                    <el-tooltip placement="left">
                        <template #content>
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -5,7 +5,7 @@
        v-model="userDialog.visible"
        :show-close="false"
        top="10vh"
-        width="930px">
+        width="940px">
        <div v-loading="userDialog.loading">
            <UserSummaryHeader
                :get-user-state-text="getUserStateText"
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -5,7 +5,7 @@
        v-model="isDialogVisible"
        top="10vh"
        :show-close="false"
-        width="930px">
+        width="940px">
        <div v-loading="worldDialog.loading">
            <div style="display: flex">
                <img
--- a/src/composables/useElementTheme.js
+++ b/src/composables/useElementTheme.js
@@ -5,25 +5,44 @@ import colors from 'tailwindcss/colors';
 import configRepository from '../service/config';

 // Tailwind indigo-500 in OKLCH
-const DEFAULT_PRIMARY = 'oklch(58.5% 0.233 277.117)';
+export const DEFAULT_PRIMARY_COLOR = 'oklch(58.5% 0.233 277.117)';
 const DARK_WEIGHT = 0.2;
 const CONFIG_KEY = 'VRCX_elPrimaryColor';
 const STYLE_ID = 'el-dynamic-theme';

 let elementThemeInstance = null;

+const INVALID_TAILWIND_COLOR_KEYS = new Set([
+    'inherit',
+    'current',
+    'transparent',
+    'black',
+    'white',
+    'lightBlue',
+    'warmGray',
+    'trueGray',
+    'coolGray',
+    'blueGray'
+]);
+
 /**
- * Keep okLCH as-is; otherwise normalize hex; fallback to default.
- * @param {string} color
- * @param {string} fallback
+ * Normalize a theme color and prevent CSS injection.
 */
-function toPrimaryColor(color, fallback = DEFAULT_PRIMARY) {
-    if (typeof color === 'string' && color.trim()) {
-        if (color.trim().startsWith('oklch(')) {
-            return color.trim();
-        }
+function toPrimaryColor(color, fallback = DEFAULT_PRIMARY_COLOR) {
+    if (typeof color !== 'string') {
+        return fallback;
    }
-    return fallback;
+
+    const normalized = color.trim();
+    if (!normalized) {
+        return fallback;
+    }
+
+    if (!CSS?.supports?.('color', normalized)) {
+        return fallback;
+    }
+
+    return normalized;
 }

 /**
@@ -42,10 +61,9 @@ function setElementPlusColors(primary, palette = null) {
    }

    // Derive Element Plus light steps either from a palette or by mixing with white.
-    const safePalette = palette || null;
-    const lightValues = safePalette
+    const lightValues = palette
        ? ['400', '300', '200', '100', '50', '50', '50', '50', '50'].map(
-              (key) => safePalette[key] || primary
+              (key) => palette[key] || primary
          )
        : Array.from({ length: 9 }, (_, idx) => {
              const whitePercent = (idx + 1) * 10;
@@ -73,25 +91,27 @@ function setElementPlusColors(primary, palette = null) {
        `${darkSelector} {\n    --el-color-primary-light-9: ${darkLight9};\n}`;
 }

-function findTailwindPalette(primary) {
-    const entries = Object.values(colors);
-    for (const palette of entries) {
-        if (
+const TAILWIND_COLOR_FAMILIES = Object.entries(colors)
+    .filter(([name, palette]) => {
+        return (
+            !INVALID_TAILWIND_COLOR_KEYS.has(name) &&
            palette &&
            typeof palette === 'object' &&
-            palette['500'] === primary
-        ) {
-            return palette;
-        }
-    }
-    return null;
-}
+            palette['500']
+        );
+    })
+    .map(([name, palette]) => ({
+        name,
+        base: palette['500'],
+        palette
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));

 /**
 * Shared Element Plus theme controller.
 * @param {string} defaultColor
 */
-export function useElementTheme(defaultColor = DEFAULT_PRIMARY) {
+export function useElementTheme(defaultColor = DEFAULT_PRIMARY_COLOR) {
    if (elementThemeInstance) {
        return elementThemeInstance;
    }
@@ -102,7 +122,7 @@ export function useElementTheme(defaultColor = DEFAULT_PRIMARY) {

    const applyPrimaryColor = async (color, palette = null) => {
        const nextColor = toPrimaryColor(color, currentPrimary.value);
-        const effectivePalette = palette || findTailwindPalette(nextColor);
+        const effectivePalette = palette || null;
        isApplying.value = true;
        setElementPlusColors(nextColor, effectivePalette);
        currentPrimary.value = nextColor;
@@ -124,7 +144,7 @@ export function useElementTheme(defaultColor = DEFAULT_PRIMARY) {
        const storedColor =
            (await configRepository.getString(CONFIG_KEY)) ||
            fallbackColor ||
-            DEFAULT_PRIMARY;
+            DEFAULT_PRIMARY_COLOR;
        await applyPrimaryColor(storedColor);
    };

@@ -138,4 +158,31 @@ export function useElementTheme(defaultColor = DEFAULT_PRIMARY) {
    return elementThemeInstance;
 }

-export { toPrimaryColor };
+export function useThemePrimaryColor() {
+    const { currentPrimary, isApplying, applyPrimaryColor, initPrimaryColor } =
+        useElementTheme(DEFAULT_PRIMARY_COLOR);
+    const colorFamilies = TAILWIND_COLOR_FAMILIES;
+
+    const selectPaletteColor = async (colorFamily) => {
+        if (!colorFamily) {
+            return;
+        }
+        await applyPrimaryColor(colorFamily.base, colorFamily.palette);
+    };
+
+    const applyCustomPrimaryColor = async (color) => {
+        if (!color) {
+            return;
+        }
+        await applyPrimaryColor(color);
+    };
+
+    return {
+        currentPrimary,
+        isApplying,
+        initPrimaryColor,
+        applyCustomPrimaryColor,
+        colorFamilies,
+        selectPaletteColor
+    };
+}
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -68,7 +68,7 @@
                <el-table-column width="20"></el-table-column>
                <el-table-column
                    :label="t('table.friendList.no')"
-                    width="70"
+                    width="100"
                    prop="$friendNumber"
                    :sortable="true"
                    fixed="left">
@@ -141,22 +141,25 @@
                </el-table-column>
                <el-table-column :label="t('table.friendList.bioLink')" width="130" prop="bioLinks">
                    <template #default="{ row }">
-                        <el-tooltip v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
-                            <template #content>
-                                <span v-text="link"></span>
-                            </template>
-                            <img
-                                :src="getFaviconUrl(link)"
-                                style="
-                                    width: 16px;
-                                    height: 16px;
-                                    vertical-align: middle;
-                                    margin-right: 5px;
-                                    cursor: pointer;
-                                "
-                                @click.stop="openExternalLink(link)"
-                                loading="lazy" />
-                        </el-tooltip>
+                        <div class="flex items-center">
+                            <el-tooltip v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
+                                <template #content>
+                                    <span v-text="link"></span>
+                                </template>
+
+                                <img
+                                    :src="getFaviconUrl(link)"
+                                    style="
+                                        width: 16px;
+                                        height: 16px;
+                                        vertical-align: middle;
+                                        margin-right: 5px;
+                                        cursor: pointer;
+                                    "
+                                    @click.stop="openExternalLink(link)"
+                                    loading="lazy" />
+                            </el-tooltip>
+                        </div>
                    </template>
                </el-table-column>
                <el-table-column
--- a/src/views/FriendLog/FriendLog.vue
+++ b/src/views/FriendLog/FriendLog.vue
@@ -28,6 +28,7 @@
        </div>

        <DataTable v-bind="friendLogTable" :data="friendLogDisplayData">
+            <el-table-column width="20"></el-table-column>
            <el-table-column :label="t('table.friendLog.date')" prop="created_at" width="200">
                <template #default="scope">
                    <el-tooltip placement="right">
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -41,6 +41,7 @@
        </div>

        <DataTable v-bind="gameLogTable" :data="gameLogDisplayData">
+            <el-table-column width="20"></el-table-column>
            <el-table-column :label="t('table.gameLog.date')" prop="created_at" width="140">
                <template #default="scope">
                    <el-tooltip placement="right">
--- a/src/views/Moderation/Moderation.vue
+++ b/src/views/Moderation/Moderation.vue
@@ -1,6 +1,5 @@
 <template>
    <div class="x-container" ref="moderationRef">
-        <!-- 工具栏 -->
        <div class="tool-slot">
            <el-select
                v-model="playerModerationTable.filters[0].value"
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -54,7 +54,7 @@
            :data="notificationDisplayData"
            ref="notificationTableRef"
            class="notification-table">
-            <el-table-column :label="t('table.notification.date')" prop="created_at" width="110">
+            <el-table-column :label="t('table.notification.date')" prop="created_at" width="130">
                <template #default="scope">
                    <el-tooltip placement="right">
                        <template #content>
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -125,9 +125,6 @@
                }}</el-button>
            </div>
        </div>
-        <div class="options-container">
-            <ThemePicker />
-        </div>
        <div class="options-container">
            <span class="header">{{ t('view.settings.appearance.timedate.header') }}</span>
            <div class="options-container-item">
@@ -394,7 +391,6 @@
    import { getLanguageName, languageCodes } from '../../../../localization';

    import SimpleSwitch from '../SimpleSwitch.vue';
-    import ThemePicker from '../ThemePicker.vue';

    const { t } = useI18n();

--- a/src/views/Settings/components/ThemePicker.vue
+++ b/src/views/Settings/components/ThemePicker.vue
@@ -1,207 +0,0 @@
-<template>
-    <div class="theme-picker">
-        <div class="theme-picker__header">
-            <div>
-                <span class="header">{{ t('view.settings.appearance.theme_color.header') }}</span>
-            </div>
-            <div class="theme-picker__current ml-25">
-                <span class="theme-picker__chip" :style="{ backgroundColor: currentPrimary }"></span>
-                <button type="button" class="theme-picker__toggle" @click="isOpen = !isOpen">
-                    {{ isOpen ? 'Collapse' : 'Expand' }}
-                </button>
-            </div>
-        </div>
-
-        <div v-show="isOpen" class="theme-picker__panel">
-            <div class="theme-picker__grid">
-                <button
-                    v-for="color in colorFamilies"
-                    :key="color.name"
-                    type="button"
-                    class="theme-picker__item"
-                    :class="{ 'is-active': color.base === currentPrimary }"
-                    :disabled="isApplying"
-                    @click="selectColor(color)">
-                    <span class="theme-picker__swatch" :style="{ backgroundColor: color.base }"></span>
-                    <span class="theme-picker__badge">{{ color.name }}</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-    import { computed, onMounted, ref } from 'vue';
-    import { useI18n } from 'vue-i18n';
-
-    import colors from 'tailwindcss/colors';
-
-    import { useElementTheme } from '../../../composables/useElementTheme';
-
-    // Tailwind indigo-500
-    const defaultPrimary = 'oklch(58.5% 0.233 277.117)';
-    const { currentPrimary, isApplying, applyPrimaryColor, initPrimaryColor } = useElementTheme(defaultPrimary);
-    const { t } = useI18n();
-
-    const invalidKeys = new Set([
-        'inherit',
-        'current',
-        'transparent',
-        'black',
-        'white',
-        'lightBlue',
-        'warmGray',
-        'trueGray',
-        'coolGray',
-        'blueGray'
-    ]);
-
-    const isOpen = ref(false);
-
-    const colorFamilies = computed(() =>
-        Object.entries(colors)
-            .filter(([name, palette]) => {
-                return !invalidKeys.has(name) && palette && typeof palette === 'object' && palette['500'];
-            })
-            .map(([name, palette]) => {
-                const base = palette['500'];
-                const light = palette['300'];
-                const vivid = palette['600'];
-                const dark = palette['700'];
-                return {
-                    name,
-                    base,
-                    light,
-                    vivid,
-                    dark,
-                    palette
-                };
-            })
-            .sort((a, b) => a.name.localeCompare(b.name))
-    );
-
-    const selectColor = async (color) => {
-        await applyPrimaryColor(color.base, color.palette);
-    };
-
-    onMounted(async () => {
-        await initPrimaryColor(defaultPrimary);
-    });
-</script>
-
-<style>
-    .theme-picker {
-        padding: 6px 0;
-        background: transparent;
-    }
-
-    .theme-picker__header {
-        display: flex;
-        justify-content: flex-start;
-        gap: 12px;
-        align-items: center;
-        margin-bottom: 10px;
-    }
-
-    .theme-picker__current {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        background: transparent;
-        color: var(--el-text-color-primary);
-        padding: 0;
-        border-radius: 0;
-        border: none;
-    }
-
-    .theme-picker__toggle {
-        border: none;
-        background: transparent;
-        color: var(--el-text-color-secondary);
-        font-size: 12px;
-        cursor: pointer;
-        padding: 0;
-    }
-
-    .theme-picker__toggle:hover {
-        color: var(--el-text-color-primary);
-    }
-
-    .theme-picker__chip {
-        width: 28px;
-        height: 28px;
-        border-radius: 6px;
-        border: 1px solid var(--color-zinc-100);
-    }
-
-    .theme-picker__panel {
-        max-width: 400px;
-    }
-
-    .theme-picker__grid {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        max-height: 360px;
-        gap: 10px 18px;
-    }
-
-    .theme-picker__item {
-        all: unset;
-        display: inline-flex;
-        align-items: center;
-        gap: 12px;
-        justify-content: space-between;
-        width: calc(50% - 9px);
-        min-width: 0;
-        cursor: pointer;
-        border: 1px solid var(--el-border-color-lighter);
-        border-radius: 10px;
-        padding: 8px 12px;
-        background: var(--el-bg-color);
-        transition: border-color 0.15s ease;
-    }
-
-    .theme-picker__item:hover {
-        border-color: var(--el-color-primary);
-    }
-
-    .theme-picker__item.is-active {
-        border-color: var(--el-color-primary);
-    }
-
-    .theme-picker__item:disabled {
-        cursor: not-allowed;
-        opacity: 0.6;
-    }
-
-    .theme-picker__swatch {
-        width: 28px;
-        height: 28px;
-        border-radius: 6px;
-        border: 1px solid var(--color-zinc-100);
-        flex: none;
-    }
-
-    .theme-picker__badge {
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--el-text-color-primary);
-        text-transform: capitalize;
-        flex: 1;
-        min-width: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    @media (max-width: 768px) {
-        .theme-picker__header {
-            flex-direction: column;
-            align-items: flex-start;
-        }
-        .theme-picker__current {
-            align-self: flex-start;
-        }
-    }
-</style>
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="x-friend-item" @click="$emit('click')">
+    <div class="x-friend-item" @click="showUserDialog(friend.id)">
        <template v-if="friend.ref">
            <div
                class="avatar"
@@ -63,7 +63,7 @@
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

-    import { useAppearanceSettingsStore, useFriendStore } from '../../../stores';
+    import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
    import { userImage, userStatusClass } from '../../../shared/utils';

    const props = defineProps({
@@ -71,10 +71,11 @@
        isGroupByInstance: Boolean
    });

-    defineEmits(['click', 'confirm-delete-friend']);
+    defineEmits(['confirm-delete-friend']);

    const { hideNicknames } = storeToRefs(useAppearanceSettingsStore());
    const { isRefreshFriendsLoading } = storeToRefs(useFriendStore());
+    const { showUserDialog } = useUserStore();
    const { t } = useI18n();

    const isFriendTraveling = computed(() => props.friend.ref?.location === 'traveling');
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -63,7 +63,6 @@
                            v-for="friend in group"
                            :key="friend.id"
                            :friend="friend"
-                            @click="showUserDialog(friend.id)"
                            @confirm-delete-friend="confirmDeleteFriend"></friend-item>
                    </div>
                </div>
@@ -73,7 +72,6 @@
                    v-for="friend in vipFriendsByGroupStatus"
                    :key="friend.id"
                    :friend="friend"
-                    @click="showUserDialog(friend.id)"
                    @confirm-delete-friend="confirmDeleteFriend">
                </friend-item>
            </template>
@@ -91,7 +89,7 @@

            <div v-show="!isSidebarGroupByInstanceCollapsed">
                <div v-for="friendArr in friendsInSameInstance" :key="friendArr[0].ref.$location.tag">
-                    <div style="margin-bottom: 3px">
+                    <div class="mb-1 flex items-center">
                        <Location class="extra" :location="getFriendsLocations(friendArr)" style="display: inline" />
                        <span class="extra" style="margin-left: 5px">{{ `(${friendArr.length})` }}</span>
                    </div>
@@ -102,7 +100,6 @@
                            :friend="friend"
                            is-group-by-instance
                            :style="{ 'margin-bottom': idx === friendArr.length - 1 ? '5px' : undefined }"
-                            @click="showUserDialog(friend.id)"
                            @confirm-delete-friend="confirmDeleteFriend">
                        </friend-item>
                    </div>
@@ -126,7 +123,6 @@
                v-for="friend in onlineFriendsByGroupStatus"
                :key="friend.id"
                :friend="friend"
-                @click="showUserDialog(friend.id)"
                @confirm-delete-friend="confirmDeleteFriend" />
        </div>
        <div
@@ -144,7 +140,6 @@
                v-for="friend in activeFriends"
                :key="friend.id"
                :friend="friend"
-                @click="showUserDialog(friend.id)"
                @confirm-delete-friend="confirmDeleteFriend"></friend-item>
        </div>
        <div
@@ -162,7 +157,6 @@
                v-for="friend in offlineFriends"
                :key="friend.id"
                :friend="friend"
-                @click="showUserDialog(friend.id)"
                @confirm-delete-friend="confirmDeleteFriend"></friend-item>
        </div>
    </div>
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="gallery-page x-container">
        <div class="gallery-page__header">
-            <el-button text size="small" :icon="ArrowLeft" class="gallery-page__back" @click="goBack">
+            <el-button text :icon="ArrowLeft" class="gallery-page__back" @click="goBack">
                {{ t('nav_tooltip.tools') }}
            </el-button>
            <span class="header">{{ t('dialog.gallery_icons.header') }}</span>
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -330,7 +330,7 @@
            transition: all 0.2s ease;

            &:hover {
-                background-color: var(--el-color-primary-light-8);
+                background-color: var(--el-color-primary-light-9);
            }

            .el-icon-arrow-right {
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -194,108 +194,132 @@
        position: relative;
        overflow: visible;
        border-radius: 8px;
-        &:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--el-box-shadow-light);
-        }
-        &.grouped-card {
-            margin-bottom: 0;
-        }
-        &.grid-card {
-            flex: 0 0 280px;
-            max-width: 280px;
-        }
-        &.group-dialog-grid-card {
-            flex: 0 0 320px;
-            max-width: 320px;
-        }
-        :deep(.el-card__body) {
-            overflow: visible;
-        }
-        .banner {
-            cursor: pointer;
-            width: 100%;
-            object-fit: cover;
-            border-radius: 8px 8px 0 0;
-            .timeline-view & {
-                height: 125px;
-            }
-            .grid-view & {
-                height: 100px;
-            }
-        }
-        .following-badge {
-            position: absolute;
-            top: -8px;
-            right: -9px;
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            background-color: var(--el-text-color-regular);
-            color: var(--el-bg-color);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            box-shadow: var(--el-box-shadow-lighter);
-            z-index: 10;
-            cursor: pointer;
-        }
-        .is-following {
-            background-color: var(--group-calendar-badge-following, var(--el-color-success));
-        }
-        .event-content {
-            font-size: 12px;
-            .timeline-view & {
-                padding: 4px 12px 12px 12px;
-            }
-            .grid-view & {
-                padding: 8px 12px 12px 12px;
-            }
-            .event-title {
-                display: flex;
-                flex-direction: column;
-                .grid-view & {
-                    margin-bottom: 8px;
-                }
-
-                .event-group-name {
-                    cursor: pointer;
-                    .grid-view & {
-                        display: none;
-                    }
-                }
-                .event-title-content {
-                    font-size: 14px;
-                    font-weight: bold;
-                    line-height: 1.2;
-                    cursor: pointer;
-                    .timeline-view & {
-                        margin-bottom: 2px;
-                    }
-                    &:hover {
-                        color: var(--el-color-primary);
-                    }
-                }
-            }
-            .event-info {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                .timeline-view & > :first-child {
-                    font-size: 14px;
-                }
-                .grid-view & {
-                    font-size: 11px;
-                    color: var(--el-text-color-regular);
-                }
-                .event-time {
-                    font-weight: 500;
-                    color: var(--el-color-primary);
-                }
-            }
-        }
    }
+
+    .event-card:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--el-box-shadow-light);
+    }
+
+    .event-card.grouped-card {
+        margin-bottom: 0;
+    }
+
+    .event-card.grid-card {
+        flex: 0 0 280px;
+        max-width: 280px;
+    }
+
+    .event-card.group-dialog-grid-card {
+        flex: 0 0 320px;
+        max-width: 320px;
+    }
+
+    .event-card :deep(.el-card__body) {
+        overflow: visible;
+    }
+
+    .event-card .banner {
+        cursor: pointer;
+        width: 100%;
+        object-fit: cover;
+        border-radius: 8px 8px 0 0;
+    }
+
+    .timeline-view .event-card .banner {
+        height: 125px;
+    }
+
+    .grid-view .event-card .banner {
+        height: 100px;
+    }
+
+    .event-card .following-badge {
+        position: absolute;
+        top: -8px;
+        right: -9px;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: var(--el-text-color-regular);
+        color: var(--el-bg-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        box-shadow: var(--el-box-shadow-lighter);
+        z-index: 10;
+        cursor: pointer;
+    }
+
+    .event-card .following-badge.is-following {
+        background-color: var(--group-calendar-badge-following, var(--el-color-success));
+    }
+
+    .event-card .event-content {
+        font-size: 12px;
+    }
+
+    .timeline-view .event-card .event-content {
+        padding: 4px 12px 12px 12px;
+    }
+
+    .grid-view .event-card .event-content {
+        padding: 8px 12px 12px 12px;
+    }
+
+    .event-card .event-title {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .grid-view .event-card .event-title {
+        margin-bottom: 8px;
+    }
+
+    .event-card .event-group-name {
+        cursor: pointer;
+    }
+
+    .grid-view .event-card .event-group-name {
+        display: none;
+    }
+
+    .event-card .event-title-content {
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 1.2;
+        cursor: pointer;
+    }
+
+    .timeline-view .event-card .event-title-content {
+        margin-bottom: 2px;
+    }
+
+    .event-card .event-title-content:hover {
+        color: var(--el-color-primary);
+    }
+
+    .event-card .event-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .timeline-view .event-card .event-info > :first-child {
+        font-size: 14px;
+    }
+
+    .grid-view .event-card .event-info {
+        font-size: 11px;
+        color: var(--el-text-color-regular);
+    }
+
+    .event-card .event-time {
+        font-weight: 500;
+        color: var(--el-color-primary);
+    }
+
    :deep(.el-card) {
        border-radius: 8px;
        width: 100%;