add empty component and poilsh styles

src/components/dialogs/UserDialog/UserDialog.vue

@@ -978,18 +978,31 @@
                     </div>
                 </div>
                 <div class="x-friend-list" style="margin-top: 10px; min-height: 60px">
+                    <template v-if="userDialog.worlds.length">
+                        <div
+                            v-for="world in userDialog.worlds"
+                            :key="world.id"
+                            class="x-friend-item x-friend-item-border"
+                            @click="showWorldDialog(world.id)">
+                            <div class="avatar">
+                                <img :src="world.thumbnailImageUrl" loading="lazy" />
+                            </div>
+                            <div class="detail">
+                                <span class="name" v-text="world.name"></span>
+                                <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
+                            </div>
+                        </div>
+                    </template>
                     <div
-                        v-for="world in userDialog.worlds"
-                        :key="world.id"
-                        class="x-friend-item x-friend-item-border"
-                        @click="showWorldDialog(world.id)">
-                        <div class="avatar">
-                            <img :src="world.thumbnailImageUrl" loading="lazy" />
-                        </div>
-                        <div class="detail">
-                            <span class="name" v-text="world.name"></span>
-                            <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
-                        </div>
+                        v-else-if="!userDialog.isWorldsLoading"
+                        style="
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            min-height: 120px;
+                            width: 100%;
+                        ">
+                        <DataTableEmpty type="nodata" />
                     </div>
                 </div>
             </template>
@@ -1055,7 +1068,7 @@
                 </template>
                 <template v-else-if="!userDialog.isFavoriteWorldsLoading">
                     <div style="display: flex; justify-content: center; align-items: center; height: 100%">
-                        <span style="font-size: 16px">No favorite worlds found.</span>
+                        <DataTableEmpty type="nodata" />
                     </div>
                 </template>
             </template>
@@ -1127,25 +1140,41 @@
                     </div>
                 </div>
                 <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 50vh">
+                    <template v-if="userDialogAvatars.length">
+                        <div
+                            v-for="avatar in userDialogAvatars"
+                            :key="avatar.id"
+                            class="x-friend-item x-friend-item-border"
+                            @click="showAvatarDialog(avatar.id)">
+                            <div class="avatar">
+                                <img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" />
+                            </div>
+                            <div class="detail">
+                                <span class="name" v-text="avatar.name"></span>
+                                <span
+                                    v-if="avatar.releaseStatus === 'public'"
+                                    class="extra"
+                                    v-text="avatar.releaseStatus">
+                                </span>
+                                <span
+                                    v-else-if="avatar.releaseStatus === 'private'"
+                                    class="extra"
+                                    v-text="avatar.releaseStatus">
+                                </span>
+                                <span v-else class="extra" v-text="avatar.releaseStatus"></span>
+                            </div>
+                        </div>
+                    </template>
                     <div
-                        v-for="avatar in userDialogAvatars"
-                        :key="avatar.id"
-                        class="x-friend-item x-friend-item-border"
-                        @click="showAvatarDialog(avatar.id)">
-                        <div class="avatar">
-                            <img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" />
-                        </div>
-                        <div class="detail">
-                            <span class="name" v-text="avatar.name"></span>
-                            <span v-if="avatar.releaseStatus === 'public'" class="extra" v-text="avatar.releaseStatus">
-                            </span>
-                            <span
-                                v-else-if="avatar.releaseStatus === 'private'"
-                                class="extra"
-                                v-text="avatar.releaseStatus">
-                            </span>
-                            <span v-else class="extra" v-text="avatar.releaseStatus"></span>
-                        </div>
+                        v-else-if="!userDialog.isAvatarsLoading"
+                        style="
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            min-height: 120px;
+                            width: 100%;
+                        ">
+                        <DataTableEmpty type="nodata" />
                     </div>
                 </div>
             </template>
@@ -1217,6 +1246,7 @@
     import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { Spinner } from '@/components/ui/spinner';
     import { TabsUnderline } from '@/components/ui/tabs';
     import { storeToRefs } from 'pinia';

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

@@ -0,0 +1,34 @@
+<template>
+    <Empty>
+        <EmptyHeader>
+            <EmptyMedia variant="icon">
+                <SearchAlert v-if="props.type === 'nomatch'" class="text-lg" />
+                <Inbox v-else class="text-lg" />
+            </EmptyMedia>
+            <EmptyDescription>
+                {{ emptyText }}
+            </EmptyDescription>
+        </EmptyHeader>
+    </Empty>
+</template>
+
+<script setup>
+    import { Inbox, SearchAlert } from 'lucide-vue-next';
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+
+    import { Empty, EmptyDescription, EmptyHeader, EmptyMedia } from '../empty';
+
+    const props = defineProps({
+        type: {
+            type: String,
+            default: 'nodata'
+        }
+    });
+
+    const { t } = useI18n();
+
+    const emptyText = computed(() => {
+        return props.type === 'nomatch' ? t('common.no_matching_records') : t('common.no_data');
+    });
+</script>

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

@@ -59,9 +59,9 @@
                         </template>
 
                         <TableRow v-else>
-                            <TableCell class="h-24 text-center">
+                            <TableCell class="h-24 text-center" :colspan="table.getVisibleLeafColumns().length">
                                 <slot name="empty">
-                                    {{ emptyText }}
+                                    <DataTableEmpty :type="emptyType" />
                                 </slot>
                             </TableCell>
                         </TableRow>
@@ -134,6 +134,8 @@
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
 
+    import DataTableEmpty from './DataTableEmpty.vue';
+
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const { isDataTableStriped } = storeToRefs(appearanceSettingsStore);
 
@@ -162,10 +164,6 @@
             type: Array,
             default: () => []
         },
-        emptyText: {
-            type: String,
-            default: 'No results.'
-        },
         showPagination: {
             type: Boolean,
             default: true
@@ -187,6 +185,11 @@
     const { t } = useI18n();
     const tableScrollRef = ref(null);
 
+    const emptyType = computed(() => {
+        const totalRows = props.table?.getCoreRowModel?.().rows?.length ?? 0;
+        return totalRows === 0 ? 'nodata' : 'nomatch';
+    });
+
     const expandedRenderer = computed(() => {
         const columns = props.table.getAllColumns?.() ?? [];
         for (const column of columns) {

src/components/ui/data-table/index.js

@@ -1 +1,2 @@
 export { default as DataTableLayout } from './DataTableLayout.vue';
+export { default as DataTableEmpty } from './DataTableEmpty.vue';

src/components/ui/empty/Empty.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="empty"
+        :class="
+            cn(
+                'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
+</template>

src/components/ui/empty/EmptyContent.vue

@@ -0,0 +1,15 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="empty-content"
+        :class="cn('flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/empty/EmptyDescription.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <p
+        data-slot="empty-description"
+        :class="
+            cn(
+                'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+                $attrs.class ?? ''
+            )
+        ">
+        <slot />
+    </p>
+</template>

src/components/ui/empty/EmptyHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div data-slot="empty-header" :class="cn('flex max-w-sm flex-col items-center gap-2 text-center', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/empty/EmptyMedia.vue

@@ -0,0 +1,16 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { emptyMediaVariants } from '.';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        variant: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div data-slot="empty-icon" :data-variant="variant" :class="cn(emptyMediaVariants({ variant }), props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/empty/EmptyTitle.vue

@@ -0,0 +1,13 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div data-slot="empty-title" :class="cn('text-lg font-medium tracking-tight', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/empty/index.js

@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority';
+
+export { default as Empty } from './Empty.vue';
+export { default as EmptyContent } from './EmptyContent.vue';
+export { default as EmptyDescription } from './EmptyDescription.vue';
+export { default as EmptyHeader } from './EmptyHeader.vue';
+export { default as EmptyMedia } from './EmptyMedia.vue';
+export { default as EmptyTitle } from './EmptyTitle.vue';
+
+export const emptyMediaVariants = cva(
+    'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'bg-transparent',
+                icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+            }
+        },
+        defaultVariants: {
+            variant: 'default'
+        }
+    }
+);

src/localization/en.json

@@ -2437,6 +2437,10 @@
             "action": "Action"
         }
     },
+    "common": {
+        "no_data": "No data",
+        "no_matching_records": "No matching records"
+    },
     "vr": {
         "status": {
             "timer": "Timer:",

src/views/Charts/components/InstanceActivity.vue

@@ -6,7 +6,7 @@
                 <span>{{ t('view.charts.instance_activity.header') }}</span>
                 <HoverCard>
                     <HoverCardTrigger as-child>
-                        <Info style="margin-left: 5px; font-size: 12px; opacity: 0.7" />
+                        <Info style="margin-left: 4px; font-size: 12px; opacity: 0.7" />
                     </HoverCardTrigger>
                     <HoverCardContent side="bottom" align="start" class="w-75">
                         <div class="tips-popover">
@@ -23,7 +23,7 @@
                     <Button
                         class="rounded-full"
                         size="icon"
-                        variant="outline"
+                        variant="ghost"
                         style="margin-right: 5px"
                         @click="reloadData">
                         <RefreshCcw />
@@ -34,7 +34,7 @@
                     <PopoverTrigger asChild>
                         <div>
                             <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
-                                <Button class="rounded-full" size="icon" variant="outline" style="margin-right: 5px">
+                                <Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
                                     <Settings />
                                 </Button>
                             </TooltipWrapper>
@@ -79,7 +79,7 @@
                         </div>
                     </PopoverContent>
                 </Popover>
-                <ButtonGroup style="margin-right: 5px">
+                <ButtonGroup class="mr-2">
                     <TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
                         <Button
                             variant="outline"
@@ -136,7 +136,7 @@
 
         <div ref="activityChartRef" style="width: 100%"></div>
         <div v-if="!isLoading && activityData.length === 0" class="nodata">
-            <span>No data here, try another day</span>
+            <DataTableEmpty type="nodata" />
         </div>
 
         <transition name="el-fade-in-linear">
@@ -165,6 +165,7 @@
     import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
     import { fromDate, getLocalTimeZone, today } from '@internationalized/date';
     import { Button } from '@/components/ui/button';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { Calendar } from '@/components/ui/calendar';
     import { Separator } from '@/components/ui/separator';

src/views/Charts/components/InstanceActivityDetail.vue

@@ -10,12 +10,16 @@
             </transition>
         </div>
 
-        <div ref="activityDetailChartRef"></div>
+        <div v-if="hasChartData" ref="activityDetailChartRef"></div>
+        <div v-else style="display: flex; justify-content: center; align-items: center; min-height: 160px; width: 100%">
+            <DataTableEmpty type="nodata" />
+        </div>
     </div>
 </template>
 
 <script setup>
     import { computed, nextTick, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
 
     import dayjs from 'dayjs';
@@ -47,6 +51,7 @@
     let echartsInstance = null;
     const usersFirstActivity = ref(null);
     const resizeObserver = ref(null);
+    const hasChartData = computed(() => (props.activityDetailData || []).length > 0);
 
     const startTimeStamp = computed(() => {
         return props.activityDetailData.find((item) => item.user_id === currentUser.value.id)?.joinTime.valueOf();
@@ -189,7 +194,7 @@
         if (!props.activityDetailData || props.activityDetailData.length === 0) {
             return {
                 title: {
-                    text: 'No data available',
+                    text: 'No data',
                     left: 'center',
                     top: 'middle'
                 }

src/views/Charts/components/MutualFriends.vue

@@ -6,7 +6,7 @@
                     <Button
                         class="rounded-full"
                         size="icon"
-                        variant="outline"
+                        variant="ghost"
                         :disabled="!graphReady"
                         @click="openForceDialog">
                         <Settings />

src/views/Favorites/FavoritesAvatar.vue

@@ -244,7 +244,9 @@
                                     </div>
                                 </div>
                             </template>
-                            <div v-else class="group-empty">No Data</div>
+                            <div v-else class="group-empty">
+                                <DataTableEmpty type="nodata" />
+                            </div>
                             <TooltipWrapper
                                 v-if="!isCreatingLocalGroup"
                                 :disabled="isLocalUserVrcPlusSupporter"
@@ -401,7 +403,9 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nomatch" />
+                                </div>
                             </div>
                         </template>
                         <template v-else-if="activeRemoteGroup">
@@ -421,7 +425,9 @@
                                             @click="showAvatarDialog(favorite.id)" />
                                     </div>
                                 </template>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nodata" />
+                                </div>
                             </div>
                         </template>
                         <template v-else-if="!remoteAvatarGroupsResolved">
@@ -452,7 +458,9 @@
                                             @click="showAvatarDialog(favorite.id)" />
                                     </div>
                                 </template>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nodata" />
+                                </div>
                             </ScrollArea>
                         </template>
                         <template v-else-if="isHistorySelected">
@@ -468,7 +476,9 @@
                                             @click="showAvatarDialog(favorite.id)" />
                                     </div>
                                 </template>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nodata" />
+                                </div>
                             </div>
                         </template>
                         <template v-else>
@@ -484,9 +494,10 @@
 
 <script setup>
     import { computed, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
-    import { ArrowUpDown, Check, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
+    import { ArrowUpDown, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { ScrollArea } from '@/components/ui/scroll-area';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';

src/views/Favorites/FavoritesFriend.vue

@@ -163,7 +163,9 @@
                                     </div>
                                 </div>
                             </template>
-                            <div v-else class="group-empty">No Data</div>
+                            <div v-else class="group-empty">
+                                <DataTableEmpty type="nodata" />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -237,7 +239,9 @@
                                             @click="showUserDialog(favorite.id)" />
                                     </div>
                                 </template>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nodata" />
+                                </div>
                             </div>
                         </template>
                         <template v-else-if="!isSearchActive">
@@ -275,7 +279,9 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nomatch" />
+                                </div>
                             </div>
                         </template>
                     </div>
@@ -290,6 +296,7 @@
     import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
     import { ArrowUpDown, Check, Ellipsis, MoreHorizontal, RefreshCw } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { InputGroupSearch } from '@/components/ui/input-group';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';

src/views/Favorites/FavoritesWorld.vue

@@ -34,7 +34,7 @@
                     @input="searchWorldFavorites" />
                 <DropdownMenu v-model:open="worldToolbarMenuOpen">
                     <DropdownMenuTrigger as-child>
-                        <Button class="rounded-full" size="icon" variant="outline"><Ellipsis /></Button>
+                        <Button class="rounded-full" size="icon" variant="ghost"><Ellipsis /></Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent class="favorites-dropdown">
                         <li class="favorites-dropdown__control" @click.stop>
@@ -244,7 +244,9 @@
                                     </div>
                                 </div>
                             </template>
-                            <div v-else class="group-empty">No Data</div>
+                            <div v-else class="group-empty">
+                                <DataTableEmpty type="nodata" />
+                            </div>
                             <div
                                 v-if="!isCreatingLocalGroup"
                                 class="group-item group-item--new"
@@ -355,7 +357,9 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nomatch" />
+                                </div>
                             </div>
                         </template>
                         <template v-else>
@@ -377,7 +381,9 @@
                                             @click="showWorldDialog(favorite.id)" />
                                     </div>
                                 </template>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nodata" />
+                                </div>
                             </div>
                             <div
                                 v-else-if="activeLocalGroupName && isLocalGroupSelected"
@@ -410,9 +416,13 @@
                                         </template>
                                     </div>
                                 </template>
-                                <div v-else class="favorites-empty">No Data</div>
+                                <div v-else class="favorites-empty">
+                                    <DataTableEmpty type="nodata" />
+                                </div>
+                            </div>
+                            <div v-else class="favorites-empty">
+                                <DataTableEmpty type="nodata" />
                             </div>
-                            <div v-else class="favorites-empty">No Data</div>
                         </template>
                     </div>
                 </div>
@@ -427,6 +437,7 @@
     import { ArrowUpDown, Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';

src/views/FriendsLocations/FriendsLocations.vue

@@ -14,7 +14,7 @@
                     <div>
                         <Popover>
                             <PopoverTrigger asChild>
-                                <Button class="rounded-full mr-2" size="icon" variant="outline">
+                                <Button class="rounded-full mr-2" size="icon" variant="ghost">
                                     <Settings />
                                 </Button>
                             </PopoverTrigger>
@@ -112,7 +112,9 @@
                     </div>
                 </template>
             </div>
-            <div v-else class="friend-view__empty">{{ t('view.friends_locations.no_matching_friends') }}</div>
+            <div v-else class="friend-view__empty">
+                <DataTableEmpty type="nomatch" />
+            </div>
         </div>
         <div v-else class="friend-view__initial-loading">
             <Loader2 class="friend-view__loading-icon" :size="22" />
@@ -126,6 +128,7 @@
     import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
     import { Loader2, Settings } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { InputGroupSearch } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/views/Moderation/Moderation.vue

@@ -27,7 +27,7 @@
             <TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
                 <Button
                     class="rounded-full"
-                    variant="outline"
+                    variant="ghost"
                     size="icon-sm"
                     :disabled="playerModerationTable.loading"
                     @click="refreshPlayerModerations()">

src/views/Notifications/Notification.vue

@@ -60,7 +60,7 @@
                     <TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
                         <Button
                             class="rounded-full"
-                            variant="outline"
+                            variant="ghost"
                             size="icon-sm"
                             :disabled="isNotificationsLoading"
                             style="flex: none"

src/views/Sidebar/Sidebar.vue

@@ -56,7 +56,7 @@
                                 </div>
                             </button>
                             <div v-if="quickSearchItems.length === 0" class="px-2 py-2 text-xs opacity-70">
-                                No results
+                                <DataTableEmpty type="nomatch" />
                             </div>
                         </div>
                     </PopoverContent>
@@ -66,7 +66,7 @@
                 <TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
                     <Button
                         class="rounded-full"
-                        variant="outline"
+                        variant="ghost"
                         size="icon-sm"
                         :disabled="isRefreshFriendsLoading"
                         style="margin-right: 10px"
@@ -117,6 +117,7 @@
     import { computed, nextTick, onMounted, ref, watch } from 'vue';
     import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
     import { Button } from '@/components/ui/button';
+    import { DataTableEmpty } from '@/components/ui/data-table';
     import { Input } from '@/components/ui/input';
     import { RefreshCw } from 'lucide-vue-next';
     import { ScrollArea } from '@/components/ui/scroll-area';