replace some el-select with VirtualCombobox

src/components/dialogs/GroupDialog/GroupPostEditDialog.vue

@@ -38,25 +38,28 @@
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item v-if="groupPostEditDialog.visibility === 'group'" :label="t('dialog.new_instance.roles')">
-                    <el-select
+                    <Select
-                        v-model="groupPostEditDialog.roleIds"
                         multiple
-                        clearable
+                        :model-value="Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []"
-                        :placeholder="t('dialog.new_instance.role_placeholder')"
+                        @update:modelValue="handleRoleIdsChange">
-                        style="width: 100%">
+                        <SelectTrigger size="sm" class="w-full">
-                        <el-option-group :label="t('dialog.new_instance.role_placeholder')">
+                            <SelectValue>
-                            <el-option
+                                <span class="truncate">
-                                v-for="role in groupPostEditDialog.groupRef?.roles"
+                                    {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
-                                :key="role.id"
+                                </span>
-                                :label="role.name"
+                            </SelectValue>
-                                :value="role.id"
+                        </SelectTrigger>
-                                style="height: auto; width: 478px">
+                        <SelectContent>
-                                <div class="detail">
+                            <SelectGroup>
-                                    <span class="name" v-text="role.name"></span>
+                                <SelectItem
-                                </div>
+                                    v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
-                            </el-option>
+                                    :key="role.id"
-                        </el-option-group>
+                                    :value="role.id">
-                    </el-select>
+                                    {{ role.name }}
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
                 </el-form-item>
                 <el-form-item :label="t('dialog.group_post_edit.image')">
                     <template v-if="gallerySelectDialog.selectedFileId">
@@ -102,6 +105,7 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
     import { groupRequest, vrcPlusIconRequest } from '../../../api';
     import { useGalleryStore, useGroupStore } from '../../../stores';
 
@@ -138,6 +142,21 @@
         }
     });
 
+    const selectedRoleSummary = computed(() => {
+        const ids = groupPostEditDialog.value.roleIds ?? [];
+        if (!Array.isArray(ids) || ids.length === 0) {
+            return '';
+        }
+        const roleById = new Map((groupPostEditDialog.value.groupRef?.roles ?? []).map((r) => [r.id, r.name]));
+        const names = ids.map((id) => roleById.get(id) ?? String(id));
+        return names.slice(0, 3).join(', ') + (names.length > 3 ? ` +${names.length - 3}` : '');
+    });
+
+    function handleRoleIdsChange(value) {
+        const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
+        groupPostEditDialog.value.roleIds = next;
+    }
+
     function showGallerySelectDialog() {
         const D = gallerySelectDialog.value;
         D.visible = true;

src/components/dialogs/InviteDialog/InviteDialog.vue

@@ -27,125 +27,37 @@
                 >{{ t('dialog.invite.add_favorite_friends') }}</el-button
             >
 
-            <el-select
+            <div style="width: 100%; margin-top: 15px">
-                v-model="inviteDialog.userIds"
+                <VirtualCombobox
-                multiple
+                    :model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
-                clearable
+                    @update:modelValue="setInviteUserIds"
-                :placeholder="t('dialog.invite.select_placeholder')"
+                    :groups="userPickerGroups"
-                filterable
+                    multiple
-                :disabled="inviteDialog.loading"
+                    :disabled="inviteDialog.loading"
-                style="width: 100%; margin-top: 15px">
+                    :placeholder="t('dialog.invite.select_placeholder')"
-                <template v-if="currentUser">
+                    :search-placeholder="t('dialog.invite.select_placeholder')"
-                    <el-option-group :label="t('side_panel.me')">
+                    :clearable="true">
-                        <el-option
+                    <template #item="{ item, selected }">
-                            class="x-friend-item"
+                        <div class="x-friend-item flex w-full items-center">
-                            :label="currentUser.displayName"
+                            <template v-if="item.user">
-                            :value="currentUser.id"
+                                <div :class="['avatar', userStatusClass(item.user)]">
-                            style="height: auto">
+                                    <img :src="userImage(item.user)" loading="lazy" />
-                            <div :class="['avatar', userStatusClass(currentUser)]">
-                                <img :src="userImage(currentUser)" loading="lazy" />
-                            </div>
-                            <div class="detail">
-                                <span class="name">{{ currentUser.displayName }}</span>
-                            </div>
-                        </el-option>
-                    </el-option-group>
-                </template>
-
-                <template v-if="inviteDialog.friendsInInstance.length">
-                    <el-option-group :label="t('dialog.invite.friends_in_instance')">
-                        <el-option
-                            v-for="friend in inviteDialog.friendsInInstance"
-                            :key="friend.id"
-                            class="x-friend-item"
-                            :label="friend.name"
-                            :value="friend.id"
-                            style="height: auto">
-                            <template v-if="friend.ref">
-                                <div :class="['avatar', userStatusClass(friend.ref)]">
-                                    <img :src="userImage(friend.ref)" loading="lazy" />
                                 </div>
                                 <div class="detail">
-                                    <span class="name" :style="{ color: friend.ref.$userColour }">{{
+                                    <span class="name" :style="{ color: item.user.$userColour }">{{
-                                        friend.ref.displayName
+                                        item.user.displayName
                                     }}</span>
                                 </div>
                             </template>
-                            <span v-else>{{ friend.id }}</span>
+                            <template v-else>
-                        </el-option>
+                                <span>{{ item.label }}</span>
-                    </el-option-group>
-                </template>
-
-                <template v-if="vipFriends.length">
-                    <el-option-group :label="t('side_panel.favorite')">
-                        <el-option
-                            v-for="friend in vipFriends"
-                            :key="friend.id"
-                            class="x-friend-item"
-                            :label="friend.name"
-                            :value="friend.id"
-                            style="height: auto">
-                            <template v-if="friend.ref">
-                                <div :class="['avatar', userStatusClass(friend.ref)]">
-                                    <img :src="userImage(friend.ref)" loading="lazy" />
-                                </div>
-                                <div class="detail">
-                                    <span class="name" :style="{ color: friend.ref.$userColour }">{{
-                                        friend.ref.displayName
-                                    }}</span>
-                                </div>
                             </template>
-                            <span v-else>{{ friend.id }}</span>
-                        </el-option>
-                    </el-option-group>
-                </template>
 
-                <template v-if="onlineFriends.length">
+                            <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                    <el-option-group :label="t('side_panel.online')">
+                        </div>
-                        <el-option
+                    </template>
-                            v-for="friend in onlineFriends"
+                </VirtualCombobox>
-                            :key="friend.id"
+            </div>
-                            class="x-friend-item"
-                            :label="friend.name"
-                            :value="friend.id"
-                            style="height: auto">
-                            <template v-if="friend.ref">
-                                <div :class="['avatar', userStatusClass(friend.ref)]">
-                                    <img :src="userImage(friend.ref)" loading="lazy" />
-                                </div>
-                                <div class="detail">
-                                    <span class="name" :style="{ color: friend.ref.$userColour }">{{
-                                        friend.ref.displayName
-                                    }}</span>
-                                </div>
-                            </template>
-                            <span v-else>{{ friend.id }}</span>
-                        </el-option>
-                    </el-option-group>
-                </template>
-
-                <template v-if="activeFriends.length">
-                    <el-option-group :label="t('side_panel.active')">
-                        <el-option
-                            v-for="friend in activeFriends"
-                            :key="friend.id"
-                            class="x-friend-item"
-                            :label="friend.name"
-                            :value="friend.id"
-                            style="height: auto">
-                            <template v-if="friend.ref">
-                                <div class="avatar"><img :src="userImage(friend.ref)" loading="lazy" /></div>
-                                <div class="detail">
-                                    <span class="name" :style="{ color: friend.ref.$userColour }">{{
-                                        friend.ref.displayName
-                                    }}</span>
-                                </div>
-                            </template>
-                            <span v-else>{{ friend.id }}</span>
-                        </el-option>
-                    </el-option-group>
-                </template>
-            </el-select>
         </div>
 
         <template #footer>
@@ -168,8 +80,9 @@
 </template>
 
 <script setup>
+    import { computed, ref } from 'vue';
+    import { Check as CheckIcon } from 'lucide-vue-next';
     import { ElMessageBox } from 'element-plus';
-    import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -177,6 +90,7 @@
     import { useFriendStore, useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
     import { parseLocation, userImage, userStatusClass } from '../../../shared/utils';
     import { instanceRequest, notificationRequest } from '../../../api';
+    import { VirtualCombobox } from '../../ui/virtual-combobox';
 
     import SendInviteDialog from './SendInviteDialog.vue';
 
@@ -202,6 +116,77 @@
         params: {}
     });
 
+    const userPickerGroups = computed(() => {
+        const groups = [];
+
+        if (currentUser.value) {
+            groups.push({
+                key: 'me',
+                label: t('side_panel.me'),
+                items: [
+                    {
+                        value: String(currentUser.value.id),
+                        label: currentUser.value.displayName,
+                        search: currentUser.value.displayName,
+                        user: currentUser.value
+                    }
+                ]
+            });
+        }
+
+        const addFriendGroup = (key, label, friends) => {
+            if (!friends?.length) return;
+            groups.push({
+                key,
+                label,
+                items: friends.map((friend) => {
+                    const user = friend?.ref ?? null;
+                    const displayName = resolveUserDisplayName(friend.id);
+                    return {
+                        value: String(friend.id),
+                        label: displayName,
+                        search: displayName,
+                        user
+                    };
+                })
+            });
+        };
+
+        addFriendGroup(
+            'friendsInInstance',
+            t('dialog.invite.friends_in_instance'),
+            props.inviteDialog?.friendsInInstance
+        );
+        addFriendGroup('vip', t('side_panel.favorite'), vipFriends.value);
+        addFriendGroup('online', t('side_panel.online'), onlineFriends.value);
+        addFriendGroup('active', t('side_panel.active'), activeFriends.value);
+
+        return groups;
+    });
+
+    function setInviteUserIds(value) {
+        const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
+        const ids = Array.isArray(props.inviteDialog.userIds) ? props.inviteDialog.userIds : [];
+        ids.splice(0, ids.length, ...next);
+    }
+
+    const friendById = computed(() => {
+        const map = new Map();
+        for (const friend of props.inviteDialog?.friendsInInstance ?? []) map.set(friend.id, friend);
+        for (const friend of vipFriends.value) map.set(friend.id, friend);
+        for (const friend of onlineFriends.value) map.set(friend.id, friend);
+        for (const friend of activeFriends.value) map.set(friend.id, friend);
+        return map;
+    });
+
+    function resolveUserDisplayName(userId) {
+        if (currentUser.value?.id && currentUser.value.id === userId) {
+            return currentUser.value.displayName;
+        }
+        const friend = friendById.value.get(userId);
+        return friend?.ref?.displayName ?? friend?.name ?? String(userId);
+    }
+
     function closeInviteDialog() {
         emit('closeInviteDialog');
     }

src/components/dialogs/InviteGroupDialog.vue

@@ -8,150 +8,62 @@
         <div v-if="inviteGroupDialog.visible" v-loading="inviteGroupDialog.loading">
             <span>{{ t('dialog.invite_to_group.description') }}</span>
             <br />
-            <el-select
+
-                v-model="inviteGroupDialog.groupId"
+            <div style="margin-top: 15px; width: 100%">
-                clearable
+                <VirtualCombobox
-                :placeholder="t('dialog.invite_to_group.choose_group_placeholder')"
+                    v-model="inviteGroupDialog.groupId"
-                filterable
+                    :groups="groupPickerGroups"
-                :disabled="inviteGroupDialog.loading"
+                    :disabled="inviteGroupDialog.loading"
-                style="margin-top: 15px; width: 100%">
+                    :placeholder="t('dialog.invite_to_group.choose_group_placeholder')"
-                <el-option-group
+                    :search-placeholder="t('dialog.invite_to_group.choose_group_placeholder')"
-                    :label="t('dialog.invite_to_group.groups_with_invite_permission')"
+                    :clearable="true"
-                    style="width: 410px">
+                    :close-on-select="true"
-                    <el-option
+                    :deselect-on-reselect="true">
-                        v-for="group in groupsWithInvitePermission"
+                    <template #item="{ item, selected }">
-                        :key="group.id"
+                        <div class="x-friend-item flex w-full items-center">
-                        :label="group.name"
-                        :value="group.id"
-                        style="height: auto"
-                        class="x-friend-item">
-                        <div class="avatar">
-                            <img :src="group.iconUrl" loading="lazy" />
-                        </div>
-                        <div class="detail">
-                            <span class="name" v-text="group.name"></span>
-                        </div>
-                    </el-option>
-                </el-option-group>
-            </el-select>
-            <el-select
-                v-model="inviteGroupDialog.userIds"
-                multiple
-                clearable
-                :placeholder="t('dialog.invite_to_group.choose_friends_placeholder')"
-                filterable
-                :disabled="inviteGroupDialog.loading"
-                style="width: 100%; margin-top: 15px">
-                <el-option-group v-if="inviteGroupDialog.userId" :label="t('dialog.invite_to_group.selected_users')">
-                    <el-option
-                        :key="inviteGroupDialog.userObject.id"
-                        :label="inviteGroupDialog.userObject.displayName"
-                        :value="inviteGroupDialog.userObject.id"
-                        style="height: auto"
-                        class="x-friend-item">
-                        <template v-if="inviteGroupDialog.userObject.id">
-                            <div class="avatar" :class="userStatusClass(inviteGroupDialog.userObject)">
-                                <img :src="userImage(inviteGroupDialog.userObject)" loading="lazy" />
-                            </div>
-                            <div class="detail">
-                                <span
-                                    class="name"
-                                    :style="{ color: inviteGroupDialog.userObject.$userColour }"
-                                    v-text="inviteGroupDialog.userObject.displayName"></span>
-                            </div>
-                        </template>
-                        <span v-else v-text="inviteGroupDialog.userId"></span>
-                    </el-option>
-                </el-option-group>
-                <el-option-group v-if="vipFriends.length" :label="t('side_panel.favorite')">
-                    <el-option
-                        v-for="friend in vipFriends"
-                        :key="friend.id"
-                        :label="friend.name"
-                        :value="friend.id"
-                        style="height: auto"
-                        class="x-friend-item">
-                        <template v-if="friend.ref">
-                            <div class="avatar" :class="userStatusClass(friend.ref)">
-                                <img :src="userImage(friend.ref)" loading="lazy" />
-                            </div>
-                            <div class="detail">
-                                <span
-                                    class="name"
-                                    :style="{ color: friend.ref.$userColour }"
-                                    v-text="friend.ref.displayName"></span>
-                            </div>
-                        </template>
-                        <span v-else v-text="friend.id"></span>
-                    </el-option>
-                </el-option-group>
-                <el-option-group v-if="onlineFriends.length" :label="t('side_panel.online')">
-                    <el-option
-                        v-for="friend in onlineFriends"
-                        :key="friend.id"
-                        :label="friend.name"
-                        :value="friend.id"
-                        style="height: auto"
-                        class="x-friend-item">
-                        <template v-if="friend.ref">
-                            <div class="avatar" :class="userStatusClass(friend.ref)">
-                                <img :src="userImage(friend.ref)" loading="lazy" />
-                            </div>
-                            <div class="detail">
-                                <span
-                                    class="name"
-                                    :style="{ color: friend.ref.$userColour }"
-                                    v-text="friend.ref.displayName"></span>
-                            </div>
-                        </template>
-                        <span v-else v-text="friend.id"></span>
-                    </el-option>
-                </el-option-group>
-                <el-option-group v-if="activeFriends.length" :label="t('side_panel.active')">
-                    <el-option
-                        v-for="friend in activeFriends"
-                        :key="friend.id"
-                        :label="friend.name"
-                        :value="friend.id"
-                        style="height: auto"
-                        class="x-friend-item">
-                        <template v-if="friend.ref">
                             <div class="avatar">
-                                <img :src="userImage(friend.ref)" loading="lazy" />
+                                <img :src="item.iconUrl" loading="lazy" />
                             </div>
                             <div class="detail">
-                                <span
+                                <span class="name" v-text="item.label"></span>
-                                    class="name"
-                                    :style="{ color: friend.ref.$userColour }"
-                                    v-text="friend.ref.displayName"></span>
                             </div>
-                        </template>
+                            <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                        <span v-else v-text="friend.id"></span>
+                        </div>
-                    </el-option>
+                    </template>
-                </el-option-group>
+                </VirtualCombobox>
-                <el-option-group v-if="offlineFriends.length" :label="t('side_panel.offline')">
+            </div>
-                    <el-option
+
-                        v-for="friend in offlineFriends"
+            <div style="width: 100%; margin-top: 15px">
-                        :key="friend.id"
+                <VirtualCombobox
-                        :label="friend.name"
+                    v-model="inviteGroupDialog.userIds"
-                        :value="friend.id"
+                    :groups="friendPickerGroups"
-                        style="height: auto"
+                    multiple
-                        class="x-friend-item">
+                    :disabled="inviteGroupDialog.loading"
-                        <template v-if="friend.ref">
+                    :placeholder="t('dialog.invite_to_group.choose_friends_placeholder')"
-                            <div class="avatar">
+                    :search-placeholder="t('dialog.invite_to_group.choose_friends_placeholder')"
-                                <img :src="userImage(friend.ref)" loading="lazy" />
+                    :clearable="true">
-                            </div>
+                    <template #item="{ item, selected }">
-                            <div class="detail">
+                        <div class="x-friend-item flex w-full items-center">
-                                <span
+                            <template v-if="item.user">
-                                    class="name"
+                                <div class="avatar" :class="userStatusClass(item.user)">
-                                    :style="{ color: friend.ref.$userColour }"
+                                    <img :src="userImage(item.user)" loading="lazy" />
-                                    v-text="friend.ref.displayName"></span>
+                                </div>
-                            </div>
+                                <div class="detail">
-                        </template>
+                                    <span
-                        <span v-else v-text="friend.id"></span>
+                                        class="name"
-                    </el-option>
+                                        :style="{ color: item.user.$userColour }"
-                </el-option-group>
+                                        v-text="item.user.displayName"></span>
-            </el-select>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <span v-text="item.label"></span>
+                            </template>
+
+                            <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
+                        </div>
+                    </template>
+                </VirtualCombobox>
+            </div>
         </div>
         <template #footer>
             <el-button
@@ -166,6 +78,7 @@
 
 <script setup>
     import { computed, nextTick, ref, watch } from 'vue';
+    import { Check as CheckIcon } from 'lucide-vue-next';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -174,6 +87,7 @@
     import { hasGroupPermission, userImage, userStatusClass } from '../../shared/utils';
     import { groupRequest, userRequest } from '../../api';
     import { useFriendStore, useGroupStore } from '../../stores';
+    import { VirtualCombobox } from '../ui/virtual-combobox';
     import { getNextDialogIndex } from '../../shared/utils/base/ui';
 
     import configRepository from '../../service/config';
@@ -203,6 +117,111 @@
         );
     });
 
+    const groupPickerGroups = computed(() => [
+        {
+            key: 'groupsWithInvitePermission',
+            label: t('dialog.invite_to_group.groups_with_invite_permission'),
+            items: groupsWithInvitePermission.value.map((group) => ({
+                value: String(group.id),
+                label: group.name,
+                search: group.name,
+                iconUrl: group.iconUrl
+            }))
+        }
+    ]);
+
+    const friendById = computed(() => {
+        const map = new Map();
+        for (const friend of vipFriends.value) map.set(friend.id, friend);
+        for (const friend of onlineFriends.value) map.set(friend.id, friend);
+        for (const friend of activeFriends.value) map.set(friend.id, friend);
+        for (const friend of offlineFriends.value) map.set(friend.id, friend);
+        return map;
+    });
+
+    function resolveUserDisplayName(userId) {
+        const D = inviteGroupDialog.value;
+        if (D?.userObject?.id && D.userObject.id === userId) {
+            return D.userObject.displayName;
+        }
+        const friend = friendById.value.get(userId);
+        return friend?.ref?.displayName ?? friend?.name ?? String(userId);
+    }
+
+    const friendPickerGroups = computed(() => {
+        const D = inviteGroupDialog.value;
+
+        const groups = [];
+
+        if (D?.userId) {
+            const selectedUser = D.userObject?.id
+                ? {
+                      value: String(D.userObject.id),
+                      label: D.userObject.displayName,
+                      search: D.userObject.displayName,
+                      user: D.userObject
+                  }
+                : {
+                      value: String(D.userId),
+                      label: String(D.userId),
+                      search: String(D.userId)
+                  };
+
+            groups.push({
+                key: 'selectedUsers',
+                label: t('dialog.invite_to_group.selected_users'),
+                items: [selectedUser]
+            });
+        }
+
+        const addFriendGroup = (key, label, friends) => {
+            if (!friends?.length) return;
+            groups.push({
+                key,
+                label,
+                items: friends.map((friend) => {
+                    const user = friend?.ref ?? null;
+                    const displayName = resolveUserDisplayName(friend.id);
+                    return {
+                        value: String(friend.id),
+                        label: displayName,
+                        search: displayName,
+                        user
+                    };
+                })
+            });
+        };
+
+        addFriendGroup('vip', t('side_panel.favorite'), vipFriends.value);
+        addFriendGroup('online', t('side_panel.online'), onlineFriends.value);
+        addFriendGroup('active', t('side_panel.active'), activeFriends.value);
+        addFriendGroup('offline', t('side_panel.offline'), offlineFriends.value);
+
+        return groups;
+    });
+
+    watch(
+        () => inviteGroupDialog.value.groupId,
+        (groupId) => {
+            if (!inviteGroupDialog.value.visible) {
+                return;
+            }
+            if (!groupId) {
+                inviteGroupDialog.value.groupName = '';
+                return;
+            }
+            groupRequest
+                .getCachedGroup({ groupId })
+                .then((args) => {
+                    inviteGroupDialog.value.groupName = args.ref.name;
+                })
+                .catch(() => {
+                    inviteGroupDialog.value.groupId = '';
+                });
+            isAllowedToInviteToGroup();
+        }
+    );
+
     function initDialog() {
         nextTick(() => {
             inviteGroupDialogIndex.value = getNextDialogIndex();

src/components/dialogs/ModerateGroupDialog.vue

@@ -19,31 +19,24 @@
                     <span v-else v-text="moderateGroupDialog.userId"></span>
                 </div>
             </div>
-            <el-select
+
-                v-model="moderateGroupDialog.groupId"
+            <div style="margin-top: 15px; width: 100%">
-                clearable
+                <VirtualCombobox
-                :placeholder="t('dialog.moderate_group.choose_group_placeholder')"
+                    :model-value="moderateGroupDialog.groupId"
-                filterable
+                    @update:modelValue="setGroupId"
-                style="margin-top: 15px; width: 100%">
+                    :groups="groupPickerGroups"
-                <el-option-group
+                    :placeholder="t('dialog.moderate_group.choose_group_placeholder')"
-                    v-if="currentUserGroups.size"
+                    :search-placeholder="t('dialog.moderate_group.choose_group_placeholder')"
-                    :label="t('dialog.moderate_group.groups_with_moderation_permission')">
+                    :close-on-select="true">
-                    <el-option
+                    <template #item="{ item, selected }">
-                        v-for="group in groupsWithModerationPermission"
+                        <div class="flex w-full items-center gap-2">
-                        :key="group.id"
+                            <img :src="item.iconUrl" loading="lazy" class="size-5 rounded-sm" />
-                        :label="group.name"
+                            <span class="truncate text-sm" v-text="item.label"></span>
-                        :value="group.id"
+                            <span v-if="selected" class="ml-auto opacity-70">✓</span>
-                        style="height: auto"
-                        class="x-friend-item">
-                        <div class="avatar">
-                            <img :src="group.iconUrl" loading="lazy" />
                         </div>
-                        <div class="detail">
+                    </template>
-                            <span class="name" v-text="group.name"></span>
+                </VirtualCombobox>
-                        </div>
+            </div>
-                    </el-option>
-                </el-option-group>
-            </el-select>
         </div>
         <template #footer>
             <el-button
@@ -66,6 +59,7 @@
 
     import { groupRequest, userRequest } from '../../api';
     import { hasGroupModerationPermission, userImage } from '../../shared/utils';
+    import { VirtualCombobox } from '../ui/virtual-combobox';
     import { getNextDialogIndex } from '../../shared/utils/base/ui';
     import { useGroupStore } from '../../stores';
 
@@ -77,6 +71,23 @@
         return Array.from(currentUserGroups.value.values()).filter((group) => hasGroupModerationPermission(group));
     });
 
+    const groupPickerGroups = computed(() => [
+        {
+            key: 'groups',
+            label: t('dialog.moderate_group.header'),
+            items: groupsWithModerationPermission.value.map((group) => ({
+                value: group.id,
+                label: group.name,
+                search: group.name,
+                iconUrl: group.iconUrl
+            }))
+        }
+    ]);
+
+    function setGroupId(value) {
+        moderateGroupDialog.value.groupId = String(value ?? '');
+    }
+
     watch(
         () => {
             return moderateGroupDialog.value.visible;

src/components/dialogs/NewInstanceDialog.vue

@@ -125,65 +125,55 @@
                     <el-form-item
                         v-if="newInstanceDialog.accessType === 'group'"
                         :label="t('dialog.new_instance.group_id')">
-                        <el-select
+                        <VirtualCombobox
                             v-model="newInstanceDialog.groupId"
-                            clearable
+                            :groups="normalGroupPickerGroups"
                             :placeholder="t('dialog.new_instance.group_placeholder')"
-                            filterable
+                            :search-placeholder="t('dialog.new_instance.group_placeholder')"
-                            style="width: 100%"
+                            :clearable="true"
+                            :close-on-select="true"
+                            :deselect-on-reselect="true"
                             @change="buildInstance">
-                            <el-option-group :label="t('dialog.new_instance.group_placeholder')">
+                            <template #item="{ item, selected }">
-                                <el-option
+                                <div class="x-friend-item flex w-full items-center">
-                                    v-for="group in currentUserGroups.values()"
+                                    <div class="avatar">
-                                    :key="group.id"
+                                        <img :src="item.iconUrl" loading="lazy" />
-                                    :label="group.name"
+                                    </div>
-                                    :value="group.id"
+                                    <div class="detail">
-                                    class="x-friend-item"
+                                        <span class="name" v-text="item.label"></span>
-                                    style="height: auto; width: 478px">
+                                    </div>
-                                    <template
+                                    <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                                        v-if="
+                                </div>
-                                            group &&
+                            </template>
-                                            (hasGroupPermission(group, 'group-instance-public-create') ||
+                        </VirtualCombobox>
-                                                hasGroupPermission(group, 'group-instance-plus-create') ||
-                                                hasGroupPermission(group, 'group-instance-open-create'))
-                                        ">
-                                        <div class="avatar">
-                                            <img :src="group.iconUrl" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span class="name" v-text="group.name"></span>
-                                        </div>
-                                    </template>
-                                </el-option>
-                            </el-option-group>
-                        </el-select>
                     </el-form-item>
                     <el-form-item
                         v-if="
                             newInstanceDialog.accessType === 'group' && newInstanceDialog.groupAccessType === 'members'
                         "
                         :label="t('dialog.new_instance.roles')">
-                        <el-select
+                        <Select
-                            v-model="newInstanceDialog.roleIds"
                             multiple
-                            clearable
+                            :model-value="Array.isArray(newInstanceDialog.roleIds) ? newInstanceDialog.roleIds : []"
-                            :placeholder="t('dialog.new_instance.role_placeholder')"
+                            @update:modelValue="handleRoleIdsChange">
-                            style="width: 100%"
+                            <SelectTrigger size="sm" class="w-full">
-                            @change="buildInstance">
+                                <SelectValue>
-                            <el-option-group :label="t('dialog.new_instance.role_placeholder')">
+                                    <span class="truncate">
-                                <el-option
+                                        {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
-                                    v-for="role in newInstanceDialog.selectedGroupRoles"
+                                    </span>
-                                    :key="role.id"
+                                </SelectValue>
-                                    class="x-friend-item"
+                            </SelectTrigger>
-                                    :label="role.name"
+                            <SelectContent>
-                                    :value="role.id"
+                                <SelectGroup>
-                                    style="height: auto; width: 478px">
+                                    <SelectItem
-                                    <div class="detail">
+                                        v-for="role in newInstanceDialog.selectedGroupRoles"
-                                        <span class="name" v-text="role.name"></span>
+                                        :key="role.id"
-                                    </div>
+                                        :value="role.id">
-                                </el-option>
+                                        {{ role.name }}
-                            </el-option-group>
+                                    </SelectItem>
-                        </el-select>
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
                     </el-form-item>
                     <template v-if="newInstanceDialog.instanceCreated">
                         <el-form-item :label="t('dialog.new_instance.location')">
@@ -305,146 +295,61 @@
                             newInstanceDialog.accessType !== 'group'
                         "
                         :label="t('dialog.new_instance.instance_creator')">
-                        <el-select
+                        <VirtualCombobox
                             v-model="newInstanceDialog.userId"
-                            clearable
+                            :groups="creatorPickerGroups"
                             :placeholder="t('dialog.new_instance.instance_creator_placeholder')"
-                            :persistent="false"
+                            :search-placeholder="t('dialog.new_instance.instance_creator_placeholder')"
-                            filterable
+                            :clearable="true"
-                            style="width: 100%"
+                            :close-on-select="true"
+                            :deselect-on-reselect="true"
                             @change="buildLegacyInstance">
-                            <el-option-group v-if="currentUser" :label="t('side_panel.me')">
+                            <template #item="{ item, selected }">
-                                <el-option
+                                <div class="x-friend-item flex w-full items-center">
-                                    class="x-friend-item"
+                                    <template v-if="item.user">
-                                    :label="currentUser.displayName"
+                                        <div class="avatar" :class="userStatusClass(item.user)">
-                                    :value="currentUser.id"
+                                            <img :src="userImage(item.user)" loading="lazy" />
-                                    style="height: auto">
-                                    <div class="avatar" :class="userStatusClass(currentUser)">
-                                        <img :src="userImage(currentUser)" loading="lazy" />
-                                    </div>
-                                    <div class="detail">
-                                        <span class="name" v-text="currentUser.displayName"></span>
-                                    </div>
-                                </el-option>
-                            </el-option-group>
-                            <el-option-group v-if="vipFriends.length" :label="t('side_panel.favorite')">
-                                <el-option
-                                    v-for="friend in vipFriends"
-                                    :key="friend.id"
-                                    class="x-friend-item"
-                                    :label="friend.name"
-                                    :value="friend.id"
-                                    style="height: auto">
-                                    <template v-if="friend.ref">
-                                        <div class="avatar" :class="userStatusClass(friend.ref)">
-                                            <img :src="userImage(friend.ref)" loading="lazy" />
                                         </div>
                                         <div class="detail">
                                             <span
                                                 class="name"
-                                                :style="{ color: friend.ref.$userColour }"
+                                                :style="{ color: item.user.$userColour }"
-                                                v-text="friend.ref.displayName"></span>
+                                                v-text="item.user.displayName"></span>
                                         </div>
                                     </template>
-                                    <span v-else v-text="friend.id"></span>
+                                    <template v-else>
-                                </el-option>
+                                        <span v-text="item.label"></span>
-                            </el-option-group>
-                            <el-option-group v-if="onlineFriends.length" :label="t('side_panel.online')">
-                                <el-option
-                                    v-for="friend in onlineFriends"
-                                    :key="friend.id"
-                                    class="x-friend-item"
-                                    :label="friend.name"
-                                    :value="friend.id"
-                                    style="height: auto">
-                                    <template v-if="friend.ref">
-                                        <div class="avatar" :class="userStatusClass(friend.ref)">
-                                            <img :src="userImage(friend.ref)" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span
-                                                class="name"
-                                                :style="{ color: friend.ref.$userColour }"
-                                                v-text="friend.ref.displayName"></span>
-                                        </div>
                                     </template>
-                                    <span v-else v-text="friend.id"></span>
+
-                                </el-option>
+                                    <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                            </el-option-group>
+                                </div>
-                            <el-option-group v-if="activeFriends.length" :label="t('side_panel.active')">
+                            </template>
-                                <el-option
+                        </VirtualCombobox>
-                                    v-for="friend in activeFriends"
-                                    :key="friend.id"
-                                    class="x-friend-item"
-                                    :label="friend.name"
-                                    :value="friend.id"
-                                    style="height: auto">
-                                    <template v-if="friend.ref">
-                                        <div class="avatar">
-                                            <img :src="userImage(friend.ref)" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span
-                                                class="name"
-                                                :style="{ color: friend.ref.$userColour }"
-                                                v-text="friend.ref.displayName"></span>
-                                        </div>
-                                    </template>
-                                    <span v-else v-text="friend.id"></span>
-                                </el-option>
-                            </el-option-group>
-                            <el-option-group v-if="offlineFriends.length" :label="t('side_panel.offline')">
-                                <el-option
-                                    v-for="friend in offlineFriends"
-                                    :key="friend.id"
-                                    class="x-friend-item"
-                                    :label="friend.name"
-                                    :value="friend.id"
-                                    style="height: auto">
-                                    <template v-if="friend.ref">
-                                        <div class="avatar">
-                                            <img :src="userImage(friend.ref)" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span
-                                                class="name"
-                                                :style="{ color: friend.ref.$userColour }"
-                                                v-text="friend.ref.displayName"></span>
-                                        </div>
-                                    </template>
-                                    <span v-else v-text="friend.id"></span>
-                                </el-option>
-                            </el-option-group>
-                        </el-select>
                     </el-form-item>
                     <el-form-item
                         v-if="newInstanceDialog.accessType === 'group'"
                         :label="t('dialog.new_instance.group_id')">
-                        <el-select
+                        <VirtualCombobox
                             v-model="newInstanceDialog.groupId"
-                            clearable
+                            :groups="legacyGroupPickerGroups"
                             :placeholder="t('dialog.new_instance.group_placeholder')"
-                            filterable
+                            :search-placeholder="t('dialog.new_instance.group_placeholder')"
-                            style="width: 100%"
+                            :clearable="true"
+                            :close-on-select="true"
+                            :deselect-on-reselect="true"
                             @change="buildLegacyInstance">
-                            <el-option-group :label="t('dialog.new_instance.group_placeholder')">
+                            <template #item="{ item, selected }">
-                                <el-option
+                                <div class="x-friend-item flex w-full items-center">
-                                    v-for="group in currentUserGroups.values()"
+                                    <div class="avatar">
-                                    :key="group.id"
+                                        <img :src="item.iconUrl" loading="lazy" />
-                                    class="x-friend-item"
+                                    </div>
-                                    :label="group.name"
+                                    <div class="detail">
-                                    :value="group.id"
+                                        <span class="name" v-text="item.label"></span>
-                                    style="height: auto; width: 478px">
+                                    </div>
-                                    <template v-if="group">
+                                    <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                                        <div class="avatar">
+                                </div>
-                                            <img :src="group.iconUrl" loading="lazy" />
+                            </template>
-                                        </div>
+                        </VirtualCombobox>
-                                        <div class="detail">
-                                            <span class="name" v-text="group.name"></span></div
-                                    ></template>
-                                </el-option>
-                            </el-option-group>
-                        </el-select>
                     </el-form-item>
                     <el-form-item :label="t('dialog.new_instance.location')">
                         <el-input
@@ -535,7 +440,8 @@
 </template>
 
 <script setup>
-    import { nextTick, ref, watch } from 'vue';
+    import { computed, nextTick, ref, watch } from 'vue';
+    import { Check as CheckIcon } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -558,8 +464,11 @@
         useLocationStore,
         useUserStore
     } from '../../stores';
+    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
     import { groupRequest, instanceRequest, worldRequest } from '../../api';
     import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
+    import { Button } from '../ui/button';
+    import { VirtualCombobox } from '../ui/virtual-combobox';
     import { getNextDialogIndex } from '../../shared/utils/base/ui';
 
     import InviteDialog from './InviteDialog/InviteDialog.vue';
@@ -622,6 +531,124 @@
         friendsInInstance: []
     });
 
+    const instanceCreatableGroups = computed(() => {
+        return Array.from(currentUserGroups.value.values()).filter((group) => {
+            if (!group) {
+                return false;
+            }
+            return (
+                hasGroupPermission(group, 'group-instance-public-create') ||
+                hasGroupPermission(group, 'group-instance-plus-create') ||
+                hasGroupPermission(group, 'group-instance-open-create')
+            );
+        });
+    });
+
+    const normalGroupPickerGroups = computed(() => [
+        {
+            key: 'instanceCreatableGroups',
+            label: t('dialog.new_instance.group_placeholder'),
+            items: instanceCreatableGroups.value.map((group) => ({
+                value: String(group.id),
+                label: group.name,
+                search: group.name,
+                iconUrl: group.iconUrl
+            }))
+        }
+    ]);
+
+    const legacyGroupPickerGroups = computed(() => [
+        {
+            key: 'currentUserGroups',
+            label: t('dialog.new_instance.group_placeholder'),
+            items: Array.from(currentUserGroups.value.values())
+                .filter(Boolean)
+                .map((group) => ({
+                    value: String(group.id),
+                    label: group.name,
+                    search: group.name,
+                    iconUrl: group.iconUrl
+                }))
+        }
+    ]);
+
+    const selectedRoleSummary = computed(() => {
+        const roleIds = newInstanceDialog.value.roleIds ?? [];
+        if (!Array.isArray(roleIds) || roleIds.length === 0) {
+            return '';
+        }
+        const roleById = new Map((newInstanceDialog.value.selectedGroupRoles ?? []).map((r) => [r.id, r.name]));
+        const names = roleIds.map((id) => roleById.get(id) ?? String(id));
+        return names.slice(0, 3).join(', ') + (names.length > 3 ? ` +${names.length - 3}` : '');
+    });
+
+    const friendById = computed(() => {
+        const map = new Map();
+        for (const friend of vipFriends.value) map.set(friend.id, friend);
+        for (const friend of onlineFriends.value) map.set(friend.id, friend);
+        for (const friend of activeFriends.value) map.set(friend.id, friend);
+        for (const friend of offlineFriends.value) map.set(friend.id, friend);
+        return map;
+    });
+
+    function resolveUserDisplayName(userId) {
+        if (currentUser.value?.id && currentUser.value.id === userId) {
+            return currentUser.value.displayName;
+        }
+        const friend = friendById.value.get(userId);
+        return friend?.ref?.displayName ?? friend?.name ?? String(userId);
+    }
+
+    const creatorPickerGroups = computed(() => {
+        const groups = [];
+
+        if (currentUser.value) {
+            groups.push({
+                key: 'me',
+                label: t('side_panel.me'),
+                items: [
+                    {
+                        value: String(currentUser.value.id),
+                        label: currentUser.value.displayName,
+                        search: currentUser.value.displayName,
+                        user: currentUser.value
+                    }
+                ]
+            });
+        }
+
+        const addFriendGroup = (key, label, friends) => {
+            if (!friends?.length) return;
+            groups.push({
+                key,
+                label,
+                items: friends.map((friend) => {
+                    const user = friend?.ref ?? null;
+                    const displayName = resolveUserDisplayName(friend.id);
+                    return {
+                        value: String(friend.id),
+                        label: displayName,
+                        search: displayName,
+                        user
+                    };
+                })
+            });
+        };
+
+        addFriendGroup('vip', t('side_panel.favorite'), vipFriends.value);
+        addFriendGroup('online', t('side_panel.online'), onlineFriends.value);
+        addFriendGroup('active', t('side_panel.active'), activeFriends.value);
+        addFriendGroup('offline', t('side_panel.offline'), offlineFriends.value);
+
+        return groups;
+    });
+
+    function handleRoleIdsChange(value) {
+        const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
+        newInstanceDialog.value.roleIds = next;
+        buildInstance();
+    }
+
     watch(
         () => props.newInstanceDialogLocationTag,
         (value) => {

src/components/dialogs/SendBoopDialog.vue

@@ -10,23 +10,21 @@
         <br />
         <br />
 
-        <el-select
+        <div v-if="sendBoopDialog.visible" style="width: 100%">
-            v-if="sendBoopDialog.visible"
+            <VirtualCombobox
-            v-model="fileId"
+                v-model="emojiModel"
-            clearable
+                :groups="emojiPickerGroups"
-            :placeholder="t('dialog.boop_dialog.select_default_emoji')"
+                :placeholder="t('dialog.boop_dialog.select_default_emoji')"
-            size="small"
+                :search-placeholder="t('dialog.boop_dialog.select_default_emoji')"
-            style="width: 100%">
+                :clearable="true"
-            <el-option-group :label="t('dialog.boop_dialog.default_emojis')">
+                :close-on-select="true"
-                <el-option
+                :deselect-on-reselect="true">
-                    v-for="emojiName in photonEmojis"
+                <template #item="{ item, selected }">
-                    :key="emojiName"
+                    <span v-text="item.label"></span>
-                    :value="getEmojiValue(emojiName)"
+                    <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                    style="width: 100%; height: 100%">
+                </template>
-                    <span v-text="emojiName"></span>
+            </VirtualCombobox>
-                </el-option>
+        </div>
-            </el-option-group>
-        </el-select>
 
         <br />
         <br />
@@ -73,16 +71,15 @@
 </template>
 
 <script setup>
-    import { ref, watch } from 'vue';
+    import { computed, ref, watch } from 'vue';
+    import { Check as CheckIcon } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { notificationRequest, userRequest } from '../../api';
+    import { miscRequest, notificationRequest, userRequest } from '../../api';
-    import { miscRequest } from '../../api';
+    import { useGalleryStore, useNotificationStore, useUserStore } from '../../stores';
+    import { VirtualCombobox } from '../ui/virtual-combobox';
     import { photonEmojis } from '../../shared/constants/photon.js';
-    import { useGalleryStore } from '../../stores';
-    import { useNotificationStore } from '../../stores';
-    import { useUserStore } from '../../stores/user.js';
 
     import Emoji from '../Emoji.vue';
 
@@ -115,6 +112,14 @@
     function closeDialog() {
         sendBoopDialog.value.visible = false;
     }
+
+    const emojiModel = computed({
+        get: () => (fileId.value ? String(fileId.value) : null),
+        set: (value) => {
+            fileId.value = value ? String(value) : '';
+        }
+    });
+
     function getEmojiValue(emojiName) {
         if (!emojiName) {
             return '';
@@ -122,6 +127,18 @@
         return `default_${emojiName.replace(/ /g, '_').toLowerCase()}`;
     }
 
+    const emojiPickerGroups = computed(() => [
+        {
+            key: 'defaultEmojis',
+            label: t('dialog.boop_dialog.default_emojis'),
+            items: photonEmojis.map((emojiName) => ({
+                value: getEmojiValue(emojiName),
+                label: emojiName,
+                search: emojiName
+            }))
+        }
+    ]);
+
     function sendBoop() {
         const D = sendBoopDialog.value;
         dismissBoop(D.userId);

src/components/ui/command/index.js

@@ -0,0 +1,16 @@
+import { createContext } from 'reka-ui';
+
+export { default as Command } from './Command.vue';
+export { default as CommandDialog } from './CommandDialog.vue';
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+export { default as CommandShortcut } from './CommandShortcut.vue';
+
+export const [useCommand, provideCommandContext] = createContext('Command');
+
+export const [useCommandGroup, provideCommandGroupContext] =
+    createContext('CommandGroup');

src/components/ui/dialog/index.js

@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

src/components/ui/input/Input.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultValue: { type: [String, Number], required: false },
+  modelValue: { type: [String, Number], required: false },
+  class: { type: null, required: false },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )
+    "
+  />
+</template>

src/components/ui/input/index.js

@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";

src/components/ui/virtual-combobox/VirtualCombobox.vue

@@ -1,3 +1,78 @@
+<template>
+    <Popover v-model:open="isOpen">
+        <PopoverTrigger as-child>
+            <Button variant="outline" size="sm" role="combobox" class="w-full justify-between" :disabled="disabled">
+                <slot name="trigger" :text="selectionSummaryText" :clear="clearSelection">
+                    <span class="truncate">
+                        {{ selectionSummaryText || placeholder }}
+                    </span>
+                </slot>
+
+                <div class="flex items-center gap-2">
+                    <span class="opacity-60">▾</span>
+                </div>
+            </Button>
+        </PopoverTrigger>
+
+        <PopoverContent class="w-(--reka-popover-trigger-width) p-2">
+            <Input v-if="searchable" v-model="searchText" :placeholder="searchPlaceholder" class="mb-2" />
+
+            <div
+                ref="scrollContainerRef"
+                class="overflow-auto rounded-md border"
+                :style="{ maxHeight: `${maxHeight}px` }">
+                <div
+                    :style="{
+                        height: `${virtualizer.getTotalSize()}px`,
+                        position: 'relative'
+                    }">
+                    <template v-for="virtualRow in virtualizer.getVirtualItems()" :key="String(virtualRow.key)">
+                        <div
+                            class="absolute left-0 top-0 w-full"
+                            :style="{ transform: `translateY(${virtualRow.start}px)` }">
+                            <template v-if="virtualListEntries[virtualRow.index]?.type === 'group'">
+                                <div
+                                    class="px-2 text-xs font-medium opacity-70 flex items-center"
+                                    :style="{ height: `${groupHeaderHeight}px` }">
+                                    <slot name="group" :group="virtualListEntries[virtualRow.index].group">
+                                        {{ virtualListEntries[virtualRow.index].group.label }}
+                                    </slot>
+                                </div>
+                            </template>
+
+                            <template v-else>
+                                <button
+                                    type="button"
+                                    class="flex w-full items-center gap-2 px-2 text-left"
+                                    :style="{ height: `${itemHeight}px` }"
+                                    @click="toggleSelection(virtualListEntries[virtualRow.index].value)">
+                                    <slot
+                                        name="item"
+                                        :item="virtualListEntries[virtualRow.index].item"
+                                        :selected="selectedValueSet.has(virtualListEntries[virtualRow.index].value)">
+                                        <span class="truncate text-sm">
+                                            {{ virtualListEntries[virtualRow.index].item.label }}
+                                        </span>
+                                        <span
+                                            v-if="selectedValueSet.has(virtualListEntries[virtualRow.index].value)"
+                                            class="ml-auto opacity-70">
+                                            ✓
+                                        </span>
+                                    </slot>
+                                </button>
+                            </template>
+                        </div>
+                    </template>
+
+                    <div v-if="virtualListEntries.length === 0" class="p-3 text-sm opacity-70">
+                        <slot name="empty">Nothing found</slot>
+                    </div>
+                </div>
+            </div>
+        </PopoverContent>
+    </Popover>
+</template>
+
 <script setup>
     import { computed, ref, shallowRef, watch } from 'vue';
     import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -22,7 +97,8 @@
         itemHeight: { type: Number, default: 40 },
         groupHeaderHeight: { type: Number, default: 28 },
 
-        closeOnSelect: { type: Boolean, default: false }
+        closeOnSelect: { type: Boolean, default: false },
+        deselectOnReselect: { type: Boolean, default: false }
     });
 
     const emit = defineEmits(['update:modelValue', 'change', 'clear']);
@@ -31,6 +107,8 @@
     const searchText = ref('');
     const scrollContainerRef = shallowRef(null);
 
+    const normalizedGroups = computed(() => /** @type {Array<any>} */ (props.groups ?? []));
+
     const selectedValueSet = computed(() => {
         if (props.multiple) {
             const values = Array.isArray(props.modelValue) ? props.modelValue : [];
@@ -44,8 +122,8 @@
 
         const entries = [];
 
-        for (const group of props.groups) {
+        for (const group of normalizedGroups.value) {
-            const groupItems = Array.isArray(group.items) ? group.items : [];
+            const groupItems = Array.isArray(group?.items) ? group.items : [];
 
             const filteredItems = normalizedSearch
                 ? groupItems.filter((item) =>
@@ -57,14 +135,14 @@
 
             entries.push({
                 type: 'group',
-                key: `group:${group.key}`,
+                key: `group:${group?.key ?? ''}`,
                 group
             });
 
             for (const item of filteredItems) {
                 entries.push({
                     type: 'item',
-                    key: `item:${group.key}:${item.value}`,
+                    key: `item:${group?.key ?? ''}:${item?.value}`,
                     group,
                     item,
                     value: String(item.value)
@@ -81,8 +159,8 @@
 
         const valueToLabelMap = new Map();
 
-        for (const group of props.groups) {
+        for (const group of normalizedGroups.value) {
-            for (const item of group.items ?? []) {
+            for (const item of group?.items ?? []) {
                 valueToLabelMap.set(String(item.value), item.label);
             }
         }
@@ -103,6 +181,13 @@
             emit('update:modelValue', next);
             emit('change', next);
         } else {
+            if (props.deselectOnReselect && selectedValueSet.value.has(value)) {
+                clearSelection();
+                if (props.closeOnSelect) {
+                    isOpen.value = false;
+                }
+                return;
+            }
             emit('update:modelValue', value);
             emit('change', value);
 
@@ -133,85 +218,3 @@
         virtualizer.value?.scrollToOffset?.(0);
     });
 </script>
-
-<template>
-    <Popover v-model:open="isOpen">
-        <PopoverTrigger as-child>
-            <Button variant="outline" size="sm" role="combobox" class="w-full justify-between" :disabled="disabled">
-                <slot name="trigger" :text="selectionSummaryText" :clear="clearSelection">
-                    <span class="truncate">
-                        {{ selectionSummaryText || placeholder }}
-                    </span>
-                </slot>
-
-                <div class="flex items-center gap-2">
-                    <button
-                        v-if="clearable && selectedValueSet.size && !disabled"
-                        type="button"
-                        class="opacity-60 hover:opacity-90"
-                        @click.stop="clearSelection">
-                        ✕
-                    </button>
-                    <span class="opacity-60">▾</span>
-                </div>
-            </Button>
-        </PopoverTrigger>
-
-        <PopoverContent class="w-(--reka-popover-trigger-width) p-2">
-            <Input v-if="searchable" v-model="searchText" :placeholder="searchPlaceholder" class="mb-2" />
-
-            <div
-                ref="scrollContainerRef"
-                class="overflow-auto rounded-md border"
-                :style="{ maxHeight: `${maxHeight}px` }">
-                <div
-                    :style="{
-                        height: `${virtualizer.getTotalSize()}px`,
-                        position: 'relative'
-                    }">
-                    <template v-for="virtualRow in virtualizer.getVirtualItems()" :key="virtualRow.key">
-                        <div
-                            class="absolute left-0 top-0 w-full"
-                            :style="{ transform: `translateY(${virtualRow.start}px)` }">
-                            <template v-if="virtualListEntries[virtualRow.index]?.type === 'group'">
-                                <div
-                                    class="px-2 text-xs font-medium opacity-70 flex items-center"
-                                    :style="{ height: `${groupHeaderHeight}px` }">
-                                    <slot name="group" :group="virtualListEntries[virtualRow.index].group">
-                                        {{ virtualListEntries[virtualRow.index].group.label }}
-                                    </slot>
-                                </div>
-                            </template>
-
-                            <template v-else>
-                                <button
-                                    type="button"
-                                    class="flex w-full items-center gap-2 px-2 hover:bg-accent text-left"
-                                    :style="{ height: `${itemHeight}px` }"
-                                    @click="toggleSelection(virtualListEntries[virtualRow.index].value)">
-                                    <slot
-                                        name="item"
-                                        :item="virtualListEntries[virtualRow.index].item"
-                                        :selected="selectedValueSet.has(virtualListEntries[virtualRow.index].value)">
-                                        <span class="truncate text-sm">
-                                            {{ virtualListEntries[virtualRow.index].item.label }}
-                                        </span>
-                                        <span
-                                            v-if="selectedValueSet.has(virtualListEntries[virtualRow.index].value)"
-                                            class="ml-auto opacity-70">
-                                            ✓
-                                        </span>
-                                    </slot>
-                                </button>
-                            </template>
-                        </div>
-                    </template>
-
-                    <div v-if="virtualListEntries.length === 0" class="p-3 text-sm opacity-70">
-                        <slot name="empty">Nothing found</slot>
-                    </div>
-                </div>
-            </div>
-        </PopoverContent>
-    </Popover>
-</template>

src/components/ui/virtual-combobox/index.js

@@ -0,0 +1 @@
+export { default as VirtualCombobox } from './VirtualCombobox.vue';

src/views/Layout/AuthenticatedLayout.vue

@@ -116,7 +116,6 @@
         panelGroupRef,
         navPanelRef,
         asidePanelRef,
-        navDefaultSize,
         navMinSize,
         navMaxSize,
         asideDefaultSize,

src/views/PlayerList/PlayerList.vue

@@ -188,7 +188,6 @@
     import { createColumns } from './columns.jsx';
     import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
     import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
-    import { watchState } from '../../service/watchState';
 
     import ChatboxBlacklistDialog from './dialogs/ChatboxBlacklistDialog.vue';
     import Timer from '../../components/Timer.vue';

src/views/Tools/Gallery.vue

@@ -69,7 +69,7 @@
                                 :src="image.versions[image.versions.length - 1].file.url"
                                 loading="lazy" />
                         </div>
-                        <div style="float: right; margin-top: 5px">
+                        <div class="float-right" style="margin-top: 5px">
                             <el-button
                                 type="default"
                                 @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
@@ -82,8 +82,9 @@
                                 size="small"
                                 :icon="Delete"
                                 circle
-                                style="margin-left: 5px"></el-button></div
+                                style="margin-left: 5px"></el-button>
-                    ></template>
+                        </div>
+                    </template>
                 </div>
             </el-tab-pane>
 
@@ -138,7 +139,7 @@
                                 :src="image.versions[image.versions.length - 1].file.url"
                                 loading="lazy" />
                         </div>
-                        <div style="float: right; margin-top: 5px">
+                        <div class="float-right" style="margin-top: 5px">
                             <el-button
                                 type="default"
                                 @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
@@ -161,7 +162,7 @@
                     <span>
                         {{ t('dialog.gallery_icons.emojis') }}
                         <span class="gallery-tab-count">
-                            {{ emojiTable.length }}/{{ cachedConfig?.maxUserEmoji }}
+                            {{ emojiTable.length }}/{{ cachedConfigTyped.maxUserEmoji }}
                         </span>
                     </span>
                 </template>
@@ -191,25 +192,26 @@
                     </ButtonGroup>
                     <br />
                     <br />
-                    <el-select v-model="emojiAnimationStyle">
+                    <VirtualCombobox
-                        <el-option-group>
+                        v-model="emojiAnimationStyle"
-                            {{ t('dialog.gallery_icons.emoji_animation_styles') }}
+                        :groups="emojiStylePickerGroups"
-                            <el-option
+                        :placeholder="t('dialog.gallery_icons.emoji_animation_styles')"
-                                class="x-friend-item"
+                        :search-placeholder="t('dialog.gallery_icons.emoji_animation_styles')"
-                                v-for="(fileName, styleName) in emojiAnimationStyleList"
+                        :clearable="false"
-                                :key="styleName"
+                        :close-on-select="true">
-                                :label="styleName"
+                        <template #item="{ item, selected }">
-                                :value="styleName"
+                            <div class="flex w-full items-center gap-2">
-                                style="height: auto">
+                                <div class="h-10 w-10 shrink-0 overflow-hidden rounded-sm bg-black/5">
-                                <div class="avatar" style="width: 200px; height: 200px">
+                                    <img
-                                    <img :src="`${emojiAnimationStyleUrl}${fileName}`" loading="lazy" />
+                                        class="h-full w-full object-cover"
+                                        :src="`${emojiAnimationStyleUrl}${item.fileName}`"
+                                        loading="lazy" />
                                 </div>
-                                <div class="detail">
+                                <span class="truncate text-sm" v-text="item.label"></span>
-                                    <span class="name" v-text="styleName" style="margin-right: 100px"></span>
+                                <span v-if="selected" class="ml-auto opacity-70">✓</span>
-                                </div>
+                            </div>
-                            </el-option>
+                        </template>
-                        </el-option-group>
+                    </VirtualCombobox>
-                    </el-select>
                     <el-checkbox v-model="emojiAnimType">
                         <span>{{ t('dialog.gallery_icons.emoji_animation_type') }}</span>
                     </el-checkbox>
@@ -276,7 +278,7 @@
                             <span v-if="image.frames" style="margin-right: 5px">{{ image.frames }}frames</span>
                             <br />
                         </div>
-                        <div style="float: right; margin-top: 5px">
+                        <div class="float-right" style="margin-top: 5px">
                             <el-button
                                 type="default"
                                 @click="
@@ -304,7 +306,7 @@
                     <span>
                         {{ t('dialog.gallery_icons.stickers') }}
                         <span class="gallery-tab-count">
-                            {{ stickerTable.length }}/{{ cachedConfig?.maxUserStickers }}
+                            {{ stickerTable.length }}/{{ cachedConfigTyped.maxUserStickers }}
                         </span>
                     </span>
                 </template>
@@ -348,7 +350,7 @@
                                 :src="image.versions[image.versions.length - 1].file.url"
                                 loading="lazy" />
                         </div>
-                        <div style="float: right; margin-top: 5px">
+                        <div class="float-right" style="margin-top: 5px">
                             <el-button
                                 type="default"
                                 @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
@@ -443,7 +445,7 @@
                         </span>
                         <span v-else style="display: block">&nbsp;</span>
                     </div>
-                    <div style="float: right">
+                    <div class="float-right">
                         <el-button
                             type="default"
                             @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))"
@@ -518,7 +520,7 @@
                         @click="consumeInventoryBundle(item.id)"
                         size="small"
                         :icon="Plus"
-                        style="float: right">
+                        class="float-right">
                         {{ t('dialog.gallery_icons.consume_bundle') }}
                     </el-button>
                 </div>
@@ -533,6 +535,7 @@
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { ElMessageBox } from 'element-plus';
+    import { VirtualCombobox } from '@/components/ui/virtual-combobox';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -589,6 +592,9 @@
     const { showFullscreenImageDialog } = useGalleryStore();
     const { currentUser, isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
     const { cachedConfig } = storeToRefs(useAuthStore());
+    const cachedConfigTyped = computed(
+        () => /** @type {{ maxUserEmoji?: number, maxUserStickers?: number }} */ (cachedConfig.value ?? {})
+    );
 
     const emojiAnimFps = ref(15);
     const emojiAnimFrameCount = ref(4);
@@ -596,6 +602,19 @@
     const emojiAnimationStyle = ref('Stop');
     const emojiAnimLoopPingPong = ref(false);
 
+    const emojiStylePickerGroups = computed(() => [
+        {
+            key: 'emojiAnimationStyles',
+            label: t('dialog.gallery_icons.emoji_animation_styles'),
+            items: Object.entries(emojiAnimationStyleList).map(([styleName, fileName]) => ({
+                value: styleName,
+                label: styleName,
+                search: styleName,
+                fileName
+            }))
+        }
+    ]);
+
     const pendingUploads = ref(0);
     const isUploading = computed(() => pendingUploads.value > 0);