add midnight theme and fix some styles

2026-04-24 17:23:50 +02:00 · 2026-01-18 15:45:36 +09:00
parent 46750d3a0c
commit c326e4fd3e
37 changed files with 655 additions and 471 deletions
--- a/src/components/AvatarInfo.vue
+++ b/src/components/AvatarInfo.vue
@@ -1,9 +1,8 @@
 <template>
    <div @click="confirm" class="cursor-pointer w-fit align-top flex items-center">
-        <span>{{ avatarName }}</span>
-        <span v-if="avatarType === '(own)'" :class="color" class="mx-1">
-            <Lock v-if="avatarType" class="h-4 w-4" />
-        </span>
+        <span class="flex items-center"
+            >{{ avatarName }} <Lock v-if="avatarType && avatarType === '(own)'" class="h-4 w-4 mx-1"
+        /></span>
        <span v-if="avatarTags" style="font-size: 12px">{{ avatarTags }}</span>
    </div>
 </template>
@@ -27,14 +26,12 @@
    const avatarName = ref('');
    const avatarType = ref('');
    const avatarTags = ref('');
-    const color = ref('');
    let ownerId = '';

    const parse = async () => {
        ownerId = '';
        avatarName.value = '';
        avatarType.value = '';
-        color.value = '';
        avatarTags.value = '';

        if (!props.imageurl) {
@@ -55,13 +52,10 @@
        }

        if (typeof props.userid === 'undefined' || !ownerId) {
-            color.value = '';
            avatarType.value = '';
        } else if (ownerId === props.userid) {
-            color.value = 'avatar-info-own';
            avatarType.value = '(own)';
        } else {
-            color.value = 'avatar-info-public';
            avatarType.value = '(public)';
        }

--- a/src/components/InstanceActionBar.vue
+++ b/src/components/InstanceActionBar.vue
@@ -0,0 +1,385 @@
+<template>
+    <div class="flex items-center" v-bind="$attrs">
+        <div v-if="showLaunchButton" class="inline-block">
+            <TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')">
+                <Button
+                    class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    @click="confirmLaunch">
+                    <LogIn />
+                </Button>
+            </TooltipWrapper>
+        </div>
+        <div v-if="showInviteYourself" class="inline-block" :style="inviteStyle">
+            <TooltipWrapper
+                v-if="!canOpenInstanceInGame"
+                side="top"
+                :content="t('dialog.user.info.self_invite_tooltip')">
+                <Button
+                    class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    @click="confirmInvite">
+                    <Mail class="h-4 w-4" />
+                </Button>
+            </TooltipWrapper>
+            <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
+                <Button
+                    class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    v-if="isOpeningInstance">
+                    <Loader2 class="h-4 w-4 animate-spin" />
+                </Button>
+                <Button
+                    class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    v-else
+                    @click="openInstance">
+                    <Mail class="h-4 w-4" />
+                </Button>
+            </TooltipWrapper>
+        </div>
+        <TooltipWrapper v-if="showRefreshButton" side="top" :content="refreshTooltip">
+            <Button
+                class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                size="icon"
+                variant="outline"
+                @click="handleRefresh">
+                <RefreshCw class="h-4 w-4" />
+            </Button>
+        </TooltipWrapper>
+        <TooltipWrapper v-if="showHistoryButton" side="top" :content="historyTooltip">
+            <Button
+                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                size="icon-sm"
+                variant="outline"
+                style="margin-left: 5px"
+                @click="handleHistory">
+                <History class="h-4 w-4" />
+            </Button>
+        </TooltipWrapper>
+        <span v-if="showLastJoinIndicator" class="inline-block ml-2">
+            <TooltipWrapper side="top" class="ml-5">
+                <template #content>
+                    <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
+                </template>
+                <MapPin class="h-4 w-4 text-muted-foreground" />
+            </TooltipWrapper>
+        </span>
+        <div v-if="showInstanceInfo" class="flex items-center ml-2">
+            <TooltipWrapper v-if="instanceInfoState.isValidInstance" side="top">
+                <template #content>
+                    <div>
+                        <span v-if="instance?.closedAt">
+                            Closed At: {{ formatDateFilter(instance.closedAt, 'long') }}<br />
+                        </span>
+                        <template v-if="instanceInfoState.canCloseInstance">
+                            <Button
+                                class="mt-1"
+                                size="sm"
+                                :disabled="!!instance?.closedAt"
+                                @click="closeInstance(resolvedInstanceLocation)">
+                                {{ t('dialog.user.info.close_instance') }}
+                            </Button>
+                            <br /><br />
+                        </template>
+                        <span>
+                            <span class="x-tag-platform-pc">PC: </span>{{ instance?.platforms?.standalonewindows }}
+                        </span>
+                        <br />
+                        <span>
+                            <span class="x-tag-platform-quest">Android: </span>{{ instance?.platforms?.android }}
+                        </span>
+                        <br />
+                        <span><span>iOS: </span>{{ instance?.platforms?.ios }}</span>
+                        <br />
+                        <span>{{ t('dialog.user.info.instance_game_version') }} {{ instance?.gameServerVersion }}</span>
+                        <br />
+                        <span v-if="instance?.queueEnabled"
+                            >{{ t('dialog.user.info.instance_queuing_enabled') }}<br
+                        /></span>
+                        <span v-if="instanceInfoState.disabledContentSettings">
+                            {{ t('dialog.user.info.instance_disabled_content') }}
+                            {{ instanceInfoState.disabledContentSettings }}<br />
+                        </span>
+                        <span v-if="instance?.users?.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
+                        <template v-for="user in instance?.users || []" :key="user.id">
+                            <span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">
+                                {{ user.displayName }}
+                            </span>
+                        </template>
+                    </div>
+                </template>
+                <div class="mr-2 text-muted-foreground">
+                    <span v-if="resolvedInstanceLocation === locationStore.lastLocation.location">
+                        {{ locationStore.lastLocation.playerList.size }}/{{ instance?.capacity }}
+                    </span>
+                    <span v-else-if="instance?.userCount"> {{ instance.userCount }}/{{ instance?.capacity }} </span>
+                </div>
+            </TooltipWrapper>
+
+            <span v-if="friendcount" class="ml-1 flex items-center text-muted-foreground"
+                ><UsersRound />{{ friendcount }}</span
+            >
+            <span v-if="instanceInfoState.isValidInstance && !instance?.hasCapacityForYou" class="ml-1">
+                {{ t('dialog.user.info.instance_full') }}
+            </span>
+            <span v-if="instance?.queueSize" class="ml-1">
+                {{ t('dialog.user.info.instance_queue') }} {{ instance.queueSize }}
+            </span>
+            <span v-if="instanceInfoState.isAgeGated" class="ml-1">
+                {{ t('dialog.user.info.instance_age_gated') }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { History, Loader2, LogIn, Mail, MapPin, RefreshCw, UsersRound } from 'lucide-vue-next';
+    import { computed, reactive, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
+    import { useI18n } from 'vue-i18n';
+
+    import {
+        useGroupStore,
+        useInstanceStore,
+        useInviteStore,
+        useLaunchStore,
+        useLocationStore,
+        useModalStore,
+        useUserStore
+    } from '../stores';
+    import { checkCanInviteSelf, formatDateFilter, hasGroupPermission, parseLocation } from '../shared/utils';
+    import { instanceRequest, miscRequest } from '../api';
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const { t } = useI18n();
+
+    const locationStore = useLocationStore();
+    const userStore = useUserStore();
+    const groupStore = useGroupStore();
+    const instanceStore = useInstanceStore();
+    const modalStore = useModalStore();
+    const launchStore = useLaunchStore();
+    const inviteStore = useInviteStore();
+
+    const { instanceJoinHistory } = storeToRefs(instanceStore);
+    const { canOpenInstanceInGame } = storeToRefs(inviteStore);
+    const { isOpeningInstance } = storeToRefs(launchStore);
+
+    const props = defineProps({
+        location: {
+            type: String,
+            default: ''
+        },
+        launchLocation: {
+            type: String,
+            default: ''
+        },
+        inviteLocation: {
+            type: String,
+            default: ''
+        },
+        lastJoinLocation: {
+            type: String,
+            default: ''
+        },
+        instanceLocation: {
+            type: String,
+            default: ''
+        },
+        shortname: {
+            type: String,
+            default: ''
+        },
+        instance: {
+            type: Object,
+            default: null
+        },
+        friendcount: {
+            type: Number,
+            default: undefined
+        },
+        currentlocation: {
+            type: String,
+            default: ''
+        },
+        showLaunch: {
+            type: Boolean,
+            default: true
+        },
+        showInvite: {
+            type: Boolean,
+            default: true
+        },
+        showRefresh: {
+            type: Boolean,
+            default: true
+        },
+        showHistory: {
+            type: Boolean,
+            default: false
+        },
+        showLastJoin: {
+            type: Boolean,
+            default: true
+        },
+        showInstanceInfo: {
+            type: Boolean,
+            default: true
+        },
+        refreshTooltip: {
+            type: String,
+            default: ''
+        },
+        historyTooltip: {
+            type: String,
+            default: ''
+        },
+        onRefresh: {
+            type: Function,
+            default: null
+        },
+        onHistory: {
+            type: Function,
+            default: null
+        }
+    });
+
+    const resolvedLaunchLocation = computed(() => props.launchLocation || props.location);
+    const resolvedInviteLocation = computed(() => props.inviteLocation || props.location);
+    const resolvedLastJoinLocation = computed(() => props.lastJoinLocation || props.location);
+    const resolvedInstanceLocation = computed(() => props.instanceLocation || props.location);
+
+    const showLaunchButton = computed(() => props.showLaunch && checkCanInviteSelf(resolvedLaunchLocation.value));
+    const showInviteYourself = computed(() => props.showInvite && checkCanInviteSelf(resolvedInviteLocation.value));
+
+    const inviteStyle = computed(() => (showLaunchButton.value ? 'margin-left: 5px' : ''));
+    const showRefreshButton = computed(() => props.showRefresh && typeof props.onRefresh === 'function');
+    const showHistoryButton = computed(() => props.showHistory && typeof props.onHistory === 'function');
+
+    const lastJoin = ref(null);
+    const showLastJoinIndicator = computed(() => props.showLastJoin && lastJoin.value);
+
+    const instanceInfoState = reactive({
+        isValidInstance: false,
+        canCloseInstance: false,
+        isAgeGated: false,
+        disabledContentSettings: ''
+    });
+
+    const handleRefresh = () => {
+        if (typeof props.onRefresh === 'function') {
+            props.onRefresh();
+        }
+    };
+
+    const handleHistory = () => {
+        if (typeof props.onHistory === 'function') {
+            props.onHistory();
+        }
+    };
+
+    const confirmLaunch = () => {
+        launchStore.showLaunchDialog(resolvedLaunchLocation.value);
+    };
+
+    const confirmInvite = () => {
+        const L = parseLocation(resolvedInviteLocation.value);
+        if (!L.isRealInstance) {
+            return;
+        }
+
+        instanceRequest
+            .selfInvite({
+                instanceId: L.instanceId,
+                worldId: L.worldId,
+                shortName: props.shortname
+            })
+            .then((args) => {
+                toast.success('Self invite sent');
+                return args;
+            });
+    };
+
+    const openInstance = () => {
+        const L = parseLocation(resolvedInviteLocation.value);
+        if (!L.isRealInstance) {
+            return;
+        }
+
+        launchStore.tryOpenInstanceInVrc(L.tag, props.shortname);
+    };
+
+    const parseLastJoin = () => {
+        lastJoin.value = instanceJoinHistory.value.get(resolvedLastJoinLocation.value);
+    };
+
+    const parseInstanceInfo = () => {
+        Object.assign(instanceInfoState, {
+            isValidInstance: false,
+            canCloseInstance: false,
+            isAgeGated: false,
+            disabledContentSettings: ''
+        });
+
+        if (!resolvedInstanceLocation.value || !props.instance || Object.keys(props.instance).length === 0) return;
+
+        instanceInfoState.isValidInstance = true;
+        if (props.instance.ownerId === userStore.currentUser.id) {
+            instanceInfoState.canCloseInstance = true;
+        } else if (props.instance.ownerId?.startsWith('grp_')) {
+            const group = groupStore.cachedGroups.get(props.instance.ownerId);
+            instanceInfoState.canCloseInstance = hasGroupPermission(group, 'group-instance-moderate');
+        }
+        instanceInfoState.isAgeGated = props.instance.ageGate === true;
+        if (resolvedInstanceLocation.value?.includes('~ageGate')) instanceInfoState.isAgeGated = true;
+        if (props.instance.$disabledContentSettings?.length) {
+            instanceInfoState.disabledContentSettings = props.instance.$disabledContentSettings.join(', ');
+        }
+    };
+
+    const showUserDialog = (userId) => {
+        userStore.showUserDialog(userId);
+    };
+
+    const closeInstance = (location) => {
+        modalStore
+            .confirm({
+                description: 'Continue? X Instance, nobody will be able to join',
+                title: 'Confirm'
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
+                const args = await miscRequest.closeInstance({ location, hardClose: false });
+                if (args.json) {
+                    toast.success(t('message.instance.closed'));
+                    instanceStore.applyInstance(args.json);
+                }
+            })
+            .catch(() => {});
+    };
+
+    watch(() => resolvedLastJoinLocation.value, parseLastJoin, { immediate: true });
+    watch(() => props.currentlocation, parseLastJoin);
+    watch([resolvedInstanceLocation, () => props.instance, () => props.friendcount], parseInstanceInfo, {
+        immediate: true
+    });
+</script>
+
+<style scoped>
+    .inline-block {
+        display: inline-block;
+    }
+    .ml-5 {
+        margin-left: 5px;
+    }
+</style>
--- a/src/components/InstanceInfo.vue
+++ b/src/components/InstanceInfo.vue
@@ -1,140 +0,0 @@
-<template>
-    <div class="flex items-center ml-2">
-        <TooltipWrapper v-if="state.isValidInstance" side="bottom">
-            <template #content>
-                <div>
-                    <span v-if="props.instance.closedAt"
-                        >Closed At: {{ formatDateFilter(props.instance.closedAt, 'long') }}<br
-                    /></span>
-                    <template v-if="state.canCloseInstance">
-                        <Button
-                            class="mt-1"
-                            size="sm"
-                            :disabled="!!props.instance.closedAt"
-                            @click="closeInstance(props.location)">
-                            {{ t('dialog.user.info.close_instance') }} </Button
-                        ><br /><br />
-                    </template>
-                    <span
-                        ><span class="x-tag-platform-pc">PC: </span
-                        >{{ props.instance.platforms.standalonewindows }}</span
-                    ><br />
-                    <span
-                        ><span class="x-tag-platform-quest">Android: </span>{{ props.instance.platforms.android }}</span
-                    ><br />
-                    <span><span>iOS: </span>{{ props.instance.platforms.ios }}</span
-                    ><br />
-                    <span>{{ t('dialog.user.info.instance_game_version') }} {{ props.instance.gameServerVersion }}</span
-                    ><br />
-                    <span v-if="props.instance.queueEnabled"
-                        >{{ t('dialog.user.info.instance_queuing_enabled') }}<br
-                    /></span>
-                    <span v-if="state.disabledContentSettings"
-                        >{{ t('dialog.user.info.instance_disabled_content') }} {{ state.disabledContentSettings }}<br
-                    /></span>
-                    <span v-if="props.instance.users.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
-                    <template v-for="user in props.instance.users" :key="user.id">
-                        <span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">{{
-                            user.displayName
-                        }}</span>
-                    </template>
-                </div>
-            </template>
-            <Info class="text-xs text-accent-foreground" />
-        </TooltipWrapper>
-        <span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
-            >{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
-        >
-        <span v-else-if="props.instance.userCount" style="margin-left: 5px"
-            >{{ props.instance.userCount }}/{{ props.instance.capacity }}</span
-        >
-        <span v-if="props.friendcount" style="margin-left: 5px">({{ props.friendcount }})</span>
-        <span v-if="state.isValidInstance && !props.instance.hasCapacityForYou" style="margin-left: 5px">{{
-            t('dialog.user.info.instance_full')
-        }}</span>
-        <span v-if="props.instance.queueSize" style="margin-left: 5px"
-            >{{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }}</span
-        >
-        <span v-if="state.isAgeGated" style="margin-left: 5px">{{ t('dialog.user.info.instance_age_gated') }}</span>
-    </div>
-</template>
-
-<script setup>
-    import { reactive, watch } from 'vue';
-    import { Button } from '@/components/ui/button';
-    import { Info } from 'lucide-vue-next';
-    import { toast } from 'vue-sonner';
-    import { useI18n } from 'vue-i18n';
-
-    import { useGroupStore, useInstanceStore, useLocationStore, useModalStore, useUserStore } from '../stores';
-    import { formatDateFilter, hasGroupPermission } from '../shared/utils';
-    import { miscRequest } from '../api';
-
-    const { t } = useI18n();
-
-    const locationStore = useLocationStore();
-    const userStore = useUserStore();
-    const groupStore = useGroupStore();
-    const instanceStore = useInstanceStore();
-    const modalStore = useModalStore();
-
-    const props = defineProps({
-        location: String,
-        instance: Object,
-        friendcount: Number
-    });
-
-    const state = reactive({
-        isValidInstance: false,
-        canCloseInstance: false,
-        isAgeGated: false,
-        disabledContentSettings: ''
-    });
-
-    function parse() {
-        Object.assign(state, {
-            isValidInstance: false,
-            canCloseInstance: false,
-            isAgeGated: false,
-            disabledContentSettings: ''
-        });
-
-        if (!props.location || !props.instance || Object.keys(props.instance).length === 0) return;
-
-        state.isValidInstance = true;
-        if (props.instance.ownerId === userStore.currentUser.id) {
-            state.canCloseInstance = true;
-        } else if (props.instance.ownerId?.startsWith('grp_')) {
-            const group = groupStore.cachedGroups.get(props.instance.ownerId);
-            state.canCloseInstance = hasGroupPermission(group, 'group-instance-moderate');
-        }
-        state.isAgeGated = props.instance.ageGate === true;
-        if (props.location?.includes('~ageGate')) state.isAgeGated = true;
-        if (props.instance.$disabledContentSettings?.length) {
-            state.disabledContentSettings = props.instance.$disabledContentSettings.join(', ');
-        }
-    }
-
-    watch([() => props.location, () => props.instance, () => props.friendcount], parse, { immediate: true });
-
-    function showUserDialog(userId) {
-        userStore.showUserDialog(userId);
-    }
-
-    function closeInstance(location) {
-        modalStore
-            .confirm({
-                description: 'Continue? X Instance, nobody will be able to join',
-                title: 'Confirm'
-            })
-            .then(async ({ ok }) => {
-                if (!ok) return;
-                const args = await miscRequest.closeInstance({ location, hardClose: false });
-                if (args.json) {
-                    toast.success(t('message.instance.closed'));
-                    instanceStore.applyInstance(args.json);
-                }
-            })
-            .catch(() => {});
-    }
-</script>
--- a/src/components/InviteYourself.vue
+++ b/src/components/InviteYourself.vue
@@ -1,91 +0,0 @@
-<template>
-    <div v-if="isVisible" :class="['inline-block']">
-        <TooltipWrapper v-if="!canOpenInstanceInGame" side="top" :content="t('dialog.user.info.self_invite_tooltip')">
-            <Button
-                class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                v-show="isVisible"
-                @click="confirmInvite"
-                ><Mail class="h-4 w-4"
-            /></Button>
-        </TooltipWrapper>
-        <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
-            <Button
-                class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                v-if="isOpeningInstance">
-                <Loader2 class="h-4 w-4 animate-spin" />
-            </Button>
-            <Button
-                class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                v-else
-                @click="openInstance"
-                ><Mail class="h-4 w-4"
-            /></Button>
-        </TooltipWrapper>
-    </div>
-</template>
-
-<script setup>
-    import { Loader2, Mail } from 'lucide-vue-next';
-    import { Button } from '@/components/ui/button';
-    import { computed } from 'vue';
-    import { storeToRefs } from 'pinia';
-    import { toast } from 'vue-sonner';
-    import { useI18n } from 'vue-i18n';
-
-    import { checkCanInviteSelf, parseLocation } from '../shared/utils';
-    import { useInviteStore, useLaunchStore } from '../stores';
-    import { instanceRequest } from '../api';
-
-    const props = defineProps({
-        location: String,
-        shortname: String
-    });
-
-    const { t } = useI18n();
-
-    const { canOpenInstanceInGame } = storeToRefs(useInviteStore());
-    const { tryOpenInstanceInVrc } = useLaunchStore();
-
-    const { isOpeningInstance } = storeToRefs(useLaunchStore());
-
-    const isVisible = computed(() => checkCanInviteSelf(props.location));
-
-    function confirmInvite() {
-        const L = parseLocation(props.location);
-        if (!L.isRealInstance) {
-            return;
-        }
-
-        instanceRequest
-            .selfInvite({
-                instanceId: L.instanceId,
-                worldId: L.worldId,
-                shortName: props.shortname
-            })
-            .then((args) => {
-                toast.success('Self invite sent');
-                return args;
-            });
-    }
-
-    function openInstance() {
-        const L = parseLocation(props.location);
-        if (!L.isRealInstance) {
-            return;
-        }
-
-        tryOpenInstanceInVrc(L.tag, props.shortname);
-    }
-</script>
-
-<style scoped>
-    .inline-block {
-        display: inline-block;
-    }
-</style>
--- a/src/components/LastJoin.vue
+++ b/src/components/LastJoin.vue
@@ -1,46 +0,0 @@
-<template>
-    <span v-if="lastJoin" :class="['inline-block', 'ml-5']">
-        <TooltipWrapper side="top" class="ml-5">
-            <template #content>
-                <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
-            </template>
-            <MapPin class="h-4 w-4 text-muted-foreground" />
-        </TooltipWrapper>
-    </span>
-</template>
-
-<script setup>
-    // TODO(icon): time aspect lost (map pin with time)
-    import { ref, watch } from 'vue';
-    import { MapPin } from 'lucide-vue-next';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import { useInstanceStore } from '../stores';
-
-    const { instanceJoinHistory } = storeToRefs(useInstanceStore());
-    const { t } = useI18n();
-
-    const props = defineProps({
-        location: String,
-        currentlocation: String
-    });
-
-    const lastJoin = ref(null);
-
-    function parse() {
-        lastJoin.value = instanceJoinHistory.value.get(props.location);
-    }
-
-    watch(() => props.location, parse, { immediate: true });
-    watch(() => props.currentlocation, parse);
-</script>
-
-<style scoped>
-    .ml-5 {
-        margin-left: 5px;
-    }
-    .inline-block {
-        display: inline-block;
-    }
-</style>
--- a/src/components/Launch.vue
+++ b/src/components/Launch.vue
@@ -1,44 +0,0 @@
-<template>
-    <div v-if="isVisible" class="inline-block">
-        <TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
-            ><Button
-                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                @click="confirm"
-                ><LogIn />
-            </Button>
-        </TooltipWrapper>
-    </div>
-</template>
-
-<script setup>
-    import { Button } from '@/components/ui/button';
-    import { LogIn } from 'lucide-vue-next';
-    import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
-
-    import { checkCanInviteSelf } from '../shared/utils';
-    import { useLaunchStore } from '../stores';
-
-    const launchStore = useLaunchStore();
-    const { t } = useI18n();
-
-    const props = defineProps({
-        location: String
-    });
-
-    const isVisible = computed(() => {
-        return checkCanInviteSelf(props.location);
-    });
-
-    function confirm() {
-        launchStore.showLaunchDialog(props.location);
-    }
-</script>
-
-<style scoped>
-    .inline-block {
-        display: inline-block;
-    }
-</style>
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="cursor-pointer">
        <div v-if="!text" class="transparent">-</div>
        <div v-show="text" class="flex items-center">
            <div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -574,7 +574,7 @@
    };

    const handleThemeToggle = () => {
-        appearanceSettingsStore.setThemeMode(isDarkMode.value ? 'light' : 'dark');
+        appearanceSettingsStore.toggleThemeMode();
    };

    const handleTableDensitySelect = (density) => {
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -207,12 +207,17 @@
                            <TooltipWrapper
                                v-if="avatarDialog.isFavorite"
                                side="top"
+                                :ignore-non-keyboard-focus="true"
                                :content="t('dialog.avatar.actions.favorite_tooltip')">
                                <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
                                    ><Star
                                /></Button>
                            </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
+                            <TooltipWrapper
+                                v-else
+                                side="top"
+                                :ignore-non-keyboard-focus="true"
+                                :content="t('dialog.avatar.actions.favorite_tooltip')">
                                <Button
                                    class="rounded-full"
                                    size="icon-lg"
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -377,21 +377,15 @@
                            <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
                                <div style="margin: 5px 0">
                                    <Location :location="room.tag" style="display: inline-block" />
-                                    <InviteYourself :location="room.tag" style="margin-left: 5px" />
-                                    <TooltipWrapper side="top" content="RefreshCw player count">
-                                        <Button
-                                            class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                            size="icon"
-                                            variant="outline"
-                                            @click="refreshInstancePlayerCount(room.tag)"
-                                            ><RefreshCw class="h-4 w-4" />
-                                        </Button>
-                                    </TooltipWrapper>
-                                    <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
-                                    <InstanceInfo
+                                    <InstanceActionBar
+                                        class="ml-1"
                                        :location="room.tag"
+                                        :currentlocation="lastLocation.location"
                                        :instance="room.ref"
-                                        :friendcount="room.friendCount" />
+                                        :friendcount="room.friendCount"
+                                        :show-launch="false"
+                                        refresh-tooltip="RefreshCw player count"
+                                        :on-refresh="() => refreshInstancePlayerCount(room.tag)" />
                                </div>
                                <div
                                    v-if="room.users.length"
@@ -1244,6 +1238,7 @@

    import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
    import GroupPostEditDialog from './GroupPostEditDialog.vue';
+    import InstanceActionBar from '../../InstanceActionBar.vue';
    import PreviousInstancesGroupDialog from '../PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';

    import * as workerTimers from 'worker-timers';
--- a/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
@@ -18,7 +18,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -70,7 +69,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -80,7 +81,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -98,19 +101,25 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    },
    {
        accessorKey: 'joinedAt',
        header: () => t('dialog.group_member_moderation.joined_at'),
        size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        )
    },
    {
        accessorKey: 'bannedAt',
        header: () => t('dialog.group_member_moderation.banned_at'),
        size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
+        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -68,7 +67,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -87,7 +90,9 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -68,7 +67,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -87,7 +90,9 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -68,7 +67,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -87,7 +90,9 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
@@ -18,7 +18,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -70,7 +69,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -80,7 +81,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -98,14 +101,18 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    },
    {
        accessorKey: 'joinedAt',
        header: () => t('dialog.group_member_moderation.joined_at'),
        size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        )
    },
    {
        accessorKey: 'visibility',
--- a/src/components/dialogs/UserDialog/UserActionDropdown.vue
+++ b/src/components/dialogs/UserDialog/UserActionDropdown.vue
@@ -4,10 +4,15 @@
            <TooltipWrapper
                v-if="userDialog.isFavorite"
                side="top"
+                :ignore-non-keyboard-focus="true"
                :content="t('dialog.user.actions.unfavorite_tooltip')">
                <Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
            </TooltipWrapper>
-            <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
+            <TooltipWrapper
+                v-else
+                side="top"
+                :ignore-non-keyboard-focus="true"
+                :content="t('dialog.user.actions.favorite_tooltip')">
                <Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
                    ><Star
                /></Button>
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -36,31 +36,15 @@
                                ">
                                <div style="flex: none">
                                    <template v-if="isRealInstance(userDialog.$location.tag)">
-                                        <div class="flex items-center mb-1">
-                                            <Launch :location="userDialog.$location.tag" />
-                                            <InviteYourself
-                                                :location="userDialog.$location.tag"
-                                                :shortname="userDialog.$location.shortName"
-                                                style="margin-left: 5px" />
-                                            <TooltipWrapper
-                                                side="top"
-                                                :content="t('dialog.user.info.refresh_instance_info')"
-                                                ><Button
-                                                    class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                                    size="icon"
-                                                    variant="outline"
-                                                    @click="refreshInstancePlayerCount(userDialog.$location.tag)"
-                                                    ><RefreshCw class="h-4 w-4" />
-                                                </Button>
-                                            </TooltipWrapper>
-                                            <LastJoin
-                                                :location="userDialog.$location.tag"
-                                                :currentlocation="lastLocation.location" />
-                                            <InstanceInfo
-                                                :location="userDialog.$location.tag"
-                                                :instance="userDialog.instance.ref"
-                                                :friendcount="userDialog.instance.friendCount" />
-                                        </div>
+                                        <InstanceActionBar
+                                            class="mb-1"
+                                            :location="userDialog.$location.tag"
+                                            :shortname="userDialog.$location.shortName"
+                                            :currentlocation="lastLocation.location"
+                                            :instance="userDialog.instance.ref"
+                                            :friendcount="userDialog.instance.friendCount"
+                                            :refresh-tooltip="t('dialog.user.info.refresh_instance_info')"
+                                            :on-refresh="() => refreshInstancePlayerCount(userDialog.$location.tag)" />
                                    </template>
                                    <Location
                                        :location="userDialog.ref.location"
@@ -154,22 +138,14 @@
                            </div>
                            <div class="x-friend-item" style="width: 100%; cursor: default">
                                <div class="detail">
-                                    <span
-                                        v-if="
+                                    <span class="name">
+                                        {{
                                            userDialog.id !== currentUser.id &&
                                            userDialog.ref.profilePicOverride &&
                                            userDialog.ref.currentAvatarImageUrl
-                                        "
-                                        class="name">
-                                        {{ t('dialog.user.info.avatar_info_last_seen') }}
-                                    </span>
-                                    <span v-else class="name">{{ t('dialog.user.info.avatar_info') }}</span>
-                                    <div class="extra">
-                                        <AvatarInfo
-                                            :imageurl="userDialog.ref.currentAvatarImageUrl"
-                                            :userid="userDialog.id"
-                                            :avatartags="userDialog.ref.currentAvatarTags"
-                                            style="display: inline-block" />
+                                                ? t('dialog.user.info.avatar_info_last_seen')
+                                                : t('dialog.user.info.avatar_info')
+                                        }}
                                        <TooltipWrapper
                                            v-if="
                                                userDialog.ref.profilePicOverride &&
@@ -179,6 +155,13 @@
                                            :content="t('dialog.user.info.vrcplus_hides_avatar')">
                                            <Info />
                                        </TooltipWrapper>
+                                    </span>
+                                    <div class="extra">
+                                        <AvatarInfo
+                                            :imageurl="userDialog.ref.currentAvatarImageUrl"
+                                            :userid="userDialog.id"
+                                            :avatartags="userDialog.ref.currentAvatarTags"
+                                            style="display: inline-block" />
                                    </div>
                                </div>
                            </div>
@@ -1385,6 +1368,7 @@
    import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
    import { database } from '../../../service/database';

+    import InstanceActionBar from '../../InstanceActionBar.vue';
    import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
    import UserSummaryHeader from './UserSummaryHeader.vue';

--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -111,7 +111,10 @@
                        v-if="userDialog.mutualFriendCount"
                        side="top"
                        :content="t('dialog.user.tags.mutual_friends')">
-                        <Badge variant="outline" class="x-tag-mutual-friend" style="margin-right: 5px; margin-top: 5px">
+                        <Badge
+                            variant="outline"
+                            class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!"
+                            style="margin-right: 5px; margin-top: 5px">
                            <Users class="mr-1 h-4 w-4 inline-block" />
                            {{ userDialog.mutualFriendCount }}
                        </Badge>
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -184,12 +184,17 @@
                            <TooltipWrapper
                                v-if="worldDialog.isFavorite"
                                side="top"
+                                :ignore-non-keyboard-focus="true"
                                :content="t('dialog.world.actions.favorites_tooltip')">
                                <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
                                    ><Star
                                /></Button>
                            </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('dialog.world.actions.favorites_tooltip')">
+                            <TooltipWrapper
+                                v-else
+                                side="top"
+                                :ignore-non-keyboard-focus="true"
+                                :content="t('dialog.world.actions.favorites_tooltip')">
                                <Button
                                    class="rounded-full"
                                    size="icon-lg"
@@ -355,42 +360,20 @@
                                            :locationobject="room.$location"
                                            :currentuserid="currentUser.id"
                                            :worlddialogshortname="worldDialog.$location.shortName" />
-                                        <Launch :location="room.tag" style="margin-left: 5px" />
-                                        <InviteYourself
+                                        <InstanceActionBar
+                                            class="ml-1"
                                            :location="room.$location.tag"
+                                            :launch-location="room.tag"
+                                            :instance-location="room.tag"
                                            :shortname="room.$location.shortName"
-                                            style="margin-left: 5px" />
-                                        <TooltipWrapper
-                                            side="top"
-                                            :content="t('dialog.world.instances.refresh_instance_info')">
-                                            <Button
-                                                class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                                size="icon"
-                                                variant="outline"
-                                                @click="refreshInstancePlayerCount(room.tag)"
-                                                ><RefreshCw class="h-4 w-4" />
-                                            </Button>
-                                        </TooltipWrapper>
-                                        <TooltipWrapper
-                                            v-if="instanceJoinHistory.get(room.$location.tag)"
-                                            side="top"
-                                            :content="t('dialog.previous_instances.info')">
-                                            <Button
-                                                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                                size="icon-sm"
-                                                variant="outline"
-                                                style="margin-left: 5px"
-                                                @click="showPreviousInstancesInfoDialog(room.location)"
-                                                ><History class="h-4 w-4" />
-                                            </Button>
-                                        </TooltipWrapper>
-                                        <LastJoin
-                                            :location="room.$location.tag"
-                                            :currentlocation="lastLocation.location" />
-                                        <InstanceInfo
-                                            :location="room.tag"
+                                            :currentlocation="lastLocation.location"
                                            :instance="room.ref"
-                                            :friendcount="room.friendCount" />
+                                            :friendcount="room.friendCount"
+                                            :refresh-tooltip="t('dialog.world.instances.refresh_instance_info')"
+                                            :show-history="!!instanceJoinHistory.get(room.$location.tag)"
+                                            :history-tooltip="t('dialog.previous_instances.info')"
+                                            :on-refresh="() => refreshInstancePlayerCount(room.tag)"
+                                            :on-history="() => showPreviousInstancesInfoDialog(room.location)" />
                                    </div>
                                    <div
                                        v-if="room.$location.userId || room.users.length"
@@ -804,6 +787,8 @@
    import { database } from '../../../service/database.js';
    import { formatJsonVars } from '../../../shared/utils/base/ui';

+    import InstanceActionBar from '../../InstanceActionBar.vue';
+
    const modalStore = useModalStore();

    const NewInstanceDialog = defineAsyncComponent(() => import('../NewInstanceDialog.vue'));
--- a/src/components/ui/button/index.js
+++ b/src/components/ui/button/index.js
@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
 export { default as Button } from './Button.vue';

 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
    {
        variants: {
            variant: {
--- a/src/components/ui/tooltip/TooltipWrapper.vue
+++ b/src/components/ui/tooltip/TooltipWrapper.vue
@@ -16,6 +16,7 @@
        sideOffset: { type: Number, required: false },
        delayDuration: { type: Number, required: false },
        disableHoverableContent: { type: Boolean, required: false },
+        ignoreNonKeyboardFocus: { type: Boolean, required: false },
        disabled: { type: Boolean, required: false },
        triggerAsChild: { type: Boolean, required: false, default: true },
        contentClass: { type: null, required: false }
@@ -27,7 +28,11 @@
 </script>

 <template>
-    <Tooltip :delay-duration="delayDuration" :disable-hoverable-content="disableHoverableContent" :disabled="disabled">
+    <Tooltip
+        :delay-duration="delayDuration"
+        :disable-hoverable-content="disableHoverableContent"
+        :ignore-non-keyboard-focus="ignoreNonKeyboardFocus"
+        :disabled="disabled">
        <TooltipTrigger :as-child="triggerAsChild" v-bind="attrs">
            <slot />
        </TooltipTrigger>